@ponchia/ui 0.2.1 → 0.3.0

package/classes/index.d.ts

@@ -1,9 +1,189 @@
-/** @ponchia/ui — typed class-name contract. */
+/** @ponchia/ui — GENERATED from classes/index.js by scripts/gen-dts.mjs.
+ *  Do not edit by hand; run `npm run dts:build`. Drift-checked in CI. */
 
 export type ClassValue = string | false | null | undefined | ClassValue[];
 
-/** The flat registry of every class @ponchia/ui defines. */
-export declare const cls: Readonly<Record<string, string>>;
+/** The flat registry of every class @ponchia/ui defines (literal). */
+export declare const cls: {
+  readonly button: 'ui-button';
+  readonly buttonGhost: 'ui-button--ghost';
+  readonly buttonSubtle: 'ui-button--subtle';
+  readonly buttonDanger: 'ui-button--danger';
+  readonly buttonIcon: 'ui-button--icon';
+  readonly card: 'ui-card';
+  readonly cardHead: 'ui-card__head';
+  readonly cardAccent: 'ui-card--accent';
+  readonly cardInteractive: 'ui-card--interactive';
+  readonly badge: 'ui-badge';
+  readonly badgeAccent: 'ui-badge--accent';
+  readonly badgeSuccess: 'ui-badge--success';
+  readonly badgeWarning: 'ui-badge--warning';
+  readonly badgeDanger: 'ui-badge--danger';
+  readonly chip: 'ui-chip';
+  readonly chipAccent: 'ui-chip--accent';
+  readonly link: 'ui-link';
+  readonly linkArrow: 'ui-link--arrow';
+  readonly keyValue: 'ui-key-value';
+  readonly dot: 'ui-dot';
+  readonly dotAccent: 'ui-dot--accent';
+  readonly dotSuccess: 'ui-dot--success';
+  readonly dotWarning: 'ui-dot--warning';
+  readonly dotDanger: 'ui-dot--danger';
+  readonly dotLive: 'ui-dot--live';
+  readonly dotgrid: 'ui-dotgrid';
+  readonly dotgridAccent: 'ui-dotgrid--accent';
+  readonly dotgridDense: 'ui-dotgrid--dense';
+  readonly dotfield: 'ui-dotfield';
+  readonly dotrule: 'ui-dotrule';
+  readonly dotbar: 'ui-dotbar';
+  readonly dotbarIndeterminate: 'ui-dotbar--indeterminate';
+  readonly dotloader: 'ui-dotloader';
+  readonly dotspinner: 'ui-dotspinner';
+  readonly dotspinnerSm: 'ui-dotspinner--sm';
+  readonly dotspinnerLg: 'ui-dotspinner--lg';
+  readonly field: 'ui-field';
+  readonly label: 'ui-label';
+  readonly input: 'ui-input';
+  readonly select: 'ui-select';
+  readonly textarea: 'ui-textarea';
+  readonly search: 'ui-search';
+  readonly check: 'ui-check';
+  readonly switch: 'ui-switch';
+  readonly switchTrack: 'ui-switch__track';
+  readonly switchThumb: 'ui-switch__thumb';
+  readonly hint: 'ui-hint';
+  readonly hintError: 'ui-hint--error';
+  readonly alert: 'ui-alert';
+  readonly alertTitle: 'ui-alert__title';
+  readonly alertBody: 'ui-alert__body';
+  readonly alertDismiss: 'ui-alert__dismiss';
+  readonly alertAccent: 'ui-alert--accent';
+  readonly alertSuccess: 'ui-alert--success';
+  readonly alertWarning: 'ui-alert--warning';
+  readonly alertDanger: 'ui-alert--danger';
+  readonly toastStack: 'ui-toast-stack';
+  readonly toast: 'ui-toast';
+  readonly toastTitle: 'ui-toast__title';
+  readonly toastAccent: 'ui-toast--accent';
+  readonly toastSuccess: 'ui-toast--success';
+  readonly toastWarning: 'ui-toast--warning';
+  readonly toastDanger: 'ui-toast--danger';
+  readonly tooltip: 'ui-tooltip';
+  readonly tooltipBubble: 'ui-tooltip__bubble';
+  readonly progress: 'ui-progress';
+  readonly progressBar: 'ui-progress__bar';
+  readonly progressIndeterminate: 'ui-progress--indeterminate';
+  readonly modal: 'ui-modal';
+  readonly modalHead: 'ui-modal__head';
+  readonly modalTitle: 'ui-modal__title';
+  readonly modalBody: 'ui-modal__body';
+  readonly modalFoot: 'ui-modal__foot';
+  readonly modalClose: 'ui-modal__close';
+  readonly modalDrawer: 'ui-modal--drawer';
+  readonly menuHost: 'ui-menu-host';
+  readonly menu: 'ui-menu';
+  readonly menuLabel: 'ui-menu__label';
+  readonly menuItem: 'ui-menu__item';
+  readonly menuSep: 'ui-menu__sep';
+  readonly tabs: 'ui-tabs';
+  readonly tabsList: 'ui-tabs__list';
+  readonly tab: 'ui-tab';
+  readonly tabsPanel: 'ui-tabs__panel';
+  readonly accordion: 'ui-accordion';
+  readonly accordionItem: 'ui-accordion__item';
+  readonly accordionSummary: 'ui-accordion__summary';
+  readonly accordionBody: 'ui-accordion__body';
+  readonly segmented: 'ui-segmented';
+  readonly segmentedOption: 'ui-segmented__option';
+  readonly breadcrumb: 'ui-breadcrumb';
+  readonly breadcrumbItem: 'ui-breadcrumb__item';
+  readonly pagination: 'ui-pagination';
+  readonly paginationItem: 'ui-pagination__item';
+  readonly avatar: 'ui-avatar';
+  readonly avatarSm: 'ui-avatar--sm';
+  readonly avatarLg: 'ui-avatar--lg';
+  readonly avatarGroup: 'ui-avatar-group';
+  readonly table: 'ui-table';
+  readonly tableDense: 'ui-table--dense';
+  readonly tableComfortable: 'ui-table--comfortable';
+  readonly tableLined: 'ui-table--lined';
+  readonly tableWrap: 'ui-table-wrap';
+  readonly tableEmpty: 'ui-table__empty';
+  readonly panel: 'ui-panel';
+  readonly panelHead: 'ui-panel__head';
+  readonly surface: 'ui-surface';
+  readonly stack: 'ui-stack';
+  readonly cluster: 'ui-cluster';
+  readonly clusterBetween: 'ui-cluster--between';
+  readonly grid: 'ui-grid';
+  readonly divider: 'ui-divider';
+  readonly status: 'ui-status';
+  readonly eyebrow: 'ui-eyebrow';
+  readonly eyebrowMuted: 'ui-eyebrow--muted';
+  readonly prose: 'ui-prose';
+  readonly proseCompact: 'ui-prose--compact';
+  readonly quote: 'ui-quote';
+  readonly quoteCite: 'ui-quote__cite';
+  readonly container: 'ui-container';
+  readonly containerNarrow: 'ui-container--narrow';
+  readonly skiplink: 'ui-skiplink';
+  readonly siteheader: 'ui-siteheader';
+  readonly siteheaderBrand: 'ui-siteheader__brand';
+  readonly siteheaderActions: 'ui-siteheader__actions';
+  readonly sitenav: 'ui-sitenav';
+  readonly sitemenu: 'ui-sitemenu';
+  readonly sitemenuPanel: 'ui-sitemenu__panel';
+  readonly sitefooter: 'ui-sitefooter';
+  readonly sitefooterLinks: 'ui-sitefooter__links';
+  readonly tags: 'ui-tags';
+  readonly tag: 'ui-tag';
+  readonly tagAccent: 'ui-tag--accent';
+  readonly meta: 'ui-meta';
+  readonly metaItem: 'ui-meta__item';
+  readonly display: 'ui-display';
+  readonly mono: 'ui-mono';
+  readonly muted: 'ui-muted';
+  readonly visuallyHidden: 'ui-visually-hidden';
+  readonly reveal: 'ui-reveal';
+  readonly stagger: 'ui-stagger';
+  readonly staggerAuto: 'ui-stagger--auto';
+  readonly matrix: 'ui-matrix';
+  readonly skeleton: 'ui-skeleton';
+  readonly spinner: 'ui-spinner';
+  readonly caret: 'ui-caret';
+  readonly animateIn: 'ui-animate-in';
+  readonly animateFade: 'ui-animate-fade';
+  readonly animateDot: 'ui-animate-dot';
+  readonly animateMatrix: 'ui-animate-matrix';
+  readonly appShell: 'ui-app-shell';
+  readonly appShellFull: 'ui-app-shell--full';
+  readonly appRail: 'ui-app-rail';
+  readonly appRailBrand: 'ui-app-rail__brand';
+  readonly appRailToggle: 'ui-app-rail__toggle';
+  readonly appRailFoot: 'ui-app-rail__foot';
+  readonly appTopbar: 'ui-app-topbar';
+  readonly appTopbarTitle: 'ui-app-topbar__title';
+  readonly appToolbar: 'ui-app-toolbar';
+  readonly appToolbarGroup: 'ui-app-toolbar__group';
+  readonly appNav: 'ui-app-nav';
+  readonly appNavSection: 'ui-app-nav__section';
+  readonly appMain: 'ui-app-main';
+  readonly appContent: 'ui-app-content';
+  readonly appPanel: 'ui-app-panel';
+  readonly appPanelHead: 'ui-app-panel__head';
+  readonly appPanelTitle: 'ui-app-panel__title';
+  readonly appMetrics: 'ui-app-metrics';
+  readonly appMetric: 'ui-app-metric';
+  readonly appMetricLabel: 'ui-app-metric__label';
+  readonly appMetricValue: 'ui-app-metric__value';
+  readonly appMetricDelta: 'ui-app-metric__delta';
+  readonly appEmptyState: 'ui-app-empty-state';
+  readonly themetoggleButton: 'ui-themetoggle__button';
+  readonly themetogglePrefix: 'ui-themetoggle__prefix';
+  readonly themetoggleLabel: 'ui-themetoggle__label';
+  readonly themetoggleTrack: 'ui-themetoggle__track';
+  readonly themetoggleThumb: 'ui-themetoggle__thumb';
+};
 
 /** classnames-style joiner: skips falsy, flattens arrays. */
 export declare function cx(...parts: ClassValue[]): string;
