@inglorious/ui 1.0.2 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -280,25 +280,27 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "4.0.1",
-    "@inglorious/utils": "3.7.3",
-    "@inglorious/web": "4.5.1"
+    "@inglorious/charts": "5.0.0",
+    "@inglorious/web": "5.0.0",
+    "@inglorious/utils": "3.8.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.2.36",
     "@fortawesome/fontawesome-free": "^7.2.0",
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/web-components-vite": "^10.2.19",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/web-components-vite": "^10.3.3",
     "happy-dom": "^15.11.0",
     "jsdom": "^25.0.0",
     "lucide": "^0.575.0",
     "prettier": "^3.6.2",
-    "storybook": "^10.2.19",
+    "storybook": "^10.3.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
     "@inglorious/eslint-config": "1.1.2",
-    "@inglorious/store": "9.6.0",
-    "@inglorious/web": "4.5.1"
+    "@inglorious/vite-plugin-vue": "1.0.0",
+    "@inglorious/web": "5.0.0",
+    "@inglorious/store": "10.0.0",
+    "@inglorious/vite-plugin-jsx": "2.0.0"
   },
   "engines": {
     "node": ">= 22"

package/src/controls/button/button.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { button } from "."
+import { Button } from "."
 
 export default {
   title: "Controls/Button",
   tags: ["autodocs"],
-  render: createRender(button),
+  render: createRender(Button),
   argTypes: {
     children: {
       control: "text",

package/src/controls/button/index.js

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

package/src/controls/button-group/button-group.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { buttonGroup } from "."
+import { ButtonGroup } from "."
 
 export default {
   title: "Controls/ButtonGroup",
   tags: ["autodocs"],
-  render: createRender(buttonGroup),
+  render: createRender(ButtonGroup),
   argTypes: {
     value: {
       control: "object",

package/src/controls/button-group/index.js

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

package/src/controls/button-group/template.js

@@ -6,7 +6,7 @@
 import { classMap, html, ref } from "@inglorious/web"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
-import { button } from "../button/index.js"
+import { Button } from "../button/index.js"
 
 /**
  * Renders a grouped set of buttons with optional single or multi selection.
@@ -69,7 +69,7 @@ export function render(props) {
             ? value === itemValue
             : false
 
-        return button.render({
+        return Button.render({
           children: html`
             ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
             ${children ?? label}

package/src/controls/checkbox/checkbox.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { checkbox } from "."
+import { Checkbox } from "."
 
 export default {
   title: "Controls/Checkbox",
   tags: ["autodocs"],
-  render: createRender(checkbox),
+  render: createRender(Checkbox),
   argTypes: {
     label: { control: "text", description: "Label text." },
     name: { control: "text", description: "Native HTML name attribute." },

package/src/controls/checkbox/index.js

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

package/src/controls/combobox/combobox.stories.js

@@ -2,7 +2,7 @@ import {
   createEntityRender,
   notifyActionArgType,
 } from "../../stories/notifyStory.js"
-import { combobox } from "./index.js"
+import { Combobox } from "./index.js"
 
 const options = [
   { label: "Italy", value: "it" },
@@ -14,7 +14,7 @@ const options = [
 export default {
   title: "Controls/Combobox",
   tags: ["autodocs"],
-  render: createEntityRender({ combobox }),
+  render: createEntityRender({ Combobox }),
   argTypes: {
     ...notifyActionArgType,
     label: { control: "text", description: "Field label." },
@@ -59,7 +59,7 @@ export default {
 export const SingleClosed = {}
 SingleClosed.args = {
   id: "combobox",
-  type: "combobox",
+  type: "Combobox",
   label: "Country",
   selectedValue: "it",
   isMulti: false,

package/src/controls/combobox/index.js

@@ -1,8 +1,8 @@
 import * as handlers from "./handlers.js"
 import * as helpers from "./helpers.js"
-import { combobox as renderers } from "./template.js"
+import { Combobox as renderers } from "./template.js"
 
-export const combobox = {
+export const Combobox = {
   ...handlers,
   ...renderers,
   render(entity, api) {

package/src/controls/combobox/template.js

@@ -6,7 +6,7 @@
 
 import { classMap, html, ref, repeat, when } from "@inglorious/web"
 
-import { chip } from "../../data-display/chip/index.js"
+import { Chip } from "../../data-display/chip/index.js"
 import {
   filterOptions,
   formatOption,
@@ -17,7 +17,7 @@ import {
 
 const NO_FOCUSED_INDEX = -1
 
-export const combobox = {
+export const Combobox = {
   /**
    * Main entrypoint for the combobox control. It renders the wrapper, label, control, and dropdown when open.
    * Comboboxes support search, single or multi-select values, and clearable selection.
@@ -158,7 +158,7 @@ export const combobox = {
       class="iw-combobox-multi-value-tag"
       @click=${(event) => event.stopPropagation()}
     >
-      ${chip.render({
+      ${Chip.render({
         id: tagId,
         children: option ? getOptionLabel(option) : String(value),
         isRemovable: true,

package/src/controls/fab/fab.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { fab } from "."
+import { Fab } from "."
 
 export default {
   title: "Controls/Fab",
   tags: ["autodocs"],
-  render: createRender(fab),
+  render: createRender(Fab),
   argTypes: {
     children: { control: "text", description: "Content of the FAB." },
     color: {

package/src/controls/fab/index.js

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

package/src/controls/fab/template.js

@@ -5,7 +5,7 @@
 
 import { html } from "@inglorious/web"
 
-import { button } from "../button/index.js"
+import { Button } from "../button/index.js"
 
 /**
  * Renders a floating action button for primary contextual actions.
@@ -22,7 +22,7 @@ export function render(props) {
     ...rest
   } = props
 
-  return button.render({
+  return Button.render({
     ...rest,
     shape: isExtended ? "pill" : "round",
     className:

package/src/controls/icon-button/icon-button.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { iconButton } from "."
+import { IconButton } from "."
 
 export default {
   title: "Controls/IconButton",
   tags: ["autodocs"],
-  render: createRender(iconButton),
+  render: createRender(IconButton),
   argTypes: {
     icon: { control: "text", description: "Leading icon content." },
     label: { control: "text", description: "Optional button label." },

package/src/controls/icon-button/index.js

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

package/src/controls/icon-button/template.js

@@ -5,7 +5,7 @@
 
 import { html } from "@inglorious/web"
 
-import { button } from "../button/index.js"
+import { Button } from "../button/index.js"
 
 /**
  * Renders a button optimized for icons with optional label and icon placement.
@@ -33,7 +33,7 @@ export function render(props) {
     </span>
   `
 
-  return button.render({
+  return Button.render({
     ...props,
     children,
     onClick,

package/src/controls/input/index.js

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

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

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { input } from "."
+import { Input } from "."
 
 export default {
   title: "Controls/Input",
   tags: ["autodocs"],
-  render: createRender(input),
+  render: createRender(Input),
   argTypes: {
     // ...notifyActionArgType,
     label: {

package/src/controls/radio-group/index.js

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

package/src/controls/radio-group/radio-group.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { radioGroup } from "."
+import { RadioGroup } from "."
 
 export default {
   title: "Controls/RadioGroup",
   tags: ["autodocs"],
-  render: createRender(radioGroup),
+  render: createRender(RadioGroup),
   argTypes: {
     label: { control: "text", description: "Fieldset label." },
     name: { control: "text", description: "Native radio input name." },

package/src/controls/rating/index.js

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

package/src/controls/rating/rating.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { rating } from "."
+import { Rating } from "."
 
 export default {
   title: "Controls/Rating",
   tags: ["autodocs"],
-  render: createRender(rating),
+  render: createRender(Rating),
   argTypes: {
     value: { control: "number", description: "Current rating value." },
     max: { control: "number", description: "Maximum rating value." },

package/src/controls/select/index.js

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

package/src/controls/select/select.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { select } from "./index.js"
+import { Select } from "./index.js"
 
 export default {
   title: "Controls/Select",
   tags: ["autodocs"],
-  render: createRender(select),
+  render: createRender(Select),
   argTypes: {
     name: {
       control: "text",

package/src/controls/slider/index.js

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

package/src/controls/slider/slider.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { slider } from "."
+import { Slider } from "."
 
 export default {
   title: "Controls/Slider",
   tags: ["autodocs"],
-  render: createRender(slider),
+  render: createRender(Slider),
   argTypes: {
     label: { control: "text", description: "Field label." },
     name: { control: "text", description: "Native input name." },

package/src/controls/switch/index.js

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

package/src/controls/switch/switch.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { switchControl } from "."
+import { Switch } from "."
 
 export default {
   title: "Controls/Switch",
   tags: ["autodocs"],
-  render: createRender(switchControl),
+  render: createRender(Switch),
   argTypes: {
     label: { control: "text", description: "Label text." },
     name: { control: "text", description: "Native input name." },

package/src/data-display/avatar/avatar.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { avatar } from "."
+import { Avatar } from "."
 
 export default {
   title: "Data Display/Avatar",
   tags: ["autodocs"],
-  render: createRender(avatar),
+  render: createRender(Avatar),
   argTypes: {
     src: {
       control: "text",

package/src/data-display/avatar/index.js

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

package/src/data-display/badge/badge.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { badge } from "."
+import { Badge } from "."
 
 export default {
   title: "Data Display/Badge",
   tags: ["autodocs"],
-  render: createRender(badge),
+  render: createRender(Badge),
   argTypes: {
     children: { control: "text", description: "Badge content." },
     color: {

package/src/data-display/badge/index.js

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

package/src/data-display/chip/chip.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { chip } from "."
+import { Chip } from "."
 
 export default {
   title: "Data Display/Chip",
   tags: ["autodocs"],
-  render: createRender(chip),
+  render: createRender(Chip),
   argTypes: {
     children: { control: "text", description: "Chip label content." },
     isRemovable: {

package/src/data-display/chip/index.js

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

package/src/data-display/data-grid/data-grid.stories.js

@@ -2,7 +2,7 @@ import {
   createEntityRender,
   notifyActionArgType,
 } from "../../stories/notifyStory.js"
-import { dataGrid } from "."
+import { DataGrid } from "."
 
 const baseRows = [
   { id: 1, name: "Charlie", age: 35, active: true, role: "Admin" },
@@ -57,7 +57,7 @@ function createRows(count) {
 export default {
   title: "Data Display/DataGrid",
   tags: ["autodocs"],
-  render: createEntityRender({ dataGrid }),
+  render: createEntityRender({ DataGrid }),
   argTypes: {
     ...notifyActionArgType,
     id: { control: "text", description: "Optional grid id" },
@@ -75,7 +75,7 @@ export default {
 export const Default = {
   args: {
     id: "dataGrid",
-    type: "dataGrid",
+    type: "DataGrid",
     rows: baseRows,
     columns: baseColumns,
     search: {},
@@ -130,7 +130,7 @@ export const FlexibleWidths = {
 export const Virtualized = {
   args: {
     id: "virtualizedGrid",
-    type: "dataGrid",
+    type: "DataGrid",
     rows: createRows(1000),
     columns: baseColumns,
     search: null,

package/src/data-display/data-grid/filters/index.js

@@ -1,21 +1,21 @@
 import { choose, html } from "@inglorious/web"
 
-import { inputFilter } from "./input.js"
-import { rangeFilter } from "./range.js"
-import { selectFilter } from "./select.js"
+import { InputFilter } from "./input.js"
+import { RangeFilter } from "./range.js"
+import { SelectFilter } from "./select.js"
 
-export const filters = {
+export const Filters = {
   render(entity, column) {
     return html`${choose(
       column.filter.type,
       [
-        ["range", () => rangeFilter.render(entity, column)],
-        ["date", () => rangeFilter.render(entity, column)],
-        ["time", () => rangeFilter.render(entity, column)],
-        ["datetime", () => rangeFilter.render(entity, column)],
-        ["select", () => selectFilter.render(entity, column)],
+        ["range", () => RangeFilter.render(entity, column)],
+        ["date", () => RangeFilter.render(entity, column)],
+        ["time", () => RangeFilter.render(entity, column)],
+        ["datetime", () => RangeFilter.render(entity, column)],
+        ["select", () => SelectFilter.render(entity, column)],
       ],
-      () => inputFilter.render(entity, column),
+      () => InputFilter.render(entity, column),
     )}`
   },
 }

package/src/data-display/data-grid/filters/input.js

@@ -1,4 +1,4 @@
-import { input } from "../../../controls/input"
+import { Input } from "../../../controls/input"
 import { format } from "./helpers"
 
 const DEFAULT_PLACEHOLDER = {
@@ -6,9 +6,9 @@ const DEFAULT_PLACEHOLDER = {
   text: "Contains...",
 }
 
-export const inputFilter = {
+export const InputFilter = {
   render(entity, column) {
-    return input.render({
+    return Input.render({
       name: column.id,
       inputType: column.filter.type,
       placeholder:

package/src/data-display/data-grid/filters/range.js

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-import { input } from "../../../controls/input"
+import { Input } from "../../../controls/input"
 import { format } from "./helpers"
 
 const RANGE_TYPE = {
@@ -10,10 +10,10 @@ const RANGE_TYPE = {
   datetime: "datetime-local",
 }
 
-export const rangeFilter = {
+export const RangeFilter = {
   render(entity, column) {
     return html`<div class="iw-data-grid-filter-range">
-      ${input.render({
+      ${Input.render({
         name: `${column.id}Min`,
         inputType: RANGE_TYPE[column.filter.type],
         placeholder: column.filter.placeholder ?? "≥",
@@ -28,7 +28,7 @@ export const rangeFilter = {
           })
         },
       })}
-      ${input.render({
+      ${Input.render({
         name: `${column.id}Max`,
         inputType: RANGE_TYPE[column.filter.type],
         placeholder: column.filter.placeholder ?? "≤",

package/src/data-display/data-grid/filters/select.js

@@ -1,9 +1,9 @@
-import { select } from "../../../controls/select"
+import { Select } from "../../../controls/select"
 import { format } from "./helpers"
 
-export const selectFilter = {
+export const SelectFilter = {
   render(entity, column) {
-    return select.render({
+    return Select.render({
       name: column.id,
       size: "sm",
       isFullWidth: true,

package/src/data-display/data-grid/index.js

@@ -1,8 +1,8 @@
 import * as handlers from "./handlers.js"
 import * as helpers from "./helpers.js"
-import { dataGrid as renderers } from "./template.js"
+import { DataGrid as renderers } from "./template.js"
 
-export const dataGrid = {
+export const DataGrid = {
   ...handlers,
   ...renderers,
   render(entity, api) {