@flipdish/ui-library 0.2.2 → 0.3.1

package/dist/components/molecules/Tabs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["cx","createContext","useSlottedContext","TabsContext","_jsx","AriaTabList","AriaTabPanel","useContext","AriaTab","_jsxs","isValidElement","isReactComponent","Badge","AriaTabs"],"mappings":"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"}

package/dist/components/molecules/Tabs/index.d.ts

@@ -0,0 +1,62 @@
+import type { ComponentPropsWithRef, FC, ReactNode } from 'react';
+import type { TabListProps as AriaTabListProps, TabProps as AriaTabProps, TabRenderProps as AriaTabRenderProps } from 'react-aria-components';
+import { TabPanel as AriaTabPanel, Tabs as AriaTabs } from 'react-aria-components';
+type Orientation = 'horizontal' | 'vertical';
+type HorizontalTypes = 'button-brand' | 'button-gray' | 'button-border' | 'button-minimal' | 'underline';
+type VerticalTypes = 'button-brand' | 'button-gray' | 'button-border' | 'button-minimal' | 'line';
+type TabTypeColors<T> = T extends 'horizontal' ? HorizontalTypes : VerticalTypes;
+declare const sizes: {
+    sm: {
+        base: string;
+        'button-brand': string;
+        'button-gray': string;
+        'button-border': string;
+        'button-minimal': string;
+        underline: string;
+        line: string;
+    };
+    md: {
+        base: string;
+        'button-brand': string;
+        'button-gray': string;
+        'button-border': string;
+        'button-minimal': string;
+        underline: string;
+        line: string;
+    };
+};
+interface TabListComponentProps<T extends object, K extends Orientation> extends Omit<AriaTabListProps<T>, 'items'> {
+    /** The size of the tab list. */
+    size?: keyof typeof sizes;
+    /** The type of the tab list. */
+    type?: TabTypeColors<K>;
+    /** The orientation of the tab list. */
+    orientation?: K;
+    /** The items of the tab list. When provided, tabs are rendered automatically via the render function in children. */
+    items?: T[];
+    /** Whether the tab list is full width. */
+    fullWidth?: boolean;
+}
+export declare const TabList: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => import("react").JSX.Element;
+export declare const TabPanel: (props: ComponentPropsWithRef<typeof AriaTabPanel>) => import("react").JSX.Element;
+interface TabComponentProps extends AriaTabProps {
+    /** The label of the tab. */
+    label?: ReactNode;
+    /** The children of the tab. */
+    children?: ReactNode | ((props: AriaTabRenderProps) => ReactNode);
+    /** Icon component or element to show before the text */
+    icon?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** The badge displayed next to the label. */
+    badge?: number | string;
+}
+export declare const Tab: ({ label, children, badge, icon: Icon, className, ...otherProps }: TabComponentProps) => import("react").JSX.Element;
+export declare const Tabs: {
+    ({ className, ...props }: ComponentPropsWithRef<typeof AriaTabs>): import("react").JSX.Element;
+    Panel: (props: ComponentPropsWithRef<typeof AriaTabPanel>) => import("react").JSX.Element;
+    List: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => import("react").JSX.Element;
+    Item: ({ label, children, badge, icon: Icon, className, ...otherProps }: TabComponentProps) => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,QAAQ,IAAI,YAAY,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC9I,OAAO,EAGL,QAAQ,IAAI,YAAY,EACxB,IAAI,IAAI,QAAQ,EAGjB,MAAM,uBAAuB,CAAC;AAE/B,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAG7C,KAAK,eAAe,GAAG,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,gBAAgB,GAAG,WAAW,CAAC;AACzG,KAAK,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,gBAAgB,GAAG,MAAM,CAAC;AAClG,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,SAAS,YAAY,GAAG,eAAe,GAAG,aAAa,CAAC;AAqCjF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;CAmBV,CAAC;AAYF,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,WAAW,CAAE,SAAQ,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;IACjH,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB,qHAAqH;IACrH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAOD,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,EAAE,6FAQ5C,qBAAqB,CAAC,iBAAiB,EAAE,CAAC,CAAC,gCAiC7C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,qBAAqB,CAAC,OAAO,YAAY,CAAC,gCAYzE,CAAC;AAEF,UAAU,iBAAkB,SAAQ,YAAY;IAC9C,4BAA4B;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IAClE,wDAAwD;IACxD,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IAC9C,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,GAAG,GAAI,kEAAkE,iBAAiB,gCA6CtG,CAAC;AAEF,eAAO,MAAM,IAAI;8BAA6B,qBAAqB,CAAC,OAAO,QAAQ,CAAC;mBAxEpD,qBAAqB,CAAC,OAAO,YAAY,CAAC;WA3ClD,CAAC,SAAS,WAAW,+FAQ1C,qBAAqB,CAAC,iBAAiB,EAAE,CAAC,CAAC;6EA4DwC,iBAAiB;CAuDtG,CAAC"}

package/dist/components/molecules/Tabs/index.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Badge } from '@flipdish/ui-library/components/atoms/Badge';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { isReactComponent } from '@flipdish/ui-library/utilities/isReactComponent';
+import { createContext, useContext, isValidElement } from 'react';
+import { Tab as Tab$1, useSlottedContext, TabsContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1 } from 'react-aria-components';
+
+// Styles for different types of tab
+const getTabStyles = ({ isFocusVisible, isSelected, isHovered }) => ({
+    'button-brand': cx('outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'bg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover'),
+    'button-gray': cx('outline-focus-ring *:data-icon:text-fg-quaternary', isHovered && 'bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover', isFocusVisible && 'outline-2 -outline-offset-2', isSelected && 'bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover'),
+    'button-border': cx('outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'bg-primary_alt text-secondary shadow-sm *:data-icon:text-fg-secondary_hover'),
+    'button-minimal': cx('rounded-lg outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset *:data-icon:text-fg-secondary_hover'),
+    underline: cx('rounded-none border-b-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover'),
+    line: cx('rounded-none border-l-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover'),
+});
+const sizes = {
+    sm: {
+        base: 'text-sm font-semibold gap-1 *:data-icon:size-4',
+        'button-brand': 'py-2 px-2.5',
+        'button-gray': 'py-2 px-2.5',
+        'button-border': 'py-2 px-2.5',
+        'button-minimal': 'py-2 px-2.5',
+        underline: 'px-0.5 pb-2.5 pt-0',
+        line: 'pl-2.5 pr-3 py-0.5',
+    },
+    md: {
+        base: 'text-md font-semibold gap-1.5 *:data-icon:size-5',
+        'button-brand': 'py-2.5 px-2.5',
+        'button-gray': 'py-2.5 px-2.5',
+        'button-border': 'py-2.5 px-2.5',
+        'button-minimal': 'py-2.5 px-2.5',
+        underline: 'px-0.5 pb-2.5 pt-0',
+        line: 'pr-3.5 pl-3 py-1',
+    },
+};
+// Styles for different types of horizontal tabs
+const getHorizontalStyles = ({ size, fullWidth }) => ({
+    'button-brand': 'gap-1',
+    'button-gray': 'gap-1',
+    'button-border': cx('gap-1 rounded-[10px] bg-secondary_alt p-1 ring-1 ring-secondary ring-inset', size === 'md' && 'rounded-xl p-1.5'),
+    'button-minimal': 'gap-0.5 rounded-lg bg-secondary_alt ring-1 ring-inset ring-secondary',
+    underline: cx('gap-3', fullWidth && 'w-full gap-4'),
+    line: 'gap-2',
+});
+const TabListContext = createContext({
+    size: 'sm',
+    type: 'button-brand',
+});
+const TabList = ({ size = 'sm', type = 'button-brand', orientation: orientationProp, fullWidth, className, children, ...otherProps }) => {
+    const context = useSlottedContext(TabsContext);
+    const orientation = orientationProp ?? context?.orientation ?? 'horizontal';
+    return (jsx(TabListContext.Provider, { value: { size, type, orientation, fullWidth }, children: jsx(TabList$1, { ...otherProps, className: (state) => cx('group flex', getHorizontalStyles({
+                size,
+                fullWidth,
+            })[type], orientation === 'vertical' && 'w-max flex-col', 
+            // Only horizontal tabs with underline type have bottom border
+            orientation === 'horizontal' &&
+                type === 'underline' &&
+                'relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary', typeof className === 'function' ? className(state) : className), children: children ?? (otherProps.items ? (item) => jsx(Tab, { ...item, children: item.children }) : undefined) }) }));
+};
+const TabPanel = (props) => {
+    return (jsx(TabPanel$1, { ...props, className: (state) => cx('outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2', typeof props.className === 'function' ? props.className(state) : props.className) }));
+};
+const Tab = ({ label, children, badge, icon: Icon, className, ...otherProps }) => {
+    const { size = 'sm', type = 'button-brand', fullWidth } = useContext(TabListContext);
+    const showPillColorBadge = type === 'underline' || type === 'line' || type === 'button-brand';
+    return (jsx(Tab$1, { ...otherProps, className: (prop) => cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1', sizes[size].base, sizes[size][type], getTabStyles(prop)[type], typeof className === 'function' ? className(prop) : className), children: (state) => (jsxs(Fragment, { children: [isValidElement(Icon) && Icon, isReactComponent(Icon) && jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }), jsxs("span", { className: cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5'), children: [typeof children === 'function' ? children(state) : children || label, badge && (jsx(Badge, { size: "sm", type: showPillColorBadge ? 'pill-color' : 'modern', color: showPillColorBadge && (state.isHovered || state.isSelected) ? 'brand' : 'gray', className: cx('hidden transition-inherit-all md:flex', size === 'sm' && '-my-px'), children: badge }))] })] })) }));
+};
+const Tabs = ({ className, ...props }) => {
+    return (jsx(Tabs$1, { keyboardActivation: "manual", ...props, className: (state) => cx('flex w-full flex-col', typeof className === 'function' ? className(state) : className) }));
+};
+Tabs.Panel = TabPanel;
+Tabs.List = TabList;
+Tabs.Item = Tab;
+
+export { Tab, TabList, TabPanel, Tabs };
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaTabList","AriaTabPanel","AriaTab","_jsxs","AriaTabs"],"mappings":"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"}

