@alexgorbatchev/shadcn 0.0.53 → 0.0.54

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.
@@ -9,7 +9,7 @@ import {
9
9
  } from "./chunk-en44w1pn.js";
10
10
  import {
11
11
  OptionSelect2
12
- } from "./chunk-xfryhw7e.js";
12
+ } from "./chunk-p6z2m3zp.js";
13
13
  import {
14
14
  Badge2
15
15
  } from "./chunk-9t530p75.js";
@@ -6,7 +6,7 @@ import {
6
6
  } from "./chunk-bd09gygt.js";
7
7
  import {
8
8
  OptionSelect2
9
- } from "./chunk-xfryhw7e.js";
9
+ } from "./chunk-p6z2m3zp.js";
10
10
  import {
11
11
  useAnalyticsCallback
12
12
  } from "./chunk-5mydsjp3.js";
@@ -24,7 +24,7 @@ import {
24
24
  TableHead2,
25
25
  TableCell2,
26
26
  TableCaption2
27
- } from "./chunk-tjn53x34.js";
27
+ } from "./chunk-tmr0jqv8.js";
28
28
  import {
29
29
  safeHref
30
30
  } from "./chunk-xhtsnwnb.js";
@@ -2,7 +2,7 @@ import {
2
2
  Table2,
3
3
  TableHeader2,
4
4
  TableBody2
5
- } from "./chunk-tjn53x34.js";
5
+ } from "./chunk-tmr0jqv8.js";
6
6
 
7
7
  // src/components/virtual-table/VirtualTable.tsx
8
8
  import {
@@ -117,7 +117,7 @@ import {
117
117
  SelectContent2,
118
118
  SelectItem2,
119
119
  OptionSelect2
120
- } from "./chunk-xfryhw7e.js";
120
+ } from "./chunk-p6z2m3zp.js";
121
121
  import {
122
122
  ThemeContext
123
123
  } from "./chunk-1j2hz3w9.js";
@@ -12,7 +12,7 @@ import {
12
12
  } from "./chunk-bd09gygt.js";
13
13
  import {
14
14
  OptionSelect2
15
- } from "./chunk-xfryhw7e.js";
15
+ } from "./chunk-p6z2m3zp.js";
16
16
  import {
17
17
  useAnalyticsCallback
18
18
  } from "./chunk-5mydsjp3.js";
