@exem-ui/react 0.1.0-next.bf3c711

package/dist/chunk-Q442ZDTI.mjs

@@ -0,0 +1,117 @@
+import { cva, cn } from '@exem-ui/core/utils';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { createContext, forwardRef, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/segment/Segment.tsx
+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";
+
+export { Segment };
+//# sourceMappingURL=chunk-Q442ZDTI.mjs.map
+//# sourceMappingURL=chunk-Q442ZDTI.mjs.map

package/dist/chunk-Q442ZDTI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segment/Segment.tsx"],"names":[],"mappings":"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","file":"chunk-Q442ZDTI.mjs","sourcesContent":["import { cn, cva } from '@exem-ui/core/utils';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport type React from 'react';\nimport { createContext, forwardRef, useContext } from 'react';\n\ntype SegmentSize = 'small' | 'medium' | 'large';\n\ntype SegmentContextValue = {\n  size: SegmentSize;\n};\n\ntype SegmentListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\ntype SegmentItemProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {\n  /** 텍스트 왼쪽에 표시할 아이콘 요소 */\n  leftIcon?: React.ReactElement<{ className?: string }>;\n};\n\ntype SegmentContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;\n\ntype SegmentRootProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n  /**\n   * 세그먼트 크기\n   * @default 'medium'\n   */\n  size?: SegmentSize;\n};\n\ntype SegmentComponent = React.ForwardRefExoticComponent<\n  SegmentRootProps & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>\n> & {\n  List: React.ForwardRefExoticComponent<SegmentListProps>;\n  Item: React.ForwardRefExoticComponent<SegmentItemProps>;\n  Content: React.ForwardRefExoticComponent<SegmentContentProps>;\n};\n\nconst segmentListVariants = cva(\n  'inline-flex items-center overflow-hidden rounded-medium bg-elevation-elevation-2',\n  {\n    variants: {\n      size: {\n        small: 'h-7 gap-0 p-0.5',\n        medium: 'h-8 gap-0 p-0.5',\n        large: 'h-10 gap-0 p-0.5',\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n    },\n  },\n);\n\nconst segmentItemVariants = cva(\n  [\n    'flex flex-1 items-center justify-center rounded-weak',\n    'focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring',\n    'disabled:cursor-not-allowed',\n    'data-[state=active]:bg-component-segmentedOption data-[state=active]:text-text-primary data-[state=active]:shadow-weak',\n    'data-[state=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled',\n    'transition-colors duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: {\n        small: 'h-6 gap-0.5 text-body-3 font-medium',\n        medium: 'h-7 gap-1 text-body-2 font-medium',\n        large: 'h-9 gap-1.5 text-body-2 font-medium',\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n    },\n  },\n);\n\nconst segmentIconVariants = cva('flex items-center justify-center', {\n  variants: {\n    size: {\n      small: 'size-4',\n      medium: 'size-4',\n      large: 'size-5',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nconst SegmentContext = createContext<SegmentContextValue | undefined>(undefined);\n\nconst useSegmentContext = () => {\n  const context = useContext(SegmentContext);\n  if (!context) {\n    throw new Error('Segment components must be used within a Segment');\n  }\n  return context;\n};\n\n/**\n * 탭 형태의 세그먼트 컨트롤 컴포넌트입니다.\n * Compound Component 패턴으로 `Segment.List`, `Segment.Item`, `Segment.Content`와 함께 사용합니다.\n *\n * @example\n * ```tsx\n * <Segment defaultValue=\"tab1\" size=\"medium\">\n *   <Segment.List>\n *     <Segment.Item value=\"tab1\">첫 번째</Segment.Item>\n *     <Segment.Item value=\"tab2\">두 번째</Segment.Item>\n *   </Segment.List>\n *   <Segment.Content value=\"tab1\">첫 번째 내용</Segment.Content>\n *   <Segment.Content value=\"tab2\">두 번째 내용</Segment.Content>\n * </Segment>\n * ```\n *\n * @see {@link SegmentRootProps} 루트 props 상세\n * @see {@link SegmentItemProps} 아이템 props 상세\n */\nconst Segment = forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, SegmentRootProps>(\n  ({ size = 'medium', children, ...props }, ref) => (\n    <SegmentContext.Provider value={{ size }}>\n      <TabsPrimitive.Root ref={ref} {...props}>\n        {children}\n      </TabsPrimitive.Root>\n    </SegmentContext.Provider>\n  ),\n) as SegmentComponent;\n\nSegment.List = forwardRef<React.ElementRef<typeof TabsPrimitive.List>, SegmentListProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = useSegmentContext();\n    return (\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(segmentListVariants({ size }), className)}\n        {...props}\n      />\n    );\n  },\n) as SegmentComponent['List'];\n\nSegment.Item = forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, SegmentItemProps>(\n  ({ className, leftIcon, children, ...props }, ref) => {\n    const { size } = useSegmentContext();\n\n    return (\n      <TabsPrimitive.Trigger\n        ref={ref}\n        className={cn(segmentItemVariants({ size }), className)}\n        {...props}\n      >\n        {leftIcon && <span className={cn(segmentIconVariants({ size }))}>{leftIcon}</span>}\n        <span className=\"flex items-center\">{children}</span>\n      </TabsPrimitive.Trigger>\n    );\n  },\n) as SegmentComponent['Item'];\n\nSegment.Content = forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, SegmentContentProps>(\n  ({ className, ...props }, ref) => (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        className,\n      )}\n      {...props}\n    />\n  ),\n) as SegmentComponent['Content'];\n\nSegment.displayName = 'Segment';\nSegment.List.displayName = 'Segment.List';\nSegment.Content.displayName = 'Segment.Content';\nSegment.Item.displayName = 'Segment.Item';\n\nexport { Segment };\nexport type {\n  SegmentComponent,\n  SegmentRootProps,\n  SegmentItemProps,\n  SegmentContentProps,\n  SegmentListProps,\n};\n"]}

package/dist/chunk-QH23RO3C.mjs

@@ -0,0 +1,137 @@
+import { ChevronLeft, ChevronRight } from './chunk-LZWKMQJL.mjs';
+import { cn } from '@exem-ui/core/utils';
+import { useState } from 'react';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function DatePickerChevron({ orientation }) {
+  if (orientation === "left") {
+    return /* @__PURE__ */ jsx(ChevronLeft, { type: "regular", className: "size-5" });
+  }
+  return /* @__PURE__ */ jsx(ChevronRight, { type: "regular", className: "size-5" });
+}
+function DatePickerDayButton({
+  day,
+  modifiers,
+  children,
+  className,
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ jsxs("button", { className: cn(className, "relative"), ...buttonProps, children: [
+    children,
+    modifiers.today && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-[3px] left-1/2 size-1 -translate-x-1/2 rounded-full",
+          modifiers.selected ? "bg-text-inverse" : "bg-icon-critical"
+        )
+      }
+    )
+  ] });
+}
+function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
+  const dayPickerProps = { ...rest, mode: type };
+  const defaultClassNames = getDefaultClassNames();
+  const [month, setMonth] = useState(
+    dayPickerProps.month ?? dayPickerProps.defaultMonth ?? /* @__PURE__ */ new Date()
+  );
+  const rangeSelected = type === "range" ? rest.selected : void 0;
+  const isRangeComplete = rangeSelected?.from != null && rangeSelected?.to != null;
+  const handleMonthChange = (newMonth) => {
+    setMonth(newMonth);
+    dayPickerProps.onMonthChange?.(newMonth);
+  };
+  const handleDayClick = (day, modifiers, e) => {
+    if (modifiers.outside) {
+      setMonth(new Date(day.getFullYear(), day.getMonth()));
+    }
+    dayPickerProps.onDayClick?.(day, modifiers, e);
+  };
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      ...dayPickerProps,
+      month,
+      onMonthChange: handleMonthChange,
+      onDayClick: handleDayClick,
+      showOutsideDays,
+      formatters: {
+        formatCaption: (date) => {
+          const year = date.getFullYear();
+          const month2 = String(date.getMonth() + 1).padStart(2, "0");
+          return `${year}\uB144 ${month2}\uC6D4`;
+        },
+        formatWeekdayName: (date) => date.toLocaleDateString("en-US", { weekday: "short" }),
+        ...dayPickerProps.formatters
+      },
+      components: {
+        Chevron: DatePickerChevron,
+        DayButton: DatePickerDayButton,
+        ...dayPickerProps.components
+      },
+      classNames: {
+        root: cn(
+          defaultClassNames.root,
+          "rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium"
+        ),
+        months: cn(defaultClassNames.months, "relative"),
+        month: cn(defaultClassNames.month, "flex flex-col gap-2"),
+        month_caption: cn(defaultClassNames.month_caption, "flex h-7 items-center px-0.5"),
+        caption_label: "text-body-2 font-semibold text-text-primary",
+        nav: cn(defaultClassNames.nav, "absolute right-0 top-0 flex h-7 items-center gap-2"),
+        button_previous: cn(
+          defaultClassNames.button_previous,
+          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
+        ),
+        button_next: cn(
+          defaultClassNames.button_next,
+          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
+        ),
+        weekday: cn(
+          defaultClassNames.weekday,
+          "size-8 text-body-3 font-regular text-text-tertiary"
+        ),
+        month_grid: cn(
+          defaultClassNames.month_grid,
+          "border-separate border-spacing-x-0 border-spacing-y-1"
+        ),
+        week: cn(defaultClassNames.week, "overflow-hidden rounded-medium"),
+        day: cn(defaultClassNames.day, "size-8 text-body-2 font-medium text-text-secondary"),
+        day_button: cn(
+          defaultClassNames.day_button,
+          "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused"
+        ),
+        outside: "!text-text-disabled",
+        selected: cn(
+          "[&>button]:bg-solid-primary-default",
+          "[&>button]:text-text-inverse",
+          "[&>button]:border-0",
+          "[&>button]:hover:border-0"
+        ),
+        range_start: cn(
+          "rounded-none",
+          isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+        ),
+        range_end: cn(
+          "rounded-none",
+          isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+        ),
+        range_middle: cn(
+          "bg-elevation-elevation-2 rounded-none",
+          "[&>button]:!bg-transparent",
+          "[&>button]:!text-text-secondary"
+        ),
+        ...dayPickerProps.classNames
+      },
+      modifiersClassNames: {
+        today: "rdp-calendar-today",
+        ...dayPickerProps.modifiersClassNames
+      }
+    }
+  );
+}
+
+export { DatePicker };
+//# sourceMappingURL=chunk-QH23RO3C.mjs.map
+//# sourceMappingURL=chunk-QH23RO3C.mjs.map

