@agentero/design-system 0.8.5 → 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 +331 -20
- package/mcp/manifests/components.json +1 -1
- package/package.json +7 -2
- 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
|
@@ -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
|
|
|
@@ -2920,6 +3051,186 @@ totalCount: number</code></pre>
|
|
|
2920
3051
|
|
|
2921
3052
|
</div>
|
|
2922
3053
|
</article>
|
|
3054
|
+
<article
|
|
3055
|
+
class="card
|
|
3056
|
+
no-error
|
|
3057
|
+
no-info
|
|
3058
|
+
no-story-error
|
|
3059
|
+
no-doc-error"
|
|
3060
|
+
role="listitem"
|
|
3061
|
+
aria-label="Table.Root">
|
|
3062
|
+
<div class="head">
|
|
3063
|
+
<div class="title">
|
|
3064
|
+
<h2><span class="status-dot dot-ok"></span> Table.Root</h2>
|
|
3065
|
+
<div class="badges">
|
|
3066
|
+
|
|
3067
|
+
|
|
3068
|
+
<label for="c-8-components-table-stories" class="badge ok as-toggle">8 stories</label>
|
|
3069
|
+
|
|
3070
|
+
</div>
|
|
3071
|
+
</div>
|
|
3072
|
+
<div class="meta" title="./src/data-table/table.stories.tsx">components-table · ./src/data-table/table.stories.tsx</div>
|
|
3073
|
+
|
|
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>
|
|
3075
|
+
|
|
3076
|
+
</div>
|
|
3077
|
+
|
|
3078
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3079
|
+
|
|
3080
|
+
|
|
3081
|
+
<input id="c-8-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3082
|
+
|
|
3083
|
+
|
|
3084
|
+
|
|
3085
|
+
<div class="panels">
|
|
3086
|
+
|
|
3087
|
+
|
|
3088
|
+
|
|
3089
|
+
|
|
3090
|
+
<div class="panel panel-stories">
|
|
3091
|
+
|
|
3092
|
+
|
|
3093
|
+
|
|
3094
|
+
<div class="note ok">
|
|
3095
|
+
<div class="row">
|
|
3096
|
+
<span class="ex-name">Imports</span>
|
|
3097
|
+
</div>
|
|
3098
|
+
<pre><code>import { Button, Table } from "@agentero/design-system";
|
|
3099
|
+
import { Fragment } from "react";</code></pre>
|
|
3100
|
+
</div>
|
|
3101
|
+
|
|
3102
|
+
|
|
3103
|
+
<div class="note ok">
|
|
3104
|
+
<div class="row">
|
|
3105
|
+
<span class="ex-name">Default</span>
|
|
3106
|
+
<span class="badge ok">story ok</span>
|
|
3107
|
+
</div>
|
|
3108
|
+
<div>Default table</div>
|
|
3109
|
+
<div class="hint">Default args playground.</div>
|
|
3110
|
+
<pre><code>const Default = args => renderTable(args);</code></pre>
|
|
3111
|
+
</div>
|
|
3112
|
+
<div class="note ok">
|
|
3113
|
+
<div class="row">
|
|
3114
|
+
<span class="ex-name">Sizes</span>
|
|
3115
|
+
<span class="badge ok">story ok</span>
|
|
3116
|
+
</div>
|
|
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>
|
|
3129
|
+
</div>
|
|
3130
|
+
<div class="note ok">
|
|
3131
|
+
<div class="row">
|
|
3132
|
+
<span class="ex-name">Sticky Header</span>
|
|
3133
|
+
<span class="badge ok">story ok</span>
|
|
3134
|
+
</div>
|
|
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>
|
|
3138
|
+
</div>
|
|
3139
|
+
<div class="note ok">
|
|
3140
|
+
<div class="row">
|
|
3141
|
+
<span class="ex-name">Sticky Header And Footer</span>
|
|
3142
|
+
<span class="badge ok">story ok</span>
|
|
3143
|
+
</div>
|
|
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>
|
|
3147
|
+
</div>
|
|
3148
|
+
<div class="note ok">
|
|
3149
|
+
<div class="row">
|
|
3150
|
+
<span class="ex-name">Embed</span>
|
|
3151
|
+
<span class="badge ok">story ok</span>
|
|
3152
|
+
</div>
|
|
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>
|
|
3156
|
+
</div>
|
|
3157
|
+
<div class="note ok">
|
|
3158
|
+
<div class="row">
|
|
3159
|
+
<span class="ex-name">With Checkbox</span>
|
|
3160
|
+
<span class="badge ok">story ok</span>
|
|
3161
|
+
</div>
|
|
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>
|
|
3165
|
+
</div>
|
|
3166
|
+
<div class="note ok">
|
|
3167
|
+
<div class="row">
|
|
3168
|
+
<span class="ex-name">With Row Actions</span>
|
|
3169
|
+
<span class="badge ok">story ok</span>
|
|
3170
|
+
</div>
|
|
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>
|
|
3174
|
+
</div>
|
|
3175
|
+
<div class="note ok">
|
|
3176
|
+
<div class="row">
|
|
3177
|
+
<span class="ex-name">Expandable Rows</span>
|
|
3178
|
+
<span class="badge ok">story ok</span>
|
|
3179
|
+
</div>
|
|
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 />;
|
|
3228
|
+
};</code></pre>
|
|
3229
|
+
</div>
|
|
3230
|
+
</div>
|
|
3231
|
+
|
|
3232
|
+
</div>
|
|
3233
|
+
</article>
|
|
2923
3234
|
<article
|
|
2924
3235
|
class="card
|
|
2925
3236
|
no-error
|
|
@@ -2932,9 +3243,9 @@ totalCount: number</code></pre>
|
|
|
2932
3243
|
<div class="title">
|
|
2933
3244
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
2934
3245
|
<div class="badges">
|
|
2935
|
-
<label for="c-
|
|
3246
|
+
<label for="c-9-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
2936
3247
|
|
|
2937
|
-
<label for="c-
|
|
3248
|
+
<label for="c-9-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
2938
3249
|
|
|
2939
3250
|
</div>
|
|
2940
3251
|
</div>
|
|
@@ -2947,9 +3258,9 @@ totalCount: number</code></pre>
|
|
|
2947
3258
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2948
3259
|
|
|
2949
3260
|
|
|
2950
|
-
<input id="c-
|
|
3261
|
+
<input id="c-9-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2951
3262
|
|
|
2952
|
-
<input id="c-
|
|
3263
|
+
<input id="c-9-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
2953
3264
|
|
|
2954
3265
|
<div class="panels">
|
|
2955
3266
|
|