@robr0/design-system 0.1.0

package/components/FileInput/FileInput.css

@@ -0,0 +1,308 @@
+/* ============================================
+   FILE INPUT COMPONENT
+   Click-or-drop zone plus a controlled file list
+   ============================================ */
+
+.ds-file-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-file-input__label {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-file-input__required {
+  color: var(--color-core-accent-coral);
+}
+
+/* ============================================
+   DROPZONE
+   ============================================ */
+
+.ds-file-input__dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--gap-xs); /* 4px */
+  padding: var(--padding-xl); /* 32px */
+  border: var(--border-xs) dashed var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-input-bg-primary);
+  cursor: pointer;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-file-input__dropzone:hover {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-file-input__dropzone:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-file-input--dragging .ds-file-input__dropzone {
+  border-color: var(--color-input-border-selected);
+  background-color: var(--color-bg-container-primary);
+}
+
+.ds-file-input__dropzone-icon {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-icon-primary);
+}
+
+.ds-file-input__dropzone-text {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-file-input__dropzone-hint {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+/* The real input stays in the DOM for form semantics but is never shown */
+.ds-file-input__native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ============================================
+   FILE LIST
+   ============================================ */
+
+.ds-file-input__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs); /* 4px */
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ds-file-input__file {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm-md);
+  padding: var(--padding-sm) var(--padding-sm-md); /* 8px 12px */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-bg-page-primary);
+}
+
+.ds-file-input__file--error {
+  border-color: var(--color-status-error-border);
+  background-color: var(--color-status-error-bg);
+}
+
+.ds-file-input__file-icon {
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-file-input__file--error .ds-file-input__file-icon {
+  color: var(--color-status-error-border);
+}
+
+.ds-file-input__file-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-file-input__file-name {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-file-input__file-size {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+.ds-file-input__file-error {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   PER-FILE PROGRESS
+   ============================================ */
+
+.ds-file-input__progress {
+  display: block;
+  width: 100%;
+  height: 4px;
+  margin-top: var(--gap-xxs);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-primary);
+  overflow: hidden;
+}
+
+.ds-file-input__progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-full);
+  background-color: var(--color-action-primary-bg);
+  transition: width var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   REMOVE BUTTON
+   ============================================ */
+
+.ds-file-input__file-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-file-input__file-remove:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-file-input__file-remove:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-file-input__file-remove:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-file-input__file-remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   HELPER TEXT
+   ============================================ */
+
+.ds-file-input__helper {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+  margin: 0;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-file-input--error .ds-file-input__dropzone {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-file-input--error .ds-file-input__helper {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-file-input--disabled .ds-file-input__label {
+  color: var(--color-input-text-disabled);
+}
+
+.ds-file-input--disabled .ds-file-input__dropzone {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  cursor: not-allowed;
+}
+
+.ds-file-input--disabled .ds-file-input__dropzone-text,
+.ds-file-input--disabled .ds-file-input__dropzone-hint,
+.ds-file-input--disabled .ds-file-input__dropzone-icon {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-file-input--compact .ds-file-input__dropzone {
+  padding: var(--padding-lg); /* 20px */
+}
+
+.ds-file-input--compact .ds-file-input__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+}
+
+.ds-file-input--compact .ds-file-input__dropzone-icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-file-input--compact .ds-file-input__dropzone-text,
+.ds-file-input--compact .ds-file-input__file-name {
+  font-size: var(--font-paragraph-sm-em-size);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-file-input--compact .ds-file-input__file {
+  padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
+}

package/components/FileInput/FileInput.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+export interface FileInputFile {
+    /** Stable identifier */
+    id: string;
+    /** File name shown in the list */
+    name: string;
+    /** Size in bytes — rendered human-readable */
+    size?: number;
+    /** Upload progress 0–100. Omit for files that are already stored. */
+    progress?: number;
+    /** Per-file error message — replaces the size line */
+    error?: string;
+}
+export interface FileInputProps {
+    /** Field label above the dropzone */
+    label?: string;
+    /** Instructional copy inside the dropzone */
+    placeholder?: string;
+    /** Comma-separated accept list, e.g. 'image/*,.pdf' */
+    accept?: string;
+    /** Allow selecting more than one file */
+    multiple?: boolean;
+    /** Files to list under the dropzone */
+    files?: FileInputFile[];
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Error state — shows error styling and message */
+    error?: boolean;
+    /** Helper or error message displayed below the field */
+    helperText?: string;
+    /** Called with the newly selected files */
+    onFilesSelected?: (files: File[]) => void;
+    /** Called with the id of a file whose remove button was pressed */
+    onFileRemove?: (id: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible name override */
+    ariaLabel?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** HTML id attribute */
+    id?: string;
+}
+/**
+ * FileInput component — a click-or-drop zone paired with a list of the
+ * chosen files. The list is fully controlled: pass `files` and handle
+ * `onFilesSelected` / `onFileRemove` so upload progress and per-file
+ * errors stay owned by the host app.
+ */
+export declare const FileInput: ({ label, placeholder, accept, multiple, files, size, disabled, required, error, helperText, onFilesSelected, onFileRemove, className, ariaLabel, name, id, }: FileInputProps) => React.JSX.Element;

package/components/FileInput/FileInput.js

@@ -0,0 +1,177 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useId } from "react";
+import "./FileInput.css";
+import "../../fonts/material-symbols.css";
+const formatBytes = (bytes) => {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / Math.pow(1024, exponent);
+  return `${exponent === 0 ? value : value.toFixed(1)} ${units[exponent]}`;
+};
+const FileInput = ({
+  label,
+  placeholder = "Drag and drop, or click to browse",
+  accept,
+  multiple = false,
+  files = [],
+  size = "default",
+  disabled = false,
+  required = false,
+  error = false,
+  helperText,
+  onFilesSelected,
+  onFileRemove,
+  className = "",
+  ariaLabel,
+  name,
+  id
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef(null);
+  const generatedId = useId();
+  const inputId = id || name || generatedId;
+  const baseClass = "ds-file-input";
+  const emitFiles = (fileList) => {
+    if (!fileList || fileList.length === 0) return;
+    onFilesSelected?.(Array.from(fileList));
+  };
+  const handleChange = (e) => {
+    emitFiles(e.target.files);
+    e.target.value = "";
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled) return;
+    emitFiles(e.dataTransfer.files);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setIsDragging(false);
+  };
+  const openPicker = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openPicker();
+    }
+  };
+  const classes = [
+    baseClass,
+    size === "compact" ? `${baseClass}--compact` : "",
+    error ? `${baseClass}--error` : "",
+    disabled ? `${baseClass}--disabled` : "",
+    isDragging ? `${baseClass}--dragging` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
+        " ",
+        "*"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${baseClass}__dropzone`,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": ariaLabel || placeholder,
+        "aria-describedby": helperText ? `${inputId}-helper` : void 0,
+        "aria-disabled": disabled || void 0,
+        onClick: openPicker,
+        onKeyDown: handleKeyDown,
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__dropzone-icon material-symbols-rounded`, "aria-hidden": "true", children: "upload_file" }),
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__dropzone-text`, children: placeholder }),
+          accept && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dropzone-hint`, children: [
+            "Accepts ",
+            accept
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: inputId,
+              name,
+              type: "file",
+              className: `${baseClass}__native`,
+              accept,
+              multiple,
+              disabled,
+              required,
+              tabIndex: -1,
+              onChange: handleChange
+            }
+          )
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, children: files.map((file) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: [`${baseClass}__file`, file.error ? `${baseClass}__file--error` : ""].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__file-icon material-symbols-rounded`,
+              "aria-hidden": "true",
+              children: file.error ? "error" : "description"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__file-details`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-name`, children: file.name }),
+            file.error ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-error`, children: file.error }) : file.size !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-size`, children: formatBytes(file.size) }),
+            file.error === void 0 && file.progress !== void 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__progress`,
+                role: "progressbar",
+                "aria-valuenow": file.progress,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-label": `Uploading ${file.name}`,
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__progress-fill`,
+                    style: { width: `${Math.min(100, Math.max(0, file.progress))}%` }
+                  }
+                )
+              }
+            )
+          ] }),
+          onFileRemove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__file-remove`,
+              onClick: () => onFileRemove(file.id),
+              disabled,
+              "aria-label": `Remove ${file.name}`,
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+            }
+          )
+        ]
+      },
+      file.id
+    )) }),
+    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
+  ] });
+};
+export {
+  FileInput
+};