@inglorious/ui 6.1.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -113,6 +113,16 @@
       "import": "./src/controls/switch/index.js"
     },
     "./switch.css": "./src/controls/switch/style.css",
+    "./textarea": {
+      "types": "./types/controls/textarea.d.ts",
+      "import": "./src/controls/textarea/index.js"
+    },
+    "./textarea.css": "./src/controls/textarea/style.css",
+    "./file-upload": {
+      "types": "./types/controls/file-upload.d.ts",
+      "import": "./src/controls/file-upload/index.js"
+    },
+    "./file-upload.css": "./src/controls/file-upload/style.css",
     "./card": {
       "types": "./types/surfaces/card.d.ts",
       "import": "./src/surfaces/card/index.js"
@@ -290,10 +300,10 @@
     "**/*.css"
   ],
   "peerDependencies": {
+    "@inglorious/charts": "10.0.0",
     "@inglorious/store": "11.0.0",
-    "@inglorious/utils": "3.8.0",
-    "@inglorious/charts": "9.0.0",
-    "@inglorious/web": "6.3.0"
+    "@inglorious/web": "6.4.0",
+    "@inglorious/utils": "3.8.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.2.36",
@@ -308,10 +318,10 @@
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
     "@inglorious/eslint-config": "1.1.2",
+    "@inglorious/web": "6.4.0",
     "@inglorious/vite-plugin-vue": "1.0.1",
     "@inglorious/vite-plugin-jsx": "2.0.0",
-    "@inglorious/store": "11.0.0",
-    "@inglorious/web": "6.3.0"
+    "@inglorious/store": "11.0.0"
   },
   "engines": {
     "node": ">= 22"

package/src/controls/controls.css

@@ -10,3 +10,5 @@
 @import "./select/style.css";
 @import "./slider/style.css";
 @import "./switch/style.css";
+@import "./textarea/style.css";
+@import "./file-upload/style.css";

package/src/controls/file-upload/file-upload.stories.js

@@ -0,0 +1,93 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { FileUpload } from "./index.js"
+
+export default {
+  title: "Controls/FileUpload",
+  tags: ["autodocs"],
+  render: createRender(FileUpload),
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label rendered above the upload area.",
+    },
+    name: {
+      control: "text",
+      description: "Native HTML file input name attribute.",
+    },
+    accept: {
+      control: "text",
+      description: "Accepted file types, such as .pdf,.png,image/*.",
+    },
+    isMultiple: {
+      control: "boolean",
+      description: "Allows selecting multiple files.",
+    },
+    hint: {
+      control: "text",
+      description: "Helper text shown below the field when there is no error.",
+    },
+    error: {
+      control: "text",
+      description: "Validation message shown below the field.",
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "Disables user input and interaction.",
+    },
+    isRequired: {
+      control: "boolean",
+      description: "Marks the field as required.",
+    },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expands the upload area width to 100% of its container.",
+    },
+    selectedFiles: {
+      control: "object",
+      description: "Current list of selected file names for display.",
+    },
+    onChange: { action: "onChange" },
+    onBlur: { action: "onBlur" },
+    onFocus: { action: "onFocus" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Upload area for files with native input semantics, validation, and a clean drag-and-drop style.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  label: "Resume",
+  name: "resume",
+  accept: ".pdf,.doc,.docx",
+  isMultiple: false,
+  hint: "Upload your resume in PDF or DOC format.",
+  error: "",
+  isDisabled: false,
+  isRequired: false,
+  isFullWidth: false,
+  selectedFiles: [],
+  title: "Choose file",
+  description: "or drag and drop here",
+}
+
+export const Selected = {}
+Selected.args = {
+  ...Default.args,
+  label: "Attachments",
+  isMultiple: true,
+  selectedFiles: ["brief.pdf", "notes.md"],
+}
+
+export const Error = {}
+Error.args = {
+  ...Default.args,
+  label: "Invoice",
+  error: "Only PDF files under 5MB are allowed.",
+  selectedFiles: ["invoice.png"],
+}

package/src/controls/file-upload/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const FileUpload = { ...renderers }