@@ -183,7 +183,8 @@ function OptionSelect2({
183
183
  width = "fit",
184
184
  density,
185
185
  analytics,
186
- "aria-label": ariaLabel
186
+ "aria-label": ariaLabel,
187
+ "aria-describedby": ariaDescribedBy
187
188
  }) {
188
189
  return /* @__PURE__ */ jsxs2(Select2, {
189
190
  items: options,
@@ -201,6 +202,7 @@ function OptionSelect2({
201
202
  /* @__PURE__ */ jsx2(SelectTrigger2, {
202
203
  id,
203
204
  "aria-label": ariaLabel,
205
+ "aria-describedby": ariaDescribedBy,
204
206
  density,
205
207
  size,
206
208
  className: cn2(width === "full" && "w-full"),
@@ -59,13 +59,15 @@ var visibilityClasses = {
59
59
  sm: "hidden sm:table-cell",
60
60
  lg: "hidden lg:table-cell",
61
61
  "container-sm": "hidden @min-[400px]/table:table-cell",
62
- "container-md": "hidden @min-[480px]/table:table-cell"
62
+ "container-md": "hidden @min-[480px]/table:table-cell",
63
+ "container-lg": "hidden @min-[640px]/table:table-cell"
63
64
  };
64
65
  var columnVisibilityClasses = {
65
66
  sm: "hidden sm:table-column",
66
67
  lg: "hidden lg:table-column",
67
68
  "container-sm": "hidden @min-[400px]/table:table-column",
68
- "container-md": "hidden @min-[480px]/table:table-column"
69
+ "container-md": "hidden @min-[480px]/table:table-column",
70
+ "container-lg": "hidden @min-[640px]/table:table-column"
69
71
  };
70
72
  function TableHead2({
71
73
  density,
@@ -10,10 +10,10 @@ import {
10
10
  TableCell2,
11
11
  TableColumnGroup2,
12
12
  TableColumn2
13
- } from "./chunk-tjn53x34.js";
13
+ } from "./chunk-tmr0jqv8.js";
14
14
  import {
15
15
  OptionSelect2
16
- } from "./chunk-xfryhw7e.js";
16
+ } from "./chunk-p6z2m3zp.js";
17
17
  import {
18
18
  Input2
19
19
  } from "./chunk-7vg045gd.js";
@@ -22,8 +22,10 @@ type OptionSelectProps = IDensityProps & IAnalyticsProps & {
22
22
  /** `full` fills a form field; `fit` sits inline in a toolbar. */
23
23
  width?: "fit" | "full";
24
24
  "aria-label"?: string;
25
+ /** IDs of elements describing the select trigger. */
26
+ "aria-describedby"?: string;
25
27
  };
26
28
  /** A styled single-value `Select` for the common case of a flat list of options. */
27
- declare function OptionSelect({ options, value, defaultValue, onValueChange, placeholder, name, id, disabled, required, size, width, density, analytics, "aria-label": ariaLabel, }: OptionSelectProps): ReactElement;
29
+ declare function OptionSelect({ options, value, defaultValue, onValueChange, placeholder, name, id, disabled, required, size, width, density, analytics, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: OptionSelectProps): ReactElement;
28
30
  export { OptionSelect };
29
31
  export type { OptionSelectOption, OptionSelectProps };
@@ -14,7 +14,8 @@ declare function TableFooter({ density, className, ...props }: TableFooterProps)
14
14
  type TableRowProps = ComponentProps<"tr"> & IDensityProps;
15
15
  declare function TableRow({ density, className, ...props }: TableRowProps): ReactElement;
16
16
  type TableTextAlign = TextAlign;
17
- type TableVisibility = "sm" | "lg" | "container-sm" | "container-md";
17
+ /** Viewport breakpoints, or table-container breakpoints at 400, 480, and 640 pixels. */
18
+ type TableVisibility = "sm" | "lg" | "container-sm" | "container-md" | "container-lg";
18
19
  interface ITableCellOptions {
19
20
  truncate?: boolean;
20
21
  textAlign?: TableTextAlign;
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  DataTable2
3
- } from "../../../chunk-5rxjvjkq.js";
3
+ } from "../../../chunk-98s6zk9v.js";
4
4
  import"../../../chunk-1wz92wgg.js";
5
- import"../../../chunk-tjn53x34.js";
5
+ import"../../../chunk-tmr0jqv8.js";
6
6
  import"../../../chunk-k1f35j55.js";
7
7
  import"../../../chunk-m4geb1s5.js";
8
8
  import"../../../chunk-9t530p75.js";
@@ -203,8 +203,8 @@ import"../../chunk-1wz92wgg.js";
203
203
  import"../../chunk-9t530p75.js";
204
204
  import {
205
205
  DataTable2
206
- } from "../../chunk-5rxjvjkq.js";
207
- import"../../chunk-tjn53x34.js";
206
+ } from "../../chunk-98s6zk9v.js";
207
+ import"../../chunk-tmr0jqv8.js";
208
208
  import {
209
209
  DaySeparator2
210
210
  } from "../../chunk-3j9enr2q.js";
@@ -1,11 +1,11 @@
1
1
  import {
2
2
  McpConfigDialog2
3
- } from "../../../chunk-rc99vk8d.js";
3
+ } from "../../../chunk-06ky09dc.js";
4
4
  import"../../../chunk-m4geb1s5.js";
5
5
  import"../../../chunk-9t530p75.js";
6
6
  import"../../../chunk-m32ptxf3.js";
7
7
  import"../../../chunk-tcefvfr8.js";
8
- import"../../../chunk-xfryhw7e.js";
8
+ import"../../../chunk-p6z2m3zp.js";
9
9
  import"../../../chunk-4t23yhc0.js";
10
10
  import"../../../chunk-7vg045gd.js";
11
11
  import"../../../chunk-7jpsybag.js";
@@ -133,12 +133,12 @@ import"../../../chunk-dyg4pwcd.js";
133
133
  import {
134
134
  DirectiveText2
135
135
  } from "../../../chunk-n8n3gp71.js";
136
- import"../../../chunk-xfryhw7e.js";
136
+ import"../../../chunk-p6z2m3zp.js";
137
137
  import"../../../chunk-m32ptxf3.js";
138
138
  import"../../../chunk-52aadmkc.js";
139
139
  import {
140
140
  McpConfigDialog2
141
- } from "../../../chunk-rc99vk8d.js";
141
+ } from "../../../chunk-06ky09dc.js";
142
142
  import"../../../chunk-ptdr68cq.js";
143
143
  import"../../../chunk-65xd5we6.js";
144
144
  import {
@@ -10,8 +10,8 @@ import {
10
10
  import {
11
11
  Calendar2,
12
12
  CalendarDayButton2
13
- } from "../../chunk-yrp7xtb5.js";
14
- import"../../chunk-xfryhw7e.js";
13
+ } from "../../chunk-6j8ksqt9.js";
14
+ import"../../chunk-p6z2m3zp.js";
15
15
  import {
16
16
  Popover2,
17
17
  PopoverTrigger2,
@@ -7,8 +7,8 @@ import"../../chunk-jpvw9xqy.js";
7
7
  import {
8
8
  Button2
9
9
  } from "../../chunk-bd09gygt.js";
10
- import"../../chunk-tjn53x34.js";
11
- import"../../chunk-xfryhw7e.js";
10
+ import"../../chunk-tmr0jqv8.js";
11
+ import"../../chunk-p6z2m3zp.js";
12
12
  import"../../chunk-7jpsybag.js";
13
13
  import"../../chunk-7vg045gd.js";
14
14
  import {
@@ -19,7 +19,7 @@ import {
19
19
  DataGridColumnHeader2,
20
20
  DataGridFilter2,
21
21
  DataGridPagination2
22
- } from "../../chunk-p894n7r6.js";
22
+ } from "../../chunk-x7emg3jx.js";
23
23
  import {
24
24
  Checkbox2
25
25
  } from "../../chunk-b5s5y5wq.js";
@@ -7,7 +7,7 @@ import {
7
7
  DragSource2,
8
8
  DropTarget2,
9
9
  Kanban2
10
- } from "../../chunk-zs4h45d8.js";
10
+ } from "../../chunk-k45r2rz0.js";
11
11
  import"../../chunk-en44w1pn.js";
12
12
  import"../../chunk-9t530p75.js";
13
13
  import"../../chunk-7ny0vyek.js";
@@ -20,7 +20,7 @@ import {
20
20
  } from "../../chunk-bd09gygt.js";
21
21
  import {
22
22
  OptionSelect2
23
- } from "../../chunk-xfryhw7e.js";
23
+ } from "../../chunk-p6z2m3zp.js";
24
24
  import {
25
25
  Table2,
26
26
  TableHeader2,
@@ -28,7 +28,7 @@ import {
28
28
  TableRow2,
29
29
  TableHead2,
30
30
  TableCell2
31
- } from "../../chunk-tjn53x34.js";
31
+ } from "../../chunk-tmr0jqv8.js";
32
32
  import"../../chunk-5mydsjp3.js";
33
33
 
34
34
  // src/components/gantt/Gantt.tsx
@@ -31,7 +31,7 @@ import {
31
31
  DrawerHeader2,
32
32
  DrawerTitle2,
33
33
  DrawerDescription2
34
- } from "../../chunk-zs390b72.js";
34
+ } from "../../chunk-d5pabsj2.js";
35
35
  import {
36
36
  MenuPopup,
37
37
  MenuItem2,
@@ -99,7 +99,7 @@ import {
99
99
  Tabs2,
100
100
  TabsList2,
101
101
  TabsTrigger2
102
- } from "../../chunk-zs4h45d8.js";
102
+ } from "../../chunk-k45r2rz0.js";
103
103
  import {
104
104
  Badge2
105
105
  } from "../../chunk-9t530p75.js";
@@ -113,7 +113,7 @@ import {
113
113
  SelectTrigger2,
114
114
  SelectContent2,
115
115
  SelectItem2
116
- } from "../../chunk-xfryhw7e.js";
116
+ } from "../../chunk-p6z2m3zp.js";
117
117
  import"../../chunk-1j2hz3w9.js";
118
118
  import"../../chunk-k99h6evz.js";
119
119
  import {
@@ -145,7 +145,7 @@ import {
145
145
  TableHead2,
146
146
  TableCell2,
147
147
  TableCaption2
148
- } from "../../chunk-tjn53x34.js";
148
+ } from "../../chunk-tmr0jqv8.js";
149
149
  import"../../chunk-7vnpp3ya.js";
150
150
  import"../../chunk-m4geb1s5.js";
151
151
  import"../../chunk-9ecf92s6.js";
@@ -11,8 +11,8 @@ import {
11
11
  getCalendarClassNames,
12
12
  CalendarDayButton2,
13
13
  CalendarDropdown
14
- } from "../../chunk-yrp7xtb5.js";
15
- import"../../chunk-xfryhw7e.js";
14
+ } from "../../chunk-6j8ksqt9.js";
15
+ import"../../chunk-p6z2m3zp.js";
16
16
  import {
17
17
  useAnalyticsCallback
18
18
  } from "../../chunk-5mydsjp3.js";
@@ -1,14 +1,14 @@
1
1
  import"../../chunk-en44w1pn.js";
2
2
  import {
3
3
  TableRow2
4
- } from "../../chunk-tjn53x34.js";
4
+ } from "../../chunk-tmr0jqv8.js";
5
5
  import"../../chunk-7ny0vyek.js";
