@techsio/ui-kit 0.42.0 → 0.43.0

package/dist/molecules/file-upload.js

@@ -0,0 +1,369 @@
+import { jsx } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/file-upload";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { ActionIcon } from "../atoms/action-icon.js";
+import { Button } from "../atoms/button.js";
+import { Icon } from "../atoms/icon.js";
+import { Image } from "../atoms/image.js";
+import { Label } from "../atoms/label.js";
+import { tv } from "../utils.js";
+const fileUploadStyles = tv({
+    slots: {
+        root: "flex w-full flex-col items-start gap-file-upload-root",
+        label: [
+            "font-file-upload-label text-file-upload-label text-file-upload-label-fg",
+            "data-disabled:text-file-upload-label-disabled-fg"
+        ],
+        dropzone: [
+            "flex min-h-file-upload-dropzone-min-height w-full cursor-pointer flex-col items-center justify-center gap-file-upload-dropzone",
+            "file-upload-dropzone-border-dashed file-upload-dropzone-border-width rounded-file-upload-dropzone border-file-upload-dropzone-border bg-file-upload-dropzone-bg p-file-upload-dropzone",
+            "transition-colors hover:bg-file-upload-dropzone-hover-bg motion-reduce:transition-none",
+            "focus-visible:file-upload-focus",
+            "data-dragging:file-upload-dropzone-border-solid data-dragging:border-file-upload-dropzone-dragging-border data-dragging:bg-file-upload-dropzone-dragging-bg",
+            "data-invalid:border-file-upload-dropzone-invalid-border",
+            "data-disabled:cursor-not-allowed data-disabled:border-file-upload-dropzone-disabled-border data-disabled:bg-file-upload-dropzone-disabled-bg",
+            "data-readonly:cursor-default"
+        ],
+        trigger: "",
+        itemGroup: "flex w-full flex-col gap-file-upload-item-group empty:hidden",
+        item: [
+            "flex w-full items-center gap-file-upload-item",
+            "file-upload-item-border-width rounded-file-upload-item border-file-upload-item-border bg-file-upload-item-bg p-file-upload-item text-file-upload-item",
+            "data-[type=rejected]:border-file-upload-item-rejected-border data-[type=rejected]:bg-file-upload-item-rejected-bg",
+            "data-disabled:text-file-upload-item-disabled-fg"
+        ],
+        itemPreview: [
+            "flex size-file-upload-item-preview shrink-0 items-center justify-center overflow-hidden rounded-file-upload-item-preview text-file-upload-item-preview-fg",
+            "data-disabled:text-file-upload-item-disabled-fg"
+        ],
+        itemPreviewImage: "size-full object-cover",
+        itemName: [
+            "min-w-0 flex-1 truncate font-file-upload-item-name text-file-upload-item-name-fg",
+            "data-disabled:text-file-upload-item-disabled-fg"
+        ],
+        itemSizeText: [
+            "text-file-upload-item-size text-file-upload-item-size-fg",
+            "data-disabled:text-file-upload-item-disabled-fg"
+        ],
+        itemDeleteTrigger: "",
+        clearTrigger: ""
+    }
+});
+const FileUploadContext = /*#__PURE__*/ createContext(null);
+function useFileUploadContext() {
+    const context = useContext(FileUploadContext);
+    if (!context) throw new Error("FileUpload components must be used within FileUpload.Root");
+    return context;
+}
+const FileUploadItemGroupContext = /*#__PURE__*/ createContext(null);
+function useFileUploadItemGroupContext() {
+    const context = useContext(FileUploadItemGroupContext);
+    if (!context) throw new Error("FileUpload.Item must be used within FileUpload.ItemGroup");
+    return context;
+}
+const FileUploadItemContext = /*#__PURE__*/ createContext(null);
+function useFileUploadItemContext() {
+    const context = useContext(FileUploadItemContext);
+    if (!context) throw new Error("FileUpload item components must be used within FileUpload.Item");
+    return context;
+}
+function FileUpload({ accept, acceptedFiles, allowDrop, capture, children, className, defaultAcceptedFiles, dir = "ltr", directory, disabled, getRootNode, id, ids, invalid, locale, maxFileSize, maxFiles, minFileSize, name, onFileAccept, onFileChange, onFileReject, preventDocumentDrop, readOnly, ref, required, transformFiles, translations, validate, ...props }) {
+    const generatedId = useId();
+    const service = useMachine(machine, {
+        accept,
+        acceptedFiles,
+        allowDrop,
+        capture,
+        defaultAcceptedFiles,
+        dir,
+        directory,
+        disabled,
+        getRootNode,
+        id: id ?? generatedId,
+        ids,
+        invalid,
+        locale,
+        maxFileSize,
+        maxFiles,
+        minFileSize,
+        name,
+        onFileAccept,
+        onFileChange,
+        onFileReject,
+        preventDocumentDrop,
+        readOnly,
+        required,
+        transformFiles,
+        translations,
+        validate
+    });
+    const api = connect(service, normalizeProps);
+    const styles = fileUploadStyles();
+    const rootProps = mergeProps(props, api.getRootProps());
+    return /*#__PURE__*/ jsx(FileUploadContext.Provider, {
+        value: {
+            api,
+            required,
+            styles
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.root({
+                className
+            }),
+            ref: ref,
+            ...rootProps,
+            children: children
+        })
+    });
+}
+FileUpload.Context = function({ children }) {
+    const { api } = useFileUploadContext();
+    return children(api);
+};
+FileUpload.Label = function({ children, className, ref, ...props }) {
+    const { api, required, styles } = useFileUploadContext();
+    const labelProps = mergeProps({
+        ref
+    }, props, api.getLabelProps());
+    return /*#__PURE__*/ jsx(Label, {
+        className: styles.label({
+            className
+        }),
+        required: required,
+        size: "current",
+        ...labelProps,
+        children: children
+    });
+};
+FileUpload.Dropzone = function({ children, className, disableClick, onClick, onKeyDown, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { onClick: onMachineClick, onKeyDown: onMachineKeyDown, ...machineDropzoneProps } = api.getDropzoneProps({
+        disableClick
+    });
+    const dropzoneProps = mergeProps(props, machineDropzoneProps, {
+        onClick (event) {
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        onKeyDown (event) {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented) onMachineKeyDown?.(event);
+        }
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.dropzone({
+            className
+        }),
+        ref: ref,
+        ...dropzoneProps,
+        children: children
+    });
+};
+FileUpload.HiddenInput = function({ ref, ...props }) {
+    const { api } = useFileUploadContext();
+    const inputProps = mergeProps(props, api.getHiddenInputProps());
+    return /*#__PURE__*/ jsx("input", {
+        ref: ref,
+        ...inputProps
+    });
+};
+FileUpload.Trigger = function({ children, className, disabled, icon = "token-icon-file-upload-trigger", onClick, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { disabled: machineDisabled, onClick: onMachineClick, ...machineTriggerProps } = api.getTriggerProps();
+    const triggerProps = mergeProps(props, machineTriggerProps);
+    const isDisabled = Boolean(disabled || machineDisabled);
+    return /*#__PURE__*/ jsx(Button, {
+        className: styles.trigger({
+            className
+        }),
+        disabled: isDisabled,
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: "md",
+        theme: "outlined",
+        type: "button",
+        variant: "primary",
+        ...triggerProps,
+        children: children
+    });
+};
+FileUpload.ItemGroup = function({ children, className, ref, type = "accepted", ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const itemGroupProps = mergeProps(props, api.getItemGroupProps({
+        type
+    }));
+    return /*#__PURE__*/ jsx(FileUploadItemGroupContext.Provider, {
+        value: {
+            type
+        },
+        children: /*#__PURE__*/ jsx("ul", {
+            className: styles.itemGroup({
+                className
+            }),
+            ref: ref,
+            ...itemGroupProps,
+            children: children
+        })
+    });
+};
+FileUpload.Item = function({ children, className, file, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { type } = useFileUploadItemGroupContext();
+    const itemProps = mergeProps(props, api.getItemProps({
+        file,
+        type
+    }));
+    return /*#__PURE__*/ jsx(FileUploadItemContext.Provider, {
+        value: {
+            file,
+            type
+        },
+        children: /*#__PURE__*/ jsx("li", {
+            className: styles.item({
+                className
+            }),
+            ref: ref,
+            ...itemProps,
+            children: children
+        })
+    });
+};
+FileUpload.ItemPreview = function({ children, className, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const previewProps = mergeProps(props, api.getItemPreviewProps({
+        file,
+        type
+    }));
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemPreview({
+            className
+        }),
+        ref: ref,
+        ...previewProps,
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-file-upload-preview",
+            size: "lg"
+        })
+    });
+};
+FileUpload.ItemPreviewImage = function({ className, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const apiRef = useRef(api);
+    const [url, setUrl] = useState();
+    apiRef.current = api;
+    useEffect(()=>{
+        setUrl(void 0);
+        return apiRef.current.createFileUrl(file, setUrl);
+    }, [
+        file
+    ]);
+    if (!url) return null;
+    const imageProps = mergeProps({
+        ref
+    }, props, api.getItemPreviewImageProps({
+        file,
+        type,
+        url
+    }));
+    const { alt, src, ...imageElementProps } = imageProps;
+    return /*#__PURE__*/ jsx(Image, {
+        alt: alt ?? file.name,
+        className: styles.itemPreviewImage({
+            className
+        }),
+        size: "custom",
+        src: src ?? url,
+        ...imageElementProps
+    });
+};
+FileUpload.ItemName = function({ children, className, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const nameProps = mergeProps(props, api.getItemNameProps({
+        file,
+        type
+    }));
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemName({
+            className
+        }),
+        ref: ref,
+        ...nameProps,
+        children: children ?? file.name
+    });
+};
+FileUpload.ItemSizeText = function({ children, className, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const sizeTextProps = mergeProps(props, api.getItemSizeTextProps({
+        file,
+        type
+    }));
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemSizeText({
+            className
+        }),
+        ref: ref,
+        ...sizeTextProps,
+        children: children ?? api.getFileSize(file)
+    });
+};
+FileUpload.ItemDeleteTrigger = function({ className, disabled, icon = "token-icon-file-upload-delete", onClick, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const { disabled: machineDisabled, onClick: onMachineClick, ...machineDeleteProps } = api.getItemDeleteTriggerProps({
+        file,
+        type
+    });
+    const deleteProps = mergeProps(props, machineDeleteProps);
+    const isDisabled = Boolean(disabled || machineDisabled);
+    return /*#__PURE__*/ jsx(ActionIcon, {
+        className: styles.itemDeleteTrigger({
+            className
+        }),
+        disabled: isDisabled,
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: "md",
+        tone: "neutral",
+        type: "button",
+        ...deleteProps
+    });
+};
+FileUpload.ClearTrigger = function({ "aria-label": ariaLabel = "Clear files", className, disabled, icon = "token-icon-file-upload-clear", onClick, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { disabled: machineDisabled, onClick: onMachineClick, ...machineClearProps } = api.getClearTriggerProps();
+    const clearProps = mergeProps(props, machineClearProps);
+    const isDisabled = Boolean(disabled || machineDisabled);
+    return /*#__PURE__*/ jsx(ActionIcon, {
+        "aria-label": ariaLabel,
+        className: styles.clearTrigger({
+            className
+        }),
+        disabled: isDisabled,
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: "md",
+        tone: "neutral",
+        type: "button",
+        ...clearProps
+    });
+};
+FileUpload.Root = FileUpload;
+FileUpload.displayName = "FileUpload";
+export { FileUpload };

package/dist/src/molecules/file-upload.d.ts

@@ -0,0 +1,84 @@
+/**
+ * FileUpload — @techsio/ui-kit molecule.
+ *
+ * @component FileUpload
+ * @componentVersion v1.0.0
+ * @skill file-upload-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ *
+ * Versioning is enforced at commit by scripts/check-skill-sync.mjs: @componentVersion must match
+ * the file-upload-usage skill's component_version and a changelog entry. Bump all three together.
+ */
+import { type Api as FileUploadApi, type ItemType as FileUploadItemType, type Props as FileUploadMachineProps } from "@zag-js/file-upload";
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
+import { type IconType } from "../atoms/icon.js";
+import { Label } from "../atoms/label.js";
+type FileUploadRootDomProps = Omit<ComponentPropsWithoutRef<"div">, keyof FileUploadMachineProps>;
+export type FileUploadProps = FileUploadRootDomProps & Omit<FileUploadMachineProps, "id"> & {
+    id?: string;
+    ref?: Ref<HTMLDivElement>;
+};
+export declare function FileUpload({ accept, acceptedFiles, allowDrop, capture, children, className, defaultAcceptedFiles, dir, directory, disabled, getRootNode, id, ids, invalid, locale, maxFileSize, maxFiles, minFileSize, name, onFileAccept, onFileChange, onFileReject, preventDocumentDrop, readOnly, ref, required, transformFiles, translations, validate, ...props }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FileUpload {
+    var Context: ({ children, }: FileUploadContextProps) => ReactNode;
+    var Label: ({ children, className, ref, ...props }: FileUploadLabelProps) => import("react/jsx-runtime").JSX.Element;
+    var Dropzone: ({ children, className, disableClick, onClick, onKeyDown, ref, ...props }: FileUploadDropzoneProps) => import("react/jsx-runtime").JSX.Element;
+    var HiddenInput: ({ ref, ...props }: FileUploadHiddenInputProps) => import("react/jsx-runtime").JSX.Element;
+    var Trigger: ({ children, className, disabled, icon, onClick, ref, ...props }: FileUploadTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemGroup: ({ children, className, ref, type, ...props }: FileUploadItemGroupProps) => import("react/jsx-runtime").JSX.Element;
+    var Item: ({ children, className, file, ref, ...props }: FileUploadItemProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemPreview: ({ children, className, ref, ...props }: FileUploadItemPreviewProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemPreviewImage: ({ className, ref, ...props }: FileUploadItemPreviewImageProps) => import("react/jsx-runtime").JSX.Element | null;
+    var ItemName: ({ children, className, ref, ...props }: FileUploadItemNameProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemSizeText: ({ children, className, ref, ...props }: FileUploadItemSizeTextProps) => import("react/jsx-runtime").JSX.Element;
+    var ItemDeleteTrigger: ({ className, disabled, icon, onClick, ref, ...props }: FileUploadItemDeleteTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    var ClearTrigger: ({ "aria-label": ariaLabel, className, disabled, icon, onClick, ref, ...props }: FileUploadClearTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    var Root: typeof FileUpload;
+    var displayName: string;
+}
+export type FileUploadContextProps = {
+    children: (api: FileUploadApi) => ReactNode;
+};
+export type FileUploadLabelProps = Omit<ComponentPropsWithoutRef<typeof Label>, "disabled" | "htmlFor" | "required" | "size"> & {
+    ref?: Ref<HTMLLabelElement>;
+};
+export type FileUploadDropzoneProps = ComponentPropsWithoutRef<"div"> & {
+    disableClick?: boolean;
+    ref?: Ref<HTMLDivElement>;
+};
+type MachineOwnedInputProps = "accept" | "aria-hidden" | "autoFocus" | "capture" | "defaultValue" | "disabled" | "files" | "id" | "multiple" | "name" | "required" | "style" | "tabIndex" | "type" | "value" | "webkitdirectory";
+export type FileUploadHiddenInputProps = Omit<ComponentPropsWithoutRef<"input">, MachineOwnedInputProps> & {
+    ref?: Ref<HTMLInputElement>;
+};
+export type FileUploadTriggerProps = Omit<ComponentPropsWithoutRef<"button">, "type"> & {
+    icon?: IconType;
+    ref?: Ref<HTMLButtonElement>;
+};
+export type FileUploadItemGroupProps = ComponentPropsWithoutRef<"ul"> & {
+    ref?: Ref<HTMLUListElement>;
+    type?: FileUploadItemType;
+};
+export type FileUploadItemProps = ComponentPropsWithoutRef<"li"> & {
+    file: File;
+    ref?: Ref<HTMLLIElement>;
+};
+export type FileUploadItemPreviewProps = ComponentPropsWithoutRef<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+export type FileUploadItemPreviewImageProps = Omit<ComponentPropsWithoutRef<"img">, "alt" | "src"> & {
+    ref?: Ref<HTMLImageElement>;
+};
+export type FileUploadItemNameProps = ComponentPropsWithoutRef<"span"> & {
+    ref?: Ref<HTMLSpanElement>;
+};
+export type FileUploadItemSizeTextProps = ComponentPropsWithoutRef<"span"> & {
+    ref?: Ref<HTMLSpanElement>;
+};
+type FileUploadActionIconProps = Omit<ComponentPropsWithoutRef<"button">, "children" | "type"> & {
+    icon?: IconType;
+    ref?: Ref<HTMLButtonElement>;
+};
+export type FileUploadItemDeleteTriggerProps = FileUploadActionIconProps;
+export type FileUploadClearTriggerProps = FileUploadActionIconProps;
+export {};
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/src/molecules/file-upload.d.ts.map

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

package/dist/src/types/zag.d.ts

@@ -4,6 +4,7 @@ export type * as Checkbox from "@zag-js/checkbox";
 export type * as Combobox from "@zag-js/combobox";
 export type * as Dialog from "@zag-js/dialog";
 export type * as Drawer from "@zag-js/drawer";
+export type * as FileUpload from "@zag-js/file-upload";
 export type * as Menu from "@zag-js/menu";
 export type * as NumberInput from "@zag-js/number-input";
 export type * as Pagination from "@zag-js/pagination";

package/dist/src/types/zag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"zag.d.ts","sourceRoot":"","sources":["../../../src/types/zag.ts"],"names":[],"mappings":"AAAA,YAAY,KAAK,SAAS,MAAM,mBAAmB,CAAA;AACnD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,UAAU,MAAM,oBAAoB,CAAA;AACrD,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,QAAQ,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"zag.d.ts","sourceRoot":"","sources":["../../../src/types/zag.ts"],"names":[],"mappings":"AAAA,YAAY,KAAK,SAAS,MAAM,mBAAmB,CAAA;AACnD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,UAAU,MAAM,oBAAoB,CAAA;AACrD,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,QAAQ,MAAM,mBAAmB,CAAA"}

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAsLtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAyLtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

package/dist/stories/molecules/file-upload.stories.d.ts

@@ -0,0 +1,105 @@
+import type { StoryObj } from "@storybook/react";
+import { FileUpload } from "../../src/molecules/file-upload.js";
+declare const meta: {
+    title: string;
+    component: typeof FileUpload;
+    tags: string[];
+    parameters: {
+        layout: string;
+        controls: {
+            include: string[];
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        accept: {
+            control: "object";
+            description: string;
+        };
+        allowDrop: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        invalid: {
+            control: "boolean";
+            description: string;
+        };
+        maxFileSize: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+            description: string;
+        };
+        maxFiles: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+            description: string;
+        };
+        minFileSize: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+            description: string;
+        };
+        readOnly: {
+            control: "boolean";
+            description: string;
+        };
+        required: {
+            control: "boolean";
+            description: string;
+        };
+    };
+    args: {
+        accept: {
+            "image/*": string[];
+        };
+        allowDrop: true;
+        disabled: false;
+        invalid: false;
+        maxFileSize: number;
+        maxFiles: number;
+        minFileSize: number;
+        onFileAccept: import("storybook/test").Mock<(...args: any[]) => any>;
+        onFileChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        onFileReject: import("storybook/test").Mock<(...args: any[]) => any>;
+        readOnly: false;
+        required: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const States: Story;
+export declare const Basic: Story;
+export declare const AcceptedFiles: Story;
+export declare const Multiple: Story;
+export declare const Dropzone: Story;
+export declare const DropzoneStates: Story;
+export declare const ConditionalDropzone: Story;
+export declare const CustomPreview: Story;
+export declare const RejectedFiles: Story;
+export declare const Directory: Story;
+export declare const MediaCapture: Story;
+export declare const ProgrammaticOpen: Story;
+export declare const InputLike: Story;
+export declare const Clearable: Story;
+export declare const Clipboard: Story;
+export declare const Controlled: Story;
+export declare const Form: Story;
+//# sourceMappingURL=file-upload.stories.d.ts.map

package/dist/stories/molecules/file-upload.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/file-upload.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAgBtD,OAAO,EACL,UAAU,EAEX,MAAM,iCAAiC,CAAA;AAExC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EyB,CAAA;AAEnC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAuPlC,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAqDpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgDtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA0D5B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA+BjC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA6C3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAyCvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAA;AA4BD,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAA;AAyBD,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -104,6 +104,7 @@
     "@zag-js/combobox": "1.43.3",
     "@zag-js/dialog": "1.43.3",
     "@zag-js/drawer": "1.43.3",
+    "@zag-js/file-upload": "1.43.3",
     "@zag-js/i18n-utils": "1.43.3",
     "@zag-js/menu": "1.43.3",
     "@zag-js/number-input": "1.43.3",

package/src/tokens/components/components.css

@@ -24,6 +24,7 @@
 @import "./molecules/_combobox.css";
 @import "./molecules/_dialog.css";
 @import "./molecules/_drawer.css";
+@import "./molecules/_file-upload.css";
 @import "./molecules/_pagination.css";
 @import "./molecules/_popover.css";
 @import "./molecules/_radio-card.css";

package/src/tokens/components/molecules/_file-upload.css

@@ -0,0 +1,128 @@
+/*
+ * FileUpload — supplementary runtime tokens until a File Upload collection is
+ * available in Figma. The visual contract intentionally has one default style
+ * with no public size or variant axis.
+ */
+
+@theme static {
+  /* Reference layer */
+  --color-file-upload-surface: var(--color-fill-surface);
+  --color-file-upload-item-surface: var(--color-base);
+  --color-file-upload-surface-hover: var(--color-fill-hover);
+  --color-file-upload-accent: var(--color-primary);
+  --color-file-upload-accent-subtle: var(--color-primary-light);
+  --color-file-upload-content: var(--color-fg-primary);
+  --color-file-upload-outline: var(--color-border-primary);
+  --color-file-upload-danger: var(--color-danger);
+  --color-file-upload-disabled-surface: var(--color-bg-disabled);
+  --color-file-upload-disabled-content: var(--color-fg-disabled);
+  --color-file-upload-disabled-outline: var(--color-border-disabled);
+  --color-file-upload-focus: var(--color-ring-default);
+
+  --spacing-file-upload-comfortable: var(--spacing-250);
+  --spacing-file-upload-content-gap: var(--spacing-150);
+  --spacing-file-upload-item-preview-base: var(--spacing-450);
+  --spacing-file-upload-dropzone-base: var(--container-2xs);
+
+  /* Derived color layer */
+  --color-file-upload-dropzone-bg: var(--color-file-upload-surface);
+  --color-file-upload-dropzone-hover-bg: var(--color-file-upload-surface-hover);
+  --color-file-upload-dropzone-dragging-bg: var(
+    --color-file-upload-accent-subtle
+  );
+  --color-file-upload-dropzone-disabled-bg: var(
+    --color-file-upload-disabled-surface
+  );
+  --color-file-upload-dropzone-border: var(--color-file-upload-outline);
+  --color-file-upload-dropzone-dragging-border: var(--color-file-upload-accent);
+  --color-file-upload-dropzone-invalid-border: var(--color-file-upload-danger);
+  --color-file-upload-dropzone-disabled-border: var(
+    --color-file-upload-disabled-outline
+  );
+  --color-file-upload-label-fg: var(--color-file-upload-content);
+  --color-file-upload-label-disabled-fg: var(
+    --color-file-upload-disabled-content
+  );
+  --color-file-upload-item-bg: var(--color-file-upload-item-surface);
+  --color-file-upload-item-rejected-bg: var(--color-file-upload-item-surface);
+  --color-file-upload-item-border: var(--color-file-upload-outline);
+  --color-file-upload-item-rejected-border: var(--color-file-upload-danger);
+  --color-file-upload-item-name-fg: var(--color-file-upload-content);
+  --color-file-upload-item-size-fg: var(--color-file-upload-content);
+  --color-file-upload-item-preview-fg: var(--color-file-upload-content);
+  --color-file-upload-item-disabled-fg: var(
+    --color-file-upload-disabled-content
+  );
+  --color-file-upload-focus-border: var(--color-file-upload-focus);
+
+  /* Derived layout and typography layer */
+  --gap-file-upload-root: var(--spacing-file-upload-comfortable);
+  --gap-file-upload-dropzone: var(--spacing-file-upload-comfortable);
+  --gap-file-upload-item-group: var(--spacing-file-upload-content-gap);
+  --gap-file-upload-item: var(--spacing-file-upload-content-gap);
+  --padding-file-upload-dropzone: var(--spacing-file-upload-content-gap)
+    var(--spacing-file-upload-comfortable);
+  --padding-file-upload-item: var(--spacing-file-upload-content-gap);
+  --spacing-file-upload-dropzone-min-height: var(
+    --spacing-file-upload-dropzone-base
+  );
+  --spacing-file-upload-item-preview: var(
+    --spacing-file-upload-item-preview-base
+  );
+  --spacing-file-upload-focus-offset: var(--default-ring-offset);
+
+  --text-file-upload-label: var(--text-sm);
+  --text-file-upload-item: var(--text-md);
+  --text-file-upload-item-size: var(--text-md);
+  --font-weight-file-upload-label: var(--font-weight-medium);
+  --font-weight-file-upload-item-name: var(--font-weight-medium);
+
+  --radius-file-upload-dropzone: var(--radius-md);
+  --radius-file-upload-item: var(--radius-md);
+  --radius-file-upload-item-preview: var(--radius-sm);
+  --border-width-file-upload-dropzone: var(--border-width-md);
+  --border-width-file-upload-item: var(--border-width-sm);
+  --border-width-file-upload-focus: var(--default-ring-width);
+}
+
+@utility file-upload-focus {
+  outline: var(--border-width-file-upload-focus) var(--default-ring-style)
+    var(--color-file-upload-focus-border);
+  outline-offset: var(--spacing-file-upload-focus-offset);
+}
+
+@utility file-upload-dropzone-border-width {
+  border-width: var(--border-width-file-upload-dropzone);
+}
+
+@utility file-upload-item-border-width {
+  border-width: var(--border-width-file-upload-item);
+}
+
+@utility file-upload-dropzone-border-dashed {
+  border-style: dashed;
+}
+
+@utility file-upload-dropzone-border-solid {
+  border-style: solid;
+}
+
+@utility token-icon-file-upload-trigger {
+  @apply icon-[mdi--upload];
+}
+
+@utility token-icon-file-upload-preview {
+  @apply token-icon-file-document;
+}
+
+@utility token-icon-file-upload-image {
+  @apply icon-[mdi--file-image-outline];
+}
+
+@utility token-icon-file-upload-delete {
+  @apply token-icon-trash;
+}
+
+@utility token-icon-file-upload-clear {
+  @apply token-icon-close;
+}

package/src/tokens/figma/brand-overrides.css

@@ -133,8 +133,8 @@
   --color-fg-on-primary-solid-neo: var(--color-fg-reverse);
   --color-fg-primary: var(--color-slate-950);
   --color-fg-reverse: var(--color-white);
-  --color-fg-status-error: var(--color-danger-400);
-  --color-fg-status-success: var(--color-success-500);
+  --color-fg-status-error: var(--color-danger-600);
+  --color-fg-status-success: var(--color-success-700);
   --color-fg-status-warning: var(--color-warning-500);
   --color-fill-active: var(--color-black-15);
   --color-fill-base: var(--color-black-5);

package/src/tokens/figma/business/variables.css

@@ -111,8 +111,8 @@
   --color-fg-primary: var(--color-slate-950);
   --color-fg-reverse: var(--color-white);
   --color-fg-secondary: oklch(0.494 0.037 261.595);
-  --color-fg-status-error: var(--color-danger-400);
-  --color-fg-status-success: var(--color-success-500);
+  --color-fg-status-error: var(--color-danger-600);
+  --color-fg-status-success: var(--color-success-700);
   --color-fg-status-warning: var(--color-warning-500);
   --color-fill-active: var(--color-black-15);
   --color-fill-base: var(--color-black-5);
@@ -189,6 +189,7 @@
   --color-success-300: oklch(0.871 0.136 154.449);
   --color-success-500: oklch(0.723 0.192 149.579);
   --color-success-600: oklch(0.627 0.17 149.214);
+  --color-success-700: oklch(0.527 0.137 150.069);
   --color-success-disabled: var(--color-bg-disabled);
   --color-tertiary: var(--color-bg-tertiary-base);
   --color-tertiary-100: oklch(0.963 0.021 301.149);

package/src/tokens/figma/dark/variables.css

@@ -189,6 +189,7 @@
   --color-success-300: oklch(0.871 0.136 154.449);
   --color-success-500: oklch(0.723 0.192 149.579);
   --color-success-600: oklch(0.627 0.17 149.214);
+  --color-success-700: oklch(0.527 0.137 150.069);
   --color-success-disabled: var(--color-bg-disabled);
   --color-tertiary: var(--color-bg-tertiary-base);
   --color-tertiary-100: oklch(0.963 0.021 301.149);

package/src/tokens/figma/light/variables.css

@@ -297,8 +297,8 @@
   --color-fg-primary: var(--color-slate-950);
   --color-fg-reverse: var(--color-white);
   --color-fg-secondary: oklch(0.494 0.037 261.595);
-  --color-fg-status-error: var(--color-danger-400);
-  --color-fg-status-success: var(--color-success-500);
+  --color-fg-status-error: var(--color-danger-600);
+  --color-fg-status-success: var(--color-success-700);
   --color-fg-status-warning: var(--color-warning-500);
   --color-fill-active: var(--color-black-15);
   --color-fill-base: var(--color-black-5);
@@ -732,6 +732,7 @@
   --color-success-300: oklch(0.871 0.136 154.449);
   --color-success-500: oklch(0.723 0.192 149.579);
   --color-success-600: oklch(0.627 0.17 149.214);
+  --color-success-700: oklch(0.527 0.137 150.069);
   --color-success-disabled: var(--color-bg-disabled);
   --color-switch-bg-base: var(--color-fill-overlay);
   --color-switch-bg-checked: var(--color-bg-success);

package/src/tokens/figma/neo/variables.css

@@ -111,8 +111,8 @@
   --color-fg-primary: var(--color-slate-950);
   --color-fg-reverse: var(--color-white);
   --color-fg-secondary: oklch(0.494 0.037 261.595);
-  --color-fg-status-error: var(--color-danger-400);
-  --color-fg-status-success: var(--color-success-500);
+  --color-fg-status-error: var(--color-danger-600);
+  --color-fg-status-success: var(--color-success-700);
   --color-fg-status-warning: var(--color-warning-500);
   --color-fill-active: var(--color-black-15);
   --color-fill-base: var(--color-black-5);
@@ -189,6 +189,7 @@
   --color-success-300: oklch(0.871 0.136 154.449);
   --color-success-500: oklch(0.723 0.192 149.579);
   --color-success-600: oklch(0.627 0.17 149.214);
+  --color-success-700: oklch(0.527 0.137 150.069);
   --color-success-disabled: var(--color-bg-disabled);
   --color-tertiary: var(--color-bg-tertiary-base);
   --color-tertiary-100: oklch(0.963 0.021 301.149);

package/src/tokens/figma/neo-dark/variables.css

@@ -189,6 +189,7 @@
   --color-success-300: oklch(0.871 0.136 154.449);
   --color-success-500: oklch(0.723 0.192 149.579);
   --color-success-600: oklch(0.627 0.17 149.214);
+  --color-success-700: oklch(0.527 0.137 150.069);
   --color-success-disabled: var(--color-bg-disabled);
   --color-tertiary: var(--color-bg-tertiary-base);
   --color-tertiary-100: oklch(0.963 0.021 301.149);

package/src/tokens/figma/variables.css

@@ -359,8 +359,8 @@
   --color-fg-primary: light-dark(var(--color-slate-950), var(--color-white));
   --color-fg-reverse: light-dark(var(--color-white), var(--color-slate-950));
   --color-fg-secondary: oklch(0.494 0.037 261.595);
-  --color-fg-status-error: light-dark(var(--color-danger-400), var(--color-danger-300));
-  --color-fg-status-success: light-dark(var(--color-success-500), var(--color-success-300));
+  --color-fg-status-error: light-dark(var(--color-danger-600), var(--color-danger-300));
+  --color-fg-status-success: light-dark(var(--color-success-700), var(--color-success-300));
   --color-fg-status-warning: light-dark(var(--color-warning-500), var(--color-warning-400));
   --color-fill-active: light-dark(var(--color-black-15), var(--color-white-15));
   --color-fill-base: light-dark(var(--color-black-5), var(--color-white-5));
@@ -794,6 +794,7 @@
   --color-success-300: oklch(0.871 0.136 154.449);
   --color-success-500: oklch(0.723 0.192 149.579);
   --color-success-600: oklch(0.627 0.17 149.214);
+  --color-success-700: oklch(0.527 0.137 150.069);
   --color-success-disabled: var(--color-bg-disabled);
   --color-switch-bg-base: var(--color-fill-overlay);
   --color-switch-bg-checked: var(--color-bg-success);