jaci-ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md ADDED
@@ -0,0 +1,17 @@
1
+ # Changelog
2
+
3
+ ## 0.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - b8dce0e: Prepare the package for its next patch release with distributable documentation, reproducible consumer fixtures, expanded accessibility coverage, and release workflow improvements.
8
+
9
+ All notable changes to `jaci-ui` are documented in this file. Release entries are generated and
10
+ updated by Changesets.
11
+
12
+ ## 0.1.0 — Initial public release
13
+
14
+ - Initial public Jaci UI component library.
15
+ - Static Panda CSS distribution at `jaci-ui/styles.css`.
16
+ - Optional Panda preset at `jaci-ui/panda-preset`.
17
+ - SSR-safe static and interactive React component families.
package/README.md ADDED
@@ -0,0 +1,139 @@
1
+ # Jaci UI
2
+
3
+ Accessible, themeable React components for React 18.2 and React 19 applications.
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ pnpm add jaci-ui
9
+ # or: npm install jaci-ui
10
+ ```
11
+
12
+ Import the static stylesheet once from the root of the application:
13
+
14
+ ```tsx
15
+ import "jaci-ui/styles.css";
16
+ ```
17
+
18
+ The package declares `react` and `react-dom` as peer dependencies. `@base-ui/react` is installed
19
+ as a runtime dependency for accessible interactive primitives.
20
+
21
+ ## Usage
22
+
23
+ Components use named exports and compound APIs where several accessible parts work together:
24
+
25
+ ```tsx
26
+ import { Button, ColorPicker, Stack } from "jaci-ui";
27
+
28
+ export function Example() {
29
+ return (
30
+ <Stack gap="md">
31
+ <Button variant="solid">Continue</Button>
32
+
33
+ <ColorPicker.Root defaultValue="#2563eb" name="brand-color">
34
+ <ColorPicker.Label>Brand color</ColorPicker.Label>
35
+ <ColorPicker.Control>
36
+ <ColorPicker.Trigger aria-label="Choose brand color">
37
+ <ColorPicker.Preview />
38
+ <ColorPicker.Value />
39
+ </ColorPicker.Trigger>
40
+ </ColorPicker.Control>
41
+ <ColorPicker.Portal>
42
+ <ColorPicker.Positioner>
43
+ <ColorPicker.Popup>
44
+ <ColorPicker.Palette />
45
+ <ColorPicker.Hue />
46
+ <ColorPicker.Input />
47
+ <ColorPicker.NativeInput />
48
+ </ColorPicker.Popup>
49
+ </ColorPicker.Positioner>
50
+ </ColorPicker.Portal>
51
+ </ColorPicker.Root>
52
+ </Stack>
53
+ );
54
+ }
55
+ ```
56
+
57
+ Interactive components support controlled and uncontrolled state where appropriate. For example,
58
+ `value`/`onValueChange` can be paired with `defaultValue` when the application does not need to
59
+ own the state.
60
+
61
+ ## Server rendering and frameworks
62
+
63
+ Static components are server-safe and interactive modules preserve their `"use client"` boundary.
64
+ In Next.js App Router, render interactive compositions inside a client component and import the
65
+ global stylesheet from `app/layout.tsx`:
66
+
67
+ ```tsx
68
+ // app/layout.tsx
69
+ import "jaci-ui/styles.css";
70
+ ```
71
+
72
+ Vite, React Router, Remix and other client entry points can import the stylesheet from their
73
+ application root. Jaci UI does not access `window`, `document`, storage or media APIs during
74
+ module import or server rendering.
75
+
76
+ ## Themes and customization
77
+
78
+ Set `data-jaci-theme` on the server-rendered HTML element or on a local scope:
79
+
80
+ ```tsx
81
+ <html data-jaci-theme="light">
82
+ <body>{children}</body>
83
+ </html>
84
+ ```
85
+
86
+ Use `data-jaci-theme="dark"` for the dark semantic palette. Brand colors can be changed with
87
+ the public CSS variables without a provider:
88
+
89
+ ```css
90
+ :root {
91
+ --jaci-colors-accent-default: #7c3aed;
92
+ --jaci-colors-accent-hover: #6d28d9;
93
+ --jaci-colors-fg-on-accent: #ffffff;
94
+ }
95
+
96
+ [data-jaci-theme="dark"] {
97
+ --jaci-colors-accent-default: #a78bfa;
98
+ --jaci-colors-accent-hover: #c4b5fd;
99
+ }
100
+ ```
101
+
102
+ The package exposes semantic surface, foreground, border, status, spacing, radius, shadow and
103
+ transition tokens. See the Theming guide in Storybook for the complete token vocabulary.
104
+
105
+ ## Optional Panda CSS preset
106
+
107
+ Applications that also use Panda CSS may import the optional preset:
108
+
109
+ ```ts
110
+ import { defineConfig } from "@pandacss/dev";
111
+ import jaciPreset from "jaci-ui/panda-preset";
112
+
113
+ export default defineConfig({
114
+ presets: [jaciPreset],
115
+ });
116
+ ```
117
+
118
+ The preset shares tokens and conditions; `jaci-ui/styles.css` remains the distribution stylesheet
119
+ for the component recipes.
120
+
121
+ ## Public entry points
122
+
123
+ - `jaci-ui`: React components and named component types.
124
+ - `jaci-ui/styles.css`: generated static styles and semantic tokens.
125
+ - `jaci-ui/panda-preset`: optional Panda CSS preset.
126
+
127
+ ## Development
128
+
129
+ This repository uses pnpm, Turborepo, Panda CSS and Storybook. From the repository root:
130
+
131
+ ```sh
132
+ pnpm install
133
+ pnpm storybook
134
+ pnpm format:check
135
+ pnpm lint
136
+ pnpm typecheck
137
+ pnpm test
138
+ pnpm package:check
139
+ ```
@@ -44,8 +44,7 @@ const MenuItem = (0, react.forwardRef)(function MenuItem({ className, ...props }
44
44
  });
45
45
  });
46
46
  /**
47
- * A navigational item. This is the semantic counterpart of the legacy
48
- * dropdown's link option and retains Base UI's keyboard navigation.
47
+ * A navigational item. It retains Base UI's keyboard navigation.
49
48
  */
50
49
  const MenuLinkItem = (0, react.forwardRef)(function MenuLinkItem({ className, ...props }, ref) {
51
50
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.LinkItem, {
@@ -1 +1 @@
1
- {"version":3,"file":"menu.cjs","names":["BaseMenu","withRecipeClassName","menu"],"sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { MenuRoot as BaseMenuRoot, MenuTrigger as BaseMenuTrigger } from \"@base-ui/react/menu\";\n\nimport { menu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups the menu parts. It keeps Base UI's controlled `open`/\n * `onOpenChange` API and uncontrolled `defaultOpen` API intact.\n */\nexport type MenuRootProps<Payload = unknown> = BaseMenuRoot.Props<Payload>;\n\nexport function MenuRoot<Payload = unknown>(props: MenuRootProps<Payload>) {\n return <BaseMenu.Root {...props} />;\n}\n\nexport type MenuTriggerProps<Payload = unknown> = BaseMenuTrigger.Props<Payload>;\n\nexport const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(function MenuTrigger(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().trigger, className)}\n data-jaci-component=\"menu\"\n data-slot=\"menu-trigger\"\n />\n );\n});\n\n/** Preserves Base UI's portal and optional container APIs. */\nexport const MenuPortal = BaseMenu.Portal;\n\nexport type MenuPositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;\n\nexport const MenuPositioner = forwardRef<HTMLDivElement, MenuPositionerProps>(\n function MenuPositioner({ className, ...props }, ref) {\n return (\n <BaseMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().positioner, className)}\n data-slot=\"menu-positioner\"\n />\n );\n },\n);\n\nexport type MenuPopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;\n\nexport const MenuPopup = forwardRef<HTMLDivElement, MenuPopupProps>(function MenuPopup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().popup, className)}\n data-slot=\"menu-popup\"\n />\n );\n});\n\nexport type MenuItemProps = ComponentPropsWithoutRef<typeof BaseMenu.Item>;\n\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Item\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menu-item\"\n />\n );\n});\n\nexport type MenuLinkItemProps = ComponentPropsWithoutRef<typeof BaseMenu.LinkItem>;\n\n/**\n * A navigational item. This is the semantic counterpart of the legacy\n * dropdown's link option and retains Base UI's keyboard navigation.\n */\nexport const MenuLinkItem = forwardRef<Element, MenuLinkItemProps>(function MenuLinkItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.LinkItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menu-link-item\"\n />\n );\n});\n\nexport type MenuSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;\n\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Separator\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().separator, className)}\n data-slot=\"menu-separator\"\n />\n );\n});\n\nexport type MenuGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.Group>;\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Group\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().group, className)}\n data-slot=\"menu-group\"\n />\n );\n});\n\nexport type MenuGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;\n\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(\n function MenuGroupLabel({ className, ...props }, ref) {\n return (\n <BaseMenu.GroupLabel\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().groupLabel, className)}\n data-slot=\"menu-group-label\"\n />\n );\n },\n);\n\nexport const Menu = {\n Root: MenuRoot,\n Trigger: MenuTrigger,\n Portal: MenuPortal,\n Positioner: MenuPositioner,\n Popup: MenuPopup,\n Item: MenuItem,\n LinkItem: MenuLinkItem,\n Separator: MenuSeparator,\n Group: MenuGroup,\n GroupLabel: MenuGroupLabel,\n createHandle: BaseMenu.createHandle,\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"menu.cjs","names":["BaseMenu","withRecipeClassName","menu"],"sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { MenuRoot as BaseMenuRoot, MenuTrigger as BaseMenuTrigger } from \"@base-ui/react/menu\";\n\nimport { menu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups the menu parts. It keeps Base UI's controlled `open`/\n * `onOpenChange` API and uncontrolled `defaultOpen` API intact.\n */\nexport type MenuRootProps<Payload = unknown> = BaseMenuRoot.Props<Payload>;\n\nexport function MenuRoot<Payload = unknown>(props: MenuRootProps<Payload>) {\n return <BaseMenu.Root {...props} />;\n}\n\nexport type MenuTriggerProps<Payload = unknown> = BaseMenuTrigger.Props<Payload>;\n\nexport const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(function MenuTrigger(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().trigger, className)}\n data-jaci-component=\"menu\"\n data-slot=\"menu-trigger\"\n />\n );\n});\n\n/** Preserves Base UI's portal and optional container APIs. */\nexport const MenuPortal = BaseMenu.Portal;\n\nexport type MenuPositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;\n\nexport const MenuPositioner = forwardRef<HTMLDivElement, MenuPositionerProps>(\n function MenuPositioner({ className, ...props }, ref) {\n return (\n <BaseMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().positioner, className)}\n data-slot=\"menu-positioner\"\n />\n );\n },\n);\n\nexport type MenuPopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;\n\nexport const MenuPopup = forwardRef<HTMLDivElement, MenuPopupProps>(function MenuPopup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().popup, className)}\n data-slot=\"menu-popup\"\n />\n );\n});\n\nexport type MenuItemProps = ComponentPropsWithoutRef<typeof BaseMenu.Item>;\n\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Item\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menu-item\"\n />\n );\n});\n\nexport type MenuLinkItemProps = ComponentPropsWithoutRef<typeof BaseMenu.LinkItem>;\n\n/**\n * A navigational item. It retains Base UI's keyboard navigation.\n */\nexport const MenuLinkItem = forwardRef<Element, MenuLinkItemProps>(function MenuLinkItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.LinkItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menu-link-item\"\n />\n );\n});\n\nexport type MenuSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;\n\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Separator\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().separator, className)}\n data-slot=\"menu-separator\"\n />\n );\n});\n\nexport type MenuGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.Group>;\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Group\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().group, className)}\n data-slot=\"menu-group\"\n />\n );\n});\n\nexport type MenuGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;\n\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(\n function MenuGroupLabel({ className, ...props }, ref) {\n return (\n <BaseMenu.GroupLabel\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().groupLabel, className)}\n data-slot=\"menu-group-label\"\n />\n );\n },\n);\n\nexport const Menu = {\n Root: MenuRoot,\n Trigger: MenuTrigger,\n Portal: MenuPortal,\n Positioner: MenuPositioner,\n Popup: MenuPopup,\n Item: MenuItem,\n LinkItem: MenuLinkItem,\n Separator: MenuSeparator,\n Group: MenuGroup,\n GroupLabel: MenuGroupLabel,\n createHandle: BaseMenu.createHandle,\n};\n"],"mappings":"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"}
@@ -19,8 +19,7 @@ type MenuItemProps = ComponentPropsWithoutRef<typeof Menu.Item>;
19
19
  declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuItemProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
20
20
  type MenuLinkItemProps = ComponentPropsWithoutRef<typeof Menu.LinkItem>;
21
21
  /**
22
- * A navigational item. This is the semantic counterpart of the legacy
23
- * dropdown's link option and retains Base UI's keyboard navigation.
22
+ * A navigational item. It retains Base UI's keyboard navigation.
24
23
  */
25
24
  declare const MenuLinkItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuLinkItemProps, "ref"> & import("react").RefAttributes<Element>, "ref"> & import("react").RefAttributes<Element>>;
26
25
  type MenuSeparatorProps = ComponentPropsWithoutRef<typeof Menu.Separator>;
@@ -19,8 +19,7 @@ type MenuItemProps = ComponentPropsWithoutRef<typeof Menu.Item>;
19
19
  declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuItemProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
20
20
  type MenuLinkItemProps = ComponentPropsWithoutRef<typeof Menu.LinkItem>;
21
21
  /**
22
- * A navigational item. This is the semantic counterpart of the legacy
23
- * dropdown's link option and retains Base UI's keyboard navigation.
22
+ * A navigational item. It retains Base UI's keyboard navigation.
24
23
  */
25
24
  declare const MenuLinkItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuLinkItemProps, "ref"> & import("react").RefAttributes<Element>, "ref"> & import("react").RefAttributes<Element>>;
26
25
  type MenuSeparatorProps = ComponentPropsWithoutRef<typeof Menu.Separator>;
@@ -44,8 +44,7 @@ const MenuItem = forwardRef(function MenuItem({ className, ...props }, ref) {
44
44
  });
45
45
  });
46
46
  /**
47
- * A navigational item. This is the semantic counterpart of the legacy
48
- * dropdown's link option and retains Base UI's keyboard navigation.
47
+ * A navigational item. It retains Base UI's keyboard navigation.
49
48
  */
50
49
  const MenuLinkItem = forwardRef(function MenuLinkItem({ className, ...props }, ref) {
51
50
  return /* @__PURE__ */ jsx(Menu.LinkItem, {
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","names":["MenuRoot","BaseMenu","MenuTrigger","Menu"],"sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { MenuRoot as BaseMenuRoot, MenuTrigger as BaseMenuTrigger } from \"@base-ui/react/menu\";\n\nimport { menu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups the menu parts. It keeps Base UI's controlled `open`/\n * `onOpenChange` API and uncontrolled `defaultOpen` API intact.\n */\nexport type MenuRootProps<Payload = unknown> = BaseMenuRoot.Props<Payload>;\n\nexport function MenuRoot<Payload = unknown>(props: MenuRootProps<Payload>) {\n return <BaseMenu.Root {...props} />;\n}\n\nexport type MenuTriggerProps<Payload = unknown> = BaseMenuTrigger.Props<Payload>;\n\nexport const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(function MenuTrigger(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().trigger, className)}\n data-jaci-component=\"menu\"\n data-slot=\"menu-trigger\"\n />\n );\n});\n\n/** Preserves Base UI's portal and optional container APIs. */\nexport const MenuPortal = BaseMenu.Portal;\n\nexport type MenuPositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;\n\nexport const MenuPositioner = forwardRef<HTMLDivElement, MenuPositionerProps>(\n function MenuPositioner({ className, ...props }, ref) {\n return (\n <BaseMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().positioner, className)}\n data-slot=\"menu-positioner\"\n />\n );\n },\n);\n\nexport type MenuPopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;\n\nexport const MenuPopup = forwardRef<HTMLDivElement, MenuPopupProps>(function MenuPopup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().popup, className)}\n data-slot=\"menu-popup\"\n />\n );\n});\n\nexport type MenuItemProps = ComponentPropsWithoutRef<typeof BaseMenu.Item>;\n\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Item\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menu-item\"\n />\n );\n});\n\nexport type MenuLinkItemProps = ComponentPropsWithoutRef<typeof BaseMenu.LinkItem>;\n\n/**\n * A navigational item. This is the semantic counterpart of the legacy\n * dropdown's link option and retains Base UI's keyboard navigation.\n */\nexport const MenuLinkItem = forwardRef<Element, MenuLinkItemProps>(function MenuLinkItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.LinkItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menu-link-item\"\n />\n );\n});\n\nexport type MenuSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;\n\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Separator\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().separator, className)}\n data-slot=\"menu-separator\"\n />\n );\n});\n\nexport type MenuGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.Group>;\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Group\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().group, className)}\n data-slot=\"menu-group\"\n />\n );\n});\n\nexport type MenuGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;\n\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(\n function MenuGroupLabel({ className, ...props }, ref) {\n return (\n <BaseMenu.GroupLabel\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().groupLabel, className)}\n data-slot=\"menu-group-label\"\n />\n );\n },\n);\n\nexport const Menu = {\n Root: MenuRoot,\n Trigger: MenuTrigger,\n Portal: MenuPortal,\n Positioner: MenuPositioner,\n Popup: MenuPopup,\n Item: MenuItem,\n LinkItem: MenuLinkItem,\n Separator: MenuSeparator,\n Group: MenuGroup,\n GroupLabel: MenuGroupLabel,\n createHandle: BaseMenu.createHandle,\n};\n"],"mappings":";;;;;;;AAgBA,SAAgBA,WAA4B,OAA+B;CACzE,OAAO,oBAACC,KAAS,MAAV,EAAe,GAAI,MAAQ,CAAA;AACpC;AAIA,MAAaC,gBAAc,WAAgD,SAAS,YAClF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACD,KAAS,SAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,SAAS,SAAS;EACxD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;;AAGD,MAAa,aAAaA,KAAS;AAInC,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,KAAS,YAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,YAAY,SAAS;EAC3D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,OAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,WAAW,WAAuC,SAAS,SACtE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,MAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,MAAM,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CAAC;;;;;AAQD,MAAa,eAAe,WAAuC,SAAS,aAC1E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,UAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,MAAM,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,WAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,WAAW,SAAS;EAC1D,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,OAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,KAAS,YAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,YAAY,SAAS;EAC3D,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAaE,SAAO;CAClB,MAAMH;CACN,SAASE;CACT,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,MAAM;CACN,UAAU;CACV,WAAW;CACX,OAAO;CACP,YAAY;CACZ,cAAcD,KAAS;AACzB"}
1
+ {"version":3,"file":"menu.js","names":["MenuRoot","BaseMenu","MenuTrigger","Menu"],"sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { MenuRoot as BaseMenuRoot, MenuTrigger as BaseMenuTrigger } from \"@base-ui/react/menu\";\n\nimport { menu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups the menu parts. It keeps Base UI's controlled `open`/\n * `onOpenChange` API and uncontrolled `defaultOpen` API intact.\n */\nexport type MenuRootProps<Payload = unknown> = BaseMenuRoot.Props<Payload>;\n\nexport function MenuRoot<Payload = unknown>(props: MenuRootProps<Payload>) {\n return <BaseMenu.Root {...props} />;\n}\n\nexport type MenuTriggerProps<Payload = unknown> = BaseMenuTrigger.Props<Payload>;\n\nexport const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(function MenuTrigger(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().trigger, className)}\n data-jaci-component=\"menu\"\n data-slot=\"menu-trigger\"\n />\n );\n});\n\n/** Preserves Base UI's portal and optional container APIs. */\nexport const MenuPortal = BaseMenu.Portal;\n\nexport type MenuPositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;\n\nexport const MenuPositioner = forwardRef<HTMLDivElement, MenuPositionerProps>(\n function MenuPositioner({ className, ...props }, ref) {\n return (\n <BaseMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().positioner, className)}\n data-slot=\"menu-positioner\"\n />\n );\n },\n);\n\nexport type MenuPopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;\n\nexport const MenuPopup = forwardRef<HTMLDivElement, MenuPopupProps>(function MenuPopup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().popup, className)}\n data-slot=\"menu-popup\"\n />\n );\n});\n\nexport type MenuItemProps = ComponentPropsWithoutRef<typeof BaseMenu.Item>;\n\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Item\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menu-item\"\n />\n );\n});\n\nexport type MenuLinkItemProps = ComponentPropsWithoutRef<typeof BaseMenu.LinkItem>;\n\n/**\n * A navigational item. It retains Base UI's keyboard navigation.\n */\nexport const MenuLinkItem = forwardRef<Element, MenuLinkItemProps>(function MenuLinkItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.LinkItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menu-link-item\"\n />\n );\n});\n\nexport type MenuSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;\n\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Separator\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().separator, className)}\n data-slot=\"menu-separator\"\n />\n );\n});\n\nexport type MenuGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.Group>;\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Group\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().group, className)}\n data-slot=\"menu-group\"\n />\n );\n});\n\nexport type MenuGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;\n\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(\n function MenuGroupLabel({ className, ...props }, ref) {\n return (\n <BaseMenu.GroupLabel\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().groupLabel, className)}\n data-slot=\"menu-group-label\"\n />\n );\n },\n);\n\nexport const Menu = {\n Root: MenuRoot,\n Trigger: MenuTrigger,\n Portal: MenuPortal,\n Positioner: MenuPositioner,\n Popup: MenuPopup,\n Item: MenuItem,\n LinkItem: MenuLinkItem,\n Separator: MenuSeparator,\n Group: MenuGroup,\n GroupLabel: MenuGroupLabel,\n createHandle: BaseMenu.createHandle,\n};\n"],"mappings":";;;;;;;AAgBA,SAAgBA,WAA4B,OAA+B;CACzE,OAAO,oBAACC,KAAS,MAAV,EAAe,GAAI,MAAQ,CAAA;AACpC;AAIA,MAAaC,gBAAc,WAAgD,SAAS,YAClF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACD,KAAS,SAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,SAAS,SAAS;EACxD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;;AAGD,MAAa,aAAaA,KAAS;AAInC,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,KAAS,YAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,YAAY,SAAS;EAC3D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,OAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,WAAW,WAAuC,SAAS,SACtE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,MAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,MAAM,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CAAC;;;;AAOD,MAAa,eAAe,WAAuC,SAAS,aAC1E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,UAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,MAAM,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,WAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,WAAW,SAAS;EAC1D,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,KAAS,OAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,KAAS,YAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,KAAK,CAAC,CAAC,YAAY,SAAS;EAC3D,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAaE,SAAO;CAClB,MAAMH;CACN,SAASE;CACT,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,MAAM;CACN,UAAU;CACV,WAAW;CACX,OAAO;CACP,YAAY;CACZ,cAAcD,KAAS;AACzB"}
@@ -1 +1 @@
1
- {"version":3,"file":"option-selector.cjs","names":["optionSelector","cx"],"sources":["../../../src/components/option-selector/option-selector.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { optionSelector } from \"../../styled-system/recipes\";\n\nexport interface OptionSelectorOption {\n /** Stable value submitted by the option. */\n value: string;\n /** Optional visible text. Use `children` for a richer option body. */\n label?: ReactNode;\n /** Custom content such as an icon, preview or illustration. */\n children?: ReactNode;\n /** Disables only this option. */\n disabled?: boolean;\n /** Explicit id for the native input and its label. */\n id?: string;\n}\n\nexport type OptionSelectorValue = string | string[];\n\nexport interface OptionSelectorProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"children\" | \"onChange\"> {\n /** Optional icon displayed next to the legend. */\n icon?: ReactNode;\n /** Accessible and visible group label. */\n label?: ReactNode;\n /** Supporting text announced with the group. */\n description?: ReactNode;\n /** Options rendered as custom selectable cards. */\n options?: OptionSelectorOption[];\n /** Name used by the native radio/checkbox inputs and form submission. */\n name?: string;\n /** Select multiple options with checkboxes instead of one radio option. */\n multiple?: boolean;\n /** Controlled selection. A string is used for one option and an array for many. */\n value?: OptionSelectorValue;\n /** Initial selection for an uncontrolled selector. */\n defaultValue?: OptionSelectorValue;\n /** Called with the next selected value after an option changes. */\n onValueChange?: (value: OptionSelectorValue) => void;\n /** Native change event callback kept for compatibility with the legacy API. */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /** Layout of the option cards. Defaults to the horizontal legacy layout. */\n orientation?: \"horizontal\" | \"vertical\";\n /** Responsive number of columns in the option grid. */\n columns?: 1 | 2 | 3 | 4;\n children?: ReactNode;\n}\n\nfunction getMultipleValues(value: OptionSelectorValue | undefined) {\n if (Array.isArray(value)) {\n return value;\n }\n\n return value === undefined ? [] : [value];\n}\n\nfunction getSingleValue(value: OptionSelectorValue | undefined) {\n return Array.isArray(value) ? value[0] : value;\n}\n\nfunction isSelected(value: string, selected: OptionSelectorValue | undefined, multiple: boolean) {\n return multiple\n ? getMultipleValues(selected).includes(value)\n : getSingleValue(selected) === value;\n}\n\nexport const OptionSelector = forwardRef<HTMLFieldSetElement, OptionSelectorProps>(\n function OptionSelector(\n {\n children,\n className,\n columns = 1,\n defaultValue,\n description,\n disabled = false,\n icon,\n id,\n label,\n multiple = false,\n name,\n onChange,\n onValueChange,\n options = [],\n orientation = \"horizontal\",\n value: controlledValue,\n ...props\n },\n ref,\n ) {\n const generatedId = useId();\n const baseId = id ?? generatedId;\n const descriptionId = description ? `${baseId}-description` : undefined;\n const inputName = name ?? `${baseId}-options`;\n const [uncontrolledValue, setUncontrolledValue] = useState<OptionSelectorValue>(() =>\n multiple ? getMultipleValues(defaultValue) : (getSingleValue(defaultValue) ?? \"\"),\n );\n const selectedValue = controlledValue === undefined ? uncontrolledValue : controlledValue;\n const styles = optionSelector({\n orientation,\n columns: String(columns) as \"1\" | \"2\" | \"3\" | \"4\",\n });\n\n return (\n <fieldset\n {...props}\n ref={ref}\n aria-describedby={props[\"aria-describedby\"] ?? descriptionId}\n className={cx(styles.root, className)}\n data-disabled={disabled || undefined}\n data-jaci-component=\"option-selector\"\n data-slot=\"option-selector\"\n disabled={disabled}\n id={id}\n >\n {label || icon ? (\n <legend className={styles.legend} data-slot=\"option-selector-legend\">\n {icon ? (\n <span aria-hidden=\"true\" className={styles.icon} data-slot=\"option-selector-icon\">\n {icon}\n </span>\n ) : null}\n <span className={styles.label} data-slot=\"option-selector-label\">\n {label}\n </span>\n </legend>\n ) : null}\n {description ? (\n <p\n className={styles.description}\n data-slot=\"option-selector-description\"\n id={descriptionId}\n >\n {description}\n </p>\n ) : null}\n <div className={styles.options} data-slot=\"option-selector-options\">\n {options.map((option, index) => {\n const optionDisabled = disabled || Boolean(option.disabled);\n const selected = isSelected(option.value, selectedValue, multiple);\n const optionId = option.id ?? `${baseId}-option-${index}`;\n\n return (\n <label\n className={styles.option}\n data-disabled={optionDisabled || undefined}\n data-selected={selected || undefined}\n data-slot=\"option-selector-option\"\n htmlFor={optionId}\n key={option.value}\n >\n <input\n aria-label={typeof option.label === \"string\" ? option.label : undefined}\n checked={selected}\n className={styles.input}\n data-slot=\"option-selector-input\"\n disabled={optionDisabled}\n id={optionId}\n name={inputName}\n onChange={(event) => {\n const nextValue = multiple\n ? event.currentTarget.checked\n ? [...getMultipleValues(selectedValue), option.value]\n : getMultipleValues(selectedValue).filter(\n (current) => current !== option.value,\n )\n : option.value;\n\n setUncontrolledValue(nextValue);\n onValueChange?.(nextValue);\n onChange?.(event);\n }}\n type={multiple ? \"checkbox\" : \"radio\"}\n value={option.value}\n />\n <span className={styles.content}>\n {option.children}\n {option.label ? (\n <span className={styles.optionLabel} data-slot=\"option-selector-option-label\">\n {option.label}\n </span>\n ) : null}\n </span>\n </label>\n );\n })}\n {children}\n </div>\n </fieldset>\n );\n },\n);\n"],"mappings":"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"}
1
+ {"version":3,"file":"option-selector.cjs","names":["optionSelector","cx"],"sources":["../../../src/components/option-selector/option-selector.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { optionSelector } from \"../../styled-system/recipes\";\n\nexport interface OptionSelectorOption {\n /** Stable value submitted by the option. */\n value: string;\n /** Optional visible text. Use `children` for a richer option body. */\n label?: ReactNode;\n /** Custom content such as an icon, preview or illustration. */\n children?: ReactNode;\n /** Disables only this option. */\n disabled?: boolean;\n /** Explicit id for the native input and its label. */\n id?: string;\n}\n\nexport type OptionSelectorValue = string | string[];\n\nexport interface OptionSelectorProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"children\" | \"onChange\"> {\n /** Optional icon displayed next to the legend. */\n icon?: ReactNode;\n /** Accessible and visible group label. */\n label?: ReactNode;\n /** Supporting text announced with the group. */\n description?: ReactNode;\n /** Options rendered as custom selectable cards. */\n options?: OptionSelectorOption[];\n /** Name used by the native radio/checkbox inputs and form submission. */\n name?: string;\n /** Select multiple options with checkboxes instead of one radio option. */\n multiple?: boolean;\n /** Controlled selection. A string is used for one option and an array for many. */\n value?: OptionSelectorValue;\n /** Initial selection for an uncontrolled selector. */\n defaultValue?: OptionSelectorValue;\n /** Called with the next selected value after an option changes. */\n onValueChange?: (value: OptionSelectorValue) => void;\n /** Native change event callback. */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /** Layout of the option cards. Defaults to the horizontal layout. */\n orientation?: \"horizontal\" | \"vertical\";\n /** Responsive number of columns in the option grid. */\n columns?: 1 | 2 | 3 | 4;\n children?: ReactNode;\n}\n\nfunction getMultipleValues(value: OptionSelectorValue | undefined) {\n if (Array.isArray(value)) {\n return value;\n }\n\n return value === undefined ? [] : [value];\n}\n\nfunction getSingleValue(value: OptionSelectorValue | undefined) {\n return Array.isArray(value) ? value[0] : value;\n}\n\nfunction isSelected(value: string, selected: OptionSelectorValue | undefined, multiple: boolean) {\n return multiple\n ? getMultipleValues(selected).includes(value)\n : getSingleValue(selected) === value;\n}\n\nexport const OptionSelector = forwardRef<HTMLFieldSetElement, OptionSelectorProps>(\n function OptionSelector(\n {\n children,\n className,\n columns = 1,\n defaultValue,\n description,\n disabled = false,\n icon,\n id,\n label,\n multiple = false,\n name,\n onChange,\n onValueChange,\n options = [],\n orientation = \"horizontal\",\n value: controlledValue,\n ...props\n },\n ref,\n ) {\n const generatedId = useId();\n const baseId = id ?? generatedId;\n const descriptionId = description ? `${baseId}-description` : undefined;\n const inputName = name ?? `${baseId}-options`;\n const [uncontrolledValue, setUncontrolledValue] = useState<OptionSelectorValue>(() =>\n multiple ? getMultipleValues(defaultValue) : (getSingleValue(defaultValue) ?? \"\"),\n );\n const selectedValue = controlledValue === undefined ? uncontrolledValue : controlledValue;\n const styles = optionSelector({\n orientation,\n columns: String(columns) as \"1\" | \"2\" | \"3\" | \"4\",\n });\n\n return (\n <fieldset\n {...props}\n ref={ref}\n aria-describedby={props[\"aria-describedby\"] ?? descriptionId}\n className={cx(styles.root, className)}\n data-disabled={disabled || undefined}\n data-jaci-component=\"option-selector\"\n data-slot=\"option-selector\"\n disabled={disabled}\n id={id}\n >\n {label || icon ? (\n <legend className={styles.legend} data-slot=\"option-selector-legend\">\n {icon ? (\n <span aria-hidden=\"true\" className={styles.icon} data-slot=\"option-selector-icon\">\n {icon}\n </span>\n ) : null}\n <span className={styles.label} data-slot=\"option-selector-label\">\n {label}\n </span>\n </legend>\n ) : null}\n {description ? (\n <p\n className={styles.description}\n data-slot=\"option-selector-description\"\n id={descriptionId}\n >\n {description}\n </p>\n ) : null}\n <div className={styles.options} data-slot=\"option-selector-options\">\n {options.map((option, index) => {\n const optionDisabled = disabled || Boolean(option.disabled);\n const selected = isSelected(option.value, selectedValue, multiple);\n const optionId = option.id ?? `${baseId}-option-${index}`;\n\n return (\n <label\n className={styles.option}\n data-disabled={optionDisabled || undefined}\n data-selected={selected || undefined}\n data-slot=\"option-selector-option\"\n htmlFor={optionId}\n key={option.value}\n >\n <input\n aria-label={typeof option.label === \"string\" ? option.label : undefined}\n checked={selected}\n className={styles.input}\n data-slot=\"option-selector-input\"\n disabled={optionDisabled}\n id={optionId}\n name={inputName}\n onChange={(event) => {\n const nextValue = multiple\n ? event.currentTarget.checked\n ? [...getMultipleValues(selectedValue), option.value]\n : getMultipleValues(selectedValue).filter(\n (current) => current !== option.value,\n )\n : option.value;\n\n setUncontrolledValue(nextValue);\n onValueChange?.(nextValue);\n onChange?.(event);\n }}\n type={multiple ? \"checkbox\" : \"radio\"}\n value={option.value}\n />\n <span className={styles.content}>\n {option.children}\n {option.label ? (\n <span className={styles.optionLabel} data-slot=\"option-selector-option-label\">\n {option.label}\n </span>\n ) : null}\n </span>\n </label>\n );\n })}\n {children}\n </div>\n </fieldset>\n );\n },\n);\n"],"mappings":"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"}
@@ -32,9 +32,9 @@ interface OptionSelectorProps extends Omit<ComponentPropsWithoutRef<"fieldset">,
32
32
  defaultValue?: OptionSelectorValue;
33
33
  /** Called with the next selected value after an option changes. */
34
34
  onValueChange?: (value: OptionSelectorValue) => void;
35
- /** Native change event callback kept for compatibility with the legacy API. */
35
+ /** Native change event callback. */
36
36
  onChange?: ChangeEventHandler<HTMLInputElement>;
37
- /** Layout of the option cards. Defaults to the horizontal legacy layout. */
37
+ /** Layout of the option cards. Defaults to the horizontal layout. */
38
38
  orientation?: "horizontal" | "vertical";
39
39
  /** Responsive number of columns in the option grid. */
40
40
  columns?: 1 | 2 | 3 | 4;
@@ -32,9 +32,9 @@ interface OptionSelectorProps extends Omit<ComponentPropsWithoutRef<"fieldset">,
32
32
  defaultValue?: OptionSelectorValue;
33
33
  /** Called with the next selected value after an option changes. */
34
34
  onValueChange?: (value: OptionSelectorValue) => void;
35
- /** Native change event callback kept for compatibility with the legacy API. */
35
+ /** Native change event callback. */
36
36
  onChange?: ChangeEventHandler<HTMLInputElement>;
37
- /** Layout of the option cards. Defaults to the horizontal legacy layout. */
37
+ /** Layout of the option cards. Defaults to the horizontal layout. */
38
38
  orientation?: "horizontal" | "vertical";
39
39
  /** Responsive number of columns in the option grid. */
40
40
  columns?: 1 | 2 | 3 | 4;
@@ -1 +1 @@
1
- {"version":3,"file":"option-selector.js","names":[],"sources":["../../../src/components/option-selector/option-selector.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { optionSelector } from \"../../styled-system/recipes\";\n\nexport interface OptionSelectorOption {\n /** Stable value submitted by the option. */\n value: string;\n /** Optional visible text. Use `children` for a richer option body. */\n label?: ReactNode;\n /** Custom content such as an icon, preview or illustration. */\n children?: ReactNode;\n /** Disables only this option. */\n disabled?: boolean;\n /** Explicit id for the native input and its label. */\n id?: string;\n}\n\nexport type OptionSelectorValue = string | string[];\n\nexport interface OptionSelectorProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"children\" | \"onChange\"> {\n /** Optional icon displayed next to the legend. */\n icon?: ReactNode;\n /** Accessible and visible group label. */\n label?: ReactNode;\n /** Supporting text announced with the group. */\n description?: ReactNode;\n /** Options rendered as custom selectable cards. */\n options?: OptionSelectorOption[];\n /** Name used by the native radio/checkbox inputs and form submission. */\n name?: string;\n /** Select multiple options with checkboxes instead of one radio option. */\n multiple?: boolean;\n /** Controlled selection. A string is used for one option and an array for many. */\n value?: OptionSelectorValue;\n /** Initial selection for an uncontrolled selector. */\n defaultValue?: OptionSelectorValue;\n /** Called with the next selected value after an option changes. */\n onValueChange?: (value: OptionSelectorValue) => void;\n /** Native change event callback kept for compatibility with the legacy API. */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /** Layout of the option cards. Defaults to the horizontal legacy layout. */\n orientation?: \"horizontal\" | \"vertical\";\n /** Responsive number of columns in the option grid. */\n columns?: 1 | 2 | 3 | 4;\n children?: ReactNode;\n}\n\nfunction getMultipleValues(value: OptionSelectorValue | undefined) {\n if (Array.isArray(value)) {\n return value;\n }\n\n return value === undefined ? [] : [value];\n}\n\nfunction getSingleValue(value: OptionSelectorValue | undefined) {\n return Array.isArray(value) ? value[0] : value;\n}\n\nfunction isSelected(value: string, selected: OptionSelectorValue | undefined, multiple: boolean) {\n return multiple\n ? getMultipleValues(selected).includes(value)\n : getSingleValue(selected) === value;\n}\n\nexport const OptionSelector = forwardRef<HTMLFieldSetElement, OptionSelectorProps>(\n function OptionSelector(\n {\n children,\n className,\n columns = 1,\n defaultValue,\n description,\n disabled = false,\n icon,\n id,\n label,\n multiple = false,\n name,\n onChange,\n onValueChange,\n options = [],\n orientation = \"horizontal\",\n value: controlledValue,\n ...props\n },\n ref,\n ) {\n const generatedId = useId();\n const baseId = id ?? generatedId;\n const descriptionId = description ? `${baseId}-description` : undefined;\n const inputName = name ?? `${baseId}-options`;\n const [uncontrolledValue, setUncontrolledValue] = useState<OptionSelectorValue>(() =>\n multiple ? getMultipleValues(defaultValue) : (getSingleValue(defaultValue) ?? \"\"),\n );\n const selectedValue = controlledValue === undefined ? uncontrolledValue : controlledValue;\n const styles = optionSelector({\n orientation,\n columns: String(columns) as \"1\" | \"2\" | \"3\" | \"4\",\n });\n\n return (\n <fieldset\n {...props}\n ref={ref}\n aria-describedby={props[\"aria-describedby\"] ?? descriptionId}\n className={cx(styles.root, className)}\n data-disabled={disabled || undefined}\n data-jaci-component=\"option-selector\"\n data-slot=\"option-selector\"\n disabled={disabled}\n id={id}\n >\n {label || icon ? (\n <legend className={styles.legend} data-slot=\"option-selector-legend\">\n {icon ? (\n <span aria-hidden=\"true\" className={styles.icon} data-slot=\"option-selector-icon\">\n {icon}\n </span>\n ) : null}\n <span className={styles.label} data-slot=\"option-selector-label\">\n {label}\n </span>\n </legend>\n ) : null}\n {description ? (\n <p\n className={styles.description}\n data-slot=\"option-selector-description\"\n id={descriptionId}\n >\n {description}\n </p>\n ) : null}\n <div className={styles.options} data-slot=\"option-selector-options\">\n {options.map((option, index) => {\n const optionDisabled = disabled || Boolean(option.disabled);\n const selected = isSelected(option.value, selectedValue, multiple);\n const optionId = option.id ?? `${baseId}-option-${index}`;\n\n return (\n <label\n className={styles.option}\n data-disabled={optionDisabled || undefined}\n data-selected={selected || undefined}\n data-slot=\"option-selector-option\"\n htmlFor={optionId}\n key={option.value}\n >\n <input\n aria-label={typeof option.label === \"string\" ? option.label : undefined}\n checked={selected}\n className={styles.input}\n data-slot=\"option-selector-input\"\n disabled={optionDisabled}\n id={optionId}\n name={inputName}\n onChange={(event) => {\n const nextValue = multiple\n ? event.currentTarget.checked\n ? [...getMultipleValues(selectedValue), option.value]\n : getMultipleValues(selectedValue).filter(\n (current) => current !== option.value,\n )\n : option.value;\n\n setUncontrolledValue(nextValue);\n onValueChange?.(nextValue);\n onChange?.(event);\n }}\n type={multiple ? \"checkbox\" : \"radio\"}\n value={option.value}\n />\n <span className={styles.content}>\n {option.children}\n {option.label ? (\n <span className={styles.optionLabel} data-slot=\"option-selector-option-label\">\n {option.label}\n </span>\n ) : null}\n </span>\n </label>\n );\n })}\n {children}\n </div>\n </fieldset>\n );\n },\n);\n"],"mappings":"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"}
1
+ {"version":3,"file":"option-selector.js","names":[],"sources":["../../../src/components/option-selector/option-selector.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { optionSelector } from \"../../styled-system/recipes\";\n\nexport interface OptionSelectorOption {\n /** Stable value submitted by the option. */\n value: string;\n /** Optional visible text. Use `children` for a richer option body. */\n label?: ReactNode;\n /** Custom content such as an icon, preview or illustration. */\n children?: ReactNode;\n /** Disables only this option. */\n disabled?: boolean;\n /** Explicit id for the native input and its label. */\n id?: string;\n}\n\nexport type OptionSelectorValue = string | string[];\n\nexport interface OptionSelectorProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"children\" | \"onChange\"> {\n /** Optional icon displayed next to the legend. */\n icon?: ReactNode;\n /** Accessible and visible group label. */\n label?: ReactNode;\n /** Supporting text announced with the group. */\n description?: ReactNode;\n /** Options rendered as custom selectable cards. */\n options?: OptionSelectorOption[];\n /** Name used by the native radio/checkbox inputs and form submission. */\n name?: string;\n /** Select multiple options with checkboxes instead of one radio option. */\n multiple?: boolean;\n /** Controlled selection. A string is used for one option and an array for many. */\n value?: OptionSelectorValue;\n /** Initial selection for an uncontrolled selector. */\n defaultValue?: OptionSelectorValue;\n /** Called with the next selected value after an option changes. */\n onValueChange?: (value: OptionSelectorValue) => void;\n /** Native change event callback. */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /** Layout of the option cards. Defaults to the horizontal layout. */\n orientation?: \"horizontal\" | \"vertical\";\n /** Responsive number of columns in the option grid. */\n columns?: 1 | 2 | 3 | 4;\n children?: ReactNode;\n}\n\nfunction getMultipleValues(value: OptionSelectorValue | undefined) {\n if (Array.isArray(value)) {\n return value;\n }\n\n return value === undefined ? [] : [value];\n}\n\nfunction getSingleValue(value: OptionSelectorValue | undefined) {\n return Array.isArray(value) ? value[0] : value;\n}\n\nfunction isSelected(value: string, selected: OptionSelectorValue | undefined, multiple: boolean) {\n return multiple\n ? getMultipleValues(selected).includes(value)\n : getSingleValue(selected) === value;\n}\n\nexport const OptionSelector = forwardRef<HTMLFieldSetElement, OptionSelectorProps>(\n function OptionSelector(\n {\n children,\n className,\n columns = 1,\n defaultValue,\n description,\n disabled = false,\n icon,\n id,\n label,\n multiple = false,\n name,\n onChange,\n onValueChange,\n options = [],\n orientation = \"horizontal\",\n value: controlledValue,\n ...props\n },\n ref,\n ) {\n const generatedId = useId();\n const baseId = id ?? generatedId;\n const descriptionId = description ? `${baseId}-description` : undefined;\n const inputName = name ?? `${baseId}-options`;\n const [uncontrolledValue, setUncontrolledValue] = useState<OptionSelectorValue>(() =>\n multiple ? getMultipleValues(defaultValue) : (getSingleValue(defaultValue) ?? \"\"),\n );\n const selectedValue = controlledValue === undefined ? uncontrolledValue : controlledValue;\n const styles = optionSelector({\n orientation,\n columns: String(columns) as \"1\" | \"2\" | \"3\" | \"4\",\n });\n\n return (\n <fieldset\n {...props}\n ref={ref}\n aria-describedby={props[\"aria-describedby\"] ?? descriptionId}\n className={cx(styles.root, className)}\n data-disabled={disabled || undefined}\n data-jaci-component=\"option-selector\"\n data-slot=\"option-selector\"\n disabled={disabled}\n id={id}\n >\n {label || icon ? (\n <legend className={styles.legend} data-slot=\"option-selector-legend\">\n {icon ? (\n <span aria-hidden=\"true\" className={styles.icon} data-slot=\"option-selector-icon\">\n {icon}\n </span>\n ) : null}\n <span className={styles.label} data-slot=\"option-selector-label\">\n {label}\n </span>\n </legend>\n ) : null}\n {description ? (\n <p\n className={styles.description}\n data-slot=\"option-selector-description\"\n id={descriptionId}\n >\n {description}\n </p>\n ) : null}\n <div className={styles.options} data-slot=\"option-selector-options\">\n {options.map((option, index) => {\n const optionDisabled = disabled || Boolean(option.disabled);\n const selected = isSelected(option.value, selectedValue, multiple);\n const optionId = option.id ?? `${baseId}-option-${index}`;\n\n return (\n <label\n className={styles.option}\n data-disabled={optionDisabled || undefined}\n data-selected={selected || undefined}\n data-slot=\"option-selector-option\"\n htmlFor={optionId}\n key={option.value}\n >\n <input\n aria-label={typeof option.label === \"string\" ? option.label : undefined}\n checked={selected}\n className={styles.input}\n data-slot=\"option-selector-input\"\n disabled={optionDisabled}\n id={optionId}\n name={inputName}\n onChange={(event) => {\n const nextValue = multiple\n ? event.currentTarget.checked\n ? [...getMultipleValues(selectedValue), option.value]\n : getMultipleValues(selectedValue).filter(\n (current) => current !== option.value,\n )\n : option.value;\n\n setUncontrolledValue(nextValue);\n onValueChange?.(nextValue);\n onChange?.(event);\n }}\n type={multiple ? \"checkbox\" : \"radio\"}\n value={option.value}\n />\n <span className={styles.content}>\n {option.children}\n {option.label ? (\n <span className={styles.optionLabel} data-slot=\"option-selector-option-label\">\n {option.label}\n </span>\n ) : null}\n </span>\n </label>\n );\n })}\n {children}\n </div>\n </fieldset>\n );\n },\n);\n"],"mappings":"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"}
@@ -25,7 +25,7 @@ function ToastProvider(props) {
25
25
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Provider, { ...props });
26
26
  }
27
27
  /**
28
- * A bottom-centred notification region matching the legacy Jaci toast.
28
+ * A bottom-centred notification region.
29
29
  */
30
30
  const ToastViewport = (0, react.forwardRef)(function ToastViewport({ className, ...props }, ref) {
31
31
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Viewport, {
@@ -1 +1 @@
1
- {"version":3,"file":"toast.cjs","names":["BaseToast","withRecipeClassName","toastRecipe","cx"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n danger: \"danger\",\n error: \"danger\",\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region matching the legacy Jaci toast.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().viewport, className)}\n data-jaci-component=\"toast-viewport\"\n data-slot=\"toast-viewport\"\n />\n );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n /**\n * Visual status. When omitted, the value is inferred from the toast's\n * `type` (`error` maps to `danger`) and otherwise remains neutral.\n */\n tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n { className, toast: toastObject, tone, ...props },\n ref,\n) {\n const resolvedTone = resolveTone(toastObject.type, tone);\n\n return (\n <BaseToast.Root\n {...props}\n ref={ref}\n toast={toastObject}\n className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n data-jaci-component=\"toast\"\n data-jaci-tone={resolvedTone}\n data-slot=\"toast\"\n />\n );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().content, className)}\n data-slot=\"toast-content\"\n />\n );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(toastRecipe().text, className)}\n data-slot=\"toast-text\"\n />\n );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Title\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().title, className)}\n data-slot=\"toast-title\"\n />\n );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n function ToastDescription({ className, ...props }, ref) {\n return (\n <BaseToast.Description\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().description, className)}\n data-slot=\"toast-description\"\n />\n );\n },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseToast.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n ref={ref}\n className={withRecipeClassName(toastRecipe().close, className)}\n data-slot=\"toast-close\"\n >\n {children ?? \"×\"}\n </BaseToast.Close>\n );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Action\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().action, className)}\n data-slot=\"toast-action\"\n />\n );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n Provider: typeof ToastProvider;\n Viewport: typeof ToastViewport;\n Root: typeof ToastRoot;\n Content: typeof ToastContent;\n Text: typeof ToastText;\n Title: typeof ToastTitle;\n Description: typeof ToastDescription;\n Close: typeof ToastClose;\n Action: typeof ToastAction;\n Portal: typeof ToastPortal;\n useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Root: ToastRoot,\n Content: ToastContent,\n Text: ToastText,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Action: ToastAction,\n Portal: ToastPortal,\n useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"toast.cjs","names":["BaseToast","withRecipeClassName","toastRecipe","cx"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n danger: \"danger\",\n error: \"danger\",\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().viewport, className)}\n data-jaci-component=\"toast-viewport\"\n data-slot=\"toast-viewport\"\n />\n );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n /**\n * Visual status. When omitted, the value is inferred from the toast's\n * `type` (`error` maps to `danger`) and otherwise remains neutral.\n */\n tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n { className, toast: toastObject, tone, ...props },\n ref,\n) {\n const resolvedTone = resolveTone(toastObject.type, tone);\n\n return (\n <BaseToast.Root\n {...props}\n ref={ref}\n toast={toastObject}\n className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n data-jaci-component=\"toast\"\n data-jaci-tone={resolvedTone}\n data-slot=\"toast\"\n />\n );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().content, className)}\n data-slot=\"toast-content\"\n />\n );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(toastRecipe().text, className)}\n data-slot=\"toast-text\"\n />\n );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Title\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().title, className)}\n data-slot=\"toast-title\"\n />\n );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n function ToastDescription({ className, ...props }, ref) {\n return (\n <BaseToast.Description\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().description, className)}\n data-slot=\"toast-description\"\n />\n );\n },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseToast.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n ref={ref}\n className={withRecipeClassName(toastRecipe().close, className)}\n data-slot=\"toast-close\"\n >\n {children ?? \"×\"}\n </BaseToast.Close>\n );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Action\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().action, className)}\n data-slot=\"toast-action\"\n />\n );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n Provider: typeof ToastProvider;\n Viewport: typeof ToastViewport;\n Root: typeof ToastRoot;\n Content: typeof ToastContent;\n Text: typeof ToastText;\n Title: typeof ToastTitle;\n Description: typeof ToastDescription;\n Close: typeof ToastClose;\n Action: typeof ToastAction;\n Portal: typeof ToastPortal;\n useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Root: ToastRoot,\n Content: ToastContent,\n Text: ToastText,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Action: ToastAction,\n Portal: ToastPortal,\n useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}
@@ -11,7 +11,7 @@ type ToastProviderProps = ComponentPropsWithoutRef<typeof Toast.Provider>;
11
11
  declare function ToastProvider(props: ToastProviderProps): import("react").JSX.Element;
12
12
  type ToastViewportProps = ComponentPropsWithoutRef<typeof Toast.Viewport>;
13
13
  /**
14
- * A bottom-centred notification region matching the legacy Jaci toast.
14
+ * A bottom-centred notification region.
15
15
  */
16
16
  declare const ToastViewport: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
17
17
  interface ToastRootProps extends ComponentPropsWithoutRef<typeof Toast.Root> {
@@ -11,7 +11,7 @@ type ToastProviderProps = ComponentPropsWithoutRef<typeof Toast.Provider>;
11
11
  declare function ToastProvider(props: ToastProviderProps): import("react").JSX.Element;
12
12
  type ToastViewportProps = ComponentPropsWithoutRef<typeof Toast.Viewport>;
13
13
  /**
14
- * A bottom-centred notification region matching the legacy Jaci toast.
14
+ * A bottom-centred notification region.
15
15
  */
16
16
  declare const ToastViewport: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
17
17
  interface ToastRootProps extends ComponentPropsWithoutRef<typeof Toast.Root> {
@@ -25,7 +25,7 @@ function ToastProvider(props) {
25
25
  return /* @__PURE__ */ jsx(Toast.Provider, { ...props });
26
26
  }
27
27
  /**
28
- * A bottom-centred notification region matching the legacy Jaci toast.
28
+ * A bottom-centred notification region.
29
29
  */
30
30
  const ToastViewport = forwardRef(function ToastViewport({ className, ...props }, ref) {
31
31
  return /* @__PURE__ */ jsx(Toast.Viewport, {
@@ -1 +1 @@
1
- {"version":3,"file":"toast.js","names":["BaseToast","toastRecipe","Toast"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n danger: \"danger\",\n error: \"danger\",\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region matching the legacy Jaci toast.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().viewport, className)}\n data-jaci-component=\"toast-viewport\"\n data-slot=\"toast-viewport\"\n />\n );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n /**\n * Visual status. When omitted, the value is inferred from the toast's\n * `type` (`error` maps to `danger`) and otherwise remains neutral.\n */\n tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n { className, toast: toastObject, tone, ...props },\n ref,\n) {\n const resolvedTone = resolveTone(toastObject.type, tone);\n\n return (\n <BaseToast.Root\n {...props}\n ref={ref}\n toast={toastObject}\n className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n data-jaci-component=\"toast\"\n data-jaci-tone={resolvedTone}\n data-slot=\"toast\"\n />\n );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().content, className)}\n data-slot=\"toast-content\"\n />\n );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(toastRecipe().text, className)}\n data-slot=\"toast-text\"\n />\n );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Title\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().title, className)}\n data-slot=\"toast-title\"\n />\n );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n function ToastDescription({ className, ...props }, ref) {\n return (\n <BaseToast.Description\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().description, className)}\n data-slot=\"toast-description\"\n />\n );\n },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseToast.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n ref={ref}\n className={withRecipeClassName(toastRecipe().close, className)}\n data-slot=\"toast-close\"\n >\n {children ?? \"×\"}\n </BaseToast.Close>\n );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Action\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().action, className)}\n data-slot=\"toast-action\"\n />\n );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n Provider: typeof ToastProvider;\n Viewport: typeof ToastViewport;\n Root: typeof ToastRoot;\n Content: typeof ToastContent;\n Text: typeof ToastText;\n Title: typeof ToastTitle;\n Description: typeof ToastDescription;\n Close: typeof ToastClose;\n Action: typeof ToastAction;\n Portal: typeof ToastPortal;\n useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Root: ToastRoot,\n Content: ToastContent,\n Text: ToastText,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Action: ToastAction,\n Portal: ToastPortal,\n useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"toast.js","names":["BaseToast","toastRecipe","Toast"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n danger: \"danger\",\n error: \"danger\",\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().viewport, className)}\n data-jaci-component=\"toast-viewport\"\n data-slot=\"toast-viewport\"\n />\n );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n /**\n * Visual status. When omitted, the value is inferred from the toast's\n * `type` (`error` maps to `danger`) and otherwise remains neutral.\n */\n tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n { className, toast: toastObject, tone, ...props },\n ref,\n) {\n const resolvedTone = resolveTone(toastObject.type, tone);\n\n return (\n <BaseToast.Root\n {...props}\n ref={ref}\n toast={toastObject}\n className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n data-jaci-component=\"toast\"\n data-jaci-tone={resolvedTone}\n data-slot=\"toast\"\n />\n );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().content, className)}\n data-slot=\"toast-content\"\n />\n );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(toastRecipe().text, className)}\n data-slot=\"toast-text\"\n />\n );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Title\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().title, className)}\n data-slot=\"toast-title\"\n />\n );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n function ToastDescription({ className, ...props }, ref) {\n return (\n <BaseToast.Description\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().description, className)}\n data-slot=\"toast-description\"\n />\n );\n },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseToast.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n ref={ref}\n className={withRecipeClassName(toastRecipe().close, className)}\n data-slot=\"toast-close\"\n >\n {children ?? \"×\"}\n </BaseToast.Close>\n );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Action\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().action, className)}\n data-slot=\"toast-action\"\n />\n );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n Provider: typeof ToastProvider;\n Viewport: typeof ToastViewport;\n Root: typeof ToastRoot;\n Content: typeof ToastContent;\n Text: typeof ToastText;\n Title: typeof ToastTitle;\n Description: typeof ToastDescription;\n Close: typeof ToastClose;\n Action: typeof ToastAction;\n Portal: typeof ToastPortal;\n useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Root: ToastRoot,\n Content: ToastContent,\n Text: ToastText,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Action: ToastAction,\n Portal: ToastPortal,\n useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jaci-ui",
3
3
  "description": "Accessible, themeable React components by Jaci UI",
4
- "version": "0.1.0",
4
+ "version": "0.1.1",
5
5
  "license": "MIT",
6
6
  "author": {
7
7
  "name": "Richard Borges",
@@ -33,7 +33,10 @@
33
33
  "./dist/styles.css"
34
34
  ],
35
35
  "files": [
36
- "dist"
36
+ "dist",
37
+ "README.md",
38
+ "CHANGELOG.md",
39
+ "LICENSE"
37
40
  ],
38
41
  "main": "./dist/index.cjs",
39
42
  "module": "./dist/index.js",