@inglorious/ui 0.1.0

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -0,0 +1,142 @@
+{
+  "name": "@inglorious/ui",
+  "version": "0.1.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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IngloriousCoderz/inglorious-forge.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/IngloriousCoderz/inglorious-forge/issues"
+  },
+  "keywords": [
+    "design-system",
+    "ui",
+    "components",
+    "lit-html",
+    "inglorious-web",
+    "theme"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "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",
+    "./button": {
+      "types": "./types/controls/button.d.ts",
+      "import": "./src/controls/button/index.js"
+    },
+    "./button.css": "./src/controls/button/style.css",
+    "./button-group": {
+      "types": "./types/controls/button-group.d.ts",
+      "import": "./src/controls/button-group/index.js"
+    },
+    "./button-group.css": "./src/controls/button-group/style.css",
+    "./checkbox": {
+      "types": "./types/controls/checkbox.d.ts",
+      "import": "./src/controls/checkbox/index.js"
+    },
+    "./checkbox.css": "./src/controls/checkbox/style.css",
+    "./fab": {
+      "types": "./types/controls/fab.d.ts",
+      "import": "./src/controls/fab/index.js"
+    },
+    "./fab.css": "./src/controls/fab/style.css",
+    "./icon-button": {
+      "types": "./types/controls/icon-button.d.ts",
+      "import": "./src/controls/icon-button/index.js"
+    },
+    "./icon-button.css": "./src/controls/icon-button/style.css",
+    "./input": {
+      "types": "./types/controls/input.d.ts",
+      "import": "./src/controls/input/index.js"
+    },
+    "./input.css": "./src/controls/input/style.css",
+    "./radio-group": {
+      "types": "./types/controls/radio-group.d.ts",
+      "import": "./src/controls/radio-group/index.js"
+    },
+    "./radio-group.css": "./src/controls/radio-group/style.css",
+    "./rating": {
+      "types": "./types/controls/rating.d.ts",
+      "import": "./src/controls/rating/index.js"
+    },
+    "./rating.css": "./src/controls/rating/style.css",
+    "./select": {
+      "types": "./types/controls/select.d.ts",
+      "import": "./src/controls/select/index.js"
+    },
+    "./select.css": "./src/controls/select/style.css",
+    "./slider": {
+      "types": "./types/controls/slider.d.ts",
+      "import": "./src/controls/slider/index.js"
+    },
+    "./slider.css": "./src/controls/slider/style.css",
+    "./switch": {
+      "types": "./types/controls/switch.d.ts",
+      "import": "./src/controls/switch/index.js"
+    },
+    "./switch.css": "./src/controls/switch/style.css",
+    "./card": {
+      "types": "./types/widgets/card.d.ts",
+      "import": "./src/widgets/card/index.js"
+    },
+    "./card.css": "./src/widgets/card/style.css",
+    "./flex": {
+      "types": "./types/layout/flex.d.ts",
+      "import": "./src/layout/flex/index.js"
+    },
+    "./flex.css": "./src/layout/flex/style.css",
+    "./grid": {
+      "types": "./types/layout/grid.d.ts",
+      "import": "./src/layout/grid/index.js"
+    },
+    "./grid.css": "./src/layout/grid/style.css"
+  },
+  "files": [
+    "src",
+    "types",
+    "!src/**/*.test.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "@inglorious/web": "4.4.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/web-components-vite": "^10.2.10",
+    "happy-dom": "^15.11.0",
+    "jsdom": "^25.0.0",
+    "prettier": "^3.6.2",
+    "storybook": "^10.2.10",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.15",
+    "@inglorious/eslint-config": "1.1.2",
+    "@inglorious/web": "4.4.0",
+    "@inglorious/store": "9.6.0"
+  },
+  "engines": {
+    "node": ">= 22"
+  },
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "test:watch": "vitest",
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

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

