@inglorious/ui 0.1.0 → 1.0.0

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

@@ -0,0 +1,66 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export type ListItem =
+  | string
+  | number
+  | {
+      id?: string | number
+      label?: TemplateResult | string | number
+      primary?: TemplateResult | string | number
+      secondary?: TemplateResult | string | number
+      icon?: TemplateResult | string | number
+      action?: TemplateResult | string | number
+      isExpanded?: boolean
+      onToggle?: (item: ListItem, path: number[]) => void
+      isDisabled?: boolean
+      isSelected?: boolean
+      hasDivider?: boolean
+      onClick?: (item: ListItem, path: number[]) => void
+      children?: ListItem[] | TemplateResult | string | number
+      [key: string]: unknown
+    }
+
+export interface ListProps {
+  id?: string
+  type?: string
+  items?: ListItem[]
+  children?: TemplateResult | string | number
+  isOrdered?: boolean
+  isDense?: boolean
+  isDivided?: boolean
+  isInset?: boolean
+  padding?: "none" | "sm" | "md" | "lg" | "xl"
+  path?: number[]
+  className?: string
+  onItemClick?: (item: ListItem, path: number[]) => void
+  onItemToggle?: (item: ListItem, path: number[]) => void
+  [key: string]: unknown
+}
+
+export interface ListType {
+  render(props: ListProps): TemplateResult
+  renderItem(
+    props: ListProps,
+    payload: {
+      item: ListItem
+      meta: {
+        id: string | number
+        primary: TemplateResult | string | number
+        secondary?: TemplateResult | string | number
+        icon?: TemplateResult | string | number
+        action?: TemplateResult | string | number
+        isExpanded?: boolean
+        onToggle?: (item: ListItem, path: number[]) => void
+        isDisabled?: boolean
+        isSelected?: boolean
+        hasDivider?: boolean
+        onClick?: (item: ListItem, path: number[]) => void
+        children?: ListItem[] | TemplateResult | string | number | null
+      }
+      index: number
+      path: number[]
+    },
+  ): TemplateResult
+}
+
+export declare const list: ListType

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

@@ -0,0 +1,15 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface MaterialIconProps {
+  id?: string
+  name?: string
+  size?: "sm" | "md" | "lg"
+  isFilled?: boolean
+  [key: string]: unknown
+}
+
+export interface MaterialIconType {
+  render(props: MaterialIconProps): TemplateResult
+}
+
+export declare const materialIcon: MaterialIconType

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

@@ -0,0 +1,45 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface TableColumn {
+  id: string
+  label?: string
+  title?: string
+  align?: "left" | "center" | "right"
+  [key: string]: unknown
+}
+
+export type TableRow = Record<string, unknown>
+
+export interface TableProps {
+  id?: string
+  type?: string
+  columns?: TableColumn[]
+  rows?: TableRow[]
+  isFullWidth?: boolean
+  isStriped?: boolean
+  onRowClick?: (row: TableRow) => void
+  [key: string]: unknown
+}
+
+export interface TableType {
+  render(props: TableProps): TemplateResult
+  renderHeaderCell(
+    props: TableProps,
+    payload: { column: TableColumn; index: number },
+  ): TemplateResult
+  renderRow(
+    props: TableProps,
+    payload: { row: Record<string, unknown>; index: number },
+  ): TemplateResult
+  renderCell(
+    props: TableProps,
+    payload: {
+      column: TableColumn
+      row: Record<string, unknown>
+      index: number
+      columnIndex: number
+    },
+  ): TemplateResult
+}
+
+export declare const table: TableType

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

@@ -0,0 +1,20 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface TooltipProps {
+  id?: string
+  children?: TemplateResult | string | number
+  content?: TemplateResult | string | number
+  position?: "top" | "right" | "bottom" | "left"
+  size?: "sm" | "md" | "lg"
+  isOpen?: boolean
+  maxWidth?: string
+  className?: string
+  onClick: () => void
+  [key: string]: unknown
+}
+
+export interface TooltipType {
+  render(props: TooltipProps): TemplateResult
+}
+
+export declare const tooltip: TooltipType

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

