@sixthshift/design-system 0.7.0 → 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/README.md +5 -4
- package/dist/components/Badge/Badge.d.ts +17 -35
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js +19 -22
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/index.d.ts +1 -1
- package/dist/components/Badge/index.d.ts.map +1 -1
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/Badge/index.js.map +1 -1
- package/dist/components/Button/Button.d.ts +23 -41
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +28 -35
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Card/Card.d.ts +2 -2
- package/dist/components/Card/Card.js +1 -1
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +20 -16
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.js +12 -10
- package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.d.ts +2 -1
- package/dist/components/Code/Workspace/Toolbar.d.ts.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.js.map +1 -1
- package/dist/components/DataTable/DataTable.d.ts +89 -0
- package/dist/components/DataTable/DataTable.d.ts.map +1 -0
- package/dist/components/DataTable/DataTable.js +107 -0
- package/dist/components/DataTable/DataTable.js.map +1 -0
- package/dist/components/DataTable/index.d.ts +2 -0
- package/dist/components/DataTable/index.d.ts.map +1 -0
- package/dist/components/DataTable/index.js +2 -0
- package/dist/components/DataTable/index.js.map +1 -0
- package/dist/components/FileDropzone/FileDropzone.d.ts +87 -0
- package/dist/components/FileDropzone/FileDropzone.d.ts.map +1 -0
- package/dist/components/FileDropzone/FileDropzone.js +146 -0
- package/dist/components/FileDropzone/FileDropzone.js.map +1 -0
- package/dist/components/FileDropzone/index.d.ts +2 -0
- package/dist/components/FileDropzone/index.d.ts.map +1 -0
- package/dist/components/FileDropzone/index.js +2 -0
- package/dist/components/FileDropzone/index.js.map +1 -0
- package/dist/components/FormField/FormField.d.ts +3 -1
- package/dist/components/FormField/FormField.d.ts.map +1 -1
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/ImageGallery/ImageGallery.d.ts +93 -0
- package/dist/components/ImageGallery/ImageGallery.d.ts.map +1 -0
- package/dist/components/ImageGallery/ImageGallery.js +121 -0
- package/dist/components/ImageGallery/ImageGallery.js.map +1 -0
- package/dist/components/ImageGallery/index.d.ts +2 -0
- package/dist/components/ImageGallery/index.d.ts.map +1 -0
- package/dist/components/ImageGallery/index.js +2 -0
- package/dist/components/ImageGallery/index.js.map +1 -0
- package/dist/components/Input/Input.d.ts +3 -3
- package/dist/components/Input/Input.js +3 -3
- package/dist/components/Markdown/Markdown.js +1 -1
- package/dist/components/Markdown/Markdown.js.map +1 -1
- package/dist/components/NumberStepper/NumberStepper.d.ts +78 -0
- package/dist/components/NumberStepper/NumberStepper.d.ts.map +1 -0
- package/dist/components/NumberStepper/NumberStepper.js +129 -0
- package/dist/components/NumberStepper/NumberStepper.js.map +1 -0
- package/dist/components/NumberStepper/index.d.ts +2 -0
- package/dist/components/NumberStepper/index.d.ts.map +1 -0
- package/dist/components/NumberStepper/index.js +2 -0
- package/dist/components/NumberStepper/index.js.map +1 -0
- package/dist/components/ProgressBar/ProgressBar.d.ts +11 -0
- package/dist/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.js +6 -2
- package/dist/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/components/ProgressBar/index.d.ts +1 -1
- package/dist/components/ProgressBar/index.d.ts.map +1 -1
- package/dist/components/ProgressBar/index.js.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts +19 -16
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js +13 -12
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js.map +1 -1
- package/dist/components/SearchInput/SearchInput.d.ts +3 -2
- package/dist/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/dist/components/SearchInput/SearchInput.js +13 -8
- package/dist/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/components/Sparkline/Sparkline.d.ts +8 -4
- package/dist/components/Sparkline/Sparkline.d.ts.map +1 -1
- package/dist/components/Sparkline/Sparkline.js +1 -1
- package/dist/components/Sparkline/Sparkline.js.map +1 -1
- package/dist/components/Sparkline/index.d.ts +1 -1
- package/dist/components/Sparkline/index.d.ts.map +1 -1
- package/dist/components/Sparkline/index.js.map +1 -1
- package/dist/components/Steps/Steps.d.ts +65 -0
- package/dist/components/Steps/Steps.d.ts.map +1 -0
- package/dist/components/Steps/Steps.js +62 -0
- package/dist/components/Steps/Steps.js.map +1 -0
- package/dist/components/Steps/index.d.ts +2 -0
- package/dist/components/Steps/index.d.ts.map +1 -0
- package/dist/components/Steps/index.js +2 -0
- package/dist/components/Steps/index.js.map +1 -0
- package/dist/components/TagChip/TagChip.d.ts +0 -13
- package/dist/components/TagChip/TagChip.d.ts.map +1 -1
- package/dist/components/TagChip/TagChip.js +10 -4
- package/dist/components/TagChip/TagChip.js.map +1 -1
- package/dist/components/TextInline/TextInline.d.ts +2 -2
- package/dist/components/Toast/Toast.js +1 -1
- package/dist/components/Toast/Toast.js.map +1 -1
- package/dist/components/Toggle/Toggle.d.ts +29 -18
- package/dist/components/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/Toggle/Toggle.js +48 -11
- package/dist/components/Toggle/Toggle.js.map +1 -1
- package/dist/components/Toggle/index.d.ts +1 -1
- package/dist/components/Toggle/index.d.ts.map +1 -1
- package/dist/components/Toggle/index.js +1 -1
- package/dist/components/Toggle/index.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +4 -4
- package/dist/components/ToggleGroup/ToggleGroup.js +4 -4
- package/dist/components/ToggleGroup/ToggleGroupItem.d.ts +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.js +37 -7
- package/dist/components/ToggleGroup/ToggleGroupItem.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts +3 -3
- package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts +3 -3
- package/dist/components/ToggleGroup/index.d.ts +1 -1
- package/dist/components/ToggleGroup/index.d.ts.map +1 -1
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts +18 -16
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts.map +1 -1
- package/dist/typography/Code.js +1 -1
- package/dist/typography/Code.js.map +1 -1
- package/package.json +22 -1
- package/src/components/Badge/Badge.tsx +38 -45
- package/src/components/Badge/badge.recipe.css +20 -101
- package/src/components/Badge/index.ts +0 -1
- package/src/components/Button/Button.tsx +57 -51
- package/src/components/Button/button.recipe.css +39 -122
- package/src/components/Button/index.ts +0 -1
- package/src/components/Card/Card.tsx +1 -1
- package/src/components/CheckboxGroup/CheckboxGroup.tsx +17 -15
- package/src/components/Code/Workspace/Toolbar.tsx +2 -2
- package/src/components/DataTable/DataTable.tsx +261 -0
- package/src/components/DataTable/data-table.recipe.css +28 -0
- package/src/components/DataTable/index.ts +10 -0
- package/src/components/FileDropzone/FileDropzone.tsx +239 -0
- package/src/components/FileDropzone/file-dropzone.recipe.css +38 -0
- package/src/components/FileDropzone/index.ts +1 -0
- package/src/components/FormField/FormField.tsx +3 -2
- package/src/components/ImageGallery/ImageGallery.tsx +285 -0
- package/src/components/ImageGallery/image-gallery.recipe.css +50 -0
- package/src/components/ImageGallery/index.ts +7 -0
- package/src/components/Input/Input.tsx +3 -3
- package/src/components/Markdown/Markdown.tsx +1 -1
- package/src/components/Message/message.recipe.css +13 -28
- package/src/components/NumberStepper/NumberStepper.tsx +227 -0
- package/src/components/NumberStepper/index.ts +1 -0
- package/src/components/NumberStepper/number-stepper.recipe.css +31 -0
- package/src/components/ProgressBar/ProgressBar.tsx +16 -4
- package/src/components/ProgressBar/index.ts +1 -1
- package/src/components/ProgressBar/progress-bar.recipe.css +29 -0
- package/src/components/RadioButtonGroup/RadioButtonGroup.tsx +18 -17
- package/src/components/SearchInput/SearchInput.tsx +34 -20
- package/src/components/SearchInput/search-input.recipe.css +14 -6
- package/src/components/Sparkline/Sparkline.tsx +9 -4
- package/src/components/Sparkline/index.ts +1 -1
- package/src/components/Steps/Steps.tsx +149 -0
- package/src/components/Steps/index.ts +1 -0
- package/src/components/Steps/steps.recipe.css +51 -0
- package/src/components/TagChip/TagChip.tsx +17 -8
- package/src/components/TagChip/tag-chip.recipe.css +12 -12
- package/src/components/Toast/Toast.tsx +1 -1
- package/src/components/Toggle/Toggle.tsx +67 -21
- package/src/components/Toggle/index.ts +9 -1
- package/src/components/Toggle/toggle.recipe.css +45 -73
- package/src/components/ToggleGroup/ToggleGroup.tsx +4 -4
- package/src/components/ToggleGroup/ToggleGroupItem.tsx +46 -11
- package/src/components/ToggleGroup/index.ts +9 -1
- package/src/components/ToggleGroup/toggle-group.recipe.css +62 -0
- package/src/components/ToggleGroup/toggleGroup.types.ts +18 -16
- package/src/theme/linen/theme.css +21 -0
- package/src/theming/intents.css +112 -0
- package/src/theming/tailwind.css +22 -1
- package/src/typography/Code.tsx +1 -1
package/README.md
CHANGED
|
@@ -152,7 +152,7 @@ import { cn } from "@sixthshift/design-system/utils";
|
|
|
152
152
|
import { useTheme, useLocalStorage } from "@sixthshift/design-system/hooks";
|
|
153
153
|
```
|
|
154
154
|
|
|
155
|
-
The full list is the `exports` map in [`package.json`](package.json);
|
|
155
|
+
The full list is the `exports` map in [`package.json`](package.json); every component's props, generated from its source, are on its docs page in [Storybook](https://sixthshift.github.io/design-system/).
|
|
156
156
|
|
|
157
157
|
## Component API
|
|
158
158
|
|
|
@@ -204,8 +204,8 @@ ISO-native helpers (`todayISO`, `addDaysISO`, `startOfMonthISO`, `isWeekendISO`,
|
|
|
204
204
|
Temporal itself, for arithmetic the ISO surface deliberately does not carry —
|
|
205
205
|
widen with `fromISODate`, compute, narrow back with `toISODate`.
|
|
206
206
|
|
|
207
|
-
|
|
208
|
-
|
|
207
|
+
The full prop tables are on each picker's docs page in Storybook — start at
|
|
208
|
+
[DatePicker](https://sixthshift.github.io/design-system/?path=/docs/components-datepicker--docs).
|
|
209
209
|
|
|
210
210
|
### Upgrading from 0.2.x
|
|
211
211
|
|
|
@@ -351,6 +351,7 @@ deliberate, and all of it is worth knowing before you commit.
|
|
|
351
351
|
|
|
352
352
|
| What | Effect on your app |
|
|
353
353
|
| --- | --- |
|
|
354
|
+
| **Tailwind's radius scale is replaced** | `rounded-xs` to `rounded-xl` read the theme's `--border-radius-*` steps (`md` the default), so they change when a theme does. `rounded-2xl`, `rounded-3xl` and `rounded-4xl` stop compiling — in your own markup too; use `rounded-xl`, or an arbitrary value if you truly need more. Bare `rounded` still compiles but is a fixed `0.25rem` no theme reaches; prefer `rounded-sm`. |
|
|
354
355
|
| **Tailwind's default palette is removed** | `bg-red-500`, `text-gray-700`, `border-gray-200` and the rest stop compiling — in your own markup too. What remains is this system's tokens (`bg-bg-brand`, `text-fg-subtle`, `border-border-normal`, …) plus `white`, `black`, `transparent` and `current`. A colour that was never designed should not be one class away. |
|
|
355
356
|
| **`dark:` means `[data-theme="dark"]`** | Not `prefers-color-scheme`. Theming here is a runtime attribute swap, so every `dark:` utility in your app follows the attribute instead of the OS setting. |
|
|
356
357
|
| **`font-sans` and `font-mono`** | Resolve to Inter Variable and JetBrains Mono. Install the [font peers](#fonts) or the stacks fall through to the system defaults. |
|
|
@@ -476,4 +477,4 @@ git tag v0.2.0 && git push origin v0.2.0
|
|
|
476
477
|
|
|
477
478
|
## Docs
|
|
478
479
|
|
|
479
|
-
Design-system knowledge lives in [`docs/`](docs/): [design tokens](docs/design-tokens.md), [component
|
|
480
|
+
Design-system knowledge lives in [`docs/`](docs/): [design tokens](docs/design-tokens.md), [component axes](docs/component-axes.md), [component authoring](docs/component-authoring.md), [component API design](docs/component-api-design.md), [composition](docs/composition.md), [visual hierarchy](docs/visual-hierarchy.md), [spacing](docs/spacing.md), [motion](docs/motion.md), [states](docs/states.md), [overlays](docs/overlay-primitives.md), [forms](docs/forms.md), [modals](docs/modals.md), [responsive](docs/responsive.md), [density](docs/density.md), [copy](docs/copy-conventions.md), [time formatting](docs/time-formatting.md), [design philosophy](docs/design-philosophy.md).
|
|
@@ -5,12 +5,14 @@ import * as React from "react";
|
|
|
5
5
|
*
|
|
6
6
|
* Every colour reads a `--badge-*` component token whose value is decided by
|
|
7
7
|
* src/components/Badge/badge.recipe.css. That file is the mapping from
|
|
8
|
-
* `
|
|
8
|
+
* `variant` to the intent slots — the layer that used to be
|
|
9
9
|
* `compoundVariants` here, where it was compiled into class-name literals and
|
|
10
10
|
* unreachable from outside. Nothing in this file names a colour, which is the
|
|
11
11
|
* point: the semantics are now configurable without a release.
|
|
12
12
|
*/
|
|
13
|
-
declare const badgeVariants: (props?: ({
|
|
13
|
+
declare const badgeVariants: (props?: ({
|
|
14
|
+
size?: "sm" | "md" | null | undefined;
|
|
15
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
16
|
/**
|
|
15
17
|
* Widened deliberately. Adding a variant or an intent is a CSS change in the
|
|
16
18
|
* consuming app, not a release here — so the type has to admit values this
|
|
@@ -18,34 +20,11 @@ declare const badgeVariants: (props?: ({} & import("class-variance-authority/typ
|
|
|
18
20
|
*/
|
|
19
21
|
type Loose<T extends string> = T | (string & {});
|
|
20
22
|
export type BadgeVariantName = "solid" | "soft" | "outline";
|
|
21
|
-
/**
|
|
22
|
-
|
|
23
|
-
* the system used it — the token is `--bg-brand`, and
|
|
24
|
-
* docs/modals.md already told callers to write `intent="brand"`. It is off the
|
|
25
|
-
* closed union as of this release but still resolves, via an aliased selector in
|
|
26
|
-
* badge.css; `BadgeIntent` is widened, so it also still type-checks.
|
|
27
|
-
*/
|
|
28
|
-
export type BadgeIntentName = "neutral" | "brand" | "danger" | "success" | "warning" | "muted";
|
|
23
|
+
/** The system's intent set — the families src/theming/intents.css defines. */
|
|
24
|
+
export type BadgeIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
|
|
29
25
|
export type BadgeVariant = Loose<BadgeVariantName>;
|
|
30
26
|
export type BadgeIntent = Loose<BadgeIntentName>;
|
|
31
|
-
export type
|
|
32
|
-
variant?: BadgeVariant | undefined;
|
|
33
|
-
intent?: BadgeIntent | undefined;
|
|
34
|
-
/** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
|
|
35
|
-
brand?: string | undefined;
|
|
36
|
-
className?: string | undefined;
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* The class string plus the attributes the recipe selects on. `data-brand` is
|
|
40
|
-
* omitted unless `brand` is set, same as `buttonRecipe`.
|
|
41
|
-
*/
|
|
42
|
-
export declare function badgeRecipe({ variant, intent, brand, className }: BadgeRecipeProps): {
|
|
43
|
-
className: string;
|
|
44
|
-
"data-variant": BadgeVariant;
|
|
45
|
-
"data-intent": BadgeIntent;
|
|
46
|
-
"data-brand": string | undefined;
|
|
47
|
-
};
|
|
48
|
-
export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
27
|
+
export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants> & {
|
|
49
28
|
variant?: BadgeVariant | undefined;
|
|
50
29
|
intent?: BadgeIntent | undefined;
|
|
51
30
|
/** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the badge follows the nearest `data-brand` ancestor. */
|
|
@@ -56,17 +35,20 @@ export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
|
56
35
|
*
|
|
57
36
|
* Two independent axes, same split as Button: `variant` is the fill
|
|
58
37
|
* (`solid`, `soft`, `outline`), `intent` is what it signals (`neutral`,
|
|
59
|
-
* `brand`, `danger`, `success`, `warning
|
|
60
|
-
*
|
|
38
|
+
* `brand`, `danger`, `success`, `warning`). `neutral`, the default, is the
|
|
39
|
+
* grey family; a brand-coloured badge says `intent="brand"`. `size` is `sm`
|
|
40
|
+
* or `md` (the default).
|
|
61
41
|
* Renders a `<span>`; purely presentational, so give it visible text — it
|
|
62
42
|
* does not manage an accessible name of its own.
|
|
63
43
|
*
|
|
64
|
-
* Colour is not decided here: each
|
|
65
|
-
*
|
|
66
|
-
* same seam Button uses, so a consumer can re-point a cell
|
|
67
|
-
* release.
|
|
44
|
+
* Colour is not decided here: each variant resolves through a `--badge-*`
|
|
45
|
+
* component token (src/components/Badge/badge.recipe.css) that paints with the
|
|
46
|
+
* intent slots, the same seam Button uses, so a consumer can re-point a cell
|
|
47
|
+
* or add an intent without a release.
|
|
68
48
|
*/
|
|
69
|
-
export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
49
|
+
export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
|
|
50
|
+
size?: "sm" | "md" | null | undefined;
|
|
51
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
|
|
70
52
|
variant?: BadgeVariant | undefined;
|
|
71
53
|
intent?: BadgeIntent | undefined;
|
|
72
54
|
/** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the badge follows the nearest `data-brand` ancestor. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa;;8EAelB,CAAC;AAcF;;;;GAIG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAC5D,8EAA8E;AAC9E,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AACrF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAC5D,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,iIAAiI;IACjI,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,CAAC;AAEJ;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,KAAK;;;cAtBJ,YAAY,GAAG,SAAS;aACzB,WAAW,GAAG,SAAS;IAChC,iIAAiI;YACzH,MAAM,GAAG,SAAS;yCA+B5B,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -7,7 +7,7 @@ import * as React from "react";
|
|
|
7
7
|
*
|
|
8
8
|
* Every colour reads a `--badge-*` component token whose value is decided by
|
|
9
9
|
* src/components/Badge/badge.recipe.css. That file is the mapping from
|
|
10
|
-
* `
|
|
10
|
+
* `variant` to the intent slots — the layer that used to be
|
|
11
11
|
* `compoundVariants` here, where it was compiled into class-name literals and
|
|
12
12
|
* unreachable from outside. Nothing in this file names a colour, which is the
|
|
13
13
|
* point: the semantics are now configurable without a release.
|
|
@@ -17,7 +17,15 @@ const badgeVariants = cva(
|
|
|
17
17
|
// space before a `+`, silently welding the last class of one fragment to the
|
|
18
18
|
// first of the next. The screenshots catch it, but a single string means the
|
|
19
19
|
// sorter has nothing to break.
|
|
20
|
-
"badge border-(color:--badge-border) focus:ring-(color:--badge-ring) inline-flex items-center rounded-md border bg-(--badge-bg)
|
|
20
|
+
"badge border-(color:--badge-border) focus:ring-(color:--badge-ring) inline-flex items-center rounded-md border bg-(--badge-bg) font-semibold text-(--badge-fg) transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", {
|
|
21
|
+
variants: {
|
|
22
|
+
size: {
|
|
23
|
+
sm: "px-1.5 py-0 text-[10px]",
|
|
24
|
+
md: "px-2.5 py-0.5 text-xs",
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
defaultVariants: { size: "md" },
|
|
28
|
+
});
|
|
21
29
|
/**
|
|
22
30
|
* The non-colour half of `variant` — elevation only, for Badge. A plain
|
|
23
31
|
* lookup rather than a CVA variant so an unrecognised variant stays a legal
|
|
@@ -29,35 +37,24 @@ const variantStructure = {
|
|
|
29
37
|
soft: "",
|
|
30
38
|
outline: "",
|
|
31
39
|
};
|
|
32
|
-
/**
|
|
33
|
-
* The class string plus the attributes the recipe selects on. `data-brand` is
|
|
34
|
-
* omitted unless `brand` is set, same as `buttonRecipe`.
|
|
35
|
-
*/
|
|
36
|
-
export function badgeRecipe({ variant = "solid", intent = "brand", brand, className }) {
|
|
37
|
-
return {
|
|
38
|
-
className: cn(variantStructure[variant], badgeVariants({ className })),
|
|
39
|
-
"data-variant": variant,
|
|
40
|
-
"data-intent": intent,
|
|
41
|
-
"data-brand": brand,
|
|
42
|
-
};
|
|
43
|
-
}
|
|
44
40
|
/**
|
|
45
41
|
* Small label for status, category, or count.
|
|
46
42
|
*
|
|
47
43
|
* Two independent axes, same split as Button: `variant` is the fill
|
|
48
44
|
* (`solid`, `soft`, `outline`), `intent` is what it signals (`neutral`,
|
|
49
|
-
* `brand`, `danger`, `success`, `warning
|
|
50
|
-
*
|
|
45
|
+
* `brand`, `danger`, `success`, `warning`). `neutral`, the default, is the
|
|
46
|
+
* grey family; a brand-coloured badge says `intent="brand"`. `size` is `sm`
|
|
47
|
+
* or `md` (the default).
|
|
51
48
|
* Renders a `<span>`; purely presentational, so give it visible text — it
|
|
52
49
|
* does not manage an accessible name of its own.
|
|
53
50
|
*
|
|
54
|
-
* Colour is not decided here: each
|
|
55
|
-
*
|
|
56
|
-
* same seam Button uses, so a consumer can re-point a cell
|
|
57
|
-
* release.
|
|
51
|
+
* Colour is not decided here: each variant resolves through a `--badge-*`
|
|
52
|
+
* component token (src/components/Badge/badge.recipe.css) that paints with the
|
|
53
|
+
* intent slots, the same seam Button uses, so a consumer can re-point a cell
|
|
54
|
+
* or add an intent without a release.
|
|
58
55
|
*/
|
|
59
|
-
export const Badge = React.forwardRef(({ className, variant = "solid", intent = "
|
|
60
|
-
return _jsx("span", { ref: ref,
|
|
56
|
+
export const Badge = React.forwardRef(({ className, variant = "solid", intent = "neutral", brand, size, ...props }, ref) => {
|
|
57
|
+
return (_jsx("span", { ref: ref, className: cn(variantStructure[variant], badgeVariants({ size, className })), "data-variant": variant, "data-intent": intent, "data-brand": brand, ...props }));
|
|
61
58
|
});
|
|
62
59
|
Badge.displayName = "Badge";
|
|
63
60
|
export { badgeVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,MAAM,aAAa,GAAG,GAAG;AACvB,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,+BAA+B;AAC/B,
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,MAAM,aAAa,GAAG,GAAG;AACvB,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,+BAA+B;AAC/B,wOAAwO,EACxO;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,yBAAyB;YAC7B,EAAE,EAAE,uBAAuB;SAC5B;KACF;IACD,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;CAChC,CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,EAAE;CACZ,CAAC;AAuBF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA8B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtJ,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,kBAE9D,OAAO,iBACR,MAAM,gBACP,KAAK,KACb,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Badge, type BadgeIntent, type BadgeIntentName, type BadgeProps, type BadgeVariant, type BadgeVariantName,
|
|
1
|
+
export { Badge, type BadgeIntent, type BadgeIntentName, type BadgeProps, type BadgeVariant, type BadgeVariantName, badgeVariants, } from "./Badge.js";
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,aAAa,GACd,MAAM,SAAS,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Badge,
|
|
1
|
+
export { Badge, badgeVariants, } from "./Badge.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAML,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAML,aAAa,GACd,MAAM,SAAS,CAAC"}
|
|
@@ -5,13 +5,13 @@ import * as React from "react";
|
|
|
5
5
|
*
|
|
6
6
|
* Every colour reads a `--button-*` component token whose value is decided by
|
|
7
7
|
* src/components/Button/button.recipe.css. That file is the mapping from
|
|
8
|
-
* `(variant,
|
|
8
|
+
* `(variant, state)` to the intent slots — the layer that used to be
|
|
9
9
|
* `compoundVariants` here, where it was compiled into class-name literals and
|
|
10
10
|
* unreachable from outside. Nothing in this file names a colour, which is the
|
|
11
11
|
* point: the semantics are now configurable without a release.
|
|
12
12
|
*/
|
|
13
13
|
declare const buttonVariants: (props?: ({
|
|
14
|
-
size?: "
|
|
14
|
+
size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
|
|
15
15
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
16
16
|
/**
|
|
17
17
|
* Widened deliberately. Adding a variant or an intent is a CSS change in the
|
|
@@ -19,39 +19,14 @@ declare const buttonVariants: (props?: ({
|
|
|
19
19
|
* has never heard of, while still autocompleting the ones it ships.
|
|
20
20
|
*
|
|
21
21
|
* The closed unions are exported alongside, because widening a type gives up the
|
|
22
|
-
* ability to narrow it downstream: once `string` is in the union,
|
|
23
|
-
*
|
|
24
|
-
* relies on exactly that exclusion, so it builds on the closed names.
|
|
22
|
+
* ability to narrow it downstream: once `string` is in the union, an `Exclude`
|
|
23
|
+
* can no longer remove anything. Code that must narrow builds on the closed names.
|
|
25
24
|
*/
|
|
26
25
|
type Loose<T extends string> = T | (string & {});
|
|
27
|
-
export type ButtonVariantName = "solid" | "outline" | "ghost"
|
|
26
|
+
export type ButtonVariantName = "solid" | "outline" | "ghost";
|
|
28
27
|
export type ButtonIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
|
|
29
28
|
export type ButtonVariant = Loose<ButtonVariantName>;
|
|
30
29
|
export type ButtonIntent = Loose<ButtonIntentName>;
|
|
31
|
-
export type ButtonRecipeProps = VariantProps<typeof buttonVariants> & {
|
|
32
|
-
variant?: ButtonVariant | undefined;
|
|
33
|
-
intent?: ButtonIntent | undefined;
|
|
34
|
-
/** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
|
|
35
|
-
brand?: string | undefined;
|
|
36
|
-
iconOnly?: boolean | undefined;
|
|
37
|
-
className?: string | undefined;
|
|
38
|
-
};
|
|
39
|
-
/**
|
|
40
|
-
* The class string plus the attributes the recipe selects on.
|
|
41
|
-
*
|
|
42
|
-
* `data-brand` is only emitted when `brand` is set: `undefined` makes React
|
|
43
|
-
* omit the attribute, so the element takes its brand from its surroundings.
|
|
44
|
-
*
|
|
45
|
-
* Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
|
|
46
|
-
* data attributes are half the contract now, so anything reusing that look has
|
|
47
|
-
* to emit them as well or it lands on the recipe's floor instead of a cell.
|
|
48
|
-
*/
|
|
49
|
-
export declare function buttonRecipe({ variant, intent, brand, size, iconOnly, className }: ButtonRecipeProps): {
|
|
50
|
-
className: string;
|
|
51
|
-
"data-variant": ButtonVariant;
|
|
52
|
-
"data-intent": ButtonIntent;
|
|
53
|
-
"data-brand": string | undefined;
|
|
54
|
-
};
|
|
55
30
|
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
|
|
56
31
|
variant?: ButtonVariant | undefined;
|
|
57
32
|
intent?: ButtonIntent | undefined;
|
|
@@ -63,6 +38,8 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Varian
|
|
|
63
38
|
brand?: string | undefined;
|
|
64
39
|
/** Square the button at its current size, for an icon with no label. */
|
|
65
40
|
iconOnly?: boolean;
|
|
41
|
+
/** Render as inline text with no button box — a link-styled action. Ignores `variant`. */
|
|
42
|
+
inline?: boolean;
|
|
66
43
|
asChild?: boolean;
|
|
67
44
|
loading?: boolean;
|
|
68
45
|
};
|
|
@@ -70,9 +47,9 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Varian
|
|
|
70
47
|
* A single action the user can take.
|
|
71
48
|
*
|
|
72
49
|
* Appearance is three independent axes, so every combination is expressible:
|
|
73
|
-
* `variant` is the
|
|
74
|
-
*
|
|
75
|
-
* `
|
|
50
|
+
* `variant` is the treatment (`solid`, `outline`, `ghost`), `intent` is what
|
|
51
|
+
* the action *means* (`neutral` — the default — plus `brand`, `danger`,
|
|
52
|
+
* `success`, `warning`), and `size` is the height scale. Reach for
|
|
76
53
|
* `intent="danger"` on a destructive action rather than a red `variant` — that
|
|
77
54
|
* is the distinction that keeps "outline danger" possible.
|
|
78
55
|
*
|
|
@@ -80,14 +57,17 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Varian
|
|
|
80
57
|
* means on Badge and Message. A brand-coloured button is
|
|
81
58
|
* `intent="brand"` — an affirmative choice, which is why `neutral` is the
|
|
82
59
|
* default: omitting the prop means "no particular meaning", so it should not
|
|
83
|
-
* quietly hand back the brand colour.
|
|
84
|
-
*
|
|
85
|
-
*
|
|
60
|
+
* quietly hand back the brand colour. A primary action says `intent="brand"`
|
|
61
|
+
* out loud.
|
|
62
|
+
*
|
|
63
|
+
* Colour is not decided here. Each variant resolves through a `--button-*`
|
|
64
|
+
* component token painted from the intent slots, so a consumer can re-point
|
|
65
|
+
* any cell — or add an intent this library never shipped — from their own
|
|
66
|
+
* stylesheet. See the Component tokens story below.
|
|
86
67
|
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
* story below.
|
|
68
|
+
* `inline` renders the action as inline text with no box — underline on
|
|
69
|
+
* hover, colour from `intent` — for an action that sits in a line of text or a
|
|
70
|
+
* toast. It is terminal: `variant` is ignored.
|
|
91
71
|
*
|
|
92
72
|
* `iconOnly` squares the box at whatever `size` is set and drops the
|
|
93
73
|
* horizontal padding, for a button whose whole content is an icon — give it an
|
|
@@ -104,7 +84,7 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Varian
|
|
|
104
84
|
* and disables the control, so it does not need `disabled` as well.
|
|
105
85
|
*/
|
|
106
86
|
declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
|
|
107
|
-
size?: "
|
|
87
|
+
size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
|
|
108
88
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
|
|
109
89
|
variant?: ButtonVariant | undefined;
|
|
110
90
|
intent?: ButtonIntent | undefined;
|
|
@@ -116,6 +96,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
|
|
|
116
96
|
brand?: string | undefined;
|
|
117
97
|
/** Square the button at its current size, for an icon with no label. */
|
|
118
98
|
iconOnly?: boolean;
|
|
99
|
+
/** Render as inline text with no button box — a link-styled action. Ignores `variant`. */
|
|
100
|
+
inline?: boolean;
|
|
119
101
|
asChild?: boolean;
|
|
120
102
|
loading?: boolean;
|
|
121
103
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc;;8EAoBnB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc;;8EAoBnB,CAAC;AAuCF;;;;;;;;GAQG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GACrE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,MAAM;;;cAxDE,aAAa,GAAG,SAAS;aAC1B,YAAY,GAAG,SAAS;IACjC;;;;OAIG;YACK,MAAM,GAAG,SAAS;IAC1B,wEAAwE;eAC7D,OAAO;IAClB,0FAA0F;aACjF,OAAO;cACN,OAAO;cACP,OAAO;2CAiGpB,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -8,7 +8,7 @@ import { Slot } from "../../internal/Slot.js";
|
|
|
8
8
|
*
|
|
9
9
|
* Every colour reads a `--button-*` component token whose value is decided by
|
|
10
10
|
* src/components/Button/button.recipe.css. That file is the mapping from
|
|
11
|
-
* `(variant,
|
|
11
|
+
* `(variant, state)` to the intent slots — the layer that used to be
|
|
12
12
|
* `compoundVariants` here, where it was compiled into class-name literals and
|
|
13
13
|
* unreachable from outside. Nothing in this file names a colour, which is the
|
|
14
14
|
* point: the semantics are now configurable without a release.
|
|
@@ -33,7 +33,7 @@ const buttonVariants = cva(
|
|
|
33
33
|
},
|
|
34
34
|
});
|
|
35
35
|
/**
|
|
36
|
-
* The non-colour half of `variant` — border width, elevation
|
|
36
|
+
* The non-colour half of `variant` — border width, elevation.
|
|
37
37
|
*
|
|
38
38
|
* A plain lookup rather than a CVA variant so an unrecognised variant stays a
|
|
39
39
|
* legal value that contributes no structure, leaving a consumer's CSS free to
|
|
@@ -43,8 +43,13 @@ const variantStructure = {
|
|
|
43
43
|
solid: "shadow",
|
|
44
44
|
outline: "border shadow-xs",
|
|
45
45
|
ghost: "",
|
|
46
|
-
link: "underline-offset-4 hover:underline",
|
|
47
46
|
};
|
|
47
|
+
/**
|
|
48
|
+
* `inline` — inline text, no button box. Not a variant: it is different
|
|
49
|
+
* geometry, not a quieter fill, so it replaces the box rather than joining the
|
|
50
|
+
* variant axis. The size's text scale stays; its height and padding go.
|
|
51
|
+
*/
|
|
52
|
+
const inlineGeometry = "h-auto px-0 py-0 underline-offset-4 hover:underline";
|
|
48
53
|
/**
|
|
49
54
|
* Squares the box at whatever size is set, and drops the horizontal padding.
|
|
50
55
|
*
|
|
@@ -61,33 +66,13 @@ const iconOnlyGeometry = {
|
|
|
61
66
|
lg: "w-10 px-0",
|
|
62
67
|
xl: "w-12 px-0",
|
|
63
68
|
};
|
|
64
|
-
/**
|
|
65
|
-
* The class string plus the attributes the recipe selects on.
|
|
66
|
-
*
|
|
67
|
-
* `data-brand` is only emitted when `brand` is set: `undefined` makes React
|
|
68
|
-
* omit the attribute, so the element takes its brand from its surroundings.
|
|
69
|
-
*
|
|
70
|
-
* Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
|
|
71
|
-
* data attributes are half the contract now, so anything reusing that look has
|
|
72
|
-
* to emit them as well or it lands on the recipe's floor instead of a cell.
|
|
73
|
-
*/
|
|
74
|
-
export function buttonRecipe({ variant = "solid", intent = "neutral", brand, size, iconOnly = false, className }) {
|
|
75
|
-
return {
|
|
76
|
-
className: cn(variantStructure[variant],
|
|
77
|
-
// `className` stays last so a caller still outranks the icon geometry.
|
|
78
|
-
buttonVariants({ size, className: cn(iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined, className) })),
|
|
79
|
-
"data-variant": variant,
|
|
80
|
-
"data-intent": intent,
|
|
81
|
-
"data-brand": brand,
|
|
82
|
-
};
|
|
83
|
-
}
|
|
84
69
|
/**
|
|
85
70
|
* A single action the user can take.
|
|
86
71
|
*
|
|
87
72
|
* Appearance is three independent axes, so every combination is expressible:
|
|
88
|
-
* `variant` is the
|
|
89
|
-
*
|
|
90
|
-
* `
|
|
73
|
+
* `variant` is the treatment (`solid`, `outline`, `ghost`), `intent` is what
|
|
74
|
+
* the action *means* (`neutral` — the default — plus `brand`, `danger`,
|
|
75
|
+
* `success`, `warning`), and `size` is the height scale. Reach for
|
|
91
76
|
* `intent="danger"` on a destructive action rather than a red `variant` — that
|
|
92
77
|
* is the distinction that keeps "outline danger" possible.
|
|
93
78
|
*
|
|
@@ -95,14 +80,17 @@ export function buttonRecipe({ variant = "solid", intent = "neutral", brand, siz
|
|
|
95
80
|
* means on Badge and Message. A brand-coloured button is
|
|
96
81
|
* `intent="brand"` — an affirmative choice, which is why `neutral` is the
|
|
97
82
|
* default: omitting the prop means "no particular meaning", so it should not
|
|
98
|
-
* quietly hand back the brand colour.
|
|
99
|
-
*
|
|
100
|
-
*
|
|
83
|
+
* quietly hand back the brand colour. A primary action says `intent="brand"`
|
|
84
|
+
* out loud.
|
|
85
|
+
*
|
|
86
|
+
* Colour is not decided here. Each variant resolves through a `--button-*`
|
|
87
|
+
* component token painted from the intent slots, so a consumer can re-point
|
|
88
|
+
* any cell — or add an intent this library never shipped — from their own
|
|
89
|
+
* stylesheet. See the Component tokens story below.
|
|
101
90
|
*
|
|
102
|
-
*
|
|
103
|
-
*
|
|
104
|
-
*
|
|
105
|
-
* story below.
|
|
91
|
+
* `inline` renders the action as inline text with no box — underline on
|
|
92
|
+
* hover, colour from `intent` — for an action that sits in a line of text or a
|
|
93
|
+
* toast. It is terminal: `variant` is ignored.
|
|
106
94
|
*
|
|
107
95
|
* `iconOnly` squares the box at whatever `size` is set and drops the
|
|
108
96
|
* horizontal padding, for a button whose whole content is an icon — give it an
|
|
@@ -118,9 +106,14 @@ export function buttonRecipe({ variant = "solid", intent = "neutral", brand, siz
|
|
|
118
106
|
* `<button>`, for links that should look like buttons. `loading` shows a spinner
|
|
119
107
|
* and disables the control, so it does not need `disabled` as well.
|
|
120
108
|
*/
|
|
121
|
-
const Button = React.forwardRef(({ className, variant = "solid", intent = "neutral", brand, size, iconOnly = false, asChild = false, loading = false, children, disabled, ...props }, ref) => {
|
|
109
|
+
const Button = React.forwardRef(({ className, variant = "solid", intent = "neutral", brand, size, iconOnly = false, inline = false, asChild = false, loading = false, children, disabled, ...props }, ref) => {
|
|
122
110
|
const Comp = asChild ? Slot : "button";
|
|
123
|
-
|
|
111
|
+
const shape = inline ? inlineGeometry : iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined;
|
|
112
|
+
return (_jsx(Comp
|
|
113
|
+
// `className` stays last so a caller still outranks the shape geometry.
|
|
114
|
+
, {
|
|
115
|
+
// `className` stays last so a caller still outranks the shape geometry.
|
|
116
|
+
className: cn(inline ? undefined : variantStructure[variant], buttonVariants({ size, className: cn(shape, className) })), "data-variant": inline ? undefined : variant, "data-inline": inline ? "true" : undefined, "data-intent": intent, "data-brand": brand, ref: ref, disabled: disabled || loading, ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), children] })) : (children) }));
|
|
124
117
|
});
|
|
125
118
|
Button.displayName = "Button";
|
|
126
119
|
export { Button, buttonVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C;;;;;;;;;GASG;AACH,MAAM,cAAc,GAAG,GAAG;AACxB,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,+BAA+B;AAC/B,2eAA2e,EAC3e;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,eAAe;YACnB,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,iCAAiC;SACtC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CACF,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,kBAAkB;IAC3B,KAAK,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C;;;;;;;;;GASG;AACH,MAAM,cAAc,GAAG,GAAG;AACxB,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,+BAA+B;AAC/B,2eAA2e,EAC3e;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,eAAe;YACnB,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,iCAAiC;SACtC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CACF,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,kBAAkB;IAC3B,KAAK,EAAE,EAAE;CACV,CAAC;AAEF;;;;GAIG;AACH,MAAM,cAAc,GAAG,qDAAqD,CAAC;AAE7E;;;;;;;;GAQG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;CAChB,CAAC;AAoCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,SAAS,EACT,OAAO,GAAG,OAAO,EACjB,MAAM,GAAG,SAAS,EAClB,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9F,OAAO,CACL,KAAC,IAAI;IACH,wEAAwE;;QAAxE,wEAAwE;QACxE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,kBAK1G,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,iBAC7B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,iBAC3B,MAAM,gBACP,KAAK,EACjB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,IAAI,OAAO,KACzB,KAAK,YAER,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,eAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,aACjH,iBAAQ,SAAS,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,GAAG,EAC9F,eACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,iHAAiH,GACnH,IACE,EACL,QAAQ,IACR,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Button, type ButtonIntent, type ButtonIntentName, type ButtonProps, type ButtonVariant, type ButtonVariantName,
|
|
1
|
+
export { Button, type ButtonIntent, type ButtonIntentName, type ButtonProps, type ButtonVariant, type ButtonVariantName, buttonVariants, } from "./Button.js";
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,cAAc,GACf,MAAM,UAAU,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Button,
|
|
1
|
+
export { Button, buttonVariants, } from "./Button.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EAMN,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EAMN,cAAc,GACf,MAAM,UAAU,CAAC"}
|
|
@@ -34,7 +34,7 @@ import * as React from "react";
|
|
|
34
34
|
* spacing; content components set type.
|
|
35
35
|
*/
|
|
36
36
|
export declare const cardVariants: (props?: ({
|
|
37
|
-
size?: "
|
|
37
|
+
size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
|
|
38
38
|
interactive?: boolean | null | undefined;
|
|
39
39
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
40
40
|
export type CardSize = NonNullable<VariantProps<typeof cardVariants>["size"]>;
|
|
@@ -62,7 +62,7 @@ export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & Pi
|
|
|
62
62
|
* without a release.
|
|
63
63
|
*/
|
|
64
64
|
export declare const Card: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & Pick<VariantProps<(props?: ({
|
|
65
|
-
size?: "
|
|
65
|
+
size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
|
|
66
66
|
interactive?: boolean | null | undefined;
|
|
67
67
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string>, "size"> & {
|
|
68
68
|
/** Optional header title - string or ReactNode */
|
|
@@ -47,7 +47,7 @@ export const cardVariants = cva(
|
|
|
47
47
|
sm: "rounded-lg p-3",
|
|
48
48
|
md: "rounded-xl p-4",
|
|
49
49
|
lg: "rounded-xl p-6",
|
|
50
|
-
xl: "rounded-
|
|
50
|
+
xl: "rounded-xl p-8",
|
|
51
51
|
},
|
|
52
52
|
interactive: {
|
|
53
53
|
true: "hover:border-(color:--card-border-hovered) focus-visible:outline-(color:--card-ring) cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG;AAC7B,6EAA6E;AAC7E,6EAA6E;AAC7E,4EAA4E;AAC5E,iFAAiF,EACjF;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG;AAC7B,6EAA6E;AAC7E,6EAA6E;AAC7E,4EAA4E;AAC5E,iFAAiF,EACjF;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,gBAAgB;SACrB;QACD,WAAW,EAAE;YACX,IAAI,EAAE,8KAA8K;YACpL,KAAK,EAAE,EAAE;SACV;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,WAAW,EAAE,KAAK;KACnB;CACF,CACF,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,cAAc,GAAG,GAAG,CAAC,kCAAkC,EAAE;IAC7D,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;SACjB;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAYH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAA4B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxJ,MAAM,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC;IAEhC,MAAM,aAAa,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC/D,IAAI,aAAa,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YAC1D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,EAAE,CAAC,CAAgD,CAAC,CAAC;QAC9D,CAAC;QACD,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO;IACL,6HAA6H;IAC7H,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC,EAAE,SAAS,CAAC,EAC5E,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,aAAa,KACpB,CAAC,aAAa,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,KAClD,KAAK,aAER,CAAC,KAAK,IAAI,YAAY,CAAC,IAAI,CAC1B,eAAK,SAAS,EAAE,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,aACrC,KAAK,IAAI,cAAK,SAAS,EAAC,eAAe,YAAE,KAAK,GAAO,EACrD,YAAY,IAAI,cAAK,SAAS,EAAC,UAAU,YAAE,YAAY,GAAO,IAC3D,CACP,EACA,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
|