@inglorious/ui 0.1.0 → 1.0.1

package/types/navigation/drawer.d.ts

@@ -0,0 +1,23 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface DrawerProps {
+  id?: string
+  type?: string
+  isOpen?: boolean
+  anchor?: "left" | "right" | "top" | "bottom"
+  variant?: "temporary" | "persistent" | "permanent" | "responsive"
+  breakpoint?: "sm" | "md" | "lg" | "xl"
+  isCollapsed?: boolean
+  title?: TemplateResult | string | number
+  children?: TemplateResult | string | number
+  hasBackdrop?: boolean
+  className?: string
+  onClose?: () => void
+  [key: string]: unknown
+}
+
+export interface DrawerType {
+  render(props: DrawerProps): TemplateResult | null
+}
+
+export declare const drawer: DrawerType

package/types/navigation/link.d.ts

@@ -0,0 +1,22 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface LinkProps {
+  id?: string
+  type?: string
+  href?: string
+  label?: TemplateResult | string | number
+  children?: TemplateResult | string | number
+  underline?: "always" | "hover" | "none"
+  color?: "primary" | "secondary" | "inherit"
+  isMuted?: boolean
+  isExternal?: boolean
+  className?: string
+  onClick?: () => void
+  [key: string]: unknown
+}
+
+export interface LinkType {
+  render(props: LinkProps): TemplateResult
+}
+
+export declare const link: LinkType

package/types/navigation/menu.d.ts

@@ -0,0 +1,32 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface MenuItem {
+  id?: string | number
+  value?: string | number
+  label?: TemplateResult | string | number
+  icon?: TemplateResult | string | number
+  trailing?: TemplateResult | string | number
+  hasDivider?: boolean
+  isDisabled?: boolean
+  isSelected?: boolean
+  onClick?: (value: string | number) => void
+  [key: string]: unknown
+}
+
+export interface MenuProps {
+  id?: string
+  type?: string
+  isOpen?: boolean
+  items?: MenuItem[]
+  isDense?: boolean
+  className?: string
+  onItemClick?: (value: string | number, item: MenuItem) => void
+  [key: string]: unknown
+}
+
+export interface MenuType {
+  render(props: MenuProps): TemplateResult | null
+  renderItem(item: MenuItem, index: number, props: MenuProps): TemplateResult
+}
+
+export declare const menu: MenuType

package/types/navigation/pagination.d.ts

@@ -0,0 +1,50 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface PaginationProps {
+  id?: string
+  type?: string
+  page?: number
+  count?: number
+  siblingCount?: number
+  isFirstButtonVisible?: boolean
+  isLastButtonVisible?: boolean
+  isDisabled?: boolean
+  buttonVariant?: "default" | "outline" | "ghost"
+  buttonColor?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+  buttonSize?: "sm" | "md" | "lg"
+  itemClassName?: string
+  className?: string
+  onChange?: (page: number) => void
+  [key: string]: unknown
+}
+
+export interface PaginationItemRenderProps {
+  item: number | string
+}
+
+export interface PaginationControlRenderProps {
+  label: string
+  target: number
+  isDisabled?: boolean
+  onChange?: (page: number) => void
+}
+
+export interface PaginationType {
+  render(props: PaginationProps): TemplateResult
+  renderItem(
+    props: PaginationProps,
+    payload: PaginationItemRenderProps,
+  ): TemplateResult
+  renderControl(
+    props: PaginationProps,
+    payload: PaginationControlRenderProps,
+  ): TemplateResult
+}
+
+export declare const pagination: PaginationType

package/types/navigation/speed-dial.d.ts

@@ -0,0 +1,35 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface SpeedDialAction {
+  id?: string | number
+  value?: string | number
+  label?: TemplateResult | string | number
+  icon?: TemplateResult | string | number
+  isDisabled?: boolean
+  onClick?: (value: string | number) => void
+  [key: string]: unknown
+}
+
+export interface SpeedDialProps {
+  id?: string
+  type?: string
+  isOpen?: boolean
+  icon?: TemplateResult | string | number
+  ariaLabel?: string
+  direction?: "up" | "down" | "left" | "right"
+  actions?: SpeedDialAction[]
+  onToggle?: (isOpen: boolean) => void
+  onAction?: (value: string | number, action: SpeedDialAction) => void
+  [key: string]: unknown
+}
+
+export interface SpeedDialType {
+  render(props: SpeedDialProps): TemplateResult
+  renderAction(
+    action: SpeedDialAction,
+    index: number,
+    props: SpeedDialProps,
+  ): TemplateResult
+}
+
+export declare const speedDial: SpeedDialType

package/types/navigation/stepper.d.ts