package/dist/components/molecules/Tags/components/tag-checkbox.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = 'sm' }) => {
+    return (jsxRuntime.jsx("div", { className: cx.cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', size === 'sm' && 'size-3.5', size === 'md' && 'size-4', size === 'lg' && 'size-4.5', isSelected && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !isSelected && 'bg-tertiary', isFocused && '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 text-fg-white opacity-0 transition-inherit-all', size === 'sm' && 'size-2.5', size === 'md' && 'size-3', size === 'lg' && 'size-3.5', isSelected && 'opacity-100'), children: jsxRuntime.jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+};
+TagCheckbox.displayName = 'TagCheckbox';
+
+exports.TagCheckbox = TagCheckbox;
+//# sourceMappingURL=tag-checkbox.cjs.map

package/dist/components/molecules/Tags/components/tag-checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-checkbox.cjs","sources":["../../../../../src/components/molecules/Tags/components/tag-checkbox.tsx"],"sourcesContent":[null],"names":["_jsx","cx"],"mappings":";;;;;AAYO,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAoB,KAAI;IAC7G,QACEA,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,KAAE,CACX,mHAAmH,EACnH,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,IAAI,KAAK,IAAI,IAAI,QAAQ,EACzB,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,UAAU,IAAI,iCAAiC,EAC/C,UAAU,IAAI,+BAA+B,EAC7C,UAAU,IAAI,CAAC,UAAU,IAAI,aAAa,EAC1C,SAAS,IAAI,+CAA+C,EAC5D,SAAS,CACV,EAAA,QAAA,EAEDD,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAEC,KAAE,CACX,6EAA6E,EAC7E,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,IAAI,KAAK,IAAI,IAAI,QAAQ,EACzB,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,UAAU,IAAI,aAAa,CAC5B,EAAA,QAAA,EAEDD,cAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wCAAwC,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAA,CAAG,EAAA,CAClI,EAAA,CACF;AAEV;AACA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/components/molecules/Tags/components/tag-checkbox.d.ts

@@ -0,0 +1,13 @@
+interface TagCheckboxProps {
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+export declare const TagCheckbox: {
+    ({ className, isFocused, isSelected, isDisabled, size }: TagCheckboxProps): import("react").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=tag-checkbox.d.ts.map

package/dist/components/molecules/Tags/components/tag-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/tag-checkbox.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;6DAAmE,gBAAgB;;CA+B1G,CAAC"}

package/dist/components/molecules/Tags/components/tag-checkbox.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+
+const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = 'sm' }) => {
+    return (jsx("div", { className: cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', size === 'sm' && 'size-3.5', size === 'md' && 'size-4', size === 'lg' && 'size-4.5', isSelected && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !isSelected && 'bg-tertiary', isFocused && '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 text-fg-white opacity-0 transition-inherit-all', size === 'sm' && 'size-2.5', size === 'md' && 'size-3', size === 'lg' && 'size-3.5', isSelected && 'opacity-100'), children: jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+};
+TagCheckbox.displayName = 'TagCheckbox';
+
+export { TagCheckbox };
+//# sourceMappingURL=tag-checkbox.js.map

package/dist/components/molecules/Tags/components/tag-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-checkbox.js","sources":["../../../../../src/components/molecules/Tags/components/tag-checkbox.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAYO,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAoB,KAAI;IAC7G,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,mHAAmH,EACnH,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,IAAI,KAAK,IAAI,IAAI,QAAQ,EACzB,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,UAAU,IAAI,iCAAiC,EAC/C,UAAU,IAAI,+BAA+B,EAC7C,UAAU,IAAI,CAAC,UAAU,IAAI,aAAa,EAC1C,SAAS,IAAI,+CAA+C,EAC5D,SAAS,CACV,EAAA,QAAA,EAEDA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,CACX,6EAA6E,EAC7E,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,IAAI,KAAK,IAAI,IAAI,QAAQ,EACzB,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,UAAU,IAAI,aAAa,CAC5B,EAAA,QAAA,EAEDA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wCAAwC,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAA,CAAG,EAAA,CAClI,EAAA,CACF;AAEV;AACA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/components/molecules/Tags/components/tag-close-x.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+
+const styles = {
+    sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
+    md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
+    lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
+};
+const TagCloseX = ({ size = 'md', className, ...otherProps }) => {
+    return (jsxRuntime.jsx(reactAriaComponents.Button, { slot: "remove", "aria-label": "Remove this tag", className: cx.cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', styles[size].root, className), ...otherProps, children: jsxRuntime.jsx(uiIcons.XClose, { className: cx.cx('transition-inherit-all', styles[size].icon) }) }));
+};
+
+exports.TagCloseX = TagCloseX;
+//# sourceMappingURL=tag-close-x.cjs.map

package/dist/components/molecules/Tags/components/tag-close-x.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-close-x.cjs","sources":["../../../../../src/components/molecules/Tags/components/tag-close-x.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","cx","XClose"],"mappings":";;;;;;;AAYA,MAAM,MAAM,GAAG;IACb,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,yBAAyB,EAAE;IACtD,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,wBAAwB,EAAE;IACrD,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE;CAClD;AAEM,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,KAAI;IACrF,QACEA,eAACC,0BAAU,EAAA,EACT,IAAI,EAAC,QAAQ,gBACF,iBAAiB,EAC5B,SAAS,EAAEC,KAAE,CACX,wRAAwR,EACxR,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EACjB,SAAS,CACV,EAAA,GACG,UAAU,EAAA,QAAA,EAEdF,cAAA,CAACG,cAAM,EAAA,EAAC,SAAS,EAAED,KAAE,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAAA,CAC3D;AAEjB;;;;"}

package/dist/components/molecules/Tags/components/tag-close-x.d.ts

@@ -0,0 +1,9 @@
+import type { RefAttributes } from 'react';
+import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
+interface TagCloseXProps extends AriaButtonProps, RefAttributes<HTMLButtonElement> {
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare const TagCloseX: ({ size, className, ...otherProps }: TagCloseXProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=tag-close-x.d.ts.map

package/dist/components/molecules/Tags/components/tag-close-x.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-close-x.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/tag-close-x.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,UAAU,cAAe,SAAQ,eAAe,EAAE,aAAa,CAAC,iBAAiB,CAAC;IAChF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,eAAO,MAAM,SAAS,GAAI,oCAA2C,cAAc,gCAelF,CAAC"}

package/dist/components/molecules/Tags/components/tag-close-x.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { XClose } from '@flipdish/ui-icons';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { Button } from 'react-aria-components';
+
+const styles = {
+    sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
+    md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
+    lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
+};
+const TagCloseX = ({ size = 'md', className, ...otherProps }) => {
+    return (jsx(Button, { slot: "remove", "aria-label": "Remove this tag", className: cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', styles[size].root, className), ...otherProps, children: jsx(XClose, { className: cx('transition-inherit-all', styles[size].icon) }) }));
+};
+
+export { TagCloseX };
+//# sourceMappingURL=tag-close-x.js.map

package/dist/components/molecules/Tags/components/tag-close-x.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-close-x.js","sources":["../../../../../src/components/molecules/Tags/components/tag-close-x.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton"],"mappings":";;;;;AAYA,MAAM,MAAM,GAAG;IACb,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,yBAAyB,EAAE;IACtD,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,wBAAwB,EAAE;IACrD,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE;CAClD;AAEM,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,KAAI;IACrF,QACEA,IAACC,MAAU,EAAA,EACT,IAAI,EAAC,QAAQ,gBACF,iBAAiB,EAC5B,SAAS,EAAE,EAAE,CACX,wRAAwR,EACxR,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EACjB,SAAS,CACV,EAAA,GACG,UAAU,EAAA,QAAA,EAEdD,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAAA,CAC3D;AAEjB;;;;"}

package/dist/components/molecules/Tags/index.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Dot = require('@flipdish/ui-library/components/atoms/Dot');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var tagCheckbox = require('./components/tag-checkbox.cjs');
+var tagCloseX = require('./components/tag-close-x.cjs');
+
+const TagAvatar = ({ src, alt, contrastBorder = true, className }) => {
+    const [isFailed, setIsFailed] = React.useState(false);
+    return (jsxRuntime.jsx("div", { className: cx.cx('relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary', contrastBorder && 'outline-[0.5px] -outline-offset-[0.5px] outline-black/16', className), children: src && !isFailed ? (jsxRuntime.jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src: src, alt: alt, onError: () => setIsFailed(true) })) : (jsxRuntime.jsx(uiIcons.User01, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })) }));
+};
+const TagGroupContext = React.createContext({
+    selectionMode: 'none',
+    size: 'sm',
+});
+const TagGroup = ({ label, selectionMode = 'none', size = 'sm', children, ...otherProps }) => {
+    return (jsxRuntime.jsx(TagGroupContext.Provider, { value: { selectionMode, size }, children: jsxRuntime.jsx(reactAriaComponents.TagGroup, { "aria-label": label, selectionMode: selectionMode, disallowEmptySelection: selectionMode === 'single', ...otherProps, children: children }) }));
+};
+const TagList = reactAriaComponents.TagList;
+const styles = {
+    sm: {
+        root: {
+            base: 'px-2 py-0.75 text-xs font-medium',
+            withCheckbox: 'pl-1.25',
+            withAvatar: 'pl-1',
+            withDot: 'pl-1.5',
+            withCount: 'pr-1',
+            withClose: 'pr-1',
+        },
+        content: 'gap-1',
+        count: 'px-1 text-xs font-medium',
+    },
+    md: {
+        root: {
+            base: 'px-2.25 py-0.5 text-sm font-medium',
+            withCheckbox: 'pl-1',
+            withAvatar: 'pl-1.25',
+            withDot: 'pl-1.75',
+            withCount: 'pr-0.75',
+            withClose: 'pr-1',
+        },
+        content: 'gap-1.25',
+        count: 'px-1.25 text-xs font-medium',
+    },
+    lg: {
+        root: {
+            base: 'px-2.5 py-1 text-sm font-medium',
+            withCheckbox: 'pl-1.25',
+            withAvatar: 'pl-1.75',
+            withDot: 'pl-2.25',
+            withCount: 'pr-1',
+            withClose: 'pr-1',
+        },
+        content: 'gap-1.5',
+        count: 'px-1.5 text-sm font-medium',
+    },
+};
+const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotClassName, isDisabled, count, className, children, onClose, }) => {
+    const context = React.useContext(TagGroupContext);
+    const leadingContent = avatarSrc ? (jsxRuntime.jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsxRuntime.jsx(Dot.Dot, { className: cx.cx('text-fg-success-secondary', dotClassName), size: "sm" })) : null;
+    return (jsxRuntime.jsx(reactAriaComponents.Tag, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, className: (state) => cx.cx('flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2', styles[context.size].root.base, 
+        // With avatar
+        avatarSrc && styles[context.size].root.withAvatar, 
+        // With X button
+        (onClose || state.allowsRemoving) && styles[context.size].root.withClose, 
+        // With dot
+        dot && styles[context.size].root.withDot, 
+        // With count
+        typeof count === 'number' && styles[context.size].root.withCount, 
+        // With checkbox
+        context.selectionMode !== 'none' && styles[context.size].root.withCheckbox, 
+        // Disabled
+        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cx.cx('flex items-center gap-1', styles[context.size].content), children: [context.selectionMode !== 'none' && jsxRuntime.jsx(tagCheckbox.TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && (jsxRuntime.jsx("span", { className: cx.cx('flex items-center justify-center rounded-[3px] bg-tertiary text-center', styles[context.size].count), children: count }))] }), (onClose || allowsRemoving) && (jsxRuntime.jsx(tagCloseX.TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()) }))] })) }));
+};
+
+exports.Tag = Tag;
+exports.TagAvatar = TagAvatar;
+exports.TagGroup = TagGroup;
+exports.TagList = TagList;
+//# sourceMappingURL=index.cjs.map

package/dist/components/molecules/Tags/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Tags/index.tsx"],"sourcesContent":[null],"names":["useState","_jsx","cx","User01","createContext","AriaTagGroup","AriaTagList","useContext","Dot","AriaTag","_jsxs","TagCheckbox","TagCloseX"],"mappings":"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"}

package/dist/components/molecules/Tags/index.d.ts

@@ -0,0 +1,27 @@
+import { type ImgHTMLAttributes, type PropsWithChildren, type RefAttributes } from 'react';
+import { type TagGroupProps as AriaTagGroupProps, type TagProps as AriaTagProps } from 'react-aria-components';
+export declare const TagAvatar: ({ src, alt, contrastBorder, className }: ImgHTMLAttributes<HTMLImageElement> & {
+    contrastBorder?: boolean;
+}) => import("react").JSX.Element;
+export interface TagItem {
+    id: string;
+    label: string;
+    count?: number;
+    avatarSrc?: string;
+    avatarContrastBorder?: boolean;
+    dot?: boolean;
+    dotClassName?: string;
+    isDisabled?: boolean;
+    onClose?: (id: string) => void;
+}
+interface TagGroupProps extends AriaTagGroupProps, RefAttributes<HTMLDivElement> {
+    label: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const TagGroup: ({ label, selectionMode, size, children, ...otherProps }: TagGroupProps) => import("react").JSX.Element;
+export declare const TagList: <T>(props: import("react-aria-components").TagListProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+interface TagProps extends AriaTagProps, RefAttributes<object>, Omit<TagItem, 'label' | 'id'> {
+}
+export declare const Tag: ({ id, avatarSrc, avatarContrastBorder, dot, dotClassName, isDisabled, count, className, children, onClose, }: PropsWithChildren<TagProps>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/Tags/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tags/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAwB,MAAM,OAAO,CAAC;AAChI,OAAO,EAGL,KAAK,aAAa,IAAI,iBAAiB,EAEvC,KAAK,QAAQ,IAAI,YAAY,EAC9B,MAAM,uBAAuB,CAAC;AAI/B,eAAO,MAAM,SAAS,GAAI,yCAAgD,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAAE,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,gCAkB3I,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAUD,UAAU,aAAc,SAAQ,iBAAiB,EAAE,aAAa,CAAC,cAAc,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,GAAI,yDAAyE,aAAa,gCAQ9G,CAAC;AAEF,eAAO,MAAM,OAAO,oLAAc,CAAC;AAyCnC,UAAU,QAAS,SAAQ,YAAY,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAAG;AAEhG,eAAO,MAAM,GAAG,GAAI,8GAWjB,iBAAiB,CAAC,QAAQ,CAAC,gCA2D7B,CAAC"}

package/dist/components/molecules/Tags/index.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { User01 } from '@flipdish/ui-icons';
+import { Dot } from '@flipdish/ui-library/components/atoms/Dot';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { createContext, useContext, useState } from 'react';
+import { TagList as TagList$1, Tag as Tag$1, TagGroup as TagGroup$1 } from 'react-aria-components';
+import { TagCheckbox } from './components/tag-checkbox.js';
+import { TagCloseX } from './components/tag-close-x.js';
+
+const TagAvatar = ({ src, alt, contrastBorder = true, className }) => {
+    const [isFailed, setIsFailed] = useState(false);
+    return (jsx("div", { className: cx('relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary', contrastBorder && 'outline-[0.5px] -outline-offset-[0.5px] outline-black/16', className), children: src && !isFailed ? (jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src: src, alt: alt, onError: () => setIsFailed(true) })) : (jsx(User01, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })) }));
+};
+const TagGroupContext = createContext({
+    selectionMode: 'none',
+    size: 'sm',
+});
+const TagGroup = ({ label, selectionMode = 'none', size = 'sm', children, ...otherProps }) => {
+    return (jsx(TagGroupContext.Provider, { value: { selectionMode, size }, children: jsx(TagGroup$1, { "aria-label": label, selectionMode: selectionMode, disallowEmptySelection: selectionMode === 'single', ...otherProps, children: children }) }));
+};
+const TagList = TagList$1;
+const styles = {
+    sm: {
+        root: {
+            base: 'px-2 py-0.75 text-xs font-medium',
+            withCheckbox: 'pl-1.25',
+            withAvatar: 'pl-1',
+            withDot: 'pl-1.5',
+            withCount: 'pr-1',
+            withClose: 'pr-1',
+        },
+        content: 'gap-1',
+        count: 'px-1 text-xs font-medium',
+    },
+    md: {
+        root: {
+            base: 'px-2.25 py-0.5 text-sm font-medium',
+            withCheckbox: 'pl-1',
+            withAvatar: 'pl-1.25',
+            withDot: 'pl-1.75',
+            withCount: 'pr-0.75',
+            withClose: 'pr-1',
+        },
+        content: 'gap-1.25',
+        count: 'px-1.25 text-xs font-medium',
+    },
+    lg: {
+        root: {
+            base: 'px-2.5 py-1 text-sm font-medium',
+            withCheckbox: 'pl-1.25',
+            withAvatar: 'pl-1.75',
+            withDot: 'pl-2.25',
+            withCount: 'pr-1',
+            withClose: 'pr-1',
+        },
+        content: 'gap-1.5',
+        count: 'px-1.5 text-sm font-medium',
+    },
+};
+const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotClassName, isDisabled, count, className, children, onClose, }) => {
+    const context = useContext(TagGroupContext);
+    const leadingContent = avatarSrc ? (jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsx(Dot, { className: cx('text-fg-success-secondary', dotClassName), size: "sm" })) : null;
+    return (jsx(Tag$1, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, className: (state) => cx('flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2', styles[context.size].root.base, 
+        // With avatar
+        avatarSrc && styles[context.size].root.withAvatar, 
+        // With X button
+        (onClose || state.allowsRemoving) && styles[context.size].root.withClose, 
+        // With dot
+        dot && styles[context.size].root.withDot, 
+        // With count
+        typeof count === 'number' && styles[context.size].root.withCount, 
+        // With checkbox
+        context.selectionMode !== 'none' && styles[context.size].root.withCheckbox, 
+        // Disabled
+        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxs(Fragment, { children: [jsxs("div", { className: cx('flex items-center gap-1', styles[context.size].content), children: [context.selectionMode !== 'none' && jsx(TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && (jsx("span", { className: cx('flex items-center justify-center rounded-[3px] bg-tertiary text-center', styles[context.size].count), children: count }))] }), (onClose || allowsRemoving) && (jsx(TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()) }))] })) }));
+};
+
+export { Tag, TagAvatar, TagGroup, TagList };
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/Tags/index.js.map

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

