npm - thread-ui - Versions diffs - 0.2.0 → 0.4.0 - Mend

thread-ui 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (398) hide show

package/README.md CHANGED Viewed

@@ -1,30 +1,75 @@
 # Thread UI
-Thread is a UI Library I created for use in my [personal website](http://fisherandrew.org).
+Thread is a React component library I built to create my [personal website](https://fisherandrew.org). It's designed around a clean, token-based theme system with full SSR support, dark mode, and easy customization.
-# Get Started
+## Get Started
-All components work out of the box. Documentation coming soon to thread.fisherandrew.org
+All components work out of the box. Full documentation coming soon at thread.fisherandrew.org.
-# Features
-## SSR
+```bash
+npm install thread-ui
+```
-All CSS is pre-generated using `panda-css`, so most components can easily be rendered server-side.
+## Features
-## Custom Themes
+### Custom Themes
-Thread-UI supports custom themes created by the user that override the default theme, even when using SSR in Next.js. To implement a custom theme, simply wrap the application contents in the `ThemeProvider` Component. The provider can be configured with a partial of the `Theme` type, to allow you to customize as much or as little as you want!
+Thread supports custom themes that override the default design tokens, including when using SSR. Wrap your app in `ThemeProvider` and pass a partial `ThemeConfig` — customize as much or as little as you want.
-For Example:
+```tsx
+const customTheme: ThemeConfig = {
+	primary: {
+		light: '#4f46e5',
+		main: '#4338ca',
+		dark: '#3730a3',
+	},
+};
+return <ThemeProvider theme={customTheme}>{children}</ThemeProvider>;
 ```
-const ThreadTheme: ThemeConfig = {
-    primary: {
-        light: '#4f46e5',
-        main: '#4338ca',
-        dark: '#3730a3',
-    },
-};
-return <ThemeProvider theme={ThreadTheme}>{children}</ThemeProvider>;
+### Dark Mode
+Thread includes a built-in light/dark/system mode system. The `ThreadScript` component injects an inline script into your `<head>` that reads the user's saved preference from `localStorage` and sets `data-theme` on `:root` before the first paint — eliminating any flash of wrong-mode content.
+```tsx
+// Next.js App Router
+<html suppressHydrationWarning>
+	<head>
+		<ThreadScript defaultMode="system" />
+	</head>
+	<body>
+		<ThemeProvider>{children}</ThemeProvider>
+	</body>
+</html>
 ```
+### SSR Compatible
+Component CSS is pre-generated using Panda CSS, so components render correctly server-side without any runtime style injection. Most components are SSR compatible, and all work out of the box with `Next.js`.
+## Components
+### UI Elements
+`Button` `Card` `Divider` `Icon` `IconButton` `Modal` `Toggle`
+### Media Display
+`ImagePanel` `InfoCard` `MediaCard`
+### Typography Elements
+`Title` `H1` `H2` `H3` `Text` `Subtitle` `List` `OrderedList` `PageHeader`
+### Navigation Components
+`NavMenu` `SideNav`
+### Form Elements
+`Dropdown` `FileUpload` `FormLabel` `NumberInput` `TextInput`
+### Layout Components
+`ColumnLayout` `Footer` `MasonryLayout`

package/dist/components/form-elements/dropdown/dropdown.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { DropdownProps } from './dropdown.types';
+/**
+ * Single-select dropdown with an option list and outside-click dismissal.
+ *
+ * @example
+ * <Dropdown
+ *   title="Status"
+ *   value={status}
+ *   options={[{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }]}
+ *   onSelect={(val) => setStatus(val)}
+ * />
+ */
+export declare const Dropdown: ({ id, title, value, options, onSelect, placeholder, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/components/form-elements/dropdown/dropdown.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/form-elements/dropdown/dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,GAAI,uDAOtB,aAAa,4CAgGf,CAAC"}

package/dist/components/form-elements/dropdown/dropdown.js ADDED Viewed

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { InputWrapper } from '../input-wrapper';
+import { FormLabel } from '../form-label';
+import { Icon } from '../../../components/ui';
+import { css, cva, cx } from '../../../styled-system/css';
+import { baseInputStyles } from '../styles';
+import { useOutsideCloseClick } from '../../../utils';
+/**
+ * Single-select dropdown with an option list and outside-click dismissal.
+ *
+ * @example
+ * <Dropdown
+ *   title="Status"
+ *   value={status}
+ *   options={[{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }]}
+ *   onSelect={(val) => setStatus(val)}
+ * />
+ */
+export const Dropdown = ({ id, title, value, options, onSelect, placeholder = 'Select an option...', }) => {
+    // UI State Controls
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    // Map Value to Dropdown Option
+    const selected = options.find((opt) => opt.value === value);
+    // User Actions
+    const handleSelect = (option) => {
+        onSelect(option.value);
+        setIsOpen(false);
+    };
+    const toggleDropdown = () => setIsOpen(!isOpen);
+    useOutsideCloseClick(true, dropdownRef, isOpen, () => setIsOpen(false));
+    // Styles
+    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: '100%',
+            borderWidth: 'md',
+            borderColor: 'structure',
+            borderRadius: 'md',
+            marginTop: '1',
+            boxShadow: 'lg',
+            zIndex: '10',
+            maxHeight: '60',
+            overflow: 'auto',
+        }),
+        item: cva({
+            base: {
+                cursor: 'pointer',
+                paddingX: '4',
+                paddingY: '2',
+                _hover: { backgroundColor: 'surface' },
+            },
+            variants: {
+                isSelected: {
+                    true: {
+                        backgroundColor: 'elevated',
+                    },
+                },
+            },
+        }),
+    };
+    return (_jsx("div", { id: id, className: styles.container, children: _jsxs(InputWrapper, { children: [title && _jsx(FormLabel, { name: title, title: title }), _jsxs("div", { className: styles.interior, children: [_jsxs("button", { className: cx(styles.surfaceButton, baseInputStyles({ alt: true })), onClick: toggleDropdown, type: "button", children: [_jsx("span", { children: selected ? selected.label : placeholder }), _jsx(Icon, { name: isOpen ? 'CaretUp' : 'CaretDown', size: 16, color: "black" })] }), isOpen && (_jsx("ul", { className: styles.list, ref: dropdownRef, children: options.map((option, index) => (_jsx("li", { className: styles.item({
+                                    isSelected: option.value === selected?.value,
+                                }), onClick: () => handleSelect(option), children: option.label }, index))) }))] })] }) }));
+};
+//# sourceMappingURL=dropdown.js.map

package/dist/components/form-elements/dropdown/dropdown.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../src/components/form-elements/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,EAAE,EACF,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,qBAAqB,GACpB,EAAE,EAAE;IACnB,oBAAoB;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEnD,+BAA+B;IAC/B,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAE5D,eAAe;IACf,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,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAEhD,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAExE,SAAS;IACT,MAAM,MAAM,GAAG;QACd,SAAS,EAAE,GAAG,CAAC;YACd,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,eAAe;SACtB,CAAC;QACF,QAAQ,EAAE,GAAG,CAAC;YACb,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,UAAU;SACpB,CAAC;QACF,aAAa,EAAE,GAAG,CAAC;YAClB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,eAAe;YAC/B,UAAU,EAAE,QAAQ;SACpB,CAAC;QACF,IAAI,EAAE,GAAG,CAAC;YACT,eAAe,EAAE,YAAY;YAC7B,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,WAAW;YACxB,YAAY,EAAE,IAAI;YAClB,SAAS,EAAE,GAAG;YACd,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,MAAM;SAChB,CAAC;QACF,IAAI,EAAE,GAAG,CAAC;YACT,IAAI,EAAE;gBACL,MAAM,EAAE,SAAS;gBACjB,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;aACtC;YACD,QAAQ,EAAE;gBACT,UAAU,EAAE;oBACX,IAAI,EAAE;wBACL,eAAe,EAAE,UAAU;qBAC3B;iBACD;aACD;SACD,CAAC;KACF,CAAC;IAEF,OAAO,CACN,cAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,YACvC,MAAC,YAAY,eACX,KAAK,IAAI,KAAC,SAAS,IAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,EAClD,eAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,aAC9B,kBACC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,eAAe,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,EACnE,OAAO,EAAE,cAAc,EACvB,IAAI,EAAC,QAAQ,aAEb,yBAAO,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,GAAQ,EACtD,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG,IAChE,EACR,MAAM,IAAI,CACV,aAAI,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,YAC1C,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,aAEC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC;oCACtB,UAAU,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,EAAE,KAAK;iCAC5C,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,YAElC,MAAM,CAAC,KAAK,IANR,KAAK,CAON,CACL,CAAC,GACE,CACL,IACI,IACQ,GACV,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/form-elements/dropdown/dropdown.types.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+export type DropdownProps = {
+    /** Dropdown ID */
+    id?: string;
+    /** Optional title rendered above the dropdown */
+    title?: string;
+    /** Currently selected value — matched against `options` to display the selected label */
+    value?: string | number | null;
+    /** List of options to display */
+    options: DropdownOption[];
+    /** Called with the selected option's value when the user makes a selection */
+    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;
+};
+//# sourceMappingURL=dropdown.types.d.ts.map

package/dist/components/form-elements/dropdown/dropdown.types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown.types.d.ts","sourceRoot":"","sources":["../../../../src/components/form-elements/dropdown/dropdown.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC3B,kBAAkB;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,iCAAiC;IACjC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC"}

package/dist/components/form-elements/dropdown/dropdown.types.js ADDED Viewed

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

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

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

package/dist/components/form-elements/dropdown/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export type { DropdownProps } from './dropdown.types';
+export { Dropdown } from './dropdown';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form-elements/dropdown/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form-elements/dropdown/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/form-elements/dropdown/index.js ADDED Viewed

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

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

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

package/dist/components/form-elements/file-upload/components/file-input.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const FileInput: () => import("react/jsx-runtime").JSX.Element \| undefined;
2	+ //# sourceMappingURL=file-input.d.ts.map

package/dist/components/form-elements/file-upload/components/file-input.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/form-elements/file-upload/components/file-input.tsx"],"names":[],"mappings":"AA8DA,eAAO,MAAM,SAAS,2DA0FrB,CAAC"}

package/dist/components/form-elements/file-upload/components/file-input.js ADDED Viewed

@@ -0,0 +1,93 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { Icon } from '../../../../components/ui';
+import { useFileUploadContext } from '../file-upload-context';
+import { css, cva, cx } from '../../../../styled-system/css';
+import { Text } from '../../../../components/typography';
+// Styles
+const styles = {
+    dropzone: cva({
+        base: {
+            border: '2px dashed',
+            mx: 'auto',
+            rounded: 'lg',
+            textAlign: 'center',
+            display: 'flex',
+            alignItems: 'center',
+            borderColor: 'gray.300',
+        },
+        variants: {
+            size: {
+                sm: { flexDirection: 'row', justifyContent: 'center', gap: '7', p: '3' },
+                md: { flexDirection: 'row', justifyContent: 'center', gap: '7', p: '8' },
+                lg: { flexDirection: 'column', p: '8' },
+            },
+        },
+    }),
+    isDragging: css({ borderColor: 'blue.500', bg: 'surface' }),
+    contents: cva({
+        base: {
+            display: 'flex',
+            gap: '2',
+            flexDirection: 'column',
+            alignItems: 'center',
+        },
+        variants: {
+            size: {
+                sm: { flexDirection: 'row' },
+                md: {},
+                lg: {},
+            },
+        },
+    }),
+    button: cva({
+        base: {
+            color: 'info.main',
+            cursor: 'pointer',
+            _hover: { textDecoration: 'underline' },
+        },
+        variants: {
+            size: {
+                sm: { fontSize: 'xs' },
+                md: {},
+                lg: {},
+            },
+        },
+    }),
+    input: css({
+        display: 'none',
+    }),
+};
+export const FileInput = () => {
+    // Extract Context
+    const { id, name, allowedFileTypes, value, maxNumberFiles, isDragging, required, setIsDragging, size, status, supportedFormatsText, processFile, } = useFileUploadContext();
+    const fileInputRef = useRef(null);
+    // Drag UI Reactions
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        const file = e.dataTransfer.files[0];
+        processFile(file);
+    }, []);
+    const handleFileUpload = (e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            processFile(file);
+        }
+    };
+    // If Maximum FIles Reached, return empty
+    if (maxNumberFiles !== undefined && value.length >= maxNumberFiles) {
+        return;
+    }
+    return (_jsxs("div", { className: cx(styles.dropzone({ size }), isDragging && styles.isDragging), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx(Icon, { name: "UploadSimple", size: size === 'sm' ? 24 : 48, color: "gray" }), _jsxs("div", { className: styles.contents({ size }), children: [_jsxs("span", { children: [!(size === 'sm') && _jsx(Text, { align: "center", children: "Drag and drop your file here" }), supportedFormatsText && (_jsx(Text, { align: "center", color: "text-secondary", size: "xxs", children: supportedFormatsText })), status && (_jsx(Text, { align: "center", color: "error", size: "xxs", children: status }))] }), _jsx("input", { type: "file", id: id, name: name, className: styles.input, accept: allowedFileTypes?.join(','), onChange: handleFileUpload, required: required, ref: fileInputRef }), _jsx("button", { className: styles.button({ size }), type: "button", onClick: () => fileInputRef.current?.click(), children: "Select a File" })] })] }));
+};
+//# sourceMappingURL=file-input.js.map

