@flipdish/ui-library 0.8.1 → 0.9.0

package/dist/components/atoms/Skeleton/index.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+const RADIUS = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    full: 'rounded-full',
+};
+/**
+ * Coerce a numeric size to a `px` string; pass any CSS length string through
+ * unchanged. Invalid numbers (`NaN`, `Infinity`, negative) are dropped so we
+ * never emit broken declarations like `NaNpx` or `-1px` — the dimension is simply
+ * omitted and the element falls back to its natural/CSS size.
+ */
+const toSize = (value) => {
+    if (typeof value !== 'number')
+        return value;
+    return Number.isFinite(value) && value >= 0 ? `${value}px` : undefined;
+};
+/**
+ * A muted, pulsing placeholder that reserves layout space while content loads,
+ * reducing layout shift and signalling progress. It fills with the semantic
+ * `bg-quaternary` token (so it adapts to light/dark) and pauses its pulse under
+ * `prefers-reduced-motion`. Compose several — or use `SkeletonText` /
+ * `SkeletonCircle` — to mirror the shape of the content being loaded.
+ *
+ * @summary pulsing placeholder for loading content
+ */
+const Skeleton = ({ width = '100%', height = '1rem', radius = 'md', className, style, ...props }) => (jsxRuntime.jsx("div", { className: cx.cx('animate-pulse bg-quaternary motion-reduce:animate-none', RADIUS[radius], className), style: { width: toSize(width), height: toSize(height), ...style }, ...props }));
+/** Upper bound on rendered lines, guarding against a malformed `lines` prop. */
+const MAX_SKELETON_TEXT_LINES = 100;
+/**
+ * A multi-line placeholder for blocks of text. The last line is rendered shorter
+ * so the group reads as a paragraph rather than a solid block.
+ *
+ * @summary multi-line placeholder for loading text
+ */
+const SkeletonText = ({ lines = 3, lineHeight = '0.75rem', lastLineWidth = '60%', className, ...props }) => {
+    // Clamp `lines` to a finite integer within a sane bound, so a malformed prop
+    // can't allocate a huge (or invalid) array and lock up rendering.
+    const lineCount = Number.isFinite(lines) ? Math.min(Math.max(Math.trunc(lines), 0), MAX_SKELETON_TEXT_LINES) : 0;
+    return (jsxRuntime.jsx("div", { className: cx.cx('flex w-full flex-col gap-2', className), ...props, children: Array.from({ length: lineCount }, (_, index) => {
+            const isLastOfMany = lineCount > 1 && index === lineCount - 1;
+            return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: lines are identical placeholders with no stable identity
+            jsxRuntime.jsx(Skeleton, { height: lineHeight, width: isLastOfMany ? lastLineWidth : '100%', radius: "sm" }, index));
+        }) }));
+};
+/**
+ * A circular placeholder for avatars, icons, or any round element.
+ *
+ * @summary circular placeholder for loading avatars
+ */
+const SkeletonCircle = ({ size = 40, className, ...props }) => (jsxRuntime.jsx(Skeleton, { width: size, height: size, radius: "full", className: cx.cx('shrink-0', className), ...props }));
+
+exports.Skeleton = Skeleton;
+exports.SkeletonCircle = SkeletonCircle;
+exports.SkeletonText = SkeletonText;
+//# sourceMappingURL=index.cjs.map

