@velocis/dropdown1 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +23 -12
  2. package/dist/index.d.cts +6 -1
  3. package/dist/index.d.ts +6 -1
  4. package/dist/index.js +23 -12
  5. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -43,6 +43,7 @@ module.exports = __toCommonJS(index_exports);
43
43
 
44
44
  // src/Dropdown1.tsx
45
45
  var import_core3 = require("@velocis/core");
46
+ var import_theme = require("@velocis/theme");
46
47
  var import_react2 = require("react");
47
48
 
48
49
  // src/Dropdown1.defaults.ts
@@ -198,6 +199,8 @@ function Dropdown1Root({
198
199
  defaultOpen = false,
199
200
  onOpenChange,
200
201
  styles: stylesProp,
202
+ surface,
203
+ triggerSurface,
201
204
  triggerClassName,
202
205
  contentClassName,
203
206
  contentWidth = DROPDOWN1_DEFAULTS.contentWidth,
@@ -210,6 +213,7 @@ function Dropdown1Root({
210
213
  contentTestId
211
214
  }) {
212
215
  const direction = (0, import_core3.useDirection)();
216
+ const { resolvedTheme } = (0, import_theme.useTheme)();
213
217
  const { open, setOpen } = useControllableOpen(controlledOpen, defaultOpen, onOpenChange);
214
218
  const styles = resolveDropdown1Styles(stylesProp);
215
219
  const dropdownRef = (0, import_react2.useRef)(null);
@@ -262,6 +266,15 @@ function Dropdown1Root({
262
266
  document.removeEventListener("scroll", handleScroll, true);
263
267
  };
264
268
  }, [closeOnScroll, open, setOpen]);
269
+ const contentSurfaceProps = (0, import_theme.applySurface)(surface, resolvedTheme, {
270
+ className: (0, import_core3.cn)(
271
+ dropdown1ContentVariants(),
272
+ styles.content,
273
+ !fullWidth && contentWidth,
274
+ maxHeight && "overflow-y-auto",
275
+ contentClassName
276
+ )
277
+ });
265
278
  const dropdownContent = open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dropdown1Context.Provider, { value: { closeDropdown, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
266
279
  "div",
267
280
  {
@@ -269,14 +282,9 @@ function Dropdown1Root({
269
282
  role: "menu",
270
283
  "data-testid": contentTestId,
271
284
  dir: direction,
272
- className: (0, import_core3.cn)(
273
- dropdown1ContentVariants(),
274
- styles.content,
275
- !fullWidth && contentWidth,
276
- maxHeight && "overflow-y-auto",
277
- contentClassName
278
- ),
285
+ ...contentSurfaceProps,
279
286
  style: {
287
+ ...contentSurfaceProps.style,
280
288
  ...positionStyle,
281
289
  zIndex: contentZIndex,
282
290
  maxHeight: maxHeight || void 0
@@ -284,6 +292,13 @@ function Dropdown1Root({
284
292
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "py-1", children })
285
293
  }
286
294
  ) }) : null;
295
+ const triggerSurfaceProps = (0, import_theme.applySurface)(triggerSurface, resolvedTheme, {
296
+ className: (0, import_core3.cn)(
297
+ dropdown1TriggerVariants({ fullWidth, disabled }),
298
+ styles.trigger,
299
+ triggerClassName
300
+ )
301
+ });
287
302
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
288
303
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
289
304
  "div",
@@ -302,11 +317,7 @@ function Dropdown1Root({
302
317
  "aria-haspopup": "menu",
303
318
  onClick: () => !disabled && setOpen(!open),
304
319
  "data-testid": testId,
305
- className: (0, import_core3.cn)(
306
- dropdown1TriggerVariants({ fullWidth, disabled }),
307
- styles.trigger,
308
- triggerClassName
309
- ),
320
+ ...triggerSurfaceProps,
310
321
  children: [
311
322
  trigger,
312
323
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronDownIcon, { className: styles.triggerIcon })
package/dist/index.d.cts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
+ import { VelocisSurfaceConfig } from '@velocis/theme';
3
4
  import * as class_variance_authority_types from 'class-variance-authority/types';
4
5
 
5
6
  type Dropdown1Styles = {
@@ -38,6 +39,10 @@ type Dropdown1Props = {
38
39
  onOpenChange?: (open: boolean) => void;
39
40
  /** Override coordinated bg/text/hover classes per layer */
40
41
  styles?: Partial<Dropdown1Styles>;
42
+ /** Menu panel surface — background, tokens, light/dark lock */
43
+ surface?: VelocisSurfaceConfig;
44
+ /** Trigger button surface */
45
+ triggerSurface?: VelocisSurfaceConfig;
41
46
  triggerClassName?: string;
42
47
  contentClassName?: string;
43
48
  contentWidth?: string;
@@ -67,7 +72,7 @@ type Dropdown1SubMenuProps = {
67
72
  className?: string;
68
73
  };
69
74
 
70
- declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
75
+ declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, surface, triggerSurface, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
71
76
 
72
77
  declare function Dropdown1Item({ children, onClick, closeOnSelect, styles: stylesProp, className, testId, }: Dropdown1ItemProps): react.JSX.Element;
73
78
 
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
+ import { VelocisSurfaceConfig } from '@velocis/theme';
3
4
  import * as class_variance_authority_types from 'class-variance-authority/types';
4
5
 
5
6
  type Dropdown1Styles = {
@@ -38,6 +39,10 @@ type Dropdown1Props = {
38
39
  onOpenChange?: (open: boolean) => void;
39
40
  /** Override coordinated bg/text/hover classes per layer */
40
41
  styles?: Partial<Dropdown1Styles>;
42
+ /** Menu panel surface — background, tokens, light/dark lock */
43
+ surface?: VelocisSurfaceConfig;
44
+ /** Trigger button surface */
45
+ triggerSurface?: VelocisSurfaceConfig;
41
46
  triggerClassName?: string;
42
47
  contentClassName?: string;
43
48
  contentWidth?: string;
@@ -67,7 +72,7 @@ type Dropdown1SubMenuProps = {
67
72
  className?: string;
68
73
  };
69
74
 
70
- declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
75
+ declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, surface, triggerSurface, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
71
76
 
72
77
  declare function Dropdown1Item({ children, onClick, closeOnSelect, styles: stylesProp, className, testId, }: Dropdown1ItemProps): react.JSX.Element;
73
78
 
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  // src/Dropdown1.tsx
4
4
  import { cn as cn2, Portal, useDirection } from "@velocis/core";
5
+ import { applySurface, useTheme } from "@velocis/theme";
5
6
  import {
6
7
  useCallback,
7
8
  useEffect,
@@ -162,6 +163,8 @@ function Dropdown1Root({
162
163
  defaultOpen = false,
163
164
  onOpenChange,
164
165
  styles: stylesProp,
166
+ surface,
167
+ triggerSurface,
165
168
  triggerClassName,
166
169
  contentClassName,
167
170
  contentWidth = DROPDOWN1_DEFAULTS.contentWidth,
@@ -174,6 +177,7 @@ function Dropdown1Root({
174
177
  contentTestId
175
178
  }) {
176
179
  const direction = useDirection();
180
+ const { resolvedTheme } = useTheme();
177
181
  const { open, setOpen } = useControllableOpen(controlledOpen, defaultOpen, onOpenChange);
178
182
  const styles = resolveDropdown1Styles(stylesProp);
179
183
  const dropdownRef = useRef(null);
@@ -226,6 +230,15 @@ function Dropdown1Root({
226
230
  document.removeEventListener("scroll", handleScroll, true);
227
231
  };
228
232
  }, [closeOnScroll, open, setOpen]);
233
+ const contentSurfaceProps = applySurface(surface, resolvedTheme, {
234
+ className: cn2(
235
+ dropdown1ContentVariants(),
236
+ styles.content,
237
+ !fullWidth && contentWidth,
238
+ maxHeight && "overflow-y-auto",
239
+ contentClassName
240
+ )
241
+ });
229
242
  const dropdownContent = open ? /* @__PURE__ */ jsx2(Dropdown1Context.Provider, { value: { closeDropdown, styles }, children: /* @__PURE__ */ jsx2(
230
243
  "div",
231
244
  {
@@ -233,14 +246,9 @@ function Dropdown1Root({
233
246
  role: "menu",
234
247
  "data-testid": contentTestId,
235
248
  dir: direction,
236
- className: cn2(
237
- dropdown1ContentVariants(),
238
- styles.content,
239
- !fullWidth && contentWidth,
240
- maxHeight && "overflow-y-auto",
241
- contentClassName
242
- ),
249
+ ...contentSurfaceProps,
243
250
  style: {
251
+ ...contentSurfaceProps.style,
244
252
  ...positionStyle,
245
253
  zIndex: contentZIndex,
246
254
  maxHeight: maxHeight || void 0
@@ -248,6 +256,13 @@ function Dropdown1Root({
248
256
  children: /* @__PURE__ */ jsx2("div", { className: "py-1", children })
249
257
  }
250
258
  ) }) : null;
259
+ const triggerSurfaceProps = applySurface(triggerSurface, resolvedTheme, {
260
+ className: cn2(
261
+ dropdown1TriggerVariants({ fullWidth, disabled }),
262
+ styles.trigger,
263
+ triggerClassName
264
+ )
265
+ });
251
266
  return /* @__PURE__ */ jsxs(Fragment, { children: [
252
267
  /* @__PURE__ */ jsx2(
253
268
  "div",
@@ -266,11 +281,7 @@ function Dropdown1Root({
266
281
  "aria-haspopup": "menu",
267
282
  onClick: () => !disabled && setOpen(!open),
268
283
  "data-testid": testId,
269
- className: cn2(
270
- dropdown1TriggerVariants({ fullWidth, disabled }),
271
- styles.trigger,
272
- triggerClassName
273
- ),
284
+ ...triggerSurfaceProps,
274
285
  children: [
275
286
  trigger,
276
287
  /* @__PURE__ */ jsx2(ChevronDownIcon, { className: styles.triggerIcon })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@velocis/dropdown1",
3
- "version": "0.2.1",
3
+ "version": "0.3.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "type": "module",
@@ -24,7 +24,7 @@
24
24
  "dependencies": {
25
25
  "class-variance-authority": "^0.7.1",
26
26
  "@velocis/core": "0.1.0",
27
- "@velocis/theme": "0.1.1"
27
+ "@velocis/theme": "0.2.0"
28
28
  },
29
29
  "devDependencies": {
30
30
  "@types/react": "^19.0.2",