react-restyle-components 0.4.23 → 0.4.25

package/lib/src/core-components/src/components/Masonry/types.d.ts

@@ -0,0 +1,117 @@
+import React, { CSSProperties } from 'react';
+/** Responsive breakpoint configuration */
+export interface MasonryBreakpoints {
+    /** Extra small screens (default) */
+    xs?: number;
+    /** Small screens (≥640px) */
+    sm?: number;
+    /** Medium screens (≥768px) */
+    md?: number;
+    /** Large screens (≥1024px) */
+    lg?: number;
+    /** Extra large screens (≥1280px) */
+    xl?: number;
+    /** 2XL screens (≥1536px) */
+    '2xl'?: number;
+}
+/** Masonry item data structure */
+export interface MasonryItem {
+    /** Unique identifier */
+    id: string | number;
+    /** Content to render */
+    content?: React.ReactNode;
+    /** Force item to specific column (0-indexed) */
+    column?: number;
+    /** Image source (for image items) */
+    src?: string;
+    /** Image alt text */
+    alt?: string;
+    /** Fixed height (optional) */
+    height?: number | string;
+    /** Additional data */
+    [key: string]: any;
+}
+/** Custom class names */
+export interface MasonryClassNames {
+    /** Root container */
+    root?: string;
+    /** Column container */
+    column?: string;
+    /** Individual item wrapper */
+    item?: string;
+    /** Image element */
+    image?: string;
+}
+/** Custom styles */
+export interface MasonryStyles {
+    /** Root container */
+    root?: CSSProperties;
+    /** Column container */
+    column?: CSSProperties;
+    /** Individual item wrapper */
+    item?: CSSProperties;
+    /** Image element */
+    image?: CSSProperties;
+}
+/** Render item function */
+export type MasonryRenderItem<T extends MasonryItem = MasonryItem> = (item: T, index: number, columnIndex: number) => React.ReactNode;
+/** Image load handler */
+export type MasonryImageLoadHandler = (item: MasonryItem, naturalWidth: number, naturalHeight: number) => void;
+export interface MasonryProps<T extends MasonryItem = MasonryItem> {
+    /** Array of items to render */
+    items: T[];
+    /** Number of columns (number for fixed, object for responsive) */
+    columns?: number | MasonryBreakpoints;
+    /** Gap between items in pixels (number for fixed, object for responsive) */
+    gutter?: number | MasonryBreakpoints;
+    /** Custom render function for each item */
+    renderItem?: MasonryRenderItem<T>;
+    /** Enable sequential ordering (items placed in order, not balanced) */
+    sequential?: boolean;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Enable fade-in animation */
+    animated?: boolean;
+    /** Stagger delay between items in ms */
+    staggerDelay?: number;
+    /** Custom class names */
+    classNames?: MasonryClassNames;
+    /** Custom styles */
+    styles?: MasonryStyles;
+    /** Additional className for root */
+    className?: string;
+    /** Additional style for root */
+    style?: CSSProperties;
+    /** Called when an image loads */
+    onImageLoad?: MasonryImageLoadHandler;
+    /** Called when layout updates */
+    onLayoutComplete?: () => void;
+    /** Minimum item height */
+    minItemHeight?: number;
+    /** Default column for items without specified column */
+    defaultColumn?: number;
+    /** Loading placeholder */
+    loadingPlaceholder?: React.ReactNode;
+    /** Empty state content */
+    emptyState?: React.ReactNode;
+}
+/** Image item props */
+export interface MasonryImageProps {
+    /** Image source */
+    src: string;
+    /** Alt text */
+    alt?: string;
+    /** Additional className */
+    className?: string;
+    /** Additional style */
+    style?: CSSProperties;
+    /** Load handler */
+    onLoad?: (e: React.SyntheticEvent<HTMLImageElement>) => void;
+    /** Error handler */
+    onError?: (e: React.SyntheticEvent<HTMLImageElement>) => void;
+    /** Object fit */
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    /** Border radius */
+    borderRadius?: string | number;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/src/core-components/src/components/Masonry/types.d.ts.map

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

package/lib/src/core-components/src/components/Masonry/types.js

@@ -0,0 +1 @@
+export {};

package/lib/src/core-components/src/components/Picker/color-picker-modal/color-picker-modal.component.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useRef, useState, useEffect } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useClickOutside } from '../../../hooks';
-import { TooltipProvider, Tooltip } from '../../Tooltip/tooltip.component';
+import { TooltipProvider, Tooltip } from '../../Tooltip';
 import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, STANDARD_COLORS, } from '../../../helpers/constants';
 import './color-picker-modal.css';
 export const ColorPickerModal = ({ color, isVisible = false, testId = 'color-picker', tooltip = '', tooltipSide = 'bottom', onChange, onNoFill, onClose, }) => {

package/lib/src/core-components/src/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SkeletonProps, SkeletonGroupProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonCardProps } from './types';
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonGroup: React.ForwardRefExoticComponent<SkeletonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonAvatar: React.ForwardRefExoticComponent<SkeletonAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonCard: React.ForwardRefExoticComponent<SkeletonCardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Skeleton.d.ts.map

