@techsio/ui-kit 0.1.0 → 0.2.0

package/dist/atoms/skeleton.js

@@ -0,0 +1,211 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { tv } from "../utils.js";
+const skeletonVariants = tv({
+    slots: {
+        root: [
+            'relative overflow-hidden'
+        ],
+        rectangle: [
+            ''
+        ],
+        circle: [
+            'rounded-full',
+            'shrink-0'
+        ],
+        textContainer: [
+            'flex',
+            'flex-col'
+        ],
+        textLine: [
+            'h-skeleton-text-line',
+            'rounded-skeleton-text',
+            'w-full'
+        ]
+    },
+    variants: {
+        variant: {
+            primary: {
+                root: '',
+                circle: 'bg-skeleton-bg-primary',
+                rectangle: 'bg-skeleton-bg-primary',
+                textLine: 'bg-skeleton-bg-primary'
+            },
+            secondary: {
+                root: '',
+                circle: 'bg-skeleton-bg-secondary',
+                rectangle: 'bg-skeleton-bg-secondary',
+                textLine: 'bg-skeleton-bg-secondary'
+            }
+        },
+        size: {
+            sm: {
+                circle: 'size-skeleton-circle-sm',
+                textContainer: 'gap-skeleton-text-sm'
+            },
+            md: {
+                circle: 'size-skeleton-circle-md',
+                textContainer: 'gap-skeleton-text-md'
+            },
+            lg: {
+                circle: 'size-skeleton-circle-lg',
+                textContainer: 'gap-skeleton-text-lg'
+            },
+            xl: {
+                circle: 'size-skeleton-circle-xl',
+                textContainer: 'gap-skeleton-text-xl'
+            }
+        },
+        speed: {
+            slow: {
+                root: 'animate-skeleton-pulse-slow'
+            },
+            normal: {
+                root: 'animate-skeleton-pulse-normal'
+            },
+            fast: {
+                root: 'animate-skeleton-pulse-fast'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        speed: 'normal'
+    }
+});
+const SkeletonContext = /*#__PURE__*/ createContext(null);
+const useSkeletonContext = ()=>useContext(SkeletonContext);
+function useResolvedSkeletonProps(props) {
+    const context = useSkeletonContext();
+    return {
+        isLoaded: props.isLoaded ?? context?.isLoaded ?? false,
+        variant: props.variant ?? context?.variant,
+        speed: props.speed ?? context?.speed
+    };
+}
+function Skeleton({ isLoaded = false, variant, children, speed, className, ref, ...props }) {
+    const styles = skeletonVariants({
+        variant,
+        speed
+    });
+    return /*#__PURE__*/ jsx(SkeletonContext.Provider, {
+        value: {
+            isLoaded,
+            variant,
+            speed
+        },
+        children: isLoaded ? /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        }) : /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            className: styles.root({
+                className
+            }),
+            "aria-busy": "true",
+            "aria-label": "Loading content",
+            ...props,
+            children: children
+        })
+    });
+}
+Skeleton.Circle = function({ size = 'md', speed, isLoaded, variant, children, className, ref, ...props }) {
+    const resolved = useResolvedSkeletonProps({
+        isLoaded,
+        variant,
+        speed
+    });
+    const styles = skeletonVariants({
+        size,
+        variant: resolved.variant,
+        speed: resolved.speed
+    });
+    if (resolved.isLoaded) return /*#__PURE__*/ jsx(Fragment, {
+        children: children
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.root({
+            className: styles.circle({
+                className
+            })
+        }),
+        "aria-busy": "true",
+        "aria-label": "Loading content",
+        ...props
+    });
+};
+Skeleton.Text = function({ noOfLines = 3, size = 'md', speed, lastLineWidth = '80%', isLoaded, variant, children, containerClassName, className, ref, ...props }) {
+    const resolved = useResolvedSkeletonProps({
+        isLoaded,
+        variant,
+        speed
+    });
+    const styles = skeletonVariants({
+        size,
+        variant: resolved.variant,
+        speed: resolved.speed
+    });
+    if (resolved.isLoaded) return /*#__PURE__*/ jsx(Fragment, {
+        children: children
+    });
+    const lineCount = Number.isFinite(noOfLines) ? Math.max(1, noOfLines) : 1;
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.textContainer({
+            className: containerClassName
+        }),
+        "aria-busy": "true",
+        "aria-label": "Loading content",
+        ...props,
+        children: Array.from({
+            length: lineCount
+        }).map((_, index)=>{
+            const isLastLine = index === lineCount - 1;
+            const width = isLastLine && lineCount > 1 ? lastLineWidth : '100%';
+            return /*#__PURE__*/ jsx("div", {
+                className: styles.root({
+                    className: styles.textLine({
+                        className
+                    })
+                }),
+                style: {
+                    width
+                }
+            }, index);
+        })
+    });
+};
+Skeleton.Rectangle = function({ aspectRatio, height, width = '100%', speed, isLoaded, variant, children, className, style, ref, ...props }) {
+    const resolved = useResolvedSkeletonProps({
+        isLoaded,
+        variant,
+        speed
+    });
+    const styles = skeletonVariants({
+        variant: resolved.variant,
+        speed: resolved.speed
+    });
+    if (resolved.isLoaded) return /*#__PURE__*/ jsx(Fragment, {
+        children: children
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.root({
+            className: styles.rectangle({
+                className
+            })
+        }),
+        style: {
+            ...style,
+            width,
+            height,
+            aspectRatio
+        },
+        "aria-busy": "true",
+        "aria-label": "Loading content",
+        ...props,
+        children: children
+    });
+};
+export { Skeleton };