@@ -0,0 +1,26 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface Step {
+  id?: string | number
+  label: TemplateResult | string | number
+  optional?: TemplateResult | string | number
+  isCompleted?: boolean
+  [key: string]: unknown
+}
+
+export interface StepperProps {
+  id?: string
+  type?: string
+  steps?: Step[]
+  activeStep?: number
+  orientation?: "horizontal" | "vertical"
+  isAlternativeLabel?: boolean
+  [key: string]: unknown
+}
+
+export interface StepperType {
+  render(props: StepperProps): TemplateResult
+  renderStep(step: Step, index: number, props: StepperProps): TemplateResult
+}
+
+export declare const stepper: StepperType

package/types/navigation/tabs.d.ts

@@ -0,0 +1,31 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface TabItem {
+  id?: string | number
+  value?: string | number
+  label: TemplateResult | string | number
+  icon?: TemplateResult | string | number
+  panel?: TemplateResult | string | number
+  isDisabled?: boolean
+  onClick?: (value: string | number) => void
+  [key: string]: unknown
+}
+
+export interface TabsProps {
+  id?: string
+  type?: string
+  items?: TabItem[]
+  value?: string | number
+  isCentered?: boolean
+  isFullWidth?: boolean
+  onChange?: (value: string | number) => void
+  [key: string]: unknown
+}
+
+export interface TabsType {
+  render(props: TabsProps): TemplateResult
+  renderTab(item: TabItem, index: number, props: TabsProps): TemplateResult
+  renderPanel(item: TabItem | null, props: TabsProps): TemplateResult | null
+}
+
+export declare const tabs: TabsType

package/types/surfaces/accordion.d.ts

@@ -0,0 +1,32 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface AccordionItem {
+  id?: string | number
+  title: TemplateResult | string | number
+  content?: TemplateResult | string | number
+  icon?: TemplateResult | string | number
+  isExpanded?: boolean
+  isDisabled?: boolean
+  onToggle?: (item: AccordionItem, index: number, expanded: boolean) => void
+  [key: string]: unknown
+}
+
+export interface AccordionProps {
+  id?: string
+  type?: string
+  className?: string
+  items?: AccordionItem[]
+  onItemToggle?: (item: AccordionItem, index: number, expanded: boolean) => void
+  [key: string]: unknown
+}
+
+export interface AccordionType {
+  render(props: AccordionProps): TemplateResult
+  renderItem(
+    item: AccordionItem,
+    index: number,
+    props: AccordionProps,
+  ): TemplateResult
+}
+
+export declare const accordion: AccordionType

package/types/surfaces/app-bar.d.ts

@@ -0,0 +1,25 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface AppBarProps {
+  id?: string
+  type?: string
+  title?: TemplateResult | string | number
+  subtitle?: TemplateResult | string | number
+  leading?: TemplateResult | string | number
+  trailing?: TemplateResult | string | number
+  children?: TemplateResult | string | number
+  isDense?: boolean
+  variant?: "regular" | "dense" | "prominent"
+  color?: "default" | "primary" | "secondary" | "transparent" | "inherit"
+  isElevated?: boolean
+  position?: "static" | "sticky" | "fixed" | "absolute" | "relative"
+  placement?: "top" | "bottom"
+  className?: string
+  [key: string]: unknown
+}
+
+export interface AppBarType {
+  render(props: AppBarProps): TemplateResult
+}
+
+export declare const appBar: AppBarType

package/types/surfaces/card.d.ts

@@ -0,0 +1,39 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface CardProps {
+  id?: string
+  type?: string
+  element?:
+    | "article"
+    | "section"
+    | "div"
+    | "main"
+    | "header"
+    | "footer"
+    | "nav"
+    | "aside"
+  title?: TemplateResult | string | number
+  subtitle?: TemplateResult | string | number
+  header?: TemplateResult | string | number
+  body?: TemplateResult | string | number
+  children?: TemplateResult | string | number
+  footer?: TemplateResult | string | number
+  headerPadding?: "none" | "sm" | "md" | "lg" | "xl"
+  bodyPadding?: "none" | "sm" | "md" | "lg" | "xl"
+  footerPadding?: "none" | "sm" | "md" | "lg" | "xl"
+  isHoverable?: boolean
+  isClickable?: boolean
+  isFullWidth?: boolean
+  className?: string
+  onClick?: () => void
+  [key: string]: unknown
+}
+
+export interface CardType {
+  render(props: CardProps): TemplateResult
+  renderHeader(props: CardProps): TemplateResult | null
+  renderBody(props: CardProps): TemplateResult | null
+  renderFooter(props: CardProps): TemplateResult | null
+}
+
+export declare const card: CardType

package/types/surfaces/paper.d.ts