package/lib/src/core-components/src/components/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AASjD,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAWjB,eAAO,MAAM,QAAQ,sFAuFpB,CAAC;AAIF,eAAO,MAAM,aAAa,2FA6BzB,CAAC;AAKF,eAAO,MAAM,YAAY,0FA2CxB,CAAC;AAKF,eAAO,MAAM,cAAc,4FA+B1B,CAAC;AAKF,eAAO,MAAM,YAAY,0FAoFxB,CAAC"}

package/lib/src/core-components/src/components/Skeleton/Skeleton.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { SkeletonElement, SkeletonWrapper, SkeletonGroupContainer, SkeletonCardContainer, SkeletonTextContainer, avatarSizes, } from './elements';
+// Size presets for base Skeleton
+const sizePresets = {
+    xs: { width: 40, height: 12 },
+    sm: { width: 80, height: 16 },
+    md: { width: 120, height: 20 },
+    lg: { width: 180, height: 24 },
+    xl: { width: 240, height: 32 },
+};
+export const Skeleton = forwardRef(function SkeletonComponent(props, ref) {
+    const { width, height, variant = 'rectangular', animation = 'shimmer', size = 'md', count = 1, gap = '10px', duration = 1500, borderRadius, theme = 'light', stagger = false, responsive = false, aspectRatio, className, style, ...rest } = props;
+    // Determine dimensions
+    const finalWidth = width ?? sizePresets[size].width;
+    const finalHeight = height ?? sizePresets[size].height;
+    const elements = useMemo(() => Array(count)
+        .fill(null)
+        .map((_, index) => index), [count]);
+    if (count === 1) {
+        return (_jsx(SkeletonElement, { ref: ref, "$width": finalWidth, "$height": finalHeight, "$variant": variant, "$animation": animation, "$duration": duration, "$borderRadius": borderRadius, "$theme": theme, "$responsive": responsive, "$aspectRatio": aspectRatio, "aria-busy": "true", "aria-live": "polite", "aria-label": "Loading...", role: "progressbar", "data-testid": "skeleton", className: className, style: style, ...rest }));
+    }
+    return (_jsx(SkeletonWrapper, { ref: ref, "$gap": gap, "$direction": "column", "data-testid": "skeleton-wrapper", className: className, ...rest, children: elements.map((key) => (_jsx(SkeletonElement, { "$width": finalWidth, "$height": finalHeight, "$variant": variant, "$animation": animation, "$duration": duration, "$borderRadius": borderRadius, "$theme": theme, "$responsive": responsive, "$aspectRatio": aspectRatio, "$staggerIndex": stagger ? key : undefined, "aria-busy": "true", role: "progressbar" }, key))) }));
+});
+Skeleton.displayName = 'Skeleton';
+export const SkeletonGroup = forwardRef(function SkeletonGroupComponent(props, ref) {
+    const { children, direction = 'column', gap = '12px', align = 'stretch', wrap = false, responsive = false, className, ...rest } = props;
+    return (_jsx(SkeletonGroupContainer, { ref: ref, "$direction": direction, "$gap": gap, "$align": align, "$wrap": wrap, "$responsive": responsive, "data-testid": "skeleton-group", className: className, ...rest, children: children }));
+});
+SkeletonGroup.displayName = 'SkeletonGroup';
+// Preset: Text lines skeleton
+export const SkeletonText = forwardRef(function SkeletonTextComponent(props, ref) {
+    const { lines = 3, lastLineWidth = '60%', gap = '10px', animation = 'shimmer', theme = 'light', className, ...rest } = props;
+    const lineElements = useMemo(() => Array(lines).fill(null).map((_, i) => i), [lines]);
+    return (_jsx(SkeletonTextContainer, { ref: ref, "$gap": gap, "data-testid": "skeleton-text", className: className, ...rest, children: lineElements.map((index) => (_jsx(SkeletonElement, { "$width": index === lines - 1 ? lastLineWidth : '100%', "$height": 16, "$variant": "text", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false, "$staggerIndex": index, "aria-busy": "true", role: "progressbar" }, index))) }));
+});
+SkeletonText.displayName = 'SkeletonText';
+// Preset: Avatar skeleton
+export const SkeletonAvatar = forwardRef(function SkeletonAvatarComponent(props, ref) {
+    const { size = 'md', animation = 'shimmer', theme = 'light', className, ...rest } = props;
+    const avatarSize = avatarSizes[size];
+    return (_jsx(SkeletonElement, { ref: ref, "$width": avatarSize, "$height": avatarSize, "$variant": "avatar", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false, "aria-busy": "true", "aria-label": "Loading avatar...", role: "progressbar", "data-testid": "skeleton-avatar", className: className, ...rest }));
+});
+SkeletonAvatar.displayName = 'SkeletonAvatar';
+// Preset: Card skeleton
+export const SkeletonCard = forwardRef(function SkeletonCardComponent(props, ref) {
+    const { hasImage = true, imageHeight = 180, textLines = 3, hasActions = true, animation = 'shimmer', theme = 'light', className, ...rest } = props;
+    return (_jsxs(SkeletonCardContainer, { ref: ref, "$theme": theme, "data-testid": "skeleton-card", className: className, ...rest, children: [hasImage && (_jsx(SkeletonElement, { "$width": "100%", "$height": imageHeight, "$variant": "rounded", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false, style: { marginBottom: 16 } })), _jsxs(SkeletonGroup, { gap: "10px", style: { marginBottom: hasActions ? 16 : 0 }, children: [_jsx(SkeletonElement, { "$width": "70%", "$height": 20, "$variant": "text", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false }), Array(textLines - 1).fill(null).map((_, i) => (_jsx(SkeletonElement, { "$width": i === textLines - 2 ? '50%' : '90%', "$height": 14, "$variant": "text", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false, "$staggerIndex": i + 1 }, i)))] }), hasActions && (_jsxs(SkeletonGroup, { direction: "row", gap: "10px", children: [_jsx(SkeletonElement, { "$width": 80, "$height": 36, "$variant": "button", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false }), _jsx(SkeletonElement, { "$width": 80, "$height": 36, "$variant": "button", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false })] }))] }));
+});
+SkeletonCard.displayName = 'SkeletonCard';