package/dist/components/form-elements/file-upload/components/file-input.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/file-upload/components/file-input.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-elements/file-upload/components/file-upload-content.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const FileUploadContent: () => import("react/jsx-runtime").JSX.Element;
2	+ //# sourceMappingURL=file-upload-content.d.ts.map

package/dist/components/form-elements/file-upload/components/file-upload-content.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"file-upload-content.d.ts","sourceRoot":"","sources":["../../../../../src/components/form-elements/file-upload/components/file-upload-content.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB,+CAiD7B,CAAC"}

package/dist/components/form-elements/file-upload/components/file-upload-content.js ADDED Viewed

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from '../../../../styled-system/css';
+import { FormLabel } from '../../form-label';
+import { useFileUploadContext } from '../file-upload-context';
+import { Divider, IconButton } from '../../../../components/ui';
+import { FileInput } from './file-input';
+import { FilePreview } from './item-previews';
+import { FileUploadPreview } from './file-upload-preview';
+export const FileUploadContent = () => {
+    const { value, name, title, removeFile, selectedFile } = useFileUploadContext();
+    const styles = {
+        container: css({
+            width: '100%',
+            padding: '1',
+        }),
+        fileWrapper: css({
+            marginBottom: '2',
+            display: 'flex',
+            gap: '1',
+            flexDirection: 'column',
+        }),
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsx(FormLabel, { name: name, title: title }), _jsx(Divider, { width: "100%", marginY: "2px" }), _jsxs("div", { children: [value && (_jsx("div", { className: styles.fileWrapper, children: value.map((file, index) => (_jsx(FilePreview, { file: file, actions: _jsx(IconButton, { onClick: () => removeFile(index), name: "XSquare", size: "sm", color: "error" }) }, index))) })), !selectedFile ? (_jsx(FileInput, {})) : (
+                    // Preview Selected File
+                    _jsx(FileUploadPreview, {}))] })] }));
+};
+//# sourceMappingURL=file-upload-content.js.map

