@xingxingmofashu/ui 0.1.8 → 0.1.10

package/dist/components/input.mjs

@@ -2,45 +2,26 @@
 import { Input as UIInput } from "@base-ui/react/input";
 import { cn } from "cn";
 import * as React from "react";
-import { mergeIds } from "../internal/aria.mjs";
+import { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/input.mjs";
 function Input({
   className,
   ui,
-  label,
-  description,
   leadingIcon,
   trailingIcon,
   size,
-  id,
   disabled,
-  "aria-describedby": ariaDescribedBy,
   ...props
 }) {
   const styles = theme({ size });
-  const generatedId = React.useId();
-  const descriptionId = React.useId();
-  const inputId = id ?? generatedId;
-  const describedBy = mergeIds(
-    ariaDescribedBy,
-    description ? descriptionId : void 0
-  );
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       "data-slot": "root",
-      "data-disabled": disabled || void 0,
+      "data-disabled": fieldsetDisabled || void 0,
       className: cn(styles.root(), ui?.root, className)
     },
-    label ? /* @__PURE__ */ React.createElement(
-      "label",
-      {
-        htmlFor: inputId,
-        "data-slot": "label",
-        className: cn(styles.label(), ui?.label)
-      },
-      label
-    ) : null,
     /* @__PURE__ */ React.createElement(
       "span",
       {
@@ -76,9 +57,7 @@ function Input({
         UIInput,
         {
           ...props,
-          id: inputId,
-          disabled,
-          "aria-describedby": describedBy,
+          disabled: fieldsetDisabled,
           "data-slot": "input",
           className: cn(styles.input(), ui?.input)
         }
@@ -92,16 +71,7 @@ function Input({
         },
         trailingIcon
       ) : null
-    ),
-    description ? /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        id: descriptionId,
-        "data-slot": "description",
-        className: cn(styles.description(), ui?.description)
-      },
-      description
-    ) : null
+    )
   );
 }
 export { Input };

package/dist/components/menu.d.ts

@@ -3,10 +3,6 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/menu";
 type Menu = ComponentConfig<typeof theme>;
-type PositionerProps = UIMenu.Positioner.Props;
-type MenuItemUi = Partial<Pick<Menu["slots"], "item" | "itemIcon" | "itemLabel" | "shortcut">>;
-type MenuGroupUi = Partial<Pick<Menu["slots"], "group" | "groupLabel" | "item" | "itemIcon" | "itemLabel" | "shortcut">>;
-type MenuSeparatorUi = Partial<Pick<Menu["slots"], "separator">>;
 /** One action item in the menu. */
 type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "children" | "className" | "style" | "label" | "onClick"> & {
     type?: "item";
@@ -25,10 +21,10 @@ type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "chi
     /** Tailwind classes merged into the item. */
     className?: string;
     /** Tailwind classes for this item's internal slots. */
-    ui?: MenuItemUi;
+    ui?: Partial<Pick<Menu["slots"], "item" | "itemIcon" | "itemLabel" | "shortcut">>;
 };
 /** A labelled group of menu items. */
