@exem-ui/react 0.3.2 → 0.3.3

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import { X, MoreHorizontal, ChevronDown, Minus, Check, Person, Warning, Info, Error as Error$1, ChevronLeft, ChevronRight } from './chunk-LZWKMQJL.mjs';
+import { ConditionalTooltip, commonInputVariants } from './chunk-WSRLUKC4.mjs';
+export { Segment, Select, Tooltip } from './chunk-WSRLUKC4.mjs';
+import { X, MoreHorizontal, Minus, Check, Person, Warning, Info, Error as Error$1, ChevronLeft, ChevronRight } from './chunk-LZWKMQJL.mjs';
 import { cva, cn } from '@exem-ui/core/utils';
-import * as React2 from 'react';
+import * as React from 'react';
 import { forwardRef, Fragment, createContext, cloneElement, useId, useContext, useState } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -695,609 +695,6 @@ var Button = forwardRef(
   }
 );
 Button.displayName = "Button";
-var segmentListVariants = cva(
-  "inline-flex items-center overflow-hidden rounded-medium bg-elevation-elevation-2",
-  {
-    variants: {
-      size: {
-        small: "h-7 gap-0 p-0.5",
-        medium: "h-8 gap-0 p-0.5",
-        large: "h-10 gap-0 p-0.5"
-      }
-    },
-    defaultVariants: {
-      size: "medium"
-    }
-  }
-);
-var segmentItemVariants = cva(
-  [
-    "flex flex-1 items-center justify-center rounded-weak",
-    "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring",
-    "disabled:cursor-not-allowed",
-    "data-[state=active]:bg-component-segmentedOption data-[state=active]:text-text-primary data-[state=active]:shadow-weak",
-    "data-[state=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled",
-    "transition-colors duration-200 ease-in-out"
-  ],
-  {
-    variants: {
-      size: {
-        small: "h-6 gap-0.5 text-body-3 font-medium",
-        medium: "h-7 gap-1 text-body-2 font-medium",
-        large: "h-9 gap-1.5 text-body-2 font-medium"
-      }
-    },
-    defaultVariants: {
-      size: "medium"
-    }
-  }
-);
-var segmentIconVariants = cva("flex items-center justify-center", {
-  variants: {
-    size: {
-      small: "size-4",
-      medium: "size-4",
-      large: "size-5"
-    }
-  },
-  defaultVariants: {
-    size: "medium"
-  }
-});
-var SegmentContext = createContext(void 0);
-var useSegmentContext = () => {
-  const context = useContext(SegmentContext);
-  if (!context) {
-    throw new Error("Segment components must be used within a Segment");
-  }
-  return context;
-};
-var Segment = forwardRef(
-  ({ size = "medium", children, ...props }, ref) => /* @__PURE__ */ jsx(SegmentContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, children }) })
-);
-Segment.List = forwardRef(
-  ({ className, ...props }, ref) => {
-    const { size } = useSegmentContext();
-    return /* @__PURE__ */ jsx(
-      TabsPrimitive.List,
-      {
-        ref,
-        className: cn(segmentListVariants({ size }), className),
-        ...props
-      }
-    );
-  }
-);
-Segment.Item = forwardRef(
-  ({ className, leftIcon, children, ...props }, ref) => {
-    const { size } = useSegmentContext();
-    return /* @__PURE__ */ jsxs(
-      TabsPrimitive.Trigger,
-      {
-        ref,
-        className: cn(segmentItemVariants({ size }), className),
-        ...props,
-        children: [
-          leftIcon && /* @__PURE__ */ jsx("span", { className: cn(segmentIconVariants({ size })), children: leftIcon }),
-          /* @__PURE__ */ jsx("span", { className: "flex items-center", children })
-        ]
-      }
-    );
-  }
-);
-Segment.Content = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    TabsPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        className
-      ),
-      ...props
-    }
-  )
-);
-Segment.displayName = "Segment";
-Segment.List.displayName = "Segment.List";
-Segment.Content.displayName = "Segment.Content";
-Segment.Item.displayName = "Segment.Item";
-var commonInputVariants = {
-  // Container variants - 전체 컴포넌트 래퍼
-  container: cva("flex flex-col"),
-  // Label variants - 라벨 텍스트
-  label: cva("inline-block font-regular text-text-primary", {
-    variants: {
-      size: {
-        xsmall: "mb-[2px] text-body-3",
-        small: "mb-[4px] text-body-2",
-        medium: "mb-[4px] text-body-2",
-        large: "mb-[6px] text-body-1"
-      },
-      disabled: {
-        true: "text-text-disabled"
-      },
-      required: {
-        true: 'after:ml-0.5 after:text-text-critical after:content-["*"]'
-      }
-    },
-    compoundVariants: [
-      {
-        required: true,
-        disabled: true,
-        className: "after:text-text-disabled"
-      }
-    ],
-    defaultVariants: { size: "medium" }
-  }),
-  // Description variants - 설명 텍스트
-  description: cva("mt-0.5 inline-block text-text-tertiary", {
-    variants: {
-      size: {
-        xsmall: "text-caption",
-        small: "text-body-3",
-        medium: "text-body-3",
-        large: "text-body-2"
-      },
-      error: {
-        true: "text-text-critical"
-      },
-      disabled: {
-        true: "text-text-disabled"
-      }
-    },
-    compoundVariants: [
-      {
-        error: true,
-        disabled: true,
-        className: "text-text-disabled"
-        // disabled 우선 적용
-      }
-    ],
-    defaultVariants: { size: "medium" }
-  }),
-  // Icon variants - 아이콘 크기
-  icon: cva("shrink-0", {
-    variants: {
-      size: {
-        xsmall: "size-4",
-        small: "size-4",
-        medium: "size-4",
-        large: "size-5"
-      }
-    },
-    defaultVariants: { size: "medium" }
-  })
-};
-
-// src/input/selectVariants.ts
-var selectVariants = {
-  container: commonInputVariants.container,
-  content: cn(
-    "relative border border-border-primary z-50 min-w-[8rem] overflow-hidden rounded-medium bg-background-overlay shadow-weak",
-    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-    "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
-  ),
-  description: commonInputVariants.description,
-  iconSize: commonInputVariants.icon,
-  item: cva(
-    "relative flex w-full cursor-pointer select-none items-center rounded-weak px-2 text-body-2 text-text-primary outline-none hover:bg-elevation-elevation-2 data-[disabled]:pointer-events-none data-[state=checked]:bg-elevation-accent data-[disabled]:text-text-disabled",
-    {
-      defaultVariants: { size: "medium" },
-      variants: {
-        size: {
-          xsmall: "h-6",
-          small: "h-7",
-          medium: "h-8",
-          large: "h-10"
-        }
-      }
-    }
-  ),
-  itemText: cva("truncate flex items-center flex-1 min-w-0", {
-    defaultVariants: { size: "medium" },
-    variants: {
-      size: {
-        xsmall: "h-6",
-        small: "h-7",
-        medium: "h-8",
-        large: "h-10"
-      }
-    }
-  }),
-  label: commonInputVariants.label,
-  trigger: cva(
-    "group flex w-full items-center justify-between rounded-medium outline-none disabled:cursor-not-allowed disabled:bg-elevation-elevation-2 disabled:text-text-disabled data-[state=open]:border data-[state=open]:border-border-focused [&>span]:line-clamp-1 [&[data-placeholder]]:text-text-tertiary [&_svg]:text-icon-primary",
-    {
-      compoundVariants: [
-        {
-          className: "border-border-accent text-tint-foreground-sky bg-elevation-accent [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
-          focus: true,
-          variant: "line"
-        },
-        // active + fill: 배경만 accent로 변경
-        {
-          className: "bg-elevation-accent text-tint-foreground-sky [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
-          active: true,
-          variant: "fill"
-        },
-        // active + line: 배경 accent + 테두리 accent
-        {
-          className: "bg-elevation-accent border-border-accent text-tint-foreground-sky [&[data-placeholder]]:text-tint-foreground-sky [&_svg]:text-tint-foreground-sky",
-          active: true,
-          variant: "line"
-        }
-      ],
-      defaultVariants: {
-        active: false,
-        error: false,
-        focus: false,
-        size: "medium",
-        variant: "fill"
-      },
-      variants: {
-        active: {
-          false: "",
-          true: ""
-        },
-        error: {
-          false: "",
-          true: "border !border-border-critical"
-        },
-        focus: {
-          false: "",
-          // 현재는 line 타입만 focus 가능
-          true: ""
-        },
-        size: {
-          xsmall: "h-6 px-[4px] text-body-3",
-          small: "h-7 px-[6px] text-body-2",
-          medium: "h-8 px-[8px] text-body-2",
-          large: "h-10 px-[10px] text-body-1"
-        },
-        variant: {
-          fill: "bg-elevation-elevation-2",
-          line: "border-border-primary border"
-        }
-      }
-    }
-  ),
-  triggerInner: cva("flex w-full items-center", {
-    defaultVariants: { size: "medium" },
-    variants: {
-      size: {
-        xsmall: "gap-0",
-        small: "gap-[2px]",
-        medium: "gap-[2px]",
-        large: "gap-[4px]"
-      }
-    }
-  }),
-  viewport: cn("flex flex-col gap-0.5 p-1")
-};
-var SelectContext = createContext(null);
-var useSelectContext = () => {
-  const context = useContext(SelectContext);
-  if (!context) {
-    throw new Error("Select components must be used within a Select");
-  }
-  return context;
-};
-var SelectGroupContext = createContext(null);
-var useSelectGroupContext = () => {
-  return useContext(SelectGroupContext);
-};
-var Select = forwardRef(
-  ({
-    children,
-    size = "medium",
-    variant = "fill",
-    error = false,
-    disabled = false,
-    focus = false,
-    active = false,
-    className,
-    ...selectProps
-  }, ref) => {
-    const uniqueId = useId();
-    const id = `select-${uniqueId}`;
-    return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { active, disabled, error, focus, id, size, variant }, children: /* @__PURE__ */ jsx("div", { ref, className: cn(selectVariants.container(), className), children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { disabled, ...selectProps, children }) }) });
-  }
-);
-Select.Value = forwardRef(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { ref, className, ...props, children });
-});
-Select.Trigger = forwardRef(
-  ({ className, children, leftIcon, ...props }, ref) => {
-    const { size, error, id, variant, focus, active } = useSelectContext();
-    const groupContext = useSelectGroupContext();
-    const groupClasses = groupContext ? cn("rounded-none border-0", {
-      "rounded-l-medium": groupContext.isFirstChild,
-      "rounded-r-medium": groupContext.isLastChild,
-      // line variant: group이 외곽 border를 제공하므로, open 시 border 대신 inset ring 사용
-      "data-[state=open]:border-0 data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-border-focused": variant === "line"
-    }) : void 0;
-    return /* @__PURE__ */ jsx(
-      SelectPrimitive.Trigger,
-      {
-        ref,
-        id,
-        "data-slot": "select-trigger",
-        className: cn(
-          selectVariants.trigger({ active, error, focus, size, variant }),
-          groupClasses,
-          className
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: cn(selectVariants.triggerInner({ size })), children: [
-          leftIcon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                selectVariants.iconSize({ size }),
-                "flex items-center justify-center group-disabled:text-icon-disabled"
-              ),
-              children: leftIcon
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate text-left", children }),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              type: "regular",
-              className: cn(
-                selectVariants.iconSize({ size }),
-                "transition-transform duration-200 group-data-[state=open]:rotate-180",
-                "group-disabled:text-icon-disabled"
-              )
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-Select.Box = forwardRef(
-  ({ placeholder, leftIcon, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Select.Trigger, { ref, leftIcon, className, ...props, children: /* @__PURE__ */ jsx(Select.Value, { placeholder }) });
-  }
-);
-Select.List = forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    SelectPrimitive.Content,
-    {
-      ref,
-      "data-slot": "select-content",
-      className: cn(selectVariants.content, "max-h-60 ", className),
-      position: "popper",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        SelectPrimitive.Viewport,
-        {
-          "data-slot": "select-viewport",
-          className: cn(
-            selectVariants.viewport,
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      )
-    }
-  ) })
-);
-Select.Label = forwardRef(
-  ({ children, required = false, size: sizeProp, className }, ref) => {
-    const { size: contextSize, disabled, id } = useSelectContext();
-    const groupContext = useSelectGroupContext();
-    const size = sizeProp ?? groupContext?.size ?? contextSize;
-    return /* @__PURE__ */ jsx(
-      "label",
-      {
-        ref,
-        htmlFor: id,
-        className: cn(selectVariants.label({ disabled, required, size }), className),
-        children
-      }
-    );
-  }
-);
-Select.Item = forwardRef(
-  ({
-    className,
-    children,
-    leftIcon,
-    rightIcon,
-    leftIconSize,
-    rightIconSize,
-    size: sizeProp,
-    ...props
-  }, ref) => {
-    const { size: contextSize } = useSelectContext();
-    const groupContext = useSelectGroupContext();
-    const size = sizeProp ?? groupContext?.size ?? contextSize;
-    return /* @__PURE__ */ jsx(
-      SelectPrimitive.Item,
-      {
-        "data-slot": "select-item",
-        ref,
-        className: cn(selectVariants.item({ size }), className),
-        ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-0.5", children: [
-            leftIcon && /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  selectVariants.iconSize({ size: leftIconSize ?? size }),
-                  "flex items-center justify-center text-icon-primary"
-                ),
-                children: leftIcon
-              }
-            ),
-            /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn(selectVariants.itemText({ size })), children }) })
-          ] }),
-          rightIcon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                selectVariants.iconSize({ size: rightIconSize ?? size }),
-                "flex items-center justify-center text-icon-primary"
-              ),
-              children: rightIcon
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-Select.Empty = forwardRef(
-  ({ children = "No data", className }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex min-h-8 items-center justify-center p-2", className), children: /* @__PURE__ */ jsx("p", { className: "text-body-2 text-text-disabled", children }) });
-  }
-);
-Select.Description = forwardRef(
-  ({ children, size: sizeProp, className }, ref) => {
-    const { size: contextSize, error, disabled } = useSelectContext();
-    const groupContext = useSelectGroupContext();
-    const size = sizeProp ?? groupContext?.size ?? contextSize;
-    if (!children) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-slot": "select-description",
-        className: cn(selectVariants.description({ disabled, error, size }), className),
-        children: /* @__PURE__ */ jsx("p", { children })
-      }
-    );
-  }
-);
-Select.Group = forwardRef(
-  ({ children, size = "medium", variant = "fill", hasBackground = false, className }, ref) => {
-    const childArray = React2.Children.toArray(children);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex w-fit flex-row items-stretch overflow-clip rounded-medium",
-          variant === "line" && "border border-border-primary",
-          hasBackground && "bg-elevation-elevation-0",
-          className
-        ),
-        children: childArray.map((child, index) => {
-          const isFirst = index === 0;
-          const isLast = index === childArray.length - 1;
-          return /* @__PURE__ */ jsxs(React2.Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              SelectGroupContext.Provider,
-              {
-                value: { isFirstChild: isFirst, isLastChild: isLast, size, variant },
-                children: child
-              }
-            ),
-            !isLast && /* @__PURE__ */ jsx("div", { className: "w-px self-stretch bg-border-primary" })
-          ] }, index);
-        })
-      }
-    );
-  }
-);
-Select.displayName = "Select";
-Select.Label.displayName = "Select.Label";
-Select.Trigger.displayName = "Select.Trigger";
-Select.Box.displayName = "Select.Box";
-Select.Value.displayName = "Select.Value";
-Select.List.displayName = "Select.List";
-Select.Item.displayName = "Select.Item";
-Select.Empty.displayName = "Select.Empty";
-Select.Description.displayName = "Select.Description";
-Select.Group.displayName = "Select.Group";
-var tooltipContentVariants = cva(
-  [
-    // Base layout
-    "z-50 flex flex-col items-start overflow-hidden",
-    "rounded-medium",
-    "text-text-static-light",
-    "bg-component-tooltip border border-border-primary",
-    "shadow-medium",
-    "animate-in fade-in-0 zoom-in-95",
-    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-    "data-[side=bottom]:slide-in-from-top-2",
-    "data-[side=left]:slide-in-from-right-2",
-    "data-[side=right]:slide-in-from-left-2",
-    "data-[side=top]:slide-in-from-bottom-2"
-  ],
-  {
-    variants: {
-      size: {
-        tiny: "px-2 py-1 text-body-3",
-        small: "w-[160px] gap-[8px] px-[12px] py-[10px]",
-        medium: "w-[240px] gap-[8px] px-[12px] py-[10px]",
-        large: "w-[320px] gap-[8px] px-[12px] py-[10px]",
-        xlarge: "w-[400px] gap-[8px] px-[12px] py-[10px]"
-      }
-    },
-    defaultVariants: { size: "small" }
-  }
-);
-var tooltipTitleVariants = cva([
-  "text-body-1 font-semibold text-text-static-light",
-  "group-data-[size=tiny]/tooltip-content:text-body-3"
-]);
-var tooltipTextVariants = cva([
-  "text-body-2 font-regular text-text-static-light",
-  "group-data-[size=tiny]/tooltip-content:text-body-3"
-]);
-var Tooltip = TooltipPrimitive.Root;
-Tooltip.Provider = TooltipPrimitive.Provider;
-Tooltip.Trigger = TooltipPrimitive.Trigger;
-Tooltip.Content = forwardRef(({ className, sideOffset = 4, size, children, portalContainer, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    "data-size": size,
-    className: cn("group/tooltip-content", tooltipContentVariants({ size }), className),
-    ...props,
-    children
-  }
-) }));
-Tooltip.Title = forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(tooltipTitleVariants(), className), ...props, children })
-);
-Tooltip.Description = forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(tooltipTextVariants(), className), ...props, children })
-);
-Tooltip.displayName = "Tooltip";
-Tooltip.Content.displayName = "Tooltip.Content";
-Tooltip.Title.displayName = "Tooltip.Title";
-Tooltip.Description.displayName = "Tooltip.Description";
-Tooltip.Trigger.displayName = "Tooltip.Trigger";
-Tooltip.Provider.displayName = "Tooltip.Provider";
-var FlatTooltip = ({ children, title, size, description, ...props }) => {
-  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxs(Tooltip.Content, { size, ...props, children: [
-      title && /* @__PURE__ */ jsx(Tooltip.Title, { children: title }),
-      description && /* @__PURE__ */ jsx(Tooltip.Description, { children: description })
-    ] })
-  ] }) });
-};
-function ConditionalTooltip({ children, tooltip }) {
-  if (typeof tooltip === "string") {
-    return /* @__PURE__ */ jsx(FlatTooltip, { size: "tiny", description: tooltip, children });
-  }
-  if (tooltip && typeof tooltip === "object" && "description" in tooltip && tooltip.use !== false) {
-    return /* @__PURE__ */ jsx(FlatTooltip, { size: tooltip.size || "tiny", ...tooltip, children });
-  }
-  return children;
-}
-FlatTooltip.displayName = "FlatTooltip";
-ConditionalTooltip.displayName = "ConditionalTooltip";
 var iconButtonSizeClasses = {
   xsmall: "size-6",
   small: "size-7",
@@ -1853,7 +1250,7 @@ var textAreaVariants = {
     defaultVariants: { disabled: false }
   })
 };
