@ponchia/ui 0.3.0 → 0.3.2

package/classes/index.d.ts

@@ -14,15 +14,27 @@ export declare const cls: {
   readonly cardHead: 'ui-card__head';
   readonly cardAccent: 'ui-card--accent';
   readonly cardInteractive: 'ui-card--interactive';
+  readonly stat: 'ui-stat';
+  readonly statgrid: 'ui-statgrid';
+  readonly statLabel: 'ui-stat__label';
+  readonly statValue: 'ui-stat__value';
+  readonly statDelta: 'ui-stat__delta';
+  readonly num: 'ui-num';
+  readonly numPos: 'ui-num--pos';
+  readonly numNeg: 'ui-num--neg';
+  readonly numMuted: 'ui-num--muted';
   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 badgeMuted: 'ui-badge--muted';
+  readonly badgeDot: 'ui-badge--dot';
   readonly chip: 'ui-chip';
   readonly chipAccent: 'ui-chip--accent';
   readonly link: 'ui-link';
   readonly linkArrow: 'ui-link--arrow';
+  readonly linkCta: 'ui-link--cta';
   readonly keyValue: 'ui-key-value';
   readonly dot: 'ui-dot';
   readonly dotAccent: 'ui-dot--accent';
@@ -33,6 +45,10 @@ export declare const cls: {
   readonly dotgrid: 'ui-dotgrid';
   readonly dotgridAccent: 'ui-dotgrid--accent';
   readonly dotgridDense: 'ui-dotgrid--dense';
+  readonly dotmatrix: 'ui-dotmatrix';
+  readonly dotmatrixCell: 'ui-dotmatrix__cell';
+  readonly dotmatrixCellHot: 'ui-dotmatrix__cell--hot';
+  readonly dotmatrixCellAccent: 'ui-dotmatrix__cell--accent';
   readonly dotfield: 'ui-dotfield';
   readonly dotrule: 'ui-dotrule';
   readonly dotbar: 'ui-dotbar';
@@ -53,6 +69,13 @@ export declare const cls: {
   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';
@@ -62,14 +85,17 @@ export declare const cls: {
   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';
@@ -85,6 +111,11 @@ export declare const cls: {
   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';
@@ -109,6 +140,11 @@ export declare const cls: {
   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';
@@ -116,18 +152,26 @@ export declare const cls: {
   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 eyebrowSm: 'ui-eyebrow--sm';
   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 containerWide: 'ui-container--wide';
   readonly skiplink: 'ui-skiplink';
   readonly siteheader: 'ui-siteheader';
+  readonly siteheaderSticky: 'ui-siteheader--sticky';
   readonly siteheaderBrand: 'ui-siteheader__brand';
   readonly siteheaderActions: 'ui-siteheader__actions';
   readonly sitenav: 'ui-sitenav';
@@ -197,13 +241,18 @@ export interface CardOpts {
   interactive?: boolean;
 }
 export interface BadgeOpts {
-  tone?: 'accent' | 'success' | 'warning' | 'danger';
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'muted';
+  dot?: boolean;
+}
+export interface NumOpts {
+  tone?: 'pos' | 'neg' | 'muted';
 }
 export interface ChipOpts {
   accent?: boolean;
 }
 export interface LinkOpts {
   arrow?: boolean;
+  cta?: boolean;
 }
 export interface DotOpts {
   tone?: 'accent' | 'success' | 'warning' | 'danger';
@@ -219,6 +268,7 @@ export interface TableOpts {
 }
 export interface EyebrowOpts {
   muted?: boolean;
+  sm?: boolean;
 }
 export interface HintOpts {
   error?: boolean;
@@ -259,6 +309,7 @@ export interface ProseOpts {
 }
 export interface ContainerOpts {
   narrow?: boolean;
+  wide?: boolean;
 }
 export interface TagOpts {
   accent?: boolean;
@@ -268,6 +319,7 @@ export interface Ui {
   button(opts?: ButtonOpts): string;
   card(opts?: CardOpts): string;
   badge(opts?: BadgeOpts): string;
+  num(opts?: NumOpts): string;
   chip(opts?: ChipOpts): string;
   link(opts?: LinkOpts): string;
   dot(opts?: DotOpts): string;

package/classes/index.js

@@ -27,15 +27,27 @@ export const cls = Object.freeze({
   cardHead: 'ui-card__head',
   cardAccent: 'ui-card--accent',
   cardInteractive: 'ui-card--interactive',
+  stat: 'ui-stat',
+  statgrid: 'ui-statgrid',
+  statLabel: 'ui-stat__label',
+  statValue: 'ui-stat__value',
+  statDelta: 'ui-stat__delta',
+  num: 'ui-num',
+  numPos: 'ui-num--pos',
+  numNeg: 'ui-num--neg',
+  numMuted: 'ui-num--muted',
   badge: 'ui-badge',
   badgeAccent: 'ui-badge--accent',
   badgeSuccess: 'ui-badge--success',
   badgeWarning: 'ui-badge--warning',
   badgeDanger: 'ui-badge--danger',
+  badgeMuted: 'ui-badge--muted',
+  badgeDot: 'ui-badge--dot',
   chip: 'ui-chip',
   chipAccent: 'ui-chip--accent',
   link: 'ui-link',
   linkArrow: 'ui-link--arrow',
+  linkCta: 'ui-link--cta',
   keyValue: 'ui-key-value',
   // dots
   dot: 'ui-dot',
@@ -47,6 +59,10 @@ export const cls = Object.freeze({
   dotgrid: 'ui-dotgrid',
   dotgridAccent: 'ui-dotgrid--accent',
   dotgridDense: 'ui-dotgrid--dense',
+  dotmatrix: 'ui-dotmatrix',
+  dotmatrixCell: 'ui-dotmatrix__cell',
+  dotmatrixCellHot: 'ui-dotmatrix__cell--hot',
+  dotmatrixCellAccent: 'ui-dotmatrix__cell--accent',
   dotfield: 'ui-dotfield',
   dotrule: 'ui-dotrule',
   dotbar: 'ui-dotbar',
@@ -68,6 +84,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 +101,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',
@@ -102,6 +128,11 @@ export const cls = Object.freeze({
   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',
@@ -128,6 +159,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',
@@ -136,11 +172,17 @@ 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
   eyebrow: 'ui-eyebrow',
   eyebrowMuted: 'ui-eyebrow--muted',
+  eyebrowSm: 'ui-eyebrow--sm',
   prose: 'ui-prose',
   proseCompact: 'ui-prose--compact',
   quote: 'ui-quote',
@@ -148,8 +190,10 @@ export const cls = Object.freeze({
   // site shell
   container: 'ui-container',
   containerNarrow: 'ui-container--narrow',
+  containerWide: 'ui-container--wide',
   skiplink: 'ui-skiplink',
   siteheader: 'ui-siteheader',
+  siteheaderSticky: 'ui-siteheader--sticky',
   siteheaderBrand: 'ui-siteheader__brand',
   siteheaderActions: 'ui-siteheader__actions',
   sitenav: 'ui-sitenav',
@@ -230,16 +274,25 @@ export const ui = {
     ),
   card: ({ accent, interactive } = {}) =>
     j(cls.card, accent && cls.cardAccent, interactive && cls.cardInteractive),
-  badge: ({ tone } = {}) =>
+  badge: ({ tone, dot } = {}) =>
     j(
       cls.badge,
       tone === 'accent' && cls.badgeAccent,
       tone === 'success' && cls.badgeSuccess,
       tone === 'warning' && cls.badgeWarning,
       tone === 'danger' && cls.badgeDanger,
+      tone === 'muted' && cls.badgeMuted,
+      dot && cls.badgeDot,
+    ),
+  num: ({ tone } = {}) =>
+    j(
+      cls.num,
+      tone === 'pos' && cls.numPos,
+      tone === 'neg' && cls.numNeg,
+      tone === 'muted' && cls.numMuted,
     ),
   chip: ({ accent } = {}) => j(cls.chip, accent && cls.chipAccent),
-  link: ({ arrow } = {}) => j(cls.link, arrow && cls.linkArrow),
+  link: ({ arrow, cta } = {}) => j(cls.link, arrow && cls.linkArrow, cta && cls.linkCta),
   dot: ({ tone, live } = {}) =>
     j(
       cls.dot,
@@ -258,7 +311,7 @@ export const ui = {
       density === 'comfortable' && cls.tableComfortable,
       lined && cls.tableLined,
     ),
-  eyebrow: ({ muted } = {}) => j(cls.eyebrow, muted && cls.eyebrowMuted),
+  eyebrow: ({ muted, sm } = {}) => j(cls.eyebrow, muted && cls.eyebrowMuted, sm && cls.eyebrowSm),
   hint: ({ error } = {}) => j(cls.hint, error && cls.hintError),
   cluster: ({ between } = {}) => j(cls.cluster, between && cls.clusterBetween),
   stagger: ({ auto } = {}) => j(cls.stagger, auto && cls.staggerAuto),
@@ -287,7 +340,8 @@ export const ui = {
   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),
+  container: ({ narrow, wide } = {}) =>
+    j(cls.container, narrow && cls.containerNarrow, wide && cls.containerWide),
   tag: ({ accent } = {}) => j(cls.tag, accent && cls.tagAccent),
 };