-type MenuGroupProps<Value extends string = string> = {
+type MenuGroupProps<Value extends string = string> = Omit<UIMenu.Group.Props, "children" | "className" | "style"> & {
     type: "group";
     /** Group heading. */
     label: React.ReactNode;
@@ -37,32 +33,21 @@ type MenuGroupProps<Value extends string = string> = {
     /** Tailwind classes merged into the group. */
     className?: string;
     /** Tailwind classes for the group slots. */
-    ui?: MenuGroupUi;
+    ui?: Partial<Pick<Menu["slots"], "group" | "groupLabel" | "item" | "itemIcon" | "itemLabel" | "shortcut">>;
 };
 /** A separator between menu items. */
-type MenuSeparatorProps = {
+type MenuSeparatorProps = Omit<UIMenu.Separator.Props, "children" | "className" | "orientation" | "style"> & {
     type: "separator";
     /** Tailwind classes merged into the separator. */
     className?: string;
     /** Tailwind classes for the separator slot. */
-    ui?: MenuSeparatorUi;
+    ui?: Partial<Pick<Menu["slots"], "separator">>;
 };
-type MenuEntry<Value extends string = string> = MenuItemProps<Value> | MenuGroupProps<Value> | MenuSeparatorProps;
-type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "children" | "className" | "style"> & {
+type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "children" | "className" | "style"> & Pick<UIMenu.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding"> & {
     /** Element that opens the menu. It must forward props and refs. */
     trigger: React.ReactElement;
     /** Items, groups, and separators rendered by the menu. */
-    items: readonly MenuEntry<Value>[];
-    /** Side of the trigger the menu is placed on. */
-    side?: PositionerProps["side"];
-    /** Alignment of the menu relative to the trigger. */
-    align?: PositionerProps["align"];
-    /** Distance between the trigger and the menu in pixels. */
-    sideOffset?: PositionerProps["sideOffset"];
-    /** Offset along the alignment axis in pixels. */
-    alignOffset?: PositionerProps["alignOffset"];
-    /** Padding between the menu and the edge of the collision boundary. */
-    collisionPadding?: PositionerProps["collisionPadding"];
+    items: readonly (MenuItemProps<Value> | MenuGroupProps<Value> | MenuSeparatorProps)[];
     /** Tailwind classes merged into the popup. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
@@ -70,4 +55,4 @@ type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "childre
 };
 declare function Menu<Value extends string = string>({ trigger, items, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: MenuProps<Value>): React.JSX.Element;
 export { Menu };
-export type { MenuEntry, MenuGroupProps, MenuItemProps, MenuProps, MenuSeparatorProps, };
+export type { MenuGroupProps, MenuItemProps, MenuProps, MenuSeparatorProps, };

package/dist/components/menu.mjs

@@ -152,12 +152,15 @@ function MenuGroup({
   className,
   ui,
   label,
-  items
+  items,
+  type: _type,
+  ...props
 }) {
   const styles = theme();
   return /* @__PURE__ */ React.createElement(
     UIMenu.Group,
     {
+      ...props,
       "data-slot": "group",
       className: cn(styles.group(), ui?.group, className)
     },
@@ -184,11 +187,17 @@ function MenuGroup({
     ))
   );
 }
-function MenuSeparator({ className, ui }) {
+function MenuSeparator({
+  className,
+  ui,
+  type: _type,
+  ...props
+}) {
   const styles = theme();
   return /* @__PURE__ */ React.createElement(
     UIMenu.Separator,
     {
+      ...props,
       "data-slot": "separator",
       className: cn(styles.separator(), ui?.separator, className)
     }

package/dist/components/popover.d.ts

@@ -3,8 +3,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/popover";
 type Popover = ComponentConfig<typeof theme>;
-type PositionerProps = UIPopover.Positioner.Props;
-type PopoverProps = Omit<UIPopover.Root.Props, "children"> & {
+type PopoverProps = Omit<UIPopover.Root.Props, "children"> & Pick<UIPopover.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding"> & {
     /** Element that opens the popover. It must forward props and refs. */
     trigger: React.ReactElement;
     /** Popover heading. */
@@ -17,16 +16,6 @@ type PopoverProps = Omit<UIPopover.Root.Props, "children"> & {
     footer?: React.ReactNode;
     /** Whether to render the directional arrow. */
     arrow?: boolean;
-    /** Side of the trigger the popover is placed on. */
-    side?: PositionerProps["side"];
-    /** Alignment of the popover relative to the trigger. */
-    align?: PositionerProps["align"];
-    /** Distance between the trigger and the popup in pixels. */
-    sideOffset?: PositionerProps["sideOffset"];
-    /** Offset along the alignment axis in pixels. */
-    alignOffset?: PositionerProps["alignOffset"];
-    /** Padding between the popup and the edge of the collision boundary. */
-    collisionPadding?: PositionerProps["collisionPadding"];
     /** Tailwind classes merged into the popup. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */

package/dist/components/radio-group.d.ts

@@ -30,6 +30,6 @@ type RadioGroupProps<Value extends string = string> = Omit<UIRadioGroup.Props<Va
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: RadioGroup["slots"];
 };
-declare function RadioGroup<Value extends string = string>({ className, ui, size, items, label, description, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: RadioGroupProps<Value>): React.JSX.Element;
+declare function RadioGroup<Value extends string = string>({ className, ui, size, items, label, description, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: RadioGroupProps<Value>): React.JSX.Element;
 export { RadioGroup };
 export type { RadioGroupItemProps, RadioGroupProps };

package/dist/components/radio-group.mjs

@@ -1,9 +1,11 @@
 "use client";
+import { useLabelableId } from "@base-ui/react/internals/labelable-provider";
 import { Radio as UIRadio } from "@base-ui/react/radio";
 import { RadioGroup as UIRadioGroup } from "@base-ui/react/radio-group";
 import { cn } from "cn";
 import * as React from "react";
 import { mergeIds } from "../internal/aria.mjs";
+import { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/radio-group.mjs";
 function RadioGroup({
   className,
@@ -12,12 +14,14 @@ function RadioGroup({
   items,
   label,
   description,
+  disabled,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   ...props
 }) {
   const styles = theme({ size });
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
   const labelId = React.useId();
   const descriptionId = React.useId();
   const hasName = Boolean(label || ariaLabel || ariaLabelledBy);
@@ -26,13 +30,15 @@ function RadioGroup({
     ariaDescribedBy,
     description && hasName ? descriptionId : void 0
   );
+  useLabelableId({ id: null });
   return /* @__PURE__ */ React.createElement(
     UIRadioGroup,
     {
       ...props,
       "aria-describedby": describedBy,
       "aria-label": ariaLabel,
-      "aria-labelledby": labelledBy,
+      ...labelledBy ? { "aria-labelledby": labelledBy } : {},
+      disabled: fieldsetDisabled,
       "data-slot": "root",
       className: cn(styles.root(), ui?.root, className)
     },

package/dist/components/select.d.ts

@@ -4,7 +4,6 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/select";
 type Select = ComponentConfig<typeof theme>;
-type PositionerProps = UISelect.Positioner.Props;
 /** One option rendered by the select. */
 type SelectItemProps<Value extends string = string> = {
     /** Value submitted and passed to `onValueChange`. */
@@ -16,7 +15,7 @@ type SelectItemProps<Value extends string = string> = {
     /** Whether the option is disabled. */
     disabled?: boolean;
 };
-type SelectProps<Value extends string = string> = Omit<UISelect.Root.Props<Value>, "children" | "className" | "style" | "items" | "multiple" | "value" | "defaultValue" | "onValueChange"> & VariantProps<typeof theme> & {
+type SelectProps<Value extends string = string> = Omit<UISelect.Root.Props<Value>, "children" | "className" | "style" | "items" | "multiple" | "value" | "defaultValue" | "onValueChange"> & VariantProps<typeof theme> & Pick<UISelect.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding" | "alignItemWithTrigger"> & {
     /** Options rendered by the select. */
     items: readonly SelectItemProps<Value>[];
     /** Visible label associated with the trigger. */
@@ -31,18 +30,6 @@ type SelectProps<Value extends string = string> = Omit<UISelect.Root.Props<Value
     defaultValue?: Value | null;
     /** Called when the selected value changes. */
     onValueChange?: (value: Value | null, details: UISelect.Root.ChangeEventDetails) => void;
-    /** Side of the trigger the popup is placed on. */
-    side?: PositionerProps["side"];
-    /** Alignment of the popup relative to the trigger. */
-    align?: PositionerProps["align"];
-    /** Distance between the trigger and the popup in pixels. */
-    sideOffset?: PositionerProps["sideOffset"];
-    /** Offset along the alignment axis in pixels. */
-    alignOffset?: PositionerProps["alignOffset"];
-    /** Padding between the popup and the edge of the collision boundary. */
-    collisionPadding?: PositionerProps["collisionPadding"];
-    /** Whether the popup overlaps the trigger to align the selected item. */
-    alignItemWithTrigger?: PositionerProps["alignItemWithTrigger"];
     /** Accessible name for the trigger when no visible label is rendered. */
     "aria-label"?: string;
     /** Names the trigger from another element. */

package/dist/components/select.mjs

@@ -3,6 +3,7 @@ import { Select as UISelect } from "@base-ui/react/select";
 import { cn } from "cn";
 import * as React from "react";
 import { mergeIds } from "../internal/aria.mjs";
+import { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/select.mjs";
 import { CheckIcon } from "./icons/check.mjs";
 import { ChevronDownIcon } from "./icons/chevron-down.mjs";
@@ -30,6 +31,7 @@ function Select({
   ...props
 }) {
   const styles = theme({ size });
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
   const descriptionId = React.useId();
   const describedBy = mergeIds(
     ariaDescribedBy,
@@ -48,13 +50,13 @@ function Select({
       value,
       defaultValue,
       onValueChange,
-      disabled
+      disabled: fieldsetDisabled
     },
     /* @__PURE__ */ React.createElement(
       "div",
       {
         "data-slot": "root",
-        "data-disabled": disabled || void 0,
+        "data-disabled": fieldsetDisabled || void 0,
         className: cn(styles.root(), ui?.root, className)
       },
       label ? /* @__PURE__ */ React.createElement(
@@ -70,7 +72,7 @@ function Select({
         {
           "data-slot": "trigger",
           ...triggerAriaProps,
-          disabled,
+          disabled: fieldsetDisabled,
           className: cn(styles.trigger(), ui?.trigger)
         },
         /* @__PURE__ */ React.createElement(

package/dist/components/slider.d.ts

@@ -3,21 +3,17 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/slider";
 type Slider = ComponentConfig<typeof theme>;
-type SliderProps<Value extends number | readonly number[] = number> = Omit<UISlider.Root.Props<Value>, "children" | "style" | "className"> & {
+type SliderProps<Value extends number | readonly number[] = number> = Omit<UISlider.Root.Props<Value>, "children" | "style" | "className"> & Pick<UISlider.Thumb.Props, "getAriaLabel" | "getAriaValueText"> & {
     /** Tailwind classes merged into the root. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Slider["slots"];
-    /** Accessible name for the thumb at `index`. Useful for range sliders. */
-    getAriaLabel?: UISlider.Thumb.Props["getAriaLabel"];
-    /** Accessible value text for the thumb at `index`. */
-    getAriaValueText?: UISlider.Thumb.Props["getAriaValueText"];
 };
 /**
  * Sliders need an accessible name. Pass `aria-label` or `aria-labelledby`;
  * both are forwarded from the root to every thumb. `aria-describedby` is also
  * forwarded so supporting copy is announced with each thumb.
  */
-declare function Slider<Value extends number | readonly number[] = number>({ className, ui, value, defaultValue, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, getAriaLabel, getAriaValueText, ...props }: SliderProps<Value>): React.JSX.Element;
+declare function Slider<Value extends number | readonly number[] = number>({ className, ui, value, defaultValue, disabled, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, getAriaLabel, getAriaValueText, ...props }: SliderProps<Value>): React.JSX.Element;
 export { Slider };
 export type { SliderProps };

package/dist/components/slider.mjs

@@ -2,6 +2,7 @@
 import { Slider as UISlider } from "@base-ui/react/slider";
 import { cn } from "cn";
 import * as React from "react";
+import { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/slider.mjs";
 function setAriaAttribute(input, name, value) {
   if (value === void 0 || value === null) {
@@ -15,6 +16,7 @@ function Slider({
   ui,
   value,
   defaultValue,
+  disabled,
   "aria-describedby": ariaDescribedBy,
   "aria-errormessage": ariaErrorMessage,
   "aria-invalid": ariaInvalid,
@@ -25,6 +27,7 @@ function Slider({
   ...props
 }) {
   const styles = theme();
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
   const syncThumbAria = React.useCallback(
     (input) => {
       if (!input) {
@@ -45,6 +48,7 @@ function Slider({
       "aria-labelledby": ariaLabelledBy,
       value,
       defaultValue,
+      disabled: fieldsetDisabled,
       "data-slot": "root",
       className: cn(styles.root(), ui?.root, className)
     },

package/dist/components/switch.mjs

@@ -3,6 +3,7 @@ import { Switch as UISwitch } from "@base-ui/react/switch";
 import { cn } from "cn";
 import * as React from "react";
 import { mergeIds } from "../internal/aria.mjs";
+import { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/switch.mjs";
 function LiquidGlassFilter({ id }) {
   return /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-layer": "filter" }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: `${id}-goo` }, /* @__PURE__ */ React.createElement(
@@ -61,6 +62,7 @@ function Switch({
   ...props
 }) {
   const styles = theme({ size });
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
   const filterId = React.useId();
   const labelId = React.useId();
   const descriptionId = React.useId();
@@ -96,7 +98,7 @@ function Switch({
       "aria-describedby": describedBy,
       "aria-label": ariaLabel,
       "aria-labelledby": labelledBy,
-      disabled,
+      disabled: fieldsetDisabled,
       readOnly,
       "data-slot": "root",
       "data-animating": animating || void 0,

package/dist/components/tabs.d.ts

@@ -21,7 +21,7 @@ type TabsItemProps<Value extends string = string> = Omit<UITabs.Tab.Props, "chil
     /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
     ui?: Partial<Pick<Tabs["slots"], "tab" | "icon" | "label" | "panel" | "panelContent">>;
 };
-type TabsProps<Value extends string = string> = Omit<UITabs.Root.Props, "children" | "className" | "style" | "value" | "defaultValue" | "onValueChange"> & VariantProps<typeof theme> & {
+type TabsProps<Value extends string = string> = Omit<UITabs.Root.Props, "children" | "className" | "style" | "value" | "defaultValue" | "onValueChange"> & Pick<UITabs.List.Props, "activateOnFocus" | "loopFocus"> & VariantProps<typeof theme> & {
     /** Tabs and panels rendered by the component. */
     items: readonly TabsItemProps<Value>[];
     /** Controlled active value. Use `null` to render no active tab. */
@@ -30,10 +30,6 @@ type TabsProps<Value extends string = string> = Omit<UITabs.Root.Props, "childre
     defaultValue?: Value | null;
     /** Called when the active value changes. */
     onValueChange?: (value: Value, details: UITabs.Root.ChangeEventDetails) => void;
-    /** Whether arrow keys activate a tab as focus moves. */
-    activateOnFocus?: boolean;
-    /** Whether keyboard focus loops back to the first tab. */
-    loopFocus?: boolean;
     /** Disables every tab. */
     disabled?: boolean;
     /** Tailwind classes merged into the root. */

package/dist/components/toggle-group.d.ts

@@ -26,6 +26,6 @@ type ToggleGroupProps<Value extends string = string> = Omit<UIToggleGroup.Props<
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: ToggleGroup["slots"];
 };
-declare function ToggleGroup<Value extends string = string>({ className, ui, size, items, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
+declare function ToggleGroup<Value extends string = string>({ className, ui, size, items, disabled, ...props }: ToggleGroupProps<Value>): React.JSX.Element;
 export { ToggleGroup };
 export type { ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/toggle-group.mjs

@@ -3,19 +3,23 @@ import { Toggle as UIToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as UIToggleGroup } from "@base-ui/react/toggle-group";
 import { cn } from "cn";
 import * as React from "react";
+import { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/toggle-group.mjs";
 function ToggleGroup({
   className,
   ui,
   size,
   items,
+  disabled,
   ...props
 }) {
   const styles = theme({ size });
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
   return /* @__PURE__ */ React.createElement(
     UIToggleGroup,
     {
       ...props,
+      disabled: fieldsetDisabled,
       "data-slot": "root",
       className: cn(styles.root(), ui?.root, className)
     },

package/dist/components/toggle.d.ts

@@ -16,6 +16,6 @@ type ToggleProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "c
     /** Icon rendered before the label. */
     icon?: React.ReactNode;
 };
-declare function Toggle<Value extends string = string>({ className, ui, icon, label, size, ...props }: ToggleProps<Value>): React.JSX.Element;
+declare function Toggle<Value extends string = string>({ className, ui, icon, label, size, disabled, ...props }: ToggleProps<Value>): React.JSX.Element;
 export { Toggle };
 export type { ToggleProps };

package/dist/components/toggle.mjs

@@ -2,6 +2,7 @@
 import { Toggle as UIToggle } from "@base-ui/react/toggle";
 import { cn } from "cn";
 import * as React from "react";
+import { useFieldsetDisabled } from "../internal/fieldset.mjs";
 import theme from "../theme/toggle.mjs";
 function Toggle({
   className,
@@ -9,13 +10,16 @@ function Toggle({
   icon,
   label,
   size,
+  disabled,
   ...props
 }) {
   const styles = theme({ size, iconOnly: !label });
+  const fieldsetDisabled = useFieldsetDisabled(disabled);
   return /* @__PURE__ */ React.createElement(
     UIToggle,
     {
       ...props,
+      disabled: fieldsetDisabled,
       "data-slot": "root",
       className: cn(styles.root(), ui?.root, className)
     },

package/dist/components/tooltip.d.ts

@@ -3,33 +3,18 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/tooltip";
 type Tooltip = ComponentConfig<typeof theme>;
-type PositionerProps = UITooltip.Positioner.Props;
-type TooltipProps = Omit<UITooltip.Root.Props, "children"> & {
+type TooltipProps = Omit<UITooltip.Root.Props, "children"> & Pick<UITooltip.Trigger.Props, "delay" | "closeDelay"> & Pick<UITooltip.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding"> & {
     /** Element that opens the tooltip. It must forward props and refs. */
     trigger: React.ReactElement;
     /** Short hint displayed while the trigger is hovered or focused. */
-    content: React.ReactNode;
+    children: React.ReactNode;
     /** Whether to render the directional arrow. */
     arrow?: boolean;
-    /** Delay before the tooltip opens on hover, in milliseconds. */
-    delay?: number;
-    /** Delay before the tooltip closes, in milliseconds. */
-    closeDelay?: number;
-    /** Side of the trigger the tooltip is placed on. */
-    side?: PositionerProps["side"];
-    /** Alignment of the tooltip relative to the trigger. */
-    align?: PositionerProps["align"];
-    /** Distance between the trigger and the tooltip in pixels. */
-    sideOffset?: PositionerProps["sideOffset"];
-    /** Offset along the alignment axis in pixels. */
-    alignOffset?: PositionerProps["alignOffset"];
-    /** Padding between the tooltip and the edge of the collision boundary. */
-    collisionPadding?: PositionerProps["collisionPadding"];
     /** Tailwind classes merged into the tooltip popup. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Tooltip["slots"];
 };
-declare function Tooltip({ trigger, content, arrow, delay, closeDelay, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: TooltipProps): React.JSX.Element;
+declare function Tooltip({ trigger, children, arrow, delay, closeDelay, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: TooltipProps): React.JSX.Element;
 export { Tooltip };
 export type { TooltipProps };

package/dist/components/tooltip.mjs

@@ -5,7 +5,7 @@ import * as React from "react";
 import theme from "../theme/tooltip.mjs";
 function Tooltip({
   trigger,
-  content,
+  children,
   arrow = true,
   delay,
   closeDelay,
@@ -72,7 +72,7 @@ function Tooltip({
           "data-slot": "content",
           className: cn(styles.content(), ui?.content)
         },
-        content
+        children
       )
     )
   )));

package/dist/index.d.ts

@@ -3,10 +3,14 @@ export { AlertDialog, type AlertDialogProps } from "./components/alert-dialog";
 export { Button, type ButtonProps } from "./components/button";
 export { Card, type CardProps } from "./components/card";
 export { Checkbox, type CheckboxProps } from "./components/checkbox";
+export { CheckboxGroup, type CheckboxGroupItemProps, type CheckboxGroupProps, } from "./components/checkbox-group";
 export { Dialog, type DialogProps } from "./components/dialog";
 export { Drawer, type DrawerProps } from "./components/drawer";
+export { Field, type FieldProps } from "./components/field";
+export { Fieldset, type FieldsetProps } from "./components/fieldset";
+export { Form, type FormProps } from "./components/form";
 export { Input, type InputProps } from "./components/input";
-export { Menu, type MenuEntry, type MenuGroupProps, type MenuItemProps, type MenuProps, type MenuSeparatorProps, } from "./components/menu";
+export { Menu, type MenuGroupProps, type MenuItemProps, type MenuProps, type MenuSeparatorProps, } from "./components/menu";
 export { Popover, type PopoverProps } from "./components/popover";
 export { Progress, type ProgressProps } from "./components/progress";
 export { RadioGroup, type RadioGroupItemProps, type RadioGroupProps, } from "./components/radio-group";

package/dist/index.mjs

@@ -5,8 +5,14 @@ export { AlertDialog } from "./components/alert-dialog.mjs";
 export { Button } from "./components/button.mjs";
 export { Card } from "./components/card.mjs";
 export { Checkbox } from "./components/checkbox.mjs";
+export {
+  CheckboxGroup
+} from "./components/checkbox-group.mjs";
 export { Dialog } from "./components/dialog.mjs";
 export { Drawer } from "./components/drawer.mjs";
+export { Field } from "./components/field.mjs";
+export { Fieldset } from "./components/fieldset.mjs";
+export { Form } from "./components/form.mjs";
 export { Input } from "./components/input.mjs";
 export {
   Menu

package/dist/internal/fieldset.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+type FieldsetDisabledProviderProps = {
+    disabled: boolean;
+    children: React.ReactNode;
+};
+declare function FieldsetDisabledProvider({ disabled, children, }: FieldsetDisabledProviderProps): React.JSX.Element;
+declare function useFieldsetDisabled(disabled?: boolean): boolean;
+export { FieldsetDisabledProvider, useFieldsetDisabled };

package/dist/internal/fieldset.mjs

@@ -0,0 +1,13 @@
+"use client";
+import * as React from "react";
+const FieldsetDisabledContext = React.createContext(false);
+function FieldsetDisabledProvider({
+  disabled,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(FieldsetDisabledContext.Provider, { value: disabled }, children);
+}
+function useFieldsetDisabled(disabled = false) {
+  return React.useContext(FieldsetDisabledContext) || disabled;
+}
+export { FieldsetDisabledProvider, useFieldsetDisabled };

package/dist/theme/alert-dialog.mjs

@@ -7,9 +7,9 @@ export default tv({
       "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
       "motion-reduce:transition-none"
     ],
-    viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
+    viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
     popup: [
-      "relative isolate w-full max-w-md bg-ui-surface",
+      "relative isolate m-auto w-full max-w-md bg-ui-surface",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",

package/dist/theme/card.mjs

@@ -7,7 +7,7 @@ export default tv({
     ],
     glass: [
       "ui-glass ui-glass-inner ui-glass-highlight",
-      "pointer-events-none relative col-start-1 row-start-1 h-full w-full overflow-hidden rounded-[2rem]"
+      "pointer-events-none relative col-start-1 row-start-1 h-full w-full overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
     layout: [