@@ -0,0 +1,28 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface PaperProps {
+  id?: string
+  type?: string
+  element?:
+    | "div"
+    | "section"
+    | "main"
+    | "header"
+    | "footer"
+    | "nav"
+    | "aside"
+    | "article"
+  children?: TemplateResult | string | number
+  variant?: "elevated" | "outlined"
+  elevation?: number
+  padding?: "none" | "sm" | "md" | "lg"
+  radius?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"
+  className?: string
+  [key: string]: unknown
+}
+
+export interface PaperType {
+  render(props: PaperProps): TemplateResult
+}
+
+export declare const paper: PaperType

package/src/shared/withRenderValidation.js

@@ -1,19 +0,0 @@
-export function withRenderValidation(type) {
-  if (typeof type.render !== "function") {
-    throw new TypeError(
-      "withRenderValidation(type): type.render must be a function",
-    )
-  }
-
-  return {
-    ...type,
-
-    render(entity, api) {
-      if (entity == null || api == null) {
-        throw new TypeError("render(entity, api): both arguments are required")
-      }
-
-      return type.render(entity, api)
-    },
-  }
-}

package/src/widgets/card/card.stories.js

@@ -1,135 +0,0 @@
-import { html } from "@inglorious/web"
-
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
-import { card } from "."
-
-export default {
-  title: "Widgets/Card",
-  tags: ["autodocs"],
-  render: makeStoryRender(card, "story-card"),
-  argTypes: {
-    ...notifyActionArgType,
-    title: {
-      control: "text",
-      description: "Primary header text.",
-    },
-    subtitle: {
-      control: "text",
-      description: "Secondary header text.",
-    },
-    hoverable: {
-      control: "boolean",
-      description: "Enables hover visual feedback.",
-    },
-    clickable: {
-      control: "boolean",
-      description: "Marks the card as interactive and emits click events.",
-    },
-    fullWidth: {
-      control: "boolean",
-      description: "Expands card width to 100% of its container.",
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Container widget with overridable header/body/footer sub-renderers.",
-      },
-    },
-    actions: {
-      handles: ["click"],
-    },
-  },
-}
-export const Default = {}
-Default.args = {
-  title: "Card Title",
-  subtitle: "This is a card subtitle",
-  hoverable: false,
-  clickable: false,
-  fullWidth: false,
-}
-
-export const Hoverable = {}
-Hoverable.args = {
-  ...Default.args,
-  hoverable: true,
-}
-
-export const Clickable = {}
-Clickable.args = {
-  ...Default.args,
-  hoverable: true,
-  clickable: true,
-}
-
-const cardWithFooter = [
-  ...card,
-  {
-    renderFooter(entity, api) {
-      return html`<div
-        class="iw-card-footer"
-        style="display: flex; gap: 0.5rem;"
-      >
-        ${entity.footerActions?.map(
-          (action) =>
-            html`<button
-              class="iw-button iw-button-sm ${action.variant === "ghost"
-                ? "iw-button-ghost"
-                : ""}"
-              @click=${() => api.notify(`#${entity.id}:${action.event}`)}
-            >
-              ${action.label}
-            </button>`,
-        )}
-      </div>`
-    },
-  },
-]
-
-export const WithFooter = {}
-WithFooter.render = makeStoryRender(cardWithFooter, "card-footer", {
-  resolveByEntityType: true,
-})
-WithFooter.args = {
-  type: "cardWithFooter",
-  title: "Card with Footer",
-  subtitle: "This card has a footer section",
-  footerActions: [
-    { label: "Cancel", event: "cancel", variant: "ghost" },
-    { label: "Save", event: "save" },
-  ],
-}
-
-export const NoHeader = {}
-NoHeader.args = {
-  title: null,
-  subtitle: null,
-}
-
-export const FullWidth = {}
-FullWidth.args = {
-  ...Default.args,
-  fullWidth: true,
-}
-
-export const Interactive = {}
-Interactive.render = makeStoryRender(cardWithFooter, "card-interactive", {
-  resolveByEntityType: true,
-})
-Interactive.args = {
-  type: "cardWithFooter",
-  title: "Interactive Card",
-  subtitle: "Hover, click, and trigger footer actions",
-  hoverable: true,
-  clickable: true,
-  fullWidth: false,
-  footerActions: [
-    { label: "Details", event: "details", variant: "ghost" },
-    { label: "Open", event: "open" },
-  ],
-}

package/src/widgets/card/index.js

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

package/src/widgets/card/style.css