@@ -0,0 +1,28 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export type TypographyVariant =
+  | "body"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "caption"
+  | "overline"
+
+export interface TypographyProps {
+  id?: string
+  children?: TemplateResult | string | number
+  variant?: TypographyVariant
+  align?: "left" | "center" | "right"
+  weight?: string | number
+  color?: string
+  isNoWrap?: boolean
+  hasGutterBottom?: boolean
+  className?: string
+  [key: string]: unknown
+}
+
+export interface TypographyType {
+  render(props: TypographyProps): TemplateResult
+}
+
+export declare const typography: TypographyType

package/types/data-display/virtual-list.d.ts

@@ -0,0 +1,94 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+/**
+ * Represents a single item in the virtual list's data array.
+ * It's a generic record but should ideally have a unique `id`.
+ */
+export type VirtualListItem = Record<string, any> & { id: string | number }
+
+/**
+ * Represents the state of a virtualized list entity.
+ */
+export interface VirtualListEntity<
+  T extends VirtualListItem = VirtualListItem,
+> {
+  /** A unique identifier for the list entity. */
+  id: string | number
+
+  /** The entity type, used to look up rendering logic. */
+  type: string
+
+  /** The full array of items for the list. */
+  items: T[]
+
+  /** 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 item in pixels. Null until measured on mount. */
+  itemHeight: number | null
+
+  /** An estimated height for items used for calculations before they are measured. */
+  estimatedHeight: number
+
+  /** Any other custom properties. */
+  [key: string]: any
+}
+
+/**
+ * The virtual list type implementation, combining logic and rendering.
+ */
+export interface VirtualListType {
+  /**
+   * Initializes the list entity with default state.
+   * @param entity The list entity to initialize.
+   */
+  create(entity: VirtualListEntity): void
+
+  /**
+   * Handles the scroll event to update the visible range of items.
+   * @param entity The list entity.
+   * @param containerEl The scrolling container element.
+   */
+  scroll(entity: VirtualListEntity, containerEl: HTMLElement): void
+
+  /**
+   * Mounts the list, measuring the first item to determine the `itemHeight`
+   * for accurate virtualization calculations.
+   * @param entity The list entity.
+   * @param containerEl The scrolling container element.
+   */
+  mount(entity: VirtualListEntity, containerEl: HTMLElement): void
+
+  /**
+   * Renders the virtualized list component.
+   * @param entity The list entity.
+   * @param api The store API.
+   */
+  render(entity: VirtualListEntity, api: Api): TemplateResult
+
+  /**
+   * Renders a single item in the list. This is a default implementation
+   * and is expected to be overridden by a specific list type.
+   * @param entity The list entity.
+   * @param payload The payload for rendering the item.
+   * @param payload.item The item data.
+   * @param payload.index The item's absolute index in the full list.
+   * @param api The API object.
+   */
+  renderItem(
+    entity: VirtualListEntity,
+    payload: { item: VirtualListItem; index: number },
+    api: Api,
+  ): TemplateResult
+}
+
+export declare const virtualList: VirtualListType

package/types/feedback/alert.d.ts

@@ -0,0 +1,22 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface AlertProps {
+  id?: string
+  type?: string
+  title?: TemplateResult | string | number
+  description?: TemplateResult | string | number
+  children?: TemplateResult | string | number
+  severity?: "info" | "success" | "warning" | "error"
+  variant?: "filled" | "outlined"
+  icon?: TemplateResult | string | number
+  action?: TemplateResult | string | number
+  onClose?: () => void
+  className?: string
+  [key: string]: unknown
+}
+
+export interface AlertType {
+  render(props: AlertProps): TemplateResult
+}
+
+export declare const alert: AlertType

