thread-ui 0.5.0 → 0.6.0

package/dist/components/form-elements/dropdowns/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,UAAU,GAAG,GAAG,CAAC;IACtB,IAAI,EAAE;QACL,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,GAAG;QACb,MAAM,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;KACtC;IACD,QAAQ,EAAE;QACT,UAAU,EAAE;YACX,IAAI,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE;SACrC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,EAAE,EACF,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,qBAAqB,EACnC,IAAI,GACW,EAAE,EAAE;IACnB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAE5D,MAAM,YAAY,GAAG,CAAC,MAAsB,EAAE,EAAE;QAC/C,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvB,SAAS,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CACN,KAAC,YAAY,IACZ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAC1C,OAAO,EAAE,GAAG,EAAE;YACb,SAAS,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,EACD,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EACrD,UAAU,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,aAEC,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,EAAE,KAAK,EAAE,CAAC,EACvE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,YAElC,MAAM,CAAC,KAAK,IAJR,KAAK,CAKN,CACL,EACD,IAAI,EAAE,IAAI,GACT,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.types.d.ts

@@ -1,3 +1,5 @@
+import { UtilitySizeOptions } from '../../../../types';
+import { DropdownOption } from '../dropdown-base/dropdown-base.types';
 export type DropdownProps = {
     /** Dropdown ID */
     id?: string;
@@ -11,13 +13,6 @@ export type DropdownProps = {
     onSelect: (value: string | number) => void;
     /** Placeholder text shown when no value is selected @default 'Select an option...' */
     placeholder?: string;
-};
-/**
- * A single option in the Dropdown list.
- */
-export type DropdownOption = {
-    /** Display text shown in the list */
-    label: string;
-    /** Value passed to `onSelect` when this option is chosen */
-    value: string | number;
+    /** Size of Form Label @default `'md'`` */
+    size?: UtilitySizeOptions;
 };

package/dist/components/form-elements/dropdowns/dropdown/dropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.types.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown/dropdown.types.ts"],"names":[],"mappings":""}

package/dist/components/form-elements/dropdowns/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.d.ts

@@ -0,0 +1,8 @@
+import { DropdownBaseProps } from './dropdown-base.types';
+export declare const styles: {
+    container: string;
+    interior: string;
+    surfaceButton: string;
+    list: string;
+};
+export declare const DropdownBase: ({ id, title, isOpen, onClose, onToggle, triggerLabel, renderItem, options, listHeader, size, icon, }: DropdownBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { InputWrapper } from '../../input-wrapper';
+import { FormLabel } from '../../form-label';
+import { Icon } from '../../../../components/ui';
+import { css } from '../../../../styled-system/css';
+import { useClickOutside } from '../../../../hooks';
+import { getUtilityIconSize } from '../../../../utils';
+import { ConditionalWrapper, OptionalIconButton } from '../../../../internal-components';
+export const styles = {
+    container: css({
+        width: '100%',
+        color: 'text.standard',
+    }),
+    interior: css({
+        width: '100%',
+        position: 'relative',
+    }),
+    surfaceButton: css({
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    }),
+    list: css({
+        backgroundColor: 'background',
+        position: 'absolute',
+        width: 'fit-content',
+        minWidth: '75%',
+        borderWidth: 'md',
+        borderColor: 'structure',
+        borderRadius: 'md',
+        marginTop: '3',
+        boxShadow: 'lg',
+        zIndex: '10',
+        maxHeight: '60',
+        overflow: 'auto',
+    }),
+};
+export const DropdownBase = ({ id, title, isOpen, onClose, onToggle, triggerLabel, renderItem, options, listHeader, size = 'md', icon, }) => {
+    const listRef = useRef(null);
+    useClickOutside(listRef, isOpen, onClose, false);
+    return (_jsx("div", { id: id, className: styles.container, children: _jsxs(ConditionalWrapper, { wrapper: title ? InputWrapper : 'fragment', children: [title && _jsx(FormLabel, { size: size, name: title, title: title }), _jsxs("div", { className: styles.interior, children: [_jsxs(OptionalIconButton, { size: size, color: "neutral", onClick: onToggle, type: "button", name: icon, children: [triggerLabel, _jsx(Icon, { name: isOpen ? 'CaretUp' : 'CaretDown', size: getUtilityIconSize(size) })] }), isOpen && (_jsxs("ul", { className: styles.list, ref: listRef, children: [listHeader && _jsx("li", { children: listHeader }), options.map((option, index) => renderItem(option, index))] }))] })] }) }));
+};
+//# sourceMappingURL=dropdown-base.js.map

package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js.map

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

package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.d.ts

@@ -0,0 +1,25 @@
+import { IconNames } from '../../../../components/ui';
+import { UtilitySizeOptions } from '../../../../types';
+/**
+ * A single option in the Dropdown list.
+ */
+export type DropdownOption = {
+    /** Display text shown in the list */
+    label: string;
+    /** Value passed to `onSelect` when this option is chosen */
+    value: string | number;
+};
+export type DropdownBaseProps = {
+    id?: string;
+    title?: string;
+    placeholder?: string;
+    options: DropdownOption[];
+    isOpen: boolean;
+    onClose: () => void;
+    onToggle: () => void;
+    triggerLabel: string;
+    renderItem: (option: DropdownOption, index: number) => React.ReactNode;
+    listHeader?: React.ReactNode;
+    size?: UtilitySizeOptions;
+    icon?: IconNames;
+};

package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown-base.types.js.map

package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-base.types.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.ts"],"names":[],"mappings":""}

package/dist/components/form-elements/dropdowns/dropdown-base/index.d.ts

@@ -0,0 +1,2 @@
+export type { DropdownBaseProps } from './dropdown-base.types';
+export { DropdownBase } from './dropdown-base';

package/dist/components/form-elements/dropdowns/dropdown-base/index.js

@@ -0,0 +1,2 @@
+export { DropdownBase } from './dropdown-base';
+//# sourceMappingURL=index.js.map

package/dist/components/form-elements/dropdowns/dropdown-base/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/dropdown-base/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/form-elements/dropdowns/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropdown';
+export * from './multi-dropdown';

package/dist/components/form-elements/dropdowns/index.js

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

package/dist/components/form-elements/dropdowns/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form-elements/dropdowns/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/dist/components/form-elements/dropdowns/multi-dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export type { MultiDropdownProps } from './multi-dropdown.types';
+export { MultiDropdown } from './multi-dropdown';

package/dist/components/form-elements/dropdowns/multi-dropdown/index.js

@@ -0,0 +1,2 @@
+export { MultiDropdown } from './multi-dropdown';
+//# sourceMappingURL=index.js.map

package/dist/components/form-elements/dropdowns/multi-dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/multi-dropdown/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.d.ts

@@ -0,0 +1,15 @@
+import { MultiDropdownProps } from './multi-dropdown.types';
+/**
+ * Multi-select dropdown — stays open on selection, renders a count badge
+ * when values are active, and exposes a per-field clear.
+ *
+ * @example
+ * <MultiDropdown
+ *   title="Course"
+ *   options={[{ label: 'Main', value: 'main' }, { label: 'Dessert', value: 'dessert' }]}
+ *   values={selected}
+ *   onToggle={(val) => toggle(val)}
+ *   onClear={() => clear()}
+ * />
+ */
+export declare const MultiDropdown: ({ id, title, options, values, onToggle, onClear, size, icon, showLabel, }: MultiDropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cva, css } from '../../../../styled-system/css';
+import { DropdownBase } from '../dropdown-base/dropdown-base';
+import { Icon, IconButton } from '../../../../components/ui';
+const styles = {
+    itemStyles: cva({
+        base: {
+            cursor: 'pointer',
+            paddingX: '4',
+            paddingY: '2',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
+            _hover: { backgroundColor: 'surface' },
+        },
+        variants: {
+            isSelected: {
+                true: { backgroundColor: 'elevated' },
+            },
+        },
+    }),
+    headerStyles: css({
+        height: '5',
+        paddingX: 3,
+        display: 'flex',
+        flexDirection: 'row',
+    }),
+};
+/**
+ * Multi-select dropdown — stays open on selection, renders a count badge
+ * when values are active, and exposes a per-field clear.
+ *
+ * @example
+ * <MultiDropdown
+ *   title="Course"
+ *   options={[{ label: 'Main', value: 'main' }, { label: 'Dessert', value: 'dessert' }]}
+ *   values={selected}
+ *   onToggle={(val) => toggle(val)}
+ *   onClear={() => clear()}
+ * />
+ */
+export const MultiDropdown = ({ id, title, options, values, onToggle, onClear, size, icon, showLabel = true, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const placeholder = !showLabel && title ? title : 'Select...';
+    const triggerLabel = values.length === 0 ? placeholder : `${title ?? 'Selected'} (${values.length})`;
+    return (_jsx(DropdownBase, { id: id, title: showLabel ? title : undefined, options: options, isOpen: isOpen, onToggle: () => setIsOpen((prev) => !prev), onClose: () => {
+            setIsOpen(false);
+        }, listHeader: _jsx("div", { className: styles.headerStyles, children: values.length > 0 && (_jsx(IconButton, { onClick: onClear, color: "text", name: "X", text: true, size: "sm", children: "Clear" })) }), triggerLabel: triggerLabel, renderItem: (option, index) => {
+            const isSelected = values.includes(option.value);
+            return (_jsxs("li", { className: styles.itemStyles({ isSelected }), onClick: () => onToggle(option.value), children: [_jsx(Icon, { name: isSelected ? 'CheckSquare' : 'Square', size: 12 }), option.label] }, index));
+        }, size: size, icon: icon }));
+};
+//# sourceMappingURL=multi-dropdown.js.map

package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js.map

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

package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.d.ts

@@ -0,0 +1,25 @@
+import { DropdownOption } from '../dropdown-base/dropdown-base.types';
+import { UtilityColorOptions, UtilitySizeOptions } from '../../../../types';
+import { IconNames } from '../../../../components/ui';
+export type MultiDropdownProps = {
+    /** Defaults to `title` if not provided */
+    id?: string;
+    /** Label displayed on the dropdown trigger button */
+    title?: string;
+    /** List of selectable options */
+    options: DropdownOption[];
+    /** Currently selected values */
+    values: (string | number)[];
+    /** Called when an option is toggled on or off */
+    onToggle: (value: string | number) => void;
+    /** Called when all selected values are cleared */
+    onClear: () => void;
+    /** Icon displayed in the dropdown trigger button */
+    icon?: IconNames;
+    /** Color variant for the trigger button */
+    color?: UtilityColorOptions;
+    /** Size variant for the trigger button @default `'md'` */
+    size?: UtilitySizeOptions;
+    /** Shows the title label above the dropdown @default `true` */
+    showLabel?: boolean;
+};

package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=multi-dropdown.types.js.map

package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-dropdown.types.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.ts"],"names":[],"mappings":""}

package/dist/components/form-elements/form-label/form-label.d.ts

@@ -5,4 +5,4 @@ import { FormLabelProps } from './form-label.types';
  * @example
  * <FormLabel name="email" title="Email Address" />
  */
-export declare const FormLabel: ({ name, id, title }: FormLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormLabel: ({ name, id, title, size }: FormLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form-elements/form-label/form-label.js

@@ -1,18 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { css } from '../../../styled-system/css';
-import { H3 } from '../../../components/typography';
+import { cva } from '../../../styled-system/css';
+import { Text } from '../../../components/typography';
 /**
  * Form label linked to a control by `name`. Renders as an `H3` typographic style.
  *
  * @example
  * <FormLabel name="email" title="Email Address" />
  */
-export const FormLabel = ({ name, id = name, title }) => {
-    const styles = css({
-        display: 'block',
-        alignSelf: 'flex-start',
-        marginBottom: '2',
+export const FormLabel = ({ name, id = name, title, size = 'md' }) => {
+    const styles = cva({
+        base: {
+            display: 'block',
+            alignSelf: 'flex-start',
+        },
+        variants: {
+            size: {
+                sm: {
+                    marginBottom: '1',
+                },
+                md: {
+                    marginBottom: '1.5',
+                },
+                lg: {
+                    marginBottom: '2',
+                },
+            },
+        },
     });
-    return (_jsx("label", { id: id, htmlFor: name, className: styles, children: _jsx(H3, { children: title }) }));
+    const textSizeFromSizeProp = (() => {
+        switch (size) {
+            case 'sm':
+                return 'md';
+            case 'md':
+                return 'lg';
+            case 'lg':
+                return 'xl';
+            default:
+                return 'lg';
+        }
+    })();
+    return (_jsx("label", { id: id, htmlFor: name, className: styles({ size }), children: _jsx(Text, { bold: true, size: textSizeFromSizeProp, children: title }) }));
 };
 //# sourceMappingURL=form-label.js.map

package/dist/components/form-elements/form-label/form-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-label.js","sourceRoot":"","sources":["../../../../src/components/form-elements/form-label/form-label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI,EAAE,KAAK,EAAkB,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,GAAG,CAAC;QAClB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,YAAY;QACvB,YAAY,EAAE,GAAG;KACjB,CAAC,CAAC;IAEH,OAAO,CACN,gBAAO,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,YAC9C,KAAC,EAAE,cAAE,KAAK,GAAM,GACT,CACR,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"form-label.js","sourceRoot":"","sources":["../../../../src/components/form-elements/form-label/form-label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAO,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAM,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGnD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAkB,EAAE,EAAE;IACpF,MAAM,MAAM,GAAG,GAAG,CAAC;QAClB,IAAI,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,YAAY;SACvB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,KAAK;iBACnB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;aACD;SACD;KACD,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,CAAC,GAAG,EAAE;QAClC,QAAQ,IAAI,EAAE,CAAC;YACd,KAAK,IAAI;gBACR,OAAO,IAAI,CAAC;YACb,KAAK,IAAI;gBACR,OAAO,IAAI,CAAC;YACb,KAAK,IAAI;gBACR,OAAO,IAAI,CAAC;YACb;gBACC,OAAO,IAAI,CAAC;QACd,CAAC;IACF,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO,CACN,gBAAO,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,YACxD,KAAC,IAAI,IAAC,IAAI,QAAC,IAAI,EAAE,oBAAoB,YACnC,KAAK,GACA,GACA,CACR,CAAC;AACH,CAAC,CAAC"}

package/dist/components/form-elements/form-label/form-label.types.d.ts

@@ -1,3 +1,4 @@
+import { UtilitySizeOptions } from '../../../types';
 export type FormLabelProps = {
     /** Defaults to `name` if not provided */
     id?: string;
@@ -5,4 +6,6 @@ export type FormLabelProps = {
     name: string;
     /** Text displayed in the label */
     title?: string;
+    /** Label Size @default `'md'`` */
+    size?: UtilitySizeOptions;
 };

package/dist/components/form-elements/index.d.ts

@@ -1,5 +1,5 @@
+export * from './dropdowns';
+export * from './file-upload';
 export * from './form-label';
 export * from './number-input';
 export * from './text-input';
-export * from './file-upload';
-export * from './dropdown';

package/dist/components/form-elements/index.js

@@ -1,6 +1,6 @@
+export * from './dropdowns';
+export * from './file-upload';
 export * from './form-label';
 export * from './number-input';
 export * from './text-input';
-export * from './file-upload';
-export * from './dropdown';
 //# sourceMappingURL=index.js.map

package/dist/components/form-elements/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form-elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form-elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './form-elements';
+export * from './data-display';
 export * from './layouts';
 export * from './media';
 export * from './navigation';

package/dist/components/index.js

@@ -1,4 +1,5 @@
 export * from './form-elements';
+export * from './data-display';
 export * from './layouts';
 export * from './media';
 export * from './navigation';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,MAAM,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,MAAM,CAAC"}

package/dist/components/layouts/column-layout/column-layout.d.ts

@@ -11,4 +11,4 @@ import { ColumnLayoutProps } from './column-layout.types';
  *   items={[{ content: { src: '/img.jpg', alt: 'Example' }, title: 'Item' }]}
  * />
  */
-export declare const ColumnLayout: ({ title, caption, mdcol, lgcol, items, }: ColumnLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnLayout: ({ title, caption, mdcol, lgcol, items, container, }: ColumnLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layouts/column-layout/column-layout.js

@@ -3,6 +3,7 @@ import { renderImage } from '../../../internal-components';
 import { ColumnSkeleton } from './column-skeleton';
 import { H2, H3, Text } from '../../../components';
 import { css } from '../../../styled-system/css';
+import { LayoutWrapper } from '../layout-wrapper';
 /**
  * Responsive image grid with an optional title and caption.
  * Column count is controlled separately for medium and large viewports.
@@ -15,7 +16,7 @@ import { css } from '../../../styled-system/css';
  *   items={[{ content: { src: '/img.jpg', alt: 'Example' }, title: 'Item' }]}
  * />
  */
-export const ColumnLayout = ({ title, caption, mdcol, lgcol = mdcol, items, }) => {
+export const ColumnLayout = ({ title, caption, mdcol, lgcol = mdcol, items, container = true, }) => {
     const sectionStyles = css({
         width: '100%',
         marginRight: 'auto',
@@ -46,8 +47,8 @@ export const ColumnLayout = ({ title, caption, mdcol, lgcol = mdcol, items, }) =
         height: 'auto',
         borderRadius: '0.25rem',
     });
-    return (_jsxs("section", { className: sectionStyles, style: {
-            '--max-width': mdcol < 2 ? '800px' : 'none',
-        }, children: [(title || caption) && (_jsx("div", { children: title && (_jsx(_Fragment, { children: _jsxs(H2, { children: [title, caption && _jsx(Text, { children: caption })] }) })) })), _jsx(ColumnSkeleton, { mdcol: mdcol, lgcol: lgcol, children: items.map((item, index) => (_jsxs("div", { children: [_jsx("div", { className: gridItemStyles, children: renderImage(item.content, undefined, gridPhotoStyles) }), (item.title || item.description) && (_jsxs(_Fragment, { children: [item.title && _jsx(H3, { children: item.title }), item.description && _jsx(Text, { children: item.description })] }))] }, index))) })] }));
+    return (_jsx(LayoutWrapper, { container: container, children: _jsxs("section", { className: sectionStyles, style: {
+                '--max-width': mdcol < 2 ? '800px' : 'none',
+            }, children: [(title || caption) && (_jsx("div", { children: title && (_jsx(_Fragment, { children: _jsxs(H2, { children: [title, caption && _jsx(Text, { children: caption })] }) })) })), _jsx(ColumnSkeleton, { mdcol: mdcol, lgcol: lgcol, children: items.map((item, index) => (_jsxs("div", { children: [_jsx("div", { className: gridItemStyles, children: renderImage(item.content, undefined, gridPhotoStyles) }), (item.title || item.description) && (_jsxs(_Fragment, { children: [item.title && _jsx(H3, { children: item.title }), item.description && _jsx(Text, { children: item.description })] }))] }, item.key ?? index))) })] }) }));
 };
 //# sourceMappingURL=column-layout.js.map

package/dist/components/layouts/column-layout/column-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-layout.js","sourceRoot":"","sources":["../../../../src/components/layouts/column-layout/column-layout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,GAAG,KAAK,EACb,KAAK,GACc,EAAE,EAAE;IACvB,MAAM,aAAa,GAAG,GAAG,CAAC;QACzB,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE;YACT,IAAI,EAAE,MAAM;YACZ,EAAE,EAAE,wBAAwB;YAC5B,EAAE,EAAE,MAAM;SACV;QACD,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE;QACxD,aAAa,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE;QAC3D,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,QAAQ;QACxB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE;KACpC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,GAAG,CAAC;QAC1B,YAAY,EAAE,SAAS;QACvB,YAAY,EAAE,QAAQ;QACtB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAClB,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,GAAG,CAAC;QAC3B,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,SAAS;KACvB,CAAC,CAAC;IAEH,OAAO,CACN,mBACC,SAAS,EAAE,aAAa,EACxB,KAAK,EACJ;YACC,aAAa,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;SACpB,aAGxB,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,CACtB,wBACE,KAAK,IAAI,CACT,4BACC,MAAC,EAAE,eACD,KAAK,EACL,OAAO,IAAI,KAAC,IAAI,cAAE,OAAO,GAAQ,IAC9B,GACH,CACH,GACI,CACN,EACD,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,YACxC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,0BACC,cAAK,SAAS,EAAE,cAAc,YAC5B,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,eAAe,CAAC,GACjD,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACpC,8BACE,IAAI,CAAC,KAAK,IAAI,KAAC,EAAE,cAAE,IAAI,CAAC,KAAK,GAAM,EACnC,IAAI,CAAC,WAAW,IAAI,KAAC,IAAI,cAAE,IAAI,CAAC,WAAW,GAAQ,IAClD,CACH,KATQ,KAAK,CAUT,CACN,CAAC,GACc,IACR,CACV,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"column-layout.js","sourceRoot":"","sources":["../../../../src/components/layouts/column-layout/column-layout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,GAAG,KAAK,EACb,KAAK,EACL,SAAS,GAAG,IAAI,GACG,EAAE,EAAE;IACvB,MAAM,aAAa,GAAG,GAAG,CAAC;QACzB,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE;YACT,IAAI,EAAE,MAAM;YACZ,EAAE,EAAE,wBAAwB;YAC5B,EAAE,EAAE,MAAM;SACV;QACD,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE;QACxD,aAAa,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE;QAC3D,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,QAAQ;QACxB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE;KACpC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,GAAG,CAAC;QAC1B,YAAY,EAAE,SAAS;QACvB,YAAY,EAAE,QAAQ;QACtB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAClB,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,GAAG,CAAC;QAC3B,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,SAAS;KACvB,CAAC,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YAClC,mBACC,SAAS,EAAE,aAAa,EACxB,KAAK,EACJ;gBACC,aAAa,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;aACpB,aAGxB,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,CACtB,wBACE,KAAK,IAAI,CACT,4BACC,MAAC,EAAE,eACD,KAAK,EACL,OAAO,IAAI,KAAC,IAAI,cAAE,OAAO,GAAQ,IAC9B,GACH,CACH,GACI,CACN,EACD,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,YACxC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,0BACC,cAAK,SAAS,EAAE,cAAc,YAC5B,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,eAAe,CAAC,GACjD,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACpC,8BACE,IAAI,CAAC,KAAK,IAAI,KAAC,EAAE,cAAE,IAAI,CAAC,KAAK,GAAM,EACnC,IAAI,CAAC,WAAW,IAAI,KAAC,IAAI,cAAE,IAAI,CAAC,WAAW,GAAQ,IAClD,CACH,KATQ,IAAI,CAAC,GAAG,IAAI,KAAK,CAUrB,CACN,CAAC,GACc,IACR,GACK,CAChB,CAAC;AACH,CAAC,CAAC"}

package/dist/components/layouts/column-layout/column-layout.types.d.ts

@@ -1,5 +1,6 @@
 import { ImageProps } from '../../../types';
-export type ColumnLayoutProps = {
+import { LayoutComponentProps } from '../layout-component.types';
+export type ColumnLayoutProps = LayoutComponentProps & {
     /** Optional title displayed at the top of the layout */
     title?: string;
     /** Optional caption rendered alongside the title */
@@ -18,4 +19,6 @@ export type ColumnItem = {
     description?: string;
     /** Image to display in the column */
     content: ImageProps;
+    /** Optional key prop to ensure items render correctly */
+    key?: string;
 };

package/dist/components/layouts/container/container.d.ts

@@ -0,0 +1,11 @@
+import { ContainerProps } from './container.types';
+/**
+ * Layout container with a max-width, horizontal padding, and optional background color.
+ * Renders as `div` by default but can be swapped for `section`.
+ *
+ * @example
+ * <Container as="section" bgColor="surface">
+ *   <PageHeader title="About" />
+ * </Container>
+ */
+export declare const Container: ({ as: Tag, bgColor, children, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layouts/container/container.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva, cx } from '../../../styled-system/css';
+import { container } from '../../../styled-system/patterns';
+const styles = cva({
+    variants: {
+        bgColor: {
+            background: { backgroundColor: 'background' },
+            surface: { backgroundColor: 'surface' },
+            elevated: { backgroundColor: 'elevated' },
+        },
+    },
+    defaultVariants: {
+        bgColor: 'background',
+    },
+});
+/**
+ * Layout container with a max-width, horizontal padding, and optional background color.
+ * Renders as `div` by default but can be swapped for `section`.
+ *
+ * @example
+ * <Container as="section" bgColor="surface">
+ *   <PageHeader title="About" />
+ * </Container>
+ */
+export const Container = ({ as: Tag = 'div', bgColor = 'background', children, }) => {
+    return _jsx(Tag, { className: cx(styles({ bgColor }), container()), children: children });
+};
+//# sourceMappingURL=container.js.map

package/dist/components/layouts/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/layouts/container/container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,MAAM,MAAM,GAAG,GAAG,CAAC;IAClB,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,UAAU,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE;YAC7C,OAAO,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;YACvC,QAAQ,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE;SACzC;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,YAAY;KACrB;CACD,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACzB,EAAE,EAAE,GAAG,GAAG,KAAK,EACf,OAAO,GAAG,YAAY,EACtB,QAAQ,GACQ,EAAE,EAAE;IACpB,OAAO,KAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,YAAG,QAAQ,GAAO,CAAC;AAC/E,CAAC,CAAC"}

package/dist/components/layouts/container/container.types.d.ts

@@ -0,0 +1,11 @@
+import { SurfaceColorOptions } from '../../../types';
+import { JSX, ReactNode } from 'react';
+type BlockElements = Pick<JSX.IntrinsicElements, 'div' | 'section'>;
+export type ContainerProps = {
+    /** HTML element to render as @default `'div'` */
+    as?: keyof BlockElements;
+    /** Background color token @default `'background'` */
+    bgColor?: SurfaceColorOptions;
+    children: ReactNode;
+};
+export {};

package/dist/components/layouts/container/container.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=container.types.js.map

package/dist/components/layouts/container/container.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.types.js","sourceRoot":"","sources":["../../../../src/components/layouts/container/container.types.ts"],"names":[],"mappings":""}

package/dist/components/layouts/container/index.d.ts

@@ -0,0 +1,2 @@
+export type { ContainerProps } from './container.types';
+export { Container } from './container';

package/dist/components/layouts/container/index.js

@@ -0,0 +1,2 @@
+export { Container } from './container';
+//# sourceMappingURL=index.js.map

package/dist/components/layouts/container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layouts/container/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/layouts/index.d.ts

@@ -1,3 +1,4 @@
 export * from './column-layout';
+export * from './container';
 export * from './footer';
 export * from './masonry-layout';

package/dist/components/layouts/index.js

@@ -1,4 +1,5 @@
 export * from './column-layout';
+export * from './container';
 export * from './footer';
 export * from './masonry-layout';
 //# sourceMappingURL=index.js.map

package/dist/components/layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC"}

package/dist/components/layouts/layout-component.types.d.ts

@@ -0,0 +1,9 @@
+import type { BreakpointToken as PandaBreakpointToken } from '../../styled-system/tokens';
+import { ContainerProps } from './container';
+type BreakpointToken = PandaBreakpointToken | 'base';
+export type ResponsiveValue<T> = T | Partial<Record<BreakpointToken, T>>;
+export type LayoutComponentProps = {
+    /** Wraps the layout in a container */
+    container?: boolean | Omit<ContainerProps, 'children'>;
+};
+export {};

package/dist/components/layouts/layout-component.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layout-component.types.js.map

package/dist/components/layouts/layout-component.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-component.types.js","sourceRoot":"","sources":["../../../src/components/layouts/layout-component.types.ts"],"names":[],"mappings":""}

package/dist/components/layouts/layout-wrapper.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { LayoutComponentProps } from './layout-component.types';
+type LayoutWrapperProps = LayoutComponentProps & {
+    children: ReactNode;
+};
+export declare const LayoutWrapper: ({ container, children }: LayoutWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};