@salemcobalt/ui 0.2.0-rc.1 → 0.2.0-rc.2

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.1 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.2 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -1843,4 +1843,219 @@
     }
   }
   
+  /* ---- table.css ---- */
+  /* ---- Table ----------------------------------------------------------------- */
+  .sc-table-wrap {
+    position: relative;
+    inline-size: 100%;
+    min-inline-size: 0;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+  }
+  .sc-table-wrap[data-sticky-header]:not([data-scroll]) {
+    overflow: visible;
+  }
+  .sc-table-wrap[data-scroll] {
+    overflow: auto;
+  }
+  .sc-table {
+    --_py: var(--sc-spacing-xs);
+    --_px: var(--sc-spacing-sm);
+    --_h: var(--sc-size-control-md);
+    inline-size: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    line-height: var(--sc-font-line-height-ui);
+    color: var(--sc-color-text-default);
+    text-align: start;
+  }
+  .sc-table[data-layout='fixed'] {
+    table-layout: fixed;
+  }
+  .sc-table[data-density='compact'],
+  [data-density='compact'] .sc-table:not([data-density='comfortable']) {
+    --_py: var(--sc-spacing-2xs);
+    --_px: var(--sc-spacing-xs);
+    --_h: var(--sc-size-control-sm);
+  }
+  .sc-table__caption {
+    padding-block-end: var(--sc-spacing-xs);
+    color: var(--sc-color-text-muted);
+    font-size: var(--sc-font-size-xs);
+    text-align: start;
+    caption-side: top;
+  }
+  .sc-table__header,
+  .sc-table__cell {
+    box-sizing: border-box;
+    block-size: var(--_h);
+    padding: var(--_py) var(--_px);
+    vertical-align: middle;
+    text-align: start;
+  }
+  .sc-table__header {
+    color: var(--sc-color-text-muted);
+    font-size: var(--sc-font-size-xs);
+    font-weight: var(--sc-font-weight-medium);
+    letter-spacing: var(--sc-font-tracking-wide);
+    text-transform: uppercase;
+    white-space: nowrap;
+    background: var(--sc-color-surface-canvas);
+    border-block-end: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+  }
+  .sc-table__body .sc-table__header {
+    color: var(--sc-color-text-default);
+    font-size: inherit;
+    font-weight: var(--sc-font-weight-medium);
+    letter-spacing: 0;
+    text-transform: none;
+    background: transparent;
+    border-block-end: 0;
+  }
+  .sc-table-wrap[data-sticky-header] .sc-table__head .sc-table__header {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--sc-z-sticky);
+  }
+  .sc-table[data-divided] .sc-table__body .sc-table__row:not(:last-child) > .sc-table__cell,
+  .sc-table[data-divided] .sc-table__body .sc-table__row:not(:last-child) > .sc-table__header {
+    border-block-end: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+  }
+  .sc-table__foot .sc-table__cell,
+  .sc-table__foot .sc-table__header {
+    border-block-start: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+    font-weight: var(--sc-font-weight-medium);
+  }
+  .sc-table__row[data-interactive] {
+    cursor: pointer;
+  }
+  .sc-table__row[data-interactive]:hover > .sc-table__cell,
+  .sc-table__row[data-interactive]:hover > .sc-table__header {
+    background: var(--sc-color-surface-hover);
+  }
+  .sc-table__row[data-selected] > .sc-table__cell,
+  .sc-table__row[data-selected] > .sc-table__header {
+    background: var(--sc-color-accent-subtle);
+  }
+  .sc-table__header[data-align='center'],
+  .sc-table__cell[data-align='center'] {
+    text-align: center;
+  }
+  .sc-table__header[data-align='end'],
+  .sc-table__cell[data-align='end'] {
+    text-align: end;
+  }
+  .sc-table__header[data-numeric],
+  .sc-table__cell[data-numeric] {
+    font-variant-numeric: tabular-nums;
+  }
+  .sc-table__header[data-nowrap],
+  .sc-table__cell[data-nowrap] {
+    white-space: nowrap;
+  }
+  .sc-table__header[data-truncate],
+  .sc-table__cell[data-truncate] {
+    max-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sc-table__cell > .sc-badge,
+  .sc-table__cell > .sc-button {
+    vertical-align: middle;
+  }
+  
+  /* ---- stat.css ---- */
+  /* ---- Stat ------------------------------------------------------------------ */
+  .sc-stat {
+    --_p: var(--sc-spacing-md);
+    --_value: var(--sc-font-size-2xl);
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      'label icon'
+      'value value'
+      'delta delta'
+      'hint hint';
+    align-content: start;
+    row-gap: var(--sc-spacing-3xs);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--_p);
+    border-radius: var(--sc-radius-xl);
+    background: var(--sc-color-surface-default);
+    color: var(--sc-color-text-default);
+    border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    line-height: var(--sc-font-line-height-ui);
+    list-style: none;
+  }
+  .sc-stat[data-variant='filled'] {
+    background: var(--sc-color-surface-sunken);
+    border-color: transparent;
+  }
+  .sc-stat[data-variant='plain'] {
+    --_p: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+  }
+  .sc-stat[data-size='sm'] {
+    --_p: var(--sc-spacing-sm);
+    --_value: var(--sc-font-size-xl);
+    border-radius: var(--sc-radius-lg);
+  }
+  .sc-stat__label {
+    grid-area: label;
+    color: var(--sc-color-text-muted);
+    font-weight: var(--sc-font-weight-medium);
+  }
+  .sc-stat__icon {
+    grid-area: icon;
+    display: inline-flex;
+    color: var(--sc-color-text-subtle);
+  }
+  .sc-stat__icon > svg {
+    inline-size: var(--sc-size-icon-lg);
+    block-size: var(--sc-size-icon-lg);
+  }
+  .sc-stat__value {
+    grid-area: value;
+    font-size: var(--_value);
+    font-weight: var(--sc-font-weight-semibold);
+    line-height: var(--sc-font-line-height-tight);
+    letter-spacing: var(--sc-font-tracking-snug);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+  }
+  .sc-stat__delta {
+    grid-area: delta;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sc-spacing-3xs);
+    color: var(--sc-color-text-muted);
+    font-size: var(--sc-font-size-xs);
+    font-weight: var(--sc-font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+  .sc-stat__delta[data-tone='positive'] {
+    color: var(--sc-color-success-text);
+  }
+  .sc-stat__delta[data-tone='negative'] {
+    color: var(--sc-color-danger-text);
+  }
+  .sc-stat__trend {
+    display: inline-flex;
+  }
+  .sc-stat__hint {
+    grid-area: hint;
+    color: var(--sc-color-text-muted);
+    font-size: var(--sc-font-size-xs);
+  }
+  
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.1",
-  "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, Badge, Card, Stack, Inline, Kbd, Dialog, Tooltip, Menu, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, Checkbox, Switch, Heading, Text.",
+  "version": "0.2.0-rc.2",
+  "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, Badge, Card, Stack, Inline, Kbd, Dialog, Tooltip, Menu, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, Checkbox, Switch, Heading, Text, Table, Stat.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@salemcobalt/tokens": "^0.2.0-rc.1"
+    "@salemcobalt/tokens": "^0.2.0-rc.2"
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
@@ -56,7 +56,7 @@
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.5",
-    "@salemcobalt/tokens": "^0.2.0-rc.1"
+    "@salemcobalt/tokens": "^0.2.0-rc.2"
   },
   "publishConfig": {
     "access": "public"