@@ -49,6 +229,40 @@ export interface ClusterOpts {
 export interface StaggerOpts {
   auto?: boolean;
 }
+export type Tone = 'accent' | 'success' | 'warning' | 'danger';
+export interface AlertOpts {
+  tone?: Tone;
+}
+export interface ToastOpts {
+  tone?: Tone;
+}
+export interface ProgressOpts {
+  indeterminate?: boolean;
+}
+export interface DotspinnerOpts {
+  size?: 'sm' | 'lg';
+}
+export interface DotbarOpts {
+  indeterminate?: boolean;
+}
+export interface ModalOpts {
+  drawer?: boolean;
+}
+export interface TabOpts {
+  active?: boolean;
+}
+export interface AvatarOpts {
+  size?: 'sm' | 'lg';
+}
+export interface ProseOpts {
+  compact?: boolean;
+}
+export interface ContainerOpts {
+  narrow?: boolean;
+}
+export interface TagOpts {
+  accent?: boolean;
+}
 
 export interface Ui {
   button(opts?: ButtonOpts): string;
@@ -63,6 +277,17 @@ export interface Ui {
   hint(opts?: HintOpts): string;
   cluster(opts?: ClusterOpts): string;
   stagger(opts?: StaggerOpts): string;
+  alert(opts?: AlertOpts): string;
+  toast(opts?: ToastOpts): string;
+  progress(opts?: ProgressOpts): string;
+  dotspinner(opts?: DotspinnerOpts): string;
+  dotbar(opts?: DotbarOpts): string;
+  modal(opts?: ModalOpts): string;
+  tab(opts?: TabOpts): string;
+  avatar(opts?: AvatarOpts): string;
+  prose(opts?: ProseOpts): string;
+  container(opts?: ContainerOpts): string;
+  tag(opts?: TagOpts): string;
 }
 
 export declare const ui: Ui;

package/classes/index.js

@@ -50,7 +50,11 @@ export const cls = Object.freeze({
   dotfield: 'ui-dotfield',
   dotrule: 'ui-dotrule',
   dotbar: 'ui-dotbar',
+  dotbarIndeterminate: 'ui-dotbar--indeterminate',
   dotloader: 'ui-dotloader',
+  dotspinner: 'ui-dotspinner',
+  dotspinnerSm: 'ui-dotspinner--sm',
+  dotspinnerLg: 'ui-dotspinner--lg',
   // forms
   field: 'ui-field',
   label: 'ui-label',
@@ -64,6 +68,59 @@ export const cls = Object.freeze({
   switchThumb: 'ui-switch__thumb',
   hint: 'ui-hint',
   hintError: 'ui-hint--error',
+  // feedback
+  alert: 'ui-alert',
+  alertTitle: 'ui-alert__title',
+  alertBody: 'ui-alert__body',
+  alertDismiss: 'ui-alert__dismiss',
+  alertAccent: 'ui-alert--accent',
+  alertSuccess: 'ui-alert--success',
+  alertWarning: 'ui-alert--warning',
+  alertDanger: 'ui-alert--danger',
+  toastStack: 'ui-toast-stack',
+  toast: 'ui-toast',
+  toastTitle: 'ui-toast__title',
+  toastAccent: 'ui-toast--accent',
+  toastSuccess: 'ui-toast--success',
+  toastWarning: 'ui-toast--warning',
+  toastDanger: 'ui-toast--danger',
+  tooltip: 'ui-tooltip',
+  tooltipBubble: 'ui-tooltip__bubble',
+  progress: 'ui-progress',
+  progressBar: 'ui-progress__bar',
+  progressIndeterminate: 'ui-progress--indeterminate',
+  // overlay
+  modal: 'ui-modal',
+  modalHead: 'ui-modal__head',
+  modalTitle: 'ui-modal__title',
+  modalBody: 'ui-modal__body',
+  modalFoot: 'ui-modal__foot',
+  modalClose: 'ui-modal__close',
+  modalDrawer: 'ui-modal--drawer',
+  menuHost: 'ui-menu-host',
+  menu: 'ui-menu',
+  menuLabel: 'ui-menu__label',
+  menuItem: 'ui-menu__item',
+  menuSep: 'ui-menu__sep',
+  // disclosure
+  tabs: 'ui-tabs',
+  tabsList: 'ui-tabs__list',
+  tab: 'ui-tab',
+  tabsPanel: 'ui-tabs__panel',
+  accordion: 'ui-accordion',
+  accordionItem: 'ui-accordion__item',
+  accordionSummary: 'ui-accordion__summary',
+  accordionBody: 'ui-accordion__body',
+  segmented: 'ui-segmented',
+  segmentedOption: 'ui-segmented__option',
+  breadcrumb: 'ui-breadcrumb',
+  breadcrumbItem: 'ui-breadcrumb__item',
+  pagination: 'ui-pagination',
+  paginationItem: 'ui-pagination__item',
+  avatar: 'ui-avatar',
+  avatarSm: 'ui-avatar--sm',
+  avatarLg: 'ui-avatar--lg',
+  avatarGroup: 'ui-avatar-group',
   // table
   table: 'ui-table',
   tableDense: 'ui-table--dense',
@@ -84,6 +141,27 @@ export const cls = Object.freeze({
   // typography / utilities
   eyebrow: 'ui-eyebrow',
   eyebrowMuted: 'ui-eyebrow--muted',
+  prose: 'ui-prose',
+  proseCompact: 'ui-prose--compact',
+  quote: 'ui-quote',
+  quoteCite: 'ui-quote__cite',
+  // site shell
+  container: 'ui-container',
+  containerNarrow: 'ui-container--narrow',
+  skiplink: 'ui-skiplink',
+  siteheader: 'ui-siteheader',
+  siteheaderBrand: 'ui-siteheader__brand',
+  siteheaderActions: 'ui-siteheader__actions',
+  sitenav: 'ui-sitenav',
+  sitemenu: 'ui-sitemenu',
+  sitemenuPanel: 'ui-sitemenu__panel',
+  sitefooter: 'ui-sitefooter',
+  sitefooterLinks: 'ui-sitefooter__links',
+  tags: 'ui-tags',
+  tag: 'ui-tag',
+  tagAccent: 'ui-tag--accent',
+  meta: 'ui-meta',
+  metaItem: 'ui-meta__item',
   display: 'ui-display',
   mono: 'ui-mono',
   muted: 'ui-muted',
@@ -100,6 +178,36 @@ export const cls = Object.freeze({
   animateFade: 'ui-animate-fade',
   animateDot: 'ui-animate-dot',
   animateMatrix: 'ui-animate-matrix',
+  // admin shell (was the legacy .app-* vocabulary; promoted in 0.3.0)
+  appShell: 'ui-app-shell',
+  appShellFull: 'ui-app-shell--full',
+  appRail: 'ui-app-rail',
+  appRailBrand: 'ui-app-rail__brand',
+  appRailToggle: 'ui-app-rail__toggle',
+  appRailFoot: 'ui-app-rail__foot',
+  appTopbar: 'ui-app-topbar',
+  appTopbarTitle: 'ui-app-topbar__title',
+  appToolbar: 'ui-app-toolbar',
+  appToolbarGroup: 'ui-app-toolbar__group',
+  appNav: 'ui-app-nav',
+  appNavSection: 'ui-app-nav__section',
+  appMain: 'ui-app-main',
+  appContent: 'ui-app-content',
+  appPanel: 'ui-app-panel',
+  appPanelHead: 'ui-app-panel__head',
+  appPanelTitle: 'ui-app-panel__title',
+  appMetrics: 'ui-app-metrics',
+  appMetric: 'ui-app-metric',
+  appMetricLabel: 'ui-app-metric__label',
+  appMetricValue: 'ui-app-metric__value',
+  appMetricDelta: 'ui-app-metric__delta',
+  appEmptyState: 'ui-app-empty-state',
+  // theme toggle (was the legacy .theme-toggle__* vocabulary)
+  themetoggleButton: 'ui-themetoggle__button',
+  themetogglePrefix: 'ui-themetoggle__prefix',
+  themetoggleLabel: 'ui-themetoggle__label',
+  themetoggleTrack: 'ui-themetoggle__track',
+  themetoggleThumb: 'ui-themetoggle__thumb',
 });
 
 /** classnames-style joiner: skips falsy, flattens nested arrays of any depth. */
@@ -118,7 +226,7 @@ export const ui = {
       variant === 'ghost' && cls.buttonGhost,
       variant === 'subtle' && cls.buttonSubtle,
       variant === 'danger' && cls.buttonDanger,
-      icon && cls.buttonIcon
+      icon && cls.buttonIcon,
     ),
   card: ({ accent, interactive } = {}) =>
     j(cls.card, accent && cls.cardAccent, interactive && cls.cardInteractive),
@@ -128,7 +236,7 @@ export const ui = {
       tone === 'accent' && cls.badgeAccent,
       tone === 'success' && cls.badgeSuccess,
       tone === 'warning' && cls.badgeWarning,
-      tone === 'danger' && cls.badgeDanger
+      tone === 'danger' && cls.badgeDanger,
     ),
   chip: ({ accent } = {}) => j(cls.chip, accent && cls.chipAccent),
   link: ({ arrow } = {}) => j(cls.link, arrow && cls.linkArrow),
@@ -139,7 +247,7 @@ export const ui = {
       tone === 'success' && cls.dotSuccess,
       tone === 'warning' && cls.dotWarning,
       tone === 'danger' && cls.dotDanger,
-      live && cls.dotLive
+      live && cls.dotLive,
     ),
   dotgrid: ({ accent, dense } = {}) =>
     j(cls.dotgrid, accent && cls.dotgridAccent, dense && cls.dotgridDense),
@@ -148,12 +256,39 @@ export const ui = {
       cls.table,
       density === 'dense' && cls.tableDense,
       density === 'comfortable' && cls.tableComfortable,
-      lined && cls.tableLined
+      lined && cls.tableLined,
     ),
   eyebrow: ({ muted } = {}) => j(cls.eyebrow, muted && cls.eyebrowMuted),
   hint: ({ error } = {}) => j(cls.hint, error && cls.hintError),
   cluster: ({ between } = {}) => j(cls.cluster, between && cls.clusterBetween),
   stagger: ({ auto } = {}) => j(cls.stagger, auto && cls.staggerAuto),
+  alert: ({ tone } = {}) =>
+    j(
+      cls.alert,
+      tone === 'accent' && cls.alertAccent,
+      tone === 'success' && cls.alertSuccess,
+      tone === 'warning' && cls.alertWarning,
+      tone === 'danger' && cls.alertDanger,
+    ),
+  toast: ({ tone } = {}) =>
+    j(
+      cls.toast,
+      tone === 'accent' && cls.toastAccent,
+      tone === 'success' && cls.toastSuccess,
+      tone === 'warning' && cls.toastWarning,
+      tone === 'danger' && cls.toastDanger,
+    ),
+  progress: ({ indeterminate } = {}) => j(cls.progress, indeterminate && cls.progressIndeterminate),
+  dotspinner: ({ size } = {}) =>
+    j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
+  dotbar: ({ indeterminate } = {}) => j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
+  modal: ({ drawer } = {}) => j(cls.modal, drawer && cls.modalDrawer),
+  tab: ({ active } = {}) => j(cls.tab, active && 'is-active'),
+  avatar: ({ size } = {}) =>
+    j(cls.avatar, size === 'sm' && cls.avatarSm, size === 'lg' && cls.avatarLg),
+  prose: ({ compact } = {}) => j(cls.prose, compact && cls.proseCompact),
+  container: ({ narrow } = {}) => j(cls.container, narrow && cls.containerNarrow),
+  tag: ({ accent } = {}) => j(cls.tag, accent && cls.tagAccent),
 };
 
 export default ui;