package/dist/components/atoms/Skeleton/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Skeleton/index.tsx"],"sourcesContent":[null],"names":["_jsx","cx"],"mappings":";;;;;AAKA,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,IAAI,EAAE,cAAc;CACZ;AAEV;;;;;AAKG;AACH,MAAM,MAAM,GAAG,CAAC,KAAuB,KAAI;IACzC,IAAI,OAAO,KAAK,KAAK,QAAQ;AAAE,QAAA,OAAO,KAAK;IAC3C,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,GAAG,KAAK,CAAA,EAAA,CAAI,GAAG,SAAS;AACxE,CAAC;AAWD;;;;;;;;AAQG;AACI,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAiB,MACpHA,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,KAAE,CAAC,wDAAwD,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,EAClG,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAA,GAC7D,KAAK,EAAA,CACT;AAYJ;AACA,MAAM,uBAAuB,GAAG,GAAG;AAEnC;;;;;AAKG;AACI,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,aAAa,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAqB,KAAI;;;AAGnI,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC;AAEhH,IAAA,QACED,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EACnE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;YAC9C,MAAM,YAAY,GAAG,SAAS,GAAG,CAAC,IAAI,KAAK,KAAK,SAAS,GAAG,CAAC;YAC7D;;YAEED,cAAA,CAAC,QAAQ,EAAA,EAAa,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,GAAG,aAAa,GAAG,MAAM,EAAE,MAAM,EAAC,IAAI,EAAA,EAApF,KAAK,CAAkF;QAE1G,CAAC,CAAC,EAAA,CACE;AAEV;AAOA;;;;AAIG;MACU,cAAc,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB,MACpFA,cAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,EAAC,SAAS,EAAEC,KAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI;;;;;;"}

