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

package/dist/esm/components/callout/callout.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Text } from '../text';
+import { calloutRootPropDefs } from './callout.props';
+import type { ExtractPropsForTag, GetPropDefTypes, PropsWithoutColor } from '../../helpers';
+type CalloutRootOwnProps = GetPropDefTypes<typeof calloutRootPropDefs>;
+type CalloutContextValue = CalloutRootOwnProps;
+interface CalloutRootProps extends PropsWithoutColor<'div'>, CalloutContextValue {
+}
+declare const CalloutRoot: {
+    (props: CalloutRootProps): React.JSX.Element;
+    displayName: string;
+};
+interface CalloutIconProps extends PropsWithoutColor<'div'> {
+}
+declare const CalloutIcon: {
+    (props: CalloutIconProps): React.JSX.Element;
+    displayName: string;
+};
+type CalloutTextProps = ExtractPropsForTag<typeof Text, 'p'>;
+declare const CalloutText: {
+    (props: CalloutTextProps): React.JSX.Element;
+    displayName: string;
+};
+export { CalloutIcon as Icon, CalloutRoot as Root, CalloutText as Text };
+export type { CalloutIconProps as IconProps, CalloutRootProps as RootProps, CalloutTextProps as TextProps };

package/dist/esm/components/callout/callout.js

@@ -0,0 +1,35 @@
+'use client';
+import classNames from 'classnames';
+import * as React from 'react';
+import { Text } from '../text';
+import { calloutRootPropDefs } from './callout.props';
+const CalloutContext = React.createContext({});
+const CalloutRoot = (props) => {
+    const { children, className, size = calloutRootPropDefs.size.default, variant = calloutRootPropDefs.variant.default, color = calloutRootPropDefs.color.default, highContrast = calloutRootPropDefs.highContrast.default, ...rootProps } = props;
+    return (React.createElement("div", { "data-accent-color": color, ...rootProps, className: classNames('fui-CalloutRoot', className, `fui-r-size-${size}`, `fui-variant-${variant}`, {
+            'fui-high-contrast': highContrast,
+        }) },
+        React.createElement(CalloutContext.Provider, { value: React.useMemo(() => ({ size, color, highContrast }), [size, color, highContrast]) }, children)));
+};
+CalloutRoot.displayName = 'CalloutRoot';
+const CalloutIcon = (props) => {
+    const { color, size, highContrast } = React.useContext(CalloutContext);
+    return (React.createElement(Text, { asChild: true, color: color, size: getTextSize(size), highContrast: highContrast },
+        React.createElement("div", { ...props, className: classNames('fui-CalloutIcon', props.className) })));
+};
+CalloutIcon.displayName = 'CalloutIcon';
+const CalloutText = (props) => {
+    const { color, size, highContrast } = React.useContext(CalloutContext);
+    return (React.createElement(Text, { as: "p", size: getTextSize(size), color: color, highContrast: highContrast, weight: "medium", ...props, className: classNames('fui-CalloutText', props.className) }));
+};
+CalloutText.displayName = 'CalloutText';
+function getTextSize(size) {
+    if (size === undefined)
+        return undefined;
+    return getNonResponsiveTextSize(size);
+}
+function getNonResponsiveTextSize(size) {
+    return size === '3' ? '3' : '2';
+}
+export { CalloutIcon as Icon, CalloutRoot as Root, CalloutText as Text };
+//# sourceMappingURL=callout.js.map

package/dist/esm/components/callout/callout.js.map

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

package/dist/esm/components/callout/callout.props.d.ts

