@kala-ui/react 0.0.1-beta.7 → 0.0.2

package/dist/components/ring-progress/ring-progress.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RingProgress } from "./ring-progress";
+declare const meta: Meta<typeof RingProgress>;
+export default meta;
+type Story = StoryObj<typeof RingProgress>;
+export declare const Default: Story;
+export declare const CustomSize: Story;
+export declare const WithIcon: Story;
+export declare const Sections: Story;

package/dist/components/ring-progress/ring-progress.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { RingProgress } from "./ring-progress";
+const meta = {
+    title: "Components/RingProgress",
+    component: RingProgress,
+    tags: ["autodocs"],
+    argTypes: {
+        value: { control: { type: "range", min: 0, max: 100 } },
+        size: { control: "number" },
+        thickness: { control: "number" },
+        roundCaps: { control: "boolean" },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        value: 40,
+        label: _jsx("span", { className: "font-bold", children: "40%" }),
+    },
+};
+export const CustomSize = {
+    args: {
+        size: 80,
+        thickness: 8,
+        value: 75,
+        label: _jsx("span", { className: "text-xs", children: "75%" }),
+    },
+};
+export const WithIcon = {
+    args: {
+        value: 100,
+        color: "text-green-500",
+        label: _jsx(Check, { className: "h-8 w-8 text-green-500" }),
+    },
+};
+export const Sections = {
+    args: {
+        label: _jsx("span", { className: "text-sm font-semibold", children: "Usage" }),
+        sections: [
+            { value: 40, color: "text-blue-500" },
+            { value: 15, color: "text-orange-500" },
+            { value: 10, color: "text-red-500" },
+        ],
+    },
+};

