frosted-ui 0.0.1-canary.9 → 0.0.1-canary.91

package/dist/cjs/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,oEAAoC;AACpC,qDAA+B;AAE/B,qDAAsG;AAKtG,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IACpD,MAAM,EACJ,SAAS,EACT,IAAI,GAAG,uCAAsB,CAAC,IAAI,CAAC,OAAO,EAC1C,KAAK,GAAG,uCAAsB,CAAC,KAAK,CAAC,OAAO,EAC5C,KAAK,GAAG,uCAAsB,CAAC,KAAK,CAAC,OAAO,EAC5C,YAAY,GAAG,uCAAsB,CAAC,YAAY,CAAC,OAAO,EAC1D,GAAG,mBAAmB,EACvB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,kDACqB,KAAK,EACxB,SAAS,EAAE,IAAA,oBAAU,EAAC,oBAAoB,EAAE,SAAS,EAAE,cAAc,IAAI,EAAE,EAAE,aAAa,KAAK,EAAE,EAAE;YACjG,mBAAmB,EAAE,YAAY;SAClC,CAAC,KACE,mBAAmB,GACvB,CACH,CAAC;AACJ,CAAC,CAAC;AA8CyB,gCAAM;AA7CjC,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAK9C,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IAChD,MAAM,EACJ,SAAS,EACT,IAAI,GAAG,qCAAoB,CAAC,IAAI,CAAC,OAAO,EACxC,KAAK,GAAG,qCAAoB,CAAC,KAAK,CAAC,OAAO,EAC1C,YAAY,GAAG,qCAAoB,CAAC,YAAY,CAAC,OAAO,EACxD,GAAG,iBAAiB,EACrB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,kDACqB,KAAK,EACxB,SAAS,EAAE,IAAA,oBAAU,EAAC,kBAAkB,EAAE,SAAS,EAAE,cAAc,IAAI,EAAE,EAAE,EAAE,mBAAmB,EAAE,YAAY,EAAE,CAAC,KAC7G,iBAAiB,GACrB,CACH,CAAC;AACJ,CAAC,CAAC;AAwBuE,4BAAI;AAvB7E,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAK1C,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IAChD,MAAM,EACJ,SAAS,EACT,KAAK,GAAG,qCAAoB,CAAC,KAAK,CAAC,OAAO,EAC1C,YAAY,GAAG,qCAAoB,CAAC,YAAY,CAAC,OAAO,EACxD,GAAG,iBAAiB,EACrB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,kDACqB,KAAK,EACxB,SAAS,EAAE,IAAA,oBAAU,EAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,mBAAmB,EAAE,YAAY,EAAE,CAAC,KACvF,iBAAiB,GACrB,CACH,CAAC;AACJ,CAAC,CAAC;AAGiD,4BAAI;AAFvD,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/cjs/components/skeleton/skeleton.props.d.ts

