@lerianstudio/sindarian-ui 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/components/ui/select/index.js

@@ -59,22 +59,14 @@ function SelectGroup({ ...props }) {
 function SelectValue({ ...props }) {
     return (0, jsx_runtime_1.jsx)(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
-function SelectTrigger({ className, size = 'default', children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: (0, utils_1.cn)('bg-background ring-offset-background placeholder:text-shadcn-400 focus:ring-ring flex h-10 w-full items-center justify-between gap-3 rounded-md border border-[#C7C7C7] px-3 py-2 text-sm focus:ring-2 focus:ring-offset-0 focus:outline-hidden focus-visible:outline-hidden [&>span]:line-clamp-1', props.readOnly && [
-            'data-read-only:cursor-default',
-            'data-read-only:select-text',
-            'data-read-only:bg-zinc-100',
-            'data-read-only:opacity-50',
-            'data-read-only:pointer-events-none',
-            'data-read-only:focus:outline-hidden',
-            'data-read-only:focus:ring-0'
-        ], 'disabled:cursor-not-allowed disabled:opacity-50', className), "data-read-only": props.readOnly ? '' : undefined, ...props, children: [children, !props.readOnly && ((0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-4 opacity-50" }) }))] }));
+function SelectTrigger({ className, readOnly, children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": "default", className: (0, utils_1.cn)('select-trigger select-read-only select-disabled', className), "aria-readonly": readOnly, "data-read-only": readOnly ? '' : undefined, ...props, children: [children, !readOnly && ((0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron" }) }))] }));
 }
 function SelectScrollUpButton({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: (0, utils_1.cn)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { className: "size-4" }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: (0, utils_1.cn)('select-scroll-button', className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { className: "size-4" }) }));
 }
 function SelectScrollDownButton({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: (0, utils_1.cn)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-4" }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: (0, utils_1.cn)('select-scroll-button', className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-4" }) }));
 }
 function SelectContent({ className, children, position = 'popper', ...props }) {
     const options = React.useMemo(() => React.Children.map(React.Children.toArray(children), (child) => {
@@ -83,19 +75,18 @@ function SelectContent({ className, children, position = 'popper', ...props }) {
             return child.props.value;
         }
     }), [children]);
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(SelectPrimitive.Content, { "data-slot": "select-content", "data-position": position, className: (0, utils_1.cn)('group/select bg-popover text-popover-foreground 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 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md', position === 'popper' &&
-                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), "data-empty": options.length === 0, position: position, ...props, children: [(0, jsx_runtime_1.jsx)(SelectScrollUpButton, {}), (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, utils_1.cn)('p-1', position === 'popper' &&
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(SelectPrimitive.Content, { "data-slot": "select-content", "data-position": position, className: (0, utils_1.cn)('group/select select-content', position === 'popper' && 'select-content-popper', className), "data-empty": options.length === 0, position: position, ...props, children: [(0, jsx_runtime_1.jsx)(SelectScrollUpButton, {}), (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, utils_1.cn)('p-1', position === 'popper' &&
                         'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'), children: children }), (0, jsx_runtime_1.jsx)(SelectScrollDownButton, {})] }) }));
 }
 function SelectEmpty({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "select-empty", className: (0, utils_1.cn)('text-muted-foreground hidden py-6 text-center text-sm group-data-[empty=true]/select:block', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "select-empty", className: (0, utils_1.cn)('select-empty', className), ...props }));
 }
 function SelectLabel({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { "data-slot": "select-label", className: (0, utils_1.cn)('py-1.5 pr-8 pl-2 text-sm font-semibold', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { "data-slot": "select-label", className: (0, utils_1.cn)('select-label', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Item, { "data-slot": "select-item", className: (0, utils_1.cn)('focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50', className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "size-4" }) }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Item, { "data-slot": "select-item", className: (0, utils_1.cn)('select-item', className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "size-4" }) }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Separator, { "data-slot": "select-separator", className: (0, utils_1.cn)('bg-muted -mx-1 my-1 h-px', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Separator, { "data-slot": "select-separator", className: (0, utils_1.cn)('select-separator', className), ...props }));
 }

package/dist/components/ui/select/styles.css

@@ -0,0 +1,57 @@
+@theme inline {
+    --spacing-select-h: calc(var(--spacing) * 10);
+    --spacing-select-px: calc(var(--spacing) * 3);
+    --spacing-select-py: calc(var(--spacing) * 2);
+
+    --color-select-foreground: var(--color-zinc-700);
+    --color-select-placeholder: var(--color-shadcn-400);
+    --color-select-border: var(--color-shadcn-300);
+    --color-select-chevron: var(--color-shadcn-400);
+}
+
+@layer components {
+    .select-trigger {
+        @apply flex items-center justify-between h-select-h w-full px-select-px py-select-py text-sm font-medium text-select-foreground border border-select-border rounded-md data-placeholder:text-select-placeholder focus:ring-2 focus:ring-offset-0 focus:outline-hidden focus-visible:outline-hidden;
+    }
+
+    .select-read-only {
+        @apply data-read-only:cursor-default data-read-only:select-text data-read-only:bg-zinc-100 data-read-only:opacity-50 data-read-only:pointer-events-none data-read-only:focus:outline-hidden data-read-only:focus:ring-0;
+    }
+
+    .select-disabled {
+        @apply disabled:cursor-not-allowed disabled:opacity-50;
+    }
+
+    .select-chevron {
+        @apply text-select-chevron size-4;
+    }
+
+    .select-scroll-button {
+        @apply flex cursor-default items-center justify-center py-1;
+    }
+
+    .select-content {
+        @apply bg-popover text-popover-foreground relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md;
+        @apply 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;
+    }
+
+    .select-content-popper {
+        @apply data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1;
+    }
+
+    .select-empty {
+        @apply text-muted-foreground hidden py-6 text-center text-sm group-data-[empty=true]/select:block;
+    }
+
+    .select-label {
+        @apply py-1.5 pr-8 pl-2 text-sm font-semibold;
+    }
+
+    .select-item {
+        @apply focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50;
+    }
+
+    .select-separator {
+        @apply bg-muted -mx-1 my-1 h-px;
+    }
+}

package/dist/components/ui/sidebar/index.d.ts

@@ -0,0 +1,9 @@
+export * from './sidebar-root';
+export * from './sidebar-components';
+export * from './sidebar-item-icon-button';
+export * from './sidebar-item-button';
+export * from './sidebar-item';
+export * from './sidebar-expand-button';
+export * from './sidebar-back-button';
+export * from './sidebar-provider';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA"}

package/dist/components/ui/sidebar/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./sidebar-root"), exports);
+__exportStar(require("./sidebar-components"), exports);
+__exportStar(require("./sidebar-item-icon-button"), exports);
+__exportStar(require("./sidebar-item-button"), exports);
+__exportStar(require("./sidebar-item"), exports);
+__exportStar(require("./sidebar-expand-button"), exports);
+__exportStar(require("./sidebar-back-button"), exports);
+__exportStar(require("./sidebar-provider"), exports);

package/dist/components/ui/sidebar/sidebar-back-button.d.ts

@@ -0,0 +1,3 @@
+import { SidebarItem } from './sidebar-item';
+export declare function SidebarBackButton({ ...props }: React.ComponentProps<typeof SidebarItem>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-back-button.d.ts.map

package/dist/components/ui/sidebar/sidebar-back-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-back-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-back-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAI5C,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,2CAS1C"}

package/dist/components/ui/sidebar/sidebar-back-button.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarBackButton = SidebarBackButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sidebar_item_1 = require("./sidebar-item");
+const separator_1 = require("../separator");
+const sidebar_provider_1 = require("./sidebar-provider");
+function SidebarBackButton({ ...props }) {
+    const { isCollapsed } = (0, sidebar_provider_1.useSidebar)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-1.5 pt-1.5", children: [(0, jsx_runtime_1.jsx)(sidebar_item_1.SidebarItem, { ...props }), isCollapsed && (0, jsx_runtime_1.jsx)(separator_1.Separator, {})] }));
+}

package/dist/components/ui/sidebar/sidebar-components.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export type SidebarHeaderProps = React.ComponentProps<'div'> & {
+    className?: string;
+    collapsed?: boolean;
+};
+export declare const SidebarHeader: ({ className, collapsed, ...props }: SidebarHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type SidebarContentProps = React.ComponentProps<'div'> & {
+    className?: string;
+};
+export declare const SidebarContent: ({ className, ...props }: SidebarContentProps) => import("react/jsx-runtime").JSX.Element;
+export type SidebarGroupProps = {
+    className?: string;
+} & React.ComponentProps<'nav'>;
+export declare const SidebarGroup: ({ className, ...props }: SidebarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export type SidebarGroupTitleProps = React.PropsWithChildren & {
+    collapsed?: boolean;
+};
+export declare const SidebarGroupTitle: ({ children }: SidebarGroupTitleProps) => import("react/jsx-runtime").JSX.Element;
+export type SidebarFooterProps = {
+    className?: string;
+} & React.ComponentProps<'nav'>;
+export declare const SidebarFooter: ({ className, ...props }: SidebarFooterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-components.d.ts.map

package/dist/components/ui/sidebar/sidebar-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-components.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,oCAI3B,kBAAkB,4CAWpB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,yBAG5B,mBAAmB,4CAUrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAE/B,eAAO,MAAM,YAAY,GAAI,yBAAyB,iBAAiB,4CAUtE,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,iBAAiB,GAAI,cAAc,sBAAsB,4CAcrE,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAE/B,eAAO,MAAM,aAAa,GAAI,yBAAyB,kBAAkB,4CASxE,CAAA"}

package/dist/components/ui/sidebar/sidebar-components.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarFooter = exports.SidebarGroupTitle = exports.SidebarGroup = exports.SidebarContent = exports.SidebarHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../lib/utils");
+const sidebar_provider_1 = require("./sidebar-provider");
+const separator_1 = require("../separator");
+const SidebarHeader = ({ className, collapsed, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-header", "data-collapsed": collapsed, className: (0, utils_1.cn)('dark:bg-cod-gray-950 flex h-[60px] w-full items-center bg-white px-4', collapsed && 'justify-center p-0', className), ...props }));
+exports.SidebarHeader = SidebarHeader;
+const SidebarContent = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-content", className: (0, utils_1.cn)('group flex flex-1 flex-col gap-4 overflow-hidden bg-white px-4 pt-4 transition-all duration-300 ease-in-out', 'group-data-[collapsed=true]/sidebar:items-center group-data-[collapsed=true]/sidebar:px-2', className), ...props }));
+exports.SidebarContent = SidebarContent;
+const SidebarGroup = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("nav", { "data-slot": "sidebar-group", className: (0, utils_1.cn)('grid gap-1', 'group-data[collapsed=true]/sidebar:justify-center', className), ...props }));
+exports.SidebarGroup = SidebarGroup;
+const SidebarGroupTitle = ({ children }) => {
+    const { isCollapsed } = (0, sidebar_provider_1.useSidebar)();
+    if (isCollapsed) {
+        return (0, jsx_runtime_1.jsx)(separator_1.Separator, {});
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-group-title", className: "my-2 px-2", children: (0, jsx_runtime_1.jsx)("p", { className: "text-xs font-semibold tracking-[1.1px] text-zinc-500 uppercase", children: children }) }));
+};
+exports.SidebarGroupTitle = SidebarGroupTitle;
+const SidebarFooter = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("nav", { "data-slot": "sidebar-footer", className: (0, utils_1.cn)('border-shadcn-200 flex w-full justify-center border-t bg-white p-4', className), ...props }));
+exports.SidebarFooter = SidebarFooter;

package/dist/components/ui/sidebar/sidebar-expand-button.d.ts

@@ -0,0 +1,6 @@
+type SidebarExpandButtonProps = {
+    tooltip?: string;
+};
+export declare const SidebarExpandButton: ({ tooltip }: SidebarExpandButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=sidebar-expand-button.d.ts.map

package/dist/components/ui/sidebar/sidebar-expand-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-expand-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-expand-button.tsx"],"names":[],"mappings":"AAcA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,aAAa,wBAAwB,4CAqCxE,CAAA"}

package/dist/components/ui/sidebar/sidebar-expand-button.js

@@ -0,0 +1,19 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarExpandButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const lucide_react_1 = require("lucide-react");
+const sidebar_provider_1 = require("./sidebar-provider");
+const sidebar_components_1 = require("./sidebar-components");
+const tooltip_1 = require("../../ui/tooltip");
+const icon_button_1 = require("../icon-button");
+const SidebarExpandButton = ({ tooltip }) => {
+    const { isCollapsed, toggleSidebar } = (0, sidebar_provider_1.useSidebar)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isCollapsed && ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-expand-button", className: "border-shadcn-200 flex w-full bg-white", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute right-[-20px] bottom-4", children: (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { variant: "secondary", rounded: true, onClick: toggleSidebar, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "text-shadcn-400" }) }) }) })), isCollapsed && ((0, jsx_runtime_1.jsx)(sidebar_components_1.SidebarFooter, { children: (0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { className: "group/expand-button text-shadcn-400 hover:bg-accent rounded-sm bg-transparent p-2", onClick: toggleSidebar, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { className: "group-hover/expand-button:text-white dark:text-white" }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", children: tooltip || 'Expand' })] }) }) }))] }));
+};
+exports.SidebarExpandButton = SidebarExpandButton;

package/dist/components/ui/sidebar/sidebar-item-button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import Link from 'next/link';
+export type SidebarItemButtonProps = React.ComponentProps<typeof Link> & {
+    className?: string;
+    title: string;
+    icon?: React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+};
+export declare function SidebarItemButton({ className, title, icon, href, active, disabled, ...props }: SidebarItemButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-item-button.d.ts.map

package/dist/components/ui/sidebar/sidebar-item-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-item-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,IAAI,MAAM,WAAW,CAAA;AAI5B,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACvE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,sBAAsB,2CA2CxB"}

package/dist/components/ui/sidebar/sidebar-item-button.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarItemButton = SidebarItemButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = __importDefault(require("next/link"));
+const button_1 = require("../../ui/button");
+const utils_1 = require("../../../lib/utils");
+function SidebarItemButton({ className, title, icon, href, active, disabled = false, ...props }) {
+    const sharedClassName = (0, utils_1.cn)((0, button_1.buttonVariants)({
+        variant: active ? 'tertiary' : 'outline',
+        fullWidth: true,
+        size: 'small'
+    }), 'group/link flex items-center justify-start', disabled && 'cursor-default opacity-30', className);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)((0, button_1.iconVariants)({ position: 'start', size: 'small' })), children: icon })), title] }));
+    if (disabled) {
+        return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-item-button", className: sharedClassName, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)(link_1.default, { "data-slot": "sidebar-item-button", href: href, className: sharedClassName, ...props, children: content }));
+}

package/dist/components/ui/sidebar/sidebar-item-icon-button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import Link from 'next/link';
+type SidebarItemIconButtonProps = React.ComponentProps<typeof Link> & {
+    title: string;
+    icon: React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+};
+export declare const SidebarItemIconButton: ({ title, icon, href, active, disabled, ...props }: SidebarItemIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=sidebar-item-icon-button.d.ts.map

package/dist/components/ui/sidebar/sidebar-item-icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-item-icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,IAAI,MAAM,WAAW,CAAA;AAW5B,KAAK,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,mDAOnC,0BAA0B,4CAmC5B,CAAA"}

package/dist/components/ui/sidebar/sidebar-item-icon-button.js

@@ -0,0 +1,20 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarItemIconButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = __importDefault(require("next/link"));
+const button_1 = require("../../ui/button");
+const tooltip_1 = require("../../ui/tooltip");
+const utils_1 = require("../../../lib/utils");
+const icon_button_1 = require("../icon-button");
+const SidebarItemIconButton = ({ title, icon, href, active, disabled, ...props }) => {
+    const sharedClassName = (0, utils_1.cn)((0, button_1.buttonVariants)({
+        variant: active ? 'tertiary' : 'outline'
+    }), (0, icon_button_1.iconButtonVariants)(), disabled && 'cursor-default opacity-30');
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { delayDuration: 0, children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: disabled ? ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-item-icon-button", className: sharedClassName, children: icon })) : ((0, jsx_runtime_1.jsx)(link_1.default, { "data-slot": "sidebar-item-icon-button", href: href, className: sharedClassName, ...props, children: icon })) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", children: title })] }) }));
+};
+exports.SidebarItemIconButton = SidebarItemIconButton;

