@chassis-ui/react 0.3.0 → 0.4.1
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/alert.d.ts +1 -1
- package/dist/alert.js +1 -1
- package/dist/avatar.d.ts +1 -1
- package/dist/avatar.js +1 -1
- package/dist/badge.d.ts +1 -1
- package/dist/breadcrumb.js +1 -1
- package/dist/button.d.ts +1 -1
- package/dist/card.d.ts +1 -1
- package/dist/card.js +1 -1
- package/dist/checkbox.d.ts +2 -2
- package/dist/checkbox.js +1 -1
- package/dist/chip.d.ts +1 -1
- package/dist/chunks/{Button-Cptd4Yk7.d.ts → Button-BuZ_GOHS.d.ts} +2 -2
- package/dist/chunks/{Link-nrd0JWlO.d.ts → Link-CKymd2ru.d.ts} +2 -2
- package/dist/chunks/Link-DyZyAQFj.js +2 -0
- package/dist/chunks/Link-DyZyAQFj.js.map +1 -0
- package/dist/chunks/{MenuToggle-BdQtF7FV.js → MenuToggle-7RQ0dmtZ.js} +2 -2
- package/dist/chunks/{MenuToggle-BdQtF7FV.js.map → MenuToggle-7RQ0dmtZ.js.map} +1 -1
- package/dist/chunks/alert-3kTBfWFw.js +2 -0
- package/dist/chunks/{alert-BXI-_qlt.js.map → alert-3kTBfWFw.js.map} +1 -1
- package/dist/chunks/{avatar-S3dGy6Qc.js → avatar-MklqAKcz.js} +2 -2
- package/dist/chunks/{avatar-S3dGy6Qc.js.map → avatar-MklqAKcz.js.map} +1 -1
- package/dist/chunks/{breadcrumb-s6J9itez.js → breadcrumb-CHxTiZLt.js} +2 -2
- package/dist/chunks/{breadcrumb-s6J9itez.js.map → breadcrumb-CHxTiZLt.js.map} +1 -1
- package/dist/chunks/breakpoints-CGk8szzR.js +2 -0
- package/dist/chunks/breakpoints-CGk8szzR.js.map +1 -0
- package/dist/chunks/breakpoints-ECy4lKQT.d.ts +6 -0
- package/dist/chunks/card-CTP9K8xG.js +2 -0
- package/dist/chunks/card-CTP9K8xG.js.map +1 -0
- package/dist/chunks/{checkbox-ChACalAw.js → checkbox-ZyQn5Ku5.js} +2 -2
- package/dist/chunks/{checkbox-ChACalAw.js.map → checkbox-ZyQn5Ku5.js.map} +1 -1
- package/dist/chunks/colorClassNames-CEh5Yzfp.js +2 -0
- package/dist/chunks/colorClassNames-CEh5Yzfp.js.map +1 -0
- package/dist/chunks/datagrid-DOYxx0sF.js +3 -0
- package/dist/chunks/datagrid-DOYxx0sF.js.map +1 -0
- package/dist/chunks/flex-B52oLCCC.js +2 -0
- package/dist/chunks/flex-B52oLCCC.js.map +1 -0
- package/dist/chunks/grid-C7tO-ppc.js +2 -0
- package/dist/chunks/grid-C7tO-ppc.js.map +1 -0
- package/dist/chunks/{index-Bm2NpgND.d.ts → index-0jbACjYQ.d.ts} +2 -2
- package/dist/chunks/{index-D9PZHY_I.d.ts → index-B19ZH3fm.d.ts} +2 -2
- package/dist/chunks/{index-COsIPd8L.d.ts → index-B1kw0jzM.d.ts} +2 -2
- package/dist/chunks/{index-e7SJkI_m.d.ts → index-BLS1jhSJ.d.ts} +2 -2
- package/dist/chunks/{index-DjrEvKd-.d.ts → index-BMkbJVHg.d.ts} +2 -2
- package/dist/chunks/{index-t_x6jj7l.d.ts → index-BOx8v-oT.d.ts} +2 -2
- package/dist/chunks/index-BSLneLYu.d.ts +79 -0
- package/dist/chunks/{index-BnR7wjax.d.ts → index-BfEJYF4c.d.ts} +2 -2
- package/dist/chunks/{index-CRfm7W6C.d.ts → index-C9gzVqwX.d.ts} +2 -2
- package/dist/chunks/{index-DjXRq-n3.d.ts → index-CHQR8x8_.d.ts} +6 -12
- package/dist/chunks/{index-BTTeKpiE.d.ts → index-CIwzgZJi.d.ts} +2 -2
- package/dist/chunks/{index-I-H3VJ-L.d.ts → index-CYvVmTPR.d.ts} +4 -4
- package/dist/chunks/{index-qMq_-GY2.d.ts → index-CjT_4IZx.d.ts} +3 -3
- package/dist/chunks/index-CxjNw4ss.d.ts +216 -0
- package/dist/chunks/{index-DgHvXzVh.d.ts → index-DHcztR18.d.ts} +3 -3
- package/dist/chunks/{index-DXjbI7Yv.d.ts → index-DM01FX3a.d.ts} +3 -3
- package/dist/chunks/{index-CYgBmZ8w.d.ts → index-DP5xugE-.d.ts} +2 -2
- package/dist/chunks/{index-FKh7iFQE.d.ts → index-DPCwFiJL.d.ts} +2 -2
- package/dist/chunks/{index-DJr_ZK4b.d.ts → index-DQImhbhy.d.ts} +2 -2
- package/dist/chunks/{index-CJXKl97l.d.ts → index-DtvHH_Mb.d.ts} +2 -2
- package/dist/chunks/{index-CJzKu7QI.d.ts → index-Dzga1f4w.d.ts} +3 -3
- package/dist/chunks/{index-CKx1KHED.d.ts → index-NGgDkhyn.d.ts} +18 -25
- package/dist/chunks/{index-Dfy1YW5j.d.ts → index-U27Ar174.d.ts} +2 -2
- package/dist/chunks/{index-CsMIgBsd.d.ts → index-YJ9QdBuq.d.ts} +9 -10
- package/dist/chunks/{index-Dh5CaHTP.d.ts → index-aRdgpeRb.d.ts} +2 -2
- package/dist/chunks/{index-BO9jLOIb.d.ts → index-lSPcxiii.d.ts} +2 -2
- package/dist/chunks/{index-DceCODH9.d.ts → index-x0vZRyoU.d.ts} +2 -2
- package/dist/chunks/{list-BQCkwWjF.js → list-07e2a1Ym.js} +2 -2
- package/dist/chunks/{list-BQCkwWjF.js.map → list-07e2a1Ym.js.map} +1 -1
- package/dist/chunks/{menu-98EAD9nj.js → menu-Upf6P-2P.js} +2 -2
- package/dist/chunks/{menu-98EAD9nj.js.map → menu-Upf6P-2P.js.map} +1 -1
- package/dist/chunks/{nav-TiZuTHC6.js → nav-DI6oEULI.js} +2 -2
- package/dist/chunks/{nav-TiZuTHC6.js.map → nav-DI6oEULI.js.map} +1 -1
- package/dist/chunks/{nav-overflow-Ay5mM5Gc.js → nav-overflow-DlLer6EK.js} +2 -2
- package/dist/chunks/{nav-overflow-Ay5mM5Gc.js.map → nav-overflow-DlLer6EK.js.map} +1 -1
- package/dist/chunks/{notification-Ds24wnPq.js → notification-Dbci5Ka3.js} +2 -2
- package/dist/chunks/{notification-Ds24wnPq.js.map → notification-Dbci5Ka3.js.map} +1 -1
- package/dist/chunks/pagination-BREQp-ZC.js +2 -0
- package/dist/chunks/{pagination-BkOquk-x.js.map → pagination-BREQp-ZC.js.map} +1 -1
- package/dist/chunks/placeholder-DhNpUJqv.js +2 -0
- package/dist/chunks/placeholder-DhNpUJqv.js.map +1 -0
- package/dist/chunks/progress-BqgWezdG.js +2 -0
- package/dist/chunks/progress-BqgWezdG.js.map +1 -0
- package/dist/chunks/{radio-DOFYCfJi.js → radio-B6gJdtoN.js} +2 -2
- package/dist/chunks/{radio-DOFYCfJi.js.map → radio-B6gJdtoN.js.map} +1 -1
- package/dist/chunks/{renderFormCheck-DZh_5Df8.d.ts → renderFormCheck-nKgpa_a3.d.ts} +2 -2
- package/dist/chunks/skeleton-Bjv9gGd3.js +2 -0
- package/dist/chunks/skeleton-Bjv9gGd3.js.map +1 -0
- package/dist/chunks/spacingClassName-DVhk8m3P.js.map +1 -1
- package/dist/chunks/spinner-DBuvQvMR.js +2 -0
- package/dist/chunks/spinner-DBuvQvMR.js.map +1 -0
- package/dist/chunks/stack-DK5F53VT.js +2 -0
- package/dist/chunks/stack-DK5F53VT.js.map +1 -0
- package/dist/chunks/static-table-uu297Liz.js +2 -0
- package/dist/chunks/{static-table-D0M4oc_t.js.map → static-table-uu297Liz.js.map} +1 -1
- package/dist/chunks/{table-Cy6uEuEP.js → table-DPLOygg0.js} +2 -2
- package/dist/chunks/{table-Cy6uEuEP.js.map → table-DPLOygg0.js.map} +1 -1
- package/dist/chunks/tableClassName-DleBjOj2.js +2 -0
- package/dist/chunks/tableClassName-DleBjOj2.js.map +1 -0
- package/dist/chunks/{types-CS_40Txv.d.ts → types-D6FM7bYR.d.ts} +16 -2
- package/dist/close-button.d.ts +1 -1
- package/dist/datagrid.d.ts +1 -1
- package/dist/datagrid.js +1 -1
- package/dist/flex.d.ts +1 -1
- package/dist/flex.js +1 -1
- package/dist/grid.d.ts +2 -2
- package/dist/grid.js +1 -1
- package/dist/index.d.ts +32 -32
- package/dist/index.js +1 -1
- package/dist/link.d.ts +1 -1
- package/dist/link.js +1 -1
- package/dist/list.d.ts +1 -1
- package/dist/list.js +1 -1
- package/dist/menu.d.ts +1 -1
- package/dist/menu.js +1 -1
- package/dist/nav-overflow.d.ts +1 -1
- package/dist/nav-overflow.js +1 -1
- package/dist/nav.d.ts +1 -1
- package/dist/nav.js +1 -1
- package/dist/navbar.d.ts +1 -1
- package/dist/notification.d.ts +1 -1
- package/dist/notification.js +1 -1
- package/dist/pagination.js +1 -1
- package/dist/placeholder.d.ts +1 -1
- package/dist/placeholder.js +1 -1
- package/dist/progress.d.ts +1 -1
- package/dist/progress.js +1 -1
- package/dist/radio.d.ts +1 -1
- package/dist/radio.js +1 -1
- package/dist/skeleton.d.ts +1 -1
- package/dist/skeleton.js +1 -1
- package/dist/spinner.d.ts +1 -1
- package/dist/spinner.js +1 -1
- package/dist/stack.d.ts +1 -1
- package/dist/stack.js +1 -1
- package/dist/static-table.d.ts +1 -1
- package/dist/static-table.js +1 -1
- package/dist/stepper.d.ts +1 -1
- package/dist/switch.d.ts +1 -1
- package/dist/table.d.ts +1 -1
- package/dist/table.js +1 -1
- package/dist/toast.d.ts +1 -1
- package/package.json +4 -4
- package/dist/chunks/Link-CZsWCnQb.js +0 -2
- package/dist/chunks/Link-CZsWCnQb.js.map +0 -1
- package/dist/chunks/alert-BXI-_qlt.js +0 -2
- package/dist/chunks/breakpoints-CJ-498B7.d.ts +0 -7
- package/dist/chunks/breakpoints-o_2Ev7ir.js +0 -2
- package/dist/chunks/breakpoints-o_2Ev7ir.js.map +0 -1
- package/dist/chunks/card-YXn3bj_d.js +0 -2
- package/dist/chunks/card-YXn3bj_d.js.map +0 -1
- package/dist/chunks/datagrid-CH3Cy-q7.js +0 -3
- package/dist/chunks/datagrid-CH3Cy-q7.js.map +0 -1
- package/dist/chunks/flex-CmlJbKVj.js +0 -2
- package/dist/chunks/flex-CmlJbKVj.js.map +0 -1
- package/dist/chunks/grid-DK_vxz-4.js +0 -2
- package/dist/chunks/grid-DK_vxz-4.js.map +0 -1
- package/dist/chunks/index-CVUMS0x7.d.ts +0 -74
- package/dist/chunks/index-RHJhkSY-.d.ts +0 -273
- package/dist/chunks/pagination-BkOquk-x.js +0 -2
- package/dist/chunks/placeholder-BCr83sUn.js +0 -2
- package/dist/chunks/placeholder-BCr83sUn.js.map +0 -1
- package/dist/chunks/progress-zWkTltor.js +0 -2
- package/dist/chunks/progress-zWkTltor.js.map +0 -1
- package/dist/chunks/skeleton-BrD2JwNx.js +0 -2
- package/dist/chunks/skeleton-BrD2JwNx.js.map +0 -1
- package/dist/chunks/spinner-DblhvrHL.js +0 -2
- package/dist/chunks/spinner-DblhvrHL.js.map +0 -1
- package/dist/chunks/stack-CsMiQbpq.js +0 -2
- package/dist/chunks/stack-CsMiQbpq.js.map +0 -1
- package/dist/chunks/static-table-D0M4oc_t.js +0 -2
- package/dist/chunks/tableClassName-CZA2Bse8.js +0 -2
- package/dist/chunks/tableClassName-CZA2Bse8.js.map +0 -1
|
@@ -1,273 +0,0 @@
|
|
|
1
|
-
import "./focus-ring-SR_LwaN7.js";
|
|
2
|
-
import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
|
|
3
|
-
import { s as Spacing, t as Breakpoint } from "./types-CS_40Txv.js";
|
|
4
|
-
import { n as Span } from "./breakpoints-CJ-498B7.js";
|
|
5
|
-
import React, { ElementType, HTMLAttributes, ReactElement } from "react";
|
|
6
|
-
//#region src/components/grid/Col.d.ts
|
|
7
|
-
interface ColLayout {
|
|
8
|
-
/**
|
|
9
|
-
* Columns (of 12) this Col spans, or `'auto'`/`true` for a natural-width column.
|
|
10
|
-
*
|
|
11
|
-
* @type { 'auto' | number | string | boolean }
|
|
12
|
-
*/
|
|
13
|
-
span?: Span;
|
|
14
|
-
/**
|
|
15
|
-
* Columns to offset the start of this Col by.
|
|
16
|
-
*/
|
|
17
|
-
offset?: number | string;
|
|
18
|
-
/**
|
|
19
|
-
* Visual order relative to sibling columns.
|
|
20
|
-
*
|
|
21
|
-
* @type { 'first' | 'last' | number | string }
|
|
22
|
-
*/
|
|
23
|
-
order?: 'first' | 'last' | number | string;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* @deprecated Use `GridItemProps`: `Col` is deprecated with the flexbox grid of `@chassis-ui/css`.
|
|
27
|
-
*/
|
|
28
|
-
interface ColProps extends HTMLAttributes<HTMLDivElement>, ColLayout {
|
|
29
|
-
/**
|
|
30
|
-
* A string of all className you want applied to the base component.
|
|
31
|
-
*/
|
|
32
|
-
className?: string;
|
|
33
|
-
/**
|
|
34
|
-
* Overrides `span`/`offset`/`order` at a breakpoint and up.
|
|
35
|
-
*
|
|
36
|
-
* @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: 'auto' | number | string | boolean, offset?: number | string, order?: 'first' | 'last' | number | string }>> }
|
|
37
|
-
*/
|
|
38
|
-
responsive?: Partial<Record<Breakpoint, ColLayout>>;
|
|
39
|
-
}
|
|
40
|
-
/**
|
|
41
|
-
* @deprecated Use `GridItem` in a `Grid`, with `start` for `offset`. A column as wide as its
|
|
42
|
-
* content (`span="auto"`) has no grid equivalent: use `Flex`. `@chassis-ui/css` deprecates its
|
|
43
|
-
* flexbox grid (`.row`, `.col-*`) in 0.6 and removes it in 0.7, and `Col` goes with it.
|
|
44
|
-
*/
|
|
45
|
-
declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;
|
|
46
|
-
//#endregion
|
|
47
|
-
//#region src/components/grid/Container.d.ts
|
|
48
|
-
type ContainerOwnProps<C extends ElementType> = {
|
|
49
|
-
/**
|
|
50
|
-
* A string of all className you want applied to the base component.
|
|
51
|
-
*/
|
|
52
|
-
className?: string;
|
|
53
|
-
/**
|
|
54
|
-
* Component used for the root node. Either a string to use a HTML element or a component.
|
|
55
|
-
*/
|
|
56
|
-
component?: C;
|
|
57
|
-
/**
|
|
58
|
-
* Set container 100% wide until the given breakpoint, after which it scales up with `max-width`
|
|
59
|
-
* at every larger breakpoint.
|
|
60
|
-
*
|
|
61
|
-
* @type Breakpoint
|
|
62
|
-
*/
|
|
63
|
-
fluidUntil?: Breakpoint;
|
|
64
|
-
/**
|
|
65
|
-
* Set container 100% wide, spanning the entire width of the viewport.
|
|
66
|
-
*/
|
|
67
|
-
fluid?: boolean;
|
|
68
|
-
};
|
|
69
|
-
type ContainerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ContainerOwnProps<C>>;
|
|
70
|
-
type ContainerComponent = (<C extends ElementType = 'div'>(props: ContainerProps<C> & {
|
|
71
|
-
ref?: PolymorphicRef<C>;
|
|
72
|
-
}) => ReactElement | null) & {
|
|
73
|
-
displayName?: string;
|
|
74
|
-
};
|
|
75
|
-
declare const Container: ContainerComponent;
|
|
76
|
-
//#endregion
|
|
77
|
-
//#region src/components/grid/Grid.d.ts
|
|
78
|
-
interface GridLayout {
|
|
79
|
-
/**
|
|
80
|
-
* Number of columns in the grid template from this breakpoint up, mapped to the
|
|
81
|
-
* `grid-cols-{n}` class (1 to 12). Has no effect when `fill` is set.
|
|
82
|
-
*/
|
|
83
|
-
columns?: number;
|
|
84
|
-
/**
|
|
85
|
-
* Gap between grid items from this breakpoint up, mapped to the `gap-{token}` class.
|
|
86
|
-
*/
|
|
87
|
-
gap?: Spacing;
|
|
88
|
-
}
|
|
89
|
-
type GridOwnProps<C extends ElementType> = {
|
|
90
|
-
/**
|
|
91
|
-
* A string of all className you want applied to the base component.
|
|
92
|
-
*/
|
|
93
|
-
className?: string;
|
|
94
|
-
/**
|
|
95
|
-
* Component used for the root node. Either a string to use a HTML element or a component.
|
|
96
|
-
*/
|
|
97
|
-
component?: C;
|
|
98
|
-
/**
|
|
99
|
-
* Number of columns in the grid template (the column count of `@chassis-ui/css` when omitted,
|
|
100
|
-
* `12` by default). A count from 1 to 12 is mapped to the `grid-cols-{n}` class, which applies
|
|
101
|
-
* to this grid alone. Any other count has no class and is set via the `--cx-grid-columns`
|
|
102
|
-
* custom property, which a grid nested in this one inherits: give that grid `columns` of its
|
|
103
|
-
* own. Has no effect when `fill` is set.
|
|
104
|
-
*/
|
|
105
|
-
columns?: number;
|
|
106
|
-
/**
|
|
107
|
-
* Number of rows in the grid template, set via the `--cx-grid-rows` custom property (defaults
|
|
108
|
-
* to `1` in CSS when omitted). Has no effect when `fill` is set.
|
|
109
|
-
*/
|
|
110
|
-
rows?: number;
|
|
111
|
-
/**
|
|
112
|
-
* Gap between grid items: a `Spacing` token (mapped to the `gap-{token}` class) or any raw CSS
|
|
113
|
-
* `gap` value, including a `"{row} {column}"` pair (set via the `--cx-grid-gap` custom
|
|
114
|
-
* property). The gutter of the current breakpoint when omitted.
|
|
115
|
-
*
|
|
116
|
-
* @type { Spacing | string }
|
|
117
|
-
*/
|
|
118
|
-
gap?: Spacing | (string & {});
|
|
119
|
-
/**
|
|
120
|
-
* Overrides `columns`/`gap` at a breakpoint and up, with the `grid-cols-{n}` and `gap-{token}`
|
|
121
|
-
* classes.
|
|
122
|
-
*
|
|
123
|
-
* @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { columns?: number, gap?: Spacing }>> }
|
|
124
|
-
*/
|
|
125
|
-
responsive?: Partial<Record<Breakpoint, GridLayout>>;
|
|
126
|
-
/**
|
|
127
|
-
* Renders `.grid-fill` instead of `.grid` — columns expand equally to fill the available
|
|
128
|
-
* width, with the column count determined by the number of children rather than `columns`.
|
|
129
|
-
*/
|
|
130
|
-
fill?: boolean;
|
|
131
|
-
/**
|
|
132
|
-
* Minimum column width of a `fill` grid, set via the `--cx-grid-min` custom property: any CSS
|
|
133
|
-
* length, e.g. `"12rem"`. Children wrap to a new row when they would get narrower. Only
|
|
134
|
-
* relevant when `fill` is set.
|
|
135
|
-
*/
|
|
136
|
-
min?: string;
|
|
137
|
-
};
|
|
138
|
-
type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps<C>>;
|
|
139
|
-
type GridComponent = (<C extends ElementType = 'div'>(props: GridProps<C> & {
|
|
140
|
-
ref?: PolymorphicRef<C>;
|
|
141
|
-
}) => ReactElement | null) & {
|
|
142
|
-
displayName?: string;
|
|
143
|
-
};
|
|
144
|
-
declare const Grid: GridComponent;
|
|
145
|
-
//#endregion
|
|
146
|
-
//#region src/components/grid/GridItem.d.ts
|
|
147
|
-
interface GridItemLayout {
|
|
148
|
-
/**
|
|
149
|
-
* Number of grid column tracks (of the parent `<Grid>`'s `columns`) this item spans, mapped to
|
|
150
|
-
* the `col-span-{n}` class, or `'full'` for every track of the row (`col-span-full`). An item
|
|
151
|
-
* with no `span` is one track wide.
|
|
152
|
-
*
|
|
153
|
-
* @type { number | 'full' }
|
|
154
|
-
*/
|
|
155
|
-
span?: number | 'full';
|
|
156
|
-
/**
|
|
157
|
-
* Grid column line to start this item at, mapped to the `col-start-{n}` class. `'auto'`
|
|
158
|
-
* (`col-start-auto`) returns the item to the flow, to undo a start line at a wider breakpoint.
|
|
159
|
-
*
|
|
160
|
-
* @type { number | 'auto' }
|
|
161
|
-
*/
|
|
162
|
-
start?: number | 'auto';
|
|
163
|
-
/**
|
|
164
|
-
* Number of grid row tracks this item spans, mapped to the `row-span-{n}` class.
|
|
165
|
-
*/
|
|
166
|
-
rowSpan?: number;
|
|
167
|
-
/**
|
|
168
|
-
* Grid row line to start this item at, mapped to the `row-start-{n}` class, or `'auto'`
|
|
169
|
-
* (`row-start-auto`) to return it to the flow.
|
|
170
|
-
*
|
|
171
|
-
* @type { number | 'auto' }
|
|
172
|
-
*/
|
|
173
|
-
rowStart?: number | 'auto';
|
|
174
|
-
}
|
|
175
|
-
type GridItemOwnProps<C extends ElementType> = GridItemLayout & {
|
|
176
|
-
/**
|
|
177
|
-
* A string of all className you want applied to the base component.
|
|
178
|
-
*/
|
|
179
|
-
className?: string;
|
|
180
|
-
/**
|
|
181
|
-
* Component used for the root node. Either a string to use a HTML element or a component.
|
|
182
|
-
*/
|
|
183
|
-
component?: C;
|
|
184
|
-
/**
|
|
185
|
-
* Overrides `span`/`start`/`rowSpan`/`rowStart` at a breakpoint and up.
|
|
186
|
-
*
|
|
187
|
-
* @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: number | 'full', start?: number | 'auto', rowSpan?: number, rowStart?: number | 'auto' }>> }
|
|
188
|
-
*/
|
|
189
|
-
responsive?: Partial<Record<Breakpoint, GridItemLayout>>;
|
|
190
|
-
/**
|
|
191
|
-
* Turns this item into a nested subgrid: adds `.grid`/`.grid-cols-subgrid` alongside its
|
|
192
|
-
* `col-span-{n}`/`col-start-{n}` placement classes, so its own children inherit the parent
|
|
193
|
-
* `<Grid>`'s column tracks instead of defining new ones. Combine with `span` — a subgrid
|
|
194
|
-
* item must itself be a grid item of the parent for `grid-template-columns: subgrid` to take
|
|
195
|
-
* effect, which is why `subgrid` lives on `<GridItem>` (the element actually placed as a grid
|
|
196
|
-
* item) rather than on a `<Grid>` nested inside it.
|
|
197
|
-
*/
|
|
198
|
-
subgrid?: boolean;
|
|
199
|
-
/**
|
|
200
|
-
* Number of rows in the subgrid's own row template, set via the `--cx-grid-rows` custom
|
|
201
|
-
* property (defaults to `1` in CSS when omitted). Only relevant when `subgrid` is set —
|
|
202
|
-
* subgrid only inherits the parent's column tracks, not its rows.
|
|
203
|
-
*/
|
|
204
|
-
rows?: number;
|
|
205
|
-
/**
|
|
206
|
-
* Gap between the subgrid's children: a `Spacing` token (mapped to the `gap-{token}` class) or
|
|
207
|
-
* any raw CSS `gap` value (set via the `--cx-grid-gap` custom property). Only relevant when
|
|
208
|
-
* `subgrid` is set. A subgrid has the gap of its own: when the parent `<Grid>` takes a `gap`
|
|
209
|
-
* token, give the subgrid the same one, or its children are narrower than the parent's tracks.
|
|
210
|
-
*
|
|
211
|
-
* @type { Spacing | string }
|
|
212
|
-
*/
|
|
213
|
-
gap?: Spacing | (string & {});
|
|
214
|
-
};
|
|
215
|
-
type GridItemProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridItemOwnProps<C>>;
|
|
216
|
-
type GridItemComponent = (<C extends ElementType = 'div'>(props: GridItemProps<C> & {
|
|
217
|
-
ref?: PolymorphicRef<C>;
|
|
218
|
-
}) => ReactElement | null) & {
|
|
219
|
-
displayName?: string;
|
|
220
|
-
};
|
|
221
|
-
declare const GridItem: GridItemComponent;
|
|
222
|
-
//#endregion
|
|
223
|
-
//#region src/components/grid/Row.d.ts
|
|
224
|
-
interface RowLayout {
|
|
225
|
-
/**
|
|
226
|
-
* Equal-width columns per row, or `'auto'` for content-sized columns.
|
|
227
|
-
*
|
|
228
|
-
* @type { 'auto' | number | string }
|
|
229
|
-
*/
|
|
230
|
-
cols?: 'auto' | number | string;
|
|
231
|
-
/**
|
|
232
|
-
* Gutter width on both axes.
|
|
233
|
-
*
|
|
234
|
-
* @type { Spacing | 0 }
|
|
235
|
-
*/
|
|
236
|
-
gutter?: Spacing | 0;
|
|
237
|
-
/**
|
|
238
|
-
* Horizontal gutter width.
|
|
239
|
-
*
|
|
240
|
-
* @type { Spacing | 0 }
|
|
241
|
-
*/
|
|
242
|
-
gutterX?: Spacing | 0;
|
|
243
|
-
/**
|
|
244
|
-
* Vertical gutter width.
|
|
245
|
-
*
|
|
246
|
-
* @type { Spacing | 0 }
|
|
247
|
-
*/
|
|
248
|
-
gutterY?: Spacing | 0;
|
|
249
|
-
}
|
|
250
|
-
/**
|
|
251
|
-
* @deprecated Use `GridProps`: `Row` is deprecated with the flexbox grid of `@chassis-ui/css`.
|
|
252
|
-
*/
|
|
253
|
-
interface RowProps extends HTMLAttributes<HTMLDivElement>, RowLayout {
|
|
254
|
-
/**
|
|
255
|
-
* A string of all className you want applied to the base component.
|
|
256
|
-
*/
|
|
257
|
-
className?: string;
|
|
258
|
-
/**
|
|
259
|
-
* Overrides `cols`/`gutter`/`gutterX`/`gutterY` at a breakpoint and up.
|
|
260
|
-
*
|
|
261
|
-
* @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { cols?: 'auto' | number | string, gutter?: Spacing | 0, gutterX?: Spacing | 0, gutterY?: Spacing | 0 }>> }
|
|
262
|
-
*/
|
|
263
|
-
responsive?: Partial<Record<Breakpoint, RowLayout>>;
|
|
264
|
-
}
|
|
265
|
-
/**
|
|
266
|
-
* @deprecated Use `Grid`, with `columns` for `cols` and `gap` for `gutter`. `@chassis-ui/css`
|
|
267
|
-
* deprecates its flexbox grid (`.row`, `.col-*`) in 0.6 and removes it in 0.7, and `Row` goes
|
|
268
|
-
* with it.
|
|
269
|
-
*/
|
|
270
|
-
declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
|
|
271
|
-
//#endregion
|
|
272
|
-
export { GridItemProps as a, GridProps as c, Col as d, ColProps as f, GridItemLayout as i, Container as l, RowProps as n, Grid as o, GridItem as r, GridLayout as s, Row as t, ContainerProps as u };
|
|
273
|
-
//# sourceMappingURL=index-RHJhkSY-.d.ts.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import"./focus-ring-SR_LwaN7.js";import{d as e,g as t,p as n}from"./slot-CNhFZdHF.js";import{t as r}from"./polymorphic-BhGNZQja.js";import{t as i}from"./useButtonSemantics-CILM_lhi.js";import{t as a}from"./focusRedirect-BrvK3U_o.js";import{t as o}from"./iconSlot-BNu2MrFI.js";import s,{forwardRef as c,useEffect as l,useRef as u}from"react";import d from"classnames";import{mergeProps as f}from"react-aria";function p({prevDisabled:e,nextDisabled:t,onPrev:n,onNext:r}){let i=u(null),o=u(null),s=u(null);return l(()=>{let n=s.current;s.current=null,n&&(n.from===`prev`&&e?a(o.current,n.viaPointer):n.from===`next`&&t&&a(i.current,n.viaPointer))}),{prevRef:i,nextRef:o,handlePrevClick:e=>{s.current={from:`prev`,viaPointer:e.detail!==0},n()},handleNextClick:e=>{s.current={from:`next`,viaPointer:e.detail!==0},r()}}}function m({active:r,children:a,className:o,component:c,disabled:l,href:u,onClick:p,...m},h){let g=d(`pagination-item`,{active:r,disabled:l},o),_=n(c,u,`button`),v=t(_,u,m),y=e(v,u,`PaginationItem`),b=_,x=_,S=e=>{if(v===`anchor`&&l){e.preventDefault();return}p?.(e)},C=v!==`button`&&v!==`anchor`&&!!p,{buttonProps:w,forkedRef:T}=i(h,{disabled:l,onClick:p}),E=r?{"aria-current":`page`}:{};return s.createElement(`li`,{className:g},v===`button`?s.createElement(b,{...m,className:`pagination-link`,type:`button`,disabled:l,onClick:S,...E,ref:h},a):v===`anchor`?s.createElement(x,{...m,className:`pagination-link`,...y,onClick:S,...l&&{"aria-disabled":!0,tabIndex:-1},...E,ref:h},a):s.createElement(_,{className:`pagination-link`,...f(m,C?w:{}),...!C&&{onClick:S},...y,...E,ref:C?T:h},a))}const h=r(m,`PaginationItem`);function g(e,t,n){let r=Math.max(1,n);if(t<=r)return Array.from({length:t},(e,t)=>t+1);let i=Math.floor(r/2),a=Math.max(1,e-i),o=Math.min(t,a+r-1);o-a<r-1&&(a=Math.max(1,o-r+1));let s=[];a>1&&(s.push(1),a>2&&s.push(`...`));for(let e=a;e<=o;e++)s.push(e);return o<t&&(o<t-1&&s.push(`...`),s.push(t)),s}const _=c(({activePage:e=1,align:t,"aria-label":n=`Pagination`,children:r,className:i,maxVisiblePages:a=5,nextIcon:c,nextLabel:l=`Next`,onActivePageChange:u,pages:f,previousIcon:m,previousLabel:_=`Previous`,showPageNumbers:v=!0,showPrevNext:y=!0,size:b,...x},S)=>{let C=d(`pagination`,b,{[`justify-content-${t}`]:t},i),w=f?Math.min(Math.max(e,1),f):e,T=f?w<=1:!1,E=f?w>=f:!1,{prevRef:D,nextRef:O,handlePrevClick:k,handleNextClick:A}=p({prevDisabled:T,nextDisabled:E,onPrev:()=>u&&u(w-1),onNext:()=>u&&u(w+1)}),j=f?s.createElement(s.Fragment,null,y&&s.createElement(h,{ref:D,disabled:T,onClick:k,"aria-label":_},s.createElement(o,{icon:`previous`,override:m,className:`directional-icon`})),v&&g(w,f,a).map((e,t)=>e===`...`?s.createElement(h,{key:`ellipsis-${t}`,disabled:!0,component:`span`,"aria-hidden":`true`},`…`):s.createElement(h,{key:e,active:e===w,onClick:()=>u&&u(e)},e)),y&&s.createElement(h,{ref:O,disabled:E,onClick:A,"aria-label":l},s.createElement(o,{icon:`next`,override:c,className:`directional-icon`}))):null;return s.createElement(`nav`,{"aria-label":n,ref:S,...x},s.createElement(`ul`,{className:C},j??r))});_.displayName=`Pagination`;export{h as n,p as r,_ as t};
|
|
2
|
-
//# sourceMappingURL=pagination-BkOquk-x.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import"./focus-ring-SR_LwaN7.js";import{a as e}from"./slot-CNhFZdHF.js";import{t}from"./polymorphic-BhGNZQja.js";import n from"react";import r from"classnames";const i=e=>[e===`start`||e===`end`?`float-${e}`:null,e===`center`?`d-block mx-auto`:null];function a({align:t,alt:a,className:o,color:s,component:c,fluid:l,height:u,rounded:d,src:f,text:p,thumbnail:m,title:h=`Placeholder`,variant:g,width:_,...v},y){let b=h!==!1,x=p===!1?void 0:p??(_!==void 0&&u!==void 0?`${_}x${u}`:void 0),S=x!==void 0,C=[b&&h,S&&x].filter(Boolean).join(`: `)||void 0;if(f||e(c)){let e=c??`img`,s=r({image:l||m,fluid:l,rounded:d,thumbnail:m},i(t),o);return n.createElement(e,{src:f,width:_,height:u,alt:a??C??``,className:s,...v,ref:y})}let w=r(`image`,{context:!!(s||g)},s,g||`bg-evident`,`fg-subtle`,o);return n.createElement(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:_,height:u,"aria-label":C,"aria-hidden":!C||void 0,className:w,preserveAspectRatio:`xMidYMid slice`,role:C?`img`:void 0,...v,ref:y},b&&n.createElement(`title`,null,h),S&&n.createElement(`text`,{dy:`.3em`,fill:`currentColor`,textAnchor:`middle`,x:`50%`,y:`50%`},x))}const o=t(a,`Placeholder`);export{o as t};
|
|
2
|
-
//# sourceMappingURL=placeholder-BCr83sUn.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"placeholder-BCr83sUn.js","names":[],"sources":["../../src/components/placeholder/Placeholder.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor, ContextStyle } from '../../types'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { isSlot } from '../../utils/slot'\n\ntype PlaceholderAlign = 'start' | 'center' | 'end'\n\ntype PlaceholderOwnProps<C extends ElementType> = {\n /**\n * Set the horizontal alignment. Only applies when `src` is set.\n */\n align?: PlaceholderAlign\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the generated placeholder graphic to one of Chassis context colors. Has no\n * effect when `src` is set.\n */\n color?: ContextColor\n /**\n * Sets the variant of the generated placeholder graphic to one of Chassis context styles. Has no\n * effect when `src` is set.\n */\n variant?: Exclude<ContextStyle, 'basic' | 'outline'>\n /**\n * Component used for the root node when `src` is set. Either a string to use an HTML element\n * or a component — e.g. a framework's own `Image` component. Its own props (`src`, `fill`,\n * `priority`, etc.) are type-checked at the call site once passed here. With `asChild`, the\n * child element is the image and carries its own `src`.\n */\n component?: C\n /**\n * Make the image responsive, so it never grows larger than its parent. Only applies when `src`\n * is set.\n */\n fluid?: boolean\n /**\n * Placeholder height.\n */\n height?: number | string\n /**\n * Give the image a rounded border-radius. Only applies when `src` is set.\n */\n rounded?: boolean\n /**\n * Renders a real image instead of the generated placeholder graphic, e.g. a default asset or a\n * `placehold.co` URL.\n */\n src?: string\n /**\n * Text shown in the generated placeholder graphic. Defaults to `{width}x{height}`. Pass `false`\n * to hide it. Has no effect when `src` is set.\n */\n text?: string | false\n /**\n * Give the image a thumbnail appearance (padding, background, border, box-shadow). Only\n * applies when `src` is set.\n */\n thumbnail?: boolean\n /**\n * Accessible title for the generated placeholder graphic, rendered as an SVG `<title>`. Pass\n * `false` to hide it. Has no effect when `src` is set.\n *\n * @default 'Placeholder'\n */\n title?: string | false\n /**\n * Placeholder width.\n */\n width?: number | string\n}\n\nexport type PlaceholderProps<C extends ElementType = 'img'> = PolymorphicComponentProps<\n C,\n PlaceholderOwnProps<C>\n>\n\ntype PlaceholderComponent = (<C extends ElementType = 'img'>(\n props: PlaceholderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nconst alignClassNames = (align: PlaceholderAlign | undefined) => [\n align === 'start' || align === 'end' ? `float-${align}` : null,\n align === 'center' ? 'd-block mx-auto' : null\n]\n\nfunction PlaceholderRender<C extends ElementType = 'img'>(\n {\n align,\n alt,\n className,\n color,\n component,\n fluid,\n height,\n rounded,\n src,\n text,\n thumbnail,\n title = 'Placeholder',\n variant,\n width,\n ...rest\n }: PlaceholderProps<C>,\n ref: PolymorphicRef<C>\n) {\n const showTitle = title !== false\n const displayText =\n text === false\n ? undefined\n : (text ?? (width !== undefined && height !== undefined ? `${width}x${height}` : undefined))\n const showText = displayText !== undefined\n const label =\n [showTitle && title, showText && displayText].filter(Boolean).join(': ') || undefined\n\n // Under `asChild` the caller's element is the image and holds the `src`, so there is none here\n // to choose the branch by.\n if (src || isSlot(component)) {\n const Component = component ?? 'img'\n const _className = classNames(\n { image: fluid || thumbnail, fluid, rounded, thumbnail },\n alignClassNames(align),\n className\n )\n\n return (\n <Component\n src={src}\n width={width}\n height={height}\n alt={alt ?? label ?? ''}\n className={_className}\n {...rest}\n ref={ref}\n />\n )\n }\n\n const _className = classNames(\n 'image',\n { context: Boolean(color || variant) },\n color,\n variant ? variant : 'bg-evident',\n 'fg-subtle',\n className\n )\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={width}\n height={height}\n aria-label={label}\n aria-hidden={label ? undefined : true}\n className={_className}\n preserveAspectRatio=\"xMidYMid slice\"\n role={label ? 'img' : undefined}\n {...rest}\n ref={ref as PolymorphicRef<'svg'>}\n >\n {showTitle && <title>{title}</title>}\n {showText && (\n <text dy=\".3em\" fill=\"currentColor\" textAnchor=\"middle\" x=\"50%\" y=\"50%\">\n {displayText}\n </text>\n )}\n </svg>\n )\n}\n\nexport const Placeholder = createPolymorphicComponent<PlaceholderComponent>(\n PlaceholderRender as ForwardRefRenderFunction<Element, PlaceholderProps<ElementType>>,\n 'Placeholder'\n)\n"],"mappings":"gKAyFA,MAAM,EAAmB,GAAwC,CAC/D,IAAU,SAAW,IAAU,MAAQ,SAAS,IAAU,KAC1D,IAAU,SAAW,kBAAoB,IAC3C,EAEA,SAAS,EACP,CACE,QACA,MACA,YACA,QACA,YACA,QACA,SACA,UACA,MACA,OACA,YACA,QAAQ,cACR,UACA,QACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,IAAU,GACtB,EACJ,IAAS,GACL,IAAA,GACC,IAAS,IAAU,IAAA,IAAa,IAAW,IAAA,GAAY,GAAG,EAAM,GAAG,IAAW,IAAA,IAC/E,EAAW,IAAgB,IAAA,GAC3B,EACJ,CAAC,GAAa,EAAO,GAAY,CAAW,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,IAAI,GAAK,IAAA,GAI9E,GAAI,GAAO,EAAO,CAAS,EAAG,CAC5B,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,CAAE,MAAO,GAAS,EAAW,QAAO,UAAS,WAAU,EACvD,EAAgB,CAAK,EACrB,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CACO,MACE,QACC,SACR,IAAK,GAAO,GAAS,GACrB,UAAW,EACX,GAAI,EACC,KACN,CAAA,CAEL,CAEA,IAAM,EAAa,EACjB,QACA,CAAE,QAAS,GAAQ,GAAS,EAAS,EACrC,EACA,GAAoB,aACpB,YACA,CACF,EAEA,OACE,EAAA,cAAC,MAAD,CACE,MAAM,6BACC,QACC,SACR,aAAY,EACZ,cAAa,IAAQ,IAAA,GACrB,UAAW,EACX,oBAAoB,iBACpB,KAAM,EAAQ,MAAQ,IAAA,GACtB,GAAI,EACC,KAQF,EANF,GAAa,EAAA,cAAC,QAAA,KAAO,CAAa,EAClC,GACC,EAAA,cAAC,OAAD,CAAM,GAAG,OAAO,KAAK,eAAe,WAAW,SAAS,EAAE,MAAM,EAAE,KAE5D,EADH,CACG,CAEL,CAET,CAEA,MAAa,EAAc,EACzB,EACA,aACF"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import t,{useId as n}from"react";import r from"classnames";function i({children:e,animated:n,className:i,color:a,component:o,striped:s,style:c,value:l=0,...u},d){let f=o??`div`,p=Math.min(100,Math.max(0,l)),m=r(`progress-bar`,a&&`bg-${a} fg-contrast`,{striped:s,animated:n},i);return t.createElement(f,{...u,className:m,style:{width:`${p}%`,...c},ref:d},t.createElement(`span`,{className:`mx-2xs`},e))}const a=e(i,`ProgressBar`);function o({"aria-label":e,animated:i,children:o,className:s,color:c,component:l,height:u,inlineValue:d,label:f,showValue:p,striped:m,style:h,value:g=0,..._},v){let y=l??`div`,b=r(`progress`,s),x=Math.min(100,Math.max(0,g)),S=o===void 0?d?`${x}%`:void 0:o,C=!!(f||p),w=n(),T=f!=null&&typeof f!=`string`,E={...h};u!==void 0&&(E[`--cx-height`]=`${u}px`);let D=t.createElement(y,{..._,className:b,role:`progressbar`,"aria-valuenow":x,"aria-valuemin":0,"aria-valuemax":100,"aria-label":e??(typeof f==`string`?f:void 0),"aria-labelledby":!e&&T?w:void 0,style:E,ref:v},t.createElement(a,{animated:i,color:c,striped:m,value:x},S));return C?t.createElement(`div`,{className:`d-flex flex-column gap-xs`},t.createElement(`div`,{className:r(`d-flex`,f?`justify-content-between`:`justify-content-end`)},f?t.createElement(`span`,{className:`font-strong`,id:T?w:void 0},f):null,p?t.createElement(`span`,{className:`font-strong`},x,`%`):null),D):D}const s=e(o,`Progress`);export{a as n,s as t};
|
|
2
|
-
//# sourceMappingURL=progress-zWkTltor.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"progress-zWkTltor.js","names":[],"sources":["../../src/components/progress/ProgressBar.tsx","../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype ProgressBarOwnProps<C extends ElementType> = {\n /**\n * Use to animate the stripes right to left via CSS3 animations.\n */\n animated?: boolean\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the component to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Adds a diagonal stripe pattern over the bar's background.\n */\n striped?: boolean\n /**\n * The percent to progress the ProgressBar.\n */\n value?: number\n}\n\nexport type ProgressBarProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ProgressBarOwnProps<C>\n>\n\ntype ProgressBarComponent = (<C extends ElementType = 'div'>(\n props: ProgressBarProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ProgressBarRender<C extends ElementType = 'div'>(\n {\n children,\n animated,\n className,\n color,\n component,\n striped,\n style,\n value = 0,\n ...rest\n }: ProgressBarProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'div'\n const clampedValue = Math.min(100, Math.max(0, value))\n const _className = classNames(\n 'progress-bar',\n color && `bg-${color} fg-contrast`,\n {\n striped,\n animated\n },\n className\n )\n\n return (\n <Component\n {...rest}\n className={_className}\n style={{ width: `${clampedValue}%`, ...style }}\n ref={ref}\n >\n <span className=\"mx-2xs\">{children}</span>\n </Component>\n )\n}\n\nexport const ProgressBar = createPolymorphicComponent<ProgressBarComponent>(\n ProgressBarRender as ForwardRefRenderFunction<Element, ProgressBarProps<ElementType>>,\n 'ProgressBar'\n)\n","import React, {\n CSSProperties,\n ElementType,\n ForwardRefRenderFunction,\n ReactElement,\n ReactNode,\n useId\n} from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { ProgressBar } from './ProgressBar'\n\ntype ProgressStyle = CSSProperties & {\n '--cx-height'?: string\n}\n\ntype ProgressOwnProps<C extends ElementType> = {\n /**\n * Use to animate the stripes right to left via CSS3 animations.\n */\n animated?: boolean\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the component to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Sets the height of the component, via the `--cx-height` custom property. If you set that\n * value the inner bar (and the striped pattern's tile size) automatically resizes accordingly.\n */\n height?: number\n /**\n * Shows the current value as text inside the bar, independently of `showValue` — combine both\n * to get a `label` + `showValue` caption above the bar alongside an `inlineValue` reading\n * inside it.\n */\n inlineValue?: boolean\n /**\n * A text label describing the progress. Rendered in a caption row above the bar. Also used as\n * the default accessible name when no `aria-label`/`aria-labelledby` is supplied.\n */\n label?: ReactNode\n /**\n * Shows the current value as text in the caption row above the bar, alongside `label` when\n * both are set, or alone otherwise. Use `inlineValue` to show it inside the bar instead.\n */\n showValue?: boolean\n /**\n * Adds a diagonal stripe pattern over the bar's background.\n */\n striped?: boolean\n /**\n * The percent to progress the ProgressBar (out of 100).\n */\n value?: number\n}\n\nexport type ProgressProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ProgressOwnProps<C>\n>\n\ntype ProgressComponent = (<C extends ElementType = 'div'>(\n props: ProgressProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ProgressRender<C extends ElementType = 'div'>(\n {\n 'aria-label': ariaLabel,\n animated,\n children,\n className,\n color,\n component,\n height,\n inlineValue,\n label,\n showValue,\n striped,\n style,\n value = 0,\n ...rest\n }: ProgressProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'div'\n const _className = classNames('progress', className)\n const clampedValue = Math.min(100, Math.max(0, value))\n\n const barChildren =\n children !== undefined ? children : inlineValue ? `${clampedValue}%` : undefined\n const hasCaption = Boolean(label || showValue)\n\n const labelId = useId()\n const isNodeLabel = label != null && typeof label !== 'string'\n\n const _style: ProgressStyle = { ...style }\n if (height !== undefined) _style['--cx-height'] = `${height}px`\n\n const progressElement = (\n <Component\n {...rest}\n className={_className}\n role=\"progressbar\"\n aria-valuenow={clampedValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}\n aria-labelledby={!ariaLabel && isNodeLabel ? labelId : undefined}\n style={_style}\n ref={ref}\n >\n <ProgressBar animated={animated} color={color} striped={striped} value={clampedValue}>\n {barChildren}\n </ProgressBar>\n </Component>\n )\n\n if (!hasCaption) return progressElement\n\n return (\n <div className=\"d-flex flex-column gap-xs\">\n <div\n className={classNames('d-flex', label ? 'justify-content-between' : 'justify-content-end')}\n >\n {label ? (\n <span className=\"font-strong\" id={isNodeLabel ? labelId : undefined}>\n {label}\n </span>\n ) : null}\n {showValue ? <span className=\"font-strong\">{clampedValue}%</span> : null}\n </div>\n {progressElement}\n </div>\n )\n}\n\nexport const Progress = createPolymorphicComponent<ProgressComponent>(\n ProgressRender as ForwardRefRenderFunction<Element, ProgressProps<ElementType>>,\n 'Progress'\n)\n"],"mappings":"0IA8CA,SAAS,EACP,CACE,WACA,WACA,YACA,QACA,YACA,UACA,QACA,QAAQ,EACR,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAC/C,EAAa,EACjB,eACA,GAAS,MAAM,EAAM,cACrB,CACE,UACA,UACF,EACA,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACX,MAAO,CAAE,MAAO,GAAG,EAAa,GAAI,GAAG,CAAM,EACxC,KAGI,EADT,EAAA,cAAC,OAAD,CAAM,UAAU,QAAyB,EAAf,CAAe,CAChC,CAEf,CAEA,MAAa,EAAc,EACzB,EACA,aACF,ECRA,SAAS,EACP,CACE,aAAc,EACd,WACA,WACA,YACA,QACA,YACA,SACA,cACA,QACA,YACA,UACA,QACA,QAAQ,EACR,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EAAW,WAAY,CAAS,EAC7C,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAE/C,EACJ,IAAa,IAAA,GAAuB,EAAc,GAAG,EAAa,GAAK,IAAA,GAA9C,EACrB,EAAa,GAAQ,GAAS,GAE9B,EAAU,EAAM,EAChB,EAAc,GAAS,MAAQ,OAAO,GAAU,SAEhD,EAAwB,CAAE,GAAG,CAAM,EACrC,IAAW,IAAA,KAAW,EAAO,eAAiB,GAAG,EAAO,KAE5D,IAAM,EACJ,EAAA,cAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACX,KAAK,cACL,gBAAe,EACf,gBAAe,EACf,gBAAe,IACf,aAAY,IAAc,OAAO,GAAU,SAAW,EAAQ,IAAA,IAC9D,kBAAiB,CAAC,GAAa,EAAc,EAAU,IAAA,GACvD,MAAO,EACF,KAKI,EAHT,EAAA,cAAC,EAAD,CAAuB,WAAiB,QAAgB,UAAS,MAAO,CAE3D,EADV,CACU,CACJ,EAKb,OAFK,EAGH,EAAA,cAAC,MAAD,CAAK,UAAU,2BAYV,EAXH,EAAA,cAAC,MAAD,CACE,UAAW,EAAW,SAAU,EAAQ,0BAA4B,qBAAqB,CAQtF,EANF,EACC,EAAA,cAAC,OAAD,CAAM,UAAU,cAAc,GAAI,EAAc,EAAU,IAAA,EAEpD,EADH,CACG,EACJ,KACH,EAAY,EAAA,cAAC,OAAD,CAAM,UAAU,aAAmC,EAApB,EAAa,GAAO,EAAI,IACjE,EACJ,CACE,EAfiB,CAiB1B,CAEA,MAAa,EAAW,EACtB,EACA,UACF"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./breakpoints-o_2Ev7ir.js";import n,{Fragment as r,forwardRef as i}from"react";import a from"classnames";const o=(e,t)=>e===!0?`${t}flex-fill`:e===`auto`?`${t}w-auto`:typeof e==`number`||typeof e==`string`?Number(e)===12?`${t}w-100`:`${t}w-${e}/12`:null,s=(e,t)=>[o(e,t)];function c({children:e,animation:r,className:i,color:o,component:c,span:l,responsive:u,...d},f){let p=c??`span`,m=a(`skeleton`,r&&`skeleton-${r}`,{[`bg-${o}`]:o},t(s,l,u),i);return n.createElement(p,{className:m,...d,ref:f},e)}const l=e(c,`Skeleton`);function u({children:e,color:t,component:i,loading:a,spans:o,...s},c){if(!a)return n.createElement(n.Fragment,null,e);let u=o===void 0?[void 0]:Array.isArray(o)?o:[o];return n.createElement(n.Fragment,null,u.map((e,a)=>n.createElement(r,{key:a},a>0&&` `,n.createElement(l,{component:i,span:e,color:t,...s,ref:a===0?c:void 0}))))}const d=i(u);d.displayName=`SkeletonLoader`;export{l as n,d as t};
|
|
2
|
-
//# sourceMappingURL=skeleton-BrD2JwNx.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton-BrD2JwNx.js","names":[],"sources":["../../src/components/skeleton/Skeleton.tsx","../../src/components/skeleton/SkeletonLoader.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { WidthSpan, buildResponsiveClassNames } from '../../utils/breakpoints'\nimport { Breakpoint, ContextColor } from '../../types'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype SkeletonOwnProps<C extends ElementType> = {\n /**\n * Adds `skeleton-{animation}` alongside the base `skeleton` class, so the element animates\n * itself as well as any nested `<Skeleton>` children. Nest plain `<Skeleton>` children inside\n * it for the glow pulse to reach them too, or apply `wave` to a container of one or more\n * `<Skeleton>` children for a directional sweep across the whole group.\n */\n animation?: 'glow' | 'wave'\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the component to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the root node. Either a string to use an HTML element or a component —\n * e.g. `Avatar` or `Button`. Its own props are type-checked at the call site once passed here.\n *\n * @default 'span'\n */\n component?: C\n /**\n * Width of the skeleton in twelfths of its parent (`span={6}` is half, mapped to the\n * `w-{n}/12` class; `span={12}` is `w-100`), `'auto'` for its natural width (`w-auto`), or\n * `true` to fill the rest of a flex row (`flex-fill`). Unset by default, so the rendered\n * element's own intrinsic width applies — set it explicitly (e.g. `span={12}`) for a\n * full-width text line; leave it unset when `component` is something that sizes itself, like\n * `Avatar` or `Button`.\n *\n * @type { 'auto' | number | string | boolean }\n */\n span?: WidthSpan\n /**\n * Overrides `span` at a breakpoint and up.\n *\n * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', 'auto' | number | string | boolean>> }\n */\n responsive?: Partial<Record<Breakpoint, WidthSpan>>\n}\n\nexport type SkeletonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n C,\n SkeletonOwnProps<C>\n>\n\ntype SkeletonComponent = (<C extends ElementType = 'span'>(\n props: SkeletonProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// chassis-css has the fractions `w-1/12` to `w-11/12`; twelve twelfths is `w-100`.\nconst spanClassName = (span: WidthSpan | undefined, prefix: string) => {\n if (span === true) return `${prefix}flex-fill`\n if (span === 'auto') return `${prefix}w-auto`\n if (typeof span === 'number' || typeof span === 'string') {\n return Number(span) === 12 ? `${prefix}w-100` : `${prefix}w-${span}/12`\n }\n return null\n}\n\nconst spanClassNames = (span: WidthSpan | undefined, prefix: string) => [\n spanClassName(span, prefix)\n]\n\nfunction SkeletonRender<C extends ElementType = 'span'>(\n { children, animation, className, color, component, span, responsive, ...rest }: SkeletonProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'span'\n const _className = classNames(\n 'skeleton',\n animation && `skeleton-${animation}`,\n { [`bg-${color}`]: color },\n buildResponsiveClassNames(spanClassNames, span, responsive),\n className\n )\n\n return (\n <Component className={_className} {...rest} ref={ref}>\n {children}\n </Component>\n )\n}\n\nexport const Skeleton = createPolymorphicComponent<SkeletonComponent>(\n SkeletonRender as ForwardRefRenderFunction<Element, SkeletonProps<ElementType>>,\n 'Skeleton'\n)\n","import React, {\n ComponentPropsWithoutRef,\n ElementType,\n ForwardedRef,\n forwardRef,\n ForwardRefRenderFunction,\n Fragment,\n ReactElement,\n ReactNode\n} from 'react'\n\nimport { WidthSpan } from '../../utils/breakpoints'\nimport { PolymorphicRef } from '../../utils/polymorphic'\nimport { ContextColor } from '../../types'\nimport { Skeleton, SkeletonProps } from './Skeleton'\n\ntype SkeletonLoaderOwnProps<C extends ElementType> = {\n /**\n * The real content, rendered unchanged (no wrapping element) once `loading` is `false`.\n */\n children: ReactNode\n /**\n * Sets the color of the generated skeleton lines to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the generated skeleton(s) — e.g. `Avatar` or `Button` — for swapping\n * non-text content, not just text runs. Its own props are type-checked at the call site once\n * passed here, same as `Skeleton`'s own `component` prop.\n *\n * @default 'span'\n */\n component?: C\n /**\n * Swaps `children` for one `<Skeleton>` per entry in `spans` while `true`.\n */\n loading: boolean\n /**\n * One skeleton line per entry, using the same values as `Skeleton`'s `span` prop — e.g.\n * `[12, 6]` for a full-width line followed by a half-width one. A single value (e.g. `6`) is\n * shorthand for a single line, equivalent to `[6]`. Leave unset for a single skeleton sized by\n * `component`'s own intrinsic width instead — e.g. an `Avatar`'s `size` prop. Rendered instead\n * of `children` while `loading` is `true`; ignored once `loading` is `false`.\n *\n * @type { 'auto' | number | string | boolean | Array<'auto' | number | string | boolean> }\n */\n spans?: WidthSpan | WidthSpan[]\n}\n\n// Spelled out rather than `PolymorphicComponentProps`, which adds `asChild`: `SkeletonLoader`\n// renders no element of its own (it swaps its `children` for generated `Skeleton` lines), so\n// there's nothing for a child element to stand in for. (`Omit`-ing it from that type instead\n// breaks `C`'s inference from `component`.)\nexport type SkeletonLoaderProps<C extends ElementType = 'span'> = SkeletonLoaderOwnProps<C> &\n Omit<ComponentPropsWithoutRef<C>, keyof SkeletonLoaderOwnProps<C> | 'asChild'>\n\ntype SkeletonLoaderComponent = (<C extends ElementType = 'span'>(\n props: SkeletonLoaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n/**\n * A pure content swap: no wrapping element of its own, so `.skeleton-glow`/`.skeleton-wave`\n * won't reach the lines it generates unless applied to a container already in the tree — see\n * `Skeleton`'s own docs for why the animation classes need a `.skeleton` descendant to animate.\n *\n * The ref goes to the first generated skeleton while `loading`, and is `null` once the real\n * content shows: that content is the caller's, with refs of its own.\n */\nfunction SkeletonLoaderRender<C extends ElementType = 'span'>(\n { children, color, component, loading, spans, ...rest }: SkeletonLoaderProps<C>,\n ref: ForwardedRef<Element>\n) {\n if (!loading) return <>{children}</>\n\n const spanList = spans === undefined ? [undefined] : Array.isArray(spans) ? spans : [spans]\n\n return (\n <>\n {spanList.map((span, index) => (\n // eslint-disable-next-line react/no-array-index-key -- `spans` is a static prop array\n <Fragment key={index}>\n {index > 0 && ' '}\n {/* `rest` is `C`'s own props minus `SkeletonLoaderOwnProps`'s keys, which structurally\n satisfies what `Skeleton<C>` wants (`C`'s own props minus its own, different, key\n set) — TS can't verify that across two independently-generic components, hence the\n cast. */}\n <Skeleton\n component={component}\n span={span}\n color={color}\n {...(rest as unknown as SkeletonProps<C>)}\n ref={index === 0 ? ref : undefined}\n />\n </Fragment>\n ))}\n </>\n )\n}\n\n// `forwardRef` takes a render function that isn't generic, so the generic type is cast back on,\n// as `createPolymorphicComponent` does.\nexport const SkeletonLoader = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n SkeletonLoaderRender as ForwardRefRenderFunction<Element, any>\n) as unknown as SkeletonLoaderComponent\n\nSkeletonLoader.displayName = 'SkeletonLoader'\n"],"mappings":"sMA+DA,MAAM,GAAiB,EAA6B,IAC9C,IAAS,GAAa,GAAG,EAAO,WAChC,IAAS,OAAe,GAAG,EAAO,QAClC,OAAO,GAAS,UAAY,OAAO,GAAS,SACvC,OAAO,CAAI,IAAM,GAAK,GAAG,EAAO,OAAS,GAAG,EAAO,IAAI,EAAK,KAE9D,KAGH,GAAkB,EAA6B,IAAmB,CACtE,EAAc,EAAM,CAAM,CAC5B,EAEA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,YAAW,OAAM,aAAY,GAAG,GACzE,EACA,CACA,IAAM,EAAY,GAAa,OACzB,EAAa,EACjB,WACA,GAAa,YAAY,IACzB,EAAG,MAAM,KAAU,CAAM,EACzB,EAA0B,EAAgB,EAAM,CAAU,EAC1D,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAW,EACtB,EACA,UACF,EC/BA,SAAS,EACP,CAAE,WAAU,QAAO,YAAW,UAAS,QAAO,GAAG,GACjD,EACA,CACA,GAAI,CAAC,EAAS,OAAO,EAAA,cAAA,EAAA,SAAA,KAAG,CAAW,EAEnC,IAAM,EAAW,IAAU,IAAA,GAAY,CAAC,IAAA,EAAS,EAAI,MAAM,QAAQ,CAAK,EAAI,EAAQ,CAAC,CAAK,EAE1F,OACE,EAAA,cAAA,EAAA,SAAA,KACG,EAAS,KAAK,EAAM,IAEnB,EAAA,cAAC,EAAD,CAAU,IAAK,CAaL,EAZP,EAAQ,GAAK,IAKd,EAAA,cAAC,EAAD,CACa,YACL,OACC,QACP,GAAK,EACL,IAAK,IAAU,EAAI,EAAM,IAAA,EAC1B,CAAA,CACO,CACX,CACD,CAEN,CAIA,MAAa,EAAiB,EAE5B,CACF,EAEA,EAAe,YAAc"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./VisuallyHidden-C2dM7HhC.js";import n from"react";import r from"classnames";function i({className:e,color:i,component:a,size:o,variant:s=`border`,visuallyHiddenLabel:c=`Loading...`,...l},u){let d=a??`div`,f=r(`spinner-${s}`,i?`fg-${i}`:null,o&&`spinner-${s}-${o}`,e);return n.createElement(d,{className:f,role:`status`,...l,ref:u},n.createElement(t,null,c))}const a=e(i,`Spinner`);export{a as t};
|
|
2
|
-
//# sourceMappingURL=spinner-DblhvrHL.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"spinner-DblhvrHL.js","names":[],"sources":["../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { ContextColor } from '../../types'\nimport { VisuallyHidden } from '../visually-hidden/VisuallyHidden'\n\ntype SpinnerOwnProps<C extends ElementType> = {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the component to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Size the component sm.\n */\n size?: 'sm'\n /**\n * Set the button variant to an outlined button or a ghost button.\n */\n variant?: 'border' | 'grow'\n /**\n * Set visually hidden label for accessibility purposes.\n */\n visuallyHiddenLabel?: string\n}\n\nexport type SpinnerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n SpinnerOwnProps<C>\n>\n\ntype SpinnerComponent = (<C extends ElementType = 'div'>(\n props: SpinnerProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction SpinnerRender<C extends ElementType = 'div'>(\n {\n className,\n color,\n component,\n size,\n variant = 'border',\n visuallyHiddenLabel = 'Loading...',\n ...rest\n }: SpinnerProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'div'\n const _className = classNames(\n `spinner-${variant}`,\n color ? `fg-${color}` : null,\n size && `spinner-${variant}-${size}`,\n className\n )\n\n return (\n <Component className={_className} role=\"status\" {...rest} ref={ref}>\n <VisuallyHidden>{visuallyHiddenLabel}</VisuallyHidden>\n </Component>\n )\n}\n\nexport const Spinner = createPolymorphicComponent<SpinnerComponent>(\n SpinnerRender as ForwardRefRenderFunction<Element, SpinnerProps<ElementType>>,\n 'Spinner'\n)\n"],"mappings":"0KA+CA,SAAS,EACP,CACE,YACA,QACA,YACA,OACA,UAAU,SACV,sBAAsB,aACtB,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,WAAW,IACX,EAAQ,MAAM,IAAU,KACxB,GAAQ,WAAW,EAAQ,GAAG,IAC9B,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,KAAK,SAAS,GAAI,EAAW,KAEpD,EADT,EAAA,cAAC,EAAA,KAAgB,CAAoC,CAC5C,CAEf,CAEA,MAAa,EAAU,EACrB,EACA,SACF"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./breakpoints-o_2Ev7ir.js";import{t as n}from"./spacingClassName-DVhk8m3P.js";import r from"react";import i from"classnames";const a=(e,t)=>[`${t}${e===`vertical`?`vstack`:`hstack`}`];function o({children:e,className:o,component:s,direction:c=`horizontal`,gap:l,responsive:u,...d},f){let p=s??`div`,m=i(t(a,c,u),n(`gap`,l),o);return r.createElement(p,{className:m,...d,ref:f},e)}const s=e(o,`Stack`);export{s as t};
|
|
2
|
-
//# sourceMappingURL=stack-CsMiQbpq.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stack-CsMiQbpq.js","names":[],"sources":["../../src/components/stack/Stack.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { buildResponsiveClassNames } from '../../utils/breakpoints'\nimport { spacingClassName } from '../../utils/spacingClassName'\nimport { Breakpoint, Spacing } from '../../types'\n\nconst directionClassName = (direction: 'horizontal' | 'vertical', prefix: string) => [\n `${prefix}${direction === 'vertical' ? 'vstack' : 'hstack'}`\n]\n\ntype StackOwnProps<C extends ElementType> = {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Lays children out in a row (`horizontal`, the default, maps to `.hstack`) or a column\n * (`vertical`, maps to `.vstack`).\n */\n direction?: 'horizontal' | 'vertical'\n /**\n * Spacing between children, mapped to the `gap-*` utility classes.\n */\n gap?: Spacing | 0\n /**\n * Switches `direction` at one or more breakpoints via container queries. Requires a\n * `.contains-inline` ancestor (not applied by `Stack` itself — see the docs) to establish the\n * container context these queries evaluate against.\n */\n responsive?: Partial<Record<Breakpoint, 'horizontal' | 'vertical'>>\n}\n\nexport type StackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n StackOwnProps<C>\n>\n\ntype StackComponent = (<C extends ElementType = 'div'>(\n props: StackProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction StackRender<C extends ElementType = 'div'>(\n {\n children,\n className,\n component,\n direction = 'horizontal',\n gap,\n responsive,\n ...rest\n }: StackProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'div'\n const _className = classNames(\n buildResponsiveClassNames(directionClassName, direction, responsive),\n spacingClassName('gap', gap),\n className\n )\n\n return (\n <Component className={_className} {...rest} ref={ref}>\n {children}\n </Component>\n )\n}\n\nexport const Stack = createPolymorphicComponent<StackComponent>(\n StackRender as ForwardRefRenderFunction<Element, StackProps<ElementType>>,\n 'Stack'\n)\n"],"mappings":"0NAYA,MAAM,GAAsB,EAAsC,IAAmB,CACnF,GAAG,IAAS,IAAc,WAAa,SAAW,UACpD,EAqCA,SAAS,EACP,CACE,WACA,YACA,YACA,YAAY,aACZ,MACA,aACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,EAA0B,EAAoB,EAAW,CAAU,EACnE,EAAiB,MAAO,CAAG,EAC3B,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAQ,EACnB,EACA,OACF"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{n as e,t}from"./tableClassName-CZA2Bse8.js";import n,{forwardRef as r}from"react";const i=r(({align:r,bordered:i,borderless:a,caption:o,children:s,className:c,color:l,hover:u,responsive:d,sm:f,stacked:p,striped:m,...h},g)=>{let _=n.createElement(`table`,{...h,className:t({align:r,bordered:i,borderless:a,className:c,color:l,hover:u,sm:f,stacked:p,striped:m}),ref:g},o&&n.createElement(`caption`,null,o),s),v=e({responsive:d,stacked:p});return v?n.createElement(`div`,{className:v},_):_});i.displayName=`StaticTable`;export{i as t};
|
|
2
|
-
//# sourceMappingURL=static-table-D0M4oc_t.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import e from"classnames";function t({align:t,bordered:n,borderless:r,className:i,color:a,hover:o,sm:s,stacked:c,striped:l}){return e(`table`,a,{[`align-${t}`]:t,bordered:n,borderless:r,hoverable:o,sm:s,stacked:c===!0,striped:l},typeof c==`string`?`max-${c}:stacked`:void 0,i)||void 0}function n({responsive:e,stacked:t}){if(e||t)return!e||e===!0?`table-responsive`:`max-${e}:table-responsive`}export{n,t};
|
|
2
|
-
//# sourceMappingURL=tableClassName-CZA2Bse8.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tableClassName-CZA2Bse8.js","names":[],"sources":["../../src/utils/tableClassName.ts"],"sourcesContent":["import classNames from 'classnames'\n\nimport { Breakpoint, ContextColor } from '../types'\n\n// The styling props `Table` and `StaticTable` share. Kept in one place so the two can't drift into\n// applying different chassis-css classes for the same prop — `StaticTable` exists to be the\n// zero-JS twin of `Table`'s look, so a prop meaning something different on each would defeat it.\nexport interface TableStyleProps {\n /**\n * Set the vertical alignment of cell content.\n */\n align?: 'bottom' | 'middle' | 'top'\n /**\n * Add borders on all sides of the table and cells.\n */\n bordered?: boolean\n /**\n * Remove borders on all sides of the table and cells.\n */\n borderless?: boolean\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the component.\n */\n color?: ContextColor\n /**\n * Enable a hover state on table rows.\n */\n hover?: boolean\n /**\n * Make any table responsive across all viewports or pick a maximum breakpoint.\n */\n responsive?: boolean | Breakpoint\n /**\n * Make table more compact by cutting all cell padding.\n */\n sm?: boolean\n /**\n * Convert rows into stacked label/value blocks below a container width, for tables with too\n * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a\n * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set\n * separately, since stacking needs the same `.table-responsive` container-query ancestor.\n */\n stacked?: boolean | Breakpoint\n /**\n * Add zebra-striping to table rows.\n */\n striped?: boolean\n}\n\nexport function tableClassName({\n align,\n bordered,\n borderless,\n className,\n color,\n hover,\n sm,\n stacked,\n striped\n}: TableStyleProps): string | undefined {\n return (\n classNames(\n 'table',\n color,\n {\n [`align-${align}`]: align,\n bordered,\n borderless,\n hoverable: hover,\n sm,\n stacked: stacked === true,\n striped\n },\n typeof stacked === 'string' ? `max-${stacked}:stacked` : undefined,\n className\n ) || undefined\n )\n}\n\n// `undefined` when the table needs no wrapper at all. Stacking needs the same `.table-responsive`\n// container-query ancestor as horizontal scrolling, so `stacked` alone still gets one.\nexport function tableWrapperClassName({\n responsive,\n stacked\n}: Pick<TableStyleProps, 'responsive' | 'stacked'>): string | undefined {\n if (!responsive && !stacked) return undefined\n if (!responsive || responsive === true) return 'table-responsive'\n return `max-${responsive}:table-responsive`\n}\n"],"mappings":"0BAqDA,SAAgB,EAAe,CAC7B,QACA,WACA,aACA,YACA,QACA,QACA,KACA,UACA,WACsC,CACtC,OACE,EACE,QACA,EACA,EACG,SAAS,KAAU,EACpB,WACA,aACA,UAAW,EACX,KACA,QAAS,IAAY,GACrB,SACF,EACA,OAAO,GAAY,SAAW,OAAO,EAAQ,UAAY,IAAA,GACzD,CACF,GAAK,IAAA,EAET,CAIA,SAAgB,EAAsB,CACpC,aACA,WACsE,CAClE,GAAC,GAAe,EAEpB,MADI,CAAC,GAAc,IAAe,GAAa,mBACxC,OAAO,EAAW,kBAC3B"}
|