@geomak/ui 6.34.1 → 7.0.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.
Files changed (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +85 -76
  3. package/dist/index.cjs +30 -30
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +11 -11
  6. package/dist/index.d.ts +11 -11
  7. package/dist/index.js +30 -30
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 G-MAKROGLOU
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,79 +1,101 @@
1
- # @geomak/ui
1
+ <div align="center">
2
2
 
3
- **Oxygen Design System** — a production-grade React component library for enterprise apps: internal dashboards, CRM tools, and landing pages.
3
+ <img src="./public/oxygen-logo.svg" alt="oxygen-ui" width="96" height="96" />
4
4
 
5
- Built with **React 19**, **Radix UI** (accessibility & behaviour), **Tailwind CSS v3**, and **Framer Motion**. Fully themeable through a CSS-variable design-token layer, with first-class light/dark support. Ships as ESM + CJS + TypeScript declarations.
5
+ # @geomak/ui · Oxygen Design System
6
+
7
+ **60+ production-grade React components for enterprise apps** — dashboards, CRMs, internal tools, and landing pages. Token-driven, accessible, light/dark first-class, and properly tree-shakeable.
8
+
9
+ [![npm version](https://img.shields.io/npm/v/@geomak/ui?color=0466c8&label=npm)](https://www.npmjs.com/package/@geomak/ui)
10
+ [![types](https://img.shields.io/npm/types/@geomak/ui?color=0466c8)](https://www.npmjs.com/package/@geomak/ui)
11
+ [![license](https://img.shields.io/npm/l/@geomak/ui?color=0466c8)](./LICENSE)
12
+ [![React 19](https://img.shields.io/badge/React-19-0466c8)](https://react.dev)
13
+ [![Storybook](https://img.shields.io/badge/Storybook-live%20demo-ff4785)](https://oxygenui.com)
14
+
15
+ ### ▶ [Browse the live, interactive demo →](https://oxygenui.com)
16
+
17
+ <!-- Tip: drop a Storybook screen-recording here for the launch — docs/assets/preview.gif -->
18
+
19
+ </div>
20
+
21
+ Built on **React 19**, **Radix UI** (accessibility + behaviour), **Tailwind CSS**, and **Framer Motion**. Ships as ESM + CJS + TypeScript declarations, with a CSS-variable token layer you can re-theme at runtime.
6
22
 
7
23
  ---
8
24
 
9
- ## Installation
25
+ ## Why oxygen-ui
26
+
27
+ - **Token-driven, dark mode first-class.** Every colour, radius, shadow, and motion value is a CSS variable. Light and dark aren't an afterthought — both are designed. Re-theme the whole system with one override.
28
+ - **Accessible by default.** Behaviour comes from Radix (focus traps, keyboard nav, ARIA); icons are `aria-hidden`, controls are labelled.
29
+ - **Genuinely tree-shakeable.** Import one icon and ship **0.45 KB** (not the whole set). The entire library is **~76 KB gzipped** with deps external — and a CI guard keeps it from regressing.
30
+ - **Strict and tested.** `strict` TypeScript, ESLint at zero warnings, 360+ unit tests, per-export bundle budgets in CI.
31
+ - **Batteries included.** Not just buttons — a `Scheduler`, a real-time `Chat` (WebSocket-ready), `Table` with pagination, a `Form` engine, an e-commerce `Cart`, and a full **Marketing** kit (hero, pricing, testimonials, lead capture) to build the landing page too.
32
+
33
+ ---
34
+
35
+ ## Quick start
10
36
 
11
37
  ```bash
12
- npm install @geomak/ui
13
- # or
14
- yarn add @geomak/ui
38
+ npm install @geomak/ui # peer deps: react@19, react-dom@19
15
39
  ```
16
40
 
17
- Import the stylesheet once at your app root:
18
-
19
41
  ```tsx
20
- import '@geomak/ui/styles'
42
+ import '@geomak/ui/styles' // 1. tokens + component styles, once at the root
43
+ import { ThemeProvider, Button, Badge } from '@geomak/ui'
44
+
45
+ export default function App() {
46
+ return (
47
+ <ThemeProvider> {/* 2. light/dark + token theming */}
48
+ <Button content="Get started" />
49
+ <Badge tone="accent">New</Badge>
50
+ </ThemeProvider>
51
+ )
52
+ }
21
53
  ```
22
54
 
23
- Wrap your app with the providers for the features you use:
55
+ Tree-shakeable icons live on their own subpath:
24
56
 
25
57
  ```tsx
26
- import { NotificationProvider, TooltipProvider } from '@geomak/ui'
27
-
28
- function App() {
29
- return (
30
- <NotificationProvider>
31
- <TooltipProvider>
32
- {/* your app */}
33
- </TooltipProvider>
34
- </NotificationProvider>
35
- )
36
- }
58
+ import { ChevronDown, Search, createIcon } from '@geomak/ui/icons'
37
59
  ```
38
60
 
39
- Optional providers: `ThemeProvider` (scoped theming / dark mode), `CartProvider` (e-commerce cart state).
61
+ > Optional providers wrap only the features you use: `NotificationProvider`, `TooltipProvider`, `CartProvider`.
40
62
 
41
63
  ---
42
64
 
43
65
  ## Components
44
66
 
45
- 60+ components across the following groups. Browse the full, interactive catalog with live controls and guides in **Storybook** (`yarn storybook`, or the deployed build on Netlify).
67
+ 60+ components across these groups — all with **live controls and a written guide** in [Storybook](https://oxygenui.com).
46
68
 
47
69
  | Group | Components |
48
70
  |---|---|
49
- | **Layout** | AppShell · Box · Flex · Grid · Portal · ScalableContainer · FadingBase |
50
- | **Navigation** | TopBar · Sidebar · Breadcrumbs · ContextMenu · MegaMenu |
71
+ | **Layout** | AppShell · Box · Flex · Grid · Portal · ScalableContainer |
72
+ | **Navigation** | TopBar · Sidebar · Breadcrumbs · ContextMenu · MegaMenu · MenuButton |
51
73
  | **Buttons** | Button · IconButton · FAB |
52
74
  | **Inputs** | TextInput · NumberInput · Password · SearchInput · TextArea · Checkbox · Switch · RadioGroup · SegmentedControl · Dropdown · AutoComplete · TreeSelect · TagsInput · Slider · Rating · OtpInput · FileInput · ColorPicker · DatePicker · DateRangePicker · TimePicker |
53
- | **Forms** | Form (`useForm` API) · CreditCardForm |
54
- | **Data Display** | Table · List · Tree · Tabs · Accordion · Card · CardCarousel · Statistic · Avatar · Badge · Kbd · Calendar · Typography |
55
- | **Feedback** | Modal · Drawer · Tooltip · Notification · PopConfirm · Wizard |
75
+ | **Forms** | Form (`useForm`) · CreditCardForm |
76
+ | **Data Display** | Table · List · Tree · Tabs · Accordion · Card · CardCarousel · Statistic · Avatar · Badge · Kbd · Typography · **Chat** · **Scheduler** · Timeline · Stepper |
77
+ | **Feedback** | Modal · Drawer · Tooltip · Notification · PopConfirm · Wizard · LogoutTimer |
56
78
  | **Progress** | LoadingSpinner · Skeleton |
57
79
  | **E-Commerce** | Cart · CartProvider / `useCart` · CartButton · EmptyCart · Checkout |
80
+ | **Marketing** | Jumbotron · FeatureGrid · PricingPlans · Testimonials · SlideShow · Video · Parallax · Blog · Socials · CookieConsent · LeadCapture |
81
+ | **Icons** | `Icon.*` namespace · `@geomak/ui/icons` (tree-shakeable) · `createIcon` |
58
82
  | **Theming** | ThemeProvider · ThemeSwitch |
83
+ | **Hooks** | useForm · useJwt · useBreakpoint · useLocalStorage |
59
84
 
60
85
  ---
61
86
 
62
87
  ## Design tokens
63
88
 
64
- Every visual decision is driven by a CSS-variable token layer (colours, radius, shadows, typography, density, motion, z-index) — swap any of it at runtime with a single override. Tokens are also exported as JS for canvas / email / SSR contexts:
89
+ Every visual decision is a CSS variable (colour, radius, shadow, typography, density, motion, z-index). Tokens are also exported as JS for canvas / email / SSR:
65
90
 
66
91
  ```tsx
67
- import { semanticTokens, vars, palette } from '@geomak/ui/tokens'
92
+ import { vars, semanticTokens, palette } from '@geomak/ui/tokens'
68
93
 
69
- // CSS-var references (respond to light/dark automatically)
70
- <div style={{ background: vars.color.surface, borderRadius: vars.radius.lg }} />
71
-
72
- // Resolved hex/px values
73
- semanticTokens.dark.accent // '#2d88ff'
94
+ <div style={{ background: vars.color.surface, borderRadius: vars.radius.lg }} /> // CSS-var refs (auto light/dark)
95
+ semanticTokens.dark.accent // resolved hex
74
96
  ```
75
97
 
76
- Override globally after importing the stylesheet:
98
+ Override globally, after importing the stylesheet:
77
99
 
78
100
  ```css
79
101
  :root { --color-accent: #7c3aed; }
@@ -83,63 +105,50 @@ See the **Tokens**, **Palette**, and **Parameterization** guides in Storybook.
83
105
 
84
106
  ---
85
107
 
86
- ## Tailwind setup (consuming app)
108
+ ## Tailwind setup (optional)
87
109
 
88
- To use the same tokens and utilities in your own markup, extend your Tailwind config with the shipped brand palette. The library's compiled `styles` already cover the components themselves — this step is only needed for your own classes.
110
+ The shipped `@geomak/ui/styles` already covers the components. This step is only needed if you want the same brand palette + token utilities in *your own* markup:
89
111
 
90
112
  ```js
91
- const PALETTE = require('@geomak/ui/src/utils/palette.json')
113
+ // tailwind.config.cjs
114
+ const { palette } = require('@geomak/ui/tokens')
92
115
 
93
116
  module.exports = {
94
- content: ['./src/**/*.{ts,tsx}', './node_modules/@geomak/ui/dist/**/*.js'],
95
- darkMode: 'class',
96
- theme: {
97
- extend: {
98
- colors: PALETTE,
99
- // semantic utilities map to the CSS vars, e.g.:
100
- // background: 'var(--color-background)', surface: 'var(--color-surface)', …
101
- },
102
- },
117
+ content: ['./src/**/*.{ts,tsx}', './node_modules/@geomak/ui/dist/**/*.js'],
118
+ darkMode: 'class',
119
+ theme: { extend: { colors: palette } },
103
120
  }
104
121
  ```
105
122
 
106
- The library's own config also restores the standard **gray / slate / zinc** ramps and **black** alongside the brand palette, so the basic neutrals are always available.
123
+ The standard **gray / slate / zinc** ramps and **black** stay available alongside the brand palette.
107
124
 
108
125
  ---
109
126
 
110
- ## Development
127
+ ## Package exports
111
128
 
112
- ```bash
113
- yarn # install dependencies
114
- yarn storybook # start Storybook
115
- yarn build # build the library (ESM + CJS + .d.ts + styles)
116
- yarn typecheck # type-check
117
- yarn lint # lint
118
- yarn test # run unit tests (Vitest)
119
- yarn ci # typecheck + lint + test
120
- ```
129
+ | Import | What |
130
+ |---|---|
131
+ | `@geomak/ui` | All components, providers, hooks, the `Icon` namespace, `cx` |
132
+ | `@geomak/ui/icons` | Tree-shakeable named icons + `createIcon` |
133
+ | `@geomak/ui/styles` | Compiled CSS (tokens + components) |
134
+ | `@geomak/ui/tokens` | `palette`, `semanticTokens`, `vars` as JS |
121
135
 
122
136
  ---
123
137
 
124
- ## Releases
125
-
126
- Uses [semantic-release](https://github.com/semantic-release/semantic-release) with [Conventional Commits](https://www.conventionalcommits.org/).
138
+ ## Development
127
139
 
128
- | Commit prefix | Version bump |
129
- |---|---|
130
- | `fix:` | patch (0.0.x) |
131
- | `feat:` | minor (0.x.0) |
132
- | `feat!:` / `BREAKING CHANGE:` | major (x.0.0) |
140
+ ```bash
141
+ yarn # install
142
+ yarn storybook # interactive catalog + guides
143
+ yarn build # ESM + CJS + .d.ts + styles
144
+ yarn ci # typecheck + lint + test + bundle-size guard
145
+ yarn size # report per-export gzip sizes against budgets
146
+ ```
133
147
 
134
- Merging to `main` automatically lints, type-checks, tests, publishes to npm, and deploys Storybook to Netlify.
148
+ Releases are automated with [semantic-release](https://github.com/semantic-release/semantic-release) + [Conventional Commits](https://www.conventionalcommits.org/): merging to `main` lints, type-checks, tests, publishes to npm, and deploys Storybook.
135
149
 
136
150
  ---
137
151
 
138
- ## Publishing
152
+ ## License
139
153
 
140
- Handled automatically by GitHub Actions on merge to `main`. To publish manually:
141
-
142
- ```bash
143
- yarn build
144
- npm publish --access public
145
- ```
154
+ [MIT](./LICENSE) © G-MAKROGLOU
package/dist/index.cjs CHANGED
@@ -495,7 +495,7 @@ function IconButton({
495
495
  type = "primary",
496
496
  buttonType = "button",
497
497
  disabled = false,
498
- size = "lg",
498
+ size = "md",
499
499
  loading = false,
500
500
  loadingIcon,
501
501
  title,
@@ -520,7 +520,7 @@ function IconButton({
520
520
  title,
521
521
  "aria-label": title,
522
522
  style,
523
- className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${className}`.trim(),
523
+ className: `${size === "sm" ? "p-1" : size === "md" ? "p-1.5" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${className}`.trim(),
524
524
  children: loading ? loadingIcon : icon
525
525
  }
526
526
  );
@@ -733,7 +733,7 @@ var SIZE_MAP = {
733
733
  function Modal({
734
734
  width,
735
735
  size = "md",
736
- isOpen = false,
736
+ open = false,
737
737
  onClose,
738
738
  onOk,
739
739
  onCancel,
@@ -746,10 +746,10 @@ function Modal({
746
746
  }) {
747
747
  const reduced = framerMotion.useReducedMotion();
748
748
  const maxWidth = width ?? SIZE_MAP[size];
749
- return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: (open) => {
750
- if (!open) onClose?.();
749
+ return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open, onOpenChange: (next) => {
750
+ if (!next) onClose?.();
751
751
  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
752
- /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
752
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
753
753
  framerMotion.motion.div,
754
754
  {
755
755
  className: "fixed inset-0 bg-backdrop z-overlay",
@@ -759,7 +759,7 @@ function Modal({
759
759
  transition: { duration: reduced ? 0 : 0.18, ease: "easeOut" }
760
760
  }
761
761
  ) }) }),
762
- /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
762
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
763
763
  framerMotion.motion.div,
764
764
  {
765
765
  className: `fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none ${className}`.trim(),
@@ -785,7 +785,7 @@ function Modal({
785
785
  {
786
786
  "aria-label": "Close",
787
787
  className: "flex h-7 w-7 items-center justify-center rounded-lg text-foreground-muted hover:bg-surface-raised hover:text-foreground transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
788
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
788
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
789
789
  }
790
790
  ) })
791
791
  ] }),
@@ -821,7 +821,7 @@ var SIZE_MAP2 = {
821
821
  full: "calc(100vw - 1rem)"
822
822
  };
823
823
  function Drawer({
824
- isOpen = false,
824
+ open = false,
825
825
  onClose,
826
826
  hasFooter = true,
827
827
  placement = "right",
@@ -840,10 +840,10 @@ function Drawer({
840
840
  const hiddenX = isRight ? "100%" : "-100%";
841
841
  const resolvedWidth = width ?? SIZE_MAP2[size];
842
842
  const widthCss = typeof resolvedWidth === "number" ? `${resolvedWidth}px` : resolvedWidth;
843
- return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: (open) => {
844
- if (!open) onClose?.();
843
+ return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open, onOpenChange: (next) => {
844
+ if (!next) onClose?.();
845
845
  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
846
- /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
846
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
847
847
  framerMotion.motion.div,
848
848
  {
849
849
  className: "fixed inset-0 bg-backdrop z-overlay",
@@ -853,7 +853,7 @@ function Drawer({
853
853
  transition: { duration: reduced ? 0 : 0.2, ease: "easeOut" }
854
854
  }
855
855
  ) }) }),
856
- /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
856
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
857
857
  framerMotion.motion.div,
858
858
  {
859
859
  className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none ${className}`.trim(),
@@ -878,7 +878,7 @@ function Drawer({
878
878
  {
879
879
  "aria-label": "Close drawer",
880
880
  className: "flex h-7 w-7 items-center justify-center rounded-lg text-foreground-muted hover:bg-surface-raised hover:text-foreground transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
881
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
881
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
882
882
  }
883
883
  ) })
884
884
  ] }),
@@ -958,7 +958,7 @@ var MARKER_TRANSITION = { duration: 0.26, ease: [0.16, 1, 0.3, 1] };
958
958
  function Tabs({
959
959
  value,
960
960
  defaultValue,
961
- onValueChange,
961
+ onChange,
962
962
  variant = "underline",
963
963
  size = "md",
964
964
  orientation = "horizontal",
@@ -973,8 +973,8 @@ function Tabs({
973
973
  const indicatorId = React28.useId();
974
974
  const select = React28.useCallback((next) => {
975
975
  if (!isControlled) setInternal(next);
976
- onValueChange?.(next);
977
- }, [isControlled, onValueChange]);
976
+ onChange?.(next);
977
+ }, [isControlled, onChange]);
978
978
  const registry = React28.useRef(/* @__PURE__ */ new Map());
979
979
  const orderRef = React28.useRef(0);
980
980
  const [, bump] = React28.useState(0);
@@ -1393,7 +1393,7 @@ function Accordion2({
1393
1393
  type = "single",
1394
1394
  defaultValue,
1395
1395
  value,
1396
- onValueChange,
1396
+ onChange,
1397
1397
  collapsible = true,
1398
1398
  variant = "separated",
1399
1399
  className = "",
@@ -1414,7 +1414,7 @@ function Accordion2({
1414
1414
  type: "multiple",
1415
1415
  defaultValue,
1416
1416
  value,
1417
- onValueChange,
1417
+ onValueChange: onChange,
1418
1418
  ...common,
1419
1419
  children: inner
1420
1420
  }
@@ -1427,7 +1427,7 @@ function Accordion2({
1427
1427
  collapsible,
1428
1428
  defaultValue,
1429
1429
  value,
1430
- onValueChange,
1430
+ onValueChange: onChange,
1431
1431
  ...common,
1432
1432
  children: inner
1433
1433
  }
@@ -2659,7 +2659,7 @@ function LogoutTimer({
2659
2659
  clearTimers();
2660
2660
  };
2661
2661
  }, [enabled, timeout, countdown, events.join(","), startIdle, clearTimers]);
2662
- return /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen: warning, onClose: stay, hasFooter: false, title, size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
2662
+ return /* @__PURE__ */ jsxRuntime.jsx(Modal, { open: warning, onClose: stay, hasFooter: false, title, size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
2663
2663
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground-secondary", children: description }),
2664
2664
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
2665
2665
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-semibold tabular-nums text-foreground", "aria-live": "polite", children: formatTime(remaining) }),
@@ -3302,9 +3302,9 @@ var Stepper2 = ({
3302
3302
  }) => {
3303
3303
  const btn = "flex h-7 w-7 items-center justify-center text-foreground-secondary hover:bg-surface-raised disabled:opacity-40 disabled:hover:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset transition-colors";
3304
3304
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center rounded-md border border-border overflow-hidden", children: [
3305
- /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Decrease quantity", disabled: quantity <= 1, onClick: () => onChange?.(quantity - 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M5 12h14" }) }) }),
3305
+ /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Decrease quantity", disabled: quantity <= 1, onClick: () => onChange?.(quantity - 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M5 12h14" }) }) }),
3306
3306
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-8 text-center text-sm tabular-nums text-foreground select-none", children: quantity }),
3307
- /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Increase quantity", disabled: max != null && quantity >= max, onClick: () => onChange?.(quantity + 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M12 5v14M5 12h14" }) }) })
3307
+ /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Increase quantity", disabled: max != null && quantity >= max, onClick: () => onChange?.(quantity + 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M12 5v14M5 12h14" }) }) })
3308
3308
  ] });
3309
3309
  };
3310
3310
  function Cart({
@@ -4791,7 +4791,7 @@ function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
4791
4791
  onClick: previousApp,
4792
4792
  "aria-label": "Previous",
4793
4793
  className: "cursor-pointer rounded-lg transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence rotate-180",
4794
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
4794
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
4795
4795
  }
4796
4796
  ),
4797
4797
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: indexPool.map((index, id) => {
@@ -4828,7 +4828,7 @@ function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
4828
4828
  onClick: nextApp,
4829
4829
  "aria-label": "Next",
4830
4830
  className: "cursor-pointer rounded-lg transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence",
4831
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
4831
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
4832
4832
  }
4833
4833
  )
4834
4834
  ] }) });
@@ -5435,8 +5435,8 @@ function Pagination({
5435
5435
  const currentPerPageLabel = currentOpt?.label ?? currentOpt?.value ?? options.perPage ?? "";
5436
5436
  const FOCUS = "focus-visible:!ring-0 focus-visible:!border-accent";
5437
5437
  const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsxRuntime.jsx(Button_default, { variant: "outline", size: "sm", disabled, onClick, icon, className: `w-7 !px-0 ${FOCUS}`, "aria-label": title, title });
5438
- const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" }) });
5439
- const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l6 6-6 6M12 6l6 6-6 6" }) });
5438
+ const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" }) });
5439
+ const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l6 6-6 6M12 6l6 6-6 6" }) });
5440
5440
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-3", children: [
5441
5441
  options.withPicker && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
5442
5442
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-xs text-foreground-muted", children: "Rows per page" }),
@@ -7114,7 +7114,7 @@ function Dropdown({
7114
7114
  children: labelFor(value)
7115
7115
  }
7116
7116
  ) }),
7117
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
7117
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
7118
7118
  ]
7119
7119
  }
7120
7120
  ) }),
@@ -8937,7 +8937,7 @@ function DateRangePicker({
8937
8937
  onClick: () => setLeftMonth(addMonths3(leftMonth, -1)),
8938
8938
  "aria-label": "Previous month",
8939
8939
  className: "absolute -top-1 left-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
8940
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
8940
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
8941
8941
  }
8942
8942
  ),
8943
8943
  renderMonth(leftMonth)
@@ -8950,7 +8950,7 @@ function DateRangePicker({
8950
8950
  onClick: () => setLeftMonth(addMonths3(leftMonth, 1)),
8951
8951
  "aria-label": "Next month",
8952
8952
  className: "absolute -top-1 right-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
8953
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
8953
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
8954
8954
  }
8955
8955
  ),
8956
8956
  renderMonth(addMonths3(leftMonth, 1))