@agentero/design-system 0.8.4 → 0.9.0
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/mcp/manifests/components.html +244 -153
- package/mcp/manifests/components.json +1 -1
- package/package.json +7 -6
- package/src/data-table/data-table.d.ts +116 -0
- package/src/data-table/data-table.js +158 -0
- package/src/data-table/icons.d.ts +26 -0
- package/src/data-table/icons.js +38 -0
- package/src/data-table/index.d.ts +4 -0
- package/src/data-table/index.js +3 -0
- package/src/data-table/table.d.ts +124 -0
- package/src/data-table/table.js +182 -0
- package/theme/base.css +0 -14
- package/src/status-ball/index.d.ts +0 -2
- package/src/status-ball/index.js +0 -2
- package/src/status-ball/status-ball.d.ts +0 -93
- package/src/status-ball/status-ball.js +0 -24
|
@@ -576,13 +576,13 @@
|
|
|
576
576
|
<header>
|
|
577
577
|
<div class="wrap">
|
|
578
578
|
<h1>Manifest Debugger</h1>
|
|
579
|
-
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">
|
|
579
|
+
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">10 components ok</span><span class="filter-pill ok" aria-disabled="true">108 stories ok</span></div>
|
|
580
580
|
</div>
|
|
581
581
|
</header>
|
|
582
582
|
<main>
|
|
583
583
|
<div class="wrap">
|
|
584
584
|
<div class="note ok" style="margin-bottom: 16px;">
|
|
585
|
-
Using <code>react-docgen-typescript</code>. Generation took <strong>
|
|
585
|
+
Using <code>react-docgen-typescript</code>. Generation took <strong>1.9s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -1923,6 +1923,137 @@ variant?: ButtonVariantType</code></pre>
|
|
|
1923
1923
|
|
|
1924
1924
|
</div>
|
|
1925
1925
|
</article>
|
|
1926
|
+
<article
|
|
1927
|
+
class="card
|
|
1928
|
+
no-error
|
|
1929
|
+
no-info
|
|
1930
|
+
no-story-error
|
|
1931
|
+
no-doc-error"
|
|
1932
|
+
role="listitem"
|
|
1933
|
+
aria-label="DataTable.Root">
|
|
1934
|
+
<div class="head">
|
|
1935
|
+
<div class="title">
|
|
1936
|
+
<h2><span class="status-dot dot-ok"></span> DataTable.Root</h2>
|
|
1937
|
+
<div class="badges">
|
|
1938
|
+
|
|
1939
|
+
|
|
1940
|
+
<label for="c-3-components-datatable-stories" class="badge ok as-toggle">3 stories</label>
|
|
1941
|
+
|
|
1942
|
+
</div>
|
|
1943
|
+
</div>
|
|
1944
|
+
<div class="meta" title="./src/data-table/data-table.stories.tsx">components-datatable · ./src/data-table/data-table.stories.tsx</div>
|
|
1945
|
+
|
|
1946
|
+
<div class="hint">DataTable is the data-driven table compound built on TanStack Table. This story shows a representative leads table: an `Applicant` column with a name + address, contact info, insurance type with an icon, a sortable `Created` column, a status badge, and hover-revealed row actions (open + a kebab menu). The toolbar (search + filters) and the footer pagination are **separate components** composed inside `ToolBar` / `Footer`.</div>
|
|
1947
|
+
|
|
1948
|
+
</div>
|
|
1949
|
+
|
|
1950
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
1951
|
+
|
|
1952
|
+
|
|
1953
|
+
<input id="c-3-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
1954
|
+
|
|
1955
|
+
|
|
1956
|
+
|
|
1957
|
+
<div class="panels">
|
|
1958
|
+
|
|
1959
|
+
|
|
1960
|
+
|
|
1961
|
+
|
|
1962
|
+
<div class="panel panel-stories">
|
|
1963
|
+
|
|
1964
|
+
|
|
1965
|
+
|
|
1966
|
+
<div class="note ok">
|
|
1967
|
+
<div class="row">
|
|
1968
|
+
<span class="ex-name">Imports</span>
|
|
1969
|
+
</div>
|
|
1970
|
+
<pre><code>import { Button, DataTable, DropdownMenu, Pagination, Table } from "@agentero/design-system";</code></pre>
|
|
1971
|
+
</div>
|
|
1972
|
+
|
|
1973
|
+
|
|
1974
|
+
<div class="note ok">
|
|
1975
|
+
<div class="row">
|
|
1976
|
+
<span class="ex-name">Leads</span>
|
|
1977
|
+
<span class="badge ok">story ok</span>
|
|
1978
|
+
</div>
|
|
1979
|
+
<div>Representative leads table composition</div>
|
|
1980
|
+
<div class="hint">A leads-table composition: sortable `Created` column, a status badge, row navigation via `rowHref`, hover-revealed actions, a search input + filters in the toolbar, and pagination in the footer.</div>
|
|
1981
|
+
<pre><code>const Leads = () => {
|
|
1982
|
+
const [sorting, setSorting] = useState<SortingState>([]);
|
|
1983
|
+
const [page, setPage] = useState(1);
|
|
1984
|
+
const [search, setSearch] = useState('');
|
|
1985
|
+
|
|
1986
|
+
const data = useMemo(
|
|
1987
|
+
() => LEADS.filter(l => l.contact.toLowerCase().includes(search.toLowerCase())),
|
|
1988
|
+
[search]
|
|
1989
|
+
);
|
|
1990
|
+
|
|
1991
|
+
return (
|
|
1992
|
+
<DataTable.Root
|
|
1993
|
+
data={data}
|
|
1994
|
+
columns={columns}
|
|
1995
|
+
state={{ sorting }}
|
|
1996
|
+
onSortingChange={setSorting}
|
|
1997
|
+
getSortedRowModel={getSortedRowModel()}
|
|
1998
|
+
enableSortingRemoval={false}
|
|
1999
|
+
rowHref={lead => `/leads/${lead.leadId}`}>
|
|
2000
|
+
<DataTable.ToolBar>
|
|
2001
|
+
<input
|
|
2002
|
+
value={search}
|
|
2003
|
+
onChange={e => setSearch(e.target.value)}
|
|
2004
|
+
placeholder="Search..."
|
|
2005
|
+
aria-label="Search leads"
|
|
2006
|
+
className="h-8 w-60 rounded-md border border-border-default-base-primary px-3 text-sm outline-none"
|
|
2007
|
+
/>
|
|
2008
|
+
<Button variant="secondary" size="sm">
|
|
2009
|
+
Filters
|
|
2010
|
+
</Button>
|
|
2011
|
+
</DataTable.ToolBar>
|
|
2012
|
+
|
|
2013
|
+
<DataTable.Table />
|
|
2014
|
+
|
|
2015
|
+
<DataTable.Footer>
|
|
2016
|
+
<Pagination
|
|
2017
|
+
totalCount={LEADS.length}
|
|
2018
|
+
currentPage={page}
|
|
2019
|
+
pageSize={10}
|
|
2020
|
+
onPageChange={setPage}
|
|
2021
|
+
/>
|
|
2022
|
+
</DataTable.Footer>
|
|
2023
|
+
</DataTable.Root>
|
|
2024
|
+
);
|
|
2025
|
+
};</code></pre>
|
|
2026
|
+
</div>
|
|
2027
|
+
<div class="note ok">
|
|
2028
|
+
<div class="row">
|
|
2029
|
+
<span class="ex-name">Empty</span>
|
|
2030
|
+
<span class="badge ok">story ok</span>
|
|
2031
|
+
</div>
|
|
2032
|
+
<div>Empty state when there are no rows</div>
|
|
2033
|
+
<div class="hint">No rows: the table renders its default empty state instead of body rows.</div>
|
|
2034
|
+
<pre><code>const Empty = () => (
|
|
2035
|
+
<DataTable.Root data={[] as Lead[]} columns={columns}>
|
|
2036
|
+
<DataTable.Table />
|
|
2037
|
+
</DataTable.Root>
|
|
2038
|
+
);</code></pre>
|
|
2039
|
+
</div>
|
|
2040
|
+
<div class="note ok">
|
|
2041
|
+
<div class="row">
|
|
2042
|
+
<span class="ex-name">Loading</span>
|
|
2043
|
+
<span class="badge ok">story ok</span>
|
|
2044
|
+
</div>
|
|
2045
|
+
<div>Loading state dims the table and hides the empty state</div>
|
|
2046
|
+
<div class="hint">Loading: the body is dimmed and the empty state is suppressed while data is in flight.</div>
|
|
2047
|
+
<pre><code>const Loading = () => (
|
|
2048
|
+
<DataTable.Root data={[] as Lead[]} columns={columns} isLoading>
|
|
2049
|
+
<DataTable.Table />
|
|
2050
|
+
</DataTable.Root>
|
|
2051
|
+
);</code></pre>
|
|
2052
|
+
</div>
|
|
2053
|
+
</div>
|
|
2054
|
+
|
|
2055
|
+
</div>
|
|
2056
|
+
</article>
|
|
1926
2057
|
<article
|
|
1927
2058
|
class="card
|
|
1928
2059
|
no-error
|
|
@@ -1935,9 +2066,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
1935
2066
|
<div class="title">
|
|
1936
2067
|
<h2><span class="status-dot dot-ok"></span> Divider</h2>
|
|
1937
2068
|
<div class="badges">
|
|
1938
|
-
<label for="c-
|
|
2069
|
+
<label for="c-4-components-divider-props" class="badge ok as-toggle">2 prop types</label>
|
|
1939
2070
|
|
|
1940
|
-
<label for="c-
|
|
2071
|
+
<label for="c-4-components-divider-stories" class="badge ok as-toggle">10 stories</label>
|
|
1941
2072
|
|
|
1942
2073
|
</div>
|
|
1943
2074
|
</div>
|
|
@@ -1950,9 +2081,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
1950
2081
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
1951
2082
|
|
|
1952
2083
|
|
|
1953
|
-
<input id="c-
|
|
2084
|
+
<input id="c-4-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
1954
2085
|
|
|
1955
|
-
<input id="c-
|
|
2086
|
+
<input id="c-4-components-divider-props" class="tg tg-props" type="checkbox" hidden />
|
|
1956
2087
|
|
|
1957
2088
|
<div class="panels">
|
|
1958
2089
|
|
|
@@ -2232,7 +2363,7 @@ label?: ReactNode</code></pre>
|
|
|
2232
2363
|
<div class="badges">
|
|
2233
2364
|
|
|
2234
2365
|
|
|
2235
|
-
<label for="c-
|
|
2366
|
+
<label for="c-5-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
2236
2367
|
|
|
2237
2368
|
</div>
|
|
2238
2369
|
</div>
|
|
@@ -2245,7 +2376,7 @@ label?: ReactNode</code></pre>
|
|
|
2245
2376
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2246
2377
|
|
|
2247
2378
|
|
|
2248
|
-
<input id="c-
|
|
2379
|
+
<input id="c-5-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2249
2380
|
|
|
2250
2381
|
|
|
2251
2382
|
|
|
@@ -2614,9 +2745,9 @@ label?: ReactNode</code></pre>
|
|
|
2614
2745
|
<div class="title">
|
|
2615
2746
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
2616
2747
|
<div class="badges">
|
|
2617
|
-
<label for="c-
|
|
2748
|
+
<label for="c-6-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
2618
2749
|
|
|
2619
|
-
<label for="c-
|
|
2750
|
+
<label for="c-6-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
2620
2751
|
|
|
2621
2752
|
</div>
|
|
2622
2753
|
</div>
|
|
@@ -2629,9 +2760,9 @@ label?: ReactNode</code></pre>
|
|
|
2629
2760
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2630
2761
|
|
|
2631
2762
|
|
|
2632
|
-
<input id="c-
|
|
2763
|
+
<input id="c-6-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2633
2764
|
|
|
2634
|
-
<input id="c-
|
|
2765
|
+
<input id="c-6-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
2635
2766
|
|
|
2636
2767
|
<div class="panels">
|
|
2637
2768
|
|
|
@@ -2771,9 +2902,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2771
2902
|
<div class="title">
|
|
2772
2903
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
2773
2904
|
<div class="badges">
|
|
2774
|
-
<label for="c-
|
|
2905
|
+
<label for="c-7-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
2775
2906
|
|
|
2776
|
-
<label for="c-
|
|
2907
|
+
<label for="c-7-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
2777
2908
|
|
|
2778
2909
|
</div>
|
|
2779
2910
|
</div>
|
|
@@ -2786,9 +2917,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2786
2917
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2787
2918
|
|
|
2788
2919
|
|
|
2789
|
-
<input id="c-
|
|
2920
|
+
<input id="c-7-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2790
2921
|
|
|
2791
|
-
<input id="c-
|
|
2922
|
+
<input id="c-7-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
2792
2923
|
|
|
2793
2924
|
<div class="panels">
|
|
2794
2925
|
|
|
@@ -2927,27 +3058,27 @@ totalCount: number</code></pre>
|
|
|
2927
3058
|
no-story-error
|
|
2928
3059
|
no-doc-error"
|
|
2929
3060
|
role="listitem"
|
|
2930
|
-
aria-label="
|
|
3061
|
+
aria-label="Table.Root">
|
|
2931
3062
|
<div class="head">
|
|
2932
3063
|
<div class="title">
|
|
2933
|
-
<h2><span class="status-dot dot-ok"></span>
|
|
3064
|
+
<h2><span class="status-dot dot-ok"></span> Table.Root</h2>
|
|
2934
3065
|
<div class="badges">
|
|
2935
3066
|
|
|
2936
3067
|
|
|
2937
|
-
<label for="c-
|
|
3068
|
+
<label for="c-8-components-table-stories" class="badge ok as-toggle">8 stories</label>
|
|
2938
3069
|
|
|
2939
3070
|
</div>
|
|
2940
3071
|
</div>
|
|
2941
|
-
<div class="meta" title="./src/
|
|
3072
|
+
<div class="meta" title="./src/data-table/table.stories.tsx">components-table · ./src/data-table/table.stories.tsx</div>
|
|
2942
3073
|
|
|
2943
|
-
<div class="hint">
|
|
3074
|
+
<div class="hint">Low-level presentational table primitive: native `<table>` markup themed for scrolling, sticky rows, cell padding, dividers, hover, and expandable rows. For sorting/toolbar/pagination, prefer `DataTable`.</div>
|
|
2944
3075
|
|
|
2945
3076
|
</div>
|
|
2946
3077
|
|
|
2947
3078
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2948
3079
|
|
|
2949
3080
|
|
|
2950
|
-
<input id="c-
|
|
3081
|
+
<input id="c-8-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2951
3082
|
|
|
2952
3083
|
|
|
2953
3084
|
|
|
@@ -2964,7 +3095,8 @@ totalCount: number</code></pre>
|
|
|
2964
3095
|
<div class="row">
|
|
2965
3096
|
<span class="ex-name">Imports</span>
|
|
2966
3097
|
</div>
|
|
2967
|
-
<pre><code>import {
|
|
3098
|
+
<pre><code>import { Button, Table } from "@agentero/design-system";
|
|
3099
|
+
import { Fragment } from "react";</code></pre>
|
|
2968
3100
|
</div>
|
|
2969
3101
|
|
|
2970
3102
|
|
|
@@ -2973,169 +3105,128 @@ totalCount: number</code></pre>
|
|
|
2973
3105
|
<span class="ex-name">Default</span>
|
|
2974
3106
|
<span class="badge ok">story ok</span>
|
|
2975
3107
|
</div>
|
|
2976
|
-
<div>Default
|
|
2977
|
-
<div class="hint">
|
|
2978
|
-
<pre><code>const Default =
|
|
2979
|
-
<StatusBall color="neutral" />
|
|
2980
|
-
</div>;</code></pre>
|
|
2981
|
-
</div>
|
|
2982
|
-
<div class="note ok">
|
|
2983
|
-
<div class="row">
|
|
2984
|
-
<span class="ex-name">Intents</span>
|
|
2985
|
-
<span class="badge ok">story ok</span>
|
|
2986
|
-
</div>
|
|
2987
|
-
<div>Every intent paired with a representative status label</div>
|
|
2988
|
-
<div class="hint">All 8 semantic intents rendered in a single grid, each paired with a sample label. Consumers typically drive the `color` prop from a domain-specific status → intent lookup table.</div>
|
|
2989
|
-
<pre><code>const Intents = () => {
|
|
2990
|
-
const samples: { color: (typeof INTENTS)[number]; label: string }[] = [
|
|
2991
|
-
{ color: 'success', label: 'Active' },
|
|
2992
|
-
{ color: 'info', label: 'Scheduled' },
|
|
2993
|
-
{ color: 'warning', label: 'Pending' },
|
|
2994
|
-
{ color: 'danger', label: 'Expired' },
|
|
2995
|
-
{ color: 'creative', label: 'In review' },
|
|
2996
|
-
{ color: 'playful', label: 'Flagged' },
|
|
2997
|
-
{ color: 'dynamic', label: 'Needs attention' },
|
|
2998
|
-
{ color: 'neutral', label: 'Inactive' }
|
|
2999
|
-
];
|
|
3000
|
-
|
|
3001
|
-
return (
|
|
3002
|
-
<div className="grid grid-cols-2 gap-x-8 gap-y-3">
|
|
3003
|
-
{samples.map(({ color, label }) => (
|
|
3004
|
-
<div key={color} className="flex items-center gap-2">
|
|
3005
|
-
<StatusBall color={color} />
|
|
3006
|
-
<span className="text-sm text-text-default-base-primary">{label}</span>
|
|
3007
|
-
</div>
|
|
3008
|
-
))}
|
|
3009
|
-
</div>
|
|
3010
|
-
);
|
|
3011
|
-
};</code></pre>
|
|
3012
|
-
</div>
|
|
3013
|
-
<div class="note ok">
|
|
3014
|
-
<div class="row">
|
|
3015
|
-
<span class="ex-name">Success</span>
|
|
3016
|
-
<span class="badge ok">story ok</span>
|
|
3017
|
-
</div>
|
|
3018
|
-
<div>Success dot for positive or active statuses</div>
|
|
3019
|
-
<div class="hint">Success dot for positive / active states — the most common pairing for "live" records such as active licenses or confirmed appointments.</div>
|
|
3020
|
-
<pre><code>const Success = () => <StatusBall color="success" data-testid="status-ball-success" />;</code></pre>
|
|
3021
|
-
</div>
|
|
3022
|
-
<div class="note ok">
|
|
3023
|
-
<div class="row">
|
|
3024
|
-
<span class="ex-name">Info</span>
|
|
3025
|
-
<span class="badge ok">story ok</span>
|
|
3026
|
-
</div>
|
|
3027
|
-
<div>Info dot for informational statuses</div>
|
|
3028
|
-
<div class="hint">Info dot for informational or neutral-positive states — e.g., scheduled or queued records that are progressing normally.</div>
|
|
3029
|
-
<pre><code>const Info = () => <StatusBall color="info" />;</code></pre>
|
|
3108
|
+
<div>Default table</div>
|
|
3109
|
+
<div class="hint">Default args playground.</div>
|
|
3110
|
+
<pre><code>const Default = args => renderTable(args);</code></pre>
|
|
3030
3111
|
</div>
|
|
3031
3112
|
<div class="note ok">
|
|
3032
3113
|
<div class="row">
|
|
3033
|
-
<span class="ex-name">
|
|
3114
|
+
<span class="ex-name">Sizes</span>
|
|
3034
3115
|
<span class="badge ok">story ok</span>
|
|
3035
3116
|
</div>
|
|
3036
|
-
<div>
|
|
3037
|
-
<div class="hint">
|
|
3038
|
-
<pre><code>const
|
|
3117
|
+
<div>size — sm / md / lg</div>
|
|
3118
|
+
<div class="hint">The three row densities. `size` sets row min-height: sm 48 / md 64 / lg 88px.</div>
|
|
3119
|
+
<pre><code>const Sizes = () => (
|
|
3120
|
+
<div className="flex flex-col gap-6">
|
|
3121
|
+
{(['sm', 'md', 'lg'] as const).map(size => (
|
|
3122
|
+
<div key={size} className="flex flex-col gap-1">
|
|
3123
|
+
<span className="text-xs text-text-default-base-tertiary">size=&quot;{size}&quot;</span>
|
|
3124
|
+
{renderTable({ size })}
|
|
3125
|
+
</div>
|
|
3126
|
+
))}
|
|
3127
|
+
</div>
|
|
3128
|
+
);</code></pre>
|
|
3039
3129
|
</div>
|
|
3040
3130
|
<div class="note ok">
|
|
3041
3131
|
<div class="row">
|
|
3042
|
-
<span class="ex-name">
|
|
3132
|
+
<span class="ex-name">Sticky Header</span>
|
|
3043
3133
|
<span class="badge ok">story ok</span>
|
|
3044
3134
|
</div>
|
|
3045
|
-
<div>
|
|
3046
|
-
<div class="hint"
|
|
3047
|
-
<pre><code>const
|
|
3135
|
+
<div>sticky="header" with a scrolling body</div>
|
|
3136
|
+
<div class="hint">`sticky="header"` pins the header while the body scrolls. Needs a bounded-height parent.</div>
|
|
3137
|
+
<pre><code>const StickyHeader = args => renderTable(args);</code></pre>
|
|
3048
3138
|
</div>
|
|
3049
3139
|
<div class="note ok">
|
|
3050
3140
|
<div class="row">
|
|
3051
|
-
<span class="ex-name">
|
|
3141
|
+
<span class="ex-name">Sticky Header And Footer</span>
|
|
3052
3142
|
<span class="badge ok">story ok</span>
|
|
3053
3143
|
</div>
|
|
3054
|
-
<div>
|
|
3055
|
-
<div class="hint"
|
|
3056
|
-
<pre><code>const
|
|
3144
|
+
<div>sticky="headerAndFooter" with a pinned totals row</div>
|
|
3145
|
+
<div class="hint">`sticky="headerAndFooter"` pins the header and the last body row (totals here).</div>
|
|
3146
|
+
<pre><code>const StickyHeaderAndFooter = args => renderTable(args, { totals: true });</code></pre>
|
|
3057
3147
|
</div>
|
|
3058
3148
|
<div class="note ok">
|
|
3059
3149
|
<div class="row">
|
|
3060
|
-
<span class="ex-name">
|
|
3150
|
+
<span class="ex-name">Embed</span>
|
|
3061
3151
|
<span class="badge ok">story ok</span>
|
|
3062
3152
|
</div>
|
|
3063
|
-
<div>
|
|
3064
|
-
<div class="hint"
|
|
3065
|
-
<pre><code>const
|
|
3153
|
+
<div>embed — no row dividers, 1rem edge gutter</div>
|
|
3154
|
+
<div class="hint">`embed` drops the per-row dividers and tightens the edge gutter to 1rem.</div>
|
|
3155
|
+
<pre><code>const Embed = args => renderTable(args);</code></pre>
|
|
3066
3156
|
</div>
|
|
3067
3157
|
<div class="note ok">
|
|
3068
3158
|
<div class="row">
|
|
3069
|
-
<span class="ex-name">
|
|
3159
|
+
<span class="ex-name">With Checkbox</span>
|
|
3070
3160
|
<span class="badge ok">story ok</span>
|
|
3071
3161
|
</div>
|
|
3072
|
-
<div>
|
|
3073
|
-
<div class="hint">
|
|
3074
|
-
<pre><code>const
|
|
3162
|
+
<div>Selectable rows with a collapsing checkbox column</div>
|
|
3163
|
+
<div class="hint">A leading checkbox column; checkbox cells collapse to zero width.</div>
|
|
3164
|
+
<pre><code>const WithCheckbox = args => renderTable(args, { checkbox: true });</code></pre>
|
|
3075
3165
|
</div>
|
|
3076
3166
|
<div class="note ok">
|
|
3077
3167
|
<div class="row">
|
|
3078
|
-
<span class="ex-name">
|
|
3168
|
+
<span class="ex-name">With Row Actions</span>
|
|
3079
3169
|
<span class="badge ok">story ok</span>
|
|
3080
3170
|
</div>
|
|
3081
|
-
<div>
|
|
3082
|
-
<div class="hint">
|
|
3083
|
-
<pre><code>const
|
|
3171
|
+
<div>Hover-revealed row actions</div>
|
|
3172
|
+
<div class="hint">Hover-revealed row actions pinned to the trailing edge.</div>
|
|
3173
|
+
<pre><code>const WithRowActions = args => renderTable(args, { actions: true });</code></pre>
|
|
3084
3174
|
</div>
|
|
3085
3175
|
<div class="note ok">
|
|
3086
3176
|
<div class="row">
|
|
3087
|
-
<span class="ex-name">
|
|
3177
|
+
<span class="ex-name">Expandable Rows</span>
|
|
3088
3178
|
<span class="badge ok">story ok</span>
|
|
3089
3179
|
</div>
|
|
3090
|
-
<div>
|
|
3091
|
-
<div class="hint"
|
|
3092
|
-
<pre><code>const
|
|
3093
|
-
const
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
|
|
3104
|
-
|
|
3105
|
-
<
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3180
|
+
<div>Expandable rows with a detail panel</div>
|
|
3181
|
+
<div class="hint">`Table.ExpandButton` toggles a `Table.ExpandedRow` detail panel under its row.</div>
|
|
3182
|
+
<pre><code>const ExpandableRows = args => {
|
|
3183
|
+
const Demo = () => {
|
|
3184
|
+
const [openId, setOpenId] = useState<string | null>(ROWS[0]!.id);
|
|
3185
|
+
return (
|
|
3186
|
+
<Table.Root {...args}>
|
|
3187
|
+
<Table.Head>
|
|
3188
|
+
<Table.Row>
|
|
3189
|
+
<Table.Header>
|
|
3190
|
+
<span className="sr-only">Expand</span>
|
|
3191
|
+
</Table.Header>
|
|
3192
|
+
<Table.Header>Name</Table.Header>
|
|
3193
|
+
<Table.Header>Email</Table.Header>
|
|
3194
|
+
<Table.Header>Role</Table.Header>
|
|
3195
|
+
</Table.Row>
|
|
3196
|
+
</Table.Head>
|
|
3197
|
+
<Table.Body>
|
|
3198
|
+
{ROWS.slice(0, 4).map(row => (
|
|
3199
|
+
<Fragment key={row.id}>
|
|
3200
|
+
<Table.Row>
|
|
3201
|
+
<Table.Cell>
|
|
3202
|
+
<Table.ExpandButton
|
|
3203
|
+
isExpanded={openId === row.id}
|
|
3204
|
+
toggleExpanded={() => setOpenId(openId === row.id ? null : row.id)}
|
|
3205
|
+
aria-label={`Toggle ${row.name}`}
|
|
3206
|
+
/>
|
|
3207
|
+
</Table.Cell>
|
|
3208
|
+
<Table.Cell className="font-bold">{row.name}</Table.Cell>
|
|
3209
|
+
<Table.Cell className="text-text-default-base-secondary">{row.email}</Table.Cell>
|
|
3210
|
+
<Table.Cell>{row.role}</Table.Cell>
|
|
3211
|
+
</Table.Row>
|
|
3212
|
+
{openId === row.id && (
|
|
3213
|
+
<Table.ExpandedRow>
|
|
3214
|
+
<Table.Cell colSpan={4}>
|
|
3215
|
+
<div className="py-2 text-text-default-base-secondary">
|
|
3216
|
+
Extended details for {row.name} — {row.amount} lifetime value.
|
|
3217
|
+
</div>
|
|
3218
|
+
</Table.Cell>
|
|
3219
|
+
</Table.ExpandedRow>
|
|
3220
|
+
)}
|
|
3221
|
+
</Fragment>
|
|
3222
|
+
))}
|
|
3223
|
+
</Table.Body>
|
|
3224
|
+
</Table.Root>
|
|
3225
|
+
);
|
|
3226
|
+
};
|
|
3227
|
+
return <Demo />;
|
|
3113
3228
|
};</code></pre>
|
|
3114
3229
|
</div>
|
|
3115
|
-
<div class="note ok">
|
|
3116
|
-
<div class="row">
|
|
3117
|
-
<span class="ex-name">In Pill</span>
|
|
3118
|
-
<span class="badge ok">story ok</span>
|
|
3119
|
-
</div>
|
|
3120
|
-
<div>StatusBall inside a rounded status pill</div>
|
|
3121
|
-
<div class="hint">StatusBall inside a status pill — a tinted badge that pairs the dot with a label in a single rounded container. Use when the status needs more visual weight than a bare list row provides.</div>
|
|
3122
|
-
<pre><code>const InPill = () => (
|
|
3123
|
-
<div className="flex flex-wrap items-center gap-2">
|
|
3124
|
-
<span className="inline-flex items-center gap-1.5 rounded-full border border-border-default-base-primary bg-bg-default-base-primary px-2.5 py-1 text-xs text-text-default-base-primary">
|
|
3125
|
-
<StatusBall color="success" />
|
|
3126
|
-
Active
|
|
3127
|
-
</span>
|
|
3128
|
-
<span className="inline-flex items-center gap-1.5 rounded-full border border-border-default-base-primary bg-bg-default-base-primary px-2.5 py-1 text-xs text-text-default-base-primary">
|
|
3129
|
-
<StatusBall color="warning" />
|
|
3130
|
-
Pending
|
|
3131
|
-
</span>
|
|
3132
|
-
<span className="inline-flex items-center gap-1.5 rounded-full border border-border-default-base-primary bg-bg-default-base-primary px-2.5 py-1 text-xs text-text-default-base-primary">
|
|
3133
|
-
<StatusBall color="danger" />
|
|
3134
|
-
Expired
|
|
3135
|
-
</span>
|
|
3136
|
-
</div>
|
|
3137
|
-
);</code></pre>
|
|
3138
|
-
</div>
|
|
3139
3230
|
</div>
|
|
3140
3231
|
|
|
3141
3232
|
</div>
|
|
@@ -3152,9 +3243,9 @@ totalCount: number</code></pre>
|
|
|
3152
3243
|
<div class="title">
|
|
3153
3244
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
3154
3245
|
<div class="badges">
|
|
3155
|
-
<label for="c-
|
|
3246
|
+
<label for="c-9-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
3156
3247
|
|
|
3157
|
-
<label for="c-
|
|
3248
|
+
<label for="c-9-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
3158
3249
|
|
|
3159
3250
|
</div>
|
|
3160
3251
|
</div>
|
|
@@ -3167,9 +3258,9 @@ totalCount: number</code></pre>
|
|
|
3167
3258
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3168
3259
|
|
|
3169
3260
|
|
|
3170
|
-
<input id="c-
|
|
3261
|
+
<input id="c-9-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3171
3262
|
|
|
3172
|
-
<input id="c-
|
|
3263
|
+
<input id="c-9-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
3173
3264
|
|
|
3174
3265
|
<div class="panels">
|
|
3175
3266
|
|