@flipdish/ui-library 0.2.1

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

@@ -0,0 +1,111 @@
+import type { FC, ReactElement, ReactNode } from 'react';
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+export declare const styles: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        xs: {
+            root: string;
+            linkRoot: string;
+        };
+        sm: {
+            root: string;
+            linkRoot: string;
+        };
+        md: {
+            root: string;
+            linkRoot: string;
+        };
+        lg: {
+            root: string;
+            linkRoot: string;
+        };
+        xl: {
+            root: string;
+            linkRoot: string;
+        };
+    };
+    colors: {
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        tertiary: {
+            root: string;
+        };
+        'link-color': {
+            root: string;
+        };
+        'link-gray': {
+            root: string;
+        };
+        'primary-destructive': {
+            root: string;
+        };
+        'secondary-destructive': {
+            root: string;
+        };
+        'tertiary-destructive': {
+            root: string;
+        };
+        'link-destructive': {
+            root: string;
+        };
+    };
+};
+/**
+ * Common props shared between button and anchor variants
+ */
+export interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** Shows a loading spinner and disables the button */
+    isLoading?: boolean;
+    /** The size variant of the button */
+    size?: keyof typeof styles.sizes;
+    /** The color variant of the button */
+    color?: keyof typeof styles.colors;
+    /** Icon component or element to show before the text */
+    iconLeading?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Icon component or element to show after the text */
+    iconTrailing?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Removes horizontal padding from the text content */
+    noTextPadding?: boolean;
+    /** When true, keeps the text visible during loading state */
+    showTextWhileLoading?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Props for the button variant (non-link)
+ */
+export interface ButtonProps extends CommonProps, Omit<AriaButtonProps, 'children' | 'className'> {
+}
+/**
+ * Props for the link variant (anchor tag)
+ */
+export interface LinkProps extends CommonProps, Omit<AriaLinkProps, 'children' | 'className'> {
+    href: NonNullable<AriaLinkProps['href']>;
+}
+/** Union type of button and link props */
+export type Props = ButtonProps | LinkProps;
+/**
+ * Triggers an action or navigates to a destination. Renders as a native
+ * `<button>` by default, or as an `<a>` when an `href` prop is provided.
+ * For navigation-only actions, prefer a link styled with one of the `link-*` colors.
+ *
+ * @summary action trigger or navigation control
+ */
+export declare const Button: {
+    (props: LinkProps): ReactElement<LinkProps>;
+    (props: ButtonProps): ReactElement<ButtonProps>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGxG,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHjB,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACjC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;IACnC,wDAAwD;IACxD,WAAW,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IACrD,uDAAuD;IACvD,YAAY,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IACtD,uDAAuD;IACvD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6DAA6D;IAC7D,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,WAAW,CAAC;CAAG;AACpG;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,WAAW,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,WAAW,CAAC;IAC3F,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;CAC1C;AAED,0CAA0C;AAC1C,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,SAAS,CAAC;AAE5C;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAE;IACnB,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC5C,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC,WAAW,CAAC,CAAC;CAuFjD,CAAC"}

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

@@ -0,0 +1,161 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { sortCx, cx } from '@flipdish/ui-library/utilities/cx';
+import { isReactComponent } from '@flipdish/ui-library/utilities/isReactComponent';
+import { isValidElement } from 'react';
+import { Link, Button as Button$1 } from 'react-aria-components';
+
+const styles = sortCx({
+    common: {
+        root: [
+            'group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-brand transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2',
+            // When button is used within `InputGroup`
+            'in-data-input-wrapper:shadow-xs in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none',
+            // Disabled styles
+            'disabled:cursor-not-allowed disabled:opacity-50 in-data-input-wrapper:disabled:opacity-100',
+            // Same as `icon` but for SSR icons that cannot be passed to the client as functions.
+            '*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all',
+        ].join(' '),
+        icon: 'pointer-events-none size-5 shrink-0 transition-inherit-all',
+    },
+    sizes: {
+        xs: {
+            root: [
+                'gap-1 rounded-lg px-2.5 py-1.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2',
+                'in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5',
+                '*:data-icon:size-4 *:data-icon:stroke-[2.25px]',
+            ].join(' '),
+            linkRoot: 'gap-1 *:data-text:underline-offset-3',
+        },
+        sm: {
+            root: [
+                'gap-1 rounded-lg px-3 py-2 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2',
+                'in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5',
+            ].join(' '),
+            linkRoot: 'gap-1 *:data-text:underline-offset-3',
+        },
+        md: {
+            root: [
+                'gap-1 rounded-lg px-3.5 py-2.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2.5',
+                'in-data-input-wrapper:gap-1.5 in-data-input-wrapper:px-4 in-data-input-wrapper:text-md in-data-input-wrapper:data-icon-only:p-3',
+            ].join(' '),
+            linkRoot: 'gap-1 *:data-text:underline-offset-4',
+        },
+        lg: {
+            root: 'gap-1.5 rounded-lg px-4 py-2.5 text-md font-semibold before:rounded-[7px] data-icon-only:p-3',
+            linkRoot: 'gap-1.5 *:data-text:underline-offset-4',
+        },
+        xl: {
+            root: 'gap-1.5 rounded-lg px-4.5 py-3 text-md font-semibold before:rounded-[7px] data-icon-only:p-3.5',
+            linkRoot: 'gap-1.5 *:data-text:underline-offset-4',
+        },
+    },
+    colors: {
+        primary: {
+            root: [
+                'bg-brand-solid text-white shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset hover:bg-brand-solid_hover data-loading:bg-brand-solid_hover',
+                // Inner border gradient
+                'before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%',
+                // Icon styles
+                '*:data-icon:text-white/60 hover:*:data-icon:text-white/70',
+            ].join(' '),
+        },
+        secondary: {
+            root: [
+                'bg-primary text-secondary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover',
+                // Icon styles
+                '*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover',
+            ].join(' '),
+        },
+        tertiary: {
+            root: [
+                'text-tertiary hover:bg-primary_hover hover:text-tertiary_hover data-loading:bg-primary_hover',
+                // Icon styles
+                '*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover',
+            ].join(' '),
+        },
+        'link-color': {
+            root: [
+                'justify-normal rounded p-0! text-brand-secondary hover:text-brand-secondary_hover',
+                // Inner text underline
+                '*:data-text:underline *:data-text:decoration-transparent hover:*:data-text:decoration-fg-brand-secondary_alt',
+                // Icon styles
+                '*:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover',
+            ].join(' '),
+        },
+        'link-gray': {
+            root: [
+                'justify-normal rounded p-0! text-tertiary hover:text-tertiary_hover',
+                // Inner text underline
+                '*:data-text:underline *:data-text:decoration-transparent hover:*:data-text:decoration-fg-quaternary',
+                // Icon styles
+                '*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover',
+            ].join(' '),
+        },
+        'primary-destructive': {
+            root: [
+                'bg-error-solid text-white shadow-xs-skeuomorphic ring-1 ring-transparent outline-error ring-inset hover:bg-error-solid_hover data-loading:bg-error-solid_hover',
+                // Inner border gradient
+                'before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%',
+                // Icon styles
+                '*:data-icon:text-white/60 hover:*:data-icon:text-white/70',
+            ].join(' '),
+        },
+        'secondary-destructive': {
+            root: [
+                'bg-primary text-error-primary shadow-xs-skeuomorphic ring-1 ring-error_subtle outline-error ring-inset hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary',
+                // Icon styles
+                '*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary',
+            ].join(' '),
+        },
+        'tertiary-destructive': {
+            root: [
+                'text-error-primary outline-error hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary',
+                // Icon styles
+                '*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary',
+            ].join(' '),
+        },
+        'link-destructive': {
+            root: [
+                'justify-normal rounded p-0! text-error-primary outline-error hover:text-error-primary_hover',
+                // Inner text underline
+                '*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current',
+                // Icon styles
+                '*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary',
+            ].join(' '),
+        },
+    },
+});
+/**
+ * Triggers an action or navigates to a destination. Renders as a native
+ * `<button>` by default, or as an `<a>` when an `href` prop is provided.
+ * For navigation-only actions, prefer a link styled with one of the `link-*` colors.
+ *
+ * @summary action trigger or navigation control
+ */
+const Button = ({ size = 'sm', color = 'primary', children, className, noTextPadding, iconLeading: IconLeading, iconTrailing: IconTrailing, isDisabled: disabled, isLoading: loading, showTextWhileLoading, ...props }) => {
+    const href = 'href' in props ? props.href : undefined;
+    const hasChildren = children !== null && children !== undefined;
+    const isIcon = (IconLeading || IconTrailing) && !hasChildren;
+    const isLinkType = ['link-gray', 'link-color', 'link-destructive'].includes(color);
+    noTextPadding = isLinkType || noTextPadding;
+    const commonChildren = (jsxs(Fragment, { children: [isValidElement(IconLeading) && IconLeading, isReactComponent(IconLeading) && jsx(IconLeading, { "data-icon": "leading", className: styles.common.icon }), loading && (
+            // biome-ignore lint/a11y/noSvgWithoutTitle: This is an icon
+            jsxs("svg", { fill: "none", "data-icon": "loading", viewBox: "0 0 20 20", className: cx(styles.common.icon, !showTextWhileLoading && 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'), children: [jsx("circle", { className: "stroke-current opacity-30", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2" }), jsx("circle", { className: "origin-center animate-spin stroke-current", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2", strokeDasharray: "12.5 50", strokeLinecap: "round" })] })), hasChildren && (jsx("span", { "data-text": true, className: cx('transition-inherit-all', !noTextPadding && 'px-0.5'), children: children })), isValidElement(IconTrailing) && IconTrailing, isReactComponent(IconTrailing) && jsx(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })] }));
+    const commonProps = {
+        'data-loading': loading ? true : undefined,
+        'data-icon-only': isIcon ? true : undefined,
+        ...props,
+        isDisabled: disabled,
+        className: cx(styles.common.root, styles.sizes[size].root, styles.colors[color].root, isLinkType && styles.sizes[size].linkRoot, (loading || (href && (disabled || loading))) && 'pointer-events-none', 
+        // If in `loading` state, hide everything except the loading icon (and text if `showTextWhileLoading` is true).
+        loading && (showTextWhileLoading ? '[&>*:not([data-icon=loading]):not([data-text])]:hidden' : '[&>*:not([data-icon=loading])]:invisible'), className),
+        children: commonChildren,
+    };
+    if ('href' in commonProps) {
+        return jsx(Link, { ...commonProps, href: disabled ? undefined : href });
+    }
+    return jsx(Button$1, { ...commonProps, type: commonProps.type || 'button', isPending: loading });
+};
+
+export { Button, styles };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Button/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx","AriaLink","AriaButton"],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+
+const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = 'sm', isFocusVisible = false }) => {
+    return (jsxRuntime.jsxs("div", { className: cx.cx('relative flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', size === 'md' && 'size-5 rounded-md', (isSelected || isIndeterminate) && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !(isSelected || isIndeterminate) && 'bg-tertiary', isFocusVisible && 'outline-2 outline-offset-2 outline-focus-ring', className), children: [jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx.cx('pointer-events-none absolute h-3 w-2.5 text-fg-white opacity-0 transition-inherit-all', size === 'md' && 'size-3.5', isIndeterminate && 'opacity-100'), children: jsxRuntime.jsx("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx.cx('pointer-events-none absolute size-3 text-fg-white opacity-0 transition-inherit-all', size === 'md' && 'size-3.5', isSelected && !isIndeterminate && 'opacity-100'), children: jsxRuntime.jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+};
+CheckboxBase.displayName = 'CheckboxBase';
+const Checkbox = ({ label, hint, size = 'sm', className, ...ariaCheckboxProps }) => {
+    const sizes = {
+        sm: {
+            root: 'gap-2',
+            textWrapper: '',
+            label: 'text-sm font-medium',
+            hint: 'text-sm',
+        },
+        md: {
+            root: 'gap-3',
+            textWrapper: 'gap-0.5',
+            label: 'text-md font-medium',
+            hint: 'text-md',
+        },
+    };
+    return (jsxRuntime.jsx(reactAriaComponents.Checkbox, { ...ariaCheckboxProps, className: (state) => cx.cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
+                        // biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
+                        // biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
+                        jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', sizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
+};
+Checkbox.displayName = 'Checkbox';
+
+exports.Checkbox = Checkbox;
+exports.CheckboxBase = CheckboxBase;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","AriaCheckbox","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+import type { ReactNode, Ref } from 'react';
+import { type CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+export interface CheckboxBaseProps {
+    size?: 'sm' | 'md';
+    className?: string;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+}
+export declare const CheckboxBase: {
+    ({ className, isSelected, isDisabled, isIndeterminate, size, isFocusVisible }: CheckboxBaseProps): import("react").JSX.Element;
+    displayName: string;
+};
+interface CheckboxProps extends AriaCheckboxProps {
+    ref?: Ref<HTMLLabelElement>;
+    size?: 'sm' | 'md';
+    label?: ReactNode;
+    hint?: ReactNode;
+}
+export declare const Checkbox: {
+    ({ label, hint, size, className, ...ariaCheckboxProps }: CheckboxProps): import("react").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAA4B,KAAK,aAAa,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1G,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;mFAAiG,iBAAiB;;CAwC1I,CAAC;AAGF,UAAU,aAAc,SAAQ,iBAAiB;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ;6DAAmE,aAAa;;CAsDpG,CAAC"}

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

@@ -0,0 +1,32 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { Checkbox as Checkbox$1 } from 'react-aria-components';
+
+const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = 'sm', isFocusVisible = false }) => {
+    return (jsxs("div", { className: cx('relative flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', size === 'md' && 'size-5 rounded-md', (isSelected || isIndeterminate) && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !(isSelected || isIndeterminate) && 'bg-tertiary', isFocusVisible && 'outline-2 outline-offset-2 outline-focus-ring', className), children: [jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx('pointer-events-none absolute h-3 w-2.5 text-fg-white opacity-0 transition-inherit-all', size === 'md' && 'size-3.5', isIndeterminate && 'opacity-100'), children: jsx("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx('pointer-events-none absolute size-3 text-fg-white opacity-0 transition-inherit-all', size === 'md' && 'size-3.5', isSelected && !isIndeterminate && 'opacity-100'), children: jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+};
+CheckboxBase.displayName = 'CheckboxBase';
+const Checkbox = ({ label, hint, size = 'sm', className, ...ariaCheckboxProps }) => {
+    const sizes = {
+        sm: {
+            root: 'gap-2',
+            textWrapper: '',
+            label: 'text-sm font-medium',
+            hint: 'text-sm',
+        },
+        md: {
+            root: 'gap-3',
+            textWrapper: 'gap-0.5',
+            label: 'text-md font-medium',
+            hint: 'text-md',
+        },
+    };
+    return (jsx(Checkbox$1, { ...ariaCheckboxProps, className: (state) => cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
+                        // biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
+                        // biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
+                        jsx("span", { className: cx('text-tertiary', sizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
+};
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox, CheckboxBase };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaCheckbox","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+/**
+ * A thin rule that visually separates content. Renders a 1px line filled with the
+ * `border-secondary` token, stretching to fill its container on the cross axis.
+ * Uses a native `<hr>` (implicit `role="separator"`); `border-0` clears Preflight's
+ * default rule so the line is drawn via background colour instead.
+ */
+const Divider = ({ orientation = 'horizontal', className, ...props }) => {
+    return (jsxRuntime.jsx("hr", { "aria-orientation": orientation, className: cx.cx('shrink-0 border-0 bg-border-secondary', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className), ...props }));
+};
+
+exports.Divider = Divider;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Divider/index.tsx"],"sourcesContent":[null],"names":["_jsx","cx"],"mappings":";;;;;AAaA;;;;;AAKG;AACI,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,GAAG,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB,KAAI;AAC3F,IAAA,QACEA,cAAA,CAAA,IAAA,EAAA,EAAA,kBAAA,EACoB,WAAW,EAC7B,SAAS,EAAEC,KAAE,CAAC,uCAAuC,EAAE,WAAW,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAAE,SAAS,CAAC,EAAA,GAC3H,KAAK,EAAA,CACT;AAEN;;;;"}

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

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    /**
+     * The axis the divider is drawn along.
+     * @default "horizontal"
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * A thin rule that visually separates content. Renders a 1px line filled with the
+ * `border-secondary` token, stretching to fill its container on the cross axis.
+ * Uses a native `<hr>` (implicit `role="separator"`); `border-0` clears Preflight's
+ * default rule so the line is drawn via background colour instead.
+ */
+export declare const Divider: ({ orientation, className, ...props }: DividerProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Divider/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,YAAa,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1D;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAAI,sCAAqD,YAAY,gCAQxF,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+
+/**
+ * A thin rule that visually separates content. Renders a 1px line filled with the
+ * `border-secondary` token, stretching to fill its container on the cross axis.
+ * Uses a native `<hr>` (implicit `role="separator"`); `border-0` clears Preflight's
+ * default rule so the line is drawn via background colour instead.
+ */
+const Divider = ({ orientation = 'horizontal', className, ...props }) => {
+    return (jsx("hr", { "aria-orientation": orientation, className: cx('shrink-0 border-0 bg-border-secondary', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className), ...props }));
+};
+
+export { Divider };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Divider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAaA;;;;;AAKG;AACI,MAAM,OAAO,GAAG,CAAC,EAAE,WAAW,GAAG,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB,KAAI;AAC3F,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAA,kBAAA,EACoB,WAAW,EAC7B,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,WAAW,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAAE,SAAS,CAAC,EAAA,GAC3H,KAAK,EAAA,CACT;AAEN;;;;"}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const sizes = {
+    sm: {
+        wh: 8,
+        c: 4,
+        r: 2.5,
+    },
+    md: {
+        wh: 10,
+        c: 5,
+        r: 4,
+    },
+};
+/**
+ * Small filled circle used as a status or list marker, sized `sm` or `md`.
+ *
+ * @summary status/list marker dot
+ */
+const Dot = ({ size = 'md', ...props }) => {
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: this is an icon
+    jsxRuntime.jsx("svg", { width: sizes[size].wh, height: sizes[size].wh, viewBox: `0 0 ${sizes[size].wh} ${sizes[size].wh}`, fill: "none", ...props, children: jsxRuntime.jsx("circle", { cx: sizes[size].c, cy: sizes[size].c, r: sizes[size].r, fill: "currentColor", stroke: "currentColor" }) }));
+};
+
+exports.Dot = Dot;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Dot/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE;AACF,QAAA,EAAE,EAAE,CAAC;AACL,QAAA,CAAC,EAAE,CAAC;AACJ,QAAA,CAAC,EAAE,GAAG;AACP,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,EAAE,EAAE,EAAE;AACN,QAAA,CAAC,EAAE,CAAC;AACJ,QAAA,CAAC,EAAE,CAAC;AACL,KAAA;CACF;AAED;;;;AAIG;AACI,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAoD,KAAI;IACjG;;AAEE,IAAAA,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,CAAA,IAAA,EAAO,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAC,MAAM,EAAA,GAAK,KAAK,EAAA,QAAA,EAC3HA,2BAAQ,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,EAAA,CAAG,EAAA,CACxG;AAEV;;;;"}

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

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+/**
+ * Small filled circle used as a status or list marker, sized `sm` or `md`.
+ *
+ * @summary status/list marker dot
+ */
+export declare const Dot: ({ size, ...props }: SVGProps<SVGSVGElement> & {
+    size?: "sm" | "md";
+}) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Dot/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAetC;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,oBAA2B,QAAQ,CAAC,aAAa,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,gCAO9F,CAAC"}

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

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+
+const sizes = {
+    sm: {
+        wh: 8,
+        c: 4,
+        r: 2.5,
+    },
+    md: {
+        wh: 10,
+        c: 5,
+        r: 4,
+    },
+};
+/**
+ * Small filled circle used as a status or list marker, sized `sm` or `md`.
+ *
+ * @summary status/list marker dot
+ */
+const Dot = ({ size = 'md', ...props }) => {
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: this is an icon
+    jsx("svg", { width: sizes[size].wh, height: sizes[size].wh, viewBox: `0 0 ${sizes[size].wh} ${sizes[size].wh}`, fill: "none", ...props, children: jsx("circle", { cx: sizes[size].c, cy: sizes[size].c, r: sizes[size].r, fill: "currentColor", stroke: "currentColor" }) }));
+};
+
+export { Dot };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Dot/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;AAIA,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE;AACF,QAAA,EAAE,EAAE,CAAC;AACL,QAAA,CAAC,EAAE,CAAC;AACJ,QAAA,CAAC,EAAE,GAAG;AACP,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,EAAE,EAAE,EAAE;AACN,QAAA,CAAC,EAAE,CAAC;AACJ,QAAA,CAAC,EAAE,CAAC;AACL,KAAA;CACF;AAED;;;;AAIG;AACI,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAoD,KAAI;IACjG;;AAEE,IAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,CAAA,IAAA,EAAO,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAC,MAAM,EAAA,GAAK,KAAK,EAAA,QAAA,EAC3HA,gBAAQ,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,EAAA,CAAG,EAAA,CACxG;AAEV;;;;"}