@@ -0,0 +1,22 @@
+declare const calloutRootPropDefs: {
+    size: {
+        type: "enum";
+        values: readonly ["1", "2", "3"];
+        default: "2";
+    };
+    variant: {
+        type: "enum";
+        values: readonly ["soft", "surface", "outline"];
+        default: "soft";
+    };
+    color: {
+        default: undefined;
+        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 { calloutRootPropDefs };

package/dist/esm/components/callout/callout.props.js

@@ -0,0 +1,11 @@
+import { colorProp, highContrastProp } from '../../helpers';
+const sizes = ['1', '2', '3'];
+const variants = ['soft', 'surface', 'outline'];
+const calloutRootPropDefs = {
+    size: { type: 'enum', values: sizes, default: '2' },
+    variant: { type: 'enum', values: variants, default: 'soft' },
+    color: { ...colorProp, default: undefined },
+    highContrast: highContrastProp,
+};
+export { calloutRootPropDefs };
+//# sourceMappingURL=callout.props.js.map

package/dist/esm/components/callout/callout.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.props.js","sourceRoot":"","sources":["../../../../src/components/callout/callout.props.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC;AACvC,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,CAAU,CAAC;AAEzD,MAAM,mBAAmB,GAAG;IAC1B,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;IACnD,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE;IAC5D,KAAK,EAAE,EAAE,GAAG,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE;IAC3C,YAAY,EAAE,gBAAgB;CAM/B,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/esm/components/callout/callout.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import { RootProps as CalloutRootProps } from '../../../src/components/callout/callout';
+declare const meta: {
+    title: string;
+    component: {
+        (props: CalloutRootProps): React.JSX.Element;
+        displayName: string;
+    };
+    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 Variant: Story;
+export declare const Color: Story;
+export declare const SemanticColor: Story;
+export declare const HighContrast: Story;
+export declare const AsAlert: Story;

package/dist/esm/components/callout/callout.stories.js

@@ -0,0 +1,182 @@
+import { InfoCircle16 } from '@frosted-ui/icons';
+import React from 'react';
+import { Callout, Code, Link, Text, calloutRootPropDefs } from '..';
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+    title: 'Components/Callout',
+    component: Callout.Root,
+    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'],
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+    args: {
+        color: calloutRootPropDefs.color.default,
+        variant: calloutRootPropDefs.variant.default,
+        children: (React.createElement(React.Fragment, null,
+            "You will need to upgrade to the ",
+            React.createElement(Link, { href: "#" }, "newest Frosted-UI version"),
+            " now.")),
+    },
+    render: ({ children, ...args }) => (React.createElement(Callout.Root, { ...args },
+        React.createElement(Callout.Icon, null,
+            React.createElement(InfoCircle16, null)),
+        React.createElement(Callout.Text, null, children))),
+};
+export const Size = {
+    args: {
+        color: calloutRootPropDefs.color.default,
+        variant: calloutRootPropDefs.variant.default,
+        children: (React.createElement(React.Fragment, null,
+            "You will need to upgrade to the ",
+            React.createElement(Link, { href: "#" }, "newest Frosted-UI version"),
+            " now.")),
+    },
+    render: ({ children, ...args }) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', alignItems: 'flex-start' } },
+        React.createElement(Callout.Root, { ...args, size: "3" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, size: "2" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, size: "1" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)))),
+};
+export const Variant = {
+    args: {
+        color: calloutRootPropDefs.color.default,
+        children: (React.createElement(React.Fragment, null,
+            "You will need to upgrade to the ",
+            React.createElement(Link, { href: "#" }, "newest Frosted-UI version"),
+            " now.")),
+    },
+    render: ({ children, ...args }) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' } },
+        React.createElement(Callout.Root, { ...args, variant: "soft" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, variant: "surface" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, variant: "outline" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)))),
+};
+export const Color = {
+    args: {
+        color: calloutRootPropDefs.color.default,
+        variant: calloutRootPropDefs.variant.default,
+        children: (React.createElement(React.Fragment, null,
+            "You will need to upgrade to the ",
+            React.createElement(Link, { href: "#" }, "newest Frosted-UI version"),
+            " now.")),
+    },
+    render: ({ children, ...args }) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' } },
+        React.createElement(Callout.Root, { ...args, color: "blue" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, color: "green" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, color: "red" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)))),
+};
+export const SemanticColor = {
+    name: 'Semantic color',
+    args: {
+        color: calloutRootPropDefs.color.default,
+        variant: calloutRootPropDefs.variant.default,
+        children: (React.createElement(React.Fragment, null,
+            "You will need to upgrade to the ",
+            React.createElement(Link, { href: "#" }, "newest Frosted-UI version"),
+            " now.")),
+    },
+    render: ({ children, ...args }) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' } },
+        React.createElement(Callout.Root, { ...args, color: "info" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, color: "success" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, color: "warning" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, color: "danger" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)))),
+};
+export const HighContrast = {
+    name: 'High Contrast',
+    args: {
+        color: calloutRootPropDefs.color.default,
+        variant: calloutRootPropDefs.variant.default,
+        children: (React.createElement(React.Fragment, null,
+            "You will need to upgrade to the ",
+            React.createElement(Link, { href: "#" }, "newest Frosted-UI version"),
+            " now.")),
+    },
+    render: ({ children, ...args }) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' } },
+        React.createElement(Callout.Root, { ...args, variant: "soft" },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)),
+        React.createElement(Callout.Root, { ...args, variant: "soft", highContrast: true },
+            React.createElement(Callout.Icon, null,
+                React.createElement(Callout.Icon, null,
+                    React.createElement(InfoCircle16, null))),
+            React.createElement(Callout.Text, null, children)))),
+};
+export const AsAlert = {
+    name: 'As Alert',
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { maxWidth: 500 } },
+            React.createElement(Text, null,
+                "Add a native",
+                ' ',
+                React.createElement(Link, { href: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role", target: "_blank" },
+                    "WAI-ARIA ",
+                    React.createElement(Code, null, "alert"),
+                    " role"),
+                ' ',
+                "to the callout when the user's immediate attention is required, like when an error message appears. The screen reader will be interrupted, announcing the new content immediately.")),
+        React.createElement("br", null),
+        React.createElement("div", { style: { display: 'inline-block' } },
+            React.createElement(Callout.Root, { ...args, color: "red", role: "alert" },
+                React.createElement(Callout.Icon, null,
+                    React.createElement(Callout.Icon, null, "\uD83D\uDEA8")),
+                React.createElement(Callout.Text, null, "Access denied. Please contact the network administrator to view this page."))))),
+};
+//# sourceMappingURL=callout.stories.js.map

