@inglorious/ui 0.1.0 → 1.0.1

package/src/controls/button/template.js

@@ -1,44 +1,40 @@
 /**
- * @typedef {import('../../../types/controls/button').ButtonEntity} ButtonEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/controls/button').ButtonProps} ButtonProps
  * @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"
 
 /**
  * Button type for Inglorious Web.
  *
  * @example
  * // Stateless usage
- * button.render({ children: 'Click me', variant: 'primary' }, api)
+ * button.render({ children: 'Click me', variant: 'primary' })
  *
- * @example
- * // Stateful usage with event handling
- * // Entity: { type: 'button', id: 'submitBtn', children: 'Submit' }
- * // In store: api.render('submitBtn')
- *
- * @param {ButtonEntity} entity
- * @param {Api} api
+ * @param {ButtonProps} props
  * @returns {TemplateResult}
  */
-export function render(entity, api) {
+export function render(props) {
   const {
+    type, // eslint-disable-line no-unused-vars
     children,
     variant = "default",
-    color = "primary",
+    color = "default",
     size = "md",
     shape = "rectangle",
-    disabled = false,
-    fullWidth = false,
-    type = "button",
+    isDisabled = false,
+    isPressed = false,
+    isFullWidth = false,
+    buttonType = "button",
     ariaLabel = "",
-    ariaPressed = false,
+    isAriaPressed = false,
     className = "",
+    onClick,
     ...rest
-  } = entity
+  } = props
 
   const extraClasses = Object.fromEntries(
     className
@@ -50,22 +46,23 @@ export function render(entity, api) {
   const classes = {
     "iw-button": true,
     [`iw-button-${variant}`]: variant !== "default",
-    [`iw-button-${color}`]: color !== "primary",
-    [`iw-button-${size}`]: size !== "md",
+    [`iw-button-${color}`]: true,
+    [`iw-button-${size}`]: true,
+    [`iw-button-pressed`]: isPressed,
     [`iw-button-shape-${shape}`]: shape !== "rectangle",
-    "iw-button-full-width": fullWidth,
-    "iw-button-disabled": disabled,
+    "iw-button-full-width": isFullWidth,
+    "iw-button-disabled": isDisabled,
     ...extraClasses,
   }
 
   return html`
     <button
-      type=${type}
+      type=${buttonType}
       aria-label=${ariaLabel}
-      aria-pressed=${ariaPressed}
+      aria-pressed=${isAriaPressed}
       class=${classMap(classes)}
-      ?disabled=${disabled}
-      @click=${() => api.notify(`#${entity.id}:click`)}
+      ?disabled=${isDisabled}
+      @click=${onClick}
       ${ref((element) => applyElementProps(element, rest))}
     >
       ${children}

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

@@ -1,21 +1,17 @@
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { buttonGroup } from "."
 
 export default {
   title: "Controls/ButtonGroup",
   tags: ["autodocs"],
-  render: makeStoryRender(buttonGroup, "story-button-group"),
+  render: createRender(buttonGroup),
   argTypes: {
-    ...notifyActionArgType,
     value: {
       control: "object",
       description:
         "Selected value(s). String for single mode, array for multiple mode.",
     },
-    multiple: {
+    isMultiple: {
       control: "boolean",
       description: "Enable multi-selection mode.",
     },
@@ -24,7 +20,7 @@ export default {
       options: ["row", "column"],
       description: "Group direction.",
     },
-    attached: {
+    isAttached: {
       control: "boolean",
       description: "Visually attach adjacent buttons.",
     },
@@ -40,10 +36,18 @@ export default {
     },
     color: {
       control: "select",
-      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      options: [
+        "default",
+        "primary",
+        "secondary",
+        "success",
+        "warning",
+        "error",
+        "info",
+      ],
       description: "Default color intent for items.",
     },
-    disabled: {
+    isDisabled: {
       control: "boolean",
       description: "Disables all buttons.",
     },
@@ -51,6 +55,7 @@ export default {
       control: "object",
       description: "Items rendered as grouped buttons.",
     },
+    onChange: { action: "onChange" },
   },
   parameters: {
     docs: {
@@ -64,13 +69,12 @@ export default {
 export const Default = {}
 Default.args = {
   value: "",
-  multiple: false,
+  isMultiple: false,
   direction: "row",
-  attached: true,
+  isAttached: true,
   size: "md",
   variant: "outline",
-  color: "primary",
-  disabled: false,
+  isDisabled: false,
   buttons: [
     { id: "left", value: "left", label: "Left" },
     { id: "center", value: "center", label: "Center" },
@@ -98,7 +102,7 @@ SingleSelection.args = {
 export const MultiSelection = {}
 MultiSelection.args = {
   ...Default.args,
-  multiple: true,
+  isMultiple: true,
   value: ["left", "right"],
   buttons: [
     { id: "left", value: "left", label: "Left" },

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

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

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

@@ -48,11 +48,4 @@
   &: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);
-  }
 }

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

@@ -1,43 +1,43 @@
 /**
- * @typedef {import('../../../types/controls/button-group').ButtonGroupEntity} ButtonGroupEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/controls/button-group').ButtonGroupProps} ButtonGroupProps
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
 import { classMap, html, ref } from "@inglorious/web"
-import { applyElementProps } from "@/shared/applyElementProps.js"
 
-import { buttonPrimitive as button } from "../button/index.js"
+import { applyElementProps } from "../../shared/applyElementProps.js"
+import { button } from "../button/index.js"
 
 /**
  * Button group control for grouped actions.
  *
- * @param {ButtonGroupEntity} entity
- * @param {Api} api
+ * @param {ButtonGroupProps} props
  * @returns {TemplateResult}
  */
-export function render(entity, api) {
+export function render(props) {
   const {
+    type, // eslint-disable-line no-unused-vars
     buttons = [],
     value,
-    multiple = false,
+    isMultiple = false,
     direction = "row",
-    attached = true,
+    isAttached = true,
     size = "md",
     variant = "default",
-    color = "primary",
-    disabled = false,
+    color = "default",
+    isDisabled = false,
+    onChange,
     ...rest
-  } = entity
+  } = props
 
   const groupClasses = {
     "iw-button-group": true,
-    "iw-button-group-selection": value != null || multiple,
+    "iw-button-group-selection": value != null || isMultiple,
     [`iw-button-group-${direction}`]: true,
-    "iw-button-group-attached": attached,
+    "iw-button-group-attached": isAttached,
   }
 
-  const selectedValues = multiple
+  const selectedValues = isMultiple
     ? new Set(Array.isArray(value) ? value : [])
     : null
 
@@ -47,13 +47,13 @@ export function render(entity, api) {
       role="group"
       ${ref((element) => applyElementProps(element, rest))}
     >
-      ${buttons.map((item, index) => {
+      ${buttons.map((item) => {
         const {
           id: itemId,
           value: explicitValue,
           label,
           children,
-          disabled: itemDisabled,
+          isDisabled: itemDisabled,
           variant: itemVariant,
           color: itemColor,
           size: itemSize,
@@ -62,55 +62,45 @@ export function render(entity, api) {
           ...itemRest
         } = item
 
-        const childId = `${entity.id}-btn-${itemId ?? index}`
         const itemValue = explicitValue ?? itemId
-        const pressed = multiple
+        const isPressed = isMultiple
           ? selectedValues.has(itemValue)
           : value != null
             ? value === itemValue
             : false
 
-        const childApi = {
-          ...api,
-          notify(type, payload) {
-            if (type === `#${childId}:click`) {
-              api.notify(`#${entity.id}:click`, itemValue)
-              if (value != null || multiple) {
-                if (multiple) {
-                  const next = new Set(selectedValues)
-                  if (next.has(itemValue)) next.delete(itemValue)
-                  else next.add(itemValue)
-                  return api.notify(`#${entity.id}:change`, [...next])
-                }
-                return api.notify(`#${entity.id}:change`, itemValue)
+        return button.render({
+          children: html`
+            ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
+            ${children ?? label}
+            ${iconAfter
+              ? html`<span class="iw-button-icon">${iconAfter}</span>`
+              : null}
+          `,
+          variant: itemVariant ?? variant,
+          color: itemColor ?? color,
+          size: itemSize ?? size,
+          isDisabled: isDisabled || !!itemDisabled,
+          isPressed,
+          isAriaPressed: isPressed ? true : undefined,
+          onClick: () => {
+            if (!onChange) return
+
+            if (isMultiple) {
+              const next = new Set(selectedValues)
+              if (next.has(itemValue)) {
+                next.delete(itemValue)
+              } else {
+                next.add(itemValue)
               }
-              return
+
+              return onChange([...next])
             }
-            return api.notify(type, payload)
-          },
-        }
 
-        return button.render(
-          {
-            id: childId,
-            children: html`
-              ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
-              ${children ?? label}
-              ${iconAfter
-                ? html`<span class="iw-button-icon">${iconAfter}</span>`
-                : null}
-            `,
-            variant: itemVariant ?? variant,
-            color: itemColor ?? color,
-            size: itemSize ?? size,
-            disabled: disabled || !!itemDisabled,
-            ariaPressed: pressed ? true : undefined,
-            className: pressed ? "iw-button-pressed" : "",
-            type: "button",
-            ...itemRest,
+            return onChange(itemValue)
           },
-          childApi,
-        )
+          ...itemRest,
+        })
       })}
     </div>
   `

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

@@ -1,25 +1,27 @@
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { checkbox } from "."
 
 export default {
   title: "Controls/Checkbox",
   tags: ["autodocs"],
-  render: makeStoryRender(checkbox, "story-checkbox"),
+  render: createRender(checkbox),
   argTypes: {
-    ...notifyActionArgType,
     label: { control: "text", description: "Label text." },
     name: { control: "text", description: "Native HTML name attribute." },
-    checked: { control: "boolean", description: "Current checked state." },
-    disabled: { control: "boolean", description: "Disables interaction." },
-    required: { control: "boolean", description: "Marks input as required." },
+    isChecked: { control: "boolean", description: "Current checked state." },
+    isDisabled: { control: "boolean", description: "Disables interaction." },
+    isRequired: { control: "boolean", description: "Marks input as required." },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      description: "Semantic accent color.",
+    },
     size: {
       control: "select",
       options: ["sm", "md", "lg"],
       description: "Label size scale.",
     },
+    onChange: { action: "onChange" },
   },
   parameters: {
     docs: {
@@ -34,14 +36,15 @@ export const Default = {}
 Default.args = {
   label: "Accept terms",
   name: "terms",
-  checked: false,
-  disabled: false,
-  required: false,
+  isChecked: false,
+  isDisabled: false,
+  isRequired: false,
+  color: "primary",
   size: "md",
 }
 
 export const Checked = {}
 Checked.args = {
   ...Default.args,
-  checked: true,
+  isChecked: true,
 }

package/src/controls/checkbox/index.js

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

package/src/controls/checkbox/style.css

@@ -1,4 +1,5 @@
-.iw-checkbox-field {
+.iw-checkbox {
+  --iw-checkbox-accent: var(--iw-color-primary);
   display: inline-flex;
   align-items: center;
   gap: var(--iw-space-2);
@@ -10,7 +11,7 @@
     width: 1rem;
     height: 1rem;
     margin: 0;
-    accent-color: var(--iw-color-primary);
+    accent-color: var(--iw-checkbox-accent);
   }
 
   .iw-checkbox-label {
@@ -30,4 +31,24 @@
     opacity: 0.6;
     cursor: not-allowed;
   }
+
+  &.iw-checkbox-secondary {
+    --iw-checkbox-accent: var(--iw-color-gray-600);
+  }
+
+  &.iw-checkbox-success {
+    --iw-checkbox-accent: var(--iw-color-success);
+  }
+
+  &.iw-checkbox-warning {
+    --iw-checkbox-accent: var(--iw-color-warning);
+  }
+
+  &.iw-checkbox-error {
+    --iw-checkbox-accent: var(--iw-color-error);
+  }
+
+  &.iw-checkbox-info {
+    --iw-checkbox-accent: var(--iw-color-info);
+  }
 }

package/src/controls/checkbox/template.js

@@ -1,36 +1,39 @@
 /**
- * @typedef {import('../../../types/controls/checkbox').CheckboxEntity} CheckboxEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/controls/checkbox').CheckboxProps} CheckboxProps
  * @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"
 
 /**
  * Checkbox control for boolean values.
  *
- * @param {CheckboxEntity} entity
- * @param {Api} api
+ * @param {CheckboxProps} 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,
-    required = false,
+    isChecked = false,
+    isDisabled = false,
+    isRequired = false,
+    color = "primary",
     size = "md",
+    onChange,
     ...rest
-  } = entity
+  } = props
 
-  const inputId = entity.id || name
+  const inputId = id || name
 
   const classes = {
-    "iw-checkbox-field": true,
-    "iw-checkbox-disabled": disabled,
+    "iw-checkbox": true,
+    "iw-checkbox-disabled": isDisabled,
+    [`iw-checkbox-${color}`]: color !== "primary",
     [`iw-checkbox-${size}`]: size !== "md",
   }
 
@@ -41,11 +44,10 @@ export function render(entity, api) {
         class="iw-checkbox"
         type="checkbox"
         name=${name}
-        .checked=${checked}
-        ?disabled=${disabled}
-        ?required=${required}
-        @change=${(event) =>
-          api.notify(`#${entity.id}:change`, event.target.checked)}
+        .checked=${isChecked}
+        ?disabled=${isDisabled}
+        ?required=${isRequired}
+        @change=${(event) => onChange?.(event.target.checked)}
         ${ref((element) => applyElementProps(element, rest))}
       />
       <span class="iw-checkbox-label">${label}</span>

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

@@ -0,0 +1,92 @@
+import {
+  createEntityRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { combobox } from "./index.js"
+
+const options = [
+  { label: "Italy", value: "it" },
+  { label: "France", value: "fr" },
+  { label: "Spain", value: "es" },
+  { label: "Germany", value: "de" },
+]
+
+export default {
+  title: "Controls/Combobox",
+  tags: ["autodocs"],
+  render: createEntityRender({ combobox }),
+  argTypes: {
+    ...notifyActionArgType,
+    label: { control: "text", description: "Field label." },
+    selectedValue: {
+      control: "object",
+      description: "Current selection. Value or array of values in multi mode.",
+    },
+    isMulti: { control: "boolean", description: "Enable multiple selection." },
+    isOpen: {
+      control: "boolean",
+      description: "Controls dropdown visibility.",
+    },
+    isSearchable: { control: "boolean", description: "Show search input." },
+    isClearable: { control: "boolean", description: "Show clear button." },
+    isDisabled: { control: "boolean", description: "Disable the control." },
+    isLoading: { control: "boolean", description: "Show loading state." },
+    searchTerm: { control: "text", description: "Current search filter." },
+    placeholder: { control: "text", description: "Placeholder text." },
+    noOptionsMessage: { control: "text", description: "No results message." },
+    loadingMessage: { control: "text", description: "Loading message." },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expand to container width.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Control size.",
+    },
+    options: { control: "object", description: "Available options." },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Theme-aware custom select with searchable dropdown, clear action, and optional multi-selection.",
+      },
+    },
+  },
+}
+
+export const SingleClosed = {}
+SingleClosed.args = {
+  id: "combobox",
+  type: "combobox",
+  label: "Country",
+  selectedValue: "it",
+  isMulti: false,
+  isOpen: false,
+  isSearchable: true,
+  isClearable: true,
+  isDisabled: false,
+  isLoading: false,
+  searchTerm: "",
+  placeholder: "Select...",
+  noOptionsMessage: "No options",
+  loadingMessage: "Loading...",
+  isFullWidth: false,
+  size: "md",
+  options,
+}
+
+export const SingleOpen = {}
+SingleOpen.args = {
+  ...SingleClosed.args,
+  isOpen: true,
+}
+
+export const MultiOpen = {}
+MultiOpen.args = {
+  ...SingleClosed.args,
+  isMulti: true,
+  selectedValue: ["it", "fr"],
+  isOpen: true,
+}

package/src/controls/{select → combobox}/handlers.js

@@ -1,7 +1,6 @@
-/* eslint-disable no-magic-numbers */
 /**
- * @typedef {import('../../../types/controls/select').SelectEntity} SelectEntity
- * @typedef {import('../../../types/controls/select').SelectOption} SelectOption
+ * @typedef {import('../../../types/controls/select.js').SelectProps} SelectEntity
+ * @typedef {import('../../../types/controls/select.js').SelectOption} SelectOption
  */
 
 import { filterOptions, formatOption, getOptionValue } from "./helpers.js"
@@ -11,6 +10,10 @@ import { filterOptions, formatOption, getOptionValue } from "./helpers.js"
  * @param {SelectEntity} entity
  */
 export function create(entity) {
+  entity.size ??= "md"
+  entity.isFullWidth ??= false
+  entity.label ??= ""
+
   entity.isOpen ??= false
   entity.searchTerm ??= ""
   entity.focusedIndex ??= -1
@@ -23,8 +26,8 @@ export function create(entity) {
 
   entity.isLoading ??= false
   entity.isDisabled ??= false
-  entity.isSearchable ??= true
-  entity.isClearable ??= true
+  entity.isSearchable ??= false
+  entity.isClearable ??= false
 
   entity.placeholder ??= "Select..."
   entity.noOptionsMessage ??= "No options"