package/dist/components/scroll-area/scroll-area.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Separator } from "../separator/separator";
+import { Separator } from "../separator";
 import { ScrollArea, ScrollBar } from "./scroll-area";
 const meta = {
     title: "Layout/ScrollArea",
@@ -81,31 +81,31 @@ export const Styled = {
  */
 export const CodeBlock = {
     args: {},
-    render: () => (_jsxs(ScrollArea, { className: "h-[300px] w-[500px] rounded-md border", children: [_jsx("div", { className: "bg-muted/50 p-4", children: _jsx("pre", { className: "text-sm", children: _jsx("code", { children: `import { ScrollArea } from '@repo/ui/scroll-area';
-
-export function Example() {
-  return (
-    <ScrollArea className="h-72 w-48 rounded-md border">
-      <div className="p-4">
-        <h4>Title</h4>
-        {/* Your scrollable content */}
-      </div>
-    </ScrollArea>
-  );
-}
-
-// Advanced usage with horizontal scrolling
-export function HorizontalExample() {
-  return (
-    <ScrollArea className="w-96 whitespace-nowrap">
-      <div className="flex w-max space-x-4 p-4">
-        {items.map((item) => (
-          <div key={item.id}>{item.content}</div>
-        ))}
-      </div>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
+    render: () => (_jsxs(ScrollArea, { className: "h-[300px] w-[500px] rounded-md border", children: [_jsx("div", { className: "bg-muted/50 p-4", children: _jsx("pre", { className: "text-sm", children: _jsx("code", { children: `import { ScrollArea } from '@repo/ui/scroll-area';
+
+export function Example() {
+  return (
+    <ScrollArea className="h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4>Title</h4>
+        {/* Your scrollable content */}
+      </div>
+    </ScrollArea>
+  );
+}
+
+// Advanced usage with horizontal scrolling
+export function HorizontalExample() {
+  return (
+    <ScrollArea className="w-96 whitespace-nowrap">
+      <div className="flex w-max space-x-4 p-4">
+        {items.map((item) => (
+          <div key={item.id}>{item.content}</div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  );
 }` }) }) }), _jsx(ScrollBar, { orientation: "horizontal" })] })),
 };
 /**

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1 @@
+export * from "./segmented-control";

package/dist/components/segmented-control/index.js

@@ -0,0 +1 @@
+export * from "./segmented-control";

package/dist/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface SegmentedControlItem {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export type SegmentedControlData = string | SegmentedControlItem;
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    data: SegmentedControlData[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    name?: string;
+    fullWidth?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+}
+export declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/segmented-control/segmented-control.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+export const SegmentedControl = React.forwardRef(({ className, data, value: valueProp, defaultValue, onChange, disabled, name, fullWidth, size = "sm", radius = "sm", ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(valueProp ??
+        defaultValue ??
+        (typeof data[0] === "string" ? data[0] : data[0]?.value) ??
+        "");
+    React.useEffect(() => {
+        if (valueProp !== undefined) {
+            setInternalValue(valueProp);
+        }
+    }, [valueProp]);
+    const handleChange = (val) => {
+        if (disabled)
+            return;
+        if (valueProp === undefined) {
+            setInternalValue(val);
+        }
+        onChange?.(val);
+    };
+    const items = data.map((item) => typeof item === "string" ? { label: item, value: item } : item);
+    const sizeClasses = {
+        xs: "h-6 text-xs",
+        sm: "h-8 text-sm",
+        md: "h-10 text-sm",
+        lg: "h-12 text-base",
+        xl: "h-14 text-lg",
+    };
+    const radiusClasses = {
+        xs: "rounded-sm",
+        sm: "rounded",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        full: "rounded-full",
+    };
+    return (_jsx("div", { ref: ref, className: cn("relative flex bg-muted p-1", radiusClasses[radius], fullWidth ? "w-full" : "w-fit", disabled && "cursor-not-allowed opacity-60", className), ...props, children: items.map((item) => {
+            const isActive = internalValue === item.value;
+            return (_jsxs("button", { type: "button", disabled: disabled || item.disabled, onClick: () => !item.disabled && handleChange(item.value), className: cn("relative z-10 flex items-center justify-center px-3 font-medium transition-colors", sizeClasses[size], fullWidth ? "flex-1" : "min-w-[70px]", isActive
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground", item.disabled && "cursor-not-allowed opacity-50", radiusClasses[radius]), children: [isActive && (_jsx(motion.div, { layoutId: `indicator-${name ?? "segmented-control"}`, className: cn("absolute inset-0 -z-10 bg-background shadow-sm", radiusClasses[radius]), transition: { type: "spring", bounce: 0.2, duration: 0.3 } })), _jsx("span", { className: "z-20", children: item.label })] }, item.value));
+        }) }));
+});
+SegmentedControl.displayName = "SegmentedControl";

package/dist/components/segmented-control/segmented-control.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SegmentedControl } from "./segmented-control";
+declare const meta: Meta<typeof SegmentedControl>;
+export default meta;
+type Story = StoryObj<typeof SegmentedControl>;
+export declare const Default: Story;
+export declare const FullWidth: Story;
+export declare const Sizes: Story;
+export declare const Disabled: Story;
+export declare const DisabledOption: Story;

package/dist/components/segmented-control/segmented-control.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SegmentedControl } from "./segmented-control";
+const meta = {
+    title: "Components/SegmentedControl",
+    component: SegmentedControl,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: { type: "select" },
+            options: ["xs", "sm", "md", "lg", "xl"],
+        },
+        radius: {
+            control: { type: "select" },
+            options: ["xs", "sm", "md", "lg", "xl", "full"],
+        },
+        fullWidth: { control: "boolean" },
+        disabled: { control: "boolean" },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        data: ["React", "Vue", "Angular", "Svelte"],
+        defaultValue: "React",
+    },
+};
+export const FullWidth = {
+    args: {
+        data: ["Daily", "Weekly", "Monthly"],
+        defaultValue: "Weekly",
+        fullWidth: true,
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(SegmentedControl, { data: ["xs", "sm", "md"], size: "xs", defaultValue: "xs" }), _jsx(SegmentedControl, { data: ["xs", "sm", "md"], size: "sm", defaultValue: "sm" }), _jsx(SegmentedControl, { data: ["xs", "sm", "md"], size: "md", defaultValue: "md" }), _jsx(SegmentedControl, { data: ["xs", "sm", "md"], size: "lg", defaultValue: "lg" }), _jsx(SegmentedControl, { data: ["xs", "sm", "md"], size: "xl", defaultValue: "xl" })] })),
+};
+export const Disabled = {
+    args: {
+        data: ["React", "Vue", "Angular"],
+        defaultValue: "Vue",
+        disabled: true,
+    },
+};
+export const DisabledOption = {
+    args: {
+        data: [
+            { label: "React", value: "react" },
+            { label: "Vue", value: "vue", disabled: true },
+            { label: "Angular", value: "angular" },
+        ],
+        defaultValue: "react",
+    },
+};

package/dist/components/select/select.js

@@ -5,7 +5,7 @@ import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { selectContentStyles, selectItemStyles, selectLabelStyles, selectScrollButtonStyles, selectSeparatorStyles, selectTriggerStyles, } from "../../config/select";
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 function Select(props) {
     return _jsx(SelectPrimitive.Root, { ...props });
 }

package/dist/components/select/select.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from "./select";
 const meta = {
     title: "Forms/Select",

package/dist/components/separator/separator.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Separator } from "./separator";
 const meta = {
     title: "Layout/Separator",

package/dist/components/session-card/session-card-skeleton.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { cn } from "../../lib/utils";
 import { Card, CardContent, CardHeader } from "../card";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { SkeletonCircle } from "../skeleton/skeleton-patterns";
 /**
  * Session Card skeleton component
@@ -20,7 +20,7 @@ import { SkeletonCircle } from "../skeleton/skeleton-patterns";
  * ```
  */
 export function SessionCardSkeleton({ showBadge = false, showRevokeButton = true, className, "data-testid": dataTestId, }) {
-    return (_jsxs(Card, { "data-testid": dataTestId || "session-card-skeleton", className: cn("relative", className), children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3 flex-1", children: [_jsx(SkeletonCircle, { size: "1.5rem", className: "rounded-md" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-32 mb-1" }), _jsx(Skeleton, { className: "h-3 w-48" })] })] }), showBadge ? (_jsx(Skeleton, { className: "h-5 w-24 rounded-md" })) : (showRevokeButton && (_jsx(Skeleton, { className: "h-8 w-16 rounded-md" })))] }) }), _jsx(CardContent, { className: "pt-0", children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-4 w-56" })] }) })] }));
+    return (_jsxs(Card, { "data-testid": dataTestId || "session-card-skeleton", className: cn("relative", className), children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3 flex-1", children: [_jsx(SkeletonCircle, { size: "1.5rem", className: "rounded-md" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-32 mb-1" }), _jsx(Skeleton, { className: "h-3 w-48" })] })] }), showBadge ? (_jsx(Skeleton, { className: "h-5 w-24 rounded-md" })) : (showRevokeButton && _jsx(Skeleton, { className: "h-8 w-16 rounded-md" }))] }) }), _jsx(CardContent, { className: "pt-0", children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-4 w-56" })] }) })] }));
 }
 /**
  * Compound component: SessionCard.Skeleton

package/dist/components/session-card/session-card.js

@@ -53,7 +53,7 @@ export function SessionCard({ session, onRevoke, isRevoking, className, isLoadin
         if (skeleton) {
             return (_jsx(Card, { "data-comp": "session-card", className: cn("relative", className), children: skeleton }));
         }
-        return (_jsx(SessionCardSkeleton, { className: className, ...skeletonConfig }));
+        return _jsx(SessionCardSkeleton, { className: className, ...skeletonConfig });
     }
     const DeviceIcon = getDeviceIcon(session.device);
     const lastActive = formatTimestamp(session.lastActiveAt);

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Supports sections, header, footer, and collapsed state.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Sidebar skeleton component
  *
@@ -18,5 +18,5 @@ import { Skeleton } from "../skeleton/skeleton";
  * ```
  */
 export function SidebarSkeleton({ collapsed = false, showHeader = true, showFooter = true, sectionCount = 3, itemsPerSection = 4, className, "data-testid": dataTestId, }) {
-    return (_jsxs("aside", { "data-testid": dataTestId || "sidebar-skeleton", className: cn("flex flex-col h-full bg-popover border-r", collapsed ? "w-16" : "w-64", className), "aria-label": "Loading sidebar", "aria-busy": "true", children: [showHeader && (_jsx("div", { className: "flex items-center h-16 px-6 border-b", children: collapsed ? (_jsx(Skeleton, { className: "h-8 w-8 mx-auto" })) : (_jsx(Skeleton, { className: "h-8 w-32" })) })), _jsx("div", { className: "flex-1 overflow-y-auto py-4 px-3", children: Array.from({ length: sectionCount }).map((_, sectionIndex) => (_jsxs("div", { className: "mb-6 last:mb-0", children: [!collapsed && (_jsx(Skeleton, { className: "h-3 w-20 mb-2 mx-3" })), _jsx("div", { className: "space-y-2", children: Array.from({ length: itemsPerSection }).map((_, itemIndex) => (_jsxs("div", { className: cn("flex items-center px-3 py-2", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-5 w-5 flex-shrink-0" }), !collapsed && _jsx(Skeleton, { className: "h-4 flex-1" }), !collapsed && itemIndex === 0 && (_jsx(Skeleton, { className: "h-4 w-4 rounded-full flex-shrink-0" }))] }, itemIndex))) })] }, sectionIndex))) }), showFooter && (_jsx("div", { className: "p-4 border-t", children: _jsxs("div", { className: cn("flex items-center", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-10 w-10 rounded-full flex-shrink-0" }), !collapsed && (_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-24 mb-1" }), _jsx(Skeleton, { className: "h-3 w-32" })] }))] }) }))] }));
+    return (_jsxs("aside", { "data-testid": dataTestId || "sidebar-skeleton", className: cn("flex flex-col h-full bg-popover border-r", collapsed ? "w-16" : "w-64", className), "aria-label": "Loading sidebar", "aria-busy": "true", children: [showHeader && (_jsx("div", { className: "flex items-center h-16 px-6 border-b", children: collapsed ? (_jsx(Skeleton, { className: "h-8 w-8 mx-auto" })) : (_jsx(Skeleton, { className: "h-8 w-32" })) })), _jsx("div", { className: "flex-1 overflow-y-auto py-4 px-3", children: Array.from({ length: sectionCount }).map((_, sectionIndex) => (_jsxs("div", { className: "mb-6 last:mb-0", children: [!collapsed && _jsx(Skeleton, { className: "h-3 w-20 mb-2 mx-3" }), _jsx("div", { className: "space-y-2", children: Array.from({ length: itemsPerSection }).map((_, itemIndex) => (_jsxs("div", { className: cn("flex items-center px-3 py-2", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-5 w-5 flex-shrink-0" }), !collapsed && _jsx(Skeleton, { className: "h-4 flex-1" }), !collapsed && itemIndex === 0 && (_jsx(Skeleton, { className: "h-4 w-4 rounded-full flex-shrink-0" }))] }, itemIndex))) })] }, sectionIndex))) }), showFooter && (_jsx("div", { className: "p-4 border-t", children: _jsxs("div", { className: cn("flex items-center", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-10 w-10 rounded-full flex-shrink-0" }), !collapsed && (_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-24 mb-1" }), _jsx(Skeleton, { className: "h-3 w-32" })] }))] }) }))] }));
 }

package/dist/components/skeleton/index.d.ts

@@ -1,9 +1,9 @@
+export type { FieldGroupSkeletonConfig, FormFieldConfig, FormFieldType, FormSkeletonConfig, } from "./form-skeleton";
+export { FieldGroupSkeleton, FormSkeleton } from "./form-skeleton";
 export type { SkeletonProps } from "./skeleton";
 export { Skeleton } from "./skeleton";
+export type { AlertSkeletonConfig, BannerSkeletonConfig, BaseSkeletonConfig, CardSkeletonConfig, EmptyStateSkeletonConfig, ExtractSkeletonConfig, FieldSkeletonConfig, ListSkeletonConfig, LoadingStateProps, MetricCardSkeletonConfig, PatternConfig, SessionCardSkeletonConfig, SkeletonVariant, SkeletonWrapperConfig, WithLoadingState, } from "./skeleton.types";
 export type { SkeletonAvatarProps, SkeletonButtonProps, SkeletonCardContentProps, SkeletonCircleProps, SkeletonHeaderProps, SkeletonParagraphProps, SkeletonRectangleProps, SkeletonTextProps, } from "./skeleton-patterns";
 export { SkeletonAvatar, SkeletonButton, SkeletonCardContent, SkeletonCircle, SkeletonHeader, SkeletonParagraph, SkeletonRectangle, SkeletonText, } from "./skeleton-patterns";
 export type { SkeletonWrapperProps } from "./skeleton-wrapper";
 export { SkeletonWrapper } from "./skeleton-wrapper";
-export type { FieldGroupSkeletonConfig, FormFieldConfig, FormFieldType, FormSkeletonConfig, } from "./form-skeleton";
-export { FieldGroupSkeleton, FormSkeleton } from "./form-skeleton";
-export type { AccordionSkeletonConfig, AlertSkeletonConfig, BannerSkeletonConfig, BaseSkeletonConfig, BreadcrumbsSkeletonConfig, CalendarSkeletonConfig, CardSkeletonConfig, DialogSkeletonConfig, DrawerSkeletonConfig, EmptyStateSkeletonConfig, ExtractSkeletonConfig, FieldSkeletonConfig, HeaderSkeletonConfig, ListSkeletonConfig, LoadingStateProps, MetricCardSkeletonConfig, NavigationSkeletonConfig, PaginationSkeletonConfig, PatternConfig, PopoverSkeletonConfig, SessionCardSkeletonConfig, SidebarSkeletonConfig, SkeletonVariant, StepsSkeletonConfig, SkeletonWrapperConfig, TableSkeletonConfig, TabsSkeletonConfig, WithLoadingState, } from "./skeleton.types";

package/dist/components/skeleton/index.js

@@ -1,4 +1,4 @@
+export { FieldGroupSkeleton, FormSkeleton } from "./form-skeleton";
 export { Skeleton } from "./skeleton";
 export { SkeletonAvatar, SkeletonButton, SkeletonCardContent, SkeletonCircle, SkeletonHeader, SkeletonParagraph, SkeletonRectangle, SkeletonText, } from "./skeleton-patterns";
 export { SkeletonWrapper } from "./skeleton-wrapper";
-export { FieldGroupSkeleton, FormSkeleton } from "./form-skeleton";

package/dist/components/skeleton/skeleton.types.d.ts

@@ -131,39 +131,6 @@ export interface ListSkeletonConfig {
      */
     dense?: boolean;
 }
-/**
- * Table skeleton configuration
- */
-export interface TableSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Number of rows to display
-     */
-    rows?: number;
-    /**
-     * Number of columns
-     */
-    columns?: number;
-    /**
-     * Show action column
-     */
-    showActions?: boolean;
-    /**
-     * Column headers (optional, for matching actual headers)
-     */
-    headers?: string[];
-    /**
-     * Column widths (to match actual table and prevent CLS)
-     */
-    columnWidths?: string[];
-    /**
-     * Show checkbox column for selection
-     */
-    showCheckboxes?: boolean;
-    /**
-     * Enable sticky header
-     */
-    stickyHeader?: boolean;
-}
 /**
  * Field skeleton configuration
  */
@@ -189,222 +156,6 @@ export interface FieldSkeletonConfig {
      */
     variant?: "default" | "error";
 }
-/**
- * Navigation skeleton configuration
- */
-export interface NavigationSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Navigation orientation
-     */
-    orientation?: "horizontal" | "vertical";
-    /**
-     * Number of navigation items
-     */
-    itemCount?: number;
-    /**
-     * Show icon for each item
-     */
-    showIcons?: boolean;
-    /**
-     * Show badge indicators
-     */
-    showBadges?: boolean;
-    /**
-     * Show nested items
-     */
-    nested?: boolean;
-}
-/**
- * Sidebar skeleton configuration
- */
-export interface SidebarSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Collapsed state
-     */
-    collapsed?: boolean;
-    /**
-     * Show header section
-     */
-    showHeader?: boolean;
-    /**
-     * Show footer section
-     */
-    showFooter?: boolean;
-    /**
-     * Number of navigation sections
-     */
-    sectionCount?: number;
-    /**
-     * Items per section
-     */
-    itemsPerSection?: number;
-}
-/**
- * Header skeleton configuration
- */
-export interface HeaderSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Show navigation items
-     */
-    showNavigation?: boolean;
-    /**
-     * Number of navigation items
-     */
-    navItemCount?: number;
-    /**
-     * Show search input
-     */
-    showSearch?: boolean;
-    /**
-     * Show notifications button
-     */
-    showNotifications?: boolean;
-    /**
-     * Show user menu button
-     */
-    showUserMenu?: boolean;
-}
-/**
- * Breadcrumbs skeleton configuration
- */
-export interface BreadcrumbsSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Number of breadcrumb levels
-     */
-    depth?: number;
-    /**
-     * Show home icon
-     */
-    showHome?: boolean;
-    /**
-     * Separator character
-     */
-    separator?: string;
-}
-/**
- * Steps skeleton configuration
- */
-export interface StepsSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Number of steps
-     */
-    stepCount?: number;
-    /**
-     * Orientation of the stepper
-     */
-    orientation?: "horizontal" | "vertical";
-    /**
-     * Show step labels and descriptions
-     */
-    showLabels?: boolean;
-}
-/**
- * Tabs skeleton configuration
- */
-export interface TabsSkeletonConfig {
-    /**
-     * Number of tabs
-     */
-    tabCount?: number;
-    /**
-     * Tab variant style
-     */
-    variant?: "default" | "pills" | "underline";
-    /**
-     * Show tab content skeleton
-     */
-    showContent?: boolean;
-    /**
-     * Number of content rows
-     */
-    contentRows?: number;
-}
-/**
- * Accordion skeleton configuration
- */
-export interface AccordionSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Number of accordion items
-     */
-    itemCount?: number;
-    /**
-     * Show expanded content
-     */
-    defaultExpanded?: boolean;
-    /**
-     * Number of content rows when expanded
-     */
-    contentRows?: number;
-}
-/**
- * Calendar skeleton configuration
- */
-export interface CalendarSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Show month/year header
-     */
-    showHeader?: boolean;
-    /**
-     * Show day labels
-     */
-    showDayLabels?: boolean;
-    /**
-     * Number of weeks to show
-     */
-    weekCount?: number;
-}
-/**
- * Pagination skeleton configuration
- */
-export interface PaginationSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Number of page buttons to show
-     */
-    pageCount?: number;
-    /**
-     * Show prev/next buttons
-     */
-    showPrevNext?: boolean;
-    /**
-     * Show info text
-     */
-    showInfo?: boolean;
-}
-/**
- * Dialog skeleton configuration
- */
-export interface DialogSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Show dialog header
-     */
-    showHeader?: boolean;
-    /**
-     * Show dialog footer
-     */
-    showFooter?: boolean;
-    /**
-     * Number of content rows
-     */
-    contentRows?: number;
-}
-/**
- * Drawer skeleton configuration (extends Dialog)
- */
-export interface DrawerSkeletonConfig extends DialogSkeletonConfig {
-}
-/**
- * Popover skeleton configuration
- */
-export interface PopoverSkeletonConfig extends BaseSkeletonConfig {
-    /**
-     * Number of content rows
-     */
-    contentRows?: number;
-    /**
-     * Use compact spacing
-     */
-    compact?: boolean;
-}
 /**
  * Metric card skeleton configuration
  */

package/dist/components/slider/index.d.ts

@@ -1,2 +1,2 @@
-export type { SliderProps } from "./slider.types";
 export { Slider } from "./slider";
+export type { SliderProps } from "./slider.types";

package/dist/components/slider/slider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 const Slider = React.forwardRef(({ className, defaultValue, value, isLoading = false, ...props }, ref) => {
     // Show loading skeleton
     if (isLoading) {

package/dist/components/slider/slider.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Slider } from "./slider";
 const meta = {
     title: "Forms/Slider",