package/dist/esm/components/callout/callout.stories.js.map

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

package/dist/esm/components/callout/index.d.ts

@@ -0,0 +1,2 @@
+export * as Callout from './callout';
+export * from './callout.props';

package/dist/esm/components/callout/index.js

@@ -0,0 +1,3 @@
+export * as Callout from './callout';
+export * from './callout.props';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/callout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/callout/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,cAAc,iBAAiB,CAAC"}

package/dist/esm/components/card/card.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { cardPropDefs } from './card.props';
+import type { GetPropDefTypes } from '../../helpers';
+type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
+interface CardProps extends React.ComponentProps<'div'>, CardOwnProps {
+    asChild?: boolean;
+}
+declare const Card: {
+    (props: CardProps): React.JSX.Element;
+    displayName: string;
+};
+export { Card };
+export type { CardProps };

package/dist/esm/components/card/card.js

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+import * as React from 'react';
+import { cardPropDefs } from './card.props';
+const Card = (props) => {
+    const { asChild, children, className, size = cardPropDefs.size.default, variant = cardPropDefs.variant.default, ...cardProps } = props;
+    const Comp = asChild ? Slot.Root : 'div';
+    function getChild() {
+        const firstChild = React.Children.only(children);
+        return React.cloneElement(firstChild, {
+            children: React.createElement("div", { className: "fui-CardInner" }, firstChild.props.children),
+        });
+    }
+    return (React.createElement(Comp, { ...cardProps, className: classNames('fui-reset', 'fui-Card', className, `fui-r-size-${size}`, `fui-variant-${variant}`) }, asChild ? getChild() : React.createElement("div", { className: "fui-CardInner" }, children)));
+};
+Card.displayName = 'Card';
+export { Card };
+//# sourceMappingURL=card.js.map

package/dist/esm/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAS5C,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IAChC,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,EAChC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,EACtC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,SAAS,QAAQ;QACf,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAuD,CAAC;QACvG,OAAO,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE;YACpC,QAAQ,EAAE,6BAAK,SAAS,EAAC,eAAe,IAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAO;SAC3E,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CACL,oBAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,IAAI,EAAE,EAAE,eAAe,OAAO,EAAE,CAAC,IAExG,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,eAAe,IAAE,QAAQ,CAAO,CAClE,CACR,CAAC;AACJ,CAAC,CAAC;AACF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/esm/components/card/card.props.d.ts

@@ -0,0 +1,13 @@
+declare const cardPropDefs: {
+    size: {
+        type: "enum";
+        values: readonly ["1", "2", "3", "4", "5"];
+        default: "1";
+    };
+    variant: {
+        type: "enum";
+        values: readonly ["surface", "classic", "ghost"];
+        default: "surface";
+    };
+};
+export { cardPropDefs };

package/dist/esm/components/card/card.props.js

@@ -0,0 +1,8 @@
+const sizes = ['1', '2', '3', '4', '5'];
+const variants = ['surface', 'classic', 'ghost'];
+const cardPropDefs = {
+    size: { type: 'enum', values: sizes, default: '1' },
+    variant: { type: 'enum', values: variants, default: 'surface' },
+};
+export { cardPropDefs };
+//# sourceMappingURL=card.props.js.map

package/dist/esm/components/card/card.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.props.js","sourceRoot":"","sources":["../../../../src/components/card/card.props.ts"],"names":[],"mappings":"AAEA,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC;AACjD,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAU,CAAC;AAE1D,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;IACnD,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE;CAIhE,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/esm/components/card/card.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: {
+        (props: import("./card").CardProps): React.JSX.Element;
+        displayName: string;
+    };
+    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 Variant: Story;
+export declare const InsetContent: Story;
+export declare const AsAnotherElement: Story;

