@optimum-intelligence/opti-ui 0.5.0 → 0.5.2

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 (12) hide show
  1. package/dist/components/app-shell/AppShell.js +139 -121
  2. package/dist/components/app-shell/AppShell.js.map +1 -1
  3. package/dist/components/dialog/Dialog.d.ts +8 -2
  4. package/dist/components/dialog/Dialog.js +91 -76
  5. package/dist/components/dialog/Dialog.js.map +1 -1
  6. package/dist/components/drawer/Drawer.d.ts +4 -1
  7. package/dist/components/drawer/Drawer.js +136 -131
  8. package/dist/components/drawer/Drawer.js.map +1 -1
  9. package/dist/components.json +40 -1
  10. package/dist/llms-full.txt +3 -0
  11. package/dist/opti-ui.css +16 -6
  12. package/package.json +1 -1
package/dist/components/drawer/Drawer.js CHANGED
@@ -14,210 +14,215 @@ import { Dialog } from "@base-ui/react/dialog";
14
14
  * sheet use `Dialog.Content` with `placement`.
15
15
  */
16
16
  function Drawer(t0) {
17
- const $ = c(57);
18
- const { open: openProp, defaultOpen: t1, onOpenChange, trigger, title, eyebrow, description, actions, footer, side: t2, size: t3, dismissible: t4, modal: t5, closeLabel: t6, className, bodyProps, children, ref } = t0;
17
+ const $ = c(58);
18
+ const { open: openProp, defaultOpen: t1, onOpenChange, trigger, title, eyebrow, description, actions, footer, side: t2, size: t3, dismissible: t4, modal: t5, backdropBlur: t6, closeLabel: t7, className, bodyProps, children, ref } = t0;
19
19
  const defaultOpen = t1 === void 0 ? false : t1;
20
20
  const side = t2 === void 0 ? "right" : t2;
21
21
  const size = t3 === void 0 ? "md" : t3;
22
22
  const dismissible = t4 === void 0 ? true : t4;
23
23
  const modal = t5 === void 0 ? true : t5;
24
- const closeLabel = t6 === void 0 ? "Close" : t6;
24
+ const backdropBlur = t6 === void 0 ? "md" : t6;
25
+ const closeLabel = t7 === void 0 ? "Close" : t7;
25
26
  const [inner, setInner] = React.useState(defaultOpen);
26
27
  const open = openProp ?? inner;
27
28
  const container = usePortalContainer();
28
- let t7;
29
+ let t8;
29
30
  if ($[0] !== dismissible || $[1] !== onOpenChange) {
30
- t7 = (next) => {
31
+ t8 = (next) => {
31
32
  if (!next && !dismissible) return;
32
33
  setInner(next);
33
34
  onOpenChange?.(next);
34
35
  };
35
36
  $[0] = dismissible;
36
37
  $[1] = onOpenChange;
37
- $[2] = t7;
38
- } else t7 = $[2];
39
- let t8;
38
+ $[2] = t8;
39
+ } else t8 = $[2];
40
+ let t9;
40
41
  if ($[3] !== trigger) {
41
- t8 = trigger && /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger });
42
+ t9 = trigger && /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger });
42
43
  $[3] = trigger;
43
- $[4] = t8;
44
- } else t8 = $[4];
45
- let t9;
46
- if ($[5] !== modal) {
47
- t9 = modal && /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "oui-dialog__backdrop" });
48
- $[5] = modal;
49
- $[6] = t9;
50
- } else t9 = $[6];
44
+ $[4] = t9;
45
+ } else t9 = $[4];
51
46
  let t10;
52
- if ($[7] !== className) {
53
- t10 = cx("oui-drawer", className);
54
- $[7] = className;
55
- $[8] = t10;
56
- } else t10 = $[8];
47
+ if ($[5] !== backdropBlur || $[6] !== modal) {
48
+ t10 = modal && /* @__PURE__ */ jsx(Dialog.Backdrop, {
49
+ className: "oui-dialog__backdrop",
50
+ "data-blur": backdropBlur
51
+ });
52
+ $[5] = backdropBlur;
53
+ $[6] = modal;
54
+ $[7] = t10;
55
+ } else t10 = $[7];
57
56
  let t11;