package/dist/components/ui/sidebar/sidebar-item.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SidebarItemButton } from './sidebar-item-button';
+import { SidebarItemIconButton } from './sidebar-item-icon-button';
+export type SidebarItemProps = React.ComponentProps<typeof SidebarItemButton> & React.ComponentProps<typeof SidebarItemIconButton> & {
+    title: string;
+    icon: React.ReactNode;
+    href: string;
+    active?: boolean;
+    disabled?: boolean;
+};
+export declare const SidebarItem: ({ active, disabled, href, ...props }: SidebarItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-item.d.ts.map

package/dist/components/ui/sidebar/sidebar-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAGlE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAC3E,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,eAAO,MAAM,WAAW,GAAI,sCAKzB,gBAAgB,4CA2BlB,CAAA"}

package/dist/components/ui/sidebar/sidebar-item.js

@@ -0,0 +1,19 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const navigation_1 = require("next/navigation");
+const sidebar_item_button_1 = require("./sidebar-item-button");
+const sidebar_item_icon_button_1 = require("./sidebar-item-icon-button");
+const sidebar_provider_1 = require("./sidebar-provider");
+const SidebarItem = ({ active, disabled, href, ...props }) => {
+    const pathname = (0, navigation_1.usePathname)();
+    const { isCollapsed } = (0, sidebar_provider_1.useSidebar)();
+    const isActive = (href) => pathname === href;
+    if (isCollapsed) {
+        return ((0, jsx_runtime_1.jsx)(sidebar_item_icon_button_1.SidebarItemIconButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, disabled: disabled, ...props }));
+    }
+    return ((0, jsx_runtime_1.jsx)(sidebar_item_button_1.SidebarItemButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, disabled: disabled, ...props }));
+};
+exports.SidebarItem = SidebarItem;

