@inglorious/ui 6.0.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "6.0.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",
@@ -38,6 +38,11 @@
     "./themes/inglorious.css": "./src/styles/themes/inglorious.css",
     "./themes/material.css": "./src/styles/themes/material.css",
     "./themes/bootstrap.css": "./src/styles/themes/bootstrap.css",
+    "./before-after": {
+      "types": "./types/data-display/before-after.d.ts",
+      "import": "./src/data-display/before-after/index.js"
+    },
+    "./before-after.css": "./src/data-display/before-after/style.css",
     "./button": {
       "types": "./types/controls/button.d.ts",
       "import": "./src/controls/button/index.js"
@@ -48,6 +53,11 @@
       "import": "./src/controls/button-group/index.js"
     },
     "./button-group.css": "./src/controls/button-group/style.css",
+    "./carousel": {
+      "types": "./types/data-display/carousel.d.ts",
+      "import": "./src/data-display/carousel/index.js"
+    },
+    "./carousel.css": "./src/data-display/carousel/style.css",
     "./checkbox": {
       "types": "./types/controls/checkbox.d.ts",
       "import": "./src/controls/checkbox/index.js"
@@ -103,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"
@@ -280,28 +300,28 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "9.0.0",
-    "@inglorious/utils": "3.8.0",
-    "@inglorious/web": "6.3.0",
-    "@inglorious/store": "11.0.0"
+    "@inglorious/charts": "10.0.0",
+    "@inglorious/store": "11.0.0",
+    "@inglorious/web": "6.4.0",
+    "@inglorious/utils": "3.8.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.2.36",
     "@fortawesome/fontawesome-free": "^7.2.0",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/web-components-vite": "^10.3.3",
+    "@storybook/addon-docs": "^10.5.6",
+    "@storybook/web-components-vite": "^10.5.6",
     "happy-dom": "^15.11.0",
     "jsdom": "^25.0.0",
     "lucide": "^0.575.0",
     "prettier": "^3.6.2",
-    "storybook": "^10.3.3",
+    "storybook": "^10.5.6",
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
-    "@inglorious/vite-plugin-jsx": "2.0.0",
+    "@inglorious/eslint-config": "1.1.2",
+    "@inglorious/web": "6.4.0",
     "@inglorious/vite-plugin-vue": "1.0.1",
-    "@inglorious/store": "11.0.0",
-    "@inglorious/web": "6.3.0",
-    "@inglorious/eslint-config": "1.1.2"
+    "@inglorious/vite-plugin-jsx": "2.0.0",
+    "@inglorious/store": "11.0.0"
   },
   "engines": {
     "node": ">= 22"

package/src/controls/controls.css

@@ -1,7 +1,7 @@
-@import "./combobox/style.css";
 @import "./button/style.css";
 @import "./button-group/style.css";
 @import "./checkbox/style.css";
+@import "./combobox/style.css";
 @import "./fab/style.css";
 @import "./icon-button/style.css";
 @import "./input/style.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);
+  }
+}