@@ -1,53 +0,0 @@
-.iw-card {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--iw-card-bg);
-  border: 1px solid var(--iw-card-border);
-  border-radius: var(--iw-card-radius);
-  box-shadow: var(--iw-card-shadow);
-  overflow: hidden;
-  transition: all var(--iw-transition-normal);
-
-  &.iw-card-hoverable:hover {
-    box-shadow: var(--iw-card-shadow-hover);
-  }
-
-  &.iw-card-clickable {
-    cursor: pointer;
-  }
-
-  &.iw-card-full-width {
-    width: 100%;
-  }
-
-  .iw-card-header {
-    padding: var(--iw-space-4);
-    border-bottom: 1px solid var(--iw-color-border);
-  }
-
-  .iw-card-title {
-    margin: 0;
-    font-size: var(--iw-font-size-lg);
-    font-weight: var(--iw-font-weight-semibold);
-    color: var(--iw-color-text);
-    line-height: var(--iw-line-height-tight);
-  }
-
-  .iw-card-subtitle {
-    margin: var(--iw-space-1) 0 0;
-    font-size: var(--iw-font-size-sm);
-    color: var(--iw-color-text-secondary);
-    line-height: var(--iw-line-height-normal);
-  }
-
-  .iw-card-body {
-    padding: var(--iw-space-4);
-    flex: 1;
-  }
-
-  .iw-card-footer {
-    padding: var(--iw-space-4);
-    border-top: 1px solid var(--iw-color-border);
-    background-color: var(--iw-color-bg-secondary);
-  }
-}

package/src/widgets/card/template.js

@@ -1,97 +0,0 @@
-/**
- * @typedef {import('../../../types/widgets/card').CardEntity} CardEntity
- * @typedef {import('@inglorious/web').Api} Api
- * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
- */
-
-import { classMap, html } from "@inglorious/web"
-
-/**
- * Card component for Inglorious Web.
- *
- * @example
- * // Stateless usage
- * card.render({ title: 'Card Title', subtitle: 'Description' }, api)
- *
- * @example
- * // Stateful usage with event handling
- * // Entity: { type: 'card', id: 'myCard', title: 'Click me' }
- * // In store: api.render('myCard')
- *
- * @param {CardEntity} entity
- * @param {Api} api
- * @returns {TemplateResult}
- */
-export function render(entity, api) {
-  const { hoverable = false, clickable = false, fullWidth = false } = entity
-  const type = getCardType(entity, api)
-
-  const classes = {
-    "iw-card": true,
-    "iw-card-hoverable": hoverable || clickable,
-    "iw-card-clickable": clickable,
-    "iw-card-full-width": fullWidth,
-  }
-
-  return html`
-    <div
-      class=${classMap(classes)}
-      @click=${() => api.notify(`#${entity.id}:click`)}
-    >
-      ${type.renderHeader(entity, api)} ${type.renderBody(entity, api)}
-      ${type.renderFooter(entity, api)}
-    </div>
-  `
-}
-
-/**
- * Default header renderer.
- * Override in composed types for custom header rendering.
- * @param {CardEntity} entity
- * @returns {TemplateResult | null}
- */
-export function renderHeader(entity) {
-  const { title, subtitle } = entity
-  const hasHeader = title || subtitle
-  if (!hasHeader) return null
-
-  return html`<div class="iw-card-header">
-    ${title ? html`<h3 class="iw-card-title">${title}</h3>` : null}
-    ${subtitle ? html`<p class="iw-card-subtitle">${subtitle}</p>` : null}
-  </div>`
-}
-
-/**
- * Default body renderer.
- * Override in composed types for custom body rendering.
- * @returns {TemplateResult}
- */
-export function renderBody() {
-  return html`<div class="iw-card-body">
-    <slot></slot>
-  </div>`
-}
-
-/**
- * Default footer renderer.
- * Override in composed types for custom footer rendering.
- * @returns {TemplateResult | null}
- */
-export function renderFooter() {
-  return null
-}
-
-function getCardType(entity, api) {
-  const resolved = api?.getType?.(entity?.type)
-  return hasCardRenderers(resolved)
-    ? resolved
-    : { renderHeader, renderBody, renderFooter }
-}
-
-function hasCardRenderers(type) {
-  return (
-    typeof type?.renderHeader === "function" &&
-    typeof type?.renderBody === "function" &&
-    typeof type?.renderFooter === "function"
-  )
-}

package/types/widgets/card.d.ts

@@ -1,21 +0,0 @@
-import type { TemplateResult, Api } from "@inglorious/web"
-
-export interface CardEntity {
-  id?: string
-  type?: string
-  title?: string
-  subtitle?: string
-  hoverable?: boolean
-  clickable?: boolean
-  fullWidth?: boolean
-}
-
-export interface CardType {
-  render(entity: CardEntity, api: Api): TemplateResult
-  renderHeader(entity: CardEntity, api: Api): TemplateResult | null
-  renderBody(entity: CardEntity, api: Api): TemplateResult
-  renderFooter(entity: CardEntity, api: Api): TemplateResult | null
-  click(entity: CardEntity, payload: unknown, api: Api): void
-}
-
-export declare const card: CardType