package/src/controls/file-upload/style.css

@@ -0,0 +1,99 @@
+.iw-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-1);
+  font-family: var(--iw-font-family-sans);
+
+  &.iw-upload-full-width .iw-upload-field-box {
+    width: 100%;
+  }
+
+  .iw-upload-label {
+    font-size: var(--iw-font-size-sm);
+    font-weight: var(--iw-font-weight-normal);
+    color: var(--iw-color-text);
+  }
+
+  .iw-upload-required {
+    color: var(--iw-color-error);
+    margin-left: var(--iw-space-1);
+  }
+
+  .iw-upload-field-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 7rem;
+    padding: var(--iw-space-4);
+    border: 1px dashed var(--iw-input-border);
+    border-radius: var(--iw-input-radius);
+    background: var(--iw-input-bg);
+    color: var(--iw-color-text);
+    transition: all var(--iw-transition-fast);
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background: var(--iw-input-bg-hover);
+      border-color: var(--iw-input-border-hover);
+    }
+
+    &:focus-within {
+      border-color: var(--iw-input-border-focus);
+      box-shadow: var(--iw-input-shadow-focus);
+    }
+
+    &.iw-upload-field-error {
+      border-color: var(--iw-color-error);
+
+      &:focus-within {
+        border-color: var(--iw-color-error);
+        box-shadow: 0 0 0 1px var(--iw-color-error);
+      }
+    }
+  }
+
+  .iw-upload-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .iw-upload-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--iw-space-1);
+    pointer-events: none;
+    text-align: center;
+  }
+
+  .iw-upload-title {
+    font-weight: var(--iw-font-weight-medium);
+  }
+
+  .iw-upload-description {
+    color: var(--iw-color-text-muted);
+    font-size: var(--iw-font-size-sm);
+  }
+
+  .iw-upload-field-summary {
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text-muted);
+  }
+
+  .iw-upload-hint,
+  .iw-upload-error-message {
+    font-size: var(--iw-font-size-sm);
+    line-height: var(--iw-line-height-normal);
+  }
+
+  .iw-upload-hint {
+    color: var(--iw-color-text-muted);
+  }
+
+  .iw-upload-error-message {
+    color: var(--iw-color-error);
+  }
+}

package/src/controls/file-upload/template.js