package/types/feedback/backdrop.d.ts

@@ -0,0 +1,17 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface BackdropProps {
+  id?: string
+  type?: string
+  isOpen?: boolean
+  className?: string
+  children?: TemplateResult | string | number
+  onClick?: () => void
+  [key: string]: unknown
+}
+
+export interface BackdropType {
+  render(props: BackdropProps): TemplateResult | null
+}
+
+export declare const backdrop: BackdropType

package/types/feedback/dialog.d.ts

@@ -0,0 +1,21 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface DialogProps {
+  id?: string
+  type?: string
+  isOpen?: boolean
+  title?: TemplateResult | string | number
+  description?: TemplateResult | string | number
+  children?: TemplateResult | string | number
+  actions?: TemplateResult | string | number
+  className?: string
+  onClose?: () => void
+  onBackdropClick?: () => void
+  [key: string]: unknown
+}
+
+export interface DialogType {
+  render(props: DialogProps): TemplateResult | null
+}
+
+export declare const dialog: DialogType

package/types/feedback/progress.d.ts

@@ -0,0 +1,18 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface ProgressProps {
+  id?: string
+  type?: string
+  variant?: "linear" | "circular"
+  value?: number
+  size?: number
+  thickness?: number
+  className?: string
+  [key: string]: unknown
+}
+
+export interface ProgressType {
+  render(props: ProgressProps): TemplateResult
+}
+
+export declare const progress: ProgressType

package/types/feedback/skeleton.d.ts

@@ -0,0 +1,18 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface SkeletonProps {
+  id?: string
+  type?: string
+  variant?: "text" | "rect" | "circle"
+  width?: number | string
+  height?: number | string
+  lines?: number
+  className?: string
+  [key: string]: unknown
+}
+
+export interface SkeletonType {
+  render(props: SkeletonProps): TemplateResult
+}
+
+export declare const skeleton: SkeletonType

package/types/feedback/snackbar.d.ts

@@ -0,0 +1,19 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface SnackbarProps {
+  id?: string
+  type?: string
+  isOpen?: boolean
+  message?: TemplateResult | string | number
+  action?: TemplateResult | string | number
+  position?: "bottom-left" | "bottom-right" | "top-left" | "top-right"
+  className?: string
+  onClose?: () => void
+  [key: string]: unknown
+}
+
+export interface SnackbarType {
+  render(props: SnackbarProps): TemplateResult | null
+}
+
+export declare const snackbar: SnackbarType

package/types/index.d.ts

