orbital-ds 0.1.1 → 0.2.0

package/dist/ui/questionnaire.js

@@ -0,0 +1,331 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Questionnaire as QuestionnairePrimitive } from "@shadcn/react/questionnaire";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+import { CheckIcon } from "lucide-react";
+function Questionnaire({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Root,
+    {
+      "data-slot": "questionnaire",
+      className: cn("flex w-full min-w-0 flex-col gap-6", className),
+      ...props
+    }
+  );
+}
+function QuestionnaireProgress({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Progress,
+    {
+      "data-slot": "questionnaire-progress",
+      className: cn(
+        "min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function QuestionnaireItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Item,
+    {
+      "data-slot": "questionnaire-item",
+      className: cn(
+        "flex min-w-0 flex-col gap-5 border-0 p-0 outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function QuestionnaireTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Title,
+    {
+      "data-slot": "questionnaire-title",
+      className: cn(
+        "text-base font-semibold text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function QuestionnaireDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Description,
+    {
+      "data-slot": "questionnaire-description",
+      className: cn("text-sm text-pretty text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function QuestionnaireChoices({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Choices,
+    {
+      "data-slot": "questionnaire-choices",
+      className: cn(
+        "group/questionnaire-choices grid min-w-0 gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function QuestionnaireChoice({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    QuestionnairePrimitive.Choice,
+    {
+      "data-slot": "questionnaire-choice",
+      className: cn(
+        "group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-3 rounded-control border border-input px-4 py-3.5 text-start text-sm transition-colors outline-none select-none hover:bg-input/40 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-(length:--ds-ring-width) has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive data-checked:border-primary/40 data-checked:bg-primary/10",
+        "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          QuestionnairePrimitive.ChoiceInput,
+          {
+            "data-slot": "questionnaire-choice-input",
+            className: "absolute inset-0 z-(--ds-z-raised) size-full cursor-pointer opacity-0"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "questionnaire-choice-indicator",
+            className: "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[6px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "questionnaire-choice-indicator-dot",
+                  className: "hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+                }
+              ),
+              /* @__PURE__ */ jsx(CheckIcon, { "data-slot": "questionnaire-choice-indicator-check", className: "hidden size-3.5 group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          QuestionnairePrimitive.ChoiceLabel,
+          {
+            "data-slot": "questionnaire-choice-label",
+            className: "flex min-w-0 flex-1 flex-col gap-1 leading-snug",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          QuestionnairePrimitive.ChoiceShortcut,
+          {
+            "data-slot": "questionnaire-choice-shortcut",
+            className: "pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-full border border-input bg-background/80 font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
+          }
+        )
+      ]
+    }
+  );
+}
+function QuestionnaireChoiceDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "questionnaire-choice-description",
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function QuestionnaireInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "questionnaire-input-wrapper",
+      className: "group/questionnaire-input relative w-full min-w-0",
+      children: /* @__PURE__ */ jsx(
+        QuestionnairePrimitive.Input,
+        {
+          "data-slot": "questionnaire-input",
+          className: cn(
+            "h-9 min-h-11 w-full min-w-0 rounded-control border border-input bg-input/30 px-3 py-1 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+            "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function QuestionnaireError({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Error,
+    {
+      "data-slot": "questionnaire-error",
+      className: cn("mt-2 text-sm text-destructive", className),
+      ...props
+    }
+  );
+}
+function QuestionnaireActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "questionnaire-actions",
+      className: cn(
+        "grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-9",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function QuestionnairePrevious({
+  children,
+  className,
+  size = "default",
+  variant = "outline",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Previous,
+    {
+      "data-slot": "questionnaire-previous",
+      "data-size": size,
+      "data-variant": variant,
+      className: cn(
+        buttonVariants({ size, variant }),
+        "col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0",
+        className
+      ),
+      ...props,
+      children: children ?? "Previous"
+    }
+  );
+}
+function QuestionnaireSkip({
+  children,
+  className,
+  size = "default",
+  variant = "outline",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Skip,
+    {
+      "data-slot": "questionnaire-skip",
+      "data-size": size,
+      "data-variant": variant,
+      className: cn(
+        buttonVariants({ size, variant }),
+        "col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+        className
+      ),
+      ...props,
+      children: children ?? "Skip"
+    }
+  );
+}
+function QuestionnaireNext({
+  children,
+  className,
+  size = "default",
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Next,
+    {
+      "data-slot": "questionnaire-next",
+      "data-size": size,
+      "data-variant": variant,
+      className: cn(
+        buttonVariants({ size, variant }),
+        "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+        className
+      ),
+      ...props,
+      children: children ?? "Next"
+    }
+  );
+}
+function QuestionnaireSubmit({
+  children,
+  className,
+  size = "default",
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    QuestionnairePrimitive.Submit,
+    {
+      "data-slot": "questionnaire-submit",
+      "data-size": size,
+      "data-variant": variant,
+      className: cn(
+        buttonVariants({ size, variant }),
+        "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+        className
+      ),
+      ...props,
+      children: children ?? "Submit"
+    }
+  );
+}
+export {
+  Questionnaire,
+  QuestionnaireActions,
+  QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
+  QuestionnaireChoices,
+  QuestionnaireDescription,
+  QuestionnaireError,
+  QuestionnaireInput,
+  QuestionnaireItem,
+  QuestionnaireNext,
+  QuestionnairePrevious,
+  QuestionnaireProgress,
+  QuestionnaireSkip,
+  QuestionnaireSubmit,
+  QuestionnaireTitle
+};

package/dist/ui/radio-group.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+
+declare function RadioGroup({ className, ...props }: RadioGroup$1.Props): React.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: Radio.Root.Props): React.JSX.Element;
+
+export { RadioGroup, RadioGroupItem };

package/dist/ui/radio-group.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "../lib/utils";
+function RadioGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid w-full gap-3", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    RadioPrimitive.Root,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadioPrimitive.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "flex size-4 items-center justify-center",
+          children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+        }
+      )
+    }
+  );
+}
+export {
+  RadioGroup,
+  RadioGroupItem
+};

package/dist/ui/resizable.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): React.JSX.Element;
+declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): React.JSX.Element;
+declare function ResizableHandle({ withHandle, className, ...props }: ResizablePrimitive.SeparatorProps & {
+    withHandle?: boolean;
+}): React.JSX.Element;
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/ui/resizable.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import * as ResizablePrimitive from "react-resizable-panels";
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Group,
+    {
+      "data-slot": "resizable-panel-group",
+      className: cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ResizablePanel({ ...props }) {
+  return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Separator,
+    {
+      "data-slot": "resizable-handle",
+      className: cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-(--ds-z-raised) flex h-6 w-1 shrink-0 rounded-lg bg-border" })
+    }
+  );
+}
+export {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+};

package/dist/ui/scroll-area.js

@@ -17,7 +17,7 @@ function ScrollArea({
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
-            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-(length:--ring-width) focus-visible:ring-ring/50 focus-visible:outline-1",
+            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 focus-visible:outline-1",
             children
           }
         ),

package/dist/ui/select.js

@@ -28,7 +28,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-control shadow-control border border-input bg-input/30 px-3 py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-(length:--ring-width) focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ring-width) aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-(--control-h-md) data-[size=sm]:h-(--control-h-sm) *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-control shadow-control border border-input bg-input/30 px-(--ds-field-px) py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-(--ds-control-h-md) data-[size=sm]:h-(--ds-control-h-sm) *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -60,7 +60,7 @@ function SelectContent({
       alignItemWithTrigger,
       align,
       className: cn(
-        "z-(--z-overlay)",
+        "z-(--ds-z-overlay)",
         !alignItemWithTrigger && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
       ),
       children: /* @__PURE__ */ jsxs(
@@ -69,7 +69,7 @@ function SelectContent({
           "data-slot": "select-content",
           "data-align-trigger": alignItemWithTrigger,
           className: cn(
-            "relative z-(--z-overlay) max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--motion-fast) data-[align-trigger=true]:animate-none 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "relative z-(--ds-z-overlay) max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) data-[align-trigger=true]:animate-none 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           ),
           ...props,
@@ -152,7 +152,7 @@ function SelectScrollUpButton({
     {
       "data-slot": "select-scroll-up-button",
       className: cn(
-        "z-(--z-raised) flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "z-(--ds-z-raised) flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -169,7 +169,7 @@ function SelectScrollDownButton({
     {
       "data-slot": "select-scroll-down-button",
       className: cn(
-        "z-(--z-raised) flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "z-(--ds-z-raised) flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,

package/dist/ui/sheet.js

@@ -22,7 +22,7 @@ function SheetOverlay({ className, ...props }) {
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "fixed inset-0 z-(--z-overlay) bg-scrim duration-(--motion-fast) supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-(--ds-z-overlay) bg-scrim duration-(--ds-motion-fast) supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       ),
       ...props
@@ -44,7 +44,7 @@ function SheetContent({
         "data-slot": "sheet-content",
         "data-side": side,
         className: cn(
-          "fixed z-(--z-overlay) flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-overlay transition duration-(--motion-base) ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          "fixed z-(--ds-z-overlay) flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-overlay transition duration-(--ds-motion-base) ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
           className
         ),
         ...props,
@@ -78,7 +78,7 @@ function SheetHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-1.5 p-6", className),
+      className: cn("flex flex-col gap-1.5 p-(--ds-overlay-p)", className),
       ...props
     }
   );
@@ -88,7 +88,7 @@ function SheetFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "sheet-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-6", className),
+      className: cn("mt-auto flex flex-col gap-2 p-(--ds-overlay-p)", className),
       ...props
     }
   );

package/dist/ui/sidebar.js

@@ -167,7 +167,7 @@ function Sidebar({
           {
             "data-slot": "sidebar-gap",
             className: cn(
-              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-(--motion-base) ease-linear",
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-(--ds-motion-base) ease-linear",
               "group-data-[collapsible=offcanvas]:w-0",
               "group-data-[side=right]:rotate-180",
               variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
@@ -180,7 +180,7 @@ function Sidebar({
             "data-slot": "sidebar-container",
             "data-side": side,
             className: cn(
-              "fixed inset-y-0 z-(--z-raised) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--motion-base) ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              "fixed inset-y-0 z-(--ds-z-raised) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--ds-motion-base) ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
               // Adjust the padding for floating and inset variants.
               variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
               className
@@ -239,7 +239,7 @@ function SidebarRail({ className, ...props }) {
       onClick: toggleSidebar,
       title: "Toggle Sidebar",
       className: cn(
-        "absolute inset-y-0 z-(--z-sticky) hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "absolute inset-y-0 z-(--ds-z-sticky) hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
@@ -353,7 +353,7 @@ function SidebarGroupLabel({
       {
         "data-sidebar": "group-label",
         className: cn(
-          "flex h-8 shrink-0 items-center rounded-md px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-(--motion-base) ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "flex h-8 shrink-0 items-center rounded-md px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-(--ds-motion-base) ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
           className
         )
       },

package/dist/ui/slider.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Slider as Slider$1 } from '@base-ui/react/slider';
+
+declare function Slider({ className, defaultValue, value, min, max, ...props }: Slider$1.Root.Props): React.JSX.Element;
+
+export { Slider };

package/dist/ui/slider.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { cn } from "../lib/utils";
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
+  return /* @__PURE__ */ jsx(
+    SliderPrimitive.Root,
+    {
+      className: cn("data-horizontal:w-full data-vertical:h-full", className),
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      thumbAlignment: "edge",
+      ...props,
+      children: /* @__PURE__ */ jsxs(SliderPrimitive.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: "relative grow overflow-hidden rounded-control bg-muted select-none data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3",
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Indicator,
+              {
+                "data-slot": "slider-range",
+                className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "block size-4 shrink-0 rounded-control border border-primary bg-primary-foreground shadow-raised ring-ring/50 transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ] })
+    }
+  );
+}
+export {
+  Slider
+};

package/dist/ui/spinner.d.ts

@@ -0,0 +1,5 @@
+import * as React$1 from 'react';
+
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): React$1.JSX.Element;
+
+export { Spinner };

package/dist/ui/spinner.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Loader2Icon } from "lucide-react";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Loader2Icon, { "data-slot": "spinner", role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props });
+}
+export {
+  Spinner
+};

package/dist/ui/switch.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+
+declare function Switch({ className, size, ...props }: Switch$1.Root.Props & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+
+export { Switch };