package/dist/esm/components/card/card.stories.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Avatar, Card, Code, Inset, Text, cardPropDefs } from '..';
+const CardContentExample = () => (React.createElement("div", { style: { display: 'flex', gap: 'var(--space-3)', alignItems: 'center' } },
+    React.createElement(Avatar, { size: "3", fallback: "IM", color: "indigo" }),
+    React.createElement("div", null,
+        React.createElement(Text, { as: "div", size: "2", weight: "bold" }, "Ilya Miskov"),
+        React.createElement(Text, { as: "div", size: "2", color: "gray" }, "I love how we have the freedom to explore skeuomorphism"))));
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+    title: 'Components/Card',
+    component: Card,
+    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'],
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+    args: {
+        children: React.createElement(CardContentExample, null),
+        size: cardPropDefs.size.default,
+    },
+};
+export const Size = {
+    args: {
+        size: cardPropDefs.size.default,
+    },
+    render: (args) => (React.createElement("div", { style: { display: 'flex', gap: 'var(--space-3)', flexDirection: 'column' } },
+        React.createElement(Card, { ...args, size: "1", style: { width: 350 } },
+            React.createElement("div", { style: { display: 'flex', gap: 'var(--space-3)', alignItems: 'center' } },
+                React.createElement(Avatar, { size: "3", fallback: "T", color: "indigo" }),
+                React.createElement("div", null,
+                    React.createElement(Text, { as: "div", size: "2", weight: "bold" }, "Teodros Girmay"),
+                    React.createElement(Text, { as: "div", size: "2", color: "gray" }, "Engineering")))),
+        React.createElement(Card, { ...args, size: "2", style: { width: 425 } },
+            React.createElement("div", { style: { display: 'flex', gap: 'var(--space-4)', alignItems: 'center' } },
+                React.createElement(Avatar, { size: "4", fallback: "T", color: "indigo" }),
+                React.createElement("div", null,
+                    React.createElement(Text, { as: "div", weight: "bold" }, "Teodros Girmay"),
+                    React.createElement(Text, { as: "div", color: "gray" }, "Engineering")))),
+        React.createElement(Card, { ...args, size: "3", style: { width: 500 } },
+            React.createElement("div", { style: { display: 'flex', gap: 'var(--space-4)', alignItems: 'center' } },
+                React.createElement(Avatar, { size: "5", fallback: "T", color: "indigo" }),
+                React.createElement("div", null,
+                    React.createElement(Text, { as: "div", size: "4", weight: "bold" }, "Teodros Girmay"),
+                    React.createElement(Text, { as: "div", size: "4", color: "gray" }, "Engineering")))),
+        React.createElement(Card, { ...args, size: "4", style: { width: 500 } },
+            React.createElement("div", { style: { display: 'flex', gap: 'var(--space-4)', alignItems: 'center' } },
+                React.createElement(Avatar, { size: "5", fallback: "T", color: "indigo" }),
+                React.createElement("div", null,
+                    React.createElement(Text, { as: "div", size: "4", weight: "bold" }, "Teodros Girmay"),
+                    React.createElement(Text, { as: "div", size: "4", color: "gray" }, "Engineering")))),
+        React.createElement(Card, { ...args, size: "5", style: { width: 500 } },
+            React.createElement("div", { style: { display: 'flex', gap: 'var(--space-4)', alignItems: 'center' } },
+                React.createElement(Avatar, { size: "5", fallback: "T", color: "indigo" }),
+                React.createElement("div", null,
+                    React.createElement(Text, { as: "div", size: "4", weight: "bold" }, "Teodros Girmay"),
+                    React.createElement(Text, { as: "div", size: "4", color: "gray" }, "Engineering")))))),
+};
+export const Variant = {
+    args: {
+        children: React.createElement(CardContentExample, null),
+    },
+    render: ({ children, ...args }) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' } },
+        React.createElement(Card, { ...args, variant: "classic" }, children),
+        React.createElement(Card, { ...args, variant: "ghost" }, children),
+        React.createElement(Card, { ...args, variant: "surface" }, children))),
+};
+export const InsetContent = {
+    name: 'Inset Content',
+    render: (args) => (React.createElement(Card, { size: "2", style: { maxWidth: 240 }, ...args },
+        React.createElement(Inset, { clip: "padding-box", side: "top", pb: "current" },
+            React.createElement("img", { src: "https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80", alt: "Bold typography", style: {
+                    display: 'block',
+                    objectFit: 'cover',
+                    width: '100%',
+                    height: 140,
+                    backgroundColor: 'var(--gray-5)',
+                } })),
+        React.createElement(Text, { as: "p", size: "3" },
+            "Use ",
+            React.createElement(Code, null, '<Inset />'),
+            " component to align content flush with the sides of the card."))),
+};
+export const AsAnotherElement = {
+    name: 'As another element',
+    render: (args) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' } },
+        React.createElement("div", null,
+            React.createElement(Text, null,
+                "Use the ",
+                React.createElement(Code, null, "asChild"),
+                " prop to render the card as a link or a button. This prop adds styles for the interactive states, like hover and focus.")),
+        React.createElement("div", null,
+            React.createElement(Card, { ...args, asChild: true, style: { maxWidth: 350 } },
+                React.createElement("a", { href: "#" },
+                    React.createElement(CardContentExample, null)))))),
+};
+//# sourceMappingURL=card.stories.js.map