6
6
  import"../../chunk-8ssktt4b.js";
7
7
  import"../../chunk-e6hk39ev.js";
8
8
  import"../../chunk-x90xmrba.js";
9
9
  import"../../chunk-jpvw9xqy.js";
10
10
  import"../../chunk-bd09gygt.js";
11
- import"../../chunk-xfryhw7e.js";
11
+ import"../../chunk-p6z2m3zp.js";
12
12
  import"../../chunk-7jpsybag.js";
13
13
  import"../../chunk-7vg045gd.js";
14
14
  import {
@@ -16,10 +16,10 @@ import {
16
16
  DataGridHeaderRows,
17
17
  DataGridCells2,
18
18
  DataGridColumns
19
- } from "../../chunk-p894n7r6.js";
19
+ } from "../../chunk-x7emg3jx.js";
20
20
  import {
21
21
  VirtualTable2
22
- } from "../../chunk-k7cvfw0f.js";
22
+ } from "../../chunk-bmyw7q4w.js";
23
23
  import"../../chunk-5mydsjp3.js";
24
24
 
25
25
  // src/components/virtual-data-grid/VirtualDataGrid.tsx
@@ -1,8 +1,8 @@
1
1
  import"../../chunk-en44w1pn.js";
2
- import"../../chunk-tjn53x34.js";
2
+ import"../../chunk-tmr0jqv8.js";
3
3
  import {
4
4
  VirtualTable2
5
- } from "../../chunk-k7cvfw0f.js";
5
+ } from "../../chunk-bmyw7q4w.js";
6
6
  export {
7
7
  VirtualTable2 as VirtualTable
8
8
  };