package/dist/components/atoms/Skeleton/index.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentPropsWithoutRef } from 'react';
+declare const RADIUS: {
+    readonly none: "rounded-none";
+    readonly sm: "rounded-sm";
+    readonly md: "rounded-md";
+    readonly lg: "rounded-lg";
+    readonly full: "rounded-full";
+};
+export interface SkeletonProps extends ComponentPropsWithoutRef<'div'> {
+    /** Width — a number (px) or any CSS length. @default '100%' */
+    width?: number | string;
+    /** Height — a number (px) or any CSS length. @default '1rem' */
+    height?: number | string;
+    /** Corner radius preset. @default 'md' */
+    radius?: keyof typeof RADIUS;
+}
+/**
+ * A muted, pulsing placeholder that reserves layout space while content loads,
+ * reducing layout shift and signalling progress. It fills with the semantic
+ * `bg-quaternary` token (so it adapts to light/dark) and pauses its pulse under
+ * `prefers-reduced-motion`. Compose several — or use `SkeletonText` /
+ * `SkeletonCircle` — to mirror the shape of the content being loaded.
+ *
+ * @summary pulsing placeholder for loading content
+ */
+export declare const Skeleton: ({ width, height, radius, className, style, ...props }: SkeletonProps) => import("react").JSX.Element;
+export interface SkeletonTextProps extends ComponentPropsWithoutRef<'div'> {
+    /** Number of text lines to render. @default 3 */
+    lines?: number;
+    /** Height of each line. @default '0.75rem' */
+    lineHeight?: number | string;
+    /** Width of the final line, kept shorter for a natural paragraph shape. @default '60%' */
+    lastLineWidth?: number | string;
+}
+/**
+ * A multi-line placeholder for blocks of text. The last line is rendered shorter
+ * so the group reads as a paragraph rather than a solid block.
+ *
+ * @summary multi-line placeholder for loading text
+ */
+export declare const SkeletonText: ({ lines, lineHeight, lastLineWidth, className, ...props }: SkeletonTextProps) => import("react").JSX.Element;
+export interface SkeletonCircleProps extends Omit<SkeletonProps, 'width' | 'height' | 'radius'> {
+    /** Diameter — a number (px) or any CSS length. @default 40 */
+    size?: number | string;
+}
+/**
+ * A circular placeholder for avatars, icons, or any round element.
+ *
+ * @summary circular placeholder for loading avatars
+ */
+export declare const SkeletonCircle: ({ size, className, ...props }: SkeletonCircleProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Skeleton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,QAAA,MAAM,MAAM;;;;;;CAMF,CAAC;AAaX,MAAM,WAAW,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACpE,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,GAAI,uDAAgF,aAAa,gCAMrH,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACxE,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC;AAKD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,2DAAmF,iBAAiB,gCAgBhI,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7F,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,+BAAoC,mBAAmB,gCAErF,CAAC"}

package/dist/components/atoms/Skeleton/index.js

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+
+const RADIUS = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    full: 'rounded-full',
+};
+/**
+ * Coerce a numeric size to a `px` string; pass any CSS length string through
+ * unchanged. Invalid numbers (`NaN`, `Infinity`, negative) are dropped so we
+ * never emit broken declarations like `NaNpx` or `-1px` — the dimension is simply
+ * omitted and the element falls back to its natural/CSS size.
+ */
+const toSize = (value) => {
+    if (typeof value !== 'number')
+        return value;
+    return Number.isFinite(value) && value >= 0 ? `${value}px` : undefined;
+};
+/**
+ * A muted, pulsing placeholder that reserves layout space while content loads,
+ * reducing layout shift and signalling progress. It fills with the semantic
+ * `bg-quaternary` token (so it adapts to light/dark) and pauses its pulse under
+ * `prefers-reduced-motion`. Compose several — or use `SkeletonText` /
+ * `SkeletonCircle` — to mirror the shape of the content being loaded.
+ *
+ * @summary pulsing placeholder for loading content
+ */
+const Skeleton = ({ width = '100%', height = '1rem', radius = 'md', className, style, ...props }) => (jsx("div", { className: cx('animate-pulse bg-quaternary motion-reduce:animate-none', RADIUS[radius], className), style: { width: toSize(width), height: toSize(height), ...style }, ...props }));
+/** Upper bound on rendered lines, guarding against a malformed `lines` prop. */
+const MAX_SKELETON_TEXT_LINES = 100;
+/**
+ * A multi-line placeholder for blocks of text. The last line is rendered shorter
+ * so the group reads as a paragraph rather than a solid block.
+ *
+ * @summary multi-line placeholder for loading text
+ */
+const SkeletonText = ({ lines = 3, lineHeight = '0.75rem', lastLineWidth = '60%', className, ...props }) => {
+    // Clamp `lines` to a finite integer within a sane bound, so a malformed prop
+    // can't allocate a huge (or invalid) array and lock up rendering.
+    const lineCount = Number.isFinite(lines) ? Math.min(Math.max(Math.trunc(lines), 0), MAX_SKELETON_TEXT_LINES) : 0;
+    return (jsx("div", { className: cx('flex w-full flex-col gap-2', className), ...props, children: Array.from({ length: lineCount }, (_, index) => {
+            const isLastOfMany = lineCount > 1 && index === lineCount - 1;
+            return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: lines are identical placeholders with no stable identity
+            jsx(Skeleton, { height: lineHeight, width: isLastOfMany ? lastLineWidth : '100%', radius: "sm" }, index));
+        }) }));
+};
+/**
+ * A circular placeholder for avatars, icons, or any round element.
+ *
+ * @summary circular placeholder for loading avatars
+ */
+const SkeletonCircle = ({ size = 40, className, ...props }) => (jsx(Skeleton, { width: size, height: size, radius: "full", className: cx('shrink-0', className), ...props }));
+
+export { Skeleton, SkeletonCircle, SkeletonText };
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Skeleton/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAKA,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,IAAI,EAAE,cAAc;CACZ;AAEV;;;;;AAKG;AACH,MAAM,MAAM,GAAG,CAAC,KAAuB,KAAI;IACzC,IAAI,OAAO,KAAK,KAAK,QAAQ;AAAE,QAAA,OAAO,KAAK;IAC3C,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,GAAG,KAAK,CAAA,EAAA,CAAI,GAAG,SAAS;AACxE,CAAC;AAWD;;;;;;;;AAQG;AACI,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAiB,MACpHA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,wDAAwD,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,EAClG,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAA,GAC7D,KAAK,EAAA,CACT;AAYJ;AACA,MAAM,uBAAuB,GAAG,GAAG;AAEnC;;;;;AAKG;AACI,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,aAAa,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAqB,KAAI;;;AAGnI,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC;AAEhH,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EACnE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;YAC9C,MAAM,YAAY,GAAG,SAAS,GAAG,CAAC,IAAI,KAAK,KAAK,SAAS,GAAG,CAAC;YAC7D;;YAEEA,GAAA,CAAC,QAAQ,EAAA,EAAa,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,GAAG,aAAa,GAAG,MAAM,EAAE,MAAM,EAAC,IAAI,EAAA,EAApF,KAAK,CAAkF;QAE1G,CAAC,CAAC,EAAA,CACE;AAEV;AAOA;;;;AAIG;MACU,cAAc,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB,MACpFA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "sideEffects": [