package/dist/chunk-QH23RO3C.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/picker/DatePicker.tsx"],"names":["month"],"mappings":"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","file":"chunk-QH23RO3C.mjs","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport { type ComponentProps, useState } from 'react';\nimport { type DayButtonProps, DayPicker, getDefaultClassNames } from 'react-day-picker';\n\nimport { ChevronLeft, ChevronRight } from '../icon';\n\ntype DistributiveOmit<T, K extends string> = T extends unknown ? Omit<T, K> : never;\n\ntype DatePickerProps = DistributiveOmit<ComponentProps<typeof DayPicker>, 'mode'> & {\n  /** 날짜 선택 유형 */\n  type?: 'single' | 'range';\n};\n\nfunction DatePickerChevron({ orientation }: { orientation?: string }) {\n  if (orientation === 'left') {\n    return <ChevronLeft type=\"regular\" className=\"size-5\" />;\n  }\n  return <ChevronRight type=\"regular\" className=\"size-5\" />;\n}\n\nfunction DatePickerDayButton({\n  day,\n  modifiers,\n  children,\n  className,\n  ...buttonProps\n}: DayButtonProps) {\n  return (\n    <button className={cn(className, 'relative')} {...buttonProps}>\n      {children}\n      {modifiers.today && (\n        <span\n          className={cn(\n            'absolute bottom-[3px] left-1/2 size-1 -translate-x-1/2 rounded-full',\n            modifiers.selected ? 'bg-text-inverse' : 'bg-icon-critical',\n          )}\n        />\n      )}\n    </button>\n  );\n}\n\nfunction DatePicker({ type = 'single', showOutsideDays = true, ...rest }: DatePickerProps) {\n  const dayPickerProps = { ...rest, mode: type } as ComponentProps<typeof DayPicker>;\n  const defaultClassNames = getDefaultClassNames();\n  const [month, setMonth] = useState(\n    dayPickerProps.month ?? dayPickerProps.defaultMonth ?? new Date(),\n  );\n\n  const rangeSelected =\n    type === 'range' ? (rest as { selected?: { from?: Date; to?: Date } }).selected : undefined;\n  const isRangeComplete = rangeSelected?.from != null && rangeSelected?.to != null;\n\n  const handleMonthChange = (newMonth: Date) => {\n    setMonth(newMonth);\n    dayPickerProps.onMonthChange?.(newMonth);\n  };\n\n  const handleDayClick: ComponentProps<typeof DayPicker>['onDayClick'] = (day, modifiers, e) => {\n    if (modifiers.outside) {\n      setMonth(new Date(day.getFullYear(), day.getMonth()));\n    }\n    dayPickerProps.onDayClick?.(day, modifiers, e);\n  };\n\n  return (\n    <DayPicker\n      {...dayPickerProps}\n      month={month}\n      onMonthChange={handleMonthChange}\n      onDayClick={handleDayClick}\n      showOutsideDays={showOutsideDays}\n      formatters={{\n        formatCaption: (date) => {\n          const year = date.getFullYear();\n          const month = String(date.getMonth() + 1).padStart(2, '0');\n          return `${year}년 ${month}월`;\n        },\n        formatWeekdayName: (date) => date.toLocaleDateString('en-US', { weekday: 'short' }),\n        ...dayPickerProps.formatters,\n      }}\n      components={{\n        Chevron: DatePickerChevron,\n        DayButton: DatePickerDayButton,\n        ...dayPickerProps.components,\n      }}\n      classNames={{\n        root: cn(\n          defaultClassNames.root,\n          'rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium',\n        ),\n        months: cn(defaultClassNames.months, 'relative'),\n        month: cn(defaultClassNames.month, 'flex flex-col gap-2'),\n        month_caption: cn(defaultClassNames.month_caption, 'flex h-7 items-center px-0.5'),\n        caption_label: 'text-body-2 font-semibold text-text-primary',\n        nav: cn(defaultClassNames.nav, 'absolute right-0 top-0 flex h-7 items-center gap-2'),\n        button_previous: cn(\n          defaultClassNames.button_previous,\n          'flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2',\n        ),\n        button_next: cn(\n          defaultClassNames.button_next,\n          'flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2',\n        ),\n        weekday: cn(\n          defaultClassNames.weekday,\n          'size-8 text-body-3 font-regular text-text-tertiary',\n        ),\n        month_grid: cn(\n          defaultClassNames.month_grid,\n          'border-separate border-spacing-x-0 border-spacing-y-1',\n        ),\n        week: cn(defaultClassNames.week, 'overflow-hidden rounded-medium'),\n        day: cn(defaultClassNames.day, 'size-8 text-body-2 font-medium text-text-secondary'),\n        day_button: cn(\n          defaultClassNames.day_button,\n          'size-8 cursor-pointer rounded-full hover:border hover:border-border-focused',\n        ),\n        outside: '!text-text-disabled',\n        selected: cn(\n          '[&>button]:bg-solid-primary-default',\n          '[&>button]:text-text-inverse',\n          '[&>button]:border-0',\n          '[&>button]:hover:border-0',\n        ),\n        range_start: cn(\n          'rounded-none',\n          isRangeComplete &&\n            '[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]',\n        ),\n        range_end: cn(\n          'rounded-none',\n          isRangeComplete &&\n            '[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]',\n        ),\n        range_middle: cn(\n          'bg-elevation-elevation-2 rounded-none',\n          '[&>button]:!bg-transparent',\n          '[&>button]:!text-text-secondary',\n        ),\n        ...dayPickerProps.classNames,\n      }}\n      modifiersClassNames={{\n        today: 'rdp-calendar-today',\n        ...dayPickerProps.modifiersClassNames,\n      }}\n    />\n  );\n}\n\nexport { DatePicker };\nexport type { DatePickerProps };\n"]}

