@kala-ui/react 0.0.1-beta.1

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

@@ -0,0 +1,491 @@
+/**
+ * Skeleton Component Types
+ *
+ * TypeScript definitions and utility types for skeleton components.
+ */
+/**
+ * Base skeleton configuration interface
+ */
+export interface BaseSkeletonConfig {
+    /**
+     * Animation variant for the skeleton
+     */
+    variant?: "default" | "pulse" | "fade" | "wave";
+    /**
+     * Enable animation
+     */
+    animate?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Loading state props interface
+ *
+ * Common props pattern for components that support loading states
+ */
+export interface LoadingStateProps {
+    /**
+     * Show loading skeleton
+     */
+    isLoading?: boolean;
+    /**
+     * Skeleton configuration object
+     */
+    skeletonConfig?: BaseSkeletonConfig;
+    /**
+     * Custom skeleton override
+     */
+    skeleton?: React.ReactNode;
+}
+/**
+ * Skeleton variant type
+ */
+export type SkeletonVariant = "default" | "pulse" | "fade" | "wave";
+/**
+ * Skeleton wrapper configuration
+ */
+export interface SkeletonWrapperConfig {
+    /**
+     * Enable fade transition
+     */
+    transition?: boolean;
+    /**
+     * Transition duration in milliseconds
+     */
+    duration?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Pattern configuration options
+ */
+export interface PatternConfig {
+    /**
+     * Number of elements to render
+     */
+    count?: number;
+    /**
+     * Element sizes
+     */
+    size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Element spacing
+     */
+    spacing?: "tight" | "normal" | "loose";
+}
+/**
+ * Card skeleton configuration
+ */
+export interface CardSkeletonConfig {
+    /**
+     * Card layout variant
+     */
+    variant?: "default" | "withImage" | "withImageTop" | "horizontal" | "withFooter" | "minimal";
+    /**
+     * Show header in skeleton
+     */
+    hasHeader?: boolean;
+    /**
+     * Show image in skeleton
+     */
+    hasImage?: boolean;
+    /**
+     * Show footer actions in skeleton
+     */
+    hasFooter?: boolean;
+    /**
+     * Image position (for horizontal layout)
+     */
+    imagePosition?: "top" | "left" | "right";
+    /**
+     * Number of content lines
+     */
+    contentRows?: number;
+    /**
+     * Show action buttons
+     */
+    showActions?: boolean;
+}
+/**
+ * List skeleton configuration
+ */
+export interface ListSkeletonConfig {
+    /**
+     * List layout variant
+     */
+    variant?: "simple" | "withAvatar" | "withIcon" | "withBadge" | "multiLine";
+    /**
+     * Number of list items
+     */
+    itemCount?: number;
+    /**
+     * Show dividers between items
+     */
+    showDividers?: boolean;
+    /**
+     * Dense spacing mode
+     */
+    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
+ */
+export interface FieldSkeletonConfig {
+    /**
+     * Show label
+     */
+    showLabel?: boolean;
+    /**
+     * Show required indicator
+     */
+    required?: boolean;
+    /**
+     * Show helper text
+     */
+    showHelperText?: boolean;
+    /**
+     * Control height
+     */
+    controlHeight?: string;
+    /**
+     * Field variant
+     */
+    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
+ */
+export interface MetricCardSkeletonConfig {
+    /**
+     * Metric card layout variant
+     */
+    variant?: "default" | "withIcon" | "simple";
+    /**
+     * Show icon in skeleton
+     */
+    showIcon?: boolean;
+    /**
+     * Show change indicator in skeleton
+     */
+    showChange?: boolean;
+}
+/**
+ * Session card skeleton configuration
+ */
+export interface SessionCardSkeletonConfig {
+    /**
+     * Show current session badge
+     */
+    showBadge?: boolean;
+    /**
+     * Show revoke button
+     */
+    showRevokeButton?: boolean;
+}
+/**
+ * Empty state skeleton configuration
+ */
+export interface EmptyStateSkeletonConfig {
+    /**
+     * Show icon in skeleton
+     */
+    showIcon?: boolean;
+    /**
+     * Show action button in skeleton
+     */
+    showAction?: boolean;
+}
+/**
+ * Banner skeleton configuration
+ */
+export interface BannerSkeletonConfig {
+    /**
+     * Banner variant
+     */
+    variant?: "default" | "info" | "warning" | "error" | "success";
+    /**
+     * Show icon in skeleton
+     */
+    showIcon?: boolean;
+    /**
+     * Show close button in skeleton
+     */
+    showCloseButton?: boolean;
+}
+/**
+ * Alert skeleton configuration
+ */
+export interface AlertSkeletonConfig {
+    /**
+     * Alert variant
+     */
+    variant?: "default" | "primary" | "secondary" | "success" | "danger" | "destructive" | "warning" | "info";
+    /**
+     * Show icon in skeleton
+     */
+    showIcon?: boolean;
+}
+/**
+ * Helper type for component with loading state support
+ */
+export type WithLoadingState<T> = T & LoadingStateProps;
+/**
+ * Extract skeleton config type from component props
+ */
+export type ExtractSkeletonConfig<T> = T extends {
+    skeletonConfig?: infer C;
+} ? C : never;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/types.ts"],"names":[],"mappings":"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"}

package/dist/src/components/skeleton/types.js

@@ -0,0 +1,7 @@
+/**
+ * Skeleton Component Types
+ *
+ * TypeScript definitions and utility types for skeleton components.
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/components/skeleton/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/skeleton/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

package/dist/src/components/skeleton-fade/index.d.ts

@@ -0,0 +1,3 @@
+export type { SkeletonFadeProps } from './skeleton-fade';
+export { SkeletonFade } from './skeleton-fade';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/skeleton-fade/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton-fade/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/src/components/skeleton-fade/index.js

@@ -0,0 +1,2 @@
+export { SkeletonFade } from './skeleton-fade';
+//# sourceMappingURL=index.js.map

package/dist/src/components/skeleton-fade/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/skeleton-fade/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/src/components/skeleton-fade/skeleton-fade.d.ts

@@ -0,0 +1,44 @@
+/**
+ * SkeletonFade Component
+ *
+ * Provides smooth fade transition from skeleton loading state to actual content.
+ * Automatically handles the transition with proper timing and reduced-motion support.
+ */
+import * as React from 'react';
+export interface SkeletonFadeProps {
+    /**
+     * Whether content is still loading
+     */
+    isLoading: boolean;
+    /**
+     * Skeleton component to show while loading
+     */
+    skeleton: React.ReactNode;
+    /**
+     * Actual content to show when loaded
+     */
+    children: React.ReactNode;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Transition duration in milliseconds (default: 300)
+     */
+    duration?: number;
+}
+/**
+ * Component that handles smooth fade transition from skeleton to content.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonFade
+ *   isLoading={!data}
+ *   skeleton={<SkeletonCard />}
+ * >
+ *   <DataCard data={data} />
+ * </SkeletonFade>
+ * ```
+ */
+export declare function SkeletonFade({ isLoading, skeleton, children, className, duration, }: SkeletonFadeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skeleton-fade.d.ts.map

package/dist/src/components/skeleton-fade/skeleton-fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-fade.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton-fade/skeleton-fade.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAc,GACf,EAAE,iBAAiB,2CA4CnB"}

package/dist/src/components/skeleton-fade/skeleton-fade.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SkeletonFade Component
+ *
+ * Provides smooth fade transition from skeleton loading state to actual content.
+ * Automatically handles the transition with proper timing and reduced-motion support.
+ */
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+/**
+ * Component that handles smooth fade transition from skeleton to content.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonFade
+ *   isLoading={!data}
+ *   skeleton={<SkeletonCard />}
+ * >
+ *   <DataCard data={data} />
+ * </SkeletonFade>
+ * ```
+ */
+export function SkeletonFade({ isLoading, skeleton, children, className, duration = 300, }) {
+    const [showSkeleton, setShowSkeleton] = React.useState(isLoading);
+    React.useEffect(() => {
+        if (!isLoading && showSkeleton) {
+            // Delay hiding skeleton to allow fade-out animation
+            const timeout = setTimeout(() => {
+                setShowSkeleton(false);
+            }, duration);
+            return () => clearTimeout(timeout);
+        }
+        if (isLoading && !showSkeleton) {
+            setShowSkeleton(true);
+        }
+        return undefined;
+    }, [isLoading, showSkeleton, duration]);
+    return (_jsxs("div", { "data-slot": "skeleton-fade", className: cn('relative', className), children: [showSkeleton && (_jsx("div", { className: cn('transition-opacity ease-out', isLoading ? 'opacity-100' : 'opacity-0 animate-fade-out'), style: { transitionDuration: `${duration}ms` }, "aria-hidden": !isLoading, children: skeleton })), !showSkeleton && (_jsx("div", { className: "animate-fade-in transition-opacity ease-in", style: { transitionDuration: `${duration}ms` }, children: children }))] }));
+}
+//# sourceMappingURL=skeleton-fade.js.map

package/dist/src/components/skeleton-fade/skeleton-fade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-fade.js","sourceRoot":"","sources":["../../../../src/components/skeleton-fade/skeleton-fade.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAyBrC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,GAAG,GACI;IAClB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAElE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,SAAS,IAAI,YAAY,EAAE,CAAC;YAC/B,oDAAoD;YACpD,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC9B,eAAe,CAAC,KAAK,CAAC,CAAC;YACzB,CAAC,EAAE,QAAQ,CAAC,CAAC;YACb,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,eAAe,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExC,OAAO,CACL,4BAAe,eAAe,EAAC,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,aAEhE,YAAY,IAAI,CACf,cACE,SAAS,EAAE,EAAE,CACX,6BAA6B,EAC7B,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,4BAA4B,CACzD,EACD,KAAK,EAAE,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,EAAE,iBACjC,CAAC,SAAS,YAEtB,QAAQ,GACL,CACP,EAGA,CAAC,YAAY,IAAI,CAChB,cACE,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAE,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,EAAE,YAE7C,QAAQ,GACL,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/src/components/skeleton-fade/skeleton-fade.stories.d.ts

@@ -0,0 +1,40 @@
+import type { StoryObj } from '@storybook/react';
+import { SkeletonFade } from './skeleton-fade';
+declare const meta: {
+    title: string;
+    component: typeof SkeletonFade;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        isLoading: {
+            control: "boolean";
+            description: string;
+        };
+        duration: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CardContent: Story;
+export declare const CustomDuration: Story;
+export declare const MultipleCards: Story;
+export declare const ListItems: Story;
+export declare const SimulatedDataFetch: Story;
+export declare const CustomClassName: Story;
+//# sourceMappingURL=skeleton-fade.stories.d.ts.map

package/dist/src/components/skeleton-fade/skeleton-fade.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-fade.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton-fade/skeleton-fade.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuB2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA6BrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+CzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA0C5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsC3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgDvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqDhC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA6B7B,CAAC"}