package/dist/molecules/checkbox.js

@@ -16,7 +16,7 @@ const checkboxVariants = tv({
             'appearance-none relative cursor-pointer flex-shrink-0',
             'h-checkbox w-checkbox',
             'border border-checkbox-border rounded-checkbox',
-            'bg-checkbox data-[state=checked]:bg-checkbox-checked border-checkbox',
+            'bg-checkbox data-[state=checked]:bg-checkbox-checked',
             'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',
             'data-[state=checked]:after:token-icon-checkbox text-icon-fg data-[state=checked]:text-checkbox-icon-md',
             'data-[disabled]:opacity-checkbox-disabled data-[disabled]:cursor-not-allowed data-[disabled]:grayscale',

package/dist/src/atoms/skeleton.d.ts

@@ -0,0 +1,45 @@
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
+interface SkeletonRootProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    isLoaded?: boolean;
+    variant?: 'primary' | 'secondary';
+    speed?: 'slow' | 'normal' | 'fast';
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Skeleton({ isLoaded, variant, children, speed, className, ref, ...props }: SkeletonRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Skeleton {
+    var Circle: ({ size, speed, isLoaded, variant, children, className, ref, ...props }: SkeletonCircleProps) => import("react/jsx-runtime").JSX.Element;
+    var Text: ({ noOfLines, size, speed, lastLineWidth, isLoaded, variant, children, containerClassName, className, ref, ...props }: SkeletonTextProps) => import("react/jsx-runtime").JSX.Element;
+    var Rectangle: ({ aspectRatio, height, width, speed, isLoaded, variant, children, className, style, ref, ...props }: SkeletonRectangleProps) => import("react/jsx-runtime").JSX.Element;
+}
+interface SkeletonCircleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    speed?: 'slow' | 'normal' | 'fast';
+    isLoaded?: boolean;
+    variant?: 'primary' | 'secondary';
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+interface SkeletonTextProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    noOfLines?: number;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    speed?: 'slow' | 'normal' | 'fast';
+    lastLineWidth?: string;
+    isLoaded?: boolean;
+    variant?: 'primary' | 'secondary';
+    children?: ReactNode;
+    containerClassName?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+interface SkeletonRectangleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    aspectRatio?: string;
+    height?: string;
+    width?: string;
+    speed?: 'slow' | 'normal' | 'fast';
+    isLoaded?: boolean;
+    variant?: 'primary' | 'secondary';
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export {};
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/src/atoms/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/atoms/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EACd,KAAK,GAAG,EAGT,MAAM,OAAO,CAAA;AA0Fd,UAAU,iBACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAgB,EAChB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAoBnB;yBA5Be,QAAQ;yFAiDrB,mBAAmB;qIAmDnB,iBAAiB;yHAkEjB,sBAAsB;;AAxIzB,UAAU,mBACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAqCD,UAAU,iBACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAwDD,UAAU,sBACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/tokens/components/atoms/_skeleton.css

@@ -0,0 +1,75 @@
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  /* Background colors using reference layer */
+  --color-skeleton-bg: var(--color-overlay);
+  --color-skeleton-bg-primary: var(--color-skeleton-bg);
+  --color-skeleton-bg-secondary: var(--color-surface);
+
+  /* === ANIMATION === */
+  /* Use global motion tokens for consistent behavior */
+  --duration-skeleton-pulse-slow: 3s;
+  --duration-skeleton-pulse-normal: 2s;
+  --duration-skeleton-pulse-fast: 1s;
+
+  /* === SPACING === */
+  --spacing-skeleton-text-sm: var(--spacing-100);
+  --spacing-skeleton-text-md: var(--spacing-150);
+  --spacing-skeleton-text-lg: var(--spacing-200);
+  --spacing-skeleton-text-xl: var(--spacing-250);
+
+  /* === SIZING === */
+  --size-skeleton-circle-sm: 2rem;
+  --size-skeleton-circle-md: 3rem;
+  --size-skeleton-circle-lg: 4rem;
+  --size-skeleton-circle-xl: 6rem;
+  --height-skeleton-text-line: 1rem; /* Match text line height */
+
+  /* === BORDERS & RADIUS === */
+  --radius-skeleton-text: var(--radius-sm);
+}
+
+/* === ANIMATIONS === */
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@utility animate-skeleton-pulse-slow {
+  animation: skeleton-pulse var(--duration-skeleton-pulse-slow) ease-in-out
+    infinite;
+}
+
+@utility animate-skeleton-pulse-normal {
+  animation: skeleton-pulse var(--duration-skeleton-pulse-normal) ease-in-out
+    infinite;
+}
+
+@utility animate-skeleton-pulse-fast {
+  animation: skeleton-pulse var(--duration-skeleton-pulse-fast) ease-in-out
+    infinite;
+}
+
+@layer utilities {
+  .animate-skeleton-pulse-slow,
+  .animate-skeleton-pulse-normal,
+  .animate-skeleton-pulse-fast {
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      opacity: 0.7;
+    }
+  }
+}
+
+/* Display reduced motion for storybook without having to
+ enable the prefers-reduced-motion feature in DevTools */
+@layer utilities {
+  .force-reduced-motion {
+    animation: none;
+    opacity: 0.7;
+  }
+}

package/src/tokens/components/components.css

@@ -4,6 +4,7 @@
 @import "./atoms/_input.css";
 @import "./atoms/_numeric-input.css";
 @import "./atoms/_rating.css";
+@import "./atoms/_skeleton.css";
 @import "./atoms/_textarea.css";
 @import "./atoms/_tooltip.css";