@matheusrizzati/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,735 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { forwardRef, createContext, useState, useCallback, useContext } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as Dialog from '@radix-ui/react-dialog';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "font-medium whitespace-nowrap select-none",
+    "transition-all duration-[var(--transition-fast)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-[var(--ring-offset)]",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "active:scale-[0.97]",
+    "cursor-pointer"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+          "hover:bg-[var(--color-primary-hover)]",
+          "shadow-[var(--shadow-sm)]"
+        ],
+        secondary: [
+          "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+          "border border-[var(--color-border)]",
+          "hover:bg-[var(--color-surface-hover)] hover:border-[var(--color-border-hover)]"
+        ],
+        ghost: [
+          "text-[var(--color-text-secondary)]",
+          "hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]"
+        ],
+        danger: [
+          "bg-[var(--color-danger)] text-white",
+          "hover:brightness-110",
+          "shadow-[var(--shadow-sm)]"
+        ]
+      },
+      size: {
+        sm: "h-8 px-3 text-[var(--text-xs)] rounded-[var(--radius-sm)]",
+        md: "h-9 px-4 text-[var(--text-sm)] rounded-[var(--radius)]",
+        lg: "h-11 px-6 text-[var(--text-base)] rounded-[var(--radius-md)]",
+        icon: "h-9 w-9 rounded-[var(--radius)]"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Spinner = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "animate-spin h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+        }
+      )
+    ]
+  }
+);
+var Button = forwardRef(
+  ({ className, variant, size, loading, disabled, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size }), className),
+        disabled: disabled || loading,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsx(Spinner, {}),
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var inputVariants = cva(
+  [
+    "w-full bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+    "border border-[var(--color-border)]",
+    "placeholder:text-[var(--color-text-muted)]",
+    "transition-all duration-[var(--transition-fast)]",
+    "focus:outline-none focus:ring-2 focus:ring-[var(--ring-color)] focus:border-[var(--color-primary)]",
+    "hover:border-[var(--color-border-hover)]",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "font-[var(--font-sans)]"
+  ],
+  {
+    variants: {
+      inputSize: {
+        sm: "h-8 px-3 text-[var(--text-xs)] rounded-[var(--radius-sm)]",
+        md: "h-9 px-3 text-[var(--text-sm)] rounded-[var(--radius)]",
+        lg: "h-11 px-4 text-[var(--text-base)] rounded-[var(--radius-md)]"
+      },
+      state: {
+        default: "",
+        error: "border-[var(--color-danger)] focus:ring-[var(--color-danger)]/30"
+      }
+    },
+    defaultVariants: {
+      inputSize: "md",
+      state: "default"
+    }
+  }
+);
+var labelStyles = "block text-[var(--text-sm)] font-medium text-[var(--color-text-secondary)] mb-1.5";
+var helperStyles = "mt-1.5 text-[var(--text-xs)] text-[var(--color-text-muted)]";
+var errorStyles = "mt-1.5 text-[var(--text-xs)] text-[var(--color-danger)]";
+var Input = forwardRef(
+  ({
+    className,
+    inputSize,
+    state,
+    label,
+    helperText,
+    error,
+    startIcon,
+    endIcon,
+    id,
+    ...props
+  }, ref) => {
+    const inputId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+    const effectiveState = error ? "error" : state;
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: labelStyles, children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        startIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]", children: startIcon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            className: cn(
+              inputVariants({ inputSize, state: effectiveState }),
+              startIcon && "pl-9",
+              endIcon && "pr-9",
+              className
+            ),
+            ...props
+          }
+        ),
+        endIcon && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]", children: endIcon })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: errorStyles, children: error }),
+      !error && helperText && /* @__PURE__ */ jsx("p", { className: helperStyles, children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var cardVariants = cva(
+  [
+    "rounded-[var(--radius-lg)]",
+    "transition-all duration-[var(--transition-base)]"
+  ],
+  {
+    variants: {
+      variant: {
+        elevated: [
+          "bg-[var(--color-surface)] border border-[var(--color-border)]",
+          "shadow-[var(--shadow-md)]"
+        ],
+        outlined: [
+          "bg-transparent border border-[var(--color-border)]"
+        ],
+        ghost: [
+          "bg-[var(--color-surface)]/50"
+        ]
+      },
+      hoverable: {
+        true: "hover:border-[var(--color-border-hover)] hover:shadow-[var(--shadow-lg)] cursor-pointer",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "elevated",
+      hoverable: false
+    }
+  }
+);
+var cardHeaderStyles = "px-[var(--space-lg)] pt-[var(--space-lg)] pb-[var(--space-sm)]";
+var cardBodyStyles = "px-[var(--space-lg)] py-[var(--space-md)]";
+var cardFooterStyles = "px-[var(--space-lg)] pt-[var(--space-sm)] pb-[var(--space-lg)] border-t border-[var(--color-border)]";
+var Card = forwardRef(
+  ({ className, variant, hoverable, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardVariants({ variant, hoverable }), className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardHeaderStyles, className), ...props }));
+CardHeader.displayName = "CardHeader";
+var CardBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardBodyStyles, className), ...props }));
+CardBody.displayName = "CardBody";
+var CardFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cardFooterStyles, className), ...props }));
+CardFooter.displayName = "CardFooter";
+
+// src/components/modal/modal.styles.ts
+var modalOverlayStyles = [
+  "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+].join(" ");
+var modalContentStyles = [
+  "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+  "w-full max-w-lg",
+  "bg-[var(--color-surface)] border border-[var(--color-border)]",
+  "rounded-[var(--radius-xl)] shadow-[var(--shadow-lg)]",
+  "p-[var(--space-lg)]",
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+  "duration-200"
+].join(" ");
+var modalTitleStyles = "text-[var(--text-lg)] font-semibold text-[var(--color-text-primary)]";
+var modalDescriptionStyles = "text-[var(--text-sm)] text-[var(--color-text-secondary)] mt-2";
+var modalCloseStyles = [
+  "absolute right-4 top-4",
+  "rounded-[var(--radius-sm)] p-1",
+  "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
+  "hover:bg-[var(--color-surface-hover)]",
+  "transition-colors duration-[var(--transition-fast)]",
+  "focus:outline-none focus:ring-2 focus:ring-[var(--ring-color)]"
+].join(" ");
+var Modal = Dialog.Root;
+var ModalTrigger = Dialog.Trigger;
+var ModalOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Overlay, { ref, className: cn(modalOverlayStyles, className), ...props }));
+ModalOverlay.displayName = "ModalOverlay";
+var ModalContent = forwardRef(({ className, children, showClose = true, ...props }, ref) => /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+  /* @__PURE__ */ jsx(ModalOverlay, {}),
+  /* @__PURE__ */ jsxs(Dialog.Content, { ref, className: cn(modalContentStyles, className), ...props, children: [
+    children,
+    showClose && /* @__PURE__ */ jsxs(Dialog.Close, { className: modalCloseStyles, children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+    ] })
+  ] })
+] }));
+ModalContent.displayName = "ModalContent";
+var ModalTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Title, { ref, className: cn(modalTitleStyles, className), ...props }));
+ModalTitle.displayName = "ModalTitle";
+var ModalDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Dialog.Description,
+  {
+    ref,
+    className: cn(modalDescriptionStyles, className),
+    ...props
+  }
+));
+ModalDescription.displayName = "ModalDescription";
+var ModalFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex justify-end gap-[var(--space-sm)] mt-[var(--space-lg)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ModalFooter.displayName = "ModalFooter";
+
+// src/components/dropdown/dropdown.styles.ts
+var dropdownContentStyles = [
+  "z-50 min-w-[180px] overflow-hidden",
+  "bg-[var(--color-surface)] border border-[var(--color-border)]",
+  "rounded-[var(--radius-md)] shadow-[var(--shadow-lg)]",
+  "p-1",
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+  "data-[side=top]:slide-in-from-bottom-2",
+  "data-[side=bottom]:slide-in-from-top-2",
+  "data-[side=left]:slide-in-from-right-2",
+  "data-[side=right]:slide-in-from-left-2"
+].join(" ");
+var dropdownItemStyles = [
+  "relative flex items-center gap-2",
+  "rounded-[var(--radius-sm)] px-2 py-1.5",
+  "text-[var(--text-sm)] text-[var(--color-text-secondary)]",
+  "cursor-pointer select-none outline-none",
+  "transition-colors duration-[var(--transition-fast)]",
+  "data-[highlighted]:bg-[var(--color-surface-hover)] data-[highlighted]:text-[var(--color-text-primary)]",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+].join(" ");
+var dropdownSeparatorStyles = "my-1 h-px bg-[var(--color-border)]";
+var dropdownLabelStyles = "px-2 py-1.5 text-[var(--text-xs)] font-semibold text-[var(--color-text-muted)]";
+var Dropdown = DropdownMenu.Root;
+var DropdownTrigger = DropdownMenu.Trigger;
+var DropdownGroup = DropdownMenu.Group;
+var DropdownContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenu.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(dropdownContentStyles, className),
+    ...props
+  }
+) }));
+DropdownContent.displayName = "DropdownContent";
+var DropdownItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenu.Item,
+  {
+    ref,
+    className: cn(dropdownItemStyles, className),
+    ...props
+  }
+));
+DropdownItem.displayName = "DropdownItem";
+var DropdownSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenu.Separator,
+  {
+    ref,
+    className: cn(dropdownSeparatorStyles, className),
+    ...props
+  }
+));
+DropdownSeparator.displayName = "DropdownSeparator";
+var DropdownLabel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenu.Label,
+  {
+    ref,
+    className: cn(dropdownLabelStyles, className),
+    ...props
+  }
+));
+DropdownLabel.displayName = "DropdownLabel";
+var badgeVariants = cva(
+  [
+    "inline-flex items-center font-medium",
+    "rounded-full whitespace-nowrap",
+    "transition-colors duration-[var(--transition-fast)]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--color-surface-raised)] text-[var(--color-text-secondary)] border border-[var(--color-border)]",
+        primary: "bg-[var(--color-primary)]/15 text-[var(--color-primary-hover)] border border-[var(--color-primary)]/25",
+        success: "bg-[var(--color-success)]/15 text-[var(--color-success)] border border-[var(--color-success)]/25",
+        warning: "bg-[var(--color-warning)]/15 text-[var(--color-warning)] border border-[var(--color-warning)]/25",
+        danger: "bg-[var(--color-danger)]/15 text-[var(--color-danger)] border border-[var(--color-danger)]/25",
+        info: "bg-[var(--color-info)]/15 text-[var(--color-info)] border border-[var(--color-info)]/25"
+      },
+      size: {
+        sm: "px-2 py-0.5 text-[10px]",
+        md: "px-2.5 py-0.5 text-[var(--text-xs)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Badge = forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(badgeVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+Badge.displayName = "Badge";
+
+// src/components/tabs/tabs.styles.ts
+var tabsListStyles = [
+  "inline-flex items-center gap-1",
+  "bg-[var(--color-bg-secondary)] p-1",
+  "rounded-[var(--radius-md)]",
+  "border border-[var(--color-border)]"
+].join(" ");
+var tabsTriggerStyles = [
+  "relative inline-flex items-center justify-center",
+  "px-3 py-1.5",
+  "text-[var(--text-sm)] font-medium",
+  "text-[var(--color-text-muted)]",
+  "rounded-[var(--radius)]",
+  "transition-all duration-[var(--transition-fast)]",
+  "cursor-pointer select-none",
+  "hover:text-[var(--color-text-secondary)]",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]"
+].join(" ");
+var tabsTriggerActiveStyles = [
+  "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+  "shadow-[var(--shadow-sm)]"
+].join(" ");
+var tabsContentStyles = [
+  "mt-[var(--space-md)]",
+  "focus-visible:outline-none"
+].join(" ");
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
+  return ctx;
+}
+var Tabs = forwardRef(
+  ({ value: controlledValue, defaultValue = "", onValueChange, className, children, ...props }, ref) => {
+    const [internal, setInternal] = useState(defaultValue);
+    const value = controlledValue ?? internal;
+    const handleChange = useCallback(
+      (v) => {
+        setInternal(v);
+        onValueChange?.(v);
+      },
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value, onValueChange: handleChange }, children: /* @__PURE__ */ jsx("div", { ref, className, ...props, children }) });
+  }
+);
+Tabs.displayName = "Tabs";
+var TabsList = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "tablist", className: cn(tabsListStyles, className), ...props })
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = forwardRef(
+  ({ value, className, ...props }, ref) => {
+    const ctx = useTabsContext();
+    const isActive = ctx.value === value;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        role: "tab",
+        type: "button",
+        "aria-selected": isActive,
+        "data-state": isActive ? "active" : "inactive",
+        className: cn(
+          tabsTriggerStyles,
+          isActive && tabsTriggerActiveStyles,
+          className
+        ),
+        onClick: () => ctx.onValueChange(value),
+        ...props
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = forwardRef(
+  ({ value, className, children, ...props }, ref) => {
+    const ctx = useTabsContext();
+    if (ctx.value !== value) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        "data-state": "active",
+        className: cn(tabsContentStyles, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+
+// src/components/table/table.styles.ts
+var tableWrapperStyles = "w-full overflow-auto rounded-[var(--radius-lg)] border border-[var(--color-border)]";
+var tableStyles = "w-full caption-bottom text-[var(--text-sm)] border-collapse";
+var theadStyles = "bg-[var(--color-bg-secondary)]";
+var tbodyStyles = "[&_tr:last-child]:border-0";
+var trStyles = [
+  "border-b border-[var(--color-border)]",
+  "transition-colors duration-[var(--transition-fast)]",
+  "hover:bg-[var(--color-surface-hover)]/50",
+  "data-[state=selected]:bg-[var(--color-primary)]/5"
+].join(" ");
+var thStyles = [
+  "h-10 px-4 text-left align-middle",
+  "font-medium text-[var(--color-text-muted)] text-[var(--text-xs)] uppercase tracking-wider",
+  "[&:has([role=checkbox])]:pr-0"
+].join(" ");
+var tdStyles = [
+  "p-4 align-middle text-[var(--color-text-secondary)]",
+  "[&:has([role=checkbox])]:pr-0"
+].join(" ");
+var TableWrapper = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(tableWrapperStyles, className), ...props })
+);
+TableWrapper.displayName = "TableWrapper";
+var Table = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(TableWrapper, { children: /* @__PURE__ */ jsx("table", { ref, className: cn(tableStyles, className), ...props }) })
+);
+Table.displayName = "Table";
+var Thead = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn(theadStyles, className), ...props })
+);
+Thead.displayName = "Thead";
+var Tbody = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn(tbodyStyles, className), ...props })
+);
+Tbody.displayName = "Tbody";
+var Tr = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", { ref, className: cn(trStyles, className), ...props })
+);
+Tr.displayName = "Tr";
+var Th = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", { ref, className: cn(thStyles, className), ...props })
+);
+Th.displayName = "Th";
+var Td = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", { ref, className: cn(tdStyles, className), ...props })
+);
+Td.displayName = "Td";
+
+// src/components/sidebar/sidebar.styles.ts
+var sidebarStyles = [
+  "flex flex-col h-full",
+  "bg-[var(--color-bg-secondary)] border-r border-[var(--color-border)]",
+  "transition-all duration-[var(--transition-slow)]"
+].join(" ");
+var sidebarExpandedStyles = "w-[260px]";
+var sidebarCollapsedStyles = "w-[68px]";
+var sidebarHeaderStyles = [
+  "flex items-center gap-3",
+  "px-[var(--space-md)] h-14",
+  "border-b border-[var(--color-border)]",
+  "shrink-0"
+].join(" ");
+var sidebarContentStyles = "flex-1 overflow-y-auto py-[var(--space-sm)] px-[var(--space-sm)]";
+var sidebarFooterStyles = [
+  "shrink-0",
+  "px-[var(--space-md)] py-[var(--space-sm)]",
+  "border-t border-[var(--color-border)]"
+].join(" ");
+var sidebarSectionStyles = "py-[var(--space-xs)]";
+var sidebarSectionLabelStyles = [
+  "px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider",
+  "text-[var(--color-text-muted)]"
+].join(" ");
+var sidebarItemStyles = [
+  "flex items-center gap-3",
+  "w-full px-3 py-2",
+  "text-[var(--text-sm)] text-[var(--color-text-secondary)]",
+  "rounded-[var(--radius)]",
+  "cursor-pointer select-none",
+  "transition-all duration-[var(--transition-fast)]",
+  "hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]"
+].join(" ");
+var sidebarItemActiveStyles = [
+  "bg-[var(--color-primary)]/10 text-[var(--color-primary-hover)]",
+  "hover:bg-[var(--color-primary)]/15"
+].join(" ");
+var sidebarToggleStyles = [
+  "flex items-center justify-center",
+  "h-7 w-7 rounded-[var(--radius)]",
+  "text-[var(--color-text-muted)]",
+  "hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]",
+  "transition-colors duration-[var(--transition-fast)]",
+  "cursor-pointer"
+].join(" ");
+var SidebarContext = createContext({
+  collapsed: false,
+  toggle: () => {
+  }
+});
+function useSidebar() {
+  return useContext(SidebarContext);
+}
+var Sidebar = forwardRef(
+  ({
+    collapsed: controlledCollapsed,
+    defaultCollapsed = false,
+    onCollapsedChange,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [internal, setInternal] = useState(defaultCollapsed);
+    const collapsed = controlledCollapsed ?? internal;
+    const toggle = useCallback(() => {
+      const next = !collapsed;
+      setInternal(next);
+      onCollapsedChange?.(next);
+    }, [collapsed, onCollapsedChange]);
+    return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed, toggle }, children: /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref,
+        className: cn(
+          sidebarStyles,
+          collapsed ? sidebarCollapsedStyles : sidebarExpandedStyles,
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Sidebar.displayName = "Sidebar";
+var SidebarHeader = forwardRef(
+  ({ className, logo, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(sidebarHeaderStyles, className), ...props, children: [
+      logo,
+      !collapsed && children
+    ] });
+  }
+);
+SidebarHeader.displayName = "SidebarHeader";
+var SidebarContent = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(sidebarContentStyles, className), ...props })
+);
+SidebarContent.displayName = "SidebarContent";
+var SidebarFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(sidebarFooterStyles, className), ...props })
+);
+SidebarFooter.displayName = "SidebarFooter";
+var SidebarSection = forwardRef(
+  ({ className, label, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(sidebarSectionStyles, className), ...props, children: [
+      label && !collapsed && /* @__PURE__ */ jsx("div", { className: sidebarSectionLabelStyles, children: label }),
+      children
+    ] });
+  }
+);
+SidebarSection.displayName = "SidebarSection";
+var SidebarItem = forwardRef(
+  ({ className, icon, active, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          sidebarItemStyles,
+          active && sidebarItemActiveStyles,
+          collapsed && "justify-center px-0",
+          className
+        ),
+        ...props,
+        children: [
+          icon,
+          !collapsed && /* @__PURE__ */ jsx("span", { className: "truncate", children })
+        ]
+      }
+    );
+  }
+);
+SidebarItem.displayName = "SidebarItem";
+var SidebarToggle = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { collapsed, toggle } = useSidebar();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: toggle,
+        className: cn(sidebarToggleStyles, className),
+        "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: cn("transition-transform", collapsed && "rotate-180"),
+            children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+          }
+        )
+      }
+    );
+  }
+);
+SidebarToggle.displayName = "SidebarToggle";
+
+export { Badge, Button, Card, CardBody, CardFooter, CardHeader, Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownSeparator, DropdownTrigger, Input, Modal, ModalContent, ModalDescription, ModalFooter, ModalTitle, ModalTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarToggle, Table, TableWrapper, Tabs, TabsContent, TabsList, TabsTrigger, Tbody, Td, Th, Thead, Tr, badgeVariants, buttonVariants, cardVariants, cn, inputVariants, useSidebar };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map