@yahoo/uds 3.5.0-beta.2 → 3.5.0-beta.4

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 (61) hide show
  1. package/cli/FullWidthClassToProp.mock.tsx +17 -0
  2. package/cli/bin/uds-darwin-arm64-baseline +0 -0
  3. package/cli/bin/uds-linux-arm64 +0 -0
  4. package/cli/bin/uds-linux-x64-baseline +0 -0
  5. package/dist/Input-D6N7TCc9.d.ts +42 -0
  6. package/dist/Input-Tv8gAhPN.d.cts +42 -0
  7. package/dist/Pressable-DSWYYU6N.d.ts +44 -0
  8. package/dist/Pressable-cW57Ibe2.d.cts +44 -0
  9. package/dist/{VStack-CmraVolm.d.ts → VStack-Ca-CbKTr.d.ts} +2 -40
  10. package/dist/{VStack-dT3EJCu4.d.cts → VStack-Ck33D8i-.d.cts} +2 -40
  11. package/dist/chunk-2W4ER46N.js +1 -0
  12. package/dist/chunk-3WLIHKQU.js +3 -0
  13. package/dist/chunk-4AS6QR6M.cjs +3 -0
  14. package/dist/chunk-FGRUT3UC.cjs +2 -0
  15. package/dist/chunk-L72D6DDM.cjs +1 -0
  16. package/dist/chunk-MO2VPSXU.js +1 -0
  17. package/dist/chunk-PNR3372L.js +3 -0
  18. package/dist/chunk-UFBH4CCM.cjs +1 -0
  19. package/dist/client/Menu.cjs +2 -0
  20. package/dist/client/Menu.d.cts +626 -0
  21. package/dist/client/Menu.d.ts +626 -0
  22. package/dist/client/Menu.js +3 -0
  23. package/dist/client/index.cjs +1 -2
  24. package/dist/client/index.d.cts +10 -664
  25. package/dist/client/index.d.ts +10 -664
  26. package/dist/client/index.js +1 -3
  27. package/dist/{index-D1poGuo1.d.cts → index-CDx_NWe2.d.cts} +1 -1
  28. package/dist/{index-BOfq14yW.d.ts → index-xaTWnEHm.d.ts} +1 -1
  29. package/dist/index.cjs +1 -1
  30. package/dist/index.d.cts +6 -5
  31. package/dist/index.d.ts +6 -5
  32. package/dist/index.js +1 -1
  33. package/dist/metafile-cjs.json +1 -1
  34. package/dist/metafile-esm.json +1 -1
  35. package/dist/tailwind/plugin.cjs +1 -1
  36. package/dist/tailwind/plugin.d.cts +1 -1
  37. package/dist/tailwind/plugin.d.ts +1 -1
  38. package/dist/tailwind/plugin.js +2 -2
  39. package/dist/tailwind/utils.cjs +1 -1
  40. package/dist/tailwind/utils.d.cts +1 -1
  41. package/dist/tailwind/utils.d.ts +1 -1
  42. package/dist/tailwind/utils.js +1 -1
  43. package/dist/tokens/automation/configs.cjs +1 -1
  44. package/dist/tokens/automation/configs.d.cts +2 -2
  45. package/dist/tokens/automation/configs.d.ts +2 -2
  46. package/dist/tokens/automation/configs.js +1 -1
  47. package/dist/tokens/automation/properties.cjs +1 -1
  48. package/dist/tokens/automation/properties.d.cts +2 -2
  49. package/dist/tokens/automation/properties.d.ts +2 -2
  50. package/dist/tokens/automation/properties.js +1 -1
  51. package/dist/tokens/index.cjs +1 -1
  52. package/dist/tokens/index.d.cts +4 -4
  53. package/dist/tokens/index.d.ts +4 -4
  54. package/dist/tokens/index.js +1 -1
  55. package/dist/tokens/parseTokens.d.cts +1 -1
  56. package/dist/tokens/parseTokens.d.ts +1 -1
  57. package/dist/{types-B_jakWRK.d.cts → types-BdV70-Tw.d.cts} +1 -1
  58. package/dist/{types-B_jakWRK.d.ts → types-BdV70-Tw.d.ts} +1 -1
  59. package/package.json +11 -1
  60. package/dist/chunk-IQ4HRDIM.cjs +0 -3
  61. package/dist/chunk-KSHOOD3K.js +0 -3