@@ -0,0 +1,139 @@
+import { html } from "@inglorious/web"
+
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { button } from "."
+
+export default {
+  title: "Controls/Button",
+  tags: ["autodocs"],
+  render: makeStoryRender(button, "story-button"),
+  argTypes: {
+    ...notifyActionArgType,
+    children: {
+      control: "text",
+      description: "Content displayed inside the button.",
+    },
+    variant: {
+      control: "select",
+      options: ["default", "outline", "ghost"],
+      description: "Visual style variant.",
+    },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      description: "Semantic color intent.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Size scale for paddings and font-size.",
+    },
+    shape: {
+      control: "select",
+      options: ["rectangle", "pill", "round", "square"],
+      description: "Button shape profile.",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables interaction and click notifications.",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Expands button width to 100% of its container.",
+    },
+    type: {
+      control: "select",
+      options: ["button", "submit", "reset", "menu"],
+      description: "Native HTML button type attribute.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Action control with theme-aware variants, sizes, and semantic colors.",
+      },
+    },
+    actions: {
+      handles: ["click"],
+    },
+  },
+}
+export const Default = {}
+Default.args = {
+  children: "Button",
+  variant: "default",
+  color: "primary",
+  size: "md",
+  shape: "rectangle",
+  disabled: false,
+  fullWidth: false,
+  type: "button",
+}
+
+export const Outline = {}
+Outline.args = {
+  ...Default.args,
+  variant: "outline",
+}
+
+export const Ghost = {}
+Ghost.args = {
+  ...Default.args,
+  variant: "ghost",
+}
+
+export const Small = {}
+Small.args = {
+  ...Default.args,
+  size: "sm",
+}
+
+export const Large = {}
+Large.args = {
+  ...Default.args,
+  size: "lg",
+}
+
+export const Secondary = {}
+Secondary.args = {
+  ...Default.args,
+  color: "secondary",
+}
+
+export const Success = {}
+Success.args = {
+  ...Default.args,
+  color: "success",
+}
+
+export const Disabled = {}
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+}
+
+export const FullWidth = {}
+FullWidth.args = {
+  ...Default.args,
+  children: "Full Width Button",
+  fullWidth: true,
+}
+
+export const Round = {}
+Round.args = {
+  ...Default.args,
+  shape: "round",
+  children: "＋",
+}
+
+export const CustomContent = {}
+CustomContent.args = {
+  ...Default.args,
+  children: html`<span style="display: inline-flex; gap: 0.25rem;"
+    ><strong>Save</strong><span>⌘S</span></span
+  >`,
+}

package/src/controls/button/index.js

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

package/src/controls/button/style.css

@@ -0,0 +1,148 @@
+.iw-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--iw-space-2);
+  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);
+  line-height: var(--iw-line-height-normal);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid var(--iw-button-border);
+  border-radius: var(--iw-button-radius);
+  background-color: var(--iw-button-bg);
+  color: var(--iw-button-text);
+  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;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+  }
+
+  &.iw-button-outline {
+    background-color: var(--iw-button-outline-bg);
+    color: var(--iw-button-outline-text);
+    border-color: var(--iw-button-outline-border);
+    box-shadow: none;
+
+    &:hover:not(:disabled) {
+      background-color: var(--iw-button-outline-bg-hover);
+      color: var(--iw-button-outline-text-hover);
+      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);
+    box-shadow: none;
+
+    &:hover:not(:disabled) {
+      background-color: var(--iw-button-ghost-bg-hover);
+      box-shadow: none;
+    }
+  }
+
+  &.iw-button-secondary {
+    --iw-button-bg: var(--iw-color-gray-600);
+    --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-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-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-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-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-sm {
+    padding: var(--iw-space-1) var(--iw-space-3);
+    font-size: var(--iw-font-size-sm);
+  }
+
+  &.iw-button-lg {
+    padding: var(--iw-space-3) var(--iw-space-6);
+    font-size: var(--iw-font-size-lg);
+  }
+
+  &.iw-button-full-width {
+    width: 100%;
+  }
+
+  &.iw-button-shape-pill {
+    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;
+  }
+
+  &.iw-button-shape-square {
+    border-radius: var(--iw-radius-sm);
+  }
+
+  &.iw-button-sm.iw-button-shape-round,
+  &.iw-button-sm.iw-button-shape-square {
+    width: 2rem;
+  }
+
+  &.iw-button-lg.iw-button-shape-round,
+  &.iw-button-lg.iw-button-shape-square {
+    width: 3rem;
+  }
+}

package/src/controls/button/template.js

