@inglorious/ui 0.1.0 → 1.0.0

package/types/controls/button.d.ts

@@ -1,23 +1,26 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface ButtonEntity {
+export interface ButtonProps {
   id?: string
+  type: "button"
   children?: TemplateResult | string | number
   variant?: "default" | "outline" | "ghost"
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   size?: "sm" | "md" | "lg"
   shape?: "rectangle" | "pill" | "round" | "square"
-  disabled?: boolean
-  fullWidth?: boolean
-  type?: "button" | "submit" | "reset" | "menu"
+  isDisabled?: boolean
+  isPressed?: boolean
+  isFullWidth?: boolean
+  buttonType?: "button" | "submit" | "reset" | "menu"
   ariaLabel?: string
-  ariaPressed?: boolean
+  isAriaPressed?: boolean
   className?: string
+  onClick?: () => void
   [key: string]: unknown
 }
 
 export interface ButtonType {
-  render(entity: ButtonEntity, api: Api): TemplateResult
+  render(props: ButtonProps): TemplateResult
 }
 
 export declare const button: ButtonType

package/types/controls/checkbox.d.ts

@@ -1,18 +1,20 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface CheckboxEntity {
+export interface CheckboxProps {
   id?: string
   name?: string
   label?: string
-  checked?: boolean
-  disabled?: boolean
-  required?: boolean
+  isChecked?: boolean
+  isDisabled?: boolean
+  isRequired?: boolean
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   size?: "sm" | "md" | "lg"
+  onChange?: (isChecked: boolean) => void
   [key: string]: unknown
 }
 
 export interface CheckboxType {
-  render(entity: CheckboxEntity, api: Api): TemplateResult
+  render(props: CheckboxProps): TemplateResult
 }
 
 export declare const checkbox: CheckboxType

package/types/controls/combobox.d.ts

@@ -0,0 +1,66 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export type ComboboxOption =
+  | string
+  | number
+  | {
+      value: string | number
+      label?: string
+      isDisabled?: boolean
+      [key: string]: unknown
+    }
+
+export interface ComboboxProps {
+  id?: string
+  type?: string
+  label?: string
+  options?: ComboboxOption[]
+
+  isOpen?: boolean
+  searchTerm?: string
+  focusedIndex?: number
+
+  isMulti?: boolean
+  selectedValue?: string | number | (string | number)[] | null
+
+  isLoading?: boolean
+  isDisabled?: boolean
+  isSearchable?: boolean
+  isClearable?: boolean
+
+  placeholder?: string
+  noOptionsMessage?: string
+  loadingMessage?: string
+
+  isFullWidth?: boolean
+  size?: "sm" | "md" | "lg"
+  onToggle?: () => void
+  onClear?: () => void
+  onClose?: () => void
+  onSearchChange?: (value: string) => void
+  onFocusSet?: (index: number) => void
+  onFocusNext?: () => void
+  onFocusPrev?: () => void
+  onFocusFirst?: () => void
+  onFocusLast?: () => void
+  onOptionSelect?: (option: ComboboxOption) => void
+  onChange?: (option: ComboboxOption) => void
+  [key: string]: unknown
+}
+
+export interface ComboboxType {
+  create(entity: ComboboxProps): void
+  render(entity: ComboboxProps, api: Api): TemplateResult
+  open(entity: ComboboxProps): void
+  close(entity: ComboboxProps): void
+  toggle(entity: ComboboxProps): void
+  optionSelect(entity: ComboboxProps, option: ComboboxOption): void
+  clear(entity: ComboboxProps): void
+  searchChange(entity: ComboboxProps, searchTerm: string): void
+  focusNext(entity: ComboboxProps): void
+  focusPrev(entity: ComboboxProps): void
+  focusFirst(entity: ComboboxProps): void
+  focusLast(entity: ComboboxProps): void
+}
+
+export declare const combobox: ComboboxType

package/types/controls/fab.d.ts

@@ -1,19 +1,20 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface FabEntity {
+export interface FabProps {
   id?: string
   children?: TemplateResult | string | number
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   size?: "sm" | "md" | "lg"
-  disabled?: boolean
+  isDisabled?: boolean
   type?: "button" | "submit" | "reset" | "menu"
-  extended?: boolean
+  isExtended?: boolean
   ariaLabel?: string
+  onClick?: () => void
   [key: string]: unknown
 }
 
 export interface FabType {
-  render(entity: FabEntity, api: Api): TemplateResult
+  render(props: FabProps): TemplateResult
 }
 
 export declare const fab: FabType

package/types/controls/icon-button.d.ts

@@ -1,23 +1,24 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface IconButtonEntity {
+export interface IconButtonProps {
   id?: string
+  type?: string
   icon?: string
   label?: string
   iconAfter?: string
   direction?: "row" | "column"
-  iconOnly?: boolean
   ariaLabel?: string
   variant?: "default" | "outline" | "ghost"
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   size?: "sm" | "md" | "lg"
-  disabled?: boolean
-  fullWidth?: boolean
-  type?: "button" | "submit" | "reset" | "menu"
+  isDisabled?: boolean
+  isFullWidth?: boolean
+  buttonType?: "button" | "submit" | "reset" | "menu"
+  onClick?: () => void
 }
 
 export interface IconButtonType {
-  render(entity: IconButtonEntity, api: Api): TemplateResult
+  render(props: IconButtonProps): TemplateResult
 }
 
 export declare const iconButton: IconButtonType

package/types/controls/input.d.ts

@@ -1,29 +1,36 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface InputEntity {
+export interface InputProps {
   id?: string
   name?: string
-  type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search"
+  inputType?:
+    | "text"
+    | "password"
+    | "email"
+    | "number"
+    | "tel"
+    | "url"
+    | "search"
   value?: string
   placeholder?: string
   label?: string
   hint?: string
   error?: string
   size?: "sm" | "md" | "lg"
-  disabled?: boolean
-  readonly?: boolean
-  required?: boolean
-  fullWidth?: boolean
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  isFullWidth?: boolean
   icon?: string
   iconAfter?: string
+  onChange?: (value: string) => void
+  onBlur?: () => void
+  onFocus?: () => void
   [key: string]: unknown
 }
 
 export interface InputType {
-  render(entity: InputEntity, api: Api): TemplateResult
-  change(entity: InputEntity, payload: string, api: Api): void
-  blur(entity: InputEntity, payload: unknown, api: Api): void
-  focus(entity: InputEntity, payload: unknown, api: Api): void
+  render(props: InputProps): TemplateResult
 }
 
 export declare const input: InputType

package/types/controls/radio-group.d.ts

@@ -1,25 +1,27 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
 export interface RadioOption {
   label: string
   value: string
-  disabled?: boolean
+  isDisabled?: boolean
   [key: string]: unknown
 }
 
-export interface RadioGroupEntity {
+export interface RadioGroupProps {
   id?: string
   name?: string
   label?: string
   value?: string
   options?: RadioOption[]
   direction?: "column" | "row"
-  disabled?: boolean
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  isDisabled?: boolean
+  onChange?: (value: string) => void
   [key: string]: unknown
 }
 
 export interface RadioGroupType {
-  render(entity: RadioGroupEntity, api: Api): TemplateResult
+  render(props: RadioGroupProps): TemplateResult
 }
 
 export declare const radioGroup: RadioGroupType

package/types/controls/rating.d.ts

@@ -1,18 +1,19 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface RatingEntity {
+export interface RatingProps {
   id?: string
   value?: number
   max?: number
-  disabled?: boolean
-  readonly?: boolean
+  isDisabled?: boolean
+  isReadOnly?: boolean
   symbol?: string
   emptySymbol?: string
+  onChange?: (value: number) => void
   size?: "sm" | "md" | "lg"
 }
 
 export interface RatingType {
-  render(entity: RatingEntity, api: Api): TemplateResult
+  render(props: RatingProps): TemplateResult
 }
 
 export declare const rating: RatingType

package/types/controls/select.d.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
 export type SelectOption =
   | string
@@ -6,51 +6,28 @@ export type SelectOption =
   | {
       value: string | number
       label?: string
-      disabled?: boolean
       isDisabled?: boolean
       [key: string]: unknown
     }
 
-export interface SelectEntity {
+export interface SelectProps {
   id?: string
   type?: string
-  label?: string
+  name?: string
+  value?: unknown
   options?: SelectOption[]
-
-  isOpen?: boolean
-  searchTerm?: string
-  focusedIndex?: number
-
-  isMulti?: boolean
-  selectedValue?: string | number | (string | number)[] | null
-
-  isLoading?: boolean
-  isDisabled?: boolean
-  isSearchable?: boolean
-  isClearable?: boolean
-
-  placeholder?: string
-  noOptionsMessage?: string
-  loadingMessage?: string
-
-  fullWidth?: boolean
   size?: "sm" | "md" | "lg"
+  isDisabled?: boolean
+  isFullWidth?: boolean
+  isMulti?: boolean
+  onChange?: (value: string) => void
+  onBlur?: () => void
+  onFocus?: () => void
   [key: string]: unknown
 }
 
 export interface SelectType {
-  create(entity: SelectEntity): void
-  render(entity: SelectEntity, api: Api): TemplateResult
-  open(entity: SelectEntity): void
-  close(entity: SelectEntity): void
-  toggle(entity: SelectEntity): void
-  optionSelect(entity: SelectEntity, option: SelectOption): void
-  clear(entity: SelectEntity): void
-  searchChange(entity: SelectEntity, searchTerm: string): void
-  focusNext(entity: SelectEntity): void
-  focusPrev(entity: SelectEntity): void
-  focusFirst(entity: SelectEntity): void
-  focusLast(entity: SelectEntity): void
+  render(props: SelectProps): TemplateResult
 }
 
 export declare const select: SelectType

package/types/controls/slider.d.ts

@@ -1,6 +1,6 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface SliderEntity {
+export interface SliderProps {
   id?: string
   name?: string
   label?: string
@@ -8,14 +8,16 @@ export interface SliderEntity {
   min?: number
   max?: number
   step?: number
-  disabled?: boolean
-  showValue?: boolean
-  fullWidth?: boolean
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  isDisabled?: boolean
+  isValueVisible?: boolean
+  isFullWidth?: boolean
+  onChange?: (value: number) => void
   [key: string]: unknown
 }
 
 export interface SliderType {
-  render(entity: SliderEntity, api: Api): TemplateResult
+  render(props: SliderProps): TemplateResult
 }
 
 export declare const slider: SliderType

package/types/controls/switch.d.ts

@@ -1,17 +1,19 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface SwitchEntity {
+export interface SwitchProps {
   id?: string
   name?: string
   label?: string
-  checked?: boolean
-  disabled?: boolean
+  isChecked?: boolean
+  isDisabled?: boolean
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   size?: "sm" | "md" | "lg"
+  onChange?: (value: boolean) => void
   [key: string]: unknown
 }
 
 export interface SwitchType {
-  render(entity: SwitchEntity, api: Api): TemplateResult
+  render(props: SwitchProps): TemplateResult
 }
 
 export declare const switchControl: SwitchType

package/types/data-display/avatar.d.ts

@@ -0,0 +1,30 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface AvatarProps {
+  id?: string
+  src?: string
+  alt?: string
+  initials?: string
+  size?: "sm" | "md" | "lg"
+  shape?: "circle" | "square"
+  color?:
+    | "default"
+    | "auto"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+  backgroundColor?: string
+  textColor?: string
+  children?: TemplateResult | string | number
+  onClick?: () => void
+  [key: string]: unknown
+}
+
+export interface AvatarType {
+  render(props: AvatarProps): TemplateResult
+}
+
+export declare const avatar: AvatarType

package/types/data-display/badge.d.ts

@@ -0,0 +1,20 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface BadgeProps {
+  id?: string
+  children?: TemplateResult | string | number
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  variant?: "solid" | "outline"
+  size?: "sm" | "md" | "lg"
+  shape?: "rectangle" | "pill" | "circle" | "square"
+  ringWidth?: string
+  className?: string
+  onClick?: () => void
+  [key: string]: unknown
+}
+
+export interface BadgeType {
+  render(props: BadgeProps): TemplateResult
+}
+
+export declare const badge: BadgeType

package/types/data-display/chip.d.ts

@@ -0,0 +1,25 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface ChipProps {
+  id?: string
+  children?: TemplateResult | string | number
+  isRemovable?: boolean
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+  size?: "sm" | "md" | "lg"
+  shape?: "pill" | "rounded" | "square"
+  onClick?: () => void
+  [key: string]: unknown
+}
+
+export interface ChipType {
+  render(props: ChipProps): TemplateResult
+}
+
+export declare const chip: ChipType

package/types/data-display/data-grid.d.ts

@@ -0,0 +1,151 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+import type { SelectOption } from "../controls/select"
+
+export type Row = Record<string, any>
+
+export interface DataGridVirtualization {
+  /** The current scroll position from the top in pixels. */
+  scrollTop: number
+
+  /** The start and end indices of the currently visible items (including buffer). */
+  visibleRange: { start: number; end: number }
+
+  /** The height of the visible viewport in pixels. */
+  viewportHeight: number
+
+  /** The number of items to render outside the viewport (above and below). */
+  bufferSize: number
+
+  /** The measured height of a single row in pixels. Null until measured on mount. */
+  itemHeight: number | null
+
+  /** An estimated height for rows used for calculations before they are measured. */
+  estimatedHeight: number
+}
+
+export interface Column {
+  id: string
+  title: string
+  type?: "string" | "number" | "boolean" | "date"
+  isSortable?: boolean
+  isFilterable?: boolean
+  filter?: {
+    type: "text" | "number" | "range" | "select" | "date" | "time" | "datetime"
+    options?: SelectOption[]
+    [key: string]: any
+  }
+  /**
+   * Column width semantics:
+   * - `auto` or `undefined`: flexible column (`1fr`)
+   * - `<n>fr`: proportional flex width
+   * - `<n>%`: literal percentage width
+   * - number / CSS length string: fixed width
+   */
+  width?: number | string
+  formatter?: string | ((value: any) => any)
+  sortFn?: (a: Row, b: Row) => number
+  filterFn?: (row: Row, filterValue: any) => boolean
+  format?: (value: any) => string
+  [key: string]: any
+}
+
+export interface DataGridProps<T extends Row = Row> {
+  id: string | number
+  type: string
+  data: T[]
+  columns: Column[]
+  sorts: { column: string; direction: "asc" | "desc" }[]
+  filters: Record<string, any>
+  search: { value: string; placeholder?: string } | null
+  isStriped?: boolean
+  isVirtualized?: boolean
+  virtualization?: DataGridVirtualization
+  selection: (string | number)[]
+  selectionAnchor?: string | number | null
+  pagination?: { page: number; pageSize: number; pageSizes: number[] } | null
+  rowId?: string
+  isMultiSelect: boolean
+  onSortChange?: (columnId: string) => void
+  onFilterChange?: (payload: { columnId: string; value: any }) => void
+  onSearchChange?: (value: string) => void
+  onColumnResizeStart?: (payload: {
+    columnId: string
+    event: PointerEvent
+    width: number
+  }) => void
+  onRowClick?: (payload: {
+    rowId: string | number
+    shiftKey?: boolean
+    metaKey?: boolean
+    ctrlKey?: boolean
+  }) => void
+  onVirtualScroll?: (containerEl: HTMLElement) => void
+  onVirtualMount?: (containerEl: HTMLElement) => void
+  onRowToggle?: (rowId: string | number) => void
+  onPageChange?: (page: number) => void
+  onPageNext?: () => void
+  onPagePrev?: () => void
+  onPageSizeChange?: (pageSize: number) => void
+  [key: string]: any
+}
+
+export interface DataGridType {
+  create(entity: DataGridProps): void
+  sortChange(entity: DataGridProps, columnId: string): void
+  sortsClear(entity: DataGridProps): void
+  filterChange(
+    entity: DataGridProps,
+    payload: { columnId: string; value: any },
+  ): void
+  filtersClear(entity: DataGridProps): void
+  searchChange(entity: DataGridProps, search: string): void
+  columnResize(
+    entity: DataGridProps,
+    payload: { columnId: string; width: number },
+  ): void
+  pageChange(entity: DataGridProps, page: number): void
+  pageNext(entity: DataGridProps): void
+  pagePrev(entity: DataGridProps): void
+  pageSizeChange(entity: DataGridProps, pageSize: number): void
+  rowClick(
+    entity: DataGridProps,
+    payload: {
+      rowId: string | number
+      shiftKey?: boolean
+      metaKey?: boolean
+      ctrlKey?: boolean
+    },
+  ): void
+  rowSelect(entity: DataGridProps, rowId: string | number): void
+  rowDeselect(entity: DataGridProps, rowId: string | number): void
+  rowToggle(entity: DataGridProps, rowId: string | number): void
+  rowsToggleAll(entity: DataGridProps): void
+  rowsSelectAll(entity: DataGridProps): void
+  selectionClear(entity: DataGridProps): void
+  virtualScroll(entity: DataGridProps, containerEl: HTMLElement): void
+  virtualMount(entity: DataGridProps, containerEl: HTMLElement): void
+  render(entity: DataGridProps, api: Api): TemplateResult
+  renderHeader(entity: DataGridProps, api: Api): TemplateResult
+  renderToolbar(entity: DataGridProps, api: Api): TemplateResult
+  renderHeaderColumn(
+    entity: DataGridProps,
+    payload: { column: Column; index: number },
+    api: Api,
+  ): TemplateResult
+  renderBody(entity: DataGridProps, api: Api): TemplateResult
+  renderRow(
+    entity: DataGridProps,
+    payload: { row: Row; index: number },
+    api: Api,
+  ): TemplateResult
+  renderCell(
+    entity: DataGridProps,
+    payload: { cell: any; index: number },
+    api: Api,
+  ): TemplateResult
+  renderValue(
+    entity: DataGridProps,
+    payload: { value: any; column: Column; index: number },
+    api: Api,
+  ): any
+}

package/types/data-display/divider.d.ts

@@ -0,0 +1,14 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface DividerProps {
+  id?: string
+  orientation?: "horizontal" | "vertical"
+  isInset?: boolean
+  [key: string]: unknown
+}
+
+export interface DividerType {
+  render(props: DividerProps): TemplateResult
+}
+
+export declare const divider: DividerType

package/types/data-display/icon.d.ts

@@ -0,0 +1,16 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface IconProps {
+  id?: string
+  children?: TemplateResult | string | number
+  size?: "sm" | "md" | "lg"
+  color?: string
+  onClick?: () => void
+  [key: string]: unknown
+}
+
+export interface IconType {
+  render(props: IconProps): TemplateResult
+}
+
+export declare const icon: IconType