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

package/dist/esm/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,45 @@
+'use client';
+import { useDateRangePicker } from '@react-aria/datepicker';
+import { useDateRangePickerState } from '@react-stately/datepicker';
+import classNames from 'classnames';
+import React, { useRef } from 'react';
+import { Popover } from '../';
+import { CalendarIcon } from '../../icons';
+import { RangeCalendar } from '../calendar';
+import { DateField } from '../date-field';
+import { datePickerPropDefs } from '../date-picker/date-picker.props';
+import { IconButton } from '../icon-button';
+export function DateRangePicker(props) {
+    const { className, ...otherProps } = props;
+    const { color = datePickerPropDefs.color.default, size = datePickerPropDefs.size.default, ...datePickerProps } = otherProps;
+    datePickerProps.onChange;
+    const state = useDateRangePickerState({
+        ...datePickerProps,
+        // shouldCloseOnSelect: false,
+    });
+    const ref = useRef(null);
+    const { groupProps, startFieldProps: { onChange: onStartChange, ...startFieldProps }, endFieldProps: { onChange: onEndChange, ...endFieldProps }, buttonProps: { isDisabled: isButtonDisabled, onPress: onButtonClick, ...otherButtonProps }, calendarProps, } = useDateRangePicker(props, state, ref);
+    return (React.createElement("div", { ...groupProps, ref: ref, className: classNames('fui-DateRangePickerRoot', className) },
+        React.createElement(DateField, { ...startFieldProps, color: color, size: size, 
+            // @ts-expect-error TODO: Aria onChange types exclude NULL which is wrong
+            onChange: onStartChange }),
+        React.createElement(DateField, { ...endFieldProps, color: color, size: size, 
+            // @ts-expect-error TODO: Aria onChange types exclude NULL which is wrong
+            onChange: onEndChange }),
+        React.createElement(Popover.Root, { open: state.isOpen, onOpenChange: (open) => state.setOpen(open) },
+            React.createElement(Popover.Trigger, null,
+                React.createElement(IconButton, { ...otherButtonProps, disabled: isButtonDisabled, 
+                    // @ts-expect-error fix mismatching onPress and onClick types
+                    onClick: onButtonClick, onKeyDown: (e) => {
+                        // Radix and Aria keyboard event handlers are clashing
+                        // when pressing space or enter on the button.
+                        // Stop propagation to avoid that.
+                        if (e.code === 'Space' || e.code === 'Enter') {
+                            e.stopPropagation();
+                        }
+                    }, size: size },
+                    React.createElement(CalendarIcon, { size: size }))),
+            React.createElement(Popover.Content, { variant: "translucent", align: "center" },
+                React.createElement(RangeCalendar, { ...calendarProps })))));
+}
+//# sourceMappingURL=date-range-picker.js.map

package/dist/esm/components/date-range-picker/date-range-picker.js.map

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

package/dist/esm/components/date-range-picker/date-range-picker.props.d.ts

@@ -0,0 +1 @@
+export { dateFieldPropDefs as dateRangePickerPropDefs } from '../date-field/date-field.props';

package/dist/esm/components/date-range-picker/date-range-picker.props.js

@@ -0,0 +1,2 @@
+export { dateFieldPropDefs as dateRangePickerPropDefs } from '../date-field/date-field.props';
+//# sourceMappingURL=date-range-picker.props.js.map

package/dist/esm/components/date-range-picker/date-range-picker.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.props.js","sourceRoot":"","sources":["../../../../src/components/date-range-picker/date-range-picker.props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/esm/components/date-range-picker/date-range-picker.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DateRangePicker } from '..';
+declare const meta: Meta<typeof DateRangePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Custom: Story;

package/dist/esm/components/date-range-picker/date-range-picker.stories.js