package/dist/components/molecules/TextArea/index.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Input = require('@flipdish/ui-library/components/atoms/Input');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+
+// Creates a data URL for an SVG resize handle with a given color.
+const getResizeHandleBg = (color) => {
+    return `url(data:image/svg+xml;base64,${btoa(`<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L2 10" stroke="${color}" stroke-linecap="round"/><path d="M11 7L7 11" stroke="${color}" stroke-linecap="round"/></svg>`)})`;
+};
+const TextAreaBase = ({ className, size = 'md', ...props }) => {
+    return (jsxRuntime.jsx(reactAriaComponents.TextArea, { ...props, style: {
+            '--resize-handle-bg': getResizeHandleBg('#D5D7DA'),
+            '--resize-handle-bg-dark': getResizeHandleBg('#373A41'),
+        }, className: (state) => cx.cx('w-full scroll-py-3 rounded-lg bg-primary text-primary shadow-xs ring-1 ring-primary transition duration-100 ease-linear ring-inset placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden', size === 'sm' && 'p-3 text-sm', size === 'md' && 'px-3.5 py-3 text-md', 
+        // Resize handle
+        '[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)', state.isFocused && !state.isDisabled && 'ring-2 ring-brand', state.isDisabled && 'cursor-not-allowed opacity-50', state.isInvalid && 'ring-error_subtle', state.isInvalid && state.isFocused && 'ring-2 ring-error', typeof className === 'function' ? className(state) : className) }));
+};
+TextAreaBase.displayName = 'TextAreaBase';
+const TextArea = ({ label, hint, tooltip, textAreaRef, hideRequiredIndicator, textAreaClassName, placeholder, className, rows, cols, size = 'md', ...props }) => {
+    return (jsxRuntime.jsx(reactAriaComponents.TextField, { ...props, className: (state) => cx.cx('group flex h-max w-full flex-col items-start justify-start gap-1.5', typeof className === 'function' ? className(state) : className), children: ({ isInvalid, isRequired }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx(Input.Label, { isRequired: hideRequiredIndicator ? !hideRequiredIndicator : isRequired, tooltip: tooltip, children: label })), jsxRuntime.jsx(TextAreaBase, { placeholder: placeholder, className: textAreaClassName, ref: textAreaRef, rows: rows, cols: cols, size: size }), hint && (jsxRuntime.jsx(Input.HintText, { isInvalid: isInvalid, size: size, children: hint }))] })) }));
+};
+TextArea.displayName = 'TextArea';
+
+exports.TextArea = TextArea;
+exports.TextAreaBase = TextAreaBase;
+//# sourceMappingURL=index.cjs.map