package/dist/components/ui/sidebar/sidebar-provider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SidebarContextProps = {
+    isCollapsed: boolean;
+    toggleSidebar: () => void;
+};
+export declare const useSidebar: () => SidebarContextProps;
+export declare const SidebarProvider: ({ children }: React.PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-provider.d.ts.map

package/dist/components/ui/sidebar/sidebar-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAMD,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,4CAgBpE,CAAA"}

package/dist/components/ui/sidebar/sidebar-provider.js

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarProvider = exports.useSidebar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const storage_1 = require("../../../lib/storage");
+const react_1 = __importDefault(require("react"));
+const SidebarContext = react_1.default.createContext(undefined);
+const useSidebar = () => {
+    const context = react_1.default.useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider');
+    }
+    return context;
+};
+exports.useSidebar = useSidebar;
+const SidebarProvider = ({ children }) => {
+    const [collapsed, setCollapsed] = react_1.default.useState((0, storage_1.getStorage)('sidebar-collapsed', false) === 'true');
+    const toggleSidebar = () => setCollapsed((collapsed) => !collapsed);
+    react_1.default.useEffect(() => {
+        localStorage.setItem('sidebar-collapsed', JSON.stringify(collapsed));
+    }, [collapsed]);
+    return ((0, jsx_runtime_1.jsx)(SidebarContext.Provider, { value: { isCollapsed: collapsed, toggleSidebar }, children: children }));
+};
+exports.SidebarProvider = SidebarProvider;

