@inglorious/ui 0.1.0 → 1.0.0

package/README.md

@@ -0,0 +1,45 @@
+# @inglorious/ui
+
+A design system for Inglorious Web with render-function components and customizable themes.
+
+## Getting started
+
+Import the base stylesheet (tokens + reset), pick a theme, then pull in the component styles you need:
+
+```js
+import "@inglorious/ui/base.css"
+import "@inglorious/ui/themes/bootstrap.css"
+import "@inglorious/ui/data-grid.css"
+```
+
+Apply the theme classes to your root element (or any container that wraps your UI), otherwise the theme will not take effect:
+
+```html
+<body class="iw-theme-bootstrap iw-theme-light">
+  <!-- Your app -->
+</body>
+```
+
+If you want everything, you can import the full bundle:
+
+```js
+import "@inglorious/ui/all.css"
+```
+
+## Styles structure
+
+The core styles live under `src/styles/`:
+
+- `styles/reset.css`: sensible resets (box-sizing, body margin, etc.)
+- `styles/tokens.css`: design tokens
+- `styles/base.css`: reset + tokens (the recommended public entry)
+- `styles/themes/`: built-in themes
+
+The public CSS exports are:
+
+- `@inglorious/ui/base.css`
+- `@inglorious/ui/tokens.css`
+- `@inglorious/ui/themes/inglorious.css`
+- `@inglorious/ui/themes/material.css`
+- `@inglorious/ui/themes/bootstrap.css`
+- `@inglorious/ui/all.css`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "0.1.0",
+  "version": "1.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",
@@ -26,10 +26,18 @@
       "types": "./types/index.d.ts",
       "import": "./src/index.js"
     },
-    "./tokens": "./src/tokens/index.css",
-    "./themes/inglorious": "./src/themes/inglorious.css",
-    "./themes/material": "./src/themes/material.css",
-    "./themes/bootstrap": "./src/themes/bootstrap.css",
+    "./all.css": "./src/all.css",
+    "./base.css": "./src/styles/base.css",
+    "./controls.css": "./src/controls/controls.css",
+    "./data-display.css": "./src/data-display/data-display.css",
+    "./feedback.css": "./src/feedback/feedback.css",
+    "./layout.css": "./src/layout/layout.css",
+    "./navigation.css": "./src/navigation/navigation.css",
+    "./surfaces.css": "./src/surfaces/surfaces.css",
+    "./tokens.css": "./src/styles/tokens.css",
+    "./themes/inglorious.css": "./src/styles/themes/inglorious.css",
+    "./themes/material.css": "./src/styles/themes/material.css",
+    "./themes/bootstrap.css": "./src/styles/themes/bootstrap.css",
     "./button": {
       "types": "./types/controls/button.d.ts",
       "import": "./src/controls/button/index.js"
@@ -45,6 +53,16 @@
       "import": "./src/controls/checkbox/index.js"
     },
     "./checkbox.css": "./src/controls/checkbox/style.css",
+    "./combobox": {
+      "types": "./types/controls/combobox.d.ts",
+      "import": "./src/controls/combobox/index.js"
+    },
+    "./combobox.css": "./src/controls/combobox/style.css",
+    "./data-grid": {
+      "types": "./types/data-display/data-grid.d.ts",
+      "import": "./src/data-display/data-grid/index.js"
+    },
+    "./data-grid.css": "./src/data-display/data-grid/style.css",
     "./fab": {
       "types": "./types/controls/fab.d.ts",
       "import": "./src/controls/fab/index.js"
@@ -86,10 +104,10 @@
     },
     "./switch.css": "./src/controls/switch/style.css",
     "./card": {
-      "types": "./types/widgets/card.d.ts",
-      "import": "./src/widgets/card/index.js"
+      "types": "./types/surfaces/card.d.ts",
+      "import": "./src/surfaces/card/index.js"
     },
-    "./card.css": "./src/widgets/card/style.css",
+    "./card.css": "./src/surfaces/card/style.css",
     "./flex": {
       "types": "./types/layout/flex.d.ts",
       "import": "./src/layout/flex/index.js"
@@ -99,7 +117,156 @@
       "types": "./types/layout/grid.d.ts",
       "import": "./src/layout/grid/index.js"
     },