@@ -1,12 +1,11 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { cC as UniversalAvatarProps, cA as UniversalAvatarIconProps, cB as UniversalAvatarImageProps, cD as UniversalAvatarTextProps, cE as UniversalBadgeProps, cF as UniversalButtonProps, cG as UniversalCheckboxProps, cL as UniversalChipProps, cI as UniversalChipButtonProps, cJ as UniversalChipDismissibleProps, cK as UniversalChipLinkProps, cM as UniversalChipToggleProps, cN as UniversalIconButtonProps, ch as SpacingAlias, cR as UniversalPressableProps, cQ as UniversalMenuItemProps, cT as UniversalRadioProps, cS as UniversalRadioGroupProps, M as MotionVariant, n as MotionVariantSpeed, cU as UniversalSwitchProps } from '../types-B_jakWRK.js';
2
+ import { cE as UniversalAvatarProps, cC as UniversalAvatarIconProps, cD as UniversalAvatarImageProps, cF as UniversalAvatarTextProps, cG as UniversalBadgeProps, cH as UniversalButtonProps, cI as UniversalCheckboxProps, cN as UniversalChipProps, cK as UniversalChipButtonProps, cL as UniversalChipDismissibleProps, cM as UniversalChipLinkProps, cO as UniversalChipToggleProps, cP as UniversalIconButtonProps, cT as UniversalRadioProps, cS as UniversalRadioGroupProps, M as MotionVariant, q as MotionVariantSpeed, cU as UniversalSwitchProps } from '../types-BdV70-Tw.js';
3
3
  import * as react from 'react';
4
- import react__default, { AriaRole, HTMLAttributes, PropsWithChildren } from 'react';
4
+ import react__default from 'react';
5
5
  import { HTMLMotionProps, MotionConfigProps } from 'motion/react';
6
- import { d as VStackProps, c as DividerProps, a as BoxProps } from '../VStack-CmraVolm.js';
7
- export { e as Input, I as InputProps } from '../VStack-CmraVolm.js';
8
- import { MenuProps, MenuItemProps as MenuItemProps$1, MenuItemCheckboxProps as MenuItemCheckboxProps$1, MenuProviderProps as MenuProviderProps$1, MenuButtonProps, useMenuContext, useMenuStore } from '@ariakit/react/menu';
9
- import { useStoreState } from '@ariakit/react';
6
+ export { a as Input, I as InputProps } from '../Input-D6N7TCc9.js';
7
+ export { a as Pressable, P as PressableProps } from '../Pressable-DSWYYU6N.js';
8
+ export { Menu, MenuContentProps, MenuDividerProps, MenuItemCheckboxProps, MenuItemProps, MenuPlacement, MenuProviderProps, MenuTriggerProps } from '@yahoo/uds/client/Menu';
10
9
  import '@yahoo/uds-icons/types';
11
10
  import 'type-fest';
12
11
 