package/dist/index.js CHANGED
@@ -171,7 +171,7 @@ import {
171
171
  StatusTracker2,
172
172
  DashboardLayout2,
173
173
  BillingUsage2
174
- } from "./chunk-zs390b72.js";
174
+ } from "./chunk-d5pabsj2.js";
175
175
  import {
176
176
  Tabs2,
177
177
  tabsListVariants2,
@@ -186,7 +186,7 @@ import {
186
186
  useDropTarget2,
187
187
  DropTarget2,
188
188
  Kanban2
189
- } from "./chunk-zs4h45d8.js";
189
+ } from "./chunk-k45r2rz0.js";
190
190
  import {
191
191
  Toolbar2,
192
192
  ToolbarButton2,
@@ -260,7 +260,7 @@ import {
260
260
  TableColumnGroup2,
261
261
  TableColumn2,
262
262
  TableCaption2
263
- } from "./chunk-tjn53x34.js";
263
+ } from "./chunk-tmr0jqv8.js";
264
264
  import {
265
265
  ScrollArea2,
266
266
  ScrollBar2
@@ -406,7 +406,7 @@ import {
406
406
  SelectScrollUpButton2,
407
407
  SelectScrollDownButton2,
408
408
  OptionSelect2
409
- } from "./chunk-xfryhw7e.js";
409
+ } from "./chunk-p6z2m3zp.js";
410
410
  import {
411
411
  Dialog2,
412
412
  DialogTrigger2,
package/dist/prototype.js CHANGED
@@ -2051,7 +2051,7 @@ var program = new Command;
2051
2051
  // package.json
2052
2052
  var package_default = {
2053
2053
  name: "@alexgorbatchev/shadcn",
2054
- version: "0.0.53",
2054
+ version: "0.0.54",
2055
2055
  description: "Sharp, monospace React components with compact and comfortable densities.",
2056
2056
  license: "MIT",
2057
2057
  repository: {
@@ -0,0 +1,34 @@
1
+ # TableResponsive
2
+
3
+ Story: @alexgorbatchev/shadcn/components/data-display/TableResponsive
4
+ Source: src/components/stories/data-display/TableResponsive.stories.tsx
5
+
6
+ [Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/TableResponsive.stories.tsx)
7
+
8
+ ## Public imports
9
+
10
+ ```tsx
11
+ import { Table } from "@alexgorbatchev/shadcn";
12
+ ```
13
+
14
+ ## Default component
15
+
16
+ ```tsx
17
+ Table
18
+ ```
19
+
20
+ ## Default render
21
+
22
+ ```tsx
23
+ () => <ResponsiveTablesExample />
24
+ ```
25
+
26
+ ## Examples
27
+
28
+ Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
29
+
30
+ ### ContainerBoundaries
31
+
32
+ ```tsx
33
+ {}
34
+ ```
@@ -14,7 +14,7 @@ import { Button, OptionSelect } from "@alexgorbatchev/shadcn";
14
14
  ## Supporting imports
15
15
 
16
16
  ```tsx
17
- import { useState } from "react";
17
+ import { useId, useState } from "react";
18
18
  ```
19
19
 
20
20
  ## Default component
@@ -63,6 +63,20 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
63
63
  }
64
64
  ```
65
65
 
66
+ ### DescribedTrigger
67
+
68
+ ```tsx
69
+ {
70
+ render: function DescribedTrigger(args) {
71
+ const descriptionId = useId();
72
+ return (<>
73
+ <OptionSelect {...args} aria-describedby={descriptionId}/>
74
+ <p id={descriptionId}>Choose the runtime used for this project.</p>
75
+ </>);
76
+ }
77
+ }
78
+ ```
79
+
66
80
  ### Controlled
67
81
 
68
82
  ```tsx
package/llms.txt CHANGED
@@ -349,6 +349,7 @@ Generated from the public package exports and Storybook sources.
349
349
  - [StatCard](./llms/components/data-display/StatCard.md)
350
350
  - [StatusTracker](./llms/components/data-display/StatusTracker.md)
351
351
  - [Table](./llms/components/data-display/Table.md)
352
+ - [TableResponsive](./llms/components/data-display/TableResponsive.md)
352
353
  - [Text](./llms/components/data-display/Text.md): Text renders body copy as a paragraph with semantic `size` (xs, sm, base, lg), `tone` (default, muted, faint, primary, success, warning, destructive), `weight`, and `align`. `truncate` keeps one line with an ellipsis; otherwise long words wrap. `tabular` aligns digits. Use `render={<span />}` for inline text, or another element such as `<li />` or `<time />`.
353
354
  - [VirtualDataGrid](./llms/components/data-display/VirtualDataGrid.md)
354
355
  - [VirtualTable](./llms/components/data-display/VirtualTable.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alexgorbatchev/shadcn",
3
- "version": "0.0.53",
3
+ "version": "0.0.54",
4
4
  "description": "Sharp, monospace React components with compact and comfortable densities.",
5
5
  "license": "MIT",
6
6
  "repository": {