package/dist/esm/components/card/card.stories.js.map

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

package/dist/esm/components/card/index.d.ts

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

package/dist/esm/components/card/index.js

@@ -0,0 +1,3 @@
+export * from './card';
+export * from './card.props';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/card/index.js.map

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

package/dist/esm/components/checkbox/checkbox.d.ts

@@ -0,0 +1,13 @@
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { checkboxPropDefs } from './checkbox.props';
+import type { GetPropDefTypes, PropsWithoutColor } from '../../helpers';
+type CheckboxOwnProps = GetPropDefTypes<typeof checkboxPropDefs>;
+interface CheckboxProps extends PropsWithoutColor<typeof CheckboxPrimitive.Root>, CheckboxOwnProps {
+}
+declare const Checkbox: {
+    (props: CheckboxProps): React.JSX.Element;
+    displayName: string;
+};
+export { Checkbox };
+export type { CheckboxProps };

package/dist/esm/components/checkbox/checkbox.js

@@ -0,0 +1,50 @@
+'use client';
+import classNames from 'classnames';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { checkboxPropDefs } from './checkbox.props';
+const CheckboxCheckmarkIcon = ({ color = 'currentColor', size, ...props }) => {
+    switch (size) {
+        case '1':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", ...props },
+                React.createElement("path", { d: "M4 8.5L6.5 11L12 5.5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+        case '2':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", ...props },
+                React.createElement("path", { d: "M5 11L8 14L15 7", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+        case '3':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props },
+                React.createElement("path", { d: "M7 13L10 16L17 9", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+        default:
+            throw Error('Invalid size');
+    }
+};
+CheckboxCheckmarkIcon.displayName = 'CheckboxCheckmarkIcon';
+const CheckboxIndeterminateIcon = ({ color = 'currentColor', size, ...props }) => {
+    switch (size) {
+        case '1':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", ...props },
+                React.createElement("path", { d: "M5 8H11", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" })));
+        case '2':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", ...props },
+                React.createElement("path", { d: "M6 10H14", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" })));
+        case '3':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props },
+                React.createElement("path", { d: "M7 12H17", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" })));
+        default:
+            throw Error('Invalid size');
+    }
+};
+CheckboxIndeterminateIcon.displayName = 'CheckboxIndeterminateIcon';
+const Checkbox = (props) => {
+    const { children, className, style, size = checkboxPropDefs.size.default, color = checkboxPropDefs.color.default, highContrast = checkboxPropDefs.highContrast.default, ...checkboxProps } = props;
+    const Comp = children ? 'label' : 'span';
+    return (React.createElement(Comp, { className: classNames('fui-CheckboxRoot', className, `fui-r-size-${size}`), style: style },
+        React.createElement(CheckboxPrimitive.Root, { "data-accent-color": color, ...checkboxProps, className: classNames('fui-reset', 'fui-CheckboxButton', {
+                'fui-high-contrast': highContrast,
+            }) },
+            React.createElement(CheckboxPrimitive.Indicator, { className: "fui-CheckboxIndicator" }, checkboxProps.checked === 'indeterminate' ? (React.createElement(CheckboxIndeterminateIcon, { size: size, className: "fui-CheckboxIndicatorIcon" })) : (React.createElement(CheckboxCheckmarkIcon, { size: size, className: "fui-CheckboxIndicatorIcon" })))),
+        children));
+};
+Checkbox.displayName = 'Checkbox';
+export { Checkbox };
+//# sourceMappingURL=checkbox.js.map