package/lib/src/core-components/src/components/Skeleton/elements.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { SkeletonVariant, SkeletonAnimation, SkeletonSize, SkeletonTheme } from './types';
+export declare const avatarSizes: Record<SkeletonSize, string>;
+export declare const SkeletonElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width: string | number;
+    $height: string | number;
+    $variant: SkeletonVariant;
+    $animation: SkeletonAnimation;
+    $duration: number;
+    $borderRadius?: string | undefined;
+    $theme: SkeletonTheme;
+    $responsive: boolean;
+    $aspectRatio?: string | undefined;
+    $staggerIndex?: number | undefined;
+}>> & string;
+export declare const SkeletonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $gap: string;
+    $direction: 'row' | 'column';
+}>> & string;
+export declare const SkeletonGroupContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $direction: 'row' | 'column';
+    $gap: string;
+    $align: 'start' | 'center' | 'end' | 'stretch';
+    $wrap: boolean;
+    $responsive: boolean;
+}>> & string;
+export declare const SkeletonCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: SkeletonTheme;
+}>> & string;
+export declare const SkeletonTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $gap: string;
+}>> & string;
+//# sourceMappingURL=elements.d.ts.map

package/lib/src/core-components/src/components/Skeleton/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Skeleton/elements.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,eAAe,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAuExF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAMpD,CAAC;AAoFF,eAAO,MAAM,eAAe;YAClB,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;cACd,eAAe;gBACb,iBAAiB;eAClB,MAAM;;YAET,aAAa;iBACR,OAAO;;;YA+CrB,CAAC;AAEF,eAAO,MAAM,eAAe;UACpB,MAAM;gBACA,KAAK,GAAG,QAAQ;YAK7B,CAAC;AAEF,eAAO,MAAM,sBAAsB;gBACrB,KAAK,GAAG,QAAQ;UACtB,MAAM;YACJ,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS;WACvC,OAAO;iBACD,OAAO;YA0BrB,CAAC;AAEF,eAAO,MAAM,qBAAqB;YACxB,aAAa;YAYtB,CAAC;AAEF,eAAO,MAAM,qBAAqB;UAC1B,MAAM;YAKb,CAAC"}

