@salemcobalt/ui 0.2.0-rc.1 → 0.2.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/index.d.ts +407 -14
- package/dist/index.js +190 -0
- package/dist/index.js.map +1 -1
- package/dist/styles.css +272 -1
- package/package.json +4 -4
package/dist/styles.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @salemcobalt/ui 0.2.0-rc.
|
|
1
|
+
/* @salemcobalt/ui 0.2.0-rc.3 — requires @salemcobalt/tokens/css. */
|
|
2
2
|
@layer sc {
|
|
3
3
|
/* ---- base.css ---- */
|
|
4
4
|
/* Shared: focus ring, reduced motion. Component files follow. */
|
|
@@ -1843,4 +1843,275 @@
|
|
|
1843
1843
|
}
|
|
1844
1844
|
}
|
|
1845
1845
|
|
|
1846
|
+
/* ---- table.css ---- */
|
|
1847
|
+
/* ---- Table ----------------------------------------------------------------- */
|
|
1848
|
+
.sc-table-wrap {
|
|
1849
|
+
position: relative;
|
|
1850
|
+
inline-size: 100%;
|
|
1851
|
+
min-inline-size: 0;
|
|
1852
|
+
overflow-x: auto;
|
|
1853
|
+
overscroll-behavior-x: contain;
|
|
1854
|
+
}
|
|
1855
|
+
.sc-table-wrap[data-sticky-header]:not([data-scroll]) {
|
|
1856
|
+
overflow: visible;
|
|
1857
|
+
}
|
|
1858
|
+
.sc-table-wrap[data-scroll] {
|
|
1859
|
+
overflow: auto;
|
|
1860
|
+
}
|
|
1861
|
+
.sc-table {
|
|
1862
|
+
--_py: var(--sc-spacing-xs);
|
|
1863
|
+
--_px: var(--sc-spacing-sm);
|
|
1864
|
+
--_h: var(--sc-size-control-md);
|
|
1865
|
+
inline-size: 100%;
|
|
1866
|
+
border-collapse: separate;
|
|
1867
|
+
border-spacing: 0;
|
|
1868
|
+
font-family: var(--sc-font-family-sans);
|
|
1869
|
+
font-size: var(--sc-font-size-sm);
|
|
1870
|
+
line-height: var(--sc-font-line-height-ui);
|
|
1871
|
+
color: var(--sc-color-text-default);
|
|
1872
|
+
text-align: start;
|
|
1873
|
+
}
|
|
1874
|
+
.sc-table[data-layout='fixed'] {
|
|
1875
|
+
table-layout: fixed;
|
|
1876
|
+
}
|
|
1877
|
+
.sc-table[data-density='compact'],
|
|
1878
|
+
[data-density='compact'] .sc-table:not([data-density='comfortable']) {
|
|
1879
|
+
--_py: var(--sc-spacing-2xs);
|
|
1880
|
+
--_px: var(--sc-spacing-xs);
|
|
1881
|
+
--_h: var(--sc-size-control-sm);
|
|
1882
|
+
}
|
|
1883
|
+
.sc-table__caption {
|
|
1884
|
+
padding-block-end: var(--sc-spacing-xs);
|
|
1885
|
+
color: var(--sc-color-text-muted);
|
|
1886
|
+
font-size: var(--sc-font-size-xs);
|
|
1887
|
+
text-align: start;
|
|
1888
|
+
caption-side: top;
|
|
1889
|
+
}
|
|
1890
|
+
.sc-table__header,
|
|
1891
|
+
.sc-table__cell {
|
|
1892
|
+
box-sizing: border-box;
|
|
1893
|
+
block-size: var(--_h);
|
|
1894
|
+
padding: var(--_py) var(--_px);
|
|
1895
|
+
vertical-align: middle;
|
|
1896
|
+
text-align: start;
|
|
1897
|
+
}
|
|
1898
|
+
.sc-table__header {
|
|
1899
|
+
color: var(--sc-color-text-muted);
|
|
1900
|
+
font-size: var(--sc-font-size-xs);
|
|
1901
|
+
font-weight: var(--sc-font-weight-medium);
|
|
1902
|
+
letter-spacing: var(--sc-font-tracking-wide);
|
|
1903
|
+
text-transform: uppercase;
|
|
1904
|
+
white-space: nowrap;
|
|
1905
|
+
background: var(--sc-color-surface-canvas);
|
|
1906
|
+
border-block-end: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
1907
|
+
}
|
|
1908
|
+
/* Sortable column headers: the whole label is the button. */
|
|
1909
|
+
.sc-table__header[data-sortable] {
|
|
1910
|
+
padding: 0;
|
|
1911
|
+
}
|
|
1912
|
+
.sc-table__sort {
|
|
1913
|
+
display: inline-flex;
|
|
1914
|
+
align-items: center;
|
|
1915
|
+
gap: var(--sc-spacing-2xs);
|
|
1916
|
+
box-sizing: border-box;
|
|
1917
|
+
inline-size: 100%;
|
|
1918
|
+
min-block-size: var(--_h);
|
|
1919
|
+
margin: 0;
|
|
1920
|
+
padding: var(--_py) var(--_px);
|
|
1921
|
+
border: 0;
|
|
1922
|
+
border-radius: var(--sc-radius-sm);
|
|
1923
|
+
background: transparent;
|
|
1924
|
+
color: inherit;
|
|
1925
|
+
font: inherit;
|
|
1926
|
+
letter-spacing: inherit;
|
|
1927
|
+
text-transform: inherit;
|
|
1928
|
+
text-align: inherit;
|
|
1929
|
+
white-space: inherit;
|
|
1930
|
+
cursor: pointer;
|
|
1931
|
+
user-select: none;
|
|
1932
|
+
}
|
|
1933
|
+
.sc-table__header[data-align='end'] > .sc-table__sort {
|
|
1934
|
+
justify-content: flex-end;
|
|
1935
|
+
}
|
|
1936
|
+
.sc-table__header[data-align='center'] > .sc-table__sort {
|
|
1937
|
+
justify-content: center;
|
|
1938
|
+
}
|
|
1939
|
+
.sc-table__sort:hover {
|
|
1940
|
+
background: var(--sc-color-surface-hover);
|
|
1941
|
+
color: var(--sc-color-text-default);
|
|
1942
|
+
}
|
|
1943
|
+
.sc-table__sort:focus-visible {
|
|
1944
|
+
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
1945
|
+
outline-offset: calc(-1 * var(--sc-border-width-focus));
|
|
1946
|
+
}
|
|
1947
|
+
.sc-table__sort-icon {
|
|
1948
|
+
display: inline-flex;
|
|
1949
|
+
flex: none;
|
|
1950
|
+
opacity: 0;
|
|
1951
|
+
transition: opacity var(--sc-duration-fast) var(--sc-ease-standard);
|
|
1952
|
+
}
|
|
1953
|
+
.sc-table__sort:hover > .sc-table__sort-icon,
|
|
1954
|
+
.sc-table__sort:focus-visible > .sc-table__sort-icon {
|
|
1955
|
+
opacity: 0.6;
|
|
1956
|
+
}
|
|
1957
|
+
.sc-table__header[data-sorted] {
|
|
1958
|
+
color: var(--sc-color-text-default);
|
|
1959
|
+
}
|
|
1960
|
+
.sc-table__header[data-sorted] .sc-table__sort-icon {
|
|
1961
|
+
opacity: 1;
|
|
1962
|
+
color: var(--sc-color-accent-text);
|
|
1963
|
+
}
|
|
1964
|
+
.sc-table__body .sc-table__header {
|
|
1965
|
+
color: var(--sc-color-text-default);
|
|
1966
|
+
font-size: inherit;
|
|
1967
|
+
font-weight: var(--sc-font-weight-medium);
|
|
1968
|
+
letter-spacing: 0;
|
|
1969
|
+
text-transform: none;
|
|
1970
|
+
background: transparent;
|
|
1971
|
+
border-block-end: 0;
|
|
1972
|
+
}
|
|
1973
|
+
.sc-table-wrap[data-sticky-header] .sc-table__head .sc-table__header {
|
|
1974
|
+
position: sticky;
|
|
1975
|
+
inset-block-start: 0;
|
|
1976
|
+
z-index: var(--sc-z-sticky);
|
|
1977
|
+
}
|
|
1978
|
+
.sc-table[data-divided] .sc-table__body .sc-table__row:not(:last-child) > .sc-table__cell,
|
|
1979
|
+
.sc-table[data-divided] .sc-table__body .sc-table__row:not(:last-child) > .sc-table__header {
|
|
1980
|
+
border-block-end: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
1981
|
+
}
|
|
1982
|
+
.sc-table__foot .sc-table__cell,
|
|
1983
|
+
.sc-table__foot .sc-table__header {
|
|
1984
|
+
border-block-start: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
1985
|
+
font-weight: var(--sc-font-weight-medium);
|
|
1986
|
+
}
|
|
1987
|
+
.sc-table__row[data-interactive] {
|
|
1988
|
+
cursor: pointer;
|
|
1989
|
+
}
|
|
1990
|
+
.sc-table__row[data-interactive]:hover > .sc-table__cell,
|
|
1991
|
+
.sc-table__row[data-interactive]:hover > .sc-table__header {
|
|
1992
|
+
background: var(--sc-color-surface-hover);
|
|
1993
|
+
}
|
|
1994
|
+
.sc-table__row[data-selected] > .sc-table__cell,
|
|
1995
|
+
.sc-table__row[data-selected] > .sc-table__header {
|
|
1996
|
+
background: var(--sc-color-accent-subtle);
|
|
1997
|
+
}
|
|
1998
|
+
.sc-table__header[data-align='center'],
|
|
1999
|
+
.sc-table__cell[data-align='center'] {
|
|
2000
|
+
text-align: center;
|
|
2001
|
+
}
|
|
2002
|
+
.sc-table__header[data-align='end'],
|
|
2003
|
+
.sc-table__cell[data-align='end'] {
|
|
2004
|
+
text-align: end;
|
|
2005
|
+
}
|
|
2006
|
+
.sc-table__header[data-numeric],
|
|
2007
|
+
.sc-table__cell[data-numeric] {
|
|
2008
|
+
font-variant-numeric: tabular-nums;
|
|
2009
|
+
}
|
|
2010
|
+
.sc-table__header[data-nowrap],
|
|
2011
|
+
.sc-table__cell[data-nowrap] {
|
|
2012
|
+
white-space: nowrap;
|
|
2013
|
+
}
|
|
2014
|
+
.sc-table__header[data-truncate],
|
|
2015
|
+
.sc-table__cell[data-truncate] {
|
|
2016
|
+
max-inline-size: 0;
|
|
2017
|
+
overflow: hidden;
|
|
2018
|
+
text-overflow: ellipsis;
|
|
2019
|
+
white-space: nowrap;
|
|
2020
|
+
}
|
|
2021
|
+
.sc-table__cell > .sc-badge,
|
|
2022
|
+
.sc-table__cell > .sc-button {
|
|
2023
|
+
vertical-align: middle;
|
|
2024
|
+
}
|
|
2025
|
+
|
|
2026
|
+
/* ---- stat.css ---- */
|
|
2027
|
+
/* ---- Stat ------------------------------------------------------------------ */
|
|
2028
|
+
.sc-stat {
|
|
2029
|
+
--_p: var(--sc-spacing-md);
|
|
2030
|
+
--_value: var(--sc-font-size-2xl);
|
|
2031
|
+
position: relative;
|
|
2032
|
+
display: grid;
|
|
2033
|
+
grid-template-columns: 1fr auto;
|
|
2034
|
+
grid-template-areas:
|
|
2035
|
+
'label icon'
|
|
2036
|
+
'value value'
|
|
2037
|
+
'delta delta'
|
|
2038
|
+
'hint hint';
|
|
2039
|
+
align-content: start;
|
|
2040
|
+
row-gap: var(--sc-spacing-3xs);
|
|
2041
|
+
box-sizing: border-box;
|
|
2042
|
+
min-inline-size: 0;
|
|
2043
|
+
margin: 0;
|
|
2044
|
+
padding: var(--_p);
|
|
2045
|
+
border-radius: var(--sc-radius-xl);
|
|
2046
|
+
background: var(--sc-color-surface-default);
|
|
2047
|
+
color: var(--sc-color-text-default);
|
|
2048
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
2049
|
+
font-family: var(--sc-font-family-sans);
|
|
2050
|
+
font-size: var(--sc-font-size-sm);
|
|
2051
|
+
line-height: var(--sc-font-line-height-ui);
|
|
2052
|
+
list-style: none;
|
|
2053
|
+
}
|
|
2054
|
+
.sc-stat[data-variant='filled'] {
|
|
2055
|
+
background: var(--sc-color-surface-sunken);
|
|
2056
|
+
border-color: transparent;
|
|
2057
|
+
}
|
|
2058
|
+
.sc-stat[data-variant='plain'] {
|
|
2059
|
+
--_p: 0;
|
|
2060
|
+
background: transparent;
|
|
2061
|
+
border: 0;
|
|
2062
|
+
border-radius: 0;
|
|
2063
|
+
}
|
|
2064
|
+
.sc-stat[data-size='sm'] {
|
|
2065
|
+
--_p: var(--sc-spacing-sm);
|
|
2066
|
+
--_value: var(--sc-font-size-xl);
|
|
2067
|
+
border-radius: var(--sc-radius-lg);
|
|
2068
|
+
}
|
|
2069
|
+
.sc-stat__label {
|
|
2070
|
+
grid-area: label;
|
|
2071
|
+
color: var(--sc-color-text-muted);
|
|
2072
|
+
font-weight: var(--sc-font-weight-medium);
|
|
2073
|
+
}
|
|
2074
|
+
.sc-stat__icon {
|
|
2075
|
+
grid-area: icon;
|
|
2076
|
+
display: inline-flex;
|
|
2077
|
+
color: var(--sc-color-text-subtle);
|
|
2078
|
+
}
|
|
2079
|
+
.sc-stat__icon > svg {
|
|
2080
|
+
inline-size: var(--sc-size-icon-lg);
|
|
2081
|
+
block-size: var(--sc-size-icon-lg);
|
|
2082
|
+
}
|
|
2083
|
+
.sc-stat__value {
|
|
2084
|
+
grid-area: value;
|
|
2085
|
+
font-size: var(--_value);
|
|
2086
|
+
font-weight: var(--sc-font-weight-semibold);
|
|
2087
|
+
line-height: var(--sc-font-line-height-tight);
|
|
2088
|
+
letter-spacing: var(--sc-font-tracking-snug);
|
|
2089
|
+
font-variant-numeric: tabular-nums;
|
|
2090
|
+
overflow-wrap: anywhere;
|
|
2091
|
+
}
|
|
2092
|
+
.sc-stat__delta {
|
|
2093
|
+
grid-area: delta;
|
|
2094
|
+
display: inline-flex;
|
|
2095
|
+
align-items: center;
|
|
2096
|
+
gap: var(--sc-spacing-3xs);
|
|
2097
|
+
color: var(--sc-color-text-muted);
|
|
2098
|
+
font-size: var(--sc-font-size-xs);
|
|
2099
|
+
font-weight: var(--sc-font-weight-medium);
|
|
2100
|
+
font-variant-numeric: tabular-nums;
|
|
2101
|
+
}
|
|
2102
|
+
.sc-stat__delta[data-tone='positive'] {
|
|
2103
|
+
color: var(--sc-color-success-text);
|
|
2104
|
+
}
|
|
2105
|
+
.sc-stat__delta[data-tone='negative'] {
|
|
2106
|
+
color: var(--sc-color-danger-text);
|
|
2107
|
+
}
|
|
2108
|
+
.sc-stat__trend {
|
|
2109
|
+
display: inline-flex;
|
|
2110
|
+
}
|
|
2111
|
+
.sc-stat__hint {
|
|
2112
|
+
grid-area: hint;
|
|
2113
|
+
color: var(--sc-color-text-muted);
|
|
2114
|
+
font-size: var(--sc-font-size-xs);
|
|
2115
|
+
}
|
|
2116
|
+
|
|
1846
2117
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salemcobalt/ui",
|
|
3
|
-
"version": "0.2.0-rc.
|
|
4
|
-
"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.",
|
|
3
|
+
"version": "0.2.0-rc.3",
|
|
4
|
+
"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.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": "^19.0.0",
|
|
35
35
|
"react-dom": "^19.0.0",
|
|
36
|
-
"@salemcobalt/tokens": "^0.2.0-rc.
|
|
36
|
+
"@salemcobalt/tokens": "^0.2.0-rc.3"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@base-ui/react": "^1.9.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"tsup": "^9.0.0",
|
|
57
57
|
"typescript": "^5.9.3",
|
|
58
58
|
"vitest": "^5.0.5",
|
|
59
|
-
"@salemcobalt/tokens": "^0.2.0-rc.
|
|
59
|
+
"@salemcobalt/tokens": "^0.2.0-rc.3"
|
|
60
60
|
},
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public"
|