@100mslive/hms-ai-ui
Version:
100ms AI UI components
1,303 lines (1,279 loc) • 131 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
// src/components/ui/card.tsx
import * as React from "react";
// src/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
function isPlainObject(value) {
return Boolean(
value && typeof value === "object" && !Array.isArray(value) && Object.prototype.toString.call(value) === "[object Object]"
);
}
function mergeDeep(target, ...sources) {
if (!sources.length) {
return target;
}
const source = sources.shift();
if (source === void 0) {
return target;
}
if (isPlainObject(target) && isPlainObject(source)) {
Object.keys(source).forEach((key) => {
if (isPlainObject(source[key])) {
if (!target[key]) {
Object.assign(target, { [key]: {} });
}
mergeDeep(target[key], source[key]);
} else {
Object.assign(target, { [key]: source[key] });
}
});
}
return mergeDeep(target, ...sources);
}
// src/components/ui/card.tsx
var Card = React.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React.createElement(
"div",
__spreadValues({
ref,
className: cn(
"rounded-xl border bg-card text-card-foreground shadow",
className
)
}, props)
);
});
Card.displayName = "Card";
var CardHeader = React.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React.createElement(
"div",
__spreadValues({
ref,
className: cn("flex flex-col space-y-1.5 p-6", className)
}, props)
);
});
CardHeader.displayName = "CardHeader";
var CardTitle = React.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React.createElement(
"div",
__spreadValues({
ref,
className: cn("font-semibold leading-none tracking-tight", className)
}, props)
);
});
CardTitle.displayName = "CardTitle";
var CardDescription = React.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React.createElement(
"div",
__spreadValues({
ref,
className: cn("text-sm text-muted-foreground", className)
}, props)
);
});
CardDescription.displayName = "CardDescription";
var CardContent = React.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
});
CardContent.displayName = "CardContent";
var CardFooter = React.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React.createElement(
"div",
__spreadValues({
ref,
className: cn("flex items-center p-6 pt-0", className)
}, props)
);
});
CardFooter.displayName = "CardFooter";
// src/components/ui/input.tsx
import * as React3 from "react";
// src/components/ui/flex.tsx
import * as React2 from "react";
import { cva } from "class-variance-authority";
var flexVariants = cva("flex", {
variants: {
justify: {
start: "justify-start",
end: "justify-end",
center: "justify-center",
between: "justify-between",
around: "justify-around",
evenly: "justify-evenly"
},
align: {
start: "items-start",
end: "items-end",
center: "items-center",
baseline: "items-baseline",
stretch: "items-stretch"
},
direction: {
row: "flex-row",
column: "flex-col",
rowReverse: "flex-row-reverse",
columnReverse: "flex-col-reverse"
}
}
});
var Flex = React2.forwardRef(
(_a, ref) => {
var _b = _a, { justify, align, direction, className } = _b, props = __objRest(_b, ["justify", "align", "direction", "className"]);
return /* @__PURE__ */ React2.createElement(
"div",
__spreadValues({
ref,
className: cn(flexVariants({ justify, align, direction }), className)
}, props)
);
}
);
var Box = React2.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React2.createElement("div", __spreadValues({ ref, className: cn(className) }, props));
});
// src/components/ui/input.tsx
import { cva as cva2 } from "class-variance-authority";
import { useMeasure } from "react-use";
var inputVariants = cva2(
"flex px-3.5 w-full border rounded-lg border-bd-primary bg-bg-primary placeholder:text-txt-placeholder py-2.5 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-1 text-txt-primary focus-visible:border-2 focus-visible:border-bd-brand disabled:cursor-not-allowed disabled:opacity-50 text-md",
{
variants: {
error: {
true: "focus-visible:border-bd-error border-2 border-bd-error ",
false: ""
}
}
}
);
var Input = React3.forwardRef((_a, ref) => {
var _b = _a, { className, error, type } = _b, props = __objRest(_b, ["className", "error", "type"]);
return /* @__PURE__ */ React3.createElement(
"input",
__spreadValues({
type,
className: cn(inputVariants({ error, className })),
ref
}, props)
);
});
Input.displayName = "Input";
var ComposableInput = React3.forwardRef(
(_a, ref) => {
var _b = _a, {
className,
error,
errorText,
type,
label,
hintText,
required,
leftComponent,
rightComponent
} = _b, props = __objRest(_b, [
"className",
"error",
"errorText",
"type",
"label",
"hintText",
"required",
"leftComponent",
"rightComponent"
]);
const [leftRef, { width: leftWidth }] = useMeasure();
const [rightRef, { width: rightWidth }] = useMeasure();
return /* @__PURE__ */ React3.createElement(Flex, { direction: "column" }, label ? /* @__PURE__ */ React3.createElement(Flex, { className: "mb-1.5" }, /* @__PURE__ */ React3.createElement("label", { className: "text-txt-primary text-sm font-medium mr-1" }, label), required && /* @__PURE__ */ React3.createElement("span", { className: "text-txt-brand-tertiary text-sm font-medium" }, "*")) : null, /* @__PURE__ */ React3.createElement(Flex, { className: `relative ${errorText ? "mb-1.5" : ""}` }, leftComponent ? /* @__PURE__ */ React3.createElement("div", { className: "absolute py-2.5 left-2 z-1", ref: leftRef }, leftComponent) : null, /* @__PURE__ */ React3.createElement(
Input,
__spreadValues({
ref,
type,
className: inputVariants({
error,
className
}),
style: {
paddingLeft: leftWidth ? leftWidth + 10 : void 0,
paddingRight: rightWidth ? rightWidth + 8 : void 0
}
}, props)
), rightComponent ? /* @__PURE__ */ React3.createElement("div", { className: "absolute py-2.5 right-2 z-1", ref: rightRef }, rightComponent) : null), !error && hintText && /* @__PURE__ */ React3.createElement("span", { className: "text-xs text-txt-tertiary font-medium" }, hintText), error && errorText && /* @__PURE__ */ React3.createElement("span", { className: "text-xs text-txt-error-primary font-medium" }, errorText));
}
);
ComposableInput.displayName = "ComposableInput";
// src/components/ui/accordion.tsx
import * as React4 from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";
var Accordion = AccordionPrimitive.Root;
var AccordionItem = React4.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React4.createElement(
AccordionPrimitive.Item,
__spreadValues({
ref,
className: cn("border-b", className)
}, props)
);
});
AccordionItem.displayName = "AccordionItem";
var AccordionTrigger = React4.forwardRef((_a, ref) => {
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
return /* @__PURE__ */ React4.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React4.createElement(
AccordionPrimitive.Trigger,
__spreadValues({
ref,
className: cn(
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
className
)
}, props),
children,
/* @__PURE__ */ React4.createElement(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })
));
});
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
var AccordionContent = React4.forwardRef((_a, ref) => {
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
return /* @__PURE__ */ React4.createElement(
AccordionPrimitive.Content,
__spreadValues({
ref,
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
}, props),
/* @__PURE__ */ React4.createElement("div", { className: cn("pb-4 pt-0", className) }, children)
);
});
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
// src/components/ui/button.tsx
import * as React5 from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva as cva3 } from "class-variance-authority";
var buttonVariants = cva3(
"inline-flex items-center rounded-none justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
primary: "bg-bg-brand-solid cursor-pointer border-fg-white border-2 text-txt-primary-on-brand shadow-sm hover:shadow-md hover:bg-bg-brand-solid-hover focus:border-2 focus:border-bg-brand-solid ",
"secondary-gray": "bg-bg-primary border border-bd-primary cursor-pointer text-txt-secondary shadow-sm hover:bg-bg-primary-hover hover:border-bg-primary-hover hover:text-txt-secondary-hover focus:border-bd focus:bg-bg-primary focus:border-bd-primary ",
secondary: "bg-bg-primary border border-bd-brand-subtle cursor-pointer text-txt-brand-tertiary shadow-sm hover:bg-bg-primary-hover hover:text-txt-brand-primary focus:bg-primary focus:border-bd-brand-subtle ",
"tertiary-gray": "cursor-pointer text-txt-tertiary shadow-sm hover:bg-bg-primary-hover hover:text-txt-tertiary-hover focus:bg-bg-primary",
tertiary: "cursor-pointer text-txt-secondary shadow-sm hover:bg-bg-brand-primary hover:text-txt-brand-primary focus:shadow-md focus:bg-primary",
link: "px-0 py-0 text-txt-tertiary hover:text-txt-tertiary-hover focus:text-txt-tertiary",
"link-gray": "px-0 py-0 text-txt-tertiary-hover hover:text-txt-brand-primary focus:text-txt-tertiary-hover"
},
disable: {
true: "",
false: ""
},
size: {
default: "px-4 py-2 text-sm font-semibold rounded-md",
sm: " py-2 px-3 text-sm gap-1.5 font-semibold rounded-md",
md: "py-2.5 text-sm px-3.5 gap-1.5 font-semibold rounded-md",
lg: "text-md px-4 py-2.5 gap-2 font-semibold rounded-lg",
xl: "text-md px-[1.125rem] py-3 font-semibold rounded-lg",
"2xl": "text-lg py-4 px-[1.375rem] font-semibold rounded-lg",
link: "p-0"
}
},
compoundVariants: [
{
variant: "primary",
disable: true,
class: "bg-bg-disabled cursor-not-allowed hover:bg-bg-disabled border border-bd-disabled-subtle shadow-md text-txt-disabled "
},
{
variant: "secondary",
disable: true,
class: "bg-bg-primary cursor-not-allowed border border-bd-disabled-subtle shadow-md text-txt-disabled "
},
{
variant: "secondary-gray",
disable: true,
class: "bg-bg-primary cursor-not-allowed border border-bd-disabled-subtle shadow-md text-txt-disabled "
},
{
variant: "tertiary",
disable: true,
class: "bg-bg-primary cursor-not-allowed border border-bd-disabled-subtle shadow-md text-txt-disabled "
},
{
variant: "tertiary-gray",
disable: true,
class: "bg-bg-primary cursor-not-allowed border border-bd-disabled-subtle shadow-md text-txt-disabled "
},
{
variant: "link",
disable: true,
class: "bg-bg-primary cursor-not-allowed border border-bd-disabled-subtle shadow-md text-txt-disabled "
},
{
variant: "link-gray",
disable: true,
class: "bg-bg-primary cursor-not-allowed border border-bd-disabled-subtle shadow-md text-txt-disabled "
}
],
defaultVariants: {
variant: "secondary",
size: "default"
}
}
);
var Button = React5.forwardRef(
(_a, ref) => {
var _b = _a, { className, variant, disable, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "disable", "size", "asChild"]);
const Comp = asChild ? Slot : "button";
return /* @__PURE__ */ React5.createElement(
Comp,
__spreadValues({
className: cn(buttonVariants({ variant, size, disable, className })),
ref,
disabled: Boolean(disable)
}, props)
);
}
);
Button.displayName = "Button";
// src/components/ui/dialog.tsx
import * as React6 from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
var Dialog = DialogPrimitive.Root;
var DialogTrigger = DialogPrimitive.Trigger;
var DialogPortal = DialogPrimitive.Portal;
var DialogClose = DialogPrimitive.Close;
var DialogOverlay = React6.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React6.createElement(
DialogPrimitive.Overlay,
__spreadValues({
ref,
className: cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)
}, props)
);
});
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
var DialogContent = React6.forwardRef((_a, ref) => {
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
return /* @__PURE__ */ React6.createElement(DialogPortal, null, /* @__PURE__ */ React6.createElement(DialogOverlay, null), /* @__PURE__ */ React6.createElement(
DialogPrimitive.Content,
__spreadValues({
ref,
className: cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)
}, props),
children,
/* @__PURE__ */ React6.createElement(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" }, /* @__PURE__ */ React6.createElement(X, { className: "h-4 w-4" }), /* @__PURE__ */ React6.createElement("span", { className: "sr-only" }, "Close"))
));
});
DialogContent.displayName = DialogPrimitive.Content.displayName;
var DialogHeader = (_a) => {
var _b = _a, {
className
} = _b, props = __objRest(_b, [
"className"
]);
return /* @__PURE__ */ React6.createElement(
"div",
__spreadValues({
className: cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)
}, props)
);
};
DialogHeader.displayName = "DialogHeader";
var DialogFooter = (_a) => {
var _b = _a, {
className
} = _b, props = __objRest(_b, [
"className"
]);
return /* @__PURE__ */ React6.createElement(
"div",
__spreadValues({
className: cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)
}, props)
);
};
DialogFooter.displayName = "DialogFooter";
var DialogTitle = React6.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React6.createElement(
DialogPrimitive.Title,
__spreadValues({
ref,
className: cn(
"text-lg font-semibold leading-none tracking-tight",
className
)
}, props)
);
});
DialogTitle.displayName = DialogPrimitive.Title.displayName;
var DialogDescription = React6.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React6.createElement(
DialogPrimitive.Description,
__spreadValues({
ref,
className: cn("text-sm text-muted-foreground", className)
}, props)
);
});
DialogDescription.displayName = DialogPrimitive.Description.displayName;
// src/components/ui/slider.tsx
import * as React8 from "react";
import * as SliderPrimitive from "@radix-ui/react-slider";
// src/components/ui/tooltip.tsx
import * as React7 from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
var TooltipProvider = TooltipPrimitive.Provider;
var Tooltip = TooltipPrimitive.Root;
var TooltipTrigger = TooltipPrimitive.Trigger;
var TooltipContent = React7.forwardRef((_a, ref) => {
var _b = _a, { className, sideOffset = 4, side, arrowPresent } = _b, props = __objRest(_b, ["className", "sideOffset", "side", "arrowPresent"]);
return /* @__PURE__ */ React7.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React7.createElement(
TooltipPrimitive.Content,
__spreadValues({
ref,
sideOffset,
side,
avoidCollisions: false,
className: cn(
`z-50 rounded-md bg-black text-xs font-semibold leading-[18px] text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 py-2 px-3`,
className
)
}, props),
props.children,
arrowPresent && /* @__PURE__ */ React7.createElement(TooltipPrimitive.Arrow, { offset: 0, width: 12, height: 6 })
));
});
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
// src/components/ui/slider.tsx
var Slider = React8.forwardRef((props, ref) => {
var _b;
const _a = props, {
className,
tooltip = false,
tooltip_direction = "top",
value,
defaultValue,
onValueChange
} = _a, restProps = __objRest(_a, [
"className",
"tooltip",
"tooltip_direction",
"value",
"defaultValue",
"onValueChange"
]);
const initialValue = (_b = value != null ? value : defaultValue) != null ? _b : 30;
const [sliderValue, setSliderValue] = React8.useState(initialValue);
React8.useEffect(() => {
if (typeof value === "number") {
setSliderValue(value);
}
}, [value]);
const handleValueChange = (newValues) => {
const newValue = newValues[0];
setSliderValue(newValue);
if (onValueChange) {
onValueChange(newValue);
}
};
const tooltipClass = tooltip_direction === "bottom" ? "bg-white text-black" : "";
return /* @__PURE__ */ React8.createElement(TooltipProvider, null, /* @__PURE__ */ React8.createElement(
SliderPrimitive.Root,
__spreadValues({
ref,
className: cn(
"relative flex w-80 touch-none select-none items-center",
className
),
value: [sliderValue],
onValueChange: handleValueChange
}, restProps),
/* @__PURE__ */ React8.createElement(SliderPrimitive.Track, { className: "relative h-2 w-full overflow-hidden bg-bg-quaternary" }, /* @__PURE__ */ React8.createElement(SliderPrimitive.Range, { className: "absolute h-full bg-fg-brand-primary" })),
/* @__PURE__ */ React8.createElement(
SliderPrimitive.Thumb,
{
className: cn(
"block h-6 w-6 rounded-full border-2 border-bg-brand-solid bg-white shadow transition-colors",
"focus-visible:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-bg-brand-solid focus-visible:outline-offset-2",
"disabled:pointer-events-none disabled:opacity-50"
)
},
tooltip && /* @__PURE__ */ React8.createElement(Tooltip, null, /* @__PURE__ */ React8.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React8.createElement("div", { className: "w-full h-full" })), /* @__PURE__ */ React8.createElement(
TooltipContent,
{
sideOffset: 12,
side: tooltip_direction,
align: "center",
className: cn("text-xs rounded", tooltipClass)
},
sliderValue
))
)
));
});
Slider.displayName = "Slider";
// src/components/ui/switch.tsx
import * as React9 from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch";
var Switch = React9.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React9.createElement(
SwitchPrimitives.Root,
__spreadProps(__spreadValues({
className: cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-bg-brand-solid data-[state=unchecked]:bg-bg-tertiary focus-visible:ring-bg-brand-solid-hover",
className
)
}, props), {
ref
}),
/* @__PURE__ */ React9.createElement(
SwitchPrimitives.Thumb,
{
className: cn(
"pointer-events-none block h-4 w-4 rounded-full bg-bg-primary shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
)
}
)
);
});
Switch.displayName = SwitchPrimitives.Root.displayName;
// src/components/ui/progress.tsx
import * as React10 from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";
var Progress = React10.forwardRef((_a, ref) => {
var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
return /* @__PURE__ */ React10.createElement(
ProgressPrimitive.Root,
__spreadValues({
ref,
className: cn(
"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
className
)
}, props),
/* @__PURE__ */ React10.createElement(
ProgressPrimitive.Indicator,
{
className: "h-full w-full flex-1 bg-primary transition-all",
style: { transform: `translateX(-${100 - (value || 0)}%)` }
}
)
);
});
Progress.displayName = ProgressPrimitive.Root.displayName;
// src/components/ui/checkbox.tsx
import * as React11 from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Check } from "lucide-react";
var Checkbox = React11.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React11.createElement(
CheckboxPrimitive.Root,
__spreadValues({
ref,
className: cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)
}, props),
/* @__PURE__ */ React11.createElement(
CheckboxPrimitive.Indicator,
{
className: cn("flex items-center justify-center text-current")
},
/* @__PURE__ */ React11.createElement(Check, { className: "h-4 w-4" })
)
);
});
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
// src/components/ui/dropdown-menu.tsx
import * as React12 from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check as Check2, ChevronRight, Circle } from "lucide-react";
var DropdownMenu = DropdownMenuPrimitive.Root;
var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
var DropdownMenuGroup = DropdownMenuPrimitive.Group;
var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
var DropdownMenuSub = DropdownMenuPrimitive.Sub;
var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
var DropdownMenuSubTrigger = React12.forwardRef((_a, ref) => {
var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
return /* @__PURE__ */ React12.createElement(
DropdownMenuPrimitive.SubTrigger,
__spreadValues({
ref,
className: cn(
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)
}, props),
children,
/* @__PURE__ */ React12.createElement(ChevronRight, { className: "ml-auto" })
);
});
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
var DropdownMenuSubContent = React12.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React12.createElement(
DropdownMenuPrimitive.SubContent,
__spreadValues({
ref,
className: cn(
"z-100 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)
}, props)
);
});
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
var DropdownMenuContent = React12.forwardRef((_a, ref) => {
var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
return /* @__PURE__ */ React12.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React12.createElement(
DropdownMenuPrimitive.Content,
__spreadValues({
ref,
sideOffset,
className: cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-bg-primary p-0 text-popover-foreground shadow-md",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)
}, props)
));
});
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
var DropdownMenuItem = React12.forwardRef((_a, ref) => {
var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
return /* @__PURE__ */ React12.createElement(
DropdownMenuPrimitive.Item,
__spreadValues({
ref,
className: cn(
"relative flex text-txt-secondary rounded-none bg-bg-primary hover:bg-bg-primary-hover hover:text-txt-secondary-hover cursor-default select-none items-center gap-2 px-2.5 py-2 text-sm outline-none transition-colors focus:bg-bg-primary-hover focus:text-txt-secondary-hover data-[disabled]:text-txt-disabled data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
inset && "pl-8",
className
)
}, props)
);
});
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
var DropdownMenuCheckboxItem = React12.forwardRef((_a, ref) => {
var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
return /* @__PURE__ */ React12.createElement(
DropdownMenuPrimitive.CheckboxItem,
__spreadValues({
ref,
className: cn(
"relative flex cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none transition-colors text-txt-secondary rounded-none bg-bg-primary hover:bg-bg-primary-hover hover:text-txt-secondary-hover data-[disabled]:text-txt-disabled data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
),
checked
}, props),
/* @__PURE__ */ React12.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React12.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React12.createElement(Check2, { className: "h-4 w-4" }))),
children
);
});
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
var DropdownMenuRadioItem = React12.forwardRef((_a, ref) => {
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
return /* @__PURE__ */ React12.createElement(
DropdownMenuPrimitive.RadioItem,
__spreadValues({
ref,
className: cn(
"relative flex cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none transition-colors text-txt-secondary rounded-none bg-bg-primary hover:bg-bg-primary-hover hover:text-txt-secondary-hover data-[disabled]:text-txt-disabled data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)
}, props),
/* @__PURE__ */ React12.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React12.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React12.createElement(Circle, { className: "h-2 w-2 fill-current" }))),
children
);
});
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
var DropdownMenuLabel = React12.forwardRef((_a, ref) => {
var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
return /* @__PURE__ */ React12.createElement(
DropdownMenuPrimitive.Label,
__spreadValues({
ref,
className: cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
)
}, props)
);
});
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
var DropdownMenuSeparator = React12.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React12.createElement(
DropdownMenuPrimitive.Separator,
__spreadValues({
ref,
className: cn("-mx-1 my-1 h-px bg-bd-secondary", className)
}, props)
);
});
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
var DropdownMenuShortcut = (_a) => {
var _b = _a, {
className
} = _b, props = __objRest(_b, [
"className"
]);
return /* @__PURE__ */ React12.createElement(
"span",
__spreadValues({
className: cn("ml-auto text-xs tracking-widest opacity-60", className)
}, props)
);
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
// src/components/ui/InteractiveGradient.tsx
import React13, { useRef, useEffect as useEffect2 } from "react";
var InteractiveGradient = ({
backgroundGradient = ["rgb(8, 10, 15)", "rgb(0, 17, 32)"],
circleColors = [
"18, 113, 255",
"107, 74, 255",
"100, 100, 255",
"50, 160, 220",
"80, 47, 122"
],
interactiveColor = "140, 100, 255",
circleSize = "80%",
blending = "hard-light",
className = ""
}) => {
const interactiveRef = useRef(null);
useEffect2(() => {
let curX = 0;
let curY = 0;
let tgX = 0;
let tgY = 0;
const interBubble = interactiveRef.current;
const move = () => {
curX += (tgX - curX) / 20;
curY += (tgY - curY) / 20;
if (interBubble) {
interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
}
requestAnimationFrame(move);
};
const handleMouseMove = (e) => {
tgX = e.clientX;
tgY = e.clientY;
};
window.addEventListener("mousemove", handleMouseMove);
move();
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, []);
const containerStyle = {
background: `linear-gradient(40deg, ${backgroundGradient[0]}, ${backgroundGradient[1]})`
};
const radialStyle = (rgbColor) => ({
background: `radial-gradient(circle at center, rgba(${rgbColor}, 0.8) 0, rgba(${rgbColor}, 0) 50%) no-repeat`,
mixBlendMode: blending
});
const circleConfigs = [
{
top: `calc(50% - ${circleSize} / 2)`,
left: `calc(50% - ${circleSize} / 2)`,
animation: "moveVertical 30s ease infinite",
transformOrigin: "center center",
opacity: 1
},
{
top: `calc(50% - ${circleSize} / 2)`,
left: `calc(50% - ${circleSize} / 2)`,
animation: "moveInCircle 20s reverse infinite",
transformOrigin: "calc(50% - 400px)",
opacity: 1
},
{
top: `calc(50% - ${circleSize} / 2 + 200px)`,
left: `calc(50% - ${circleSize} / 2 - 500px)`,
animation: "moveInCircle 40s linear infinite",
transformOrigin: "calc(50% + 400px)",
opacity: 1
},
{
top: `calc(50% - ${circleSize} / 2)`,
left: `calc(50% - ${circleSize} / 2)`,
animation: "moveHorizontal 40s ease infinite",
transformOrigin: "calc(50% - 200px)",
opacity: 0.7
},
{
top: `calc(50% - ${circleSize})`,
left: `calc(50% - ${circleSize})`,
animation: "moveInCircle 20s ease infinite",
transformOrigin: "calc(50% - 800px) calc(50% + 200px)",
opacity: 1,
width: `calc(${circleSize} * 2)`,
height: `calc(${circleSize} * 2)`
}
];
const circlesToRender = circleConfigs.slice(0, circleColors.length);
return /* @__PURE__ */ React13.createElement(
"div",
{
className: `relative w-full h-full overflow-hidden ${className}`,
style: containerStyle
},
/* @__PURE__ */ React13.createElement("style", null, `
@keyframes moveInCircle {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
@keyframes moveVertical {
0% { transform: translateY(-50%); }
50% { transform: translateY(50%); }
100% { transform: translateY(-50%); }
}
@keyframes moveHorizontal {
0% { transform: translateX(-50%) translateY(-10%); }
50% { transform: translateX(50%) translateY(10%); }
100% { transform: translateX(-50%) translateY(-10%); }
}
`),
/* @__PURE__ */ React13.createElement(
"svg",
{
viewBox: "0 0 100vw 100vw",
xmlns: "http://www.w3.org/2000/svg",
className: "absolute top-0 left-0 w-full h-full z-[1]",
style: { mixBlendMode: "soft-light", opacity: 0.3 }
},
/* @__PURE__ */ React13.createElement("filter", { id: "noiseFilterBg" }, /* @__PURE__ */ React13.createElement(
"feTurbulence",
{
type: "fractalNoise",
baseFrequency: "0.6",
stitchTiles: "stitch"
}
)),
/* @__PURE__ */ React13.createElement(
"rect",
{
width: "100%",
height: "100%",
preserveAspectRatio: "xMidYMid meet",
filter: "url(#noiseFilterBg)"
}
)
),
/* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "hidden" }, /* @__PURE__ */ React13.createElement("defs", null, /* @__PURE__ */ React13.createElement("filter", { id: "goo" }, /* @__PURE__ */ React13.createElement(
"feGaussianBlur",
{
in: "SourceGraphic",
stdDeviation: "10",
result: "blur"
}
), /* @__PURE__ */ React13.createElement(
"feColorMatrix",
{
in: "blur",
mode: "matrix",
values: "1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 18 -8",
result: "goo"
}
), /* @__PURE__ */ React13.createElement("feBlend", { in: "SourceGraphic", in2: "goo" })))),
/* @__PURE__ */ React13.createElement(
"div",
{
className: "relative w-full h-full z-[2]",
style: {
filter: "url(#goo) blur(40px)"
}
},
circlesToRender.map((cfg, idx) => {
var _a, _b;
const width = (_a = cfg.width) != null ? _a : circleSize;
const height = (_b = cfg.height) != null ? _b : circleSize;
const circleStyle = __spreadProps(__spreadValues({}, radialStyle(circleColors[idx])), {
position: "absolute",
width,
height,
top: cfg.top,
left: cfg.left,
animation: cfg.animation,
transformOrigin: cfg.transformOrigin,
opacity: cfg.opacity
});
return /* @__PURE__ */ React13.createElement("div", { key: idx, style: circleStyle });
}),
/* @__PURE__ */ React13.createElement(
"div",
{
ref: interactiveRef,
style: __spreadProps(__spreadValues({}, radialStyle(interactiveColor)), {
position: "absolute",
width: "100%",
height: "100%",
top: "-50%",
left: "-50%",
opacity: 0.7
})
}
)
)
);
};
// src/components/ui/sidebar.tsx
import * as React18 from "react";
import { Slot as Slot2 } from "@radix-ui/react-slot";
import { cva as cva5 } from "class-variance-authority";
import { PanelLeft } from "lucide-react";
// src/hooks/use-mobile.tsx
import * as React14 from "react";
var MOBILE_BREAKPOINT = 768;
function useIsMobile() {
const [isMobile, setIsMobile] = React14.useState(void 0);
React14.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
};
mql.addEventListener("change", onChange);
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
return () => mql.removeEventListener("change", onChange);
}, []);
return !!isMobile;
}
// src/components/ui/separator.tsx
import * as React15 from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
var Separator2 = React15.forwardRef(
(_a, ref) => {
var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
return /* @__PURE__ */ React15.createElement(
SeparatorPrimitive.Root,
__spreadValues({
ref,
decorative,
orientation,
className: cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)
}, props)
);
}
);
Separator2.displayName = SeparatorPrimitive.Root.displayName;
// src/components/ui/sheet.tsx
import * as React16 from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { cva as cva4 } from "class-variance-authority";
import { X as X2 } from "lucide-react";
var Sheet = SheetPrimitive.Root;
var SheetTrigger = SheetPrimitive.Trigger;
var SheetClose = SheetPrimitive.Close;
var SheetPortal = SheetPrimitive.Portal;
var SheetOverlay = React16.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React16.createElement(
SheetPrimitive.Overlay,
__spreadProps(__spreadValues({
className: cn(
"fixed inset-0 z-50 bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)
}, props), {
ref
})
);
});
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
var sheetVariants = cva4(
"fixed z-50 gap-4 bg-bg-primary p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
right: "inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
}
},
defaultVariants: {
side: "right"
}
}
);
var SheetContent = React16.forwardRef((_a, ref) => {
var _b = _a, { side = "right", className, children } = _b, props = __objRest(_b, ["side", "className", "children"]);
return /* @__PURE__ */ React16.createElement(SheetPortal, null, /* @__PURE__ */ React16.createElement(SheetOverlay, null), /* @__PURE__ */ React16.createElement(
SheetPrimitive.Content,
__spreadValues({
ref,
className: cn(sheetVariants({ side }), className)
}, props),
/* @__PURE__ */ React16.createElement(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-bg-secondary data-[state=open]:border-bd-primary" }, /* @__PURE__ */ React16.createElement(X2, { className: "h-4 w-4" }), /* @__PURE__ */ React16.createElement("span", { className: "sr-only" }, "Close")),
children
));
});
SheetContent.displayName = SheetPrimitive.Content.displayName;
var SheetHeader = (_a) => {
var _b = _a, {
className
} = _b, props = __objRest(_b, [
"className"
]);
return /* @__PURE__ */ React16.createElement(
"div",
__spreadValues({
className: cn(
"flex flex-col space-y-2 p-4 text-center sm:text-left",
className
)
}, props)
);
};
SheetHeader.displayName = "SheetHeader";
var SheetFooter = (_a) => {
var _b = _a, {
className
} = _b, props = __objRest(_b, [
"className"
]);
return /* @__PURE__ */ React16.createElement(
"div",
__spreadValues({
className: cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)
}, props)
);
};
SheetFooter.displayName = "SheetFooter";
var SheetTitle = React16.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React16.createElement(
SheetPrimitive.Title,
__spreadValues({
ref,
className: cn("text-lg font-semibold text-txt-primary", className)
}, props)
);
});
SheetTitle.displayName = SheetPrimitive.Title.displayName;
var SheetDescription = React16.forwardRef((_a, ref) => {
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
return /* @__PURE__ */ React16.createElement(
SheetPrimitive.Description,
__spreadValues({
ref,
className: cn("text-sm text-txt-secondary", className)
}, props)
);
});
SheetDescription.displayName = SheetPrimitive.Description.displayName;
// src/components/ui/skeleton.tsx
import React17 from "react";
function Skeleton(_a) {
var _b = _a, {
className
} = _b, props = __objRest(_b, [
"className"
]);
return /* @__PURE__ */ React17.createElement(
"div",
__spreadValues({
className: cn("animate-pulse rounded-md bg-primary/10", className)
}, props)
);
}
// src/components/ui/sidebar.tsx
var SIDEBAR_COOKIE_NAME = "sidebar:state";
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
var SIDEBAR_WIDTH = "16rem";
var SIDEBAR_WIDTH_MOBILE = "18rem";
var SIDEBAR_WIDTH_ICON = "3rem";
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
var SidebarContext = React18.createContext(null);
function useSidebar() {
const context = React18.useContext(SidebarContext);
if (!context) {
throw new Error("useSidebar must be used within a SidebarProvider.");
}
return context;
}
var SidebarProvider = React18.forwardRef(
(_a, ref) => {
var _b = _a, {
defaultOpen = true,
open: openProp,
onOpenChange: setOpenProp,
className,
style,
children
} = _b, props = __objRest(_b, [
"defaultOpen",
"open",
"onOpenChange",
"className",
"style",
"children"
]);
const isMobile = useIsMobile();
const [openMobile, setOpenMobile] = React18.useState(false);
const [_open, _setOpen] = React18.useState(defaultOpen);
const open = openProp != null ? openProp : _open;
const setOpen = React18.useCallback(
(value) => {
const openState = typeof value === "function" ? value(open) : value;
if (setOpenProp) {
setOpenProp(openState);
} else {
_setOpen(openState);
}
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
},
[setOpenProp, open]
);
const toggleSidebar = React18.useCallback(() => {
return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
}, [isMobile, setOpen, setOpenMobile]);
React18.useEffect(() => {
const handleKeyDown = (event) => {
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
toggleSidebar();
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [toggleSidebar]);
const state = open ? "expanded" : "collapsed";
const contextValue = React18.useMemo(
() => ({
state,
open,
setOpen,
isMobile,
openMobile,
setOpenMobile,
toggleSidebar
}),
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
);
return /* @__PURE__ */ React18.createElement(SidebarContext.Provider, { value: contextValue }, /* @__PURE__ */ React18.createElement(TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React18.createElement(
"div",
__spreadValues({
style: __spreadValues({
"--sidebar-width": SIDEBAR_WIDTH,
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON
}, style),
className: cn(
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
className
),
ref
}, props),
children
)));
}
);
SidebarProvider.displayName = "SidebarProvider";
var Sidebar = React18.forwardRef(
(_a, ref) => {
var _b = _a, {
side = "left",
variant = "sidebar",
collapsible = "offcanvas",
className,
children
} = _b, props = __objRest(_b, [
"side",
"variant",
"collapsible",
"className",
"children"
]);
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
if (collapsible === "none") {
return /* @__PURE__ */ React18.createElement(
"div",
__spreadValues({
className: cn(
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
className
),
ref
}, props),
children
);
}
if (isMobile) {
return /* @__PURE__ */ React18.createElement(Sheet, __spreadValues({ open: openMobile, onOpenChange: setOpenMobile }, props), /* @__PURE__ */ React18.createElement(
SheetContent,
{
"data-sidebar": "sidebar",
"data-mobile": "true",