package/dist/components/form-elements/file-upload/components/file-upload-content.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"file-upload-content.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/file-upload/components/file-upload-content.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACrC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAEhF,MAAM,MAAM,GAAG;QACd,SAAS,EAAE,GAAG,CAAC;YACd,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,GAAG;SACZ,CAAC;QACF,WAAW,EAAE,GAAG,CAAC;YAChB,YAAY,EAAE,GAAG;YACjB,OAAO,EAAE,MAAM;YACf,GAAG,EAAE,GAAG;YACR,aAAa,EAAE,QAAQ;SACvB,CAAC;KACF,CAAC;IAEF,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC/B,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,EACvC,KAAC,OAAO,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,GAAG,EACtC,0BAEE,KAAK,IAAI,CACT,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAChC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,KAAC,WAAW,IAEX,IAAI,EAAE,IAAI,EACV,OAAO,EACN,KAAC,UAAU,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAChC,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,OAAO,GACZ,IARE,KAAK,CAUT,CACF,CAAC,GACG,CACN,EACA,CAAC,YAAY,CAAC,CAAC,CAAC,CAChB,KAAC,SAAS,KAAG,CACb,CAAC,CAAC,CAAC;oBACH,wBAAwB;oBACxB,KAAC,iBAAiB,KAAG,CACrB,IACI,IACD,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/form-elements/file-upload/components/file-upload-preview.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const FileUploadPreview: () => import("react/jsx-runtime").JSX.Element \| undefined;
2	+ //# sourceMappingURL=file-upload-preview.d.ts.map