@@ -0,0 +1,74 @@
+/**
+ * @typedef {import('../../../types/controls/button').ButtonEntity} ButtonEntity
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "@/shared/applyElementProps.js"
+
+/**
+ * Button type for Inglorious Web.
+ *
+ * @example
+ * // Stateless usage
+ * button.render({ children: 'Click me', variant: 'primary' }, api)
+ *
+ * @example
+ * // Stateful usage with event handling
+ * // Entity: { type: 'button', id: 'submitBtn', children: 'Submit' }
+ * // In store: api.render('submitBtn')
+ *
+ * @param {ButtonEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const {
+    children,
+    variant = "default",
+    color = "primary",
+    size = "md",
+    shape = "rectangle",
+    disabled = false,
+    fullWidth = false,
+    type = "button",
+    ariaLabel = "",
+    ariaPressed = false,
+    className = "",
+    ...rest
+  } = entity
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  const classes = {
+    "iw-button": true,
+    [`iw-button-${variant}`]: variant !== "default",
+    [`iw-button-${color}`]: color !== "primary",
+    [`iw-button-${size}`]: size !== "md",
+    [`iw-button-shape-${shape}`]: shape !== "rectangle",
+    "iw-button-full-width": fullWidth,
+    "iw-button-disabled": disabled,
+    ...extraClasses,
+  }
+
+  return html`
+    <button
+      type=${type}
+      aria-label=${ariaLabel}
+      aria-pressed=${ariaPressed}
+      class=${classMap(classes)}
+      ?disabled=${disabled}
+      @click=${() => api.notify(`#${entity.id}:click`)}
+      ${ref((element) => applyElementProps(element, rest))}
+    >
+      ${children}
+    </button>
+  `
+}

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

@@ -0,0 +1,108 @@
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { buttonGroup } from "."
+
+export default {
+  title: "Controls/ButtonGroup",
+  tags: ["autodocs"],
+  render: makeStoryRender(buttonGroup, "story-button-group"),
+  argTypes: {
+    ...notifyActionArgType,
+    value: {
+      control: "object",
+      description:
+        "Selected value(s). String for single mode, array for multiple mode.",
+    },
+    multiple: {
+      control: "boolean",
+      description: "Enable multi-selection mode.",
+    },
+    direction: {
+      control: "select",
+      options: ["row", "column"],
+      description: "Group direction.",
+    },
+    attached: {
+      control: "boolean",
+      description: "Visually attach adjacent buttons.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Default size for items.",
+    },
+    variant: {
+      control: "select",
+      options: ["default", "outline", "ghost"],
+      description: "Default variant for items.",
+    },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      description: "Default color intent for items.",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables all buttons.",
+    },
+    buttons: {
+      control: "object",
+      description: "Items rendered as grouped buttons.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Grouped action buttons with attached or spaced layout.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  value: "",
+  multiple: false,
+  direction: "row",
+  attached: true,
+  size: "md",
+  variant: "outline",
+  color: "primary",
+  disabled: false,
+  buttons: [
+    { id: "left", value: "left", label: "Left" },
+    { id: "center", value: "center", label: "Center" },
+    { id: "right", value: "right", label: "Right" },
+  ],
+}
+
+export const Vertical = {}
+Vertical.args = {
+  ...Default.args,
+  direction: "column",
+}
+
+export const SingleSelection = {}
+SingleSelection.args = {
+  ...Default.args,
+  value: "center",
+  buttons: [
+    { id: "left", value: "left", label: "Left" },
+    { id: "center", value: "center", label: "Center" },
+    { id: "right", value: "right", label: "Right" },
+  ],
+}
+
+export const MultiSelection = {}
+MultiSelection.args = {
+  ...Default.args,
+  multiple: true,
+  value: ["left", "right"],
+  buttons: [
+    { id: "left", value: "left", label: "Left" },
+    { id: "center", value: "center", label: "Center" },
+    { id: "right", value: "right", label: "Right" },
+  ],
+}

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

@@ -0,0 +1,4 @@
+import { withRenderValidation } from "../../shared/withRenderValidation.js"
+import * as renderers from "./template.js"
+
+export const buttonGroup = [{ ...renderers }, withRenderValidation]

package/src/controls/button-group/style.css

@@ -0,0 +1,58 @@
+.iw-button-group {
+  display: inline-flex;
+
+  &.iw-button-group-column {
+    flex-direction: column;
+  }
+
+  &.iw-button-group-row {
+    flex-direction: row;
+  }
+
+  &.iw-button-group-attached.iw-button-group-row .iw-button {
+    border-radius: 0;
+  }
+
+  &.iw-button-group-attached.iw-button-group-row .iw-button:first-child {
+    border-top-left-radius: var(--iw-button-radius);
+    border-bottom-left-radius: var(--iw-button-radius);
+  }
+
+  &.iw-button-group-attached.iw-button-group-row .iw-button:last-child {
+    border-top-right-radius: var(--iw-button-radius);
+    border-bottom-right-radius: var(--iw-button-radius);
+  }
+
+  &.iw-button-group-attached.iw-button-group-row .iw-button + .iw-button {
+    margin-left: -1px;
+  }
+
+  &.iw-button-group-attached.iw-button-group-column .iw-button {
+    border-radius: 0;
+  }
+
+  &.iw-button-group-attached.iw-button-group-column .iw-button:first-child {
+    border-top-left-radius: var(--iw-button-radius);
+    border-top-right-radius: var(--iw-button-radius);
+  }
+
+  &.iw-button-group-attached.iw-button-group-column .iw-button:last-child {
+    border-bottom-left-radius: var(--iw-button-radius);
+    border-bottom-right-radius: var(--iw-button-radius);
+  }
+
+  &.iw-button-group-attached.iw-button-group-column .iw-button + .iw-button {
+    margin-top: -1px;
+  }
+
+  &:not(.iw-button-group-attached) {
+    gap: var(--iw-space-2);
+  }
+
+  &.iw-button-group-selection .iw-button.iw-button-pressed {
+    background-color: var(--iw-button-bg-active);
+    border-color: var(--iw-button-bg-active);
+    color: var(--iw-button-text);
+    box-shadow: var(--iw-button-shadow-active);
+  }
+}