package/dist/components/molecules/TextArea/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/TextArea/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaTextArea","cx","AriaTextField","_jsxs","_Fragment","Label","HintText"],"mappings":";;;;;;;AAQA;AACA,MAAM,iBAAiB,GAAG,CAAC,KAAa,KAAI;IAC1C,OAAO,CAAA,8BAAA,EAAiC,IAAI,CAAC,CAAA,4HAAA,EAA+H,KAAK,0DAA0D,KAAK,CAAA,gCAAA,CAAkC,CAAC,CAAA,CAAA,CAAG;AACxR,CAAC;AAOM,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAqB,KAAI;AACtF,IAAA,QACEA,cAAA,CAACC,4BAAY,OACP,KAAK,EACT,KAAK,EACH;AACE,YAAA,oBAAoB,EAAE,iBAAiB,CAAC,SAAS,CAAC;AAClD,YAAA,yBAAyB,EAAE,iBAAiB,CAAC,SAAS,CAAC;SACvC,EAEpB,SAAS,EAAE,CAAC,KAAK,KACfC,KAAE,CACA,gOAAgO,EAEhO,IAAI,KAAK,IAAI,IAAI,aAAa,EAC9B,IAAI,KAAK,IAAI,IAAI,qBAAqB;;QAGtC,iJAAiJ,EAEjJ,KAAK,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,mBAAmB,EAC3D,KAAK,CAAC,UAAU,IAAI,+BAA+B,EACnD,KAAK,CAAC,SAAS,IAAI,mBAAmB,EACtC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,mBAAmB,EAEzD,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAC/D,EAAA,CAEH;AAEN;AAEA,YAAY,CAAC,WAAW,GAAG,cAAc;AA2BlC,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,WAAW,EACX,qBAAqB,EACrB,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,GAAG,KAAK,EACO,KAAI;IACnB,QACEF,cAAA,CAACG,6BAAa,EAAA,EAAA,GACR,KAAK,EACT,SAAS,EAAE,CAAC,KAAK,KACfD,KAAE,CAAC,oEAAoE,EAAE,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,EAAA,QAAA,EAGzI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,MACzBE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACG,KAAK,KACJL,cAAA,CAACM,WAAK,EAAA,EAAC,UAAU,EAAE,qBAAqB,GAAG,CAAC,qBAAqB,GAAG,UAAU,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EAC7F,KAAK,EAAA,CACA,CACT,EAEDN,cAAA,CAAC,YAAY,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,EAE7H,IAAI,KACHA,cAAA,CAACO,cAAQ,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAA,QAAA,EACvC,IAAI,EAAA,CACI,CACZ,CAAA,EAAA,CACA,CACJ,EAAA,CACa;AAEpB;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;;"}