package/dist/components/ui/sidebar/sidebar-root.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SidebarRoot: ({ className, ...props }: React.ComponentProps<"nav">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-root.d.ts.map

package/dist/components/ui/sidebar/sidebar-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAoBzB,eAAO,MAAM,WAAW,GAAI,yBAGzB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,4CAW7B,CAAA"}

package/dist/components/ui/sidebar/sidebar-root.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarRoot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const sidebar_provider_1 = require("./sidebar-provider");
+const utils_1 = require("../../../lib/utils");
+const sidebarVariants = (0, class_variance_authority_1.cva)('group/sidebar shadow-sidebar dark:bg-cod-gray-950 relative flex flex-col transition-[width] duration-300 ease-in-out', {
+    variants: {
+        collapsed: {
+            true: 'w-[72px]',
+            false: 'w-[244px]'
+        }
+    },
+    defaultVariants: {
+        collapsed: false
+    }
+});
+const SidebarRoot = ({ className, ...props }) => {
+    const { isCollapsed } = (0, sidebar_provider_1.useSidebar)();
+    return ((0, jsx_runtime_1.jsx)("nav", { "data-slot": "sidebar-root", className: (0, utils_1.cn)(sidebarVariants({ collapsed: isCollapsed }), className), "data-collapsed": isCollapsed, ...props }));
+};
+exports.SidebarRoot = SidebarRoot;

package/dist/components/ui/stepper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stepper/index.tsx"],"names":[],"mappings":"AAIA,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,MAAc,EACd,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAalB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAa7B;AAED,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA2BtB;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,sBAAsB,mBAAmB,mDAEvE,CAAA;AAED,eAAO,MAAM,mBAAmB,+CAK/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stepper/index.tsx"],"names":[],"mappings":"AAIA,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAI3E;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,MAAc,EACd,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAUlB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE,oBAAoB,2CActB;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,sBAAsB,mBAAmB,mDAEvE,CAAA;AAED,eAAO,MAAM,mBAAmB,+CAK/B,CAAA"}

package/dist/components/ui/stepper/index.js

@@ -10,16 +10,16 @@ const utils_1 = require("../../../lib/utils");
 const lucide_react_1 = require("lucide-react");
 const skeleton_1 = require("../skeleton");
 function Stepper({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "stepper", className: (0, utils_1.cn)('flex flex-col gap-4', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "stepper", className: (0, utils_1.cn)('stepper', className), ...props }));
 }
 function StepperItem({ className, active = false, complete = false, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "stepper-item", "data-active": active, "data-complete": complete, className: (0, utils_1.cn)('group flex flex-row gap-3 data-[complete=true]:cursor-pointer', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "stepper-item", "data-active": active, "data-complete": complete, className: (0, utils_1.cn)('group stepper-item', className), ...props }));
 }
 function StepperItemNumber({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "stepper-item-number", className: (0, utils_1.cn)('border-shadcn-400 text-shadcn-400 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium', 'group-data-[active=true]:border-none group-data-[active=true]:bg-zinc-700 group-data-[active=true]:text-white', 'group-data-[complete=true]:border-none group-data-[complete=true]:bg-white group-data-[complete=true]:text-zinc-700', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "stepper-item-number", className: (0, utils_1.cn)('stepper-item-number', className), ...props }));
 }
 function StepperItemText({ className, title, description, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "stepper-item-text", className: (0, utils_1.cn)('text-shadcn-400 flex flex-col text-sm font-medium', 'group-data-[active=true]:text-zinc-700', 'group-data-[complete=true]:text-zinc-700 group-data-[complete=true]:underline', className), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-8 items-center gap-3", children: [(0, jsx_runtime_1.jsx)("p", { children: title }), (0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, { className: "text-green-600 group-data-[complete=false]:hidden", width: 16, height: 16 })] }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-zinc-500 group-data-[active=false]:hidden", children: description }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "stepper-item-text", className: (0, utils_1.cn)('stepper-item-text', className), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "stepper-item-title", children: [(0, jsx_runtime_1.jsx)("p", { children: title }), (0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, { className: "stepper-item-icon", width: 16, height: 16 })] }), description && (0, jsx_runtime_1.jsx)("p", { className: "stepper-item-description", children: description })] }));
 }
 const StepperContent = ({ active, children }) => {
     return active ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : null;

package/dist/components/ui/stepper/styles.css

@@ -0,0 +1,41 @@
+@theme inline {
+    --color-stepper-item-text: var(--color-shadcn-400);
+    --color-stepper-item-active: var(--color-zinc-700);
+    --color-stepper-item-number: var(--color-shadcn-400);
+    --color-stepper-item-icon: var(--color-green-600);
+    --color-stepper-item-description: var(--color-zinc-500);
+}
+
+@layer components {
+    .stepper {
+        @apply flex flex-col gap-4;
+    }
+
+    .stepper-item {
+        @apply flex flex-row gap-3 data-[complete=true]:cursor-pointer;
+    }
+
+    .stepper-item-number {
+        @apply border-stepper-item-number text-stepper-item-number flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium;
+        @apply group-data-[active=true]:border-none group-data-[active=true]:bg-stepper-item-active group-data-[active=true]:text-white;
+        @apply group-data-[complete=true]:border-none group-data-[complete=true]:bg-white group-data-[complete=true]:text-stepper-item-active;
+    }
+
+    .stepper-item-text {
+        @apply text-stepper-item-text flex flex-col text-sm font-medium;
+        @apply group-data-[active=true]:text-stepper-item-active;
+        @apply group-data-[complete=true]:text-stepper-item-active group-data-[complete=true]:underline;
+    }
+
+    .stepper-item-title {
+        @apply flex h-8 items-center gap-3;
+    }
+
+    .stepper-item-icon {
+        @apply text-stepper-item-icon group-data-[complete=false]:hidden;
+    }
+
+    .stepper-item-description {
+        @apply text-xs text-stepper-item-description group-data-[active=false]:hidden;
+    }
+}

package/dist/components/ui/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAA;AAIrD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAQjD;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAWjD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAWpD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAWpD;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAA;AAIrD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAQjD;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAQjD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAWpD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAQpD;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/tabs/index.js

@@ -42,14 +42,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const TabsPrimitive = __importStar(require("@radix-ui/react-tabs"));
 const utils_1 = require("../../../lib/utils");
 function Tabs({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.Root, { "data-slot": "tabs", className: (0, utils_1.cn)('mt-6 w-full', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.Root, { "data-slot": "tabs", className: (0, utils_1.cn)('tabs', className), ...props }));
 }
 function TabsList({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.List, { "data-slot": "tabs-list", className: (0, utils_1.cn)('flex h-10 items-center justify-start gap-4 rounded-md p-1 text-slate-500', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.List, { "data-slot": "tabs-list", className: (0, utils_1.cn)('tabs-list', className), ...props }));
 }
 function TabsTrigger({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: (0, utils_1.cn)('!focus-visible:outline-none !focus-visible:ring-2 !focus-visible:ring-slate-950 !focus-visible:ring-offset-2 text-shadcn-400 hover:text-shadcn-500 data-[state=active]:bg-accent data-[state=active]:text-accent-foreground inline-flex items-center justify-center rounded-md px-4 py-[10px] text-sm font-medium whitespace-nowrap ring-offset-white transition-all hover:bg-white disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: (0, utils_1.cn)('!focus-visible:outline-none !focus-visible:ring-2 !focus-visible:ring-slate-950 !focus-visible:ring-offset-2 tabs-trigger tabs-trigger-disabled', className), ...props }));
 }
 function TabsContent({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.Content, { "data-slot": "tabs-content", className: (0, utils_1.cn)('mt-4 ring-offset-white focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 focus-visible:outline-hidden', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(TabsPrimitive.Content, { "data-slot": "tabs-content", className: (0, utils_1.cn)('tabs-content', className), ...props }));
 }

package/dist/components/ui/tabs/styles.css

@@ -0,0 +1,31 @@
+@theme inline {
+    --color-tabs-trigger-text: var(--color-shadcn-400);
+    --color-tabs-trigger-hover: var(--color-white);
+    --color-tabs-trigger-text-hover: var(--color-shadcn-500);
+    --color-tabs-trigger-active: var(--color-accent);
+    --color-tabs-trigger-text-active: var(--color-zinc-700);
+}
+
+@layer components {
+    .tabs {
+        @apply mt-6 w-full;
+    }
+
+    .tabs-list {
+        @apply flex h-10 items-center justify-start gap-4 rounded-md p-1;
+    }
+
+    .tabs-trigger {
+        @apply text-tabs-trigger-text hover:text-tabs-trigger-text-hover cursor-pointer inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium whitespace-nowrap ring-offset-white transition-all hover:bg-tabs-trigger-hover;
+        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2;
+        @apply data-[state=active]:bg-tabs-trigger-active data-[state=active]:text-tabs-trigger-text-active;
+    }
+
+    .tabs-trigger-disabled {
+        @apply disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    .tabs-content {
+        @apply mt-4 ring-offset-white focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 focus-visible:outline-hidden;
+    }
+}