package/lib/src/core-components/src/components/Skeleton/elements.js

@@ -0,0 +1,238 @@
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+import { breakpoints } from '../../utils/abstracts';
+// Animations
+const pulse = keyframes `
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+`;
+const wave = keyframes `
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+`;
+const shimmer = keyframes `
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`;
+const glow = keyframes `
+  0%, 100% {
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
+    opacity: 0.8;
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    opacity: 1;
+  }
+`;
+// Theme colors
+const getThemeColors = (theme) => {
+    if (theme === 'dark') {
+        return {
+            base: '#374151',
+            highlight: '#4b5563',
+            wave: 'rgba(255, 255, 255, 0.1)',
+        };
+    }
+    // light or auto (defaults to light)
+    return {
+        base: '#e5e7eb',
+        highlight: '#f3f4f6',
+        wave: 'rgba(255, 255, 255, 0.6)',
+    };
+};
+// Size presets
+const sizePresets = {
+    xs: { width: '40px', height: '12px' },
+    sm: { width: '80px', height: '16px' },
+    md: { width: '120px', height: '20px' },
+    lg: { width: '180px', height: '24px' },
+    xl: { width: '240px', height: '32px' },
+};
+// Avatar size presets
+export const avatarSizes = {
+    xs: '24px',
+    sm: '32px',
+    md: '48px',
+    lg: '64px',
+    xl: '96px',
+};
+const getAnimationStyles = (animation, duration, theme) => {
+    const colors = getThemeColors(theme);
+    switch (animation) {
+        case 'pulse':
+            return css `
+        animation: ${pulse} ${duration}ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      `;
+        case 'wave':
+            return css `
+        position: relative;
+        overflow: hidden;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(
+            90deg,
+            transparent 0%,
+            ${colors.wave} 50%,
+            transparent 100%
+          );
+          animation: ${wave} ${duration}ms ease-in-out infinite;
+        }
+      `;
+        case 'shimmer':
+            return css `
+        background: linear-gradient(
+          90deg,
+          ${colors.base} 0%,
+          ${colors.highlight} 20%,
+          ${colors.highlight} 40%,
+          ${colors.base} 100%
+        );
+        background-size: 400% 100%;
+        animation: ${shimmer} ${duration}ms linear infinite;
+      `;
+        case 'glow':
+            return css `
+        animation: ${glow} ${duration}ms ease-in-out infinite;
+      `;
+        case 'none':
+        default:
+            return css ``;
+    }
+};
+const getVariantStyles = (variant, borderRadius) => {
+    switch (variant) {
+        case 'circular':
+        case 'avatar':
+            return css `
+        border-radius: 50%;
+      `;
+        case 'text':
+            return css `
+        border-radius: 6px;
+      `;
+        case 'button':
+            return css `
+        border-radius: ${tokens.borderRadius050 || '6px'};
+      `;
+        case 'badge':
+            return css `
+        border-radius: 9999px;
+      `;
+        case 'rounded':
+            return css `
+        border-radius: ${borderRadius || tokens.borderRadius100 || '12px'};
+      `;
+        case 'rectangular':
+        default:
+            return css `
+        border-radius: 4px;
+      `;
+    }
+};
+export const SkeletonElement = styled.div `
+  display: block;
+  flex-shrink: 0;
+  background-color: ${({ $animation, $theme }) => {
+    const colors = getThemeColors($theme);
+    return $animation === 'shimmer' ? 'transparent' : colors.base;
+}};
+  width: ${({ $width }) => (typeof $width === 'number' ? `${$width}px` : $width)};
+  height: ${({ $height, $aspectRatio }) => $aspectRatio ? 'auto' : (typeof $height === 'number' ? `${$height}px` : $height)};
+  
+  ${({ $aspectRatio }) => $aspectRatio &&
+    css `
+      aspect-ratio: ${$aspectRatio};
+    `}
+  
+  ${({ $variant, $borderRadius }) => getVariantStyles($variant, $borderRadius)}
+  ${({ $animation, $duration, $theme }) => getAnimationStyles($animation, $duration, $theme)}
+  
+  /* Stagger animation */
+  ${({ $staggerIndex }) => $staggerIndex !== undefined &&
+    css `
+      animation-delay: ${$staggerIndex * 100}ms;
+    `}
+  
+  /* Responsive */
+  ${({ $responsive }) => $responsive &&
+    css `
+      ${breakpoints.sm} {
+        width: 100%;
+      }
+    `}
+  
+  /* Accessibility - reduce motion */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    
+    &::after {
+      animation: none;
+    }
+  }
+`;
+export const SkeletonWrapper = styled.div `
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction};
+  gap: ${({ $gap }) => $gap};
+`;
+export const SkeletonGroupContainer = styled.div `
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction};
+  gap: ${({ $gap }) => $gap};
+  align-items: ${({ $align }) => $align === 'start' ? 'flex-start' :
+    $align === 'end' ? 'flex-end' :
+        $align === 'stretch' ? 'stretch' : 'center'};
+  
+  ${({ $wrap }) => $wrap &&
+    css `
+      flex-wrap: wrap;
+    `}
+  
+  /* Responsive stacking */
+  ${({ $responsive, $direction }) => $responsive &&
+    $direction === 'row' &&
+    css `
+      ${breakpoints.sm} {
+        flex-direction: column;
+        align-items: stretch;
+      }
+    `}
+`;
+export const SkeletonCardContainer = styled.div `
+  background: ${({ $theme }) => $theme === 'dark' ? '#1f2937' : '#ffffff'};
+  border-radius: ${tokens.borderRadius100 || '12px'};
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  border: 1px solid ${({ $theme }) => $theme === 'dark' ? '#374151' : '#f3f4f6'};
+  overflow: hidden;
+  
+  ${breakpoints.sm} {
+    padding: 12px;
+  }
+`;
+export const SkeletonTextContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $gap }) => $gap};
+`;

package/lib/src/core-components/src/components/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export { Skeleton, SkeletonGroup, SkeletonText, SkeletonAvatar, SkeletonCard, } from './Skeleton';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,cAAc,EACd,YAAY,GACb,MAAM,YAAY,CAAC;AACpB,cAAc,SAAS,CAAC"}

package/lib/src/core-components/src/components/Skeleton/index.js

@@ -0,0 +1,2 @@
+export { Skeleton, SkeletonGroup, SkeletonText, SkeletonAvatar, SkeletonCard, } from './Skeleton';
+export * from './types';

package/lib/src/core-components/src/components/Skeleton/types.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+export declare const SKELETON_VARIANTS: readonly ["rectangular", "circular", "text", "rounded", "button", "avatar", "badge"];
+export type SkeletonVariant = (typeof SKELETON_VARIANTS)[number];
+export declare const SKELETON_ANIMATIONS: readonly ["pulse", "wave", "shimmer", "glow", "none"];
+export type SkeletonAnimation = (typeof SKELETON_ANIMATIONS)[number];
+export declare const SKELETON_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
+export type SkeletonSize = (typeof SKELETON_SIZES)[number];
+export declare const SKELETON_THEMES: readonly ["light", "dark", "auto"];
+export type SkeletonTheme = (typeof SKELETON_THEMES)[number];
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Width of the skeleton */
+    width?: string | number;
+    /** Height of the skeleton */
+    height?: string | number;
+    /** Shape variant */
+    variant?: SkeletonVariant;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    /** Preset size (overridden by width/height) */
+    size?: SkeletonSize;
+    /** Number of skeleton elements to render */
+    count?: number;
+    /** Gap between multiple elements */
+    gap?: string;
+    /** Animation duration in ms */
+    duration?: number;
+    /** Border radius for rounded variant */
+    borderRadius?: string;
+    /** Theme mode */
+    theme?: SkeletonTheme;
+    /** Stagger animation delay for multiple elements */
+    stagger?: boolean;
+    /** Make responsive (width: 100%) on mobile */
+    responsive?: boolean;
+    /** Aspect ratio for responsive elements */
+    aspectRatio?: string;
+    /** Additional class name */
+    className?: string;
+}
+export interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Children skeleton elements */
+    children: React.ReactNode;
+    /** Layout direction */
+    direction?: 'row' | 'column';
+    /** Gap between elements */
+    gap?: string;
+    /** Align items */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Wrap items */
+    wrap?: boolean;
+    /** Responsive stack on mobile */
+    responsive?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+export interface SkeletonTextProps extends Omit<SkeletonProps, 'variant'> {
+    /** Number of text lines */
+    lines?: number;
+    /** Last line width percentage */
+    lastLineWidth?: string;
+}
+export interface SkeletonAvatarProps extends Omit<SkeletonProps, 'variant' | 'width' | 'height'> {
+    /** Avatar size preset */
+    size?: SkeletonSize;
+}
+export interface SkeletonCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Show image placeholder */
+    hasImage?: boolean;
+    /** Image height */
+    imageHeight?: string | number;
+    /** Number of text lines */
+    textLines?: number;
+    /** Show action buttons */
+    hasActions?: boolean;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    /** Theme mode */
+    theme?: SkeletonTheme;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/src/core-components/src/components/Skeleton/types.d.ts.map

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

package/lib/src/core-components/src/components/Skeleton/types.js

@@ -0,0 +1,4 @@
+export const SKELETON_VARIANTS = ['rectangular', 'circular', 'text', 'rounded', 'button', 'avatar', 'badge'];
+export const SKELETON_ANIMATIONS = ['pulse', 'wave', 'shimmer', 'glow', 'none'];
+export const SKELETON_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+export const SKELETON_THEMES = ['light', 'dark', 'auto'];

package/lib/src/core-components/src/components/SpeedDial/SpeedDial.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SpeedDialProps } from './types';
+export declare const SpeedDial: React.ForwardRefExoticComponent<SpeedDialProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpeedDial.d.ts.map

package/lib/src/core-components/src/components/SpeedDial/SpeedDial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDial.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/SpeedDial/SpeedDial.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAcf,OAAO,EAAC,cAAc,EAAkB,MAAM,SAAS,CAAC;AAiBxD,eAAO,MAAM,SAAS,uFA0UrB,CAAC"}