@@ -0,0 +1,49 @@
+declare const skeletonAvatarPropDefs: {
+    size: {
+        type: "enum";
+        values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+        default: "3";
+    };
+    shape: {
+        type: "enum";
+        values: readonly ["circle", "square"];
+        default: "circle";
+    };
+    color: {
+        default: "gray";
+        type: "enum";
+        values: ("ruby" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "green" | "grass" | "brown" | "blue" | "orange" | "indigo" | "sky" | "mint" | "yellow" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze" | "gray" | "danger" | "warning" | "success" | "info")[];
+    };
+    highContrast: {
+        type: "boolean";
+        default: undefined;
+    };
+};
+declare const skeletonTextPropDefs: {
+    size: {
+        default: "3";
+        type: "enum";
+        values: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+    };
+    color: {
+        default: "gray";
+        type: "enum";
+        values: ("ruby" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "green" | "grass" | "brown" | "blue" | "orange" | "indigo" | "sky" | "mint" | "yellow" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze" | "gray" | "danger" | "warning" | "success" | "info")[];
+    };
+    highContrast: {
+        type: "boolean";
+        default: undefined;
+    };
+};
+declare const skeletonRectPropDefs: {
+    color: {
+        default: "gray";
+        type: "enum";
+        values: ("ruby" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "green" | "grass" | "brown" | "blue" | "orange" | "indigo" | "sky" | "mint" | "yellow" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze" | "gray" | "danger" | "warning" | "success" | "info")[];
+    };
+    highContrast: {
+        type: "boolean";
+        default: undefined;
+    };
+};
+export { skeletonAvatarPropDefs, skeletonRectPropDefs, skeletonTextPropDefs };

package/dist/cjs/components/skeleton/skeleton.props.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skeletonTextPropDefs = exports.skeletonRectPropDefs = exports.skeletonAvatarPropDefs = void 0;
+const helpers_1 = require("../../helpers");
+const avatar_props_1 = require("../avatar/avatar.props");
+const text_props_1 = require("../text/text.props");
+const skeletonAvatarPropDefs = {
+    size: avatar_props_1.avatarPropDefs.size,
+    shape: avatar_props_1.avatarPropDefs.shape,
+    color: { ...helpers_1.colorProp, default: 'gray' },
+    highContrast: helpers_1.highContrastProp,
+};
+exports.skeletonAvatarPropDefs = skeletonAvatarPropDefs;
+const skeletonTextPropDefs = {
+    size: { ...text_props_1.textPropDefs.size, default: '3' },
+    color: { ...helpers_1.colorProp, default: 'gray' },
+    highContrast: helpers_1.highContrastProp,
+};
+exports.skeletonTextPropDefs = skeletonTextPropDefs;
+const skeletonRectPropDefs = {
+    color: { ...helpers_1.colorProp, default: 'gray' },
+    highContrast: helpers_1.highContrastProp,
+};
+exports.skeletonRectPropDefs = skeletonRectPropDefs;
+//# sourceMappingURL=skeleton.props.js.map

package/dist/cjs/components/skeleton/skeleton.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.props.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.props.ts"],"names":[],"mappings":";;;AACA,2CAA4D;AAC5D,yDAAwD;AACxD,mDAAkD;AAElD,MAAM,sBAAsB,GAAG;IAC7B,IAAI,EAAE,6BAAc,CAAC,IAAI;IACzB,KAAK,EAAE,6BAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,EAAE,GAAG,mBAAS,EAAE,OAAO,EAAE,MAAM,EAAE;IACxC,YAAY,EAAE,0BAAgB;CAM/B,CAAC;AAoBO,wDAAsB;AAlB/B,MAAM,oBAAoB,GAAG;IAC3B,IAAI,EAAE,EAAE,GAAG,yBAAY,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE;IAC5C,KAAK,EAAE,EAAE,GAAG,mBAAS,EAAE,OAAO,EAAE,MAAM,EAAE;IACxC,YAAY,EAAE,0BAAgB;CAK/B,CAAC;AAUqD,oDAAoB;AAR3E,MAAM,oBAAoB,GAAG;IAC3B,KAAK,EAAE,EAAE,GAAG,mBAAS,EAAE,OAAO,EAAE,MAAM,EAAE;IACxC,YAAY,EAAE,0BAAgB;CAI/B,CAAC;AAE+B,oDAAoB"}

package/dist/cjs/components/skeleton/skeleton.stories.d.ts

@@ -0,0 +1,32 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import { Skeleton } from '..';
+declare const meta: {
+    title: string;
+    component: {
+        (props: Skeleton.AvatarProps): React.JSX.Element;
+        displayName: string;
+    };
+    args: {
+        highContrast: false;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AvatarDefault: Story;
+export declare const AvatarSizes: Story;
+export declare const AvatarColors: Story;
+export declare const AvatarHighContrast: Story;
+export declare const TextDefault: Story;
+export declare const TextSizes: Story;
+export declare const TextColors: Story;
+export declare const TextHighContrast: Story;
+export declare const RectDefault: Story;
+export declare const RectColors: Story;
+export declare const RectHighContrast: Story;
+export declare const Composed: Story;
+export declare const ComposedColor: Story;

package/dist/cjs/components/skeleton/skeleton.stories.js

@@ -0,0 +1,268 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposedColor = exports.Composed = exports.RectHighContrast = exports.RectColors = exports.RectDefault = exports.TextHighContrast = exports.TextColors = exports.TextSizes = exports.TextDefault = exports.AvatarHighContrast = exports.AvatarColors = exports.AvatarSizes = exports.AvatarDefault = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const __1 = require("..");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+    title: 'Components/Skeleton',
+    component: __1.Skeleton.Avatar,
+    args: {
+        highContrast: false,
+    },
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+// Avatar
+exports.AvatarDefault = {
+    name: 'Avatar',
+    args: {
+        size: __1.skeletonAvatarPropDefs.size.default,
+        color: __1.skeletonAvatarPropDefs.color.default,
+    },
+    render: (args) => react_1.default.createElement(__1.Skeleton.Avatar, { ...args }),
+};
+exports.AvatarSizes = {
+    name: 'Avatar sizes',
+    args: {
+        size: __1.skeletonAvatarPropDefs.size.default,
+        color: __1.skeletonAvatarPropDefs.color.default,
+        shape: __1.skeletonAvatarPropDefs.shape.default,
+    },
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'row', gap: 'var(--space-3)' } },
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "0" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "1" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "2" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "3" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "4" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "5" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "6" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "7" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "8" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "9" }))),
+};
+exports.AvatarColors = {
+    name: 'Avatar colors',
+    args: {
+        size: __1.skeletonAvatarPropDefs.size.default,
+        color: __1.skeletonAvatarPropDefs.color.default,
+    },
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'row', gap: 'var(--space-3)' } },
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "indigo" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "cyan" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "orange" }),
+        react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "crimson" }))),
+};
+exports.AvatarHighContrast = {
+    name: 'Avatar high contrast',
+    args: {
+        size: __1.skeletonAvatarPropDefs.size.default,
+        color: __1.skeletonAvatarPropDefs.color.default,
+    },
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' } },
+        react_1.default.createElement("div", { style: { display: 'flex', gap: 'var(--space-2)' } },
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "gray", highContrast: false }),
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "indigo", highContrast: false }),
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "cyan", highContrast: false }),
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "orange", highContrast: false }),
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "crimson", highContrast: false })),
+        react_1.default.createElement("div", { style: { display: 'flex', gap: 'var(--space-2)' } },
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "gray", highContrast: true }),
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "indigo", highContrast: true }),
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "cyan", highContrast: true }),
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "orange", highContrast: true }),
+            react_1.default.createElement(__1.Skeleton.Avatar, { ...args, color: "crimson", highContrast: true })))),
+};
+// Text
+exports.TextDefault = {
+    name: 'Text',
+    args: {
+        size: __1.skeletonTextPropDefs.size.default,
+        color: __1.skeletonTextPropDefs.color.default,
+    },
+    render: (args) => react_1.default.createElement(__1.Skeleton.Text, { ...args, style: { width: 400 } }),
+};
+exports.TextSizes = {
+    name: 'Text sizes',
+    args: {
+        size: __1.skeletonTextPropDefs.size.default,
+        color: __1.skeletonTextPropDefs.color.default,
+    },
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' } },
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "0", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "1", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "2", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "3", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "4", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "5", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "6", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "7", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "8", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "9", style: { width: 400 } }))),
+};
+exports.TextColors = {
+    name: 'Text colors',
+    args: {
+        size: __1.skeletonTextPropDefs.size.default,
+        color: __1.skeletonTextPropDefs.color.default,
+    },
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' } },
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "indigo", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "cyan", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "orange", style: { width: 400 } }),
+        react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "crimson", style: { width: 400 } }))),
+};
+exports.TextHighContrast = {
+    name: 'Text high contrast',
+    args: {
+        size: __1.skeletonTextPropDefs.size.default,
+        color: __1.skeletonTextPropDefs.color.default,
+    },
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'row', gap: 'var(--space-2)' } },
+        react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' } },
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "gray", highContrast: false, style: { width: 400 } }),
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "indigo", highContrast: false, style: { width: 400 } }),
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "cyan", highContrast: false, style: { width: 400 } }),
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "orange", highContrast: false, style: { width: 400 } }),
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "crimson", highContrast: false, style: { width: 400 } })),
+        react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' } },
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "gray", highContrast: true, style: { width: 400 } }),
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "indigo", highContrast: true, style: { width: 400 } }),
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "cyan", highContrast: true, style: { width: 400 } }),
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "orange", highContrast: true, style: { width: 400 } }),
+            react_1.default.createElement(__1.Skeleton.Text, { ...args, color: "crimson", highContrast: true, style: { width: 400 } })))),
+};
+// Rect
+exports.RectDefault = {
+    name: 'Rect',
+    args: {
+        color: __1.skeletonRectPropDefs.color.default,
+    },
+    render: (args) => react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args }),
+};
+exports.RectColors = {
+    name: 'Rect colors',
+    args: {
+        color: __1.skeletonRectPropDefs.color.default,
+    },
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'row', gap: 'var(--space-3)' } },
+        react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "indigo" }),
+        react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "cyan" }),
+        react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "orange" }),
+        react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "crimson" }))),
+};
+exports.RectHighContrast = {
+    name: 'Rect high contrast',
+    args: {
+        color: __1.skeletonRectPropDefs.color.default,
+    },
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' } },
+        react_1.default.createElement("div", { style: { display: 'flex', gap: 'var(--space-2)' } },
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "gray", highContrast: false }),
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "indigo", highContrast: false }),
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "cyan", highContrast: false }),
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "orange", highContrast: false }),
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "crimson", highContrast: false })),
+        react_1.default.createElement("div", { style: { display: 'flex', gap: 'var(--space-2)' } },
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "gray", highContrast: true }),
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "indigo", highContrast: true }),
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "cyan", highContrast: true }),
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "orange", highContrast: true }),
+            react_1.default.createElement(__1.Skeleton.Rect, { style: { width: 140, height: 140 }, ...args, color: "crimson", highContrast: true })))),
+};
+exports.Composed = {
+    args: {
+        color: __1.skeletonTextPropDefs.color.default,
+        highContrast: __1.skeletonTextPropDefs.highContrast.default,
+    },
+    render: (args) => {
+        const [show, setShow] = react_1.default.useState(false);
+        return (react_1.default.createElement(__1.Card, { variant: "surface", size: "3", onMouseOver: () => setShow(true), onMouseOut: () => setShow(false), style: { minWidth: 400 } },
+            react_1.default.createElement("div", { style: {
+                    objectFit: 'cover',
+                    width: 400,
+                    aspectRatio: '2 / 1',
+                    borderRadius: 'var(--radius-2)',
+                    overflow: 'hidden',
+                    display: 'flex',
+                } }, show ? (react_1.default.createElement("img", { className: "Image", src: "https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80", alt: "Landscape photograph by Tobias Tullius", style: {
+                    objectFit: 'cover',
+                    display: 'inline-block',
+                    verticalAlign: 'center',
+                    flex: 1,
+                } })) : (react_1.default.createElement(__1.Skeleton.Rect, { highContrast: args.highContrast, color: args.color, style: {
+                    flex: 1,
+                } }))),
+            react_1.default.createElement("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 'var(--space-4)',
+                    alignItems: 'center',
+                    marginTop: 'var(--space-4)',
+                } },
+                show ? (react_1.default.createElement(__1.Avatar, { highContrast: args.highContrast, color: args.color, fallback: "AB", size: "6" })) : (react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "6" })),
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' } }, show ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(__1.Text, { highContrast: args.highContrast, size: "6" }, "Artur"),
+                    react_1.default.createElement(__1.Text, { highContrast: args.highContrast, size: "2" }, "Design Engineer at Whop"),
+                    react_1.default.createElement(__1.Text, { highContrast: args.highContrast, size: "2" }, "Professional button polisher."))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "6", style: { width: 150 } }),
+                    react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "2", style: { width: 250 } }),
+                    react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "2", style: { width: 200 } })))))));
+    },
+};
+exports.ComposedColor = {
+    name: 'Composed color',
+    args: {
+        color: 'iris',
+        highContrast: __1.skeletonTextPropDefs.highContrast.default,
+    },
+    render: (args) => {
+        const [show, setShow] = react_1.default.useState(false);
+        return (react_1.default.createElement("div", { style: {
+                minWidth: 400,
+                boxSizing: 'border-box',
+                padding: 24,
+                background: `var(--${args.color}-a2)`,
+                border: `1px solid var(--${args.color}-a6)`,
+                borderRadius: 'var(--radius-5)',
+            }, onMouseOver: () => setShow(true), onMouseOut: () => setShow(false) },
+            react_1.default.createElement("div", { style: {
+                    objectFit: 'cover',
+                    width: 400,
+                    aspectRatio: '2 / 1',
+                    borderRadius: 'var(--radius-2)',
+                    overflow: 'hidden',
+                    display: 'flex',
+                } }, show ? (react_1.default.createElement("img", { className: "Image", src: "https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80", alt: "Landscape photograph by Tobias Tullius", style: {
+                    objectFit: 'cover',
+                    display: 'inline-block',
+                    verticalAlign: 'center',
+                    flex: 1,
+                } })) : (react_1.default.createElement(__1.Skeleton.Rect, { highContrast: args.highContrast, color: args.color, style: {
+                    flex: 1,
+                } }))),
+            react_1.default.createElement("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 'var(--space-4)',
+                    alignItems: 'center',
+                    marginTop: 'var(--space-4)',
+                } },
+                show ? (react_1.default.createElement(__1.Avatar, { highContrast: args.highContrast, color: args.color, fallback: "AB", size: "6" })) : (react_1.default.createElement(__1.Skeleton.Avatar, { ...args, size: "6" })),
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' } }, show ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(__1.Text, { color: args.color, highContrast: args.highContrast, size: "6" }, "Artur"),
+                    react_1.default.createElement(__1.Text, { color: args.color, highContrast: args.highContrast, size: "2" }, "Design Engineer at Whop"),
+                    react_1.default.createElement(__1.Text, { color: args.color, highContrast: args.highContrast, size: "2" }, "Professional button polisher."))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "6", style: { width: 150 } }),
+                    react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "2", style: { width: 250 } }),
+                    react_1.default.createElement(__1.Skeleton.Text, { ...args, size: "2", style: { width: 200 } })))))));
+    },
+};
+//# sourceMappingURL=skeleton.stories.js.map