@@ -0,0 +1,100 @@
+/**
+ * @typedef {import('../../../types/controls/file-upload').FileUploadProps} FileUploadProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * Renders a labeled file upload area with optional summary, hint, and error text.
+ * Supports drag-and-drop handling through file input semantics.
+ * @param {FileUploadProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    id,
+    name = "",
+    label,
+    hint,
+    error,
+    accept,
+    isMultiple = false,
+    isDisabled = false,
+    isRequired = false,
+    isFullWidth = false,
+    selectedFiles = [],
+    title = "Choose files",
+    description = "or drag and drop here",
+    onChange,
+    onBlur,
+    onFocus,
+    ...rest
+  } = props
+
+  const uploadId = id || name || "file-upload"
+
+  const wrapperClasses = {
+    "iw-upload": true,
+    "iw-upload-full-width": isFullWidth,
+    "iw-upload-disabled": isDisabled,
+    "iw-upload-has-error": !!error,
+  }
+
+  const fieldClasses = {
+    "iw-upload-field-box": true,
+    "iw-upload-field-error": !!error,
+  }
+
+  const summaryText =
+    selectedFiles.length > 0 ? selectedFiles.join(", ") : "No file selected"
+
+  return html`
+    <div class=${classMap(wrapperClasses)}>
+      ${label
+        ? html`
+            <label for=${uploadId} class="iw-upload-label">
+              ${label}
+              ${isRequired
+                ? html`<span class="iw-upload-required">*</span>`
+                : null}
+            </label>
+          `
+        : null}
+
+      <div class=${classMap(fieldClasses)}>
+        <input
+          id=${uploadId}
+          name=${name}
+          type="file"
+          accept=${accept ?? ""}
+          ?multiple=${isMultiple}
+          ?disabled=${isDisabled}
+          ?required=${isRequired}
+          class="iw-upload-input"
+          @change=${(event) => onChange?.(event.target.files)}
+          @blur=${onBlur}
+          @focus=${onFocus}
+          ${ref((element) => applyElementProps(element, rest))}
+        />
+
+        <div class="iw-upload-content">
+          <span class="iw-upload-title">${title}</span>
+          <span class="iw-upload-description">${description}</span>
+        </div>
+      </div>
+
+      <div class="iw-upload-field-summary">${summaryText}</div>
+
+      ${error
+        ? html`<span class="iw-upload-error-message">${error}</span>`
+        : hint
+          ? html`<span class="iw-upload-hint">${hint}</span>`
+          : null}
+    </div>
+  `
+}

package/src/controls/input/input.stories.js

@@ -1,12 +1,45 @@
+import { html } from "@inglorious/web"
+
 import { createRender } from "../../stories/notifyStory.js"
 import { Input } from "."
 
+const nativeInputTypes = [
+  "text",
+  "password",
+  "email",
+  "number",
+  "tel",
+  "url",
+  "search",
+  "date",
+  "time",
+  "datetime-local",
+  "month",
+  "week",
+  "color",
+]
+
+const nativeInputDefaults = {
+  text: { label: "Text", value: "Hello world" },
+  password: { label: "Password", value: "secret123" },
+  email: { label: "Email", value: "you@example.com" },
+  number: { label: "Number", value: "42" },
+  tel: { label: "Phone", value: "+1 555 123 4567" },
+  url: { label: "Website", value: "https://example.com" },
+  search: { label: "Search", value: "inglorious" },
+  date: { label: "Date", value: "2026-08-10" },
+  time: { label: "Time", value: "09:30" },
+  "datetime-local": { label: "Date and time", value: "2026-08-10T09:30" },
+  month: { label: "Month", value: "2026-08" },
+  week: { label: "Week", value: "2026-W32" },
+  color: { label: "Color", value: "#7c3aed" },
+}
+
 export default {
   title: "Controls/Input",
   tags: ["autodocs"],
   render: createRender(Input),
   argTypes: {
-    // ...notifyActionArgType,
     label: {
       control: "text",
       description: "Field label rendered above the input.",
@@ -19,9 +52,9 @@ export default {
       control: "text",
       description: "Native HTML input name attribute.",
     },
-    type: {
+    inputType: {
       control: "select",
-      options: ["text", "email", "password", "number", "tel", "url", "search"],
+      options: nativeInputTypes,
       description: "Native HTML input type.",
     },
     inputmode: {
@@ -101,6 +134,28 @@ Default.args = {
   isFullWidth: false,
 }
 
+export const ManagedNativeTypes = {
+  render: (args) => html`
+    <div style="display: grid; gap: 1rem; max-width: 40rem;">
+      ${nativeInputTypes.map((inputType) =>
+        Input.render({
+          ...args,
+          ...nativeInputDefaults[inputType],
+          name: `${inputType}-field`,
+          label: nativeInputDefaults[inputType].label,
+          inputType,
+          value: nativeInputDefaults[inputType].value,
+        }),
+      )}
+    </div>
+  `,
+}
+
+ManagedNativeTypes.args = {
+  ...Default.args,
+  label: "Managed native types",
+}
+
 export const WithHint = {}
 WithHint.args = {
   ...Default.args,
@@ -179,3 +234,55 @@ Number.args = {
   inputmode: "decimal",
   "data-testid": "amount-input",
 }
+
+export const Date = {}
+Date.args = {
+  ...Default.args,
+  label: "Date",
+  inputType: "date",
+  value: "2026-08-10",
+  min: "2024-01-01",
+  max: "2027-12-31",
+}
+
+export const Time = {}
+Time.args = {
+  ...Default.args,
+  label: "Time",
+  inputType: "time",
+  value: "09:30",
+  min: "08:00",
+  max: "18:00",
+}
+
+export const DateTimeLocal = {}
+DateTimeLocal.args = {
+  ...Default.args,
+  label: "Date and time",
+  inputType: "datetime-local",
+  value: "2026-08-10T09:30",
+}
+
+export const Month = {}
+Month.args = {
+  ...Default.args,
+  label: "Month",
+  inputType: "month",
+  value: "2026-08",
+}
+
+export const Week = {}
+Week.args = {
+  ...Default.args,
+  label: "Week",
+  inputType: "week",
+  value: "2026-W32",
+}
+
+export const Color = {}
+Color.args = {
+  ...Default.args,
+  label: "Color",
+  inputType: "color",
+  value: "#7c3aed",
+}

package/src/controls/textarea/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const Textarea = { ...renderers }

package/src/controls/textarea/style.css

@@ -0,0 +1,98 @@
+.iw-textarea-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-1);
+  font-family: var(--iw-font-family-sans);
+
+  &.iw-textarea-full-width .iw-textarea {
+    width: 100%;
+  }
+
+  .iw-textarea-label {
+    font-size: var(--iw-font-size-sm);
+    font-weight: var(--iw-font-weight-normal);
+    color: var(--iw-color-text);
+  }
+
+  .iw-textarea-required {
+    color: var(--iw-color-error);
+    margin-left: var(--iw-space-1);
+  }
+
+  .iw-textarea {
+    min-height: 3rem;
+    width: min(100%, 100%);
+    resize: none;
+    padding: var(--iw-space-2) var(--iw-space-3);
+    font-family: inherit;
+    font-size: var(--iw-font-size-base);
+    line-height: 1.5;
+    color: var(--iw-input-text);
+    background-color: var(--iw-input-bg);
+    border: 1px solid var(--iw-input-border);
+    border-radius: var(--iw-input-radius);
+    outline: none;
+    transition: all var(--iw-transition-fast);
+
+    &::placeholder {
+      color: var(--iw-input-text-placeholder);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--iw-input-bg-hover);
+      border-color: var(--iw-input-border-hover);
+    }
+
+    &:focus:not(:disabled) {
+      background-color: var(--iw-input-bg-focus);
+      border-color: var(--iw-input-border-focus);
+      box-shadow: var(--iw-input-shadow-focus);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &.iw-textarea-auto-size {
+      field-sizing: content;
+    }
+
+    &.iw-textarea-resizable {
+      resize: vertical;
+    }
+
+    &.iw-textarea-error {
+      border-color: var(--iw-color-error);
+
+      &:focus {
+        border-color: var(--iw-color-error);
+        box-shadow: 0 0 0 1px var(--iw-color-error);
+      }
+    }
+
+    &.iw-textarea-sm {
+      padding: var(--iw-space-1) var(--iw-space-2);
+      font-size: var(--iw-font-size-sm);
+    }
+
+    &.iw-textarea-lg {
+      padding: var(--iw-space-3) var(--iw-space-4);
+      font-size: var(--iw-font-size-lg);
+    }
+  }
+
+  .iw-textarea-hint,
+  .iw-textarea-error-message {
+    font-size: var(--iw-font-size-sm);
+    line-height: var(--iw-line-height-normal);
+  }
+
+  .iw-textarea-hint {
+    color: var(--iw-color-text-muted);
+  }
+
+  .iw-textarea-error-message {
+    color: var(--iw-color-error);
+  }
+}

package/src/controls/textarea/template.js

@@ -0,0 +1,94 @@
+/**
+ * @typedef {import('../../../types/controls/textarea').TextareaProps} TextareaProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * Renders a labeled textarea field with optional hint and error messaging.
+ * Supports disabled/readonly/required states and emits `onChange` on input.
+ * @param {TextareaProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    id,
+    name = "",
+    value = "",
+    placeholder = "",
+    label,
+    hint,
+    error,
+    size = "md",
+    rows = 4,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    isFullWidth = false,
+    isAutoSize = false,
+    isResizable = false,
+    onChange,
+    onBlur,
+    onFocus,
+    ...rest
+  } = props
+
+  const textareaId = id || name
+
+  const wrapperClasses = {
+    "iw-textarea-field": true,
+    "iw-textarea-full-width": isFullWidth,
+    "iw-textarea-disabled": isDisabled,
+    "iw-textarea-has-error": !!error,
+  }
+
+  const textareaClasses = {
+    "iw-textarea": true,
+    [`iw-textarea-${size}`]: size !== "md",
+    "iw-textarea-error": !!error,
+    "iw-textarea-auto-size": isAutoSize,
+    "iw-textarea-resizable": isResizable,
+  }
+
+  return html`
+    <div class=${classMap(wrapperClasses)}>
+      ${label
+        ? html`
+            <label for=${textareaId} class="iw-textarea-label">
+              ${label}
+              ${isRequired
+                ? html`<span class="iw-textarea-required">*</span>`
+                : null}
+            </label>
+          `
+        : null}
+
+      <textarea
+        id=${textareaId}
+        name=${name}
+        rows=${rows}
+        .value=${value}
+        placeholder=${placeholder}
+        ?disabled=${isDisabled}
+        ?readonly=${isReadOnly}
+        ?required=${isRequired}
+        class=${classMap(textareaClasses)}
+        @input=${(event) => onChange?.(event.target.value)}
+        @blur=${onBlur}
+        @focus=${onFocus}
+        ${ref((element) => applyElementProps(element, rest))}
+      ></textarea>
+
+      ${error
+        ? html`<span class="iw-textarea-error-message">${error}</span>`
+        : hint
+          ? html`<span class="iw-textarea-hint">${hint}</span>`
+          : null}
+    </div>
+  `
+}

package/src/controls/textarea/textarea.stories.js

@@ -0,0 +1,158 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { Textarea } from "."
+
+export default {
+  title: "Controls/Textarea",
+  tags: ["autodocs"],
+  render: createRender(Textarea),
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label rendered above the textarea.",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text shown when value is empty.",
+    },
+    name: {
+      control: "text",
+      description: "Native HTML textarea name attribute.",
+    },
+    value: {
+      control: "text",
+      description: "Current textarea value.",
+    },
+    hint: {
+      control: "text",
+      description: "Helper text shown below the field when there is no error.",
+    },
+    error: {
+      control: "text",
+      description: "Validation message shown below the field.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Size scale for internal spacing and typography.",
+    },
+    rows: {
+      control: "number",
+      description: "Initial number of visible text rows.",
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "Disables user input and interaction.",
+    },
+    isReadOnly: {
+      control: "boolean",
+      description: "Prevents editing while keeping the control focusable.",
+    },
+    isRequired: {
+      control: "boolean",
+      description: "Marks the field as required.",
+    },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expands the textarea width to 100% of its container.",
+    },
+    isAutoSize: {
+      control: "boolean",
+      description:
+        "Applies field-sizing: content so the textarea grows with its content.",
+    },
+    isResizable: {
+      control: "boolean",
+      description: "Enables the browser resize handle for vertical resizing.",
+    },
+    onChange: { action: "onChange" },
+    onBlur: { action: "onBlur" },
+    onFocus: { action: "onFocus" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Multi-line text input with labels, hints, errors, and automatic content sizing support.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  label: "Bio",
+  placeholder: "Tell us a little about yourself",
+  name: "bio",
+  value: "",
+  hint: "",
+  error: "",
+  size: "md",
+  rows: 4,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  isFullWidth: false,
+  isAutoSize: false,
+  isResizable: false,
+}
+
+export const WithHint = {}
+WithHint.args = {
+  ...Default.args,
+  label: "Project notes",
+  hint: "Include any implementation details or blockers.",
+}
+
+export const WithError = {}
+WithError.args = {
+  ...Default.args,
+  label: "Description",
+  value: "This is too long",
+  error: "Please keep the description under 280 characters.",
+}
+
+export const Required = {}
+Required.args = {
+  ...Default.args,
+  label: "Message",
+  placeholder: "Write a quick message",
+  isRequired: true,
+}
+
+export const Disabled = {}
+Disabled.args = {
+  ...Default.args,
+  label: "Disabled textarea",
+  isDisabled: true,
+  value: "Cannot edit this value",
+}
+
+export const Readonly = {}
+Readonly.args = {
+  ...Default.args,
+  label: "Read-only textarea",
+  isReadOnly: true,
+  value: "This field is read-only and not editable.",
+}
+
+export const Small = {}
+Small.args = {
+  ...Default.args,
+  label: "Small textarea",
+  size: "sm",
+}
+
+export const Large = {}
+Large.args = {
+  ...Default.args,
+  label: "Large textarea",
+  size: "lg",
+}
+
+export const FullWidth = {}
+FullWidth.args = {
+  ...Default.args,
+  label: "Full width textarea",
+  placeholder: "This textarea takes the full width of its container",
+  isFullWidth: true,
+}

package/src/examples/dashboard/app-drawer.js

@@ -147,6 +147,12 @@ function getDefaultItems() {
           href: "/controls/icon-button",
         },
         { id: "input", primary: "Input", href: "/controls/input" },
+        {
+          id: "file-upload",
+          primary: "File Upload",
+          href: "/controls/file-upload",
+        },
+        { id: "textarea", primary: "Textarea", href: "/controls/textarea" },
         {
           id: "radio-group",
           primary: "Radio Group",

package/src/examples/dashboard/primitive-content.js

@@ -6,6 +6,7 @@ import { ButtonGroup } from "../../controls/button-group/index.js"
 import { Checkbox } from "../../controls/checkbox/index.js"
 import { Combobox } from "../../controls/combobox/index.js"
 import { Fab } from "../../controls/fab/index.js"
+import { FileUpload } from "../../controls/file-upload/index.js"
 import { IconButton } from "../../controls/icon-button/index.js"
 import { Input } from "../../controls/input/index.js"
 import { RadioGroup } from "../../controls/radio-group/index.js"
@@ -13,6 +14,7 @@ import { Rating } from "../../controls/rating/index.js"
 import { Select } from "../../controls/select/index.js"
 import { Slider } from "../../controls/slider/index.js"
 import { Switch } from "../../controls/switch/index.js"
+import { Textarea } from "../../controls/textarea/index.js"
 import { Avatar } from "../../data-display/avatar/index.js"
 import { Badge } from "../../data-display/badge/index.js"
 import { BeforeAfter } from "../../data-display/before-after/index.js"
@@ -514,6 +516,73 @@ Input.render({
         ]),
     },
   },
+  "/controls/file-upload": {
+    summary:
+      "File selection area for uploads, attachments, and drag-and-drop flows.",
+    description:
+      "FileUpload wraps the native file input in a clearer interaction area while preserving validation, hints, and selected file summaries.",
+    useCases: ["Attachments", "Bulk upload", "Resume and invoice submissions"],
+    example: {
+      code: `import { FileUpload } from "@inglorious/ui/file-upload"
+
+FileUpload.render({
+  label: "Resume",
+  accept: ".pdf,.doc,.docx",
+  selectedFiles: ["resume.pdf"],
+  hint: "PDF or DOCX up to 5MB"
+})`,
+      preview: () =>
+        previewColumn([
+          FileUpload.render({
+            label: "Resume",
+            accept: ".pdf,.doc,.docx",
+            selectedFiles: ["resume.pdf"],
+            hint: "PDF or DOCX up to 5MB",
+          }),
+          FileUpload.render({
+            label: "Attachments",
+            isMultiple: true,
+            selectedFiles: ["brief.pdf", "notes.md"],
+          }),
+        ]),
+    },
+  },
+  "/controls/textarea": {
+    summary: "Multi-line text entry with validation and auto-sizing support.",
+    description:
+      "Textarea is built for longer responses and keeps its height aligned with the content while supporting helper text and validation states.",
+    useCases: [
+      "Message bodies",
+      "Long-form notes",
+      "Descriptions and feedback",
+    ],
+    example: {
+      code: `import { Textarea } from "@inglorious/ui/textarea"
+
+Textarea.render({
+  label: "Project details",
+  placeholder: "Describe the scope and constraints",
+  rows: 4,
+  hint: "A few sentences are enough"
+})`,
+      preview: () =>
+        previewColumn([
+          Textarea.render({
+            label: "Project details",
+            placeholder: "Describe the scope and constraints",
+            rows: 4,
+            hint: "A few sentences are enough",
+            value: "",
+          }),
+          Textarea.render({
+            label: "Notes",
+            value:
+              "The migration is nearly complete and we're validating the edge cases.",
+            error: "Please keep it under 280 characters.",
+          }),
+        ]),
+    },
+  },
   "/controls/radio-group": {
     summary: "Single-choice selection among visible options.",
     description:

package/src/index.js

@@ -9,6 +9,8 @@ export { Rating } from "./controls/rating/index.js"
 export { Select } from "./controls/select/index.js"
 export { Slider } from "./controls/slider/index.js"
 export { Switch } from "./controls/switch/index.js"
+export { Textarea } from "./controls/textarea/index.js"
+export { FileUpload } from "./controls/file-upload/index.js"
 export { Avatar } from "./data-display/avatar/index.js"
 export { Badge } from "./data-display/badge/index.js"
 export { BeforeAfter } from "./data-display/before-after/index.js"

package/types/controls/file-upload.d.ts

@@ -0,0 +1,27 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface FileUploadProps {
+  id?: string
+  name?: string
+  label?: string
+  hint?: string
+  error?: string
+  accept?: string
+  isMultiple?: boolean
+  isDisabled?: boolean
+  isRequired?: boolean
+  isFullWidth?: boolean
+  selectedFiles?: string[]
+  title?: string
+  description?: string
+  onChange?: (files: FileList | null) => void
+  onBlur?: () => void
+  onFocus?: () => void
+  [key: string]: unknown
+}
+
+export interface FileUploadType {
+  render(props: FileUploadProps): TemplateResult
+}
+
+export declare const FileUpload: FileUploadType

package/types/controls/input.d.ts

@@ -11,6 +11,12 @@ export interface InputProps {
     | "tel"
     | "url"
     | "search"
+    | "date"
+    | "time"
+    | "datetime-local"
+    | "month"
+    | "week"
+    | "color"
   value?: string
   placeholder?: string
   label?: string

package/types/controls/textarea.d.ts

@@ -0,0 +1,29 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface TextareaProps {
+  id?: string
+  name?: string
+  value?: string
+  placeholder?: string
+  label?: string
+  hint?: string
+  error?: string
+  size?: "sm" | "md" | "lg"
+  rows?: number
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  isFullWidth?: boolean
+  isAutoSize?: boolean
+  isResizable?: boolean
+  onChange?: (value: string) => void
+  onBlur?: () => void
+  onFocus?: () => void
+  [key: string]: unknown
+}
+
+export interface TextareaType {
+  render(props: TextareaProps): TemplateResult
+}
+
+export declare const Textarea: TextareaType

package/types/controls/upload-field.d.ts

@@ -0,0 +1,27 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface FileUploadProps {
+  id?: string
+  name?: string
+  label?: string
+  hint?: string
+  error?: string
+  accept?: string
+  multiple?: boolean
+  isDisabled?: boolean
+  isRequired?: boolean
+  isFullWidth?: boolean
+  selectedFiles?: string[]
+  title?: string
+  description?: string
+  onChange?: (files: FileList | null) => void
+  onBlur?: () => void
+  onFocus?: () => void
+  [key: string]: unknown
+}
+
+export interface FileUploadType {
+  render(props: FileUploadProps): TemplateResult
+}
+
+export declare const FileUpload: FileUploadType

package/types/index.d.ts

@@ -18,6 +18,8 @@ export type { RatingProps, RatingType } from "./controls/rating"
 export type { SelectProps, SelectType, SelectOption } from "./controls/select"
 export type { SliderProps, SliderType } from "./controls/slider"
 export type { SwitchProps, SwitchType } from "./controls/switch"
+export type { TextareaProps, TextareaType } from "./controls/textarea"
+export type { FileUploadProps, FileUploadType } from "./controls/file-upload"
 export type { ContainerProps, ContainerType } from "./layout/container"
 export type { FlexProps, FlexType } from "./layout/flex"
 export type { GridProps, GridType } from "./layout/grid"