-    "./grid.css": "./src/layout/grid/style.css"
+    "./grid.css": "./src/layout/grid/style.css",
+    "./avatar": {
+      "types": "./types/data-display/avatar.d.ts",
+      "import": "./src/data-display/avatar/index.js"
+    },
+    "./avatar.css": "./src/data-display/avatar/style.css",
+    "./badge": {
+      "types": "./types/data-display/badge.d.ts",
+      "import": "./src/data-display/badge/index.js"
+    },
+    "./badge.css": "./src/data-display/badge/style.css",
+    "./chip": {
+      "types": "./types/data-display/chip.d.ts",
+      "import": "./src/data-display/chip/index.js"
+    },
+    "./chip.css": "./src/data-display/chip/style.css",
+    "./divider": {
+      "types": "./types/data-display/divider.d.ts",
+      "import": "./src/data-display/divider/index.js"
+    },
+    "./divider.css": "./src/data-display/divider/style.css",
+    "./icon": {
+      "types": "./types/data-display/icon.d.ts",
+      "import": "./src/data-display/icon/index.js"
+    },
+    "./icon.css": "./src/data-display/icon/style.css",
+    "./list": {
+      "types": "./types/data-display/list.d.ts",
+      "import": "./src/data-display/list/index.js"
+    },
+    "./list.css": "./src/data-display/list/style.css",
+    "./material-icon": {
+      "types": "./types/data-display/material-icon.d.ts",
+      "import": "./src/data-display/material-icon/index.js"
+    },
+    "./material-icon.css": "./src/data-display/material-icon/style.css",
+    "./table": {
+      "types": "./types/data-display/table.d.ts",
+      "import": "./src/data-display/table/index.js"
+    },
+    "./table.css": "./src/data-display/table/style.css",
+    "./tooltip": {
+      "types": "./types/data-display/tooltip.d.ts",
+      "import": "./src/data-display/tooltip/index.js"
+    },
+    "./tooltip.css": "./src/data-display/tooltip/style.css",
+    "./typography": {
+      "types": "./types/data-display/typography.d.ts",
+      "import": "./src/data-display/typography/index.js"
+    },
+    "./typography.css": "./src/data-display/typography/style.css",
+    "./alert": {
+      "types": "./types/feedback/alert.d.ts",
+      "import": "./src/feedback/alert/index.js"
+    },
+    "./virtual-list": {
+      "types": "./types/data-display/virtual-list.d.ts",
+      "import": "./src/data-display/virtual-list/index.js"
+    },
+    "./alert.css": "./src/feedback/alert/style.css",
+    "./backdrop": {
+      "types": "./types/feedback/backdrop.d.ts",
+      "import": "./src/feedback/backdrop/index.js"
+    },
+    "./backdrop.css": "./src/feedback/backdrop/style.css",
+    "./dialog": {
+      "types": "./types/feedback/dialog.d.ts",
+      "import": "./src/feedback/dialog/index.js"
+    },
+    "./dialog.css": "./src/feedback/dialog/style.css",
+    "./progress": {
+      "types": "./types/feedback/progress.d.ts",
+      "import": "./src/feedback/progress/index.js"
+    },
+    "./progress.css": "./src/feedback/progress/style.css",
+    "./skeleton": {
+      "types": "./types/feedback/skeleton.d.ts",
+      "import": "./src/feedback/skeleton/index.js"
+    },
+    "./skeleton.css": "./src/feedback/skeleton/style.css",
+    "./snackbar": {
+      "types": "./types/feedback/snackbar.d.ts",
+      "import": "./src/feedback/snackbar/index.js"
+    },
+    "./snackbar.css": "./src/feedback/snackbar/style.css",
+    "./accordion": {
+      "types": "./types/surfaces/accordion.d.ts",
+      "import": "./src/surfaces/accordion/index.js"
+    },
+    "./accordion.css": "./src/surfaces/accordion/style.css",
+    "./app-bar": {
+      "types": "./types/surfaces/app-bar.d.ts",
+      "import": "./src/surfaces/app-bar/index.js"
+    },
+    "./app-bar.css": "./src/surfaces/app-bar/style.css",
+    "./paper": {
+      "types": "./types/surfaces/paper.d.ts",
+      "import": "./src/surfaces/paper/index.js"
+    },
+    "./paper.css": "./src/surfaces/paper/style.css",
+    "./container": {
+      "types": "./types/layout/container.d.ts",
+      "import": "./src/layout/container/index.js"
+    },
+    "./container.css": "./src/layout/container/style.css",
+    "./bottom-navigation": {
+      "types": "./types/navigation/bottom-navigation.d.ts",
+      "import": "./src/navigation/bottom-navigation/index.js"
+    },
+    "./bottom-navigation.css": "./src/navigation/bottom-navigation/style.css",
+    "./breadcrumbs": {
+      "types": "./types/navigation/breadcrumbs.d.ts",
+      "import": "./src/navigation/breadcrumbs/index.js"
+    },
+    "./breadcrumbs.css": "./src/navigation/breadcrumbs/style.css",
+    "./drawer": {
+      "types": "./types/navigation/drawer.d.ts",
+      "import": "./src/navigation/drawer/index.js"
+    },
+    "./drawer.css": "./src/navigation/drawer/style.css",
+    "./link": {
+      "types": "./types/navigation/link.d.ts",
+      "import": "./src/navigation/link/index.js"
+    },
+    "./link.css": "./src/navigation/link/style.css",
+    "./menu": {
+      "types": "./types/navigation/menu.d.ts",
+      "import": "./src/navigation/menu/index.js"
+    },
+    "./menu.css": "./src/navigation/menu/style.css",
+    "./pagination": {
+      "types": "./types/navigation/pagination.d.ts",
+      "import": "./src/navigation/pagination/index.js"
+    },
+    "./pagination.css": "./src/navigation/pagination/style.css",
+    "./speed-dial": {
+      "types": "./types/navigation/speed-dial.d.ts",
+      "import": "./src/navigation/speed-dial/index.js"
+    },
+    "./speed-dial.css": "./src/navigation/speed-dial/style.css",
+    "./stepper": {
+      "types": "./types/navigation/stepper.d.ts",
+      "import": "./src/navigation/stepper/index.js"
+    },
+    "./stepper.css": "./src/navigation/stepper/style.css",
+    "./tabs": {
+      "types": "./types/navigation/tabs.d.ts",
+      "import": "./src/navigation/tabs/index.js"
+    },
+    "./tabs.css": "./src/navigation/tabs/style.css"
   },
   "files": [
     "src",
@@ -113,25 +280,33 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/web": "4.4.0"
+    "@inglorious/charts": "4.0.0",
+    "@inglorious/utils": "3.7.3",
+    "@inglorious/web": "4.5.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.2.10",
-    "@storybook/web-components-vite": "^10.2.10",
+    "@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",
     "happy-dom": "^15.11.0",
     "jsdom": "^25.0.0",
+    "lucide": "^0.575.0",
     "prettier": "^3.6.2",
-    "storybook": "^10.2.10",
+    "storybook": "^10.2.19",
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
-    "@inglorious/eslint-config": "1.1.2",
-    "@inglorious/web": "4.4.0",
-    "@inglorious/store": "9.6.0"
+    "@inglorious/web": "4.5.0",
+    "@inglorious/store": "9.6.0",
+    "@inglorious/eslint-config": "1.1.2"
   },
   "engines": {
     "node": ">= 22"
   },
   "scripts": {
+    "dev": "vite --config app/vite.config.js",
+    "build": "vite build --config app/vite.config.js",
+    "preview": "vite preview --config app/vite.config.js",
     "format": "prettier --write .",
     "lint": "eslint .",
     "test:watch": "vitest",

package/src/all.css

@@ -0,0 +1,7 @@
+@import "./styles/base.css";
+@import "./controls/controls.css";
+@import "./data-display/data-display.css";
+@import "./feedback/feedback.css";
+@import "./layout/layout.css";
+@import "./navigation/navigation.css";
+@import "./surfaces/surfaces.css";

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

@@ -1,17 +1,13 @@
 import { html } from "@inglorious/web"
 
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { button } from "."
 
 export default {
   title: "Controls/Button",
   tags: ["autodocs"],
-  render: makeStoryRender(button, "story-button"),
+  render: createRender(button),
   argTypes: {
-    ...notifyActionArgType,
     children: {
       control: "text",
       description: "Content displayed inside the button.",
@@ -23,7 +19,15 @@ export default {
     },
     color: {
       control: "select",
-      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      options: [
+        "default",
+        "primary",
+        "secondary",
+        "success",
+        "warning",
+        "error",
+        "info",
+      ],
       description: "Semantic color intent.",
     },
     size: {
@@ -36,11 +40,15 @@ export default {
       options: ["rectangle", "pill", "round", "square"],
       description: "Button shape profile.",
     },
-    disabled: {
+    isDisabled: {
       control: "boolean",
       description: "Disables interaction and click notifications.",
     },
-    fullWidth: {
+    isPressed: {
+      control: "boolean",
+      description: "Keeps the button in an active state.",
+    },
+    isFullWidth: {
       control: "boolean",
       description: "Expands button width to 100% of its container.",
     },
@@ -49,6 +57,7 @@ export default {
       options: ["button", "submit", "reset", "menu"],
       description: "Native HTML button type attribute.",
     },
+    onClick: { action: "onClick" },
   },
   parameters: {
     docs: {
@@ -62,16 +71,15 @@ export default {
     },
   },
 }
+
 export const Default = {}
 Default.args = {
   children: "Button",
   variant: "default",
-  color: "primary",
   size: "md",
   shape: "rectangle",
-  disabled: false,
-  fullWidth: false,
-  type: "button",
+  isDisabled: false,
+  isFullWidth: false,
 }
 
 export const Outline = {}
@@ -98,6 +106,12 @@ Large.args = {
   size: "lg",
 }
 
+export const Primary = {}
+Primary.args = {
+  ...Default.args,
+  color: "primary",
+}
+
 export const Secondary = {}
 Secondary.args = {
   ...Default.args,
@@ -113,14 +127,20 @@ Success.args = {
 export const Disabled = {}
 Disabled.args = {
   ...Default.args,
-  disabled: true,
+  isDisabled: true,
+}
+
+export const Pressed = {}
+Pressed.args = {
+  ...Default.args,
+  isPressed: true,
 }
 
 export const FullWidth = {}
 FullWidth.args = {
   ...Default.args,
   children: "Full Width Button",
-  fullWidth: true,
+  isFullWidth: true,
 }
 
 export const Round = {}

package/src/controls/button/index.js

@@ -1,5 +1,3 @@
-import { withRenderValidation } from "../../shared/withRenderValidation.js"
 import * as renderers from "./template.js"
 
-export const buttonPrimitive = { ...renderers }
-export const button = [buttonPrimitive, withRenderValidation]
+export const button = { ...renderers }

package/src/controls/button/style.css

@@ -6,7 +6,7 @@
   padding: var(--iw-space-2) var(--iw-space-4);
   font-family: var(--iw-font-family-sans);
   font-size: var(--iw-font-size-base);
-  font-weight: var(--iw-font-weight-medium);
+  font-weight: var(--iw-font-weight-normal);
   line-height: var(--iw-line-height-normal);
   text-decoration: none;
   white-space: nowrap;
@@ -18,22 +18,6 @@
   box-shadow: var(--iw-button-shadow);
   transition: all var(--iw-transition-fast);
 
-  &:hover:not(:disabled) {
-    background-color: var(--iw-button-bg-hover);
-    box-shadow: var(--iw-button-shadow-hover);
-  }
-
-  &:active:not(:disabled) {
-    background-color: var(--iw-button-bg-active);
-    box-shadow: var(--iw-button-shadow-active);
-  }
-
-  &:disabled,
-  &.iw-button-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   .iw-button-icon {
     display: inline-flex;
     align-items: center;
@@ -43,64 +27,122 @@
   }
 
   &.iw-button-outline {
-    background-color: var(--iw-button-outline-bg);
-    color: var(--iw-button-outline-text);
-    border-color: var(--iw-button-outline-border);
+    background-color: transparent;
+    color: var(--iw-button-bg);
+    border-color: var(--iw-button-border);
     box-shadow: none;
 
     &:hover:not(:disabled) {
-      background-color: var(--iw-button-outline-bg-hover);
-      color: var(--iw-button-outline-text-hover);
+      background-color: color-mix(
+        in srgb,
+        var(--iw-button-color) 10%,
+        transparent
+      );
+      color: var(--iw-button-bg);
       box-shadow: none;
     }
   }
 
   &.iw-button-ghost {
-    background-color: var(--iw-button-ghost-bg);
-    color: var(--iw-button-ghost-text);
-    border-color: var(--iw-button-ghost-border);
+    background-color: transparent;
+    color: var(--iw-button-bg);
+    border-color: transparent;
     box-shadow: none;
 
     &:hover:not(:disabled) {
-      background-color: var(--iw-button-ghost-bg-hover);
+      background-color: color-mix(
+        in srgb,
+        var(--iw-button-color) 10%,
+        transparent
+      );
       box-shadow: none;
     }
   }
 
+  &.iw-button-default {
+    --iw-button-color: var(--iw-color-text);
+    --iw-button-bg: var(--iw-color-surface);
+    --iw-button-bg-hover: var(--iw-color-surface-hover);
+    --iw-button-bg-active: var(--iw-color-surface-active);
+    --iw-button-border: var(--iw-color-border);
+    --iw-button-text: var(--iw-color-text);
+
+    &.iw-button-outline,
+    &.iw-button-ghost {
+      color: var(--iw-button-color);
+    }
+  }
+
+  &.iw-button-primary {
+    --iw-button-color: var(--iw-color-primary-text);
+    --iw-button-bg: var(--iw-color-primary);
+    --iw-button-bg-hover: var(--iw-color-primary-hover);
+    --iw-button-bg-active: var(--iw-color-primary-active);
+    --iw-button-border: var(--iw-color-primary);
+    --iw-button-text: var(--iw-color-primary-text);
+  }
+
   &.iw-button-secondary {
-    --iw-button-bg: var(--iw-color-gray-600);
+    --iw-button-color: var(--iw-color-gray-400);
+    --iw-button-bg: var(--iw-color-gray-400);
     --iw-button-bg-hover: var(--iw-color-gray-700);
-    --iw-button-bg-active: var(--iw-color-gray-800);
-    --iw-button-border: var(--iw-color-gray-600);
+    --iw-button-bg-active: var(--iw-color-gray-400);
+    --iw-button-border: var(--iw-color-gray-400);
+    --iw-button-text: var(--iw-color-text);
   }
 
   &.iw-button-success {
+    --iw-button-color: var(--iw-color-success);
     --iw-button-bg: var(--iw-color-success);
     --iw-button-bg-hover: var(--iw-color-success-dark);
     --iw-button-bg-active: #064e3b;
     --iw-button-border: var(--iw-color-success);
+    --iw-button-text: var(--iw-color-text);
   }
 
   &.iw-button-warning {
+    --iw-button-color: var(--iw-color-warning);
     --iw-button-bg: var(--iw-color-warning);
     --iw-button-bg-hover: var(--iw-color-warning-dark);
     --iw-button-bg-active: #78350f;
     --iw-button-border: var(--iw-color-warning);
-    --iw-button-text: var(--iw-color-black);
+    --iw-button-text: var(--iw-color-text);
   }
 
   &.iw-button-error {
+    --iw-button-color: var(--iw-color-error);
     --iw-button-bg: var(--iw-color-error);
     --iw-button-bg-hover: var(--iw-color-error-dark);
     --iw-button-bg-active: #7f1d1d;
     --iw-button-border: var(--iw-color-error);
+    --iw-button-text: var(--iw-color-text);
   }
 
   &.iw-button-info {
+    --iw-button-color: var(--iw-color-info);
     --iw-button-bg: var(--iw-color-info);
     --iw-button-bg-hover: var(--iw-color-info-dark);
     --iw-button-bg-active: #1e3a8a;
     --iw-button-border: var(--iw-color-info);
+    --iw-button-text: var(--iw-color-text);
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--iw-button-bg-hover);
+    box-shadow: var(--iw-button-shadow-hover);
+  }
+
+  &:active:not(:disabled),
+  &.iw-button-pressed {
+    background-color: var(--iw-button-bg-active);
+    color: var(--iw-button-text);
+    /* box-shadow: var(--iw-button-shadow-active); */
+  }
+
+  &:disabled,
+  &.iw-button-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 
   &.iw-button-sm {
@@ -121,13 +163,6 @@
     border-radius: 999px;
   }
 
-  &.iw-button-shape-round,
-  &.iw-button-shape-square {
-    width: 2.5rem;
-    aspect-ratio: 1 / 1;
-    padding: 0;
-  }
-
   &.iw-button-shape-round {
     border-radius: 999px;
   }
@@ -139,10 +174,18 @@
   &.iw-button-sm.iw-button-shape-round,
   &.iw-button-sm.iw-button-shape-square {
     width: 2rem;
+    height: 2rem;
+  }
+
+  &.iw-button-md.iw-button-shape-round,
+  &.iw-button-md.iw-button-shape-square {
+    width: 2.5rem;
+    height: 2.5rem;
   }
 
   &.iw-button-lg.iw-button-shape-round,
   &.iw-button-lg.iw-button-shape-square {
     width: 3rem;
+    height: 3rem;
   }
 }