package/dist/components/molecules/TextArea/index.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode, Ref } from 'react';
+import type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+interface TextAreaBaseProps extends AriaTextAreaProps {
+    ref?: Ref<HTMLTextAreaElement>;
+    size?: 'sm' | 'md';
+}
+export declare const TextAreaBase: {
+    ({ className, size, ...props }: TextAreaBaseProps): import("react").JSX.Element;
+    displayName: string;
+};
+interface TextFieldProps extends AriaTextFieldProps {
+    /** Label text for the textarea */
+    label?: string;
+    /** Helper text displayed below the textarea */
+    hint?: ReactNode;
+    /** Tooltip message displayed after the label. */
+    tooltip?: string;
+    /** Textarea size. */
+    size?: TextAreaBaseProps['size'];
+    /** Class name for the textarea wrapper */
+    textAreaClassName?: TextAreaBaseProps['className'];
+    /** Ref for the textarea wrapper */
+    ref?: Ref<HTMLDivElement>;
+    /** Ref for the textarea */
+    textAreaRef?: TextAreaBaseProps['ref'];
+    /** Whether to hide required indicator from label. */
+    hideRequiredIndicator?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Visible height of textarea in rows . */
+    rows?: number;
+    /** Visible width of textarea in columns. */
+    cols?: number;
+}
+export declare const TextArea: {
+    ({ label, hint, tooltip, textAreaRef, hideRequiredIndicator, textAreaClassName, placeholder, className, rows, cols, size, ...props }: TextFieldProps): import("react").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/TextArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TextArea/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,IAAI,iBAAiB,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAQtH,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,YAAY;oCAA0C,iBAAiB;;CA8BnF,CAAC;AAIF,UAAU,cAAe,SAAQ,kBAAkB;IACjD,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACnD,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACvC,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,QAAQ;0IAalB,cAAc;;CA2BhB,CAAC"}