@@ -1,14 +1,92 @@
-export type { ButtonEntity } from "./controls/button"
-export type { ButtonGroupEntity } from "./controls/button-group"
-export type { CheckboxEntity } from "./controls/checkbox"
-export type { FabEntity } from "./controls/fab"
-export type { IconButtonEntity } from "./controls/icon-button"
-export type { InputEntity } from "./controls/input"
-export type { RadioGroupEntity } from "./controls/radio-group"
-export type { RatingEntity } from "./controls/rating"
-export type { SelectEntity } from "./controls/select"
-export type { SliderEntity } from "./controls/slider"
-export type { SwitchEntity } from "./controls/switch"
-export type { CardEntity } from "./widgets/card"
-export type { FlexEntity } from "./layout/flex"
-export type { GridEntity } from "./layout/grid"
+export type { ButtonProps, ButtonType } from "./controls/button"
+export type { ButtonGroupProps, ButtonGroupType } from "./controls/button-group"
+export type { CheckboxProps, CheckboxType } from "./controls/checkbox"
+export type {
+  ComboboxProps,
+  ComboboxType,
+  ComboboxOption,
+} from "./controls/combobox"
+export type { FabProps, FabType } from "./controls/fab"
+export type { IconButtonProps, IconButtonType } from "./controls/icon-button"
+export type { InputProps, InputType } from "./controls/input"
+export type {
+  RadioGroupProps,
+  RadioGroupType,
+  RadioOption,
+} from "./controls/radio-group"
+export type { RatingProps, RatingType } from "./controls/rating"
+export type { SelectProps, SelectType, SelectOption } from "./controls/select"
+export type { SliderProps, SliderType } from "./controls/slider"
+export type { SwitchProps, SwitchType } from "./controls/switch"
+export type { ContainerProps, ContainerType } from "./layout/container"
+export type { FlexProps, FlexType } from "./layout/flex"
+export type { GridProps, GridType } from "./layout/grid"
+export type {
+  BottomNavigationProps,
+  BottomNavigationType,
+  BottomNavigationAction,
+} from "./navigation/bottom-navigation"
+export type {
+  BreadcrumbsProps,
+  BreadcrumbsType,
+  BreadcrumbItem,
+} from "./navigation/breadcrumbs"
+export type { DrawerProps, DrawerType } from "./navigation/drawer"
+export type { LinkProps, LinkType } from "./navigation/link"
+export type { MenuProps, MenuType, MenuItem } from "./navigation/menu"
+export type { PaginationProps, PaginationType } from "./navigation/pagination"
+export type {
+  SpeedDialProps,
+  SpeedDialType,
+  SpeedDialAction,
+} from "./navigation/speed-dial"
+export type { StepperProps, StepperType, Step } from "./navigation/stepper"
+export type { TabsProps, TabsType, TabItem } from "./navigation/tabs"
+export type {
+  AccordionProps,
+  AccordionType,
+  AccordionItem,
+} from "./surfaces/accordion"
+export type { AppBarProps, AppBarType } from "./surfaces/app-bar"
+export type { CardProps, CardType } from "./surfaces/card"
+export type { PaperProps, PaperType } from "./surfaces/paper"
+export type { AvatarProps, AvatarType } from "./data-display/avatar"
+export type { BadgeProps, BadgeType } from "./data-display/badge"
+export type { ChipProps, ChipType } from "./data-display/chip"
+export type {
+  DataGridProps,
+  DataGridType,
+  Column,
+  Row,
+  DataGridVirtualization,
+} from "./data-display/data-grid"
+export type { DividerProps, DividerType } from "./data-display/divider"
+export type { IconProps, IconType } from "./data-display/icon"
+export type { ListProps, ListType, ListItem } from "./data-display/list"
+export type {
+  VirtualListEntity,
+  VirtualListItem,
+  VirtualListType,
+} from "./data-display/virtual-list"
+export type {
+  MaterialIconProps,
+  MaterialIconType,
+} from "./data-display/material-icon"
+export type {
+  TableProps,
+  TableType,
+  TableColumn,
+  TableRow,
+} from "./data-display/table"
+export type { TooltipProps, TooltipType } from "./data-display/tooltip"
+export type {
+  TypographyProps,
+  TypographyType,
+  TypographyVariant,
+} from "./data-display/typography"
+export type { AlertProps, AlertType } from "./feedback/alert"
+export type { BackdropProps, BackdropType } from "./feedback/backdrop"
+export type { DialogProps, DialogType } from "./feedback/dialog"
+export type { ProgressProps, ProgressType } from "./feedback/progress"
+export type { SkeletonProps, SkeletonType } from "./feedback/skeleton"
+export type { SnackbarProps, SnackbarType } from "./feedback/snackbar"

package/types/layout/container.d.ts

@@ -0,0 +1,28 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface ContainerProps {
+  id?: string
+  type?: string
+  element?:
+    | "div"
+    | "section"
+    | "main"
+    | "header"
+    | "footer"
+    | "nav"
+    | "aside"
+    | "article"
+  children?: TemplateResult | string | number
+  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | false | number | string
+  isFixed?: boolean
+  padding?: "none" | "sm" | "md" | "lg" | "xl"
+  isCentered?: boolean
+  className?: string
+  [key: string]: unknown
+}
+
+export interface ContainerType {
+  render(props: ContainerProps): TemplateResult
+}
+
+export declare const container: ContainerType

