@inglorious/ui 0.1.0 → 1.0.0

package/src/controls/switch/index.js

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

package/src/controls/switch/style.css

@@ -1,4 +1,5 @@
-.iw-switch-field {
+.iw-switch {
+  --iw-switch-active-bg: var(--iw-color-primary);
   display: inline-flex;
   align-items: center;
   gap: var(--iw-space-2);
@@ -35,7 +36,7 @@
   }
 
   .iw-switch-input:checked + .iw-switch-track {
-    background: var(--iw-color-primary);
+    background: var(--iw-switch-active-bg);
   }
 
   .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
@@ -79,4 +80,24 @@
     opacity: 0.6;
     cursor: not-allowed;
   }
+
+  &.iw-switch-secondary {
+    --iw-switch-active-bg: var(--iw-color-gray-600);
+  }
+
+  &.iw-switch-success {
+    --iw-switch-active-bg: var(--iw-color-success);
+  }
+
+  &.iw-switch-warning {
+    --iw-switch-active-bg: var(--iw-color-warning);
+  }
+
+  &.iw-switch-error {
+    --iw-switch-active-bg: var(--iw-color-error);
+  }
+
+  &.iw-switch-info {
+    --iw-switch-active-bg: var(--iw-color-info);
+  }
 }

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

@@ -1,24 +1,26 @@
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { switchControl } from "."
 
 export default {
   title: "Controls/Switch",
   tags: ["autodocs"],
-  render: makeStoryRender(switchControl, "story-switch"),
+  render: createRender(switchControl),
   argTypes: {
-    ...notifyActionArgType,
     label: { control: "text", description: "Label text." },
     name: { control: "text", description: "Native input name." },
-    checked: { control: "boolean", description: "Current checked state." },
-    disabled: { control: "boolean", description: "Disables interaction." },
+    isChecked: { control: "boolean", description: "Current checked state." },
+    isDisabled: { control: "boolean", description: "Disables interaction." },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      description: "Semantic active-track color.",
+    },
     size: {
       control: "select",
       options: ["sm", "md", "lg"],
       description: "Switch size.",
     },
+    onChange: { action: "onChange" },
   },
   parameters: {
     docs: {
@@ -33,13 +35,14 @@ export const Default = {}
 Default.args = {
   label: "Enable notifications",
   name: "notifications",
-  checked: false,
-  disabled: false,
+  isChecked: false,
+  isDisabled: false,
+  color: "primary",
   size: "md",
 }
 
 export const On = {}
 On.args = {
   ...Default.args,
-  checked: true,
+  isChecked: true,
 }

package/src/controls/switch/template.js

@@ -1,36 +1,39 @@
 /**
- * @typedef {import('../../../types/controls/switch').SwitchEntity} SwitchEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/controls/switch').SwitchProps} SwitchProps
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
 import { classMap, html, ref } from "@inglorious/web"
 
-import { applyElementProps } from "@/shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
  * Switch control implemented with a checkbox input.
  *
- * @param {SwitchEntity} entity
- * @param {Api} api
+ * @param {SwitchProps} props
  * @returns {TemplateResult}
  */
-export function render(entity, api) {
+export function render(props) {
   const {
+    id,
+    type, // eslint-disable-line no-unused-vars
     name = "",
     label = "",
-    checked = false,
-    disabled = false,
+    isChecked = false,
+    isDisabled = false,
+    color = "primary",
     size = "md",
+    onChange,
     ...rest
-  } = entity
+  } = props
 
-  const inputId = entity.id || name
+  const inputId = id || name
 
   const classes = {
-    "iw-switch-field": true,
+    "iw-switch": true,
+    [`iw-switch-${color}`]: color !== "primary",
     [`iw-switch-${size}`]: size !== "md",
-    "iw-switch-disabled": disabled,
+    "iw-switch-disabled": isDisabled,
   }
 
   return html`
@@ -40,10 +43,9 @@ export function render(entity, api) {
         class="iw-switch-input"
         type="checkbox"
         name=${name}
-        .checked=${checked}
-        ?disabled=${disabled}
-        @change=${(event) =>
-          api.notify(`#${entity.id}:change`, event.target.checked)}
+        .checked=${isChecked}
+        ?disabled=${isDisabled}
+        @change=${(event) => onChange?.(event.target.checked)}
         ${ref((element) => applyElementProps(element, rest))}
       />
       <span class="iw-switch-track" aria-hidden="true">

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

@@ -0,0 +1,106 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { avatar } from "."
+
+export default {
+  title: "Data Display/Avatar",
+  tags: ["autodocs"],
+  render: createRender(avatar),
+  argTypes: {
+    src: {
+      control: "text",
+      description:
+        "Image URL (for local Storybook public assets use /filename).",
+    },
+    alt: { control: "text", description: "Alternative text for avatar image." },
+    initials: {
+      control: "text",
+      description: "Fallback initials when no image is provided.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Avatar size scale.",
+    },
+    shape: {
+      control: "select",
+      options: ["circle", "square"],
+      description: "Avatar shape variant.",
+    },
+    color: {
+      control: "select",
+      options: [
+        "default",
+        "auto",
+        "primary",
+        "secondary",
+        "success",
+        "warning",
+        "error",
+        "info",
+      ],
+      description: "Preset color for initials or fallback content.",
+    },
+    backgroundColor: {
+      control: "text",
+      description: "Custom background color override (CSS color string).",
+    },
+    textColor: {
+      control: "text",
+      description: "Custom text color override (CSS color string).",
+    },
+    onClick: { action: "onClick" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "User identity primitive that renders an image when `src` is set, otherwise initials or children.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    initials: "AM",
+    src: "",
+    size: "md",
+    shape: "circle",
+    color: "default",
+    backgroundColor: "",
+    textColor: "",
+  },
+}
+
+export const WithImage = {
+  args: {
+    ...Default.args,
+    src: "/transparent.png",
+    alt: "Transparent avatar sample",
+  },
+}
+
+export const ColoredInitials = {
+  args: {
+    ...Default.args,
+    initials: "UI",
+    color: "primary",
+  },
+}
+
+export const AutoColor = {
+  args: {
+    ...Default.args,
+    initials: "AD",
+    color: "auto",
+  },
+}
+
+export const CustomColor = {
+  args: {
+    ...Default.args,
+    initials: "IC",
+    backgroundColor: "#1d4ed8",
+    textColor: "#ffffff",
+  },
+}

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

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

package/src/data-display/avatar/style.css

@@ -0,0 +1,64 @@
+.iw-avatar {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--iw-color-bg-secondary);
+  color: var(--iw-color-text);
+  font-size: var(--iw-font-size-sm);
+  font-weight: var(--iw-font-weight-medium);
+  line-height: 1;
+  overflow: hidden;
+
+  .iw-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &.iw-avatar-sm {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  &.iw-avatar-lg {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  &.iw-avatar-square {
+    border-radius: var(--iw-radius-sm);
+  }
+
+  &.iw-avatar-color-primary {
+    background: var(--iw-color-primary);
+    color: var(--iw-color-primary-text, var(--iw-color-white));
+  }
+
+  &.iw-avatar-color-secondary {
+    background: var(--iw-color-gray-400);
+    color: var(--iw-color-text);
+  }
+
+  &.iw-avatar-color-success {
+    background: var(--iw-color-success);
+    color: var(--iw-color-white);
+  }
+
+  &.iw-avatar-color-warning {
+    background: var(--iw-color-warning);
+    color: var(--iw-color-white);
+  }
+
+  &.iw-avatar-color-error {
+    background: var(--iw-color-error);
+    color: var(--iw-color-white);
+  }
+
+  &.iw-avatar-color-info {
+    background: var(--iw-color-info);
+    color: var(--iw-color-white);
+  }
+}

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

@@ -0,0 +1,81 @@
+/**
+ * @typedef {import('../../../types/data-display/avatar').AvatarProps} AvatarProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, styleMap } from "@inglorious/web"
+
+/**
+ * Avatar component.
+ * @param {AvatarProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    src,
+    alt = "avatar",
+    initials,
+    size = "md",
+    shape = "circle",
+    color = "default",
+    backgroundColor,
+    textColor,
+    children,
+    onClick,
+  } = props
+
+  const hasCustomBackground = Boolean(backgroundColor)
+  const resolvedColor =
+    color === "auto" && !hasCustomBackground ? "default" : color
+  const classes = {
+    "iw-avatar": true,
+    [`iw-avatar-${size}`]: size !== "md",
+    [`iw-avatar-${shape}`]: shape !== "circle",
+    [`iw-avatar-color-${resolvedColor}`]:
+      resolvedColor !== "default" && !hasCustomBackground,
+  }
+
+  const styles = {}
+  if (backgroundColor) {
+    styles.background = backgroundColor
+    styles.color = textColor ?? "var(--iw-color-white)"
+  } else if (color === "auto") {
+    const seed = getAutoSeed(initials, children)
+    if (seed) {
+      styles.background = hashToHsl(seed)
+      styles.color = textColor ?? "var(--iw-color-white)"
+    }
+  } else if (textColor) {
+    styles.color = textColor
+  }
+
+  return html`<span
+    class=${classMap(classes)}
+    style=${styleMap(styles)}
+    @click=${onClick}
+  >
+    ${src
+      ? html`<img class="iw-avatar-img" src=${src} alt=${alt} />`
+      : (children ?? initials ?? "?")}
+  </span>`
+}
+
+function getAutoSeed(initials, children) {
+  return String(
+    initials ??
+      (typeof children === "string" || typeof children === "number"
+        ? children
+        : ""),
+  ).trim()
+}
+
+function hashToHsl(seed) {
+  let hash = 0
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = (hash << 5) - hash + seed.charCodeAt(i)
+    hash |= 0
+  }
+
+  const hue = Math.abs(hash) % 360
+  return `hsl(${hue} 65% 45%)`
+}

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

@@ -0,0 +1,64 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { badge } from "."
+
+export default {
+  title: "Data Display/Badge",
+  tags: ["autodocs"],
+  render: createRender(badge),
+  argTypes: {
+    children: { control: "text", description: "Badge content." },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      description: "Semantic color intent.",
+    },
+    variant: {
+      control: "select",
+      options: ["solid", "outline"],
+      description: "Visual style variant.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Badge size scale.",
+    },
+    shape: {
+      control: "select",
+      options: ["rectangle", "pill", "circle", "square"],
+      description: "Badge shape variant.",
+    },
+    ringWidth: {
+      control: "text",
+      description: "Ring width for shaped badges (e.g. 2px).",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes.",
+    },
+    onClick: { action: "onClick" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Compact status label for counters, tags, and semantic highlights.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    children: "New",
+    size: "md",
+  },
+}
+
+export const Dot = {
+  args: {
+    children: "",
+    color: "success",
+    shape: "circle",
+    ringWidth: "2px",
+  },
+}

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

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

package/src/data-display/badge/style.css

@@ -0,0 +1,84 @@
+.iw-badge {
+  --iw-badge-accent: var(--iw-color-primary);
+  --iw-badge-on-accent: var(--iw-color-primary-text);
+  --iw-badge-shape-size: 0.65rem;
+  --iw-badge-ring-color: var(--iw-color-text);
+  --iw-badge-ring-width: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--iw-space-2);
+  min-height: 1.25rem;
+  border-radius: var(--iw-badge-radius, var(--iw-radius-sm));
+  background: var(--iw-badge-accent);
+  color: var(--iw-badge-on-accent);
+  font-size: var(--iw-font-size-xs, 0.75rem);
+  line-height: 1;
+
+  &.iw-badge-sm {
+    --iw-badge-shape-size: 0.5rem;
+    min-height: 1rem;
+    padding-inline: var(--iw-space-1);
+    font-size: var(--iw-font-size-xs);
+  }
+
+  &.iw-badge-lg {
+    --iw-badge-shape-size: 0.8rem;
+    min-height: 1.5rem;
+    padding-inline: var(--iw-space-3);
+    font-size: var(--iw-font-size-sm);
+  }
+
+  &.iw-badge-shape-circle,
+  &.iw-badge-shape-square {
+    width: var(--iw-badge-shape-size);
+    height: var(--iw-badge-shape-size);
+    min-width: var(--iw-badge-shape-size);
+    min-height: var(--iw-badge-shape-size);
+    padding: 0;
+    line-height: 0;
+    border: var(--iw-badge-ring-width) solid var(--iw-badge-ring-color);
+  }
+
+  &.iw-badge-shape-circle {
+    border-radius: 50%;
+  }
+
+  &.iw-badge-shape-square {
+    border-radius: var(--iw-radius-sm);
+  }
+
+  &.iw-badge-shape-pill {
+    border-radius: var(--iw-radius-full);
+  }
+
+  &.iw-badge-secondary {
+    --iw-badge-accent: var(--iw-color-gray-600);
+    --iw-badge-on-accent: var(--iw-color-white);
+  }
+
+  &.iw-badge-success {
+    --iw-badge-accent: var(--iw-color-success);
+    --iw-badge-on-accent: var(--iw-color-white);
+  }
+
+  &.iw-badge-warning {
+    --iw-badge-accent: var(--iw-color-warning);
+    --iw-badge-on-accent: var(--iw-color-black);
+  }
+
+  &.iw-badge-error {
+    --iw-badge-accent: var(--iw-color-error);
+    --iw-badge-on-accent: var(--iw-color-white);
+  }
+
+  &.iw-badge-info {
+    --iw-badge-accent: var(--iw-color-info);
+    --iw-badge-on-accent: var(--iw-color-white);
+  }
+
+  &.iw-badge-outline {
+    background: transparent;
+    border: 1px solid var(--iw-badge-accent);
+    color: var(--iw-badge-accent);
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * @typedef {import('../../../types/data-display/badge').BadgeProps} BadgeProps
+ */
+
+import { classMap, html, styleMap } from "@inglorious/web"
+
+export function render(props) {
+  const {
+    children,
+    color = "primary",
+    variant = "solid",
+    size = "md",
+    shape = "rectangle",
+    ringWidth = 0,
+    className = "",
+    onClick,
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  const classes = {
+    "iw-badge": true,
+    [`iw-badge-${color}`]: color !== "primary",
+    [`iw-badge-${variant}`]: variant !== "solid",
+    [`iw-badge-${size}`]: size !== "md",
+    [`iw-badge-shape-${shape}`]: shape !== "rectangle",
+    ...extraClasses,
+  }
+
+  const styles = {}
+  if (ringWidth) {
+    styles["--iw-badge-ring-width"] = ringWidth
+  }
+
+  return html`<span
+    class=${classMap(classes)}
+    style=${styleMap(styles)}
+    @click=${onClick}
+    >${children}</span
+  >`
+}

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

@@ -0,0 +1,57 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { chip } from "."
+
+export default {
+  title: "Data Display/Chip",
+  tags: ["autodocs"],
+  render: createRender(chip),
+  argTypes: {
+    children: { control: "text", description: "Chip label content." },
+    isRemovable: {
+      control: "boolean",
+      description: "Shows a remove affordance and emits `#id:remove`.",
+    },
+    color: {
+      control: "select",
+      options: [
+        "default",
+        "primary",
+        "secondary",
+        "success",
+        "warning",
+        "error",
+        "info",
+      ],
+      description: "Semantic color variant.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Chip size scale.",
+    },
+    shape: {
+      control: "select",
+      options: ["pill", "rounded", "square"],
+      description: "Chip corner style.",
+    },
+    onClick: { action: "onClick" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Small labeled token for selections and filters, optionally removable.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    children: "Tag",
+    isRemovable: true,
+    color: "default",
+    size: "md",
+    shape: "pill",
+  },
+}

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

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