@@ -0,0 +1,140 @@
+import { getLocalTimeZone, parseDate } from '@internationalized/date';
+import { useDateFormatter } from '@react-aria/i18n';
+import React from 'react';
+import { Button, DateField, DateRangePicker, Inset, Popover, RangeCalendar, Separator, dateRangePickerPropDefs, } from '..';
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+    title: 'Controls/Dates/DateRangePicker',
+    component: DateRangePicker,
+    args: {
+        size: dateRangePickerPropDefs.size.default,
+        color: dateRangePickerPropDefs.color.default,
+        defaultValue: {
+            start: parseDate('2020-02-03'),
+            end: parseDate('2020-02-08'),
+        },
+        onChange: (date) => console.log(date ? date.start.toString() + ' - ' + date.end.toString() : date),
+        'aria-label': 'Birth date',
+        isDisabled: 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'],
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+    args: {},
+    render: (args) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' } },
+        React.createElement(DateRangePicker, { ...args }))),
+};
+export const Sizes = {
+    args: {},
+    render: (args) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' } },
+        React.createElement(DateRangePicker, { ...args, size: "1" }),
+        React.createElement(DateRangePicker, { ...args, size: "2" }),
+        React.createElement(DateRangePicker, { ...args, size: "3" }),
+        React.createElement(DateRangePicker, { ...args, size: "4" }))),
+};
+export const Custom = {
+    args: {},
+    render: () => {
+        const [date, setDate] = React.useState(null);
+        const [calendarDate, setCalendarDate] = React.useState(date || { start: null, end: null });
+        const [focusedDate, setFocusedDate] = React.useState();
+        const formatter = useDateFormatter({ dateStyle: 'medium' });
+        return (React.createElement("div", { style: { marginTop: -200 } },
+            React.createElement(Popover.Root, { defaultOpen: true, onOpenChange: (open) => {
+                    if (!open) {
+                        setCalendarDate(date || { start: null, end: null });
+                        setFocusedDate(date
+                            ? date.start
+                            : calendarDate.start
+                                ? calendarDate.start
+                                : calendarDate.end
+                                    ? calendarDate.end
+                                    : undefined);
+                    }
+                } },
+                React.createElement(Popover.Trigger, null,
+                    React.createElement(Button, { size: "3" },
+                        React.createElement(CalendarIcon, null),
+                        "Selected date:",
+                        ' ',
+                        date
+                            ? formatter.formatRange(date.start.toDate(getLocalTimeZone()), date.end.toDate(getLocalTimeZone()))
+                            : '--')),
+                React.createElement(Popover.Content, { variant: "translucent", align: "center", style: { minWidth: 'unset' } },
+                    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center' } },
+                        React.createElement("div", { style: {
+                                display: 'flex',
+                                marginBottom: 'var(--space-4)',
+                                gap: 'var(--space-3)',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                            } },
+                            React.createElement(DateField, { "aria-label": "Start date", value: calendarDate.start, onChange: (date) => {
+                                    setCalendarDate((state) => ({
+                                        ...state,
+                                        start: date || null,
+                                    }));
+                                    setFocusedDate(date || undefined);
+                                } }),
+                            React.createElement(ArrowRightIcon, null),
+                            React.createElement(DateField, { "aria-label": "End date", value: calendarDate.end, onChange: (date) => {
+                                    setCalendarDate((state) => ({
+                                        ...state,
+                                        end: date || null,
+                                    }));
+                                    setFocusedDate(date || undefined);
+                                } })),
+                        React.createElement(RangeCalendar, { value: calendarDate.start && calendarDate.end ? { start: calendarDate.start, end: calendarDate.end } : null, onChange: (value) => {
+                                if (value === null) {
+                                    setCalendarDate({ start: null, end: null });
+                                }
+                                else {
+                                    setCalendarDate({ start: value.start, end: value.end });
+                                }
+                            }, focusedValue: focusedDate, onFocusChange: setFocusedDate }),
+                        React.createElement("div", { style: { marginTop: 'var(--space-4)' } },
+                            React.createElement(Inset, { side: "x" },
+                                React.createElement(Separator, { size: "4" }))),
+                        React.createElement("div", { style: {
+                                display: 'flex',
+                                paddingTop: 'var(--space-4)',
+                                gap: 'var(--space-2)',
+                                justifyContent: 'space-between',
+                            } },
+                            React.createElement(Popover.Close, null,
+                                React.createElement(Button, { style: { flex: 1 } }, "Cancel")),
+                            React.createElement(Popover.Close, null,
+                                React.createElement(Button, { variant: "classic", style: { flex: 1 }, disabled: !calendarDate.start || !calendarDate.end, onClick: () => {
+                                        if (calendarDate.start && calendarDate.end) {
+                                            if (calendarDate.start.compare(calendarDate.end) <= 0) {
+                                                setDate({
+                                                    start: calendarDate.start,
+                                                    end: calendarDate.end,
+                                                });
+                                            }
+                                            else {
+                                                setDate({
+                                                    start: calendarDate.end,
+                                                    end: calendarDate.start,
+                                                });
+                                            }
+                                        }
+                                    } }, "Set"))))))));
+    },
+};
+const ArrowRightIcon = () => (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M0.75 6H11.25M11.25 6L7 1.75M11.25 6L7 10.25", stroke: "var(--gray-a10)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+const CalendarIcon = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("g", { clipPath: "url(#clip0_1869_102855)" },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 0C4.41421 0 4.75 0.335786 4.75 0.75V2H11.25V0.75C11.25 0.335786 11.5858 0 12 0C12.4142 0 12.75 0.335786 12.75 0.75V2.03304C14.5847 2.27749 16 3.84846 16 5.75V12.25C16 14.3211 14.3211 16 12.25 16H3.75C1.67893 16 0 14.3211 0 12.25V5.75C0 3.84846 1.41532 2.27749 3.25 2.03304V0.75C3.25 0.335786 3.58579 0 4 0ZM12 3.5H4H3.75C2.50736 3.5 1.5 4.50736 1.5 5.75V6H14.5V5.75C14.5 4.50736 13.4926 3.5 12.25 3.5H12ZM1.5 7.5V12.25C1.5 13.4926 2.50736 14.5 3.75 14.5H12.25C13.4926 14.5 14.5 13.4926 14.5 12.25V7.5H1.5Z", fill: "var(--gray-10)" })),
+    React.createElement("defs", null,
+        React.createElement("clipPath", { id: "clip0_1869_102855" },
+            React.createElement("rect", { width: "16", height: "16", fill: "var(--gray-10)" })))));
+//# sourceMappingURL=date-range-picker.stories.js.map