package/types/layout/flex.d.ts

@@ -1,20 +1,31 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface FlexEntity {
+export interface FlexProps {
   id?: string
   type?: string
+  element?:
+    | "div"
+    | "section"
+    | "main"
+    | "header"
+    | "footer"
+    | "nav"
+    | "aside"
+    | "article"
   direction?: "row" | "column" | "row-reverse" | "column-reverse"
   wrap?: "nowrap" | "wrap" | "wrap-reverse"
   justify?: "start" | "center" | "end" | "between" | "around" | "evenly"
   align?: "stretch" | "start" | "center" | "end" | "baseline"
   gap?: "none" | "sm" | "md" | "lg" | "xl"
-  inline?: boolean
-  fullWidth?: boolean
+  padding?: "none" | "sm" | "md" | "lg" | "xl"
+  isInline?: boolean
+  isFullWidth?: boolean
   children?: Array<TemplateResult | string | number>
+  onClick?: () => void
 }
 
 export interface FlexType {
-  render(entity: FlexEntity, api: Api): TemplateResult
+  render(props: FlexProps): TemplateResult
 }
 
 export declare const flex: FlexType

package/types/layout/grid.d.ts

@@ -1,19 +1,30 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
-export interface GridEntity {
+export interface GridProps {
   id?: string
   type?: string
+  element?:
+    | "div"
+    | "section"
+    | "main"
+    | "header"
+    | "footer"
+    | "nav"
+    | "aside"
+    | "article"
   columns?: number
   minColumnWidth?: string
   gap?: "none" | "sm" | "md" | "lg" | "xl"
+  padding?: "none" | "sm" | "md" | "lg" | "xl"
   align?: "stretch" | "start" | "center" | "end"
   justify?: "stretch" | "start" | "center" | "end"
-  fullWidth?: boolean
+  isFullWidth?: boolean
   children?: Array<TemplateResult | string | number>
+  onClick?: () => void
 }
 
 export interface GridType {
-  render(entity: GridEntity, api: Api): TemplateResult
+  render(props: GridProps): TemplateResult
 }
 
 export declare const grid: GridType

package/types/navigation/bottom-navigation.d.ts

@@ -0,0 +1,33 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface BottomNavigationAction {
+  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 BottomNavigationProps {
+  id?: string
+  type?: string
+  actions?: BottomNavigationAction[]
+  value?: string | number
+  hasLabels?: boolean
+  className?: string
+  onChange?: (value: string | number) => void
+  [key: string]: unknown
+}
+
+export interface BottomNavigationType {
+  render(props: BottomNavigationProps): TemplateResult
+  renderAction(
+    action: BottomNavigationAction,
+    index: number,
+    props: BottomNavigationProps,
+  ): TemplateResult
+}
+
+export declare const bottomNavigation: BottomNavigationType

package/types/navigation/breadcrumbs.d.ts

@@ -0,0 +1,29 @@
+import type { TemplateResult } from "@inglorious/web"
+
+export interface BreadcrumbItem {
+  id?: string | number
+  label: TemplateResult | string | number
+  href?: string
+  onClick?: () => void
+  [key: string]: unknown
+}
+
+export interface BreadcrumbsProps {
+  id?: string
+  type?: string
+  items: BreadcrumbItem[]
+  separator?: TemplateResult | string | number
+  className?: string
+  [key: string]: unknown
+}
+
+export interface BreadcrumbsType {
+  render(props: BreadcrumbsProps): TemplateResult
+  renderItem(
+    item: BreadcrumbItem,
+    index: number,
+    props: BreadcrumbsProps,
+  ): TemplateResult
+}
+
+export declare const breadcrumbs: BreadcrumbsType