@seekalfred/primitives 0.2.0 → 0.3.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 +950 -13
- package/dist/accordion/accordion.d.ts +107 -0
- package/dist/accordion/accordion.js +84 -0
- package/dist/accordion/accordion.js.map +1 -0
- package/dist/accordion/index.d.ts +2 -0
- package/dist/accordion/index.js +2 -0
- package/dist/alert/alert.d.ts +68 -0
- package/dist/alert/alert.js +67 -0
- package/dist/alert/alert.js.map +1 -0
- package/dist/alert/index.d.ts +2 -0
- package/dist/alert/index.js +2 -0
- package/dist/alert-dialog/alert-dialog.d.ts +53 -0
- package/dist/alert-dialog/alert-dialog.js +16 -0
- package/dist/alert-dialog/alert-dialog.js.map +1 -0
- package/dist/alert-dialog/index.d.ts +2 -0
- package/dist/alert-dialog/index.js +2 -0
- package/dist/avatar/avatar.d.ts +50 -0
- package/dist/avatar/avatar.js +91 -0
- package/dist/avatar/avatar.js.map +1 -0
- package/dist/avatar/index.d.ts +2 -0
- package/dist/avatar/index.js +2 -0
- package/dist/badge/badge.d.ts +47 -0
- package/dist/badge/badge.js +189 -0
- package/dist/badge/badge.js.map +1 -0
- package/dist/badge/index.d.ts +2 -0
- package/dist/badge/index.js +2 -0
- package/dist/breadcrumb/breadcrumb.d.ts +98 -0
- package/dist/breadcrumb/breadcrumb.js +93 -0
- package/dist/breadcrumb/breadcrumb.js.map +1 -0
- package/dist/breadcrumb/index.d.ts +2 -0
- package/dist/breadcrumb/index.js +2 -0
- package/dist/button/button.d.ts +1 -1
- package/dist/button/button.js +7 -0
- package/dist/button/button.js.map +1 -1
- package/dist/calendar/calendar.d.ts +154 -0
- package/dist/calendar/calendar.js +282 -0
- package/dist/calendar/calendar.js.map +1 -0
- package/dist/calendar/index.d.ts +2 -0
- package/dist/calendar/index.js +2 -0
- package/dist/card/card.d.ts +93 -0
- package/dist/card/card.js +105 -0
- package/dist/card/card.js.map +1 -0
- package/dist/card/index.d.ts +2 -0
- package/dist/card/index.js +2 -0
- package/dist/checkbox/checkbox.d.ts +63 -0
- package/dist/checkbox/checkbox.js +94 -0
- package/dist/checkbox/checkbox.js.map +1 -0
- package/dist/checkbox/index.d.ts +2 -0
- package/dist/checkbox/index.js +2 -0
- package/dist/dialog/dialog.d.ts +140 -0
- package/dist/dialog/dialog.js +127 -0
- package/dist/dialog/dialog.js.map +1 -0
- package/dist/dialog/index.d.ts +2 -0
- package/dist/dialog/index.js +2 -0
- package/dist/index.d.ts +30 -1
- package/dist/index.js +30 -1
- package/dist/input/index.d.ts +2 -0
- package/dist/input/index.js +2 -0
- package/dist/input/input.d.ts +64 -0
- package/dist/input/input.js +94 -0
- package/dist/input/input.js.map +1 -0
- package/dist/label/index.d.ts +2 -0
- package/dist/label/index.js +2 -0
- package/dist/label/label.d.ts +41 -0
- package/dist/label/label.js +44 -0
- package/dist/label/label.js.map +1 -0
- package/dist/lib/field-surface.js +40 -0
- package/dist/lib/field-surface.js.map +1 -0
- package/dist/lib/selection-control.js +57 -0
- package/dist/lib/selection-control.js.map +1 -0
- package/dist/menu/index.d.ts +2 -0
- package/dist/menu/index.js +2 -0
- package/dist/menu/menu.d.ts +98 -0
- package/dist/menu/menu.js +99 -0
- package/dist/menu/menu.js.map +1 -0
- package/dist/popover/index.d.ts +2 -0
- package/dist/popover/index.js +2 -0
- package/dist/popover/popover.d.ts +50 -0
- package/dist/popover/popover.js +46 -0
- package/dist/popover/popover.js.map +1 -0
- package/dist/progress/index.d.ts +2 -0
- package/dist/progress/index.js +2 -0
- package/dist/progress/progress.d.ts +82 -0
- package/dist/progress/progress.js +82 -0
- package/dist/progress/progress.js.map +1 -0
- package/dist/radio-group/index.d.ts +2 -0
- package/dist/radio-group/index.js +2 -0
- package/dist/radio-group/radio-group.d.ts +53 -0
- package/dist/radio-group/radio-group.js +65 -0
- package/dist/radio-group/radio-group.js.map +1 -0
- package/dist/scroll-area/index.d.ts +2 -0
- package/dist/scroll-area/index.js +2 -0
- package/dist/scroll-area/scroll-area.d.ts +74 -0
- package/dist/scroll-area/scroll-area.js +63 -0
- package/dist/scroll-area/scroll-area.js.map +1 -0
- package/dist/select/index.d.ts +2 -0
- package/dist/select/index.js +2 -0
- package/dist/select/select.d.ts +93 -0
- package/dist/select/select.js +132 -0
- package/dist/select/select.js.map +1 -0
- package/dist/separator/index.d.ts +2 -0
- package/dist/separator/index.js +2 -0
- package/dist/separator/separator.d.ts +42 -0
- package/dist/separator/separator.js +49 -0
- package/dist/separator/separator.js.map +1 -0
- package/dist/sheet/index.d.ts +2 -0
- package/dist/sheet/index.js +2 -0
- package/dist/sheet/sheet.d.ts +96 -0
- package/dist/sheet/sheet.js +98 -0
- package/dist/sheet/sheet.js.map +1 -0
- package/dist/skeleton/index.d.ts +2 -0
- package/dist/skeleton/index.js +2 -0
- package/dist/skeleton/skeleton.d.ts +33 -0
- package/dist/skeleton/skeleton.js +42 -0
- package/dist/skeleton/skeleton.js.map +1 -0
- package/dist/slider/index.d.ts +2 -0
- package/dist/slider/index.js +2 -0
- package/dist/slider/slider.d.ts +70 -0
- package/dist/slider/slider.js +92 -0
- package/dist/slider/slider.js.map +1 -0
- package/dist/spinner/index.d.ts +2 -0
- package/dist/spinner/index.js +2 -0
- package/dist/spinner/spinner.d.ts +75 -0
- package/dist/spinner/spinner.js +68 -0
- package/dist/spinner/spinner.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/switch/index.d.ts +2 -0
- package/dist/switch/index.js +2 -0
- package/dist/switch/switch.d.ts +50 -0
- package/dist/switch/switch.js +66 -0
- package/dist/switch/switch.js.map +1 -0
- package/dist/table/index.d.ts +2 -0
- package/dist/table/index.js +2 -0
- package/dist/table/table.d.ts +288 -0
- package/dist/table/table.js +513 -0
- package/dist/table/table.js.map +1 -0
- package/dist/tabs/index.d.ts +2 -0
- package/dist/tabs/index.js +2 -0
- package/dist/tabs/tabs.d.ts +79 -0
- package/dist/tabs/tabs.js +103 -0
- package/dist/tabs/tabs.js.map +1 -0
- package/dist/textarea/index.d.ts +2 -0
- package/dist/textarea/index.js +2 -0
- package/dist/textarea/textarea.d.ts +27 -0
- package/dist/textarea/textarea.js +37 -0
- package/dist/textarea/textarea.js.map +1 -0
- package/dist/toast/index.d.ts +2 -0
- package/dist/toast/index.js +2 -0
- package/dist/toast/toast.d.ts +93 -0
- package/dist/toast/toast.js +145 -0
- package/dist/toast/toast.js.map +1 -0
- package/dist/tooltip/index.d.ts +2 -0
- package/dist/tooltip/index.js +2 -0
- package/dist/tooltip/tooltip.d.ts +70 -0
- package/dist/tooltip/tooltip.js +65 -0
- package/dist/tooltip/tooltip.js.map +1 -0
- package/package.json +125 -7
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.js";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { Menu, MenuItem, MenuTrigger, Popover, Separator } from "react-aria-components";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
//#region src/menu/menu.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Menu, ported from the legacy shadcn/Radix `dropdown-menu` onto React
|
|
9
|
+
* Aria's Menu collection.
|
|
10
|
+
*
|
|
11
|
+
* FIFTEEN EXPORTS BECOME FOUR, and the census is unambiguous about it. Ten
|
|
12
|
+
* files import the legacy component but only EIGHT render anything --
|
|
13
|
+
* `header.tsx` and `PollQuizCreator.tsx` import parts and use none. Across
|
|
14
|
+
* those eight: `DropdownMenuItem` 42, `DropdownMenu` 13,
|
|
15
|
+
* `DropdownMenuTrigger` 13, `DropdownMenuContent` 13,
|
|
16
|
+
* `DropdownMenuSeparator` 2.
|
|
17
|
+
*
|
|
18
|
+
* Everything else is ZERO: `Group`, `CheckboxItem`, `RadioGroup`,
|
|
19
|
+
* `RadioItem`, `Label`, `Shortcut`, `Sub`, `SubTrigger`, `SubContent`,
|
|
20
|
+
* `Portal`. Nine exports, no call sites. React Aria has `MenuSection`,
|
|
21
|
+
* `Header` and selection modes ready if any of them turns out to be
|
|
22
|
+
* wanted -- they are one component each, added the day something needs one.
|
|
23
|
+
*
|
|
24
|
+
* `variant="destructive"` is also never passed, which resolves a real
|
|
25
|
+
* problem rather than dodging one: `destructive-strong` on a `muted` hover
|
|
26
|
+
* fill measures 4.29:1 against a 4.5 floor. The legacy has the same defect
|
|
27
|
+
* unmeasured and worse (its `destructive/10` composite gives 4.01:1). With
|
|
28
|
+
* no call site there is nothing to ship and nothing to weaken the contract
|
|
29
|
+
* for.
|
|
30
|
+
*
|
|
31
|
+
* The surface is `card`, not a `popover` role: in the legacy theme
|
|
32
|
+
* `--popover` is byte-identical to `--card` in both themes. Item hover is
|
|
33
|
+
* `muted`, not `accent`: `--accent` is byte-identical to `--muted`. Two
|
|
34
|
+
* more of the migration plan's proposed roles that already exist.
|
|
35
|
+
*
|
|
36
|
+
* Every string in the cva blocks below is a STATIC literal.
|
|
37
|
+
*/
|
|
38
|
+
const menuPopoverVariants = cva([
|
|
39
|
+
"min-w-32 overflow-y-auto",
|
|
40
|
+
"rounded-md border-(length:--border-width) border-border p-1",
|
|
41
|
+
"bg-card text-card-foreground shadow-floating",
|
|
42
|
+
"box-border font-sans text-sm leading-(--leading-normal)"
|
|
43
|
+
]);
|
|
44
|
+
const menuVariants = cva(["flex flex-col outline-none"]);
|
|
45
|
+
const menuItemVariants = cva([
|
|
46
|
+
"relative flex cursor-pointer select-none items-center gap-2",
|
|
47
|
+
"rounded-2xs px-2 py-1.5",
|
|
48
|
+
"box-border text-sm leading-(--leading-normal) text-card-foreground",
|
|
49
|
+
"outline-none",
|
|
50
|
+
"data-[focused]:bg-muted",
|
|
51
|
+
"data-[focus-visible]:outline-solid",
|
|
52
|
+
"data-[focus-visible]:outline-(length:--focus-ring-width)",
|
|
53
|
+
"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
|
|
54
|
+
"data-[focus-visible]:outline-(--color-ring)",
|
|
55
|
+
"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)",
|
|
56
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
57
|
+
"[&_svg:not([class*='size-'])]:size-(--icon-sm)"
|
|
58
|
+
]);
|
|
59
|
+
const menuSeparatorVariants = cva(["-mx-1 my-1 h-px bg-border border-none"]);
|
|
60
|
+
function Menu$1({ children, className, placement = "bottom start", offset = 4, ...props }) {
|
|
61
|
+
return /* @__PURE__ */ jsx(Popover, {
|
|
62
|
+
placement,
|
|
63
|
+
offset,
|
|
64
|
+
"data-slot": "menu-popover",
|
|
65
|
+
className: cn(menuPopoverVariants(), className),
|
|
66
|
+
children: /* @__PURE__ */ jsx(Menu, {
|
|
67
|
+
...props,
|
|
68
|
+
"data-slot": "menu",
|
|
69
|
+
className: menuVariants(),
|
|
70
|
+
children
|
|
71
|
+
})
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
function MenuItem$1({ className, ...props }) {
|
|
75
|
+
return /* @__PURE__ */ jsx(MenuItem, {
|
|
76
|
+
...props,
|
|
77
|
+
"data-slot": "menu-item",
|
|
78
|
+
className: cn(menuItemVariants(), className)
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* A divider between groups of items.
|
|
83
|
+
*
|
|
84
|
+
* A real collection child: React Aria's `Separator` is a `SeparatorNode`,
|
|
85
|
+
* so unlike an arbitrary element it is legal inside a Menu. Inside one it
|
|
86
|
+
* renders `<div role="separator">` rather than the `<hr>` it uses
|
|
87
|
+
* standalone, because `MenuInner` supplies `elementType: 'div'` -- an
|
|
88
|
+
* `<hr>` is not valid inside a `role="menu"` container.
|
|
89
|
+
*/
|
|
90
|
+
function MenuSeparator({ className }) {
|
|
91
|
+
return /* @__PURE__ */ jsx(Separator, {
|
|
92
|
+
"data-slot": "menu-separator",
|
|
93
|
+
className: cn(menuSeparatorVariants(), className)
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
//#endregion
|
|
97
|
+
export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants };
|
|
98
|
+
|
|
99
|
+
//# sourceMappingURL=menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.js","names":["Menu","AriaPopover","AriaMenu","MenuItem","AriaMenuItem","AriaSeparator"],"sources":["../../src/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n Menu as AriaMenu,\n MenuItem as AriaMenuItem,\n Popover as AriaPopover,\n Separator as AriaSeparator,\n type MenuItemProps as AriaMenuItemProps,\n type MenuProps as AriaMenuProps,\n type PopoverProps as AriaPopoverProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Menu, ported from the legacy shadcn/Radix `dropdown-menu` onto React\n * Aria's Menu collection.\n *\n * FIFTEEN EXPORTS BECOME FOUR, and the census is unambiguous about it. Ten\n * files import the legacy component but only EIGHT render anything --\n * `header.tsx` and `PollQuizCreator.tsx` import parts and use none. Across\n * those eight: `DropdownMenuItem` 42, `DropdownMenu` 13,\n * `DropdownMenuTrigger` 13, `DropdownMenuContent` 13,\n * `DropdownMenuSeparator` 2.\n *\n * Everything else is ZERO: `Group`, `CheckboxItem`, `RadioGroup`,\n * `RadioItem`, `Label`, `Shortcut`, `Sub`, `SubTrigger`, `SubContent`,\n * `Portal`. Nine exports, no call sites. React Aria has `MenuSection`,\n * `Header` and selection modes ready if any of them turns out to be\n * wanted -- they are one component each, added the day something needs one.\n *\n * `variant=\"destructive\"` is also never passed, which resolves a real\n * problem rather than dodging one: `destructive-strong` on a `muted` hover\n * fill measures 4.29:1 against a 4.5 floor. The legacy has the same defect\n * unmeasured and worse (its `destructive/10` composite gives 4.01:1). With\n * no call site there is nothing to ship and nothing to weaken the contract\n * for.\n *\n * The surface is `card`, not a `popover` role: in the legacy theme\n * `--popover` is byte-identical to `--card` in both themes. Item hover is\n * `muted`, not `accent`: `--accent` is byte-identical to `--muted`. Two\n * more of the migration plan's proposed roles that already exist.\n *\n * Every string in the cva blocks below is a STATIC literal.\n */\nexport const menuPopoverVariants = cva([\n // min-w-32 is 8rem, the legacy min-w-[8rem] -- but as a spacing-scale\n // step rather than a bracket value that check:hardcoding rejects.\n \"min-w-32 overflow-y-auto\",\n \"rounded-md border-(length:--border-width) border-border p-1\",\n \"bg-card text-card-foreground shadow-floating\",\n \"box-border font-sans text-sm leading-(--leading-normal)\",\n]);\n\nexport const menuVariants = cva([\n \"flex flex-col outline-none\",\n]);\n\nexport const menuItemVariants = cva([\n \"relative flex cursor-pointer select-none items-center gap-2\",\n \"rounded-2xs px-2 py-1.5\",\n \"box-border text-sm leading-(--leading-normal) text-card-foreground\",\n \"outline-none\",\n\n // data-focused, NOT :hover. React Aria drives one highlight from both\n // pointer and keyboard, so the row under the mouse and the row the arrow\n // keys reached are the same row -- the legacy used `focus:` for the\n // keyboard and nothing for hover, so a mouse user saw no highlight at all\n // until the item took focus.\n \"data-[focused]:bg-muted\",\n\n // The focus ring goes on the ITEM, and it is an outline rather than a\n // background alone: a highlight made only of colour disappears under\n // forced-colors, and axe has no rule that would notice.\n \"data-[focus-visible]:outline-solid\",\n \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n \"data-[focus-visible]:outline-(--color-ring)\",\n\n \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const menuSeparatorVariants = cva([\"-mx-1 my-1 h-px bg-border border-none\"]);\n\n/**\n * A dropdown menu.\n *\n * @example\n * <MenuTrigger>\n * <Button>Actions</Button>\n * <Menu onAction={(key) => run(key)}>\n * <MenuItem id=\"edit\">Edit</MenuItem>\n * <MenuSeparator />\n * <MenuItem id=\"delete\">Delete</MenuItem>\n * </Menu>\n * </MenuTrigger>\n */\nexport interface MenuProps\n extends Omit<AriaMenuProps<object>, \"className\" | \"style\" | \"children\" | \"items\"> {\n /** `MenuItem` and `MenuSeparator` children. */\n children?: ReactNode;\n /** Extra classes for the popover. Merged last, so they win conflicts. */\n className?: string;\n /**\n * Where the menu opens, as React Aria's single `placement` string.\n *\n * The legacy split this across `side`, `align`, `sideOffset` and\n * `alignOffset`. Its census reads `align=\"end\"` 10 and `align=\"center\"`\n * 2, always with the default bottom side -- so `\"bottom end\"` covers ten\n * of the twelve.\n *\n * @default \"bottom start\"\n */\n placement?: AriaPopoverProps[\"placement\"];\n /** Gap between the trigger and the menu. @default 4 */\n offset?: number;\n}\n\nexport function Menu({\n children,\n className,\n placement = \"bottom start\",\n offset = 4,\n ...props\n}: MenuProps) {\n return (\n <AriaPopover\n placement={placement}\n offset={offset}\n data-slot=\"menu-popover\"\n className={cn(menuPopoverVariants(), className)}\n >\n <AriaMenu {...props} data-slot=\"menu\" className={menuVariants()}>\n {children}\n </AriaMenu>\n </AriaPopover>\n );\n}\n\n/**\n * One menu row.\n *\n * @example\n * <MenuItem id=\"edit\">Edit</MenuItem>\n * <MenuItem href=\"/settings\">Settings</MenuItem>\n */\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, \"className\" | \"style\"> {\n /** Extra classes. Merged last, so they win conflicts with ours. */\n className?: string;\n}\n\nexport function MenuItem({ className, ...props }: MenuItemProps) {\n return (\n <AriaMenuItem {...props} data-slot=\"menu-item\" className={cn(menuItemVariants(), className)} />\n );\n}\n\n/**\n * A divider between groups of items.\n *\n * A real collection child: React Aria's `Separator` is a `SeparatorNode`,\n * so unlike an arbitrary element it is legal inside a Menu. Inside one it\n * renders `<div role=\"separator\">` rather than the `<hr>` it uses\n * standalone, because `MenuInner` supplies `elementType: 'div'` -- an\n * `<hr>` is not valid inside a `role=\"menu\"` container.\n */\nexport function MenuSeparator({ className }: { className?: string }) {\n return (\n <AriaSeparator\n data-slot=\"menu-separator\"\n className={cn(menuSeparatorVariants(), className)}\n />\n );\n}\n\n/**\n * Pairs a trigger with a menu and owns the open state.\n *\n * Re-exported from React Aria unchanged. It takes the trigger element\n * directly as its first child, which is what `asChild` was doing on all 13\n * legacy call sites.\n */\nexport { MenuTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,sBAAsB,IAAI;CAGrC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,eAAe,IAAI,CAC9B,4BACF,CAAC;AAED,MAAa,mBAAmB,IAAI;CAClC;CACA;CACA;CACA;CAOA;CAKA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,CAAC;AAED,MAAa,wBAAwB,IAAI,CAAC,uCAAuC,CAAC;AAoClF,SAAgBA,OAAK,EACnB,UACA,WACA,YAAY,gBACZ,SAAS,GACT,GAAG,SACS;CACZ,OACE,oBAACC,SAAD;EACa;EACH;EACR,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;EAE9C,UAAA,oBAACC,MAAD;GAAU,GAAI;GAAO,aAAU;GAAO,WAAW,aAAa;GAC3D;EACO,CAAA;CACC,CAAA;AAEjB;AAcA,SAAgBC,WAAS,EAAE,WAAW,GAAG,SAAwB;CAC/D,OACE,oBAACC,UAAD;EAAc,GAAI;EAAO,aAAU;EAAY,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAAI,CAAA;AAElG;;;;;;;;;;AAWA,SAAgB,cAAc,EAAE,aAAqC;CACnE,OACE,oBAACC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,GAAG,SAAS;CACjD,CAAA;AAEL"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { DialogTrigger as PopoverTrigger, PopoverProps } from "react-aria-components";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
//#region src/popover/popover.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Popover, ported from the legacy shadcn/Radix component.
|
|
6
|
+
*
|
|
7
|
+
* Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`
|
|
8
|
+
* twice, `align="start"` once. `PopoverAnchor` is exported by the legacy
|
|
9
|
+
* and imported by nobody, so it is not ported; neither are `side`,
|
|
10
|
+
* `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,
|
|
11
|
+
* `collisionPadding` or `avoidCollisions` -- zero call sites each. Both
|
|
12
|
+
* existing uses are uncontrolled.
|
|
13
|
+
*
|
|
14
|
+
* IT GAINS AN ACCESSIBLE NAME. The legacy renders `role="dialog"` with no
|
|
15
|
+
* `aria-label` and no `aria-labelledby`, so both call sites announce an
|
|
16
|
+
* unnamed dialog. React Aria labels the popover from its trigger
|
|
17
|
+
* automatically once the two are paired, which is the only way to build
|
|
18
|
+
* one here.
|
|
19
|
+
*
|
|
20
|
+
* The surface is `card`: in the legacy theme `--popover` is byte-identical
|
|
21
|
+
* to `--card` in both themes, so the role the migration plan proposed
|
|
22
|
+
* already exists under another name.
|
|
23
|
+
*/
|
|
24
|
+
export declare const popoverVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
25
|
+
/**
|
|
26
|
+
* Content anchored to a trigger.
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* <PopoverTrigger>
|
|
30
|
+
* <Button>Pick a date</Button>
|
|
31
|
+
* <Popover placement="bottom start">...</Popover>
|
|
32
|
+
* </PopoverTrigger>
|
|
33
|
+
*/
|
|
34
|
+
interface PopoverProps$1 extends Omit<PopoverProps, "className" | "style" | "children"> {
|
|
35
|
+
children?: ReactNode;
|
|
36
|
+
/** Extra classes. Merged last, so they win conflicts with ours. */
|
|
37
|
+
className?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Where it opens, as React Aria's single `placement` string. The legacy
|
|
40
|
+
* split this across `side` and `align`; its one non-default call site is
|
|
41
|
+
* `align="start"`, which is `"bottom start"` here.
|
|
42
|
+
*
|
|
43
|
+
* @default "bottom"
|
|
44
|
+
*/
|
|
45
|
+
placement?: PopoverProps["placement"];
|
|
46
|
+
}
|
|
47
|
+
declare function Popover$1({ children, className, placement, offset, ...props }: PopoverProps$1): import("react").JSX.Element;
|
|
48
|
+
//#endregion
|
|
49
|
+
export { Popover$1 as Popover, PopoverProps$1 as PopoverProps, PopoverTrigger };
|
|
50
|
+
//# sourceMappingURL=popover.d.ts.map
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.js";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { DialogTrigger as PopoverTrigger, Popover } from "react-aria-components";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
//#region src/popover/popover.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Popover, ported from the legacy shadcn/Radix component.
|
|
9
|
+
*
|
|
10
|
+
* Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`
|
|
11
|
+
* twice, `align="start"` once. `PopoverAnchor` is exported by the legacy
|
|
12
|
+
* and imported by nobody, so it is not ported; neither are `side`,
|
|
13
|
+
* `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,
|
|
14
|
+
* `collisionPadding` or `avoidCollisions` -- zero call sites each. Both
|
|
15
|
+
* existing uses are uncontrolled.
|
|
16
|
+
*
|
|
17
|
+
* IT GAINS AN ACCESSIBLE NAME. The legacy renders `role="dialog"` with no
|
|
18
|
+
* `aria-label` and no `aria-labelledby`, so both call sites announce an
|
|
19
|
+
* unnamed dialog. React Aria labels the popover from its trigger
|
|
20
|
+
* automatically once the two are paired, which is the only way to build
|
|
21
|
+
* one here.
|
|
22
|
+
*
|
|
23
|
+
* The surface is `card`: in the legacy theme `--popover` is byte-identical
|
|
24
|
+
* to `--card` in both themes, so the role the migration plan proposed
|
|
25
|
+
* already exists under another name.
|
|
26
|
+
*/
|
|
27
|
+
const popoverVariants = cva([
|
|
28
|
+
"w-72 rounded-md border-(length:--border-width) border-border p-4",
|
|
29
|
+
"bg-card text-card-foreground shadow-floating",
|
|
30
|
+
"box-border font-sans text-sm leading-(--leading-normal)",
|
|
31
|
+
"outline-none"
|
|
32
|
+
]);
|
|
33
|
+
function Popover$1({ children, className, placement = "bottom", offset = 4, ...props }) {
|
|
34
|
+
return /* @__PURE__ */ jsx(Popover, {
|
|
35
|
+
...props,
|
|
36
|
+
placement,
|
|
37
|
+
offset,
|
|
38
|
+
"data-slot": "popover",
|
|
39
|
+
className: cn(popoverVariants(), className),
|
|
40
|
+
children
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
//#endregion
|
|
44
|
+
export { Popover$1 as Popover, PopoverTrigger, popoverVariants };
|
|
45
|
+
|
|
46
|
+
//# sourceMappingURL=popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover.js","names":["Popover","AriaPopover"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n Popover as AriaPopover,\n type PopoverProps as AriaPopoverProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Popover, ported from the legacy shadcn/Radix component.\n *\n * Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`\n * twice, `align=\"start\"` once. `PopoverAnchor` is exported by the legacy\n * and imported by nobody, so it is not ported; neither are `side`,\n * `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,\n * `collisionPadding` or `avoidCollisions` -- zero call sites each. Both\n * existing uses are uncontrolled.\n *\n * IT GAINS AN ACCESSIBLE NAME. The legacy renders `role=\"dialog\"` with no\n * `aria-label` and no `aria-labelledby`, so both call sites announce an\n * unnamed dialog. React Aria labels the popover from its trigger\n * automatically once the two are paired, which is the only way to build\n * one here.\n *\n * The surface is `card`: in the legacy theme `--popover` is byte-identical\n * to `--card` in both themes, so the role the migration plan proposed\n * already exists under another name.\n */\nexport const popoverVariants = cva([\n // w-72 (288px) is the legacy default width, as a spacing-scale step.\n \"w-72 rounded-md border-(length:--border-width) border-border p-4\",\n \"bg-card text-card-foreground shadow-floating\",\n // The reset in @seekalfred/styles is OPT-IN, so a consumer may load\n // none: an unstyled document renders text in a serif, and content-box\n // would add the 16px padding on top of the width.\n \"box-border font-sans text-sm leading-(--leading-normal)\",\n // React Aria gives the popover tabindex=-1 and focuses it on open, so it\n // can take a focus ring it does not want.\n \"outline-none\",\n]);\n\n/**\n * Content anchored to a trigger.\n *\n * @example\n * <PopoverTrigger>\n * <Button>Pick a date</Button>\n * <Popover placement=\"bottom start\">...</Popover>\n * </PopoverTrigger>\n */\nexport interface PopoverProps\n extends Omit<AriaPopoverProps, \"className\" | \"style\" | \"children\"> {\n children?: ReactNode;\n /** Extra classes. Merged last, so they win conflicts with ours. */\n className?: string;\n /**\n * Where it opens, as React Aria's single `placement` string. The legacy\n * split this across `side` and `align`; its one non-default call site is\n * `align=\"start\"`, which is `\"bottom start\"` here.\n *\n * @default \"bottom\"\n */\n placement?: AriaPopoverProps[\"placement\"];\n}\n\nexport function Popover({\n children,\n className,\n placement = \"bottom\",\n offset = 4,\n ...props\n}: PopoverProps) {\n return (\n <AriaPopover\n {...props}\n placement={placement}\n offset={offset}\n data-slot=\"popover\"\n className={cn(popoverVariants(), className)}\n >\n {/*\n No inner Dialog. Wrapping the content in one is the common React\n Aria idiom and it was in the first draft here -- but deleting it\n broke no assertion, so it was doing nothing: a Popover under a\n DialogTrigger already gets role=\"dialog\", a focus scope, and\n aria-labelledby pointing at the trigger. The wrapper was one more\n element and one more className to explain.\n */}\n {children}\n </AriaPopover>\n );\n}\n\n/**\n * Pairs a trigger with a popover and owns the open state.\n *\n * React Aria's `DialogTrigger`, renamed for the migration: it takes the\n * trigger element directly as its first child, which is what `asChild` was\n * doing on both legacy call sites.\n */\nexport { DialogTrigger as PopoverTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,kBAAkB,IAAI;CAEjC;CACA;CAIA;CAGA;AACF,CAAC;AA0BD,SAAgBA,UAAQ,EACtB,UACA,WACA,YAAY,UACZ,SAAS,GACT,GAAG,SACY;CACf,OACE,oBAACC,SAAD;EACE,GAAI;EACO;EACH;EACR,aAAU;EACV,WAAW,GAAG,gBAAgB,GAAG,SAAS;EAUzC;CACU,CAAA;AAEjB"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import { ProgressBarProps } from "react-aria-components";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
//#region src/progress/progress.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* Progress, ported from the legacy shadcn/Radix component.
|
|
7
|
+
*
|
|
8
|
+
* Census: seven files import it and only TWO render anything --
|
|
9
|
+
* `ResponseOption.tsx` and `LiveQA.tsx`. Both pass `value` and
|
|
10
|
+
* `className` and nothing else.
|
|
11
|
+
*
|
|
12
|
+
* `label` IS REQUIRED, and that is the point. Neither live call site
|
|
13
|
+
* passes `aria-label`, `aria-labelledby` or an `id` a label targets, and
|
|
14
|
+
* `role="progressbar"` does not take its name from content -- so both
|
|
15
|
+
* rendered progress bars are announced as an unnamed progressbar. React
|
|
16
|
+
* Aria supplies the plumbing for three naming routes but no name of its
|
|
17
|
+
* own: `<ProgressBar value={60}/>` is just as nameless there. Making the
|
|
18
|
+
* prop required is what turns it into something you cannot forget.
|
|
19
|
+
*
|
|
20
|
+
* The migration plan said this component "adds the missing
|
|
21
|
+
* aria-valuenow". That is wrong -- Radix already supplies `aria-valuenow`,
|
|
22
|
+
* `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. The missing thing
|
|
23
|
+
* was always the NAME.
|
|
24
|
+
*
|
|
25
|
+
* THE COLOURS ARE NOT THE LEGACY'S. Its track is `bg-primary/20`, an alpha
|
|
26
|
+
* fill that composites against unknown page content and therefore has no
|
|
27
|
+
* fixed contrast pair at all -- over white it is roughly 1.05:1, an
|
|
28
|
+
* invisible boundary. Its indicator is `bg-primary`, 2.44:1 on the page.
|
|
29
|
+
* Here the track is `muted` with a `border` boundary and the fill is
|
|
30
|
+
* `primary-strong`, which puts the fill against the track at 4.61:1 and
|
|
31
|
+
* the track against the page at 5.25:1.
|
|
32
|
+
*
|
|
33
|
+
* Both are in the build-failing contrast contract.
|
|
34
|
+
*/
|
|
35
|
+
export declare const progressVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
36
|
+
export declare const progressTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
37
|
+
export declare const progressFillVariants: (props?: ({
|
|
38
|
+
tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
|
|
39
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
40
|
+
/**
|
|
41
|
+
* A determinate or indeterminate progress bar.
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* <Progress label="Upload" value={62} />
|
|
45
|
+
* <Progress label="Loading results" />
|
|
46
|
+
*/
|
|
47
|
+
export interface ProgressProps extends Omit<ProgressBarProps, "className" | "style" | "children">, VariantProps<typeof progressFillVariants> {
|
|
48
|
+
/**
|
|
49
|
+
* What is progressing, and the bar's accessible name.
|
|
50
|
+
*
|
|
51
|
+
* **Required.** Both legacy call sites render an unnamed progressbar.
|
|
52
|
+
* Pass `labelHidden` when the surrounding UI already says it.
|
|
53
|
+
*/
|
|
54
|
+
label: ReactNode;
|
|
55
|
+
/**
|
|
56
|
+
* Render the label for screen readers only.
|
|
57
|
+
*
|
|
58
|
+
* Both legacy call sites sit beside visible text that was never
|
|
59
|
+
* associated with the bar -- this is how that text becomes the name
|
|
60
|
+
* without printing it twice.
|
|
61
|
+
*/
|
|
62
|
+
labelHidden?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Print the value beside the label.
|
|
65
|
+
*
|
|
66
|
+
* The text itself comes from React Aria, which already formats it from
|
|
67
|
+
* `value`/`minValue`/`maxValue` and honours `formatOptions` and
|
|
68
|
+
* `valueLabel` -- so a percentage, a currency or "3 of 7" are all reachable
|
|
69
|
+
* without a second prop here. It was never RENDERED before: the bar
|
|
70
|
+
* announced its value to assistive tech and showed a sighted reader nothing.
|
|
71
|
+
*/
|
|
72
|
+
showValue?: boolean;
|
|
73
|
+
/** Extra classes for the track. */
|
|
74
|
+
trackClassName?: string;
|
|
75
|
+
/** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */
|
|
76
|
+
fillClassName?: string;
|
|
77
|
+
/** Extra classes. Merged last, so they win conflicts with ours. */
|
|
78
|
+
className?: string;
|
|
79
|
+
}
|
|
80
|
+
export declare function Progress({ label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props }: ProgressProps): import("react").JSX.Element;
|
|
81
|
+
//#endregion
|
|
82
|
+
//# sourceMappingURL=progress.d.ts.map
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.js";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { Label, ProgressBar } from "react-aria-components";
|
|
5
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/progress/progress.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Progress, ported from the legacy shadcn/Radix component.
|
|
9
|
+
*
|
|
10
|
+
* Census: seven files import it and only TWO render anything --
|
|
11
|
+
* `ResponseOption.tsx` and `LiveQA.tsx`. Both pass `value` and
|
|
12
|
+
* `className` and nothing else.
|
|
13
|
+
*
|
|
14
|
+
* `label` IS REQUIRED, and that is the point. Neither live call site
|
|
15
|
+
* passes `aria-label`, `aria-labelledby` or an `id` a label targets, and
|
|
16
|
+
* `role="progressbar"` does not take its name from content -- so both
|
|
17
|
+
* rendered progress bars are announced as an unnamed progressbar. React
|
|
18
|
+
* Aria supplies the plumbing for three naming routes but no name of its
|
|
19
|
+
* own: `<ProgressBar value={60}/>` is just as nameless there. Making the
|
|
20
|
+
* prop required is what turns it into something you cannot forget.
|
|
21
|
+
*
|
|
22
|
+
* The migration plan said this component "adds the missing
|
|
23
|
+
* aria-valuenow". That is wrong -- Radix already supplies `aria-valuenow`,
|
|
24
|
+
* `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. The missing thing
|
|
25
|
+
* was always the NAME.
|
|
26
|
+
*
|
|
27
|
+
* THE COLOURS ARE NOT THE LEGACY'S. Its track is `bg-primary/20`, an alpha
|
|
28
|
+
* fill that composites against unknown page content and therefore has no
|
|
29
|
+
* fixed contrast pair at all -- over white it is roughly 1.05:1, an
|
|
30
|
+
* invisible boundary. Its indicator is `bg-primary`, 2.44:1 on the page.
|
|
31
|
+
* Here the track is `muted` with a `border` boundary and the fill is
|
|
32
|
+
* `primary-strong`, which puts the fill against the track at 4.61:1 and
|
|
33
|
+
* the track against the page at 5.25:1.
|
|
34
|
+
*
|
|
35
|
+
* Both are in the build-failing contrast contract.
|
|
36
|
+
*/
|
|
37
|
+
const progressVariants = cva(["flex w-full flex-col gap-1.5 box-border font-sans"]);
|
|
38
|
+
const progressTrackVariants = cva(["relative h-2 w-full overflow-hidden rounded-pill box-border", "bg-muted border-(length:--border-width) border-border"]);
|
|
39
|
+
const progressFillVariants = cva(["h-full rounded-pill", "motion-safe:transition-[width] motion-safe:duration-(--duration-base) motion-safe:ease-standard"], {
|
|
40
|
+
variants: { tone: {
|
|
41
|
+
neutral: "bg-primary-strong",
|
|
42
|
+
success: "bg-success-strong",
|
|
43
|
+
warning: "bg-warning-strong",
|
|
44
|
+
danger: "bg-destructive-strong",
|
|
45
|
+
info: "bg-info-strong"
|
|
46
|
+
} },
|
|
47
|
+
defaultVariants: { tone: "neutral" }
|
|
48
|
+
});
|
|
49
|
+
function Progress({ label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props }) {
|
|
50
|
+
return /* @__PURE__ */ jsx(ProgressBar, {
|
|
51
|
+
...props,
|
|
52
|
+
"data-slot": "progress",
|
|
53
|
+
className: cn(progressVariants(), className),
|
|
54
|
+
children: ({ percentage, isIndeterminate, valueText }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
|
|
55
|
+
"data-slot": "progress-header",
|
|
56
|
+
className: cn(showValue && "flex items-baseline justify-between gap-2"),
|
|
57
|
+
children: [/* @__PURE__ */ jsx(Label, {
|
|
58
|
+
"data-slot": "progress-label",
|
|
59
|
+
className: cn("text-sm leading-(--leading-normal) text-foreground", labelHidden && "sr-only"),
|
|
60
|
+
children: label
|
|
61
|
+
}), showValue ? /* @__PURE__ */ jsx("span", {
|
|
62
|
+
"data-slot": "progress-value",
|
|
63
|
+
"aria-hidden": "true",
|
|
64
|
+
className: "text-sm leading-(--leading-normal) text-muted-foreground tabular-nums",
|
|
65
|
+
children: valueText
|
|
66
|
+
}) : null]
|
|
67
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
68
|
+
"data-slot": "progress-track",
|
|
69
|
+
className: cn(progressTrackVariants(), trackClassName),
|
|
70
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
71
|
+
"data-slot": "progress-fill",
|
|
72
|
+
"data-indeterminate": isIndeterminate || void 0,
|
|
73
|
+
className: cn(progressFillVariants({ tone }), fillClassName),
|
|
74
|
+
style: { width: isIndeterminate ? "0%" : `${percentage ?? 0}%` }
|
|
75
|
+
})
|
|
76
|
+
})] })
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
//#endregion
|
|
80
|
+
export { Progress, progressFillVariants, progressTrackVariants, progressVariants };
|
|
81
|
+
|
|
82
|
+
//# sourceMappingURL=progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"progress.js","names":["AriaProgressBar","AriaLabel"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n Label as AriaLabel,\n ProgressBar as AriaProgressBar,\n type ProgressBarProps as AriaProgressBarProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Progress, ported from the legacy shadcn/Radix component.\n *\n * Census: seven files import it and only TWO render anything --\n * `ResponseOption.tsx` and `LiveQA.tsx`. Both pass `value` and\n * `className` and nothing else.\n *\n * `label` IS REQUIRED, and that is the point. Neither live call site\n * passes `aria-label`, `aria-labelledby` or an `id` a label targets, and\n * `role=\"progressbar\"` does not take its name from content -- so both\n * rendered progress bars are announced as an unnamed progressbar. React\n * Aria supplies the plumbing for three naming routes but no name of its\n * own: `<ProgressBar value={60}/>` is just as nameless there. Making the\n * prop required is what turns it into something you cannot forget.\n *\n * The migration plan said this component \"adds the missing\n * aria-valuenow\". That is wrong -- Radix already supplies `aria-valuenow`,\n * `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. The missing thing\n * was always the NAME.\n *\n * THE COLOURS ARE NOT THE LEGACY'S. Its track is `bg-primary/20`, an alpha\n * fill that composites against unknown page content and therefore has no\n * fixed contrast pair at all -- over white it is roughly 1.05:1, an\n * invisible boundary. Its indicator is `bg-primary`, 2.44:1 on the page.\n * Here the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`, which puts the fill against the track at 4.61:1 and\n * the track against the page at 5.25:1.\n *\n * Both are in the build-failing contrast contract.\n */\nexport const progressVariants = cva([\"flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\nexport const progressTrackVariants = cva([\n \"relative h-2 w-full overflow-hidden rounded-pill box-border\",\n // muted, NOT `border` as the Switch uses. A switch has no fill; a\n // progress bar does, and primary-strong on a `border` track is 1.01:1 --\n // the two halves are the same grey and the value disappears.\n \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const progressFillVariants = cva(\n [\n \"h-full rounded-pill\",\n \"motion-safe:transition-[width] motion-safe:duration-(--duration-base) motion-safe:ease-standard\",\n ],\n {\n variants: {\n /*\n * What the value MEANS, which for a progress bar is usually a score\n * rather than a completion. The product's bar carried exactly this axis\n * (`default`/`success`/`warning`/`error`/`info`) and reached for it to\n * colour performance metrics.\n *\n * `-strong` throughout: the fill sits on the `muted` track and has to\n * clear the 3:1 non-text floor of WCAG 1.4.11 against it, which is the\n * same reason the track is muted rather than `border` -- primary-strong\n * on a `border` track measures 1.01:1 and the value disappears.\n */\n tone: {\n neutral: \"bg-primary-strong\",\n success: \"bg-success-strong\",\n warning: \"bg-warning-strong\",\n danger: \"bg-destructive-strong\",\n info: \"bg-info-strong\",\n },\n },\n defaultVariants: { tone: \"neutral\" },\n },\n);\n\n/**\n * A determinate or indeterminate progress bar.\n *\n * @example\n * <Progress label=\"Upload\" value={62} />\n * <Progress label=\"Loading results\" />\n */\nexport interface ProgressProps\n extends Omit<AriaProgressBarProps, \"className\" | \"style\" | \"children\">,\n VariantProps<typeof progressFillVariants> {\n /**\n * What is progressing, and the bar's accessible name.\n *\n * **Required.** Both legacy call sites render an unnamed progressbar.\n * Pass `labelHidden` when the surrounding UI already says it.\n */\n label: ReactNode;\n /**\n * Render the label for screen readers only.\n *\n * Both legacy call sites sit beside visible text that was never\n * associated with the bar -- this is how that text becomes the name\n * without printing it twice.\n */\n labelHidden?: boolean;\n /**\n * Print the value beside the label.\n *\n * The text itself comes from React Aria, which already formats it from\n * `value`/`minValue`/`maxValue` and honours `formatOptions` and\n * `valueLabel` -- so a percentage, a currency or \"3 of 7\" are all reachable\n * without a second prop here. It was never RENDERED before: the bar\n * announced its value to assistive tech and showed a sighted reader nothing.\n */\n showValue?: boolean;\n /** Extra classes for the track. */\n trackClassName?: string;\n /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */\n fillClassName?: string;\n /** Extra classes. Merged last, so they win conflicts with ours. */\n className?: string;\n}\n\nexport function Progress({\n label,\n labelHidden,\n showValue,\n tone,\n trackClassName,\n fillClassName,\n className,\n ...props\n}: ProgressProps) {\n return (\n <AriaProgressBar\n {...props}\n data-slot=\"progress\"\n className={cn(progressVariants(), className)}\n >\n {({ percentage, isIndeterminate, valueText }) => (\n <>\n {/*\n The row exists only when the value is printed. Wrapping the label\n in a flex row unconditionally would change the label's box for\n every existing consumer to no purpose.\n */}\n <div\n data-slot=\"progress-header\"\n className={cn(showValue && \"flex items-baseline justify-between gap-2\")}\n >\n <AriaLabel\n data-slot=\"progress-label\"\n className={cn(\n \"text-sm leading-(--leading-normal) text-foreground\",\n labelHidden && \"sr-only\",\n )}\n >\n {label}\n </AriaLabel>\n {showValue ? (\n <span\n data-slot=\"progress-value\"\n // aria-hidden: React Aria already announces the value on the\n // progressbar itself. Without this a screen reader reads it\n // twice, once as the widget's value and once as loose text.\n aria-hidden=\"true\"\n className=\"text-sm leading-(--leading-normal) text-muted-foreground tabular-nums\"\n >\n {valueText}\n </span>\n ) : null}\n </div>\n <div\n data-slot=\"progress-track\"\n className={cn(progressTrackVariants(), trackClassName)}\n >\n {/*\n width, not the legacy translateX(-(100 - value)%). That\n overflowed for value > 100 -- a positive translate slid the\n indicator off to the right, while the announced value stayed\n whatever was passed. React Aria clamps the value, so the two\n can no longer disagree.\n\n An indeterminate bar renders no fill rather than the\n legacy's silent 0%: `value={undefined}` became `(value || 0)`\n there, so a sighted user saw \"0% done\" while a screen reader\n said \"indeterminate\".\n */}\n <div\n data-slot=\"progress-fill\"\n data-indeterminate={isIndeterminate || undefined}\n className={cn(progressFillVariants({ tone }), fillClassName)}\n style={{ width: isIndeterminate ? \"0%\" : `${percentage ?? 0}%` }}\n />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,mBAAmB,IAAI,CAAC,mDAAmD,CAAC;AAEzF,MAAa,wBAAwB,IAAI,CACvC,+DAIA,uDACF,CAAC;AAED,MAAa,uBAAuB,IAClC,CACE,uBACA,iGACF,GACA;CACE,UAAU,EAYR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;AA6CA,SAAgB,SAAS,EACvB,OACA,aACA,WACA,MACA,gBACA,eACA,WACA,GAAG,SACa;CAChB,OACE,oBAACA,aAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,iBAAiB,gBAC/B,qBAAA,UAAA,EAAA,UAAA,CAME,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,aAAa,2CAA2C;GAFxE,UAAA,CAIE,oBAACC,OAAD;IACE,aAAU;IACV,WAAW,GACT,sDACA,eAAe,SACjB;IAEC,UAAA;GACQ,CAAA,GACV,YACC,oBAAC,QAAD;IACE,aAAU;IAIV,eAAY;IACZ,WAAU;IAET,UAAA;GACG,CAAA,IACJ,IACD;EACL,CAAA,GAAA,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,sBAAsB,GAAG,cAAc;GAcrD,UAAA,oBAAC,OAAD;IACE,aAAU;IACV,sBAAoB,mBAAmB,KAAA;IACvC,WAAW,GAAG,qBAAqB,EAAE,KAAK,CAAC,GAAG,aAAa;IAC3D,OAAO,EAAE,OAAO,kBAAkB,OAAO,GAAG,cAAc,EAAE,GAAG;GAChE,CAAA;EACE,CAAA,CACL,EAAA,CAAA;CAEW,CAAA;AAErB"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { RadioGroupProps, RadioProps } from "react-aria-components";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
//#region src/radio-group/radio-group.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* RadioGroup, ported from the legacy shadcn/Radix component onto React Aria.
|
|
6
|
+
*
|
|
7
|
+
* Census: 1 file, 3 uses -- `RadioGroup` 1, `RadioGroupItem` 2. The
|
|
8
|
+
* smallest real surface in the migration, so the port is deliberately plain.
|
|
9
|
+
*
|
|
10
|
+
* THE LABEL MOVES INSIDE THE ITEM. Radix's `RadioGroupItem` is a bare
|
|
11
|
+
* button and the caller pairs it with a separate `<Label htmlFor>`; React
|
|
12
|
+
* Aria's `Radio` takes its label as `children` and wires the association
|
|
13
|
+
* itself. That is the one rename a call site has to make, and it removes
|
|
14
|
+
* the id bookkeeping.
|
|
15
|
+
*
|
|
16
|
+
* `border-primary` becomes `border-border` for the same reason it did on
|
|
17
|
+
* Checkbox: brand orange is 2.44:1 on white and cannot legally be the only
|
|
18
|
+
* thing describing a control's edge (WCAG 1.4.11). Selected reuses
|
|
19
|
+
* Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --
|
|
20
|
+
* so a radio and a checkbox in the same form agree.
|
|
21
|
+
*/
|
|
22
|
+
export declare const radioGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
23
|
+
export declare const radioVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
24
|
+
/**
|
|
25
|
+
* A set of mutually exclusive choices.
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* <RadioGroup value={plan} onChange={setPlan} aria-label="Plan">
|
|
29
|
+
* <Radio value="free">Free</Radio>
|
|
30
|
+
* <Radio value="pro">Pro</Radio>
|
|
31
|
+
* </RadioGroup>
|
|
32
|
+
*/
|
|
33
|
+
interface RadioGroupProps$1 extends Omit<RadioGroupProps, "className" | "style"> {
|
|
34
|
+
/** Extra classes. Merged last, so they win conflicts with ours. */
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
declare function RadioGroup$1({ className, ...props }: RadioGroupProps$1): import("react").JSX.Element;
|
|
38
|
+
/**
|
|
39
|
+
* One choice.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* <Radio value="pro">Pro</Radio>
|
|
43
|
+
*/
|
|
44
|
+
interface RadioProps$1 extends Omit<RadioProps, "className" | "style" | "children"> {
|
|
45
|
+
/** The label, and this option's accessible name. */
|
|
46
|
+
children?: ReactNode;
|
|
47
|
+
/** Extra classes for the label. Merged last, so they win conflicts. */
|
|
48
|
+
className?: string;
|
|
49
|
+
}
|
|
50
|
+
declare function Radio$1({ className, children, ...props }: RadioProps$1): import("react").JSX.Element;
|
|
51
|
+
//#endregion
|
|
52
|
+
export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioGroupProps$1 as RadioGroupProps, RadioProps$1 as RadioProps };
|
|
53
|
+
//# sourceMappingURL=radio-group.d.ts.map
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.js";
|
|
3
|
+
import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { Radio, RadioGroup } from "react-aria-components";
|
|
6
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
//#region src/radio-group/radio-group.tsx
|
|
8
|
+
/**
|
|
9
|
+
* RadioGroup, ported from the legacy shadcn/Radix component onto React Aria.
|
|
10
|
+
*
|
|
11
|
+
* Census: 1 file, 3 uses -- `RadioGroup` 1, `RadioGroupItem` 2. The
|
|
12
|
+
* smallest real surface in the migration, so the port is deliberately plain.
|
|
13
|
+
*
|
|
14
|
+
* THE LABEL MOVES INSIDE THE ITEM. Radix's `RadioGroupItem` is a bare
|
|
15
|
+
* button and the caller pairs it with a separate `<Label htmlFor>`; React
|
|
16
|
+
* Aria's `Radio` takes its label as `children` and wires the association
|
|
17
|
+
* itself. That is the one rename a call site has to make, and it removes
|
|
18
|
+
* the id bookkeeping.
|
|
19
|
+
*
|
|
20
|
+
* `border-primary` becomes `border-border` for the same reason it did on
|
|
21
|
+
* Checkbox: brand orange is 2.44:1 on white and cannot legally be the only
|
|
22
|
+
* thing describing a control's edge (WCAG 1.4.11). Selected reuses
|
|
23
|
+
* Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --
|
|
24
|
+
* so a radio and a checkbox in the same form agree.
|
|
25
|
+
*/
|
|
26
|
+
const radioGroupVariants = cva(["flex flex-col gap-2", "box-border font-sans"]);
|
|
27
|
+
const radioVariants = cva([
|
|
28
|
+
"inline-flex size-4 shrink-0 items-center justify-center",
|
|
29
|
+
"rounded-full border-(length:--border-width) box-border",
|
|
30
|
+
"bg-background border-border",
|
|
31
|
+
"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
|
|
32
|
+
"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong",
|
|
33
|
+
"group-data-[selected]:text-primary-foreground",
|
|
34
|
+
selectionRingVariants()
|
|
35
|
+
]);
|
|
36
|
+
function RadioGroup$1({ className, ...props }) {
|
|
37
|
+
return /* @__PURE__ */ jsx(RadioGroup, {
|
|
38
|
+
...props,
|
|
39
|
+
"data-slot": "radio-group",
|
|
40
|
+
className: cn(radioGroupVariants(), className)
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
function Radio$1({ className, children, ...props }) {
|
|
44
|
+
return /* @__PURE__ */ jsx(Radio, {
|
|
45
|
+
...props,
|
|
46
|
+
"data-slot": "radio",
|
|
47
|
+
className: cn(selectionLabelVariants(), "justify-start", className),
|
|
48
|
+
children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
49
|
+
"aria-hidden": "true",
|
|
50
|
+
"data-slot": "radio-dot",
|
|
51
|
+
className: radioVariants(),
|
|
52
|
+
children: isSelected ? /* @__PURE__ */ jsx("span", {
|
|
53
|
+
"data-slot": "radio-indicator",
|
|
54
|
+
className: "size-1.5 rounded-full bg-current"
|
|
55
|
+
}) : null
|
|
56
|
+
}), children == null ? null : /* @__PURE__ */ jsx("span", {
|
|
57
|
+
"data-slot": "radio-label",
|
|
58
|
+
children
|
|
59
|
+
})] })
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
//#endregion
|
|
63
|
+
export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, radioGroupVariants, radioVariants };
|
|
64
|
+
|
|
65
|
+
//# sourceMappingURL=radio-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-group.js","names":["RadioGroup","AriaRadioGroup","Radio","AriaRadio"],"sources":["../../src/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n Radio as AriaRadio,\n RadioGroup as AriaRadioGroup,\n type RadioGroupProps as AriaRadioGroupProps,\n type RadioProps as AriaRadioProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * RadioGroup, ported from the legacy shadcn/Radix component onto React Aria.\n *\n * Census: 1 file, 3 uses -- `RadioGroup` 1, `RadioGroupItem` 2. The\n * smallest real surface in the migration, so the port is deliberately plain.\n *\n * THE LABEL MOVES INSIDE THE ITEM. Radix's `RadioGroupItem` is a bare\n * button and the caller pairs it with a separate `<Label htmlFor>`; React\n * Aria's `Radio` takes its label as `children` and wires the association\n * itself. That is the one rename a call site has to make, and it removes\n * the id bookkeeping.\n *\n * `border-primary` becomes `border-border` for the same reason it did on\n * Checkbox: brand orange is 2.44:1 on white and cannot legally be the only\n * thing describing a control's edge (WCAG 1.4.11). Selected reuses\n * Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --\n * so a radio and a checkbox in the same form agree.\n */\nexport const radioGroupVariants = cva([\n \"flex flex-col gap-2\",\n \"box-border font-sans\",\n]);\n\nexport const radioVariants = cva([\n \"inline-flex size-4 shrink-0 items-center justify-center\",\n \"rounded-full border-(length:--border-width) box-border\",\n \"bg-background border-border\",\n \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n \"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong\",\n \"group-data-[selected]:text-primary-foreground\",\n selectionRingVariants(),\n]);\n\n/**\n * A set of mutually exclusive choices.\n *\n * @example\n * <RadioGroup value={plan} onChange={setPlan} aria-label=\"Plan\">\n * <Radio value=\"free\">Free</Radio>\n * <Radio value=\"pro\">Pro</Radio>\n * </RadioGroup>\n */\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, \"className\" | \"style\"> {\n /** Extra classes. Merged last, so they win conflicts with ours. */\n className?: string;\n}\n\nexport function RadioGroup({ className, ...props }: RadioGroupProps) {\n return (\n <AriaRadioGroup\n {...props}\n data-slot=\"radio-group\"\n className={cn(radioGroupVariants(), className)}\n />\n );\n}\n\n/**\n * One choice.\n *\n * @example\n * <Radio value=\"pro\">Pro</Radio>\n */\nexport interface RadioProps extends Omit<AriaRadioProps, \"className\" | \"style\" | \"children\"> {\n /** The label, and this option's accessible name. */\n children?: ReactNode;\n /** Extra classes for the label. Merged last, so they win conflicts. */\n className?: string;\n}\n\nexport function Radio({ className, children, ...props }: RadioProps) {\n return (\n <AriaRadio\n {...props}\n data-slot=\"radio\"\n // justify-start, overriding the shared label's centring: a radio sits\n // in a vertical list where every label must start on the same line,\n // not centre itself in a 24px box.\n className={cn(selectionLabelVariants(), \"justify-start\", className)}\n >\n {({ isSelected }) => (\n <>\n <span aria-hidden=\"true\" data-slot=\"radio-dot\" className={radioVariants()}>\n {isSelected ? (\n // Rendered in JS rather than toggled with CSS, so the\n // precedence is explicit and a test can read it from the DOM.\n <span data-slot=\"radio-indicator\" className=\"size-1.5 rounded-full bg-current\" />\n ) : null}\n </span>\n {children == null ? null : <span data-slot=\"radio-label\">{children}</span>}\n </>\n )}\n </AriaRadio>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,qBAAqB,IAAI,CACpC,uBACA,sBACF,CAAC;AAED,MAAa,gBAAgB,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA,sBAAsB;AACxB,CAAC;AAgBD,SAAgBA,aAAW,EAAE,WAAW,GAAG,SAA0B;CACnE,OACE,oBAACC,YAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL;AAeA,SAAgBC,QAAM,EAAE,WAAW,UAAU,GAAG,SAAqB;CACnE,OACE,oBAACC,OAAD;EACE,GAAI;EACJ,aAAU;EAIV,WAAW,GAAG,uBAAuB,GAAG,iBAAiB,SAAS;EAEhE,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAY,WAAW,cAAc;GACrE,UAAA,aAGC,oBAAC,QAAD;IAAM,aAAU;IAAkB,WAAU;GAAoC,CAAA,IAC9E;EACA,CAAA,GACL,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAe;EAAe,CAAA,CACzE,EAAA,CAAA;CAEK,CAAA;AAEf"}
|