package/dist/esm/components/date-range-picker/date-range-picker.stories.js.map

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

package/dist/esm/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-range-picker';
+export * from './date-range-picker.props';

package/dist/esm/components/date-range-picker/index.js

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

package/dist/esm/components/date-range-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/date-range-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}

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

@@ -0,0 +1,41 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { Heading } from '../heading';
+import { Text } from '../text';
+import { dialogContentPropDefs } from './dialog.props';
+import type { ExtractPropsForTag, GetPropDefTypes } from '../../helpers';
+interface DialogRootProps extends Omit<React.ComponentProps<typeof DialogPrimitive.Root>, 'modal'> {
+}
+declare const DialogRoot: React.FC<DialogRootProps>;
+interface DialogTriggerProps extends Omit<React.ComponentProps<typeof DialogPrimitive.Trigger>, 'asChild'> {
+}
+declare const DialogTrigger: {
+    (props: DialogTriggerProps): React.JSX.Element;
+    displayName: string;
+};
+type DialogContentOwnProps = GetPropDefTypes<typeof dialogContentPropDefs>;
+interface DialogContentProps extends Omit<React.ComponentProps<typeof DialogPrimitive.Content>, 'asChild'>, DialogContentOwnProps {
+    container?: React.ComponentProps<typeof DialogPrimitive.Portal>['container'];
+}
+declare const DialogContent: {
+    (props: DialogContentProps): React.JSX.Element;
+    displayName: string;
+};
+type DialogTitleProps = React.ComponentProps<typeof Heading>;
+declare const DialogTitle: {
+    ({ size: sizeProp, className, ...props }: DialogTitleProps): React.JSX.Element;
+    displayName: string;
+};
+type DialogDescriptionProps = ExtractPropsForTag<typeof Text, 'p'>;
+declare const DialogDescription: {
+    ({ size: sizeProp, className, ...props }: DialogDescriptionProps): React.JSX.Element;
+    displayName: string;
+};
+interface DialogCloseProps extends Omit<React.ComponentProps<typeof DialogPrimitive.Close>, 'asChild'> {
+}
+declare const DialogClose: {
+    (props: DialogCloseProps): React.JSX.Element;
+    displayName: string;
+};
+export { DialogClose as Close, DialogContent as Content, DialogDescription as Description, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger, };
+export type { DialogCloseProps as CloseProps, DialogContentProps as ContentProps, DialogDescriptionProps as DescriptionProps, DialogRootProps as RootProps, DialogTitleProps as TitleProps, DialogTriggerProps as TriggerProps, };

package/dist/esm/components/dialog/dialog.js