-var TextArea = React2.forwardRef(
+var TextArea = React.forwardRef(
   ({
     children,
     variant = "fill",
@@ -1877,7 +1274,7 @@ var TextArea = React2.forwardRef(
     );
   }
 );
-TextArea.Label = React2.forwardRef(
+TextArea.Label = React.forwardRef(
   ({ children, required = false, className }, ref) => {
     const { size, disabled, id } = useTextAreaContext();
     return /* @__PURE__ */ jsx(
@@ -1891,7 +1288,7 @@ TextArea.Label = React2.forwardRef(
     );
   }
 );
-TextArea.Field = React2.forwardRef(
+TextArea.Field = React.forwardRef(
   ({ className, onFocus, onBlur, ...props }, ref) => {
     const {
       variant,
@@ -1903,7 +1300,7 @@ TextArea.Field = React2.forwardRef(
       value: contextValue,
       onChange: contextOnChange
     } = useTextAreaContext();
-    const [focused, setFocused] = React2.useState(false);
+    const [focused, setFocused] = React.useState(false);
     const handleFocus = (e) => {
       setFocused(true);
       onFocus?.(e);
@@ -1933,7 +1330,7 @@ TextArea.Field = React2.forwardRef(
     );
   }
 );
-TextArea.Description = React2.forwardRef(
+TextArea.Description = React.forwardRef(
   ({ children, showCounter = true, className }, ref) => {
     const { size, error, disabled, value = "", maxLength } = useTextAreaContext();
     if (!children && (!showCounter || !maxLength)) {
@@ -2731,7 +2128,7 @@ var Toaster = ({ ...props }) => {
     )
   ] });
 };
-Toaster.Container = React2.forwardRef(
+Toaster.Container = React.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2748,7 +2145,7 @@ Toaster.Container = React2.forwardRef(
     );
   }
 );
-Toaster.Icon = React2.forwardRef(
+Toaster.Icon = React.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2761,7 +2158,7 @@ Toaster.Icon = React2.forwardRef(
     );
   }
 );
-Toaster.Title = React2.forwardRef(
+Toaster.Title = React.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2777,7 +2174,7 @@ Toaster.Title = React2.forwardRef(
     );
   }
 );
-Toaster.Description = React2.forwardRef(
+Toaster.Description = React.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2794,7 +2191,7 @@ Toaster.Description = React2.forwardRef(
     );
   }
 );
-Toaster.Action = React2.forwardRef(
+Toaster.Action = React.forwardRef(
   ({ className, children, altText, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
@@ -3013,6 +2410,19 @@ function useToast() {
   };
 }
 
-export { Avatar, Badge, Breadcrumb, Button, ButtonGroup, Checkbox, DatePicker, DoubleTag, IconButton, Loading, MessageBox, Modal, Progress, Radio, ScrollArea, ScrollBar, Segment, Select, Star, Switch, Tabs, Tag, TextArea, TextField, ToastProvider, Toaster, Tooltip, toast, useToast };
+// src/utils.ts
+var buttonize = (fn) => {
+  return {
+    role: "button",
+    onClick: fn,
+    onKeyDown: (event) => {
+      if (event.key === "Enter") {
+        fn(event);
+      }
+    }
+  };
+};
+
+export { Avatar, Badge, Breadcrumb, Button, ButtonGroup, Checkbox, DatePicker, DoubleTag, IconButton, Loading, MessageBox, Modal, Progress, Radio, ScrollArea, ScrollBar, Star, Switch, Tabs, Tag, TextArea, TextField, ToastProvider, Toaster, buttonize, toast, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map