58
- if ($[9] !== eyebrow) {
59
- t11 = eyebrow && /* @__PURE__ */ jsx("div", {
57
+ if ($[8] !== className) {
58
+ t11 = cx("oui-drawer", className);
59
+ $[8] = className;
60
+ $[9] = t11;
61
+ } else t11 = $[9];
62
+ let t12;
63
+ if ($[10] !== eyebrow) {
64
+ t12 = eyebrow && /* @__PURE__ */ jsx("div", {
60
65
  className: "oui-drawer__eyebrow",
61
66
  children: eyebrow
62
67
  });
63
- $[9] = eyebrow;
64
- $[10] = t11;
65
- } else t11 = $[10];
66
- let t12;
67
- if ($[11] !== title) {
68
- t12 = /* @__PURE__ */ jsx(Dialog.Title, {
68
+ $[10] = eyebrow;
69
+ $[11] = t12;
70
+ } else t12 = $[11];
71
+ let t13;
72
+ if ($[12] !== title) {
73
+ t13 = /* @__PURE__ */ jsx(Dialog.Title, {
69
74
  className: "oui-drawer__title",
70
75
  children: title
71
76
  });
72
- $[11] = title;
73
- $[12] = t12;
74
- } else t12 = $[12];
75
- let t13;
76
- if ($[13] !== description) {
77
- t13 = description && /* @__PURE__ */ jsx(Dialog.Description, {
77
+ $[12] = title;
78
+ $[13] = t13;
79
+ } else t13 = $[13];
80
+ let t14;
81
+ if ($[14] !== description) {
82
+ t14 = description && /* @__PURE__ */ jsx(Dialog.Description, {
78
83
  className: "oui-drawer__description",
79
84
  children: description
80
85
  });
81
- $[13] = description;
82
- $[14] = t13;
83
- } else t13 = $[14];
84
- let t14;
85
- if ($[15] !== t11 || $[16] !== t12 || $[17] !== t13) {
86
- t14 = /* @__PURE__ */ jsxs("div", {
86
+ $[14] = description;
87
+ $[15] = t14;
88
+ } else t14 = $[15];
89
+ let t15;
90
+ if ($[16] !== t12 || $[17] !== t13 || $[18] !== t14) {
91
+ t15 = /* @__PURE__ */ jsxs("div", {
87
92
  className: "oui-drawer__heading",
88
93
  children: [
89
- t11,
90
94
  t12,
91
- t13
95
+ t13,
96
+ t14
92
97
  ]
93
98
  });
94
- $[15] = t11;
95
99
  $[16] = t12;
96
100
  $[17] = t13;
97
101
  $[18] = t14;
98
- } else t14 = $[18];
99
- const t15 = !dismissible;
100
- let t16;
101
- if ($[19] !== closeLabel || $[20] !== t15) {
102
- t16 = /* @__PURE__ */ jsx(IconButton, {
102
+ $[19] = t15;
103
+ } else t15 = $[19];
104
+ const t16 = !dismissible;
105
+ let t17;
106
+ if ($[20] !== closeLabel || $[21] !== t16) {
107
+ t17 = /* @__PURE__ */ jsx(IconButton, {
103
108
  "aria-label": closeLabel,
104
- disabled: t15
109
+ disabled: t16
105
110
  });
106
- $[19] = closeLabel;
107
- $[20] = t15;
111
+ $[20] = closeLabel;
108
112
  $[21] = t16;
109
- } else t16 = $[21];
110
- let t17;
111
- if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
112
- t17 = /* @__PURE__ */ jsx(XIcon, {});
113
113
  $[22] = t17;
114
114
  } else t17 = $[22];
115
115
  let t18;
116
- if ($[23] !== t16) {
117
- t18 = /* @__PURE__ */ jsx(Dialog.Close, {
118
- render: t16,
119
- children: t17
120
- });
121
- $[23] = t16;
122
- $[24] = t18;
123
- } else t18 = $[24];
116
+ if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
117
+ t18 = /* @__PURE__ */ jsx(XIcon, {});
118
+ $[23] = t18;
119
+ } else t18 = $[23];
124
120
  let t19;
125
- if ($[25] !== actions || $[26] !== t18) {
126
- t19 = /* @__PURE__ */ jsxs("div", {
121
+ if ($[24] !== t17) {
122
+ t19 = /* @__PURE__ */ jsx(Dialog.Close, {
123
+ render: t17,
124
+ children: t18
125
+ });
126
+ $[24] = t17;
127
+ $[25] = t19;
128
+ } else t19 = $[25];
129
+ let t20;
130
+ if ($[26] !== actions || $[27] !== t19) {
131
+ t20 = /* @__PURE__ */ jsxs("div", {
127
132
  className: "oui-drawer__actions",
128
- children: [actions, t18]
133
+ children: [actions, t19]
129
134
  });
130
- $[25] = actions;
131
- $[26] = t18;
135
+ $[26] = actions;
132
136
  $[27] = t19;
133
- } else t19 = $[27];
134
- let t20;
135
- if ($[28] !== t14 || $[29] !== t19) {
136
- t20 = /* @__PURE__ */ jsxs("header", {
137
+ $[28] = t20;
138
+ } else t20 = $[28];
139
+ let t21;
140
+ if ($[29] !== t15 || $[30] !== t20) {
141
+ t21 = /* @__PURE__ */ jsxs("header", {
137
142
  className: "oui-drawer__header",
138
- children: [t14, t19]
143
+ children: [t15, t20]
139
144
  });
140
- $[28] = t14;
141
- $[29] = t19;
145
+ $[29] = t15;
142
146
  $[30] = t20;
143
- } else t20 = $[30];
144
- const t21 = bodyProps?.className;
145
- let t22;
146
- if ($[31] !== t21) {
147
- t22 = cx("oui-drawer__body", t21);
148
147
  $[31] = t21;
149
- $[32] = t22;
150
- } else t22 = $[32];
148
+ } else t21 = $[31];
149
+ const t22 = bodyProps?.className;
151
150
  let t23;
152
- if ($[33] !== bodyProps || $[34] !== children || $[35] !== t22) {
153
- t23 = /* @__PURE__ */ jsx("div", {
151
+ if ($[32] !== t22) {
152
+ t23 = cx("oui-drawer__body", t22);
153
+ $[32] = t22;
154
+ $[33] = t23;
155
+ } else t23 = $[33];
156
+ let t24;
157
+ if ($[34] !== bodyProps || $[35] !== children || $[36] !== t23) {
158
+ t24 = /* @__PURE__ */ jsx("div", {
154
159
  ...bodyProps,
155
- className: t22,
160
+ className: t23,
156
161
  children
157
162
  });
158
- $[33] = bodyProps;
159
- $[34] = children;
160
- $[35] = t22;
163
+ $[34] = bodyProps;
164
+ $[35] = children;
161
165
  $[36] = t23;
162
- } else t23 = $[36];
163
- let t24;
164
- if ($[37] !== footer) {
165
- t24 = footer && /* @__PURE__ */ jsx("footer", {
166
+ $[37] = t24;
167
+ } else t24 = $[37];
168
+ let t25;
169
+ if ($[38] !== footer) {
170
+ t25 = footer && /* @__PURE__ */ jsx("footer", {
166
171
  className: "oui-drawer__footer",
167
172
  children: footer
168
173
  });
169
- $[37] = footer;
170
- $[38] = t24;
171
- } else t24 = $[38];
172
- let t25;
173
- if ($[39] !== ref || $[40] !== side || $[41] !== size || $[42] !== t10 || $[43] !== t20 || $[44] !== t23 || $[45] !== t24) {
174
- t25 = /* @__PURE__ */ jsxs(Dialog.Popup, {
174
+ $[38] = footer;
175
+ $[39] = t25;
176
+ } else t25 = $[39];
177
+ let t26;
178
+ if ($[40] !== ref || $[41] !== side || $[42] !== size || $[43] !== t11 || $[44] !== t21 || $[45] !== t24 || $[46] !== t25) {
179
+ t26 = /* @__PURE__ */ jsxs(Dialog.Popup, {
175
180
  ref,
176
- className: t10,
181
+ className: t11,
177
182
  "data-side": side,
178
183
  "data-size": size,
179
184
  children: [
180
- t20,
181
- t23,
182
- t24
185
+ t21,
186
+ t24,
187
+ t25
183
188
  ]
184
189
  });
185
- $[39] = ref;
186
- $[40] = side;
187
- $[41] = size;
188
- $[42] = t10;
189
- $[43] = t20;
190
- $[44] = t23;
190
+ $[40] = ref;
191
+ $[41] = side;
192
+ $[42] = size;
193
+ $[43] = t11;
194
+ $[44] = t21;
191
195
  $[45] = t24;
192
196
  $[46] = t25;
193
- } else t25 = $[46];
194
- let t26;
195
- if ($[47] !== container || $[48] !== t25 || $[49] !== t9) {
196
- t26 = /* @__PURE__ */ jsxs(Dialog.Portal, {
197
+ $[47] = t26;
198
+ } else t26 = $[47];
199
+ let t27;
200
+ if ($[48] !== container || $[49] !== t10 || $[50] !== t26) {
201
+ t27 = /* @__PURE__ */ jsxs(Dialog.Portal, {
197
202
  container,
198
- children: [t9, t25]
203
+ children: [t10, t26]
199
204
  });
200
- $[47] = container;
201
- $[48] = t25;
202
- $[49] = t9;
205
+ $[48] = container;
206
+ $[49] = t10;
203
207
  $[50] = t26;
204
- } else t26 = $[50];
205
- let t27;
206
- if ($[51] !== modal || $[52] !== open || $[53] !== t26 || $[54] !== t7 || $[55] !== t8) {
207
- t27 = /* @__PURE__ */ jsxs(Dialog.Root, {
208
+ $[51] = t27;
209
+ } else t27 = $[51];
210
+ let t28;
211
+ if ($[52] !== modal || $[53] !== open || $[54] !== t27 || $[55] !== t8 || $[56] !== t9) {
212
+ t28 = /* @__PURE__ */ jsxs(Dialog.Root, {
208
213
  open,
209
214
  modal,
210
- onOpenChange: t7,
211
- children: [t8, t26]
215
+ onOpenChange: t8,
216
+ children: [t9, t27]
212
217
  });
213
- $[51] = modal;
214
- $[52] = open;
215
- $[53] = t26;
216
- $[54] = t7;
218
+ $[52] = modal;
219
+ $[53] = open;
220
+ $[54] = t27;
217
221
  $[55] = t8;
218
- $[56] = t27;
219
- } else t27 = $[56];
220
- return t27;
222
+ $[56] = t9;
223
+ $[57] = t28;
224
+ } else t28 = $[57];
225
+ return t28;
221
226
  }
222
227
  //#endregion
223
228
  export { Drawer };
package/dist/components/drawer/Drawer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.js","names":["React","Dialog","BaseDialog","cx","usePortalContainer","XIcon","IconButton","DrawerSize","DrawerProps","ref","Ref","HTMLDivElement","open","defaultOpen","onOpenChange","trigger","ReactElement","title","ReactNode","eyebrow","description","actions","footer","side","size","dismissible","modal","closeLabel","className","bodyProps","HTMLAttributes","children","Drawer","t0","$","_c","openProp","t1","t2","t3","t4","t5","t6","undefined","inner","setInner","useState","container","t7","next","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","Symbol","for","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","_c","BaseDialog"],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { cx } from '../../utils/cx';\nimport { usePortalContainer } from '../../utils/portal';\nimport { XIcon } from '../../icons';\nimport { IconButton } from '../button/Button';\n\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface DrawerProps {\n /** Ref to the drawer panel. */\n ref?: React.Ref<HTMLDivElement>;\n /** Whether the drawer is open (controlled). */\n open?: boolean;\n /** Initial state when uncontrolled. */\n defaultOpen?: boolean;\n /** Called when the drawer opens or closes. */\n onOpenChange?: (open: boolean) => void;\n /** Element that opens the drawer, e.g. `<Button>Details</Button>`. Omit when `open` is controlled. */\n trigger?: React.ReactElement;\n /** Header title; also the drawer's accessible name. */\n title: React.ReactNode;\n /** Small label above the title, e.g. the record type. */\n eyebrow?: React.ReactNode;\n /** Supporting text under the title. */\n description?: React.ReactNode;\n /** Header content next to the close button (edit, delete, a menu…). */\n actions?: React.ReactNode;\n /** Pinned to the bottom, for form buttons. */\n footer?: React.ReactNode;\n /** Edge the drawer slides in from. */\n side?: 'right' | 'left';\n /** Width: sm 24rem, md 32rem (default), lg 48rem, xl 60rem. Override with `--oui-drawer-width`. */\n size?: DrawerSize;\n /**\n * Set to `false` to block Esc, outside clicks and the close button, e.g.\n * while a form inside is saving.\n */\n dismissible?: boolean;\n /** `false` leaves the page behind interactive and drops the backdrop. */\n modal?: boolean;\n /** Accessible name of the close button. */\n closeLabel?: string;\n /** Class name for the drawer panel. */\n className?: string;\n /** Props for the scrolling content area. */\n bodyProps?: React.HTMLAttributes<HTMLDivElement>;\n /** Drawer body content. */\n children?: React.ReactNode;\n}\n\n/**\n * Side panel for inspecting or editing a record without leaving the page:\n * pinned header, scrolling body, optional pinned footer. For a free-form\n * sheet use `Dialog.Content` with `placement`.\n */\nexport function Drawer({\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n trigger,\n title,\n eyebrow,\n description,\n actions,\n footer,\n side = 'right',\n size = 'md',\n dismissible = true,\n modal = true,\n closeLabel = 'Close',\n className,\n bodyProps,\n children,\n ref,\n}: DrawerProps) {\n const [inner, setInner] = React.useState(defaultOpen);\n const open = openProp ?? inner;\n const container = usePortalContainer();\n\n return (\n <BaseDialog.Root\n open={open}\n modal={modal}\n onOpenChange={(next) => {\n if (!next && !dismissible) return;\n setInner(next);\n onOpenChange?.(next);\n }}\n >\n {trigger && <BaseDialog.Trigger render={trigger} />}\n <BaseDialog.Portal container={container}>\n {modal && <BaseDialog.Backdrop className=\"oui-dialog__backdrop\" />}\n <BaseDialog.Popup ref={ref} className={cx('oui-drawer', className)} data-side={side} data-size={size}>\n <header className=\"oui-drawer__header\">\n <div className=\"oui-drawer__heading\">\n {eyebrow && <div className=\"oui-drawer__eyebrow\">{eyebrow}</div>}\n <BaseDialog.Title className=\"oui-drawer__title\">{title}</BaseDialog.Title>\n {description && (\n <BaseDialog.Description className=\"oui-drawer__description\">{description}</BaseDialog.Description>\n )}\n </div>\n <div className=\"oui-drawer__actions\">\n {actions}\n <BaseDialog.Close render={<IconButton aria-label={closeLabel} disabled={!dismissible} />}>\n <XIcon />\n </BaseDialog.Close>\n </div>\n </header>\n <div {...bodyProps} className={cx('oui-drawer__body', bodyProps?.className)}>\n {children}\n </div>\n {footer && <footer className=\"oui-drawer__footer\">{footer}</footer>}\n </BaseDialog.Popup>\n </BaseDialog.Portal>\n </BaseDialog.Root>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"Drawer.js","names":["React","Dialog","BaseDialog","cx","usePortalContainer","XIcon","IconButton","DialogBackdropBlur","DrawerSize","DrawerProps","ref","Ref","HTMLDivElement","open","defaultOpen","onOpenChange","trigger","ReactElement","title","ReactNode","eyebrow","description","actions","footer","side","size","dismissible","modal","backdropBlur","closeLabel","className","bodyProps","HTMLAttributes","children","Drawer","t0","$","_c","openProp","t1","t2","t3","t4","t5","t6","t7","undefined","inner","setInner","useState","container","t8","next","t9","t10","t11","t12","t13","t14","t15","t16","t17","t18","Symbol","for","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","_c","BaseDialog"],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { cx } from '../../utils/cx';\nimport { usePortalContainer } from '../../utils/portal';\nimport { XIcon } from '../../icons';\nimport { IconButton } from '../button/Button';\nimport type { DialogBackdropBlur } from '../dialog/Dialog';\n\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface DrawerProps {\n /** Ref to the drawer panel. */\n ref?: React.Ref<HTMLDivElement>;\n /** Whether the drawer is open (controlled). */\n open?: boolean;\n /** Initial state when uncontrolled. */\n defaultOpen?: boolean;\n /** Called when the drawer opens or closes. */\n onOpenChange?: (open: boolean) => void;\n /** Element that opens the drawer, e.g. `<Button>Details</Button>`. Omit when `open` is controlled. */\n trigger?: React.ReactElement;\n /** Header title; also the drawer's accessible name. */\n title: React.ReactNode;\n /** Small label above the title, e.g. the record type. */\n eyebrow?: React.ReactNode;\n /** Supporting text under the title. */\n description?: React.ReactNode;\n /** Header content next to the close button (edit, delete, a menu…). */\n actions?: React.ReactNode;\n /** Pinned to the bottom, for form buttons. */\n footer?: React.ReactNode;\n /** Edge the drawer slides in from. */\n side?: 'right' | 'left';\n /** Width: sm 24rem, md 32rem (default), lg 48rem, xl 60rem. Override with `--oui-drawer-width`. */\n size?: DrawerSize;\n /**\n * Set to `false` to block Esc, outside clicks and the close button, e.g.\n * while a form inside is saving.\n */\n dismissible?: boolean;\n /** `false` leaves the page behind interactive and drops the backdrop. */\n modal?: boolean;\n /** How strongly the page behind a modal drawer is blurred. Override the radius with `--oui-backdrop-blur`. */\n backdropBlur?: DialogBackdropBlur;\n /** Accessible name of the close button. */\n closeLabel?: string;\n /** Class name for the drawer panel. */\n className?: string;\n /** Props for the scrolling content area. */\n bodyProps?: React.HTMLAttributes<HTMLDivElement>;\n /** Drawer body content. */\n children?: React.ReactNode;\n}\n\n/**\n * Side panel for inspecting or editing a record without leaving the page:\n * pinned header, scrolling body, optional pinned footer. For a free-form\n * sheet use `Dialog.Content` with `placement`.\n */\nexport function Drawer({\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n trigger,\n title,\n eyebrow,\n description,\n actions,\n footer,\n side = 'right',\n size = 'md',\n dismissible = true,\n modal = true,\n backdropBlur = 'md',\n closeLabel = 'Close',\n className,\n bodyProps,\n children,\n ref,\n}: DrawerProps) {\n const [inner, setInner] = React.useState(defaultOpen);\n const open = openProp ?? inner;\n const container = usePortalContainer();\n\n return (\n <BaseDialog.Root\n open={open}\n modal={modal}\n onOpenChange={(next) => {\n if (!next && !dismissible) return;\n setInner(next);\n onOpenChange?.(next);\n }}\n >\n {trigger && <BaseDialog.Trigger render={trigger} />}\n <BaseDialog.Portal container={container}>\n {modal && <BaseDialog.Backdrop className=\"oui-dialog__backdrop\" data-blur={backdropBlur} />}\n <BaseDialog.Popup ref={ref} className={cx('oui-drawer', className)} data-side={side} data-size={size}>\n <header className=\"oui-drawer__header\">\n <div className=\"oui-drawer__heading\">\n {eyebrow && <div className=\"oui-drawer__eyebrow\">{eyebrow}</div>}\n <BaseDialog.Title className=\"oui-drawer__title\">{title}</BaseDialog.Title>\n {description && (\n <BaseDialog.Description className=\"oui-drawer__description\">{description}</BaseDialog.Description>\n )}\n </div>\n <div className=\"oui-drawer__actions\">\n {actions}\n <BaseDialog.Close render={<IconButton aria-label={closeLabel} disabled={!dismissible} />}>\n <XIcon />\n </BaseDialog.Close>\n </div>\n </header>\n <div {...bodyProps} className={cx('oui-drawer__body', bodyProps?.className)}>\n {children}\n </div>\n {footer && <footer className=\"oui-drawer__footer\">{footer}</footer>}\n </BaseDialog.Popup>\n </BaseDialog.Portal>\n </BaseDialog.Root>\n );\n}\n"],"mappings":"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"}
package/dist/components.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "package": "@optimum-intelligence/opti-ui",
3
- "version": "0.5.0",
3
+ "version": "0.5.2",
4
4
  "description": "Optimum's customizable React component library, built on Base UI.",
5
5
  "categories": [
6
6
  "Theme",
@@ -3091,6 +3091,19 @@
3091
3091
  "required": false,
3092
3092
  "description": "Dialog width.",
3093
3093
  "default": "'sm'"
3094
+ },
3095
+ {
3096
+ "name": "backdropBlur",
3097
+ "type": "DialogBackdropBlur",
3098
+ "required": false,
3099
+ "values": [
3100
+ "none",
3101
+ "sm",
3102
+ "md",
3103
+ "lg"
3104
+ ],
3105
+ "description": "How strongly the page behind the dialog is blurred. Override the radius with `--oui-backdrop-blur`.",
3106
+ "default": "'md'"
3094
3107
  }
3095
3108
  ],
3096
3109
  "extends": [
@@ -3325,6 +3338,19 @@
3325
3338
  "description": "Accessible name of the close button.",
3326
3339
  "default": "'Close'"
3327
3340
  },
3341
+ {
3342
+ "name": "backdropBlur",
3343
+ "type": "DialogBackdropBlur",
3344
+ "required": false,
3345
+ "values": [
3346
+ "none",
3347
+ "sm",
3348
+ "md",
3349
+ "lg"
3350
+ ],
3351
+ "description": "How strongly the page behind the dialog is blurred. Override the radius with `--oui-backdrop-blur`.",
3352
+ "default": "'md'"
3353
+ },
3328
3354
  {
3329
3355
  "name": "backdropProps",
3330
3356
  "type": "BaseDialog.Backdrop.Props",
@@ -3477,6 +3503,19 @@
3477
3503
  "description": "`false` leaves the page behind interactive and drops the backdrop.",
3478
3504
  "default": "true"
3479
3505
  },
3506
+ {
3507
+ "name": "backdropBlur",
3508
+ "type": "DialogBackdropBlur",
3509
+ "required": false,
3510
+ "values": [
3511
+ "none",
3512
+ "sm",
3513
+ "md",
3514
+ "lg"
3515
+ ],
3516
+ "description": "How strongly the page behind a modal drawer is blurred. Override the radius with `--oui-backdrop-blur`.",
3517
+ "default": "'md'"
3518
+ },
3480
3519
  {
3481
3520
  "name": "closeLabel",
3482
3521
  "type": "string",
package/dist/llms-full.txt CHANGED
@@ -1610,6 +1610,7 @@ Base UI `AlertDialog.Trigger` re-exported unchanged. See https://base-ui.com/rea
1610
1610
  | Prop | Type | Default | Description |
1611
1611
  | --- | --- | --- | --- |
1612
1612
  | `size?` | `Exclude<DialogSize, 'full'>` | `'sm'` | Dialog width. |
1613
+ | `backdropBlur?` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'` | How strongly the page behind the dialog is blurred. Override the radius with `--oui-backdrop-blur`. |
1613
1614
 
1614
1615
  Also accepts all props of: `BaseAlertDialog.Popup.Props`.
1615
1616
 
@@ -1705,6 +1706,7 @@ Base UI `Dialog.Trigger` re-exported unchanged. See https://base-ui.com/react/co
1705
1706
  | `placement?` | `'center' \| 'right' \| 'left' \| 'bottom'` | `'center'` | `center` modal, or a sheet docked to an edge. |
1706
1707
  | `showClose?` | `boolean` | `true` | Render the corner close button. |
1707
1708
  | `closeLabel?` | `string` | `'Close'` | Accessible name of the close button. |
1709
+ | `backdropBlur?` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'` | How strongly the page behind the dialog is blurred. Override the radius with `--oui-backdrop-blur`. |
1708
1710
  | `backdropProps?` | `BaseDialog.Backdrop.Props` | | Props for the backdrop behind the dialog. |
1709
1711
 
1710
1712
  Also accepts all props of: `BaseDialog.Popup.Props`.
@@ -1761,6 +1763,7 @@ import { Drawer } from '@optimum-intelligence/opti-ui';
1761
1763
  | `size?` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Width: sm 24rem, md 32rem (default), lg 48rem, xl 60rem. Override with `--oui-drawer-width`. |
1762
1764
  | `dismissible?` | `boolean` | `true` | Set to `false` to block Esc, outside clicks and the close button, e.g. while a form inside is saving. |
1763
1765
  | `modal?` | `boolean` | `true` | `false` leaves the page behind interactive and drops the backdrop. |
1766
+ | `backdropBlur?` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'` | How strongly the page behind a modal drawer is blurred. Override the radius with `--oui-backdrop-blur`. |
1764
1767
  | `closeLabel?` | `string` | `'Close'` | Accessible name of the close button. |
1765
1768
  | `className?` | `string` | | Class name for the drawer panel. |
1766
1769
  | `bodyProps?` | `React.HTMLAttributes<HTMLDivElement>` | | Props for the scrolling content area. |
package/dist/opti-ui.css CHANGED
@@ -42,9 +42,9 @@
42
42
  --oui-space-8: 1rem;
43
43
  --oui-space-10: 1.25rem;
44
44
  --oui-space-12: 1.5rem;
45
- --oui-control-height-sm: 1.75rem;
46
- --oui-control-height-md: 2.25rem;
47
- --oui-control-height-lg: 2.75rem;
45
+ --oui-control-height-sm: 1.875rem;
46
+ --oui-control-height-md: 2.375rem;
47
+ --oui-control-height-lg: 2.875rem;
48
48
  --oui-control-border-width: 2px;
49
49
  --oui-control-disabled-opacity: 0.5;
50
50
  --oui-duration-fast: 0.15s;
@@ -510,7 +510,7 @@
510
510
  align-items: center;
511
511
  gap: 0.7rem;
512
512
  width: 100%;
513
- padding: var(--oui-space-3) 0.7rem;
513
+ padding: var(--oui-space-5) 0.7rem;
514
514
  border: 0;
515
515
  border-radius: var(--oui-radius-control);
516
516
  background: transparent;
@@ -606,7 +606,7 @@
606
606
  border-left: 1px solid var(--_border);
607
607
  }
608
608
  .oui-navbar__group-items .oui-navbar__item {
609
- padding-block: var(--oui-space-2);
609
+ padding-block: var(--oui-space-4);
610
610
  padding-left: calc(1.625rem - 1px - var(--oui-space-3));
611
611
  font-size: var(--oui-font-size-sm);
612
612
  }
@@ -2710,17 +2710,27 @@
2710
2710
  }
2711
2711
  @layer oui.components {
2712
2712
  .oui-dialog__backdrop {
2713
+ --_blur: 8px;
2713
2714
  position: fixed;
2714
2715
  inset: 0;
2715
2716
  z-index: var(--oui-z-dialog);
2716
2717
  min-height: 100dvh;
2717
2718
  background: var(--oui-color-overlay);
2718
- backdrop-filter: blur(4px);
2719
+ backdrop-filter: blur(var(--oui-backdrop-blur, var(--_blur)));
2719
2720
  transition: opacity var(--oui-duration-normal) var(--oui-ease);
2720
2721
  }
2721
2722
  .oui-dialog__backdrop[data-starting-style], .oui-dialog__backdrop[data-ending-style] {
2722
2723
  opacity: 0;
2723
2724
  }
2725
+ .oui-dialog__backdrop[data-blur=none] {
2726
+ --_blur: 0px;
2727
+ }
2728
+ .oui-dialog__backdrop[data-blur=sm] {
2729
+ --_blur: 4px;
2730
+ }
2731
+ .oui-dialog__backdrop[data-blur=lg] {
2732
+ --_blur: 16px;
2733
+ }
2724
2734
  .oui-dialog__backdrop[data-nested] {
2725
2735
  display: none;
2726
2736
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@optimum-intelligence/opti-ui",
3
- "version": "0.5.0",
3
+ "version": "0.5.2",
4
4
  "description": "Optimum's customizable React component library, built on Base UI.",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "author": "Optimum Intelligence",