@crisp-ui-kit/crisp 0.7.6 → 0.8.0

package/dist/cjs/components/fileupload/fileupload.js

@@ -0,0 +1,118 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileUploadLabels = void 0;
+exports.FileUpload = FileUpload;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_file_upload_1 = require("@seed-design/react-file-upload");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const fileupload_recipe_1 = require("./fileupload.recipe");
+exports.fileUploadLabels = {
+    // Attio's own copy on the record Files pane.
+    title: "No files",
+    hint: "Drag a file here or choose one from your computer.",
+    remove: "Remove file",
+    errors: {
+        FILE_TOO_LARGE: "That file is too large.",
+        FILE_TOO_SMALL: "That file is too small.",
+        TOO_MANY_FILES: "Too many files.",
+        INVALID_TYPE: "That file type is not accepted.",
+    },
+};
+/** 1000-based, matching how every file manager reports size. */
+function formatSize(bytes) {
+    if (bytes < 1000)
+        return `${bytes} B`;
+    const units = ["kB", "MB", "GB", "TB"];
+    let n = bytes;
+    let i = -1;
+    while (n >= 1000 && i < units.length - 1) {
+        n /= 1000;
+        i++;
+    }
+    return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`;
+}
+/**
+ * A file dropzone with an accepted-file list, driven by seed-design's headless
+ * engine so the behaviour — drag state, accept/reject, per-file upload status —
+ * is theirs by construction. Controlled or uncontrolled, the same way every
+ * other crisp component is.
+ */
+function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }) {
+    const props = {
+        accept,
+        disabled: disabledProp,
+        required,
+        invalid: invalidProp,
+        readOnly,
+        maxFiles,
+        maxFileSize,
+        minFileSize,
+        name,
+        validate,
+        preventDocumentDrop,
+        onFileReject,
+        onFileAccept,
+        acceptedFileEntries: acceptedFileEntriesProp,
+        defaultAcceptedFileEntries,
+        onAcceptedFileEntriesChange,
+    };
+    const [rejections, setRejections] = React.useState([]);
+    const t = {
+        ...exports.fileUploadLabels,
+        ...labels,
+        errors: { ...exports.fileUploadLabels.errors, ...labels?.errors },
+    };
+    const api = (0, react_file_upload_1.useFileUpload)({
+        ...props,
+        onFileReject: (r) => {
+            setRejections(r);
+            props.onFileReject?.(r);
+        },
+        onFileAccept: (entries, helpers) => {
+            setRejections([]);
+            props.onFileAccept?.(entries, helpers);
+        },
+    });
+    const { acceptedFileEntries, dragging, disabled, invalid, openFilePicker, removeFileEntry, dropzoneProps, hiddenInputProps, 
+    // The prop getters deliberately exclude the refs -- the engine's own
+    // FileUploadDropzone/HiddenInput compose them. Rendering crisp's markup
+    // instead means attaching them here; without inputRef, `openFilePicker`
+    // finds no input and returns silently, so the dropzone opens nothing.
+    inputRef, dropzoneRef, } = api;
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rest, className: (0, fileupload_recipe_1.fileuploadRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [(0, jsx_runtime_1.jsx)("span", { className: "fileupload-title", children: t.title }), (0, jsx_runtime_1.jsx)("span", { className: "fileupload-hint", children: t.hint })] }), (0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, ref: inputRef, className: "fileupload-input" }), acceptedFileEntries.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "fileupload-list", children: acceptedFileEntries.map((entry) => ((0, jsx_runtime_1.jsxs)("li", { className: "fileupload-item", "data-status": entry.status, children: [(0, jsx_runtime_1.jsx)("span", { className: "fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && ((0, jsx_runtime_1.jsx)("span", { className: "fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: (0, jsx_runtime_1.jsx)("span", { className: "fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), (0, jsx_runtime_1.jsx)("span", { className: "fileupload-item-size", children: formatSize(entry.file.size) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => removeFileEntry(entry.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), rejections.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "fileupload-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) }))] }));
+}

package/dist/cjs/components/fileupload/fileupload.recipe.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileuploadRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// seed-design's file-upload behaviour on Attio's measured scale.
+//
+// Measured from Attio's record Files pane (Deal record → Files, empty state):
+// the title is 16/20 at weight 600 in `rgb(16,17,18)` (= gray900 = fgPrimary),
+// the hint 14/20 at weight 500 in `rgba(0,0,0,0.63)`, and the action button is
+// 28px tall with an 8px corner.
+//
+// Attio draws NO boundary around that pane -- the whole surface is the drop
+// target -- but a reusable dropzone needs an edge, so the dashed affordance is
+// crisp's own measured one from `sidebar-newlist` (1px dashed borderDefault,
+// r8, bgRaised on hover) rather than a new invention. Attio's drag-OVER
+// treatment could not be measured: synthetic DragEvents do not trigger its
+// handlers. The active state therefore reuses the brand emphasis crisp already
+// uses for a live drag affordance (`appshell-resize[data-dragging]`).
+const config = (0, core_1.defineRecipe)({
+    name: "fileupload",
+    base: `
+    display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]};
+    font-family: ${tokens_1.contract.font.sans}; min-width: 0;
+
+    & .fileupload-zone {
+      box-sizing: border-box; position: relative;
+      display: flex; flex-direction: column; align-items: center;
+      justify-content: center; gap: ${tokens_1.contract.space["1"]};
+      width: 100%; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["4"]};
+      border: 1px dashed ${tokens_1.contract.borderDefault}; border-radius: ${tokens_1.contract.radius.md};
+      background: transparent; cursor: pointer; text-align: center;
+      font-family: inherit;
+      transition: background-color .12s, border-color .12s;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .fileupload-zone:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .fileupload-zone:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+    & .fileupload-zone[data-dragging] {
+      border-color: ${tokens_1.contract.bgBrandSolid};
+      background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 6%, transparent);
+    }
+    & .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .fileupload-zone[data-invalid] { border-color: ${tokens_1.contract.bgDanger}; }
+
+    /* Attio: "No files" 16/20 weight 600 */
+    & .fileupload-title {
+      color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 20px;
+      font-weight: ${tokens_1.contract.weight.semibold};
+    }
+    /* Attio: the hint line, 14/20 weight 500 at 63% of the foreground */
+    & .fileupload-hint {
+      color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent);
+      font-size: ${tokens_1.contract.text.lg}; line-height: 20px;
+      font-weight: ${tokens_1.contract.weight.medium};
+    }
+
+    & .fileupload-input {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
+    & .fileupload-list { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; margin: 0; padding: 0; list-style: none; }
+    /* the row height crisp measured for a data-grid row */
+    & .fileupload-item {
+      display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]};
+      min-height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]};
+      border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgRaised};
+      font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary};
+    }
+    & .fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .fileupload-item-size { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.sm}; font-variant-numeric: tabular-nums; }
+    & .fileupload-item[data-status="error"] { color: ${tokens_1.contract.bgDanger}; }
+    & .fileupload-item[data-status="error"] .fileupload-item-size { color: ${tokens_1.contract.bgDanger}; }
+
+    /* progress track, reusing the measured Progress geometry */
+    & .fileupload-progress {
+      flex-shrink: 0; width: 64px; height: 4px; border-radius: ${tokens_1.contract.radius.full};
+      background: ${tokens_1.contract.bgNeutralWeak}; overflow: hidden;
+    }
+    & .fileupload-progress-fill { height: 100%; background: ${tokens_1.contract.bgBrandSolid}; transition: width .2s ease; }
+
+    & .fileupload-remove {
+      display: inline-flex; align-items: center; justify-content: center;
+      flex-shrink: 0; width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon};
+      padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm};
+      background: transparent; color: ${tokens_1.contract.fgMuted}; cursor: pointer;
+      font-family: inherit;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .fileupload-remove:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .fileupload-remove:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+
+    & .fileupload-errors { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; margin: 0; padding: 0; list-style: none; }
+    & .fileupload-error { color: ${tokens_1.contract.bgDanger}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.fileuploadRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

package/dist/cjs/components/fileupload/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./fileupload"), exports);
+__exportStar(require("./fileupload.recipe"), exports);

package/dist/cjs/index.js

@@ -39,6 +39,7 @@ __exportStar(require("./components/divider"), exports);
 __exportStar(require("./components/donutchart"), exports);
 __exportStar(require("./components/drawer"), exports);
 __exportStar(require("./components/emptystate"), exports);
+__exportStar(require("./components/fileupload"), exports);
 __exportStar(require("./components/formfield"), exports);
 __exportStar(require("./components/input"), exports);
 __exportStar(require("./components/kbd"), exports);

package/dist/esm/components/fileupload/fileupload.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFileUpload, } from "@seed-design/react-file-upload";
+import { X } from "lucide-react";
+import * as React from "react";
+import { fileuploadRecipe } from "./fileupload.recipe.js";
+export const fileUploadLabels = {
+    // Attio's own copy on the record Files pane.
+    title: "No files",
+    hint: "Drag a file here or choose one from your computer.",
+    remove: "Remove file",
+    errors: {
+        FILE_TOO_LARGE: "That file is too large.",
+        FILE_TOO_SMALL: "That file is too small.",
+        TOO_MANY_FILES: "Too many files.",
+        INVALID_TYPE: "That file type is not accepted.",
+    },
+};
+/** 1000-based, matching how every file manager reports size. */
+function formatSize(bytes) {
+    if (bytes < 1000)
+        return `${bytes} B`;
+    const units = ["kB", "MB", "GB", "TB"];
+    let n = bytes;
+    let i = -1;
+    while (n >= 1000 && i < units.length - 1) {
+        n /= 1000;
+        i++;
+    }
+    return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`;
+}
+/**
+ * A file dropzone with an accepted-file list, driven by seed-design's headless
+ * engine so the behaviour — drag state, accept/reject, per-file upload status —
+ * is theirs by construction. Controlled or uncontrolled, the same way every
+ * other crisp component is.
+ */
+export function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }) {
+    const props = {
+        accept,
+        disabled: disabledProp,
+        required,
+        invalid: invalidProp,
+        readOnly,
+        maxFiles,
+        maxFileSize,
+        minFileSize,
+        name,
+        validate,
+        preventDocumentDrop,
+        onFileReject,
+        onFileAccept,
+        acceptedFileEntries: acceptedFileEntriesProp,
+        defaultAcceptedFileEntries,
+        onAcceptedFileEntriesChange,
+    };
+    const [rejections, setRejections] = React.useState([]);
+    const t = {
+        ...fileUploadLabels,
+        ...labels,
+        errors: { ...fileUploadLabels.errors, ...labels?.errors },
+    };
+    const api = useFileUpload({
+        ...props,
+        onFileReject: (r) => {
+            setRejections(r);
+            props.onFileReject?.(r);
+        },
+        onFileAccept: (entries, helpers) => {
+            setRejections([]);
+            props.onFileAccept?.(entries, helpers);
+        },
+    });
+    const { acceptedFileEntries, dragging, disabled, invalid, openFilePicker, removeFileEntry, dropzoneProps, hiddenInputProps, 
+    // The prop getters deliberately exclude the refs -- the engine's own
+    // FileUploadDropzone/HiddenInput compose them. Rendering crisp's markup
+    // instead means attaching them here; without inputRef, `openFilePicker`
+    // finds no input and returns silently, so the dropzone opens nothing.
+    inputRef, dropzoneRef, } = api;
+    return (_jsxs("div", { ...rest, className: fileuploadRecipe({ className }), children: [_jsxs("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [_jsx("span", { className: "fileupload-title", children: t.title }), _jsx("span", { className: "fileupload-hint", children: t.hint })] }), _jsx("input", { ...hiddenInputProps, ref: inputRef, className: "fileupload-input" }), acceptedFileEntries.length > 0 && (_jsx("ul", { className: "fileupload-list", children: acceptedFileEntries.map((entry) => (_jsxs("li", { className: "fileupload-item", "data-status": entry.status, children: [_jsx("span", { className: "fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && (_jsx("span", { className: "fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: _jsx("span", { className: "fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), _jsx("span", { className: "fileupload-item-size", children: formatSize(entry.file.size) }), _jsx("button", { type: "button", className: "fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => removeFileEntry(entry.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), rejections.length > 0 && (_jsx("ul", { className: "fileupload-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) }))] }));
+}

package/dist/esm/components/fileupload/fileupload.recipe.js

@@ -0,0 +1,101 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// seed-design's file-upload behaviour on Attio's measured scale.
+//
+// Measured from Attio's record Files pane (Deal record → Files, empty state):
+// the title is 16/20 at weight 600 in `rgb(16,17,18)` (= gray900 = fgPrimary),
+// the hint 14/20 at weight 500 in `rgba(0,0,0,0.63)`, and the action button is
+// 28px tall with an 8px corner.
+//
+// Attio draws NO boundary around that pane -- the whole surface is the drop
+// target -- but a reusable dropzone needs an edge, so the dashed affordance is
+// crisp's own measured one from `sidebar-newlist` (1px dashed borderDefault,
+// r8, bgRaised on hover) rather than a new invention. Attio's drag-OVER
+// treatment could not be measured: synthetic DragEvents do not trigger its
+// handlers. The active state therefore reuses the brand emphasis crisp already
+// uses for a live drag affordance (`appshell-resize[data-dragging]`).
+const config = defineRecipe({
+    name: "fileupload",
+    base: `
+    display: flex; flex-direction: column; gap: ${c.space["2"]};
+    font-family: ${c.font.sans}; min-width: 0;
+
+    & .fileupload-zone {
+      box-sizing: border-box; position: relative;
+      display: flex; flex-direction: column; align-items: center;
+      justify-content: center; gap: ${c.space["1"]};
+      width: 100%; padding: ${c.space["6"]} ${c.space["4"]};
+      border: 1px dashed ${c.borderDefault}; border-radius: ${c.radius.md};
+      background: transparent; cursor: pointer; text-align: center;
+      font-family: inherit;
+      transition: background-color .12s, border-color .12s;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .fileupload-zone:hover { background: ${c.bgRaised}; }
+    & .fileupload-zone:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .fileupload-zone[data-dragging] {
+      border-color: ${c.bgBrandSolid};
+      background: color-mix(in srgb, ${c.bgBrandSolid} 6%, transparent);
+    }
+    & .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .fileupload-zone[data-invalid] { border-color: ${c.bgDanger}; }
+
+    /* Attio: "No files" 16/20 weight 600 */
+    & .fileupload-title {
+      color: ${c.fgPrimary}; font-size: ${c.text.xl}; line-height: 20px;
+      font-weight: ${c.weight.semibold};
+    }
+    /* Attio: the hint line, 14/20 weight 500 at 63% of the foreground */
+    & .fileupload-hint {
+      color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent);
+      font-size: ${c.text.lg}; line-height: 20px;
+      font-weight: ${c.weight.medium};
+    }
+
+    & .fileupload-input {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
+    & .fileupload-list { display: flex; flex-direction: column; gap: ${c.space["1"]}; margin: 0; padding: 0; list-style: none; }
+    /* the row height crisp measured for a data-grid row */
+    & .fileupload-item {
+      display: flex; align-items: center; gap: ${c.space["2"]};
+      min-height: ${c.size.tableRow}; padding: 0 ${c.space["2"]};
+      border-radius: ${c.radius.md}; background: ${c.bgRaised};
+      font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary};
+    }
+    & .fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .fileupload-item-size { flex-shrink: 0; color: ${c.fgMuted}; font-size: ${c.text.sm}; font-variant-numeric: tabular-nums; }
+    & .fileupload-item[data-status="error"] { color: ${c.bgDanger}; }
+    & .fileupload-item[data-status="error"] .fileupload-item-size { color: ${c.bgDanger}; }
+
+    /* progress track, reusing the measured Progress geometry */
+    & .fileupload-progress {
+      flex-shrink: 0; width: 64px; height: 4px; border-radius: ${c.radius.full};
+      background: ${c.bgNeutralWeak}; overflow: hidden;
+    }
+    & .fileupload-progress-fill { height: 100%; background: ${c.bgBrandSolid}; transition: width .2s ease; }
+
+    & .fileupload-remove {
+      display: inline-flex; align-items: center; justify-content: center;
+      flex-shrink: 0; width: ${c.size.icon}; height: ${c.size.icon};
+      padding: 0; border: none; border-radius: ${c.radius.sm};
+      background: transparent; color: ${c.fgMuted}; cursor: pointer;
+      font-family: inherit;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .fileupload-remove:hover { color: ${c.fgPrimary}; }
+    & .fileupload-remove:focus-visible { outline-color: ${c.strokeFocusRing}; }
+
+    & .fileupload-errors { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; margin: 0; padding: 0; list-style: none; }
+    & .fileupload-error { color: ${c.bgDanger}; font-size: ${c.text.md}; line-height: 18px; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const fileuploadRecipe = Object.assign(resolveRecipe(config), {
+    config,
+});
+export default config;

package/dist/esm/components/fileupload/index.js

@@ -0,0 +1,2 @@
+export * from "./fileupload.js";
+export * from "./fileupload.recipe.js";

package/dist/esm/index.js

@@ -23,6 +23,7 @@ export * from "./components/divider/index.js";
 export * from "./components/donutchart/index.js";
 export * from "./components/drawer/index.js";
 export * from "./components/emptystate/index.js";
+export * from "./components/fileupload/index.js";
 export * from "./components/formfield/index.js";
 export * from "./components/input/index.js";
 export * from "./components/kbd/index.js";

package/dist/fileupload.css

@@ -0,0 +1,85 @@
+.fileupload {
+  
+    display: flex; flex-direction: column; gap: var(--space-2);
+    font-family: var(--font-sans); min-width: 0;
+
+    & .fileupload-zone {
+      box-sizing: border-box; position: relative;
+      display: flex; flex-direction: column; align-items: center;
+      justify-content: center; gap: var(--space-1);
+      width: 100%; padding: var(--space-6) var(--space-4);
+      border: 1px dashed var(--border-default); border-radius: var(--radius-md);
+      background: transparent; cursor: pointer; text-align: center;
+      font-family: inherit;
+      transition: background-color .12s, border-color .12s;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .fileupload-zone:hover { background: var(--bg-raised); }
+    & .fileupload-zone:focus-visible { outline-color: var(--stroke-focus-ring); }
+    & .fileupload-zone[data-dragging] {
+      border-color: var(--bg-brand-solid);
+      background: color-mix(in srgb, var(--bg-brand-solid) 6%, transparent);
+    }
+    & .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .fileupload-zone[data-invalid] { border-color: var(--bg-danger); }
+
+    /* Attio: "No files" 16/20 weight 600 */
+    & .fileupload-title {
+      color: var(--fg-primary); font-size: var(--text-xl); line-height: 20px;
+      font-weight: var(--weight-semibold);
+    }
+    /* Attio: the hint line, 14/20 weight 500 at 63% of the foreground */
+    & .fileupload-hint {
+      color: color-mix(in srgb, var(--fg-primary) 63%, transparent);
+      font-size: var(--text-lg); line-height: 20px;
+      font-weight: var(--weight-medium);
+    }
+
+    & .fileupload-input {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
+    & .fileupload-list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
+    /* the row height crisp measured for a data-grid row */
+    & .fileupload-item {
+      display: flex; align-items: center; gap: var(--space-2);
+      min-height: var(--size-tableRow); padding: 0 var(--space-2);
+      border-radius: var(--radius-md); background: var(--bg-raised);
+      font-size: var(--text-lg); line-height: 20px; color: var(--fg-primary);
+    }
+    & .fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .fileupload-item-size { flex-shrink: 0; color: var(--fg-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
+    & .fileupload-item[data-status="error"] { color: var(--bg-danger); }
+    & .fileupload-item[data-status="error"] .fileupload-item-size { color: var(--bg-danger); }
+
+    /* progress track, reusing the measured Progress geometry */
+    & .fileupload-progress {
+      flex-shrink: 0; width: 64px; height: 4px; border-radius: var(--radius-full);
+      background: var(--bg-neutral-weak); overflow: hidden;
+    }
+    & .fileupload-progress-fill { height: 100%; background: var(--bg-brand-solid); transition: width .2s ease; }
+
+    & .fileupload-remove {
+      display: inline-flex; align-items: center; justify-content: center;
+      flex-shrink: 0; width: var(--size-icon); height: var(--size-icon);
+      padding: 0; border: none; border-radius: var(--radius-sm);
+      background: transparent; color: var(--fg-muted); cursor: pointer;
+      font-family: inherit;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .fileupload-remove:hover { color: var(--fg-primary); }
+    & .fileupload-remove:focus-visible { outline-color: var(--stroke-focus-ring); }
+
+    & .fileupload-errors { display: flex; flex-direction: column; gap: var(--space-0-5); margin: 0; padding: 0; list-style: none; }
+    & .fileupload-error { color: var(--bg-danger); font-size: var(--text-md); line-height: 18px; }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fileupload, .fileupload * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/fileupload.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface FileuploadVariants {
+
+}
+
+export declare const fileuploadRecipe: RecipeFn<{  }>;

package/dist/styles.css

@@ -874,6 +874,92 @@
     & .emptystate-action { margin-top: var(--space-2); }
 }
 
+.fileupload {
+  
+    display: flex; flex-direction: column; gap: var(--space-2);
+    font-family: var(--font-sans); min-width: 0;
+
+    & .fileupload-zone {
+      box-sizing: border-box; position: relative;
+      display: flex; flex-direction: column; align-items: center;
+      justify-content: center; gap: var(--space-1);
+      width: 100%; padding: var(--space-6) var(--space-4);
+      border: 1px dashed var(--border-default); border-radius: var(--radius-md);
+      background: transparent; cursor: pointer; text-align: center;
+      font-family: inherit;
+      transition: background-color .12s, border-color .12s;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .fileupload-zone:hover { background: var(--bg-raised); }
+    & .fileupload-zone:focus-visible { outline-color: var(--stroke-focus-ring); }
+    & .fileupload-zone[data-dragging] {
+      border-color: var(--bg-brand-solid);
+      background: color-mix(in srgb, var(--bg-brand-solid) 6%, transparent);
+    }
+    & .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .fileupload-zone[data-invalid] { border-color: var(--bg-danger); }
+
+    /* Attio: "No files" 16/20 weight 600 */
+    & .fileupload-title {
+      color: var(--fg-primary); font-size: var(--text-xl); line-height: 20px;
+      font-weight: var(--weight-semibold);
+    }
+    /* Attio: the hint line, 14/20 weight 500 at 63% of the foreground */
+    & .fileupload-hint {
+      color: color-mix(in srgb, var(--fg-primary) 63%, transparent);
+      font-size: var(--text-lg); line-height: 20px;
+      font-weight: var(--weight-medium);
+    }
+
+    & .fileupload-input {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
+    & .fileupload-list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
+    /* the row height crisp measured for a data-grid row */
+    & .fileupload-item {
+      display: flex; align-items: center; gap: var(--space-2);
+      min-height: var(--size-tableRow); padding: 0 var(--space-2);
+      border-radius: var(--radius-md); background: var(--bg-raised);
+      font-size: var(--text-lg); line-height: 20px; color: var(--fg-primary);
+    }
+    & .fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .fileupload-item-size { flex-shrink: 0; color: var(--fg-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
+    & .fileupload-item[data-status="error"] { color: var(--bg-danger); }
+    & .fileupload-item[data-status="error"] .fileupload-item-size { color: var(--bg-danger); }
+
+    /* progress track, reusing the measured Progress geometry */
+    & .fileupload-progress {
+      flex-shrink: 0; width: 64px; height: 4px; border-radius: var(--radius-full);
+      background: var(--bg-neutral-weak); overflow: hidden;
+    }
+    & .fileupload-progress-fill { height: 100%; background: var(--bg-brand-solid); transition: width .2s ease; }
+
+    & .fileupload-remove {
+      display: inline-flex; align-items: center; justify-content: center;
+      flex-shrink: 0; width: var(--size-icon); height: var(--size-icon);
+      padding: 0; border: none; border-radius: var(--radius-sm);
+      background: transparent; color: var(--fg-muted); cursor: pointer;
+      font-family: inherit;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .fileupload-remove:hover { color: var(--fg-primary); }
+    & .fileupload-remove:focus-visible { outline-color: var(--stroke-focus-ring); }
+
+    & .fileupload-errors { display: flex; flex-direction: column; gap: var(--space-0-5); margin: 0; padding: 0; list-style: none; }
+    & .fileupload-error { color: var(--bg-danger); font-size: var(--text-md); line-height: 18px; }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fileupload, .fileupload * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .formfield {
   display: flex; flex-direction: column; gap: var(--space-1-5); box-sizing: border-box; font-family: var(--font-sans);
     & .formfield-label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }

package/dist/types/components/fileupload/fileupload.d.ts

@@ -0,0 +1,24 @@
+import { type FileEntry, type FileError, type FileRejection, type UseFileUploadProps } from "@seed-design/react-file-upload";
+import * as React from "react";
+export type { FileEntry, FileError, FileRejection };
+/** Every user-facing string, so a consumer can translate without restating the rest. */
+export type FileUploadLabels = {
+    title: string;
+    hint: string;
+    remove: string;
+    errors: Record<string, string>;
+};
+export declare const fileUploadLabels: FileUploadLabels;
+export type FileUploadProps = UseFileUploadProps & Omit<React.ComponentPropsWithoutRef<"div">, keyof UseFileUploadProps | "children"> & {
+    /** PARTIAL override of the chrome strings; anything omitted keeps its default. */
+    labels?: Partial<Omit<FileUploadLabels, "errors">> & {
+        errors?: Record<string, string>;
+    };
+};
+/**
+ * A file dropzone with an accepted-file list, driven by seed-design's headless
+ * engine so the behaviour — drag state, accept/reject, per-file upload status —
+ * is theirs by construction. Controlled or uncontrolled, the same way every
+ * other crisp component is.
+ */
+export declare function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }: FileUploadProps): React.JSX.Element;

package/dist/types/components/fileupload/fileupload.recipe.d.ts

@@ -0,0 +1,5 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const fileuploadRecipe: import("../..").RecipeFn<{}> & {
+    config: import("../..").RecipeConfig<{}>;
+};
+export default config;

package/dist/types/components/fileupload/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./fileupload";
+export * from "./fileupload.recipe";

package/dist/types/index.d.ts

@@ -19,6 +19,7 @@ export * from "./components/divider";
 export * from "./components/donutchart";
 export * from "./components/drawer";
 export * from "./components/emptystate";
+export * from "./components/fileupload";
 export * from "./components/formfield";
 export * from "./components/input";
 export * from "./components/kbd";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -137,6 +137,11 @@
       "import": "./dist/esm/components/emptystate/index.js",
       "require": "./dist/cjs/components/emptystate/index.js"
     },
+    "./fileupload": {
+      "types": "./dist/types/components/fileupload/index.d.ts",
+      "import": "./dist/esm/components/fileupload/index.js",
+      "require": "./dist/cjs/components/fileupload/index.js"
+    },
     "./formfield": {
       "types": "./dist/types/components/formfield/index.d.ts",
       "import": "./dist/esm/components/formfield/index.js",
@@ -407,6 +412,7 @@
     "@radix-ui/react-slot": "^1.3.3",
     "@seed-design/dom-utils": "^2.1.0",
     "@seed-design/react-date-picker": "1.2.0",
+    "@seed-design/react-file-upload": "1.0.1",
     "@zag-js/combobox": "^1.43.3",
     "@zag-js/dialog": "^1.43.3",
     "@zag-js/react": "^1.43.3",