package/dist/components/form-elements/file-upload/components/file-upload-preview.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"file-upload-preview.d.ts","sourceRoot":"","sources":["../../../../../src/components/form-elements/file-upload/components/file-upload-preview.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB,2DA4F7B,CAAC"}

package/dist/components/form-elements/file-upload/components/file-upload-preview.js ADDED Viewed

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isFileImageType } from '../../../../utils';
+import { TextInput } from '../../text-input';
+import { useFileUploadContext } from '../file-upload-context';
+import { FilePreview, ImageDisplay } from './item-previews';
+import { Button } from '../../../../components/ui';
+import { css } from '../../../../styled-system/css';
+import { Text } from '../../../../components/typography';
+export const FileUploadPreview = () => {
+    const { selectedFile, preview, customFilename, setCustomFilename, alt, setAlt, handleClearFile, saveFile, } = useFileUploadContext();
+    if (!selectedFile) {
+        return;
+    }
+    const styles = {
+        container: css({
+            display: 'flex',
+            gap: '4',
+            flexDirection: 'column',
+            width: '100%',
+            marginX: 'auto',
+            justifyContent: {
+                base: 'normal',
+                md: 'space-between',
+            },
+            alignItems: 'center',
+        }),
+        contents: css({
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'start',
+            gap: '2',
+        }),
+        item: css({
+            width: '100%',
+        }),
+        actionBlock: css({
+            alignSelf: 'flex-end',
+            display: 'flex',
+            gap: '3',
+            flexDirection: 'column',
+        }),
+        actionContent: css({
+            display: 'flex',
+            gap: '2',
+        }),
+    };
+    return (_jsxs("div", { className: styles.container, children: [preview ? _jsx(ImageDisplay, { src: preview }) : _jsx(FilePreview, { file: selectedFile }), _jsxs("div", { className: styles.contents, children: [_jsxs("div", { className: styles.item, children: [_jsx(TextInput, { name: "filename", title: "Filename:", value: customFilename, onChange: (e) => setCustomFilename(e.target.value), required: true }), _jsxs(Text, { color: "text-secondary", size: "xs", children: ["Extension: .", selectedFile.name.split('.').pop()] })] }), isFileImageType(selectedFile) && (_jsx("div", { className: styles.item, children: _jsx(TextInput, { name: "alt", title: "Alt Text:", value: alt, onChange: (e) => setAlt(e.target.value) }) }))] }), _jsx("div", { className: styles.actionBlock, children: _jsx("div", { className: styles.actionContent, children: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", color: "error", onClick: handleClearFile, children: "Remove" }), _jsx(Button, { type: "button", onClick: saveFile, fullWidth: true, children: "Add File" })] }) }) })] }));
+};
+//# sourceMappingURL=file-upload-preview.js.map

package/dist/components/form-elements/file-upload/components/file-upload-preview.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"file-upload-preview.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/file-upload/components/file-upload-preview.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-elements/file-upload/components/item-previews.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type ImageDisplayProps = {
+    src: string;
+    action?: () => void;
+};
+export declare const ImageDisplay: ({ src, action }: ImageDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export type FilePreviewProps = {
+    file: File;
+    actions?: ReactNode;
+};
+export declare const FilePreview: ({ file, actions }: FilePreviewProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=item-previews.d.ts.map

package/dist/components/form-elements/file-upload/components/item-previews.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"item-previews.d.ts","sourceRoot":"","sources":["../../../../../src/components/form-elements/file-upload/components/item-previews.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,iBAAiB,GAAG;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,iBAAiB,iBAAiB,4CAmC9D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mBAAmB,gBAAgB,4CAoC9D,CAAC"}

package/dist/components/form-elements/file-upload/components/item-previews.js ADDED Viewed

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../../components/typography';
+import { Icon, IconButton } from '../../../../components/ui';
+import { css } from '../../../../styled-system/css';
+import { isFileImageType } from '../../../../utils';
+export const ImageDisplay = ({ src, action }) => {
+    const styles = {
+        image: css({
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            borderRadius: 'md',
+            maxHeight: '6rem',
+            maxWidth: '6rem',
+        }),
+        wrapper: css({
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center',
+            gap: '3',
+        }),
+    };
+    const fixedImageStyles = {
+        height: 'auto',
+        width: 'auto',
+        maxWidth: '256px',
+        maxHeight: '400px',
+    };
+    if (action) {
+        return (_jsxs("div", { className: styles.wrapper, children: [_jsx("img", { src: src, alt: "Preview", className: styles.image }), _jsx(IconButton, { onClick: action, name: "XSquare", size: "md", color: "error" })] }));
+    }
+    return _jsx("img", { src: src, alt: "Preview", className: styles.image, style: fixedImageStyles });
+};
+export const FilePreview = ({ file, actions }) => {
+    const styles = {
+        container: css({
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderRadius: 'md',
+            backgroundColor: 'gray.light',
+            paddingY: '2',
+            paddingX: '5',
+        }),
+        innerWrapper: css({
+            display: 'flex',
+            gap: '2',
+        }),
+        content: css({
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        }),
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.innerWrapper, children: [_jsx(Icon, { name: isFileImageType(file) ? 'Image' : 'FileText', size: 48, color: "gray" }), _jsxs("div", { className: styles.content, children: [_jsx(Text, { size: "sm", children: file.name }), _jsxs(Text, { size: "xs", color: "text-secondary", children: [(file.size / 1024).toFixed(1), " KB"] })] })] }), actions && actions] }));
+};
+//# sourceMappingURL=item-previews.js.map

package/dist/components/form-elements/file-upload/components/item-previews.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"item-previews.js","sourceRoot":"","sources":["../../../../../src/components/form-elements/file-upload/components/item-previews.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-elements/file-upload/file-upload-context.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { FileUploadContext } from './file-upload.types';
+export declare const FileUploadProvider: import("react").Provider<FileUploadContext | undefined>, useFileUploadContext: () => NonNullable<FileUploadContext>;
+//# sourceMappingURL=file-upload-context.d.ts.map

package/dist/components/form-elements/file-upload/file-upload-context.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"file-upload-context.d.ts","sourceRoot":"","sources":["../../../../src/components/form-elements/file-upload/file-upload-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,eAAO,MAAO,kBAAkB,2DAAE,oBAAoB,sCACE,CAAC"}

package/dist/components/form-elements/file-upload/file-upload-context.js ADDED Viewed

@@ -0,0 +1,4 @@
+'use client';
+import { createComponentContext } from '../../../utils';
+export const [FileUploadProvider, useFileUploadContext] = createComponentContext('FileUpload');
+//# sourceMappingURL=file-upload-context.js.map

package/dist/components/form-elements/file-upload/file-upload-context.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"file-upload-context.js","sourceRoot":"","sources":["../../../../src/components/form-elements/file-upload/file-upload-context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGjD,MAAM,CAAC,MAAM,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,GACtD,sBAAsB,CAAoB,YAAY,CAAC,CAAC"}

package/dist/components/form-elements/file-upload/file-upload.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { FileUploadProps } from './file-upload.types';
+/**
+ * File upload component with drag-and-drop, file validation, image preview,
+ * and optional filename/alt text editing before saving.
+ *
+ * Validates against allowed MIME types, max file size, and max file count.
+ * Image files generate a preview; non-image files show a generic indicator.
+ *
+ * @example
+ * <FileUpload
+ *   name="attachments"
+ *   value={value}
+ *   onChange={onChange}
+ *   allowedFileTypes={['image/*', 'application/pdf']}
+ *   maxFileSize={5 * 1024 * 1024}
+ *   maxNumberFiles={3}
+ * />
+ */
+export declare const FileUpload: ({ title, name, id, value, onChange, allowedFileTypes, maxFileSize, maxNumberFiles, supportedFormatsText, required, size, }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/form-elements/file-upload/file-upload.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../../src/components/form-elements/file-upload/file-upload.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAkB,MAAM,qBAAqB,CAAC;AAKtE;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU,GAAI,4HAYxB,eAAe,4CA+IjB,CAAC"}