@ponchia/ui 0.2.2 → 0.3.1

package/classes/index.d.ts

@@ -1,9 +1,214 @@
-/** @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 inputGroup: 'ui-input-group';
+  readonly inputGroupAddon: 'ui-input-group__addon';
+  readonly file: 'ui-file';
+  readonly range: 'ui-range';
+  readonly errorSummary: 'ui-error-summary';
+  readonly errorSummaryTitle: 'ui-error-summary__title';
+  readonly errorSummaryList: 'ui-error-summary__list';
+  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 toastStackAssertive: 'ui-toast-stack--assertive';
+  readonly toast: 'ui-toast';
+  readonly toastTitle: 'ui-toast__title';
+  readonly toastClose: 'ui-toast__close';
+  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 popover: 'ui-popover';
+  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 combobox: 'ui-combobox';
+  readonly comboboxInput: 'ui-combobox__input';
+  readonly comboboxList: 'ui-combobox__list';
+  readonly comboboxOption: 'ui-combobox__option';
+  readonly comboboxEmpty: 'ui-combobox__empty';
+  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 tableSort: 'ui-table__sort';
+  readonly tableSelect: 'ui-table__select';
+  readonly tableToolbar: 'ui-table__toolbar';
+  readonly tableSelectable: 'ui-table--selectable';
+  readonly tableLoading: 'ui-table--loading';
+  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 sidebar: 'ui-sidebar';
+  readonly switcher: 'ui-switcher';
+  readonly center: 'ui-center';
+  readonly ratio: 'ui-ratio';
+  readonly cq: 'ui-cq';
+  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;
@@ -77,6 +282,12 @@ export interface AvatarOpts {
 export interface ProseOpts {
   compact?: boolean;
 }
+export interface ContainerOpts {
+  narrow?: boolean;
+}
+export interface TagOpts {
+  accent?: boolean;
+}
 
 export interface Ui {
   button(opts?: ButtonOpts): string;
@@ -100,6 +311,8 @@ export interface Ui {
   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

@@ -68,6 +68,13 @@ export const cls = Object.freeze({
   switchThumb: 'ui-switch__thumb',
   hint: 'ui-hint',
   hintError: 'ui-hint--error',
+  inputGroup: 'ui-input-group',
+  inputGroupAddon: 'ui-input-group__addon',
+  file: 'ui-file',
+  range: 'ui-range',
+  errorSummary: 'ui-error-summary',
+  errorSummaryTitle: 'ui-error-summary__title',
+  errorSummaryList: 'ui-error-summary__list',
   // feedback
   alert: 'ui-alert',
   alertTitle: 'ui-alert__title',
@@ -78,14 +85,17 @@ export const cls = Object.freeze({
   alertWarning: 'ui-alert--warning',
   alertDanger: 'ui-alert--danger',
   toastStack: 'ui-toast-stack',
+  toastStackAssertive: 'ui-toast-stack--assertive',
   toast: 'ui-toast',
   toastTitle: 'ui-toast__title',
+  toastClose: 'ui-toast__close',
   toastAccent: 'ui-toast--accent',
   toastSuccess: 'ui-toast--success',
   toastWarning: 'ui-toast--warning',
   toastDanger: 'ui-toast--danger',
   tooltip: 'ui-tooltip',
   tooltipBubble: 'ui-tooltip__bubble',
+  popover: 'ui-popover',
   progress: 'ui-progress',
   progressBar: 'ui-progress__bar',
   progressIndeterminate: 'ui-progress--indeterminate',
@@ -97,10 +107,16 @@ export const cls = Object.freeze({
   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',
+  combobox: 'ui-combobox',
+  comboboxInput: 'ui-combobox__input',
+  comboboxList: 'ui-combobox__list',
+  comboboxOption: 'ui-combobox__option',
+  comboboxEmpty: 'ui-combobox__empty',
   // disclosure
   tabs: 'ui-tabs',
   tabsList: 'ui-tabs__list',
@@ -127,6 +143,11 @@ export const cls = Object.freeze({
   tableLined: 'ui-table--lined',
   tableWrap: 'ui-table-wrap',
   tableEmpty: 'ui-table__empty',
+  tableSort: 'ui-table__sort',
+  tableSelect: 'ui-table__select',
+  tableToolbar: 'ui-table__toolbar',
+  tableSelectable: 'ui-table--selectable',
+  tableLoading: 'ui-table--loading',
   // shell / layout
   panel: 'ui-panel',
   panelHead: 'ui-panel__head',
@@ -135,6 +156,11 @@ export const cls = Object.freeze({
   cluster: 'ui-cluster',
   clusterBetween: 'ui-cluster--between',
   grid: 'ui-grid',
+  sidebar: 'ui-sidebar',
+  switcher: 'ui-switcher',
+  center: 'ui-center',
+  ratio: 'ui-ratio',
+  cq: 'ui-cq',
   divider: 'ui-divider',
   status: 'ui-status',
   // typography / utilities
@@ -142,6 +168,25 @@ export const cls = Object.freeze({
   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',
@@ -158,6 +203,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. */
@@ -176,7 +251,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),
@@ -186,7 +261,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),
@@ -197,7 +272,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),
@@ -206,7 +281,7 @@ 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),
@@ -218,7 +293,7 @@ export const ui = {
       tone === 'accent' && cls.alertAccent,
       tone === 'success' && cls.alertSuccess,
       tone === 'warning' && cls.alertWarning,
-      tone === 'danger' && cls.alertDanger
+      tone === 'danger' && cls.alertDanger,
     ),
   toast: ({ tone } = {}) =>
     j(
@@ -226,19 +301,19 @@ export const ui = {
       tone === 'accent' && cls.toastAccent,
       tone === 'success' && cls.toastSuccess,
       tone === 'warning' && cls.toastWarning,
-      tone === 'danger' && cls.toastDanger
+      tone === 'danger' && cls.toastDanger,
     ),
-  progress: ({ indeterminate } = {}) =>
-    j(cls.progress, indeterminate && cls.progressIndeterminate),
+  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),
+  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;