package/dist/chunk-REBHUF4L.js

@@ -0,0 +1,226 @@
+'use strict';
+
+var utils = require('@exem-ui/core/utils');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/button/Button.tsx
+var colorStyles = {
+  accent: {
+    contained: {
+      button: "bg-solid-accent-default hover:bg-solid-accent-hovered disabled:bg-solid-accent-disabled",
+      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
+      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+    },
+    outlined: {
+      button: "border border-border-accent hover:bg-elevation-accent disabled:border-border-accent-disabled",
+      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
+      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+    },
+    invisible: {
+      button: "hover:bg-elevation-accent",
+      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
+      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+    }
+  },
+  assistive: {
+    contained: {
+      button: "bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    }
+  },
+  critical: {
+    contained: {
+      button: "bg-solid-critical-default hover:bg-solid-critical-hovered disabled:bg-solid-critical-disabled",
+      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
+      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+    },
+    outlined: {
+      button: "border border-border-critical hover:bg-elevation-critical disabled:border-border-critical-disabled",
+      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
+      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+    },
+    invisible: {
+      button: "hover:bg-elevation-critical",
+      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
+      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+    }
+  },
+  inverse: {
+    contained: {
+      button: "bg-elevation-elevation-0 hover:bg-elevation-elevation-2 disabled:bg-elevation-elevation-2",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    }
+  },
+  primary: {
+    contained: {
+      button: "bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled",
+      icon: "text-icon-inverse group-disabled/button:text-icon-inverse",
+      text: "text-text-inverse group-disabled/button:text-text-inverse"
+    },
+    outlined: {
+      button: "border border-border-secondary hover:bg-elevation-elevation-2 disabled:border-border-secondary",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    },
+    invisible: {
+      button: "hover:bg-elevation-elevation-2",
+      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
+      text: "text-text-secondary group-disabled/button:text-text-disabled"
+    }
+  }
+};
+var buttonVariants = utils.cva(
+  "inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+  {
+    compoundVariants: [
+      // Primary 색상 조합
+      {
+        className: colorStyles.primary.contained.button,
+        color: "primary",
+        variant: "contained"
+      },
+      {
+        className: colorStyles.primary.outlined.button,
+        color: "primary",
+        variant: "outlined"
+      },
+      {
+        className: colorStyles.primary.invisible.button,
+        color: "primary",
+        variant: "invisible"
+      },
+      // Accent 색상 조합
+      {
+        className: colorStyles.accent.contained.button,
+        color: "accent",
+        variant: "contained"
+      },
+      {
+        className: colorStyles.accent.outlined.button,
+        color: "accent",
+        variant: "outlined"
+      },
+      {
+        className: colorStyles.accent.invisible.button,
+        color: "accent",
+        variant: "invisible"
+      },
+      // Critical 색상 조합
+      {
+        className: colorStyles.critical.contained.button,
+        color: "critical",
+        variant: "contained"
+      },
+      {
+        className: colorStyles.critical.outlined.button,
+        color: "critical",
+        variant: "outlined"
+      },
+      {
+        className: colorStyles.critical.invisible.button,
+        color: "critical",
+        variant: "invisible"
+      },
+      // Assistive 색상 조합 (contained만 지원)
+      {
+        className: colorStyles.assistive.contained.button,
+        color: "assistive",
+        variant: "contained"
+      },
+      // Inverse 색상 조합 (contained만 지원)
+      {
+        className: colorStyles.inverse.contained.button,
+        color: "inverse",
+        variant: "contained"
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      size: "medium",
+      variant: "contained"
+    },
+    variants: {
+      color: {
+        accent: "",
+        assistive: "",
+        critical: "",
+        inverse: "",
+        primary: ""
+      },
+      size: {
+        xsmall: "h-6 gap-0 px-1 text-body-3 font-medium",
+        small: "h-7 gap-0.5 px-1.5 text-body-2 font-medium",
+        medium: "h-8 gap-0.5 px-2 text-body-2 font-medium",
+        large: "h-10 gap-1 px-2.5 text-body-1 font-medium",
+        xlarge: "h-12 gap-1 px-3 text-title-2 font-medium"
+      },
+      variant: {
+        contained: "",
+        outlined: "bg-transparent",
+        invisible: "bg-transparent"
+      }
+    }
+  }
+);
+var IconSize = {
+  xsmall: "h-4 w-4",
+  small: "h-4 w-4",
+  medium: "h-4 w-4",
+  large: "h-5 w-5",
+  xlarge: "h-6 w-6"
+};
+var Button = react.forwardRef(
+  ({
+    className,
+    variant = "contained",
+    color = "primary",
+    size = "medium",
+    icon,
+    children,
+    ...props
+  }, ref) => {
+    const validColorStyle = color === "assistive" || color === "inverse" ? colorStyles[color].contained : colorStyles[color][variant];
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon && react.cloneElement(icon, {
+        className: utils.cn(
+          "shrink-0 [&>path]:fill-current",
+          validColorStyle.icon,
+          icon.props.className,
+          IconSize[size ?? "medium"]
+        )
+      }),
+      typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: utils.cn("truncate", size === "xlarge" ? "px-1" : "px-0.5", validColorStyle.text),
+          children
+        }
+      ) : children
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: utils.cn(
+          buttonVariants({
+            className,
+            color,
+            size,
+            variant
+          }),
+          "group/button"
+        ),
+        ref,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+exports.Button = Button;
+//# sourceMappingURL=chunk-REBHUF4L.js.map
+//# sourceMappingURL=chunk-REBHUF4L.js.map

package/dist/chunk-REBHUF4L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/Button.tsx"],"names":["cva","forwardRef","jsxs","Fragment","cloneElement","cn","jsx"],"mappings":";;;;;;;AAsBA,IAAM,WAAA,GAAc;AAAA,EAClB,MAAA,EAAQ;AAAA,IACN,SAAA,EAAW;AAAA,MACT,MAAA,EACE,yFAAA;AAAA,MACF,IAAA,EAAM,yEAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACR;AAAA,IACA,QAAA,EAAU;AAAA,MACR,MAAA,EACE,8FAAA;AAAA,MACF,IAAA,EAAM,kEAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACR;AAAA,IACA,SAAA,EAAW;AAAA,MACT,MAAA,EAAQ,2BAAA;AAAA,MACR,IAAA,EAAM,kEAAA;AAAA,MACN,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,SAAA,EAAW;AAAA,IACT,SAAA,EAAW;AAAA,MACT,MAAA,EACE,2FAAA;AAAA,MACF,IAAA,EAAM,8DAAA;AAAA,MACN,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAA,EAAW;AAAA,MACT,MAAA,EACE,+FAAA;AAAA,MACF,IAAA,EAAM,yEAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACR;AAAA,IACA,QAAA,EAAU;AAAA,MACR,MAAA,EACE,oGAAA;AAAA,MACF,IAAA,EAAM,sEAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACR;AAAA,IACA,SAAA,EAAW;AAAA,MACT,MAAA,EAAQ,6BAAA;AAAA,MACR,IAAA,EAAM,sEAAA;AAAA,MACN,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,SAAA,EAAW;AAAA,MACT,MAAA,EACE,2FAAA;AAAA,MACF,IAAA,EAAM,8DAAA;AAAA,MACN,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,SAAA,EAAW;AAAA,MACT,MAAA,EACE,4FAAA;AAAA,MACF,IAAA,EAAM,2DAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACR;AAAA,IACA,QAAA,EAAU;AAAA,MACR,MAAA,EACE,gGAAA;AAAA,MACF,IAAA,EAAM,8DAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACR;AAAA,IACA,SAAA,EAAW;AAAA,MACT,MAAA,EAAQ,gCAAA;AAAA,MACR,IAAA,EAAM,8DAAA;AAAA,MACN,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAEA,IAAM,cAAA,GAAiBA,SAAA;AAAA,EACrB,qMAAA;AAAA,EACA;AAAA,IACE,gBAAA,EAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,OAAA,CAAQ,SAAA,CAAU,MAAA;AAAA,QACzC,KAAA,EAAO,SAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,OAAA,CAAQ,QAAA,CAAS,MAAA;AAAA,QACxC,KAAA,EAAO,SAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,OAAA,CAAQ,SAAA,CAAU,MAAA;AAAA,QACzC,KAAA,EAAO,SAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA;AAAA,MAEA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,MAAA,CAAO,SAAA,CAAU,MAAA;AAAA,QACxC,KAAA,EAAO,QAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,MAAA,CAAO,QAAA,CAAS,MAAA;AAAA,QACvC,KAAA,EAAO,QAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,MAAA,CAAO,SAAA,CAAU,MAAA;AAAA,QACxC,KAAA,EAAO,QAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA;AAAA,MAEA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,QAAA,CAAS,SAAA,CAAU,MAAA;AAAA,QAC1C,KAAA,EAAO,UAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,QAAA,CAAS,QAAA,CAAS,MAAA;AAAA,QACzC,KAAA,EAAO,UAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,QAAA,CAAS,SAAA,CAAU,MAAA;AAAA,QAC1C,KAAA,EAAO,UAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA;AAAA,MAEA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,SAAA,CAAU,SAAA,CAAU,MAAA;AAAA,QAC3C,KAAA,EAAO,WAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA;AAAA,MAEA;AAAA,QACE,SAAA,EAAW,WAAA,CAAY,OAAA,CAAQ,SAAA,CAAU,MAAA;AAAA,QACzC,KAAA,EAAO,SAAA;AAAA,QACP,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,KAAA,EAAO,SAAA;AAAA,MACP,IAAA,EAAM,QAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,MAAA,EAAQ,EAAA;AAAA,QACR,SAAA,EAAW,EAAA;AAAA,QACX,QAAA,EAAU,EAAA;AAAA,QACV,OAAA,EAAS,EAAA;AAAA,QACT,OAAA,EAAS;AAAA,OACX;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,MAAA,EAAQ,wCAAA;AAAA,QACR,KAAA,EAAO,4CAAA;AAAA,QACP,MAAA,EAAQ,0CAAA;AAAA,QACR,KAAA,EAAO,2CAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW,EAAA;AAAA,QACX,QAAA,EAAU,gBAAA;AAAA,QACV,SAAA,EAAW;AAAA;AACb;AACF;AAEJ,CAAA;AAEA,IAAM,QAAA,GAAW;AAAA,EACf,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,SAAA;AAAA,EACP,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,SAAA;AAAA,EACP,MAAA,EAAQ;AACV,CAAA;AAEA,IAAM,MAAA,GAASC,gBAAA;AAAA,EACb,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA,GAAU,WAAA;AAAA,IACV,KAAA,GAAQ,SAAA;AAAA,IACR,IAAA,GAAO,QAAA;AAAA,IACP,IAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AAEH,IAAA,MAAM,eAAA,GACJ,KAAA,KAAU,WAAA,IAAe,KAAA,KAAU,SAAA,GAC/B,WAAA,CAAY,KAAK,CAAA,CAAE,SAAA,GACnB,WAAA,CAAY,KAAK,CAAA,CAAE,OAAO,CAAA;AAEhC,IAAA,MAAM,0BACJC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,MAAA,IAAA,IACCC,mBAAa,IAAA,EAAM;AAAA,QACjB,SAAA,EAAWC,QAAA;AAAA,UACT,gCAAA;AAAA,UACA,eAAA,CAAgB,IAAA;AAAA,UAChB,KAAK,KAAA,CAAM,SAAA;AAAA,UACX,QAAA,CAAS,QAAQ,QAAQ;AAAA;AAC3B,OACD,CAAA;AAAA,MACF,OAAO,aAAa,QAAA,mBACnBC,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAWD,SAAG,UAAA,EAAY,IAAA,KAAS,WAAW,MAAA,GAAS,QAAA,EAAU,gBAAgB,IAAI,CAAA;AAAA,UAEpF;AAAA;AAAA,OACH,GAEA;AAAA,KAAA,EAEJ,CAAA;AAGF,IAAA,uBACEC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWD,QAAA;AAAA,UACT,cAAA,CAAe;AAAA,YACb,SAAA;AAAA,YACA,KAAA;AAAA,YACA,IAAA;AAAA,YACA;AAAA,WACD,CAAA;AAAA,UACD;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-REBHUF4L.js","sourcesContent":["import { cn, cva, type VariantProps } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport { cloneElement, forwardRef } from 'react';\n\ntype ButtonColorVariantCombination =\n  | { color?: 'primary'; variant?: 'contained' | 'outlined' | 'invisible' }\n  | { color?: 'accent'; variant?: 'contained' | 'outlined' | 'invisible' }\n  | { color?: 'critical'; variant?: 'contained' | 'outlined' | 'invisible' }\n  | { color?: 'assistive'; variant?: 'contained' }\n  | { color?: 'inverse'; variant?: 'contained' };\n\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> &\n  ButtonColorVariantCombination & {\n    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n    icon?: React.ReactElement<{ className?: string }>;\n  };\n\ntype ButtonComponent = React.ForwardRefExoticComponent<\n  ButtonProps & React.RefAttributes<HTMLButtonElement>\n>;\n\nconst colorStyles = {\n  accent: {\n    contained: {\n      button:\n        'bg-solid-accent-default hover:bg-solid-accent-hovered disabled:bg-solid-accent-disabled',\n      icon: 'text-icon-static-light group-disabled/button:text-icon-inverse-disabled',\n      text: 'text-text-static-light group-disabled/button:text-text-inverse-disabled',\n    },\n    outlined: {\n      button:\n        'border border-border-accent hover:bg-elevation-accent disabled:border-border-accent-disabled',\n      icon: 'text-text-accent group-disabled/button:text-text-accent-disabled',\n      text: 'text-text-accent group-disabled/button:text-text-accent-disabled',\n    },\n    invisible: {\n      button: 'hover:bg-elevation-accent',\n      icon: 'text-text-accent group-disabled/button:text-text-accent-disabled',\n      text: 'text-text-accent group-disabled/button:text-text-accent-disabled',\n    },\n  },\n  assistive: {\n    contained: {\n      button:\n        'bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2',\n      icon: 'text-icon-secondary group-disabled/button:text-icon-disabled',\n      text: 'text-text-secondary group-disabled/button:text-text-disabled',\n    },\n  },\n  critical: {\n    contained: {\n      button:\n        'bg-solid-critical-default hover:bg-solid-critical-hovered disabled:bg-solid-critical-disabled',\n      icon: 'text-icon-static-light group-disabled/button:text-icon-inverse-disabled',\n      text: 'text-text-static-light group-disabled/button:text-text-inverse-disabled',\n    },\n    outlined: {\n      button:\n        'border border-border-critical hover:bg-elevation-critical disabled:border-border-critical-disabled',\n      icon: 'text-text-critical group-disabled/button:text-text-critical-disabled',\n      text: 'text-text-critical group-disabled/button:text-text-critical-disabled',\n    },\n    invisible: {\n      button: 'hover:bg-elevation-critical',\n      icon: 'text-text-critical group-disabled/button:text-text-critical-disabled',\n      text: 'text-text-critical group-disabled/button:text-text-critical-disabled',\n    },\n  },\n  inverse: {\n    contained: {\n      button:\n        'bg-elevation-elevation-0 hover:bg-elevation-elevation-2 disabled:bg-elevation-elevation-2',\n      icon: 'text-icon-secondary group-disabled/button:text-icon-disabled',\n      text: 'text-text-secondary group-disabled/button:text-text-disabled',\n    },\n  },\n  primary: {\n    contained: {\n      button:\n        'bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled',\n      icon: 'text-icon-inverse group-disabled/button:text-icon-inverse',\n      text: 'text-text-inverse group-disabled/button:text-text-inverse',\n    },\n    outlined: {\n      button:\n        'border border-border-secondary hover:bg-elevation-elevation-2 disabled:border-border-secondary',\n      icon: 'text-icon-secondary group-disabled/button:text-icon-disabled',\n      text: 'text-text-secondary group-disabled/button:text-text-disabled',\n    },\n    invisible: {\n      button: 'hover:bg-elevation-elevation-2',\n      icon: 'text-icon-secondary group-disabled/button:text-icon-disabled',\n      text: 'text-text-secondary group-disabled/button:text-text-disabled',\n    },\n  },\n};\n\nconst buttonVariants = cva(\n  'inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed',\n  {\n    compoundVariants: [\n      // Primary 색상 조합\n      {\n        className: colorStyles.primary.contained.button,\n        color: 'primary',\n        variant: 'contained',\n      },\n      {\n        className: colorStyles.primary.outlined.button,\n        color: 'primary',\n        variant: 'outlined',\n      },\n      {\n        className: colorStyles.primary.invisible.button,\n        color: 'primary',\n        variant: 'invisible',\n      },\n      // Accent 색상 조합\n      {\n        className: colorStyles.accent.contained.button,\n        color: 'accent',\n        variant: 'contained',\n      },\n      {\n        className: colorStyles.accent.outlined.button,\n        color: 'accent',\n        variant: 'outlined',\n      },\n      {\n        className: colorStyles.accent.invisible.button,\n        color: 'accent',\n        variant: 'invisible',\n      },\n      // Critical 색상 조합\n      {\n        className: colorStyles.critical.contained.button,\n        color: 'critical',\n        variant: 'contained',\n      },\n      {\n        className: colorStyles.critical.outlined.button,\n        color: 'critical',\n        variant: 'outlined',\n      },\n      {\n        className: colorStyles.critical.invisible.button,\n        color: 'critical',\n        variant: 'invisible',\n      },\n      // Assistive 색상 조합 (contained만 지원)\n      {\n        className: colorStyles.assistive.contained.button,\n        color: 'assistive',\n        variant: 'contained',\n      },\n      // Inverse 색상 조합 (contained만 지원)\n      {\n        className: colorStyles.inverse.contained.button,\n        color: 'inverse',\n        variant: 'contained',\n      },\n    ],\n    defaultVariants: {\n      color: 'primary',\n      size: 'medium',\n      variant: 'contained',\n    },\n    variants: {\n      color: {\n        accent: '',\n        assistive: '',\n        critical: '',\n        inverse: '',\n        primary: '',\n      },\n      size: {\n        xsmall: 'h-6 gap-0 px-1 text-body-3 font-medium',\n        small: 'h-7 gap-0.5 px-1.5 text-body-2 font-medium',\n        medium: 'h-8 gap-0.5 px-2 text-body-2 font-medium',\n        large: 'h-10 gap-1 px-2.5 text-body-1 font-medium',\n        xlarge: 'h-12 gap-1 px-3 text-title-2 font-medium',\n      },\n      variant: {\n        contained: '',\n        outlined: 'bg-transparent',\n        invisible: 'bg-transparent',\n      },\n    },\n  },\n);\n\nconst IconSize = {\n  xsmall: 'h-4 w-4',\n  small: 'h-4 w-4',\n  medium: 'h-4 w-4',\n  large: 'h-5 w-5',\n  xlarge: 'h-6 w-6',\n};\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = 'contained',\n      color = 'primary',\n      size = 'medium',\n      icon,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // 현재 조합의 색상 스타일 가져오기 -> assistive/inverse는 contained만 지원\n    const validColorStyle =\n      color === 'assistive' || color === 'inverse'\n        ? colorStyles[color].contained\n        : colorStyles[color][variant];\n\n    const content = (\n      <>\n        {icon &&\n          cloneElement(icon, {\n            className: cn(\n              'shrink-0 [&>path]:fill-current',\n              validColorStyle.icon,\n              icon.props.className,\n              IconSize[size ?? 'medium'],\n            ),\n          })}\n        {typeof children === 'string' ? (\n          <span\n            className={cn('truncate', size === 'xlarge' ? 'px-1' : 'px-0.5', validColorStyle.text)}\n          >\n            {children}\n          </span>\n        ) : (\n          children\n        )}\n      </>\n    );\n\n    return (\n      <button\n        className={cn(\n          buttonVariants({\n            className,\n            color,\n            size,\n            variant,\n          }),\n          'group/button',\n        )}\n        ref={ref}\n        {...props}\n      >\n        {content}\n      </button>\n    );\n  },\n) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport { Button };\nexport type { ButtonComponent, ButtonProps };\n"]}