@@ -107,8 +106,8 @@ interface BadgeProps extends HtmlDivProps$4, UniversalBadgeProps {
107
106
  **/
108
107
  declare const Badge: react__default.ForwardRefExoticComponent<BadgeProps & react__default.RefAttributes<HTMLDivElement>>;
109
108
 
110
- type HtmlButtonProps$3 = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
111
- interface ButtonProps extends HtmlButtonProps$3, UniversalButtonProps {
109
+ type HtmlButtonProps$1 = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
110
+ interface ButtonProps extends HtmlButtonProps$1, UniversalButtonProps {
112
111
  }
113
112
  /**
114
113
  * **🖲️ A button element that can be used to trigger an action**
@@ -224,8 +223,8 @@ interface ChipToggleProps extends UniversalChipToggleProps, HtmlDivProps {
224
223
  }
225
224
  declare const ChipToggle: react__default.ForwardRefExoticComponent<ChipToggleProps & react__default.RefAttributes<HTMLDivElement>>;
226
225
 
227
- type HtmlButtonProps$2 = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
228
- interface IconButtonProps extends HtmlButtonProps$2, UniversalIconButtonProps {
226
+ type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
227
+ interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
229
228
  }
230
229
  /**
231
230
  * **⚙️️ An icon button element that can be used to trigger an action**
@@ -255,659 +254,6 @@ interface IconButtonProps extends HtmlButtonProps$2, UniversalIconButtonProps {
255
254
  **/
256
255
  declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
257
256
 
258
- interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
259
- gutter?: SpacingAlias;
260
- /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
261
- * If you need to disable this, set this prop to true.
262
- *
263
- * @link https://github.com/yahoo-uds/uds/blob/main/packages/uds/src/hooks/useNestedBorderRadius.ts
264
- **/
265
- disableAutoBorderRadius?: boolean;
266
- /**
267
- * `portalRef` is similar to `ref` but is scoped to the portal node. It's
268
- * useful when you need to be informed when the portal element is appended to
269
- * the DOM or removed from the DOM.
270
- *
271
- * Live examples:
272
- * - [Form with Select](https://ariakit.org/examples/form-select)
273
- * @example
274
- * ```jsx
275
- * const [portalElement, setPortalElement] = useState(null);
276
- *
277
- * <Portal portalRef={setPortalElement} />
278
- * ```
279
- */
280
- portalRef?: MenuProps['portalRef'];
281
- /**
282
- * Determines whether the element should be rendered as a React Portal.
283
- *
284
- * Live examples:
285
- * - [Combobox with integrated
286
- * filter](https://ariakit.org/examples/combobox-filtering-integrated)
287
- * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
288
- * - [Hovercard with keyboard
289
- * support](https://ariakit.org/examples/hovercard-disclosure)
290
- * - [Menubar](https://ariakit.org/components/menubar)
291
- * - [Standalone Popover](https://ariakit.org/examples/popover-standalone)
292
- * - [Animated Select](https://ariakit.org/examples/select-animated)
293
- * @default true
294
- */
295
- portal?: boolean;
296
- /**
297
- * An HTML element or a memoized callback function that returns an HTML
298
- * element to be used as the portal element. By default, the portal element
299
- * will be a `div` element appended to the `document.body`.
300
- *
301
- * Live examples:
302
- * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
303
- * @example
304
- * ```jsx
305
- * const [portal, setPortal] = useState(null);
306
- *
307
- * <Portal portalElement={portal} />
308
- * <div ref={setPortal} />
309
- * ```
310
- * @example
311
- * ```jsx
312
- * const getPortalElement = useCallback(() => {
313
- * const div = document.createElement("div");
314
- * const portalRoot = document.getElementById("portal-root");
315
- * portalRoot.appendChild(div);
316
- * return div;
317
- * }, []);
318
- *
319
- * <Portal portalElement={getPortalElement} />
320
- * ```
321
- */
322
- portalElement?: MenuProps['portalElement'];
323
- /**
324
- * Determines whether the popover should hide when the mouse leaves the
325
- * popover or the anchor element and there's no _hover intent_, meaning, the
326
- * mouse isn't moving toward the popover.
327
- *
328
- * This can be either a boolean or a callback receiving the mouse move event
329
- * that initiated the behavior. The callback should return a boolean.
330
- *
331
- * **Note**: This behavior won't be triggered when the popover or any of its
332
- * descendants are in focus.
333
- * @default true
334
- */
335
- hideOnHoverOutside?: MenuProps['hideOnHoverOutside'];
336
- /**
337
- * Determines if the dialog will hide when the user presses the Escape key.
338
- *
339
- * This prop can be either a boolean or a function that accepts an event as an
340
- * argument and returns a boolean. The event object represents the keydown
341
- * event that initiated the hide action, which could be either a native
342
- * keyboard event or a React synthetic event.
343
- *
344
- * **Note**: When placing Ariakit dialogs inside third-party dialogs, using
345
- * `event.stopPropagation()` within this function will stop the event from
346
- * reaching the third-party dialog, closing only the Ariakit dialog.
347
- * @default true
348
- */
349
- hideOnEscape?: MenuProps['hideOnEscape'];
350
- /**
351
- * Determines if the dialog should hide when the user clicks or focuses on an
352
- * element outside the dialog.
353
- *
354
- * This prop can be either a boolean or a function that takes an event as an
355
- * argument and returns a boolean. The event object represents the event that
356
- * triggered the action, which could be a native event or a React synthetic
357
- * event of various types.
358
- *
359
- * Live examples:
360
- * - [Selection Popover](https://ariakit.org/examples/popover-selection)
361
- * @default true
362
- */
363
- hideOnInteractOutside?: MenuProps['hideOnInteractOutside'];
364
- /**
365
- * Determines if the pointer events outside of the popover and its anchor
366
- * element should be disabled during _hover intent_, that is, when the mouse
367
- * is moving toward the popover.
368
- *
369
- * This is required as these external events may trigger focus on other
370
- * elements and close the popover while the user is attempting to hover over
371
- * it.
372
- *
373
- * This can be either a boolean or a callback receiving the mouse event
374
- * happening during hover intent. The callback should return a boolean.
375
- * @default true
376
- */
377
- disablePointerEventsOnApproach?: MenuProps['disablePointerEventsOnApproach'];
378
- /**
379
- * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
380
- * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
381
- * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
382
- */
383
- store?: MenuProps['store'];
384
- /**
385
- * Whether the popover should have the same width as the anchor element. This
386
- * will be exposed to CSS as
387
- * [`--popover-anchor-width`](https://ariakit.org/guide/styling#--popover-anchor-width).
388
- * @default false
389
- */
390
- sameWidth?: MenuProps['sameWidth'];
391
- /**
392
- * @see https://ariakit.org/reference/focusable
393
- * @default true
394
- */
395
- focusable?: MenuProps['focusable'];
396
- /**
397
- * This is an event handler prop triggered when the dialog's `close` event is
398
- * dispatched. The `close` event is similar to the native dialog
399
- * [`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event)
400
- * event. The only difference is that this event can be canceled with
401
- * `event.preventDefault()`, which will prevent the dialog from hiding.
402
- *
403
- * It's important to note that this event only fires when the dialog store's
404
- * [`open`](https://ariakit.org/reference/use-dialog-store#open) state is set
405
- * to `false`. If the controlled
406
- * [`open`](https://ariakit.org/reference/dialog#open) prop value changes, or
407
- * if the dialog's visibility is altered in any other way (such as unmounting
408
- * the dialog without adjusting the open state), this event won't be
409
- * triggered.
410
- *
411
- * Live examples:
412
- * - [Dialog with scrollable
413
- * backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
414
- * - [Dialog with details &
415
- * summary](https://ariakit.org/examples/dialog-details)
416
- * - [Warning on Dialog
417
- * hide](https://ariakit.org/examples/dialog-hide-warning)
418
- * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
419
- */
420
- onClose?: MenuProps['onClose'];
421
- }
422
- /**
423
- * **📦 A Menu Content component**
424
- *
425
- * @componentType Client component
426
- *
427
- * @description
428
- * A content component for the menu, which is used to provide the menu context to the menu items.
429
- *
430
- * @see The {@link https://uds.build/docs/components/menu-content Menu.Content Docs} for more info
431
- *
432
- * @example
433
- * ```tsx
434
- * 'use client'; // Next.js client component
435
- *
436
- * import { Menu, Button } from "@yahoo/uds";
437
- * import { Calendar, Clipboard } from "@yahoo/uds-icons";
438
- *
439
- * export function MenuProviderExample() {
440
- * return (
441
- * <Menu.Provider>
442
- * <Menu.Trigger asChild>
443
- * <Button>Menu Options</Button>
444
- * </Menu.Trigger>
445
- * <Menu.Content>
446
- * <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
447
- * <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
448
- * Clipboard
449
- * </Menu.Item>
450
- * <Menu.Item active>Active Item</Menu.Item>
451
- * </Menu.Content>
452
- * </Menu.Provider>
453
- * )
454
- * }
455
- * ```
456
- *
457
- * @usage
458
- * Using Menu.Content is required to use Menu.Item and Menu.ItemCheckbox. It acts as the actual menu container.
459
- *
460
- * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
461
- **/
462
- declare const MenuContent: react.ForwardRefExoticComponent<MenuContentProps & react.RefAttributes<HTMLDivElement>>;
463
-
464
- interface MenuDividerProps extends Omit<DividerProps, 'variant'> {
465
- /**
466
- * The role of the divider.
467
- * @default 'separator'
468
- */
469
- role?: AriaRole;
470
- }
471
- /**
472
- * **〰️ A Menu Divider component**
473
- *
474
- * @componentType Client component
475
- *
476
- * @description
477
- * A divider component for the menu.
478
- *
479
- * @see The {@link https://uds.build/docs/components/menu-divider Menu.Divider Docs} for more info
480
- *
481
- * @example
482
- * ```tsx
483
- * 'use client'; // Next.js client component
484
- *
485
- * import { Menu, Button } from "@yahoo/uds";
486
- *
487
- * export function DividerExample() {
488
- * return (
489
- * <Menu>
490
- * <Menu.Trigger asChild>
491
- * <Button>Menu Options</Button>
492
- * </Menu.Trigger>
493
- * <Menu.Content>
494
- * <Menu.Item>Calendar</Menu.Item>
495
- * <Menu.Divider>Other actions</Menu.Divider>
496
- * <Menu.Item>Clipboard</Menu.Item>
497
- * <Menu.Item active>Active Item</Menu.Item>
498
- * </Menu.Content>
499
- * </Menu>
500
- * )
501
- * }
502
- * ```
503
- *
504
- * @usage
505
- * Use MenuDivider to separate groups of menu items.
506
- *
507
- * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item), [Divider](https://uds.build/docs/components/divider)
508
- **/
509
- declare const MenuDivider: react.ForwardRefExoticComponent<MenuDividerProps & react.RefAttributes<HTMLDivElement>>;
510
-
511
- type HtmlButtonProps$1 = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
512
- interface PressableProps extends UniversalPressableProps, HtmlButtonProps$1 {
513
- }
514
- /**
515
- * **🖲️ A primitive component for creating button interactions with accessibility support**
516
- *
517
- * @componentType Client component
518
- *
519
- * @description
520
- * The Pressable component is a primitive component that can be used
521
- * to create button interactions with accessibility support. It can be used
522
- * to trigger an action, such as submitting a form, navigating to a new page,
523
- * or adding interactivity to a section or card.
524
- *
525
- * @example
526
- * ```tsx
527
- * import { Pressable } from '@yahoo/uds';
528
- *
529
- * <Pressable
530
- * backgroundColor="secondary"
531
- * borderWidth="thin"
532
- * borderColor="primary"
533
- * borderRadius="lg"
534
- * onPress={() => console.log('Pressed!')}
535
- * >
536
- * <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
537
- * </Pressable>
538
- * ```
539
- *
540
- * @usage
541
- * - If you need to add interactivity to a section or card.
542
- * - If you need a highly customized version of [Button](./button)
543
- *
544
- * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
545
- *
546
- * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
547
- *
548
- */
549
- declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
550
-
551
- interface MenuItemProps extends PressableProps, Omit<UniversalMenuItemProps, 'name'> {
552
- /**
553
- * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
554
- * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
555
- * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
556
- */
557
- store?: MenuItemProps$1['store'];
558
- /**
559
- * Determines if the menu should hide when this item is clicked.
560
- *
561
- * **Note**: This behavior isn't triggered if this menu item is rendered as a
562
- * link and modifier keys are used to either open the link in a new tab or
563
- * download it.
564
- *
565
- * @default true
566
- */
567
- hideOnClick?: MenuItemProps$1['hideOnClick'];
568
- /**
569
- * The role of the menu item.
570
- *
571
- * @default 'menuitem'
572
- */
573
- role?: AriaRole;
574
- /** Internal overrides for downstream components. */
575
- layerClassNames?: {
576
- root?: string;
577
- startIcon?: string;
578
- endIcon?: string;
579
- };
580
- }
581
- /**
582
- * **📋 A Menu Item component for navigation and actions**
583
- *
584
- * @componentType Client component
585
- *
586
- * @description
587
- * A standard menu item that can be used for navigation, actions, or displaying options in a menu.
588
- * Menu items can be styled with active states, icons, and can trigger callbacks when clicked.
589
- * They support both visual and functional customization.
590
- *
591
- * @see The {@link https://uds.build/docs/components/menu-item Menu.Item Docs} for more info
592
- *
593
- * @example
594
- * ```tsx
595
- * 'use client'; // Next.js client component
596
- *
597
- * import { Menu, Button } from "@yahoo/uds";
598
- * import { Calendar, Clipboard } from "@yahoo/uds-icons";
599
- *
600
- * export function MenuItemExample() {
601
- * return (
602
- * <Menu.Provider>
603
- * <Menu.Trigger asChild>
604
- * <Button>Menu Options</Button>
605
- * </Menu.Trigger>
606
- * <Menu.Content>
607
- * <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
608
- * <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
609
- * Clipboard
610
- * </Menu.Item>
611
- * <Menu.Item active>Active Item</Menu.Item>
612
- * </Menu.Content>
613
- * </Menu>
614
- * )
615
- * }
616
- * ```
617
- *
618
- * @usage
619
- * Use MenuItem for standard menu options that trigger actions or navigate to other parts of the application.
620
- * The active prop can be used to highlight the currently selected item.
621
- *
622
- * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
623
- **/
624
- declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLButtonElement>>;
625
-
626
- type HtmlButtonProps = HTMLAttributes<HTMLButtonElement>;
627
- interface MenuItemCheckboxProps extends PressableProps, HtmlButtonProps, UniversalMenuItemProps {
628
- /**
629
- * The name of the field in the
630
- * [`values`](https://ariakit.org/reference/menu-provider#values) state.
631
- *
632
- * Live examples at [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
633
- */
634
- name: string;
635
- /**
636
- * The controlled checked state of the element. It will set the menu
637
- * [`values`](https://ariakit.org/reference/menu-provider#values) state if
638
- * provided.
639
- */
640
- checked?: boolean;
641
- /**
642
- * The default checked state of the element. It will set the default value in
643
- * the menu [`values`](https://ariakit.org/reference/menu-provider#values)
644
- * state if provided.
645
- */
646
- defaultChecked?: boolean;
647
- /**
648
- * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
649
- * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
650
- * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
651
- */
652
- store?: MenuItemCheckboxProps$1['store'];
653
- /**
654
- * Determines if the menu should hide when this item is clicked.
655
- *
656
- * **Note**: This behavior isn't triggered if this menu item is rendered as a
657
- * link and modifier keys are used to either open the link in a new tab or
658
- * download it.
659
- *
660
- * @default undefined
661
- */
662
- hideOnClick?: MenuItemCheckboxProps$1['hideOnClick'];
663
- }
664
- /**
665
- * **✅ A Menu Item Checkbox component**
666
- *
667
- * @componentType Client component
668
- *
669
- * @description
670
- * A checkable menu item that toggles between selected and unselected states. Menu item checkboxes
671
- * allow users to select multiple options from a menu, displaying a checkmark when active. They maintain
672
- * their state even when the menu is closed and reopened.
673
- *
674
- * @see The {@link https://uds.build/docs/components/menu-item-checkbox Menu.ItemCheckbox Docs} for more info
675
- *
676
- * @example
677
- * ```tsx
678
- * 'use client'; // Next.js client component
679
- *
680
- * import { Menu, Button } from "@yahoo/uds";
681
- *
682
- * export function MenuItemCheckboxExample() {
683
- * return (
684
- * <Menu.Provider>
685
- * <Menu.Trigger asChild>
686
- * <Button>Filter Options</Button>
687
- * </Menu.Trigger>
688
- * <Menu.Content>
689
- * <Menu.ItemCheckbox name="showArchived" defaultChecked={false}>
690
- * Show Archived
691
- * </Menu.ItemCheckbox>
692
- * <Menu.ItemCheckbox name="includeComments" defaultChecked={true}>
693
- * Include Comments
694
- * </Menu.ItemCheckbox>
695
- * </Menu.Content>
696
- * </Menu.Provider>
697
- * )
698
- * }
699
- * ```
700
- *
701
- * @usage
702
- * Use MenuItemCheckbox when you need to provide users with multiple selectable options within a menu.
703
- * Unlike radio options, checkboxes allow for multiple simultaneous selections.
704
- *
705
- * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
706
- **/
707
- declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "as" | "hideEndIcon" | "rootProps"> & react.RefAttributes<HTMLButtonElement>>;
708
-
709
- /** Valid vertical placement values for the menu */
710
- type VerticalPlacement = 'top' | 'bottom';
711
- /** Valid horizontal placement values for the menu */
712
- type HorizontalPlacement = 'start' | 'end';
713
- /** Combined placement values for menu positioning */
714
- type MenuPlacement = VerticalPlacement | HorizontalPlacement | `${VerticalPlacement}-${HorizontalPlacement}` | `${HorizontalPlacement}-${VerticalPlacement}`;
715
- type MenuProviderProps = PropsWithChildren<{
716
- /**
717
- * A callback that gets called when the
718
- * [`values`](https://ariakit.org/reference/menu-provider#values) state
719
- * changes.
720
- *
721
- * Live examples:
722
- * - [`MenuItemCheckbox`](https://uds.build/docs/components/menu-item-checkbox).
723
- */
724
- setValues?: (values: Record<string, boolean>) => void | MenuProviderProps$1['setValues'];
725
- /**
726
- * A map of names and values that will be used by the
727
- * [`MenuItemCheckbox`](https://uds.build/docs/components/menu-item-checkbox).
728
- *
729
- * Live examples:
730
- * - [MenuItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
731
- */
732
- values?: MenuProviderProps$1['values'];
733
- /**
734
- * The placement of the Menu.Content.
735
- *
736
- * @default 'bottom'
737
- */
738
- placement?: MenuPlacement;
739
- /**
740
- * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
741
- * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
742
- * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
743
- */
744
- store?: MenuProviderProps$1['store'];
745
- /**
746
- * Whether the menu should be rendered in RTL direction.
747
- *
748
- * This only affects the some component behavior behavior. You still need to set
749
- * `dir="rtl"` on HTML/CSS.
750
- * @default false
751
- */
752
- rtl?: MenuProviderProps$1['rtl'];
753
- /**
754
- * Whether the content is visible.
755
- * @default false
756
- */
757
- open?: MenuProviderProps$1['open'];
758
- /**
759
- * A callback that gets called when the
760
- * [`open`](https://ariakit.org/reference/disclosure-provider#open) state
761
- * changes.
762
- * @example
763
- * const [open, setOpen] = useState(false);
764
- * const disclosure = useDisclosureStore({ open, setOpen });
765
- */
766
- setOpen?: MenuProviderProps$1['setOpen'];
767
- /**
768
- * Whether the content should be visible by default.
769
- * @default false
770
- */
771
- defaultOpen?: MenuProviderProps$1['defaultOpen'];
772
- /**
773
- * Determines how the focus behaves when the user reaches the end of the
774
- * composite widget.
775
- *
776
- * Live examples:
777
- * - [Command Menu](https://uds.build/docs/components/menu)
778
- * @default false
779
- */
780
- focusLoop?: MenuProviderProps$1['focusLoop'];
781
- /**
782
- * If enabled, moving to the next item from the last one in a row or column
783
- * will focus on the first item in the next row or column and vice-versa.
784
- * `true` wraps between rows and columns, `horizontal` wraps only between rows, and `vertical` wraps only between columns.
785
- *
786
- * @default false
787
- */
788
- focusWrap?: MenuProviderProps$1['focusWrap'];
789
- }>;
790
- /**
791
- * **🏗️ A Menu Provider component**
792
- *
793
- * @componentType Server component
794
- *
795
- * @description
796
- * A provider component for the menu, which is used to provide the menu context to the menu items.
797
- *
798
- * @see The {@link https://uds.build/docs/components/menu-provider Menu.Provider Docs} for more info
799
- *
800
- * @example
801
- * ```tsx
802
- * 'use client'; // Next.js client component
803
- *
804
- * import { Menu, Button } from "@yahoo/uds";
805
- * import { Calendar, Clipboard } from "@yahoo/uds-icons";
806
- *
807
- * export function MenuProviderExample() {
808
- * return (
809
- * <Menu.Provider>
810
- * <Menu.Trigger asChild>
811
- * <Button>Menu Options</Button>
812
- * </Menu.Trigger>
813
- * <Menu.Content>
814
- * <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
815
- * <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
816
- * Clipboard
817
- * </Menu.Item>
818
- * <Menu.Item active>Active Item</Menu.Item>
819
- * </Menu.Content>
820
- * </Menu.Provider>
821
- * )
822
- * }
823
- * ```
824
- *
825
- * @usage
826
- * Use MenuItem for standard menu options that trigger actions or navigate to other parts of the application.
827
- * The active prop can be used to highlight the currently selected item.
828
- *
829
- * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
830
- **/
831
- declare const MenuProvider: ({ placement, rtl: explicitRtl, ...props }: MenuProviderProps) => react_jsx_runtime.JSX.Element;
832
-
833
- interface MenuTriggerProps extends PressableProps {
834
- /**
835
- * When asChild is set to true, the component's child will be cloned and passed
836
- * the props and behavior required to make it functional.
837
- */
838
- asChild?: BoxProps['asChild'];
839
- /**
840
- * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
841
- * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
842
- * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
843
- */
844
- store?: MenuButtonProps['store'];
845
- /**
846
- * Determines if [Focusable](https://ariakit.org/components/focusable)
847
- * features should be active on non-native focusable elements.
848
- *
849
- * **Note**: This prop only turns off the additional features provided by the
850
- * [`Focusable`](https://ariakit.org/reference/focusable) component.
851
- * Non-native focusable elements will lose their focusability entirely.
852
- * However, native focusable elements will retain their inherent focusability,
853
- * but without added features such as improved
854
- * [`autoFocus`](https://ariakit.org/reference/focusable#autofocus),
855
- * [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),
856
- * [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),
857
- * etc.
858
- * @default true
859
- */
860
- focusable?: MenuButtonProps['focusable'];
861
- }
862
- /**
863
- * **⚡ A Menu Trigger component**
864
- *
865
- * @componentType Server component
866
- *
867
- * @description
868
- * A trigger component for the menu, which is used to toggle the menus open state.
869
- *
870
- * @see The {@link https://uds.build/docs/components/menu-trigger Menu.Trigger Docs} for more info
871
- *
872
- * @example
873
- * ```tsx
874
- * 'use client'; // Next.js client component
875
- *
876
- * import { Menu, Button } from "@yahoo/uds";
877
- * import { Calendar, Clipboard } from "@yahoo/uds-icons";
878
- *
879
- * export function MenuProviderExample() {
880
- * return (
881
- * <Menu.Provider>
882
- * <Menu.Trigger asChild>
883
- * <Button>Menu Options</Button>
884
- * </Menu.Trigger>
885
- * <Menu.Content>
886
- * <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
887
- * <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
888
- * Clipboard
889
- * </Menu.Item>
890
- * <Menu.Item active>Active Item</Menu.Item>
891
- * </Menu.Content>
892
- * </Menu.Provider>
893
- * )
894
- * }
895
- * ```
896
- *
897
- * @usage
898
- * Use MenuTrigger to toggle the open state of a menu.
899
- *
900
- * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
901
- **/
902
- declare const MenuTrigger: react.ForwardRefExoticComponent<MenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
903
-
904
- declare const Menu_index_useMenuContext: typeof useMenuContext;
905
- declare const Menu_index_useMenuStore: typeof useMenuStore;
906
- declare const Menu_index_useStoreState: typeof useStoreState;
907
- declare namespace Menu_index {
908
- export { MenuContent as Content, MenuDivider as Divider, MenuItem as Item, MenuItemCheckbox as ItemCheckbox, MenuProvider as Provider, MenuTrigger as Trigger, Menu_index_useMenuContext as useMenuContext, Menu_index_useMenuStore as useMenuStore, Menu_index_useStoreState as useStoreState };
909
- }
910
-
911
257
  type NativeInputProps$1 = Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
912
258
  interface RadioProps extends NativeInputProps$1, UniversalRadioProps {
913
259
  layerClassNames?: {
@@ -1042,4 +388,4 @@ interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
1042
388
  **/
1043
389
  declare const Switch: react__default.ForwardRefExoticComponent<SwitchProps & react__default.RefAttributes<HTMLInputElement>>;
1044
390
 
1045
- export { Avatar, AvatarIcon, type AvatarIconProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarText, type AvatarTextProps, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipButton, type ChipButtonProps, ChipDismissible, type ChipDismissibleProps, ChipLink, type ChipLinkProps, type ChipProps, ChipToggle, type ChipToggleProps, IconButton, type IconButtonProps, Menu_index as Menu, type MenuContentProps, type MenuDividerProps, type MenuItemCheckboxProps, type MenuItemProps, type MenuPlacement, type MenuProviderProps, type MenuTriggerProps, Pressable, type PressableProps, Radio, RadioGroupProvider, type RadioGroupProviderProps, type RadioProps, SpringMotionConfig, type SpringMotionConfigProps, Switch, type SwitchProps };
391
+ export { Avatar, AvatarIcon, type AvatarIconProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarText, type AvatarTextProps, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipButton, type ChipButtonProps, ChipDismissible, type ChipDismissibleProps, ChipLink, type ChipLinkProps, type ChipProps, ChipToggle, type ChipToggleProps, IconButton, type IconButtonProps, Radio, RadioGroupProvider, type RadioGroupProviderProps, type RadioProps, SpringMotionConfig, type SpringMotionConfigProps, Switch, type SwitchProps };