@@ -0,0 +1,58 @@
+'use client';
+import classNames from 'classnames';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { Theme } from '../../theme';
+import { Heading } from '../heading';
+import { Text } from '../text';
+import { dialogContentPropDefs } from './dialog.props';
+const DialogRoot = (props) => React.createElement(DialogPrimitive.Root, { ...props, modal: true });
+DialogRoot.displayName = 'DialogRoot';
+const DialogTrigger = (props) => React.createElement(DialogPrimitive.Trigger, { ...props, asChild: true });
+DialogTrigger.displayName = 'DialogTrigger';
+const DialogContentContext = React.createContext({
+    size: dialogContentPropDefs.size.default,
+});
+const DialogContent = (props) => {
+    const { className, children, forceMount, container, size = dialogContentPropDefs.size.default, ...contentProps } = props;
+    return (React.createElement(DialogPrimitive.Portal, { container: container, forceMount: forceMount },
+        React.createElement(Theme, { asChild: true },
+            React.createElement(DialogPrimitive.Overlay, { className: "fui-DialogOverlay" },
+                React.createElement(DialogPrimitive.Content, { ...contentProps, className: classNames('fui-DialogContent', className, `fui-r-size-${size}`) },
+                    React.createElement(DialogContentContext.Provider, { value: React.useMemo(() => ({ size }), [size]) }, children))))));
+};
+DialogContent.displayName = 'DialogContent';
+const DialogTitle = ({ size: sizeProp, className, ...props }) => {
+    const { size: contextSize } = React.useContext(DialogContentContext);
+    let size;
+    if (contextSize) {
+        size = {
+            '1': '3',
+            '2': '5',
+            '3': '5',
+            '4': '6',
+        }[contextSize];
+    }
+    return (React.createElement(DialogPrimitive.Title, { asChild: true },
+        React.createElement(Heading, { size: sizeProp || size, trim: "start", className: classNames('fui-DialogTitle', className), ...props })));
+};
+DialogTitle.displayName = 'DialogTitle';
+const DialogDescription = ({ size: sizeProp, className, ...props }) => {
+    const { size: contextSize } = React.useContext(DialogContentContext);
+    let size;
+    if (contextSize) {
+        size = {
+            '1': '1',
+            '2': '2',
+            '3': '2',
+            '4': '3',
+        }[contextSize];
+    }
+    return (React.createElement(DialogPrimitive.Description, { asChild: true },
+        React.createElement(Text, { as: "p", size: sizeProp || size, className: classNames('fui-DialogDescription', className), ...props })));
+};
+DialogDescription.displayName = 'DialogDescription';
+const DialogClose = (props) => React.createElement(DialogPrimitive.Close, { ...props, asChild: true });
+DialogClose.displayName = 'DialogClose';
+export { DialogClose as Close, DialogContent as Content, DialogDescription as Description, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger, };
+//# sourceMappingURL=dialog.js.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.props.js","sourceRoot":"","sources":["../../../../src/components/dialog/dialog.props.ts"],"names":[],"mappings":"AAEA,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC;AAEnD,MAAM,qBAAqB,GAAG;IAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE;CAG3D,CAAC;AAEF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

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

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import { Dialog } from '..';
+declare const meta: {
+    title: string;
+    component: {
+        (props: Dialog.ContentProps): React.JSX.Element;
+        displayName: string;
+    };
+    args: {
+        size: "3";
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const InsetContent: Story;

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

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Badge, Button, Checkbox, Dialog, Inset, ScrollArea, Table, Text, TextField, dialogContentPropDefs } from '..';
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+    title: 'Components/Dialog',
+    component: Dialog.Content,
+    args: {
+        size: dialogContentPropDefs.size.default,
+    },
+    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 = {
+    render: (args) => (React.createElement(Dialog.Root, null,
+        React.createElement(Dialog.Trigger, null,
+            React.createElement(Button, null, "Edit profile")),
+        React.createElement(Dialog.Content, { style: { maxWidth: 450 }, ...args },
+            React.createElement(Dialog.Title, null, "Edit profile"),
+            React.createElement(Dialog.Description, null, "Make changes to your profile."),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' } },
+                React.createElement("label", null,
+                    React.createElement(Text, { as: "div", size: "2", style: { marginBottom: 4 }, weight: "bold" }, "Name"),
+                    React.createElement(TextField.Input, { defaultValue: "Freja Johnsen", placeholder: "Enter your full name" })),
+                React.createElement("label", null,
+                    React.createElement(Text, { as: "div", size: "2", style: { marginBottom: 4 }, weight: "bold" }, "Email"),
+                    React.createElement(TextField.Input, { defaultValue: "freja@example.com", placeholder: "Enter your email" }))),
+            React.createElement("div", { style: { display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-4)', justifyContent: 'flex-end' } },
+                React.createElement(Dialog.Close, null,
+                    React.createElement(Button, { variant: "soft", color: "gray", onClick: () => alert('Cancel') }, "Cancel")),
+                React.createElement(Dialog.Close, null,
+                    React.createElement(Button, { onClick: () => alert('Save') }, "Save")))))),
+};
+export const Sizes = {
+    render: (args) => (React.createElement("div", { style: { display: 'flex', gap: 'var(--space-4)' } },
+        React.createElement(Dialog.Root, null,
+            React.createElement(Dialog.Trigger, null,
+                React.createElement(Button, null, "Size 1")),
+            React.createElement(Dialog.Content, { style: { maxWidth: 350 }, ...args, size: "1" },
+                React.createElement(Dialog.Title, null, "Edit profile"),
+                React.createElement(Dialog.Description, null, "Make changes to your profile."),
+                React.createElement("div", { style: { display: 'flex', gap: 'var(--space-2)', justifyContent: 'flex-end' } },
+                    React.createElement(Dialog.Close, null,
+                        React.createElement(Button, { size: "1", variant: "soft", color: "gray", onClick: () => alert('Cancel') }, "Cancel")),
+                    React.createElement(Dialog.Close, null,
+                        React.createElement(Button, { size: "1", onClick: () => alert('Save'), variant: "classic" }, "Save"))))),
+        React.createElement(Dialog.Root, null,
+            React.createElement(Dialog.Trigger, null,
+                React.createElement(Button, null, "Size 2")),
+            React.createElement(Dialog.Content, { style: { maxWidth: 350 }, ...args, size: "2" },
+                React.createElement(Dialog.Title, null, "Edit profile"),
+                React.createElement(Dialog.Description, null, "Make changes to your profile."),
+                React.createElement("div", { style: { display: 'flex', gap: 'var(--space-2)', justifyContent: 'flex-end' } },
+                    React.createElement(Dialog.Close, null,
+                        React.createElement(Button, { size: "2", variant: "soft", color: "gray", onClick: () => alert('Cancel') }, "Cancel")),
+                    React.createElement(Dialog.Close, null,
+                        React.createElement(Button, { size: "2", onClick: () => alert('Save'), variant: "classic" }, "Save"))))),
+        React.createElement(Dialog.Root, null,
+            React.createElement(Dialog.Trigger, null,
+                React.createElement(Button, null, "Size 3")),
+            React.createElement(Dialog.Content, { style: { maxWidth: 350 }, ...args, size: "3" },
+                React.createElement(Dialog.Title, null, "Edit profile"),
+                React.createElement(Dialog.Description, null, "Make changes to your profile."),
+                React.createElement("div", { style: { display: 'flex', gap: 'var(--space-3)', justifyContent: 'flex-end' } },
+                    React.createElement(Dialog.Close, null,
+                        React.createElement(Button, { size: "2", variant: "soft", color: "gray", onClick: () => alert('Cancel') }, "Cancel")),
+                    React.createElement(Dialog.Close, null,
+                        React.createElement(Button, { size: "2", onClick: () => alert('Save'), variant: "classic" }, "Save"))))),
+        React.createElement(Dialog.Root, null,
+            React.createElement(Dialog.Trigger, null,
+                React.createElement(Button, null, "Size 4")),
+            React.createElement(Dialog.Content, { style: { maxWidth: 350 }, ...args, size: "4" },
+                React.createElement(Dialog.Title, null, "Edit profile"),
+                React.createElement(Dialog.Description, null, "Make changes to your profile."),
+                React.createElement("div", { style: { display: 'flex', gap: 'var(--space-3)', justifyContent: 'flex-end', alignItems: 'center' } },
+                    React.createElement(Dialog.Close, null,
+                        React.createElement(Button, { size: "3", variant: "soft", color: "gray", onClick: () => alert('Cancel') }, "Cancel")),
+                    React.createElement(Dialog.Close, null,
+                        React.createElement(Button, { size: "3", onClick: () => alert('Save'), variant: "classic" }, "Save"))))))),
+};
+export const InsetContent = {
+    name: 'With inset content',
+    render: (args) => (React.createElement(Dialog.Root, null,
+        React.createElement(Dialog.Trigger, null,
+            React.createElement(Button, null, "View users")),
+        React.createElement(Dialog.Content, { ...args },
+            React.createElement(Dialog.Title, null, "Users"),
+            React.createElement(Dialog.Description, null, "The following users have access to this project."),
+            React.createElement(Inset, { side: "x", style: { marginTop: 20 } },
+                React.createElement(Table.Root, { variant: "ghost", size: "1" },
+                    React.createElement(ScrollArea, { scrollbars: "horizontal" },
+                        React.createElement(Table.Table, null,
+                            React.createElement(Table.Header, null,
+                                React.createElement(Table.Row, null,
+                                    React.createElement(Table.ColumnHeaderCell, null,
+                                        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-3)' } },
+                                            React.createElement(Checkbox, null),
+                                            "Full name")),
+                                    React.createElement(Table.ColumnHeaderCell, null, "Email"),
+                                    React.createElement(Table.ColumnHeaderCell, null, "Group"))),
+                            React.createElement(Table.Body, null,
+                                React.createElement(Table.Row, null,
+                                    React.createElement(Table.RowHeaderCell, null,
+                                        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-3)' } },
+                                            React.createElement(Checkbox, null),
+                                            "Danilo Sousa")),
+                                    React.createElement(Table.Cell, null, "danilo@example.com"),
+                                    React.createElement(Table.Cell, null,
+                                        React.createElement(Badge, { color: "green" }, "Developer"))),
+                                React.createElement(Table.Row, null,
+                                    React.createElement(Table.RowHeaderCell, null,
+                                        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-3)' } },
+                                            React.createElement(Checkbox, null),
+                                            "Zahra Ambessa")),
+                                    React.createElement(Table.Cell, null, "zahra@example.com"),
+                                    React.createElement(Table.Cell, null,
+                                        React.createElement(Badge, { color: "amber" }, "Admin"))),
+                                React.createElement(Table.Row, null,
+                                    React.createElement(Table.RowHeaderCell, null,
+                                        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-3)' } },
+                                            React.createElement(Checkbox, null),
+                                            "Jasper Eriksson")),
+                                    React.createElement(Table.Cell, null, "jasper@example.com"),
+                                    React.createElement(Table.Cell, null,
+                                        React.createElement(Badge, { color: "green" }, "Developer"))))))))))),
+};
+//# sourceMappingURL=dialog.stories.js.map

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+import { Dialog as DrawerPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { Heading } from '../heading';
+interface DrawerRootProps extends Omit<React.ComponentProps<typeof DrawerPrimitive.Root>, 'modal'> {
+}
+declare const DrawerRoot: React.FC<DrawerRootProps>;
+interface DrawerTriggerProps extends Omit<React.ComponentProps<typeof DrawerPrimitive.Trigger>, 'asChild'> {
+}
+declare const DrawerTrigger: {
+    (props: DrawerTriggerProps): React.JSX.Element;
+    displayName: string;
+};
+interface DrawerContentProps extends Omit<React.ComponentProps<typeof DrawerPrimitive.Content>, 'asChild'> {
+    container?: React.ComponentProps<typeof DrawerPrimitive.Portal>['container'];
+}
+declare const DrawerContent: {
+    (props: DrawerContentProps): React.JSX.Element;
+    displayName: string;
+};
+type DrawerTitleProps = React.ComponentProps<typeof Heading>;
+declare const DrawerTitle: {
+    (props: DrawerTitleProps): React.JSX.Element;
+    displayName: string;
+};
+interface DrawerCloseProps extends Omit<React.ComponentProps<typeof DrawerPrimitive.Close>, 'asChild'> {
+}
+declare const DrawerClose: {
+    (props: DrawerCloseProps): React.JSX.Element;
+    displayName: string;
+};
+type DrawerStickyFooterProps = React.ComponentProps<'div'>;
+declare const DrawerStickyFooter: {
+    ({ children, className, ...props }: DrawerStickyFooterProps): React.JSX.Element;
+    displayName: string;
+};
+type DrawerHeaderProps = React.ComponentProps<'div'>;
+declare const DrawerHeader: {
+    ({ children, className, ...props }: DrawerHeaderProps): React.JSX.Element;
+    displayName: string;
+};
+type DrawerBodyProps = React.ComponentProps<'div'>;
+declare const DrawerBody: {
+    ({ children, className, ...props }: DrawerBodyProps): React.JSX.Element;
+    displayName: string;
+};
+export { DrawerBody as Body, DrawerClose as Close, DrawerContent as Content, DrawerHeader as Header, DrawerRoot as Root, DrawerStickyFooter as StickyFooter, DrawerTitle as Title, DrawerTrigger as Trigger, };
+export type { DrawerBodyProps as BodyProps, DrawerCloseProps as CloseProps, DrawerContentProps as ContentProps, DrawerHeaderProps as HeaderProps, DrawerRootProps as RootProps, DrawerStickyFooterProps as StickyFooterProps, DrawerTitleProps as TitleProps, DrawerTriggerProps as TriggerProps, };