package/dist/cjs/components/skeleton/skeleton.stories.js.map

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

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

@@ -0,0 +1,2 @@
+export * from './slider';
+export * from './slider.props';

package/dist/cjs/components/slider/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./slider"), exports);
+tslib_1.__exportStar(require("./slider.props"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/slider/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB;AACzB,yDAA+B"}

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

@@ -0,0 +1,13 @@
+import { Slider as SliderPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { sliderPropDefs } from './slider.props';
+import type { GetPropDefTypes, PropsWithoutColor } from '../../helpers';
+type SliderOwnProps = GetPropDefTypes<typeof sliderPropDefs>;
+interface SliderProps extends Omit<PropsWithoutColor<typeof SliderPrimitive.Root>, 'children'>, SliderOwnProps {
+}
+declare const Slider: {
+    (props: SliderProps): React.JSX.Element;
+    displayName: string;
+};
+export { Slider };
+export type { SliderProps };

package/dist/cjs/components/slider/slider.js

@@ -0,0 +1,24 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const tslib_1 = require("tslib");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const radix_ui_1 = require("radix-ui");
+const React = tslib_1.__importStar(require("react"));
+const slider_props_1 = require("./slider.props");
+const Slider = (props) => {
+    var _a, _b;
+    const { className, size = slider_props_1.sliderPropDefs.size.default, color = slider_props_1.sliderPropDefs.color.default, highContrast = slider_props_1.sliderPropDefs.highContrast.default, tabIndex, ...sliderProps } = props;
+    return (React.createElement(radix_ui_1.Slider.Root, { "data-accent-color": color, ...sliderProps, className: (0, classnames_1.default)('fui-SliderRoot', className, `fui-r-size-${size}`, {
+            'fui-high-contrast': highContrast,
+        }) },
+        React.createElement(radix_ui_1.Slider.Track, { className: "fui-SliderTrack" },
+            React.createElement(radix_ui_1.Slider.Range, { className: (0, classnames_1.default)('fui-SliderRange', {
+                    'fui-high-contrast': highContrast,
+                }), "data-inverted": sliderProps.inverted ? '' : undefined })),
+        ((_b = (_a = sliderProps.value) !== null && _a !== void 0 ? _a : sliderProps.defaultValue) !== null && _b !== void 0 ? _b : []).map((value, index) => (React.createElement(radix_ui_1.Slider.Thumb, { key: index, className: "fui-SliderThumb", ...(tabIndex !== undefined ? { tabIndex } : undefined) })))));
+};
+exports.Slider = Slider;
+Slider.displayName = 'Slider';
+//# sourceMappingURL=slider.js.map

package/dist/cjs/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,oEAAoC;AACpC,uCAAqD;AACrD,qDAA+B;AAE/B,iDAAgD;AAOhD,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;;IACpC,MAAM,EACJ,SAAS,EACT,IAAI,GAAG,6BAAc,CAAC,IAAI,CAAC,OAAO,EAClC,KAAK,GAAG,6BAAc,CAAC,KAAK,CAAC,OAAO,EACpC,YAAY,GAAG,6BAAc,CAAC,YAAY,CAAC,OAAO,EAClD,QAAQ,EACR,GAAG,WAAW,EACf,GAAG,KAAK,CAAC;IACV,OAAO,CACL,oBAAC,iBAAe,CAAC,IAAI,yBACA,KAAK,KACpB,WAAW,EACf,SAAS,EAAE,IAAA,oBAAU,EAAC,gBAAgB,EAAE,SAAS,EAAE,cAAc,IAAI,EAAE,EAAE;YACvE,mBAAmB,EAAE,YAAY;SAClC,CAAC;QAEF,oBAAC,iBAAe,CAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB;YAChD,oBAAC,iBAAe,CAAC,KAAK,IACpB,SAAS,EAAE,IAAA,oBAAU,EAAC,iBAAiB,EAAE;oBACvC,mBAAmB,EAAE,YAAY;iBAClC,CAAC,mBACa,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,GACpD,CACoB;QACvB,CAAC,MAAA,MAAA,WAAW,CAAC,KAAK,mCAAI,WAAW,CAAC,YAAY,mCAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3E,oBAAC,iBAAe,CAAC,KAAK,IACpB,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,iBAAiB,KACvB,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,GACvD,CACH,CAAC,CACmB,CACxB,CAAC;AACJ,CAAC,CAAC;AAGO,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/cjs/components/slider/slider.props.d.ts

@@ -0,0 +1,17 @@
+declare const sliderPropDefs: {
+    size: {
+        type: "enum";
+        values: readonly ["1", "2", "3"];
+        default: "2";
+    };
+    color: {
+        type: "enum";
+        values: ("ruby" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "green" | "grass" | "brown" | "blue" | "orange" | "indigo" | "sky" | "mint" | "yellow" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze" | "gray" | "danger" | "warning" | "success" | "info")[];
+        default: ("ruby" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "green" | "grass" | "brown" | "blue" | "orange" | "indigo" | "sky" | "mint" | "yellow" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze" | "gray" | "danger" | "warning" | "success" | "info") | undefined;
+    };
+    highContrast: {
+        type: "boolean";
+        default: undefined;
+    };
+};
+export { sliderPropDefs };

package/dist/cjs/components/slider/slider.props.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sliderPropDefs = void 0;
+const helpers_1 = require("../../helpers");
+const sizes = ['1', '2', '3'];
+const sliderPropDefs = {
+    size: { type: 'enum', values: sizes, default: '2' },
+    color: helpers_1.colorProp,
+    highContrast: helpers_1.highContrastProp,
+};
+exports.sliderPropDefs = sliderPropDefs;
+//# sourceMappingURL=slider.props.js.map

package/dist/cjs/components/slider/slider.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.props.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.props.ts"],"names":[],"mappings":";;;AACA,2CAA4D;AAE5D,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC;AAEvC,MAAM,cAAc,GAAG;IACrB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;IACnD,KAAK,EAAE,mBAAS;IAChB,YAAY,EAAE,0BAAgB;CAK/B,CAAC;AAEO,wCAAc"}

package/dist/cjs/components/slider/slider.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: {
+        (props: import("./slider").SliderProps): React.JSX.Element;
+        displayName: string;
+    };
+    args: {
+        size: "2";
+        color: "ruby" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "green" | "grass" | "brown" | "blue" | "orange" | "indigo" | "sky" | "mint" | "yellow" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze" | "gray" | "danger" | "warning" | "success" | "info" | undefined;
+        highContrast: undefined;
+        disabled: false;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Size: Story;
+export declare const Color: Story;
+export declare const HighContrast: Story;
+export declare const Range: Story;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Range = exports.HighContrast = exports.Color = exports.Size = exports.Default = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const __1 = require("..");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+    title: 'Controls/Slider',
+    component: __1.Slider,
+    args: {
+        size: __1.sliderPropDefs.size.default,
+        color: __1.sliderPropDefs.color.default,
+        highContrast: __1.sliderPropDefs.highContrast.default,
+        disabled: false,
+    },
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+exports.Default = {
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', width: 300 } },
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [50] }))),
+};
+exports.Size = {
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', width: 300 } },
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [25], size: "1" }),
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [50], size: "2" }),
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [75], size: "3" }))),
+};
+exports.Color = {
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', width: 300 } },
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [20], color: "indigo" }),
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [40], color: "cyan" }),
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [60], color: "orange" }),
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [80], color: "crimson" }))),
+};
+exports.HighContrast = {
+    name: 'High Contrast',
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', width: 300 } },
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [25], highContrast: false }),
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [50], highContrast: true }))),
+};
+exports.Range = {
+    render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', width: 300 } },
+        react_1.default.createElement(__1.Slider, { ...args, defaultValue: [25, 75] }))),
+};
+//# sourceMappingURL=slider.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/slot/index.d.ts

@@ -0,0 +1 @@
+export * from './slot';

package/dist/cjs/components/slot/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./slot"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/slot/index.js.map

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