@exem-ui/react 0.3.4-next.20260702065311 → 0.3.4-next.20260713005253

package/dist/flat/index.js

@@ -1,33 +1,33 @@
 'use strict';
 
-var chunkWYZY23QK_js = require('../chunk-WYZY23QK.js');
+var chunkYJPVY7DM_js = require('../chunk-YJPVY7DM.js');
 require('../chunk-T5TAXI73.js');
 
 
 
 Object.defineProperty(exports, "ConditionalTooltip", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.ConditionalTooltip; }
+  get: function () { return chunkYJPVY7DM_js.ConditionalTooltip; }
 });
 Object.defineProperty(exports, "FlatColorPalette", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.FlatColorPalette; }
+  get: function () { return chunkYJPVY7DM_js.FlatColorPalette; }
 });
 Object.defineProperty(exports, "FlatSegment", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.FlatSegment; }
+  get: function () { return chunkYJPVY7DM_js.FlatSegment; }
 });
 Object.defineProperty(exports, "FlatSelect", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.FlatSelect; }
+  get: function () { return chunkYJPVY7DM_js.FlatSelect; }
 });
 Object.defineProperty(exports, "FlatTabs", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.FlatTabs; }
+  get: function () { return chunkYJPVY7DM_js.FlatTabs; }
 });
 Object.defineProperty(exports, "FlatTooltip", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.FlatTooltip; }
+  get: function () { return chunkYJPVY7DM_js.FlatTooltip; }
 });
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/flat/index.mjs

@@ -1,4 +1,4 @@
-export { ConditionalTooltip, FlatColorPalette, FlatSegment, FlatSelect, FlatTabs, FlatTooltip } from '../chunk-DHEC52AV.mjs';
+export { ConditionalTooltip, FlatColorPalette, FlatSegment, FlatSelect, FlatTabs, FlatTooltip } from '../chunk-HCPEPSQY.mjs';
 import '../chunk-MSA6TY4M.mjs';
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.d.mts

@@ -2,8 +2,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from '@exem-ui/core/utils';
 import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
-import { C as ColorPaletteColor, a as ConditionalTooltip, V as Variant, S as Size$1, I as Icon } from './FlatTooltip-D3Q_tsYX.mjs';
-export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-D3Q_tsYX.mjs';
+import { C as ColorPaletteColor, a as ConditionalTooltip, V as Variant, S as Size$1, I as Icon } from './FlatTooltip-BQHCh0EB.mjs';
+export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-BQHCh0EB.mjs';
 import { I as IconBaseProps } from './types-xnO0gkCW.mjs';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from '@exem-ui/core/utils';
 import * as React$1 from 'react';
 import React__default, { ComponentProps } from 'react';
-import { C as ColorPaletteColor, a as ConditionalTooltip, V as Variant, S as Size$1, I as Icon } from './FlatTooltip-D3Q_tsYX.js';
-export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-D3Q_tsYX.js';
+import { C as ColorPaletteColor, a as ConditionalTooltip, V as Variant, S as Size$1, I as Icon } from './FlatTooltip-BQHCh0EB.js';
+export { J as ColorPalette, K as ColorPaletteColors, G as ColorPaletteProps, H as ColorPaletteSwatchProps, L as DEFAULT_COLOR, r as Segment, s as SegmentComponent, t as SegmentContentProps, u as SegmentItemProps, v as SegmentListProps, w as SegmentRootProps, g as Select, h as SelectBoxProps, i as SelectComponent, j as SelectDescriptionProps, k as SelectEmptyProps, l as SelectGroupProps, m as SelectItemProps, n as SelectLabelProps, o as SelectListProps, p as SelectRootProps, q as SelectTriggerProps, T as Tabs, b as TabsComponent, c as TabsContentProps, d as TabsListProps, e as TabsRootProps, f as TabsTriggerProps, x as Tooltip, y as TooltipComponent, z as TooltipContentProps, A as TooltipDescriptionProps, B as TooltipProviderProps, D as TooltipRootProps, E as TooltipTitleProps, F as TooltipTriggerProps, M as getColorPaletteColor, N as isInPalette } from './FlatTooltip-BQHCh0EB.js';
 import { I as IconBaseProps } from './types-xnO0gkCW.js';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkWYZY23QK_js = require('./chunk-WYZY23QK.js');
+var chunkYJPVY7DM_js = require('./chunk-YJPVY7DM.js');
 var chunkT5TAXI73_js = require('./chunk-T5TAXI73.js');
 var utils = require('@exem-ui/core/utils');
 var React = require('react');
@@ -627,7 +627,7 @@ var IconButton = React.forwardRef(
       size,
       ...props
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(chunkWYZY23QK_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, ...buttonProps }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkYJPVY7DM_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, ...buttonProps }) });
   }
 );
 IconButton.displayName = "IconButton";
@@ -671,7 +671,7 @@ var ButtonGroup = React.forwardRef(
               onClick: item.onClick,
               size
             };
-            return /* @__PURE__ */ jsxRuntime.jsx(chunkWYZY23QK_js.ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...iconBaseProps, variant: "assistive" }) : /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
+            return /* @__PURE__ */ jsxRuntime.jsx(chunkYJPVY7DM_js.ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...iconBaseProps, variant: "assistive" }) : /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
           }
           const buttonBaseProps = {
             className: utils.cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
@@ -679,7 +679,7 @@ var ButtonGroup = React.forwardRef(
             onClick: item.onClick,
             size
           };
-          return /* @__PURE__ */ jsxRuntime.jsx(chunkWYZY23QK_js.ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, variant: "assistive", children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(chunkYJPVY7DM_js.ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, variant: "assistive", children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
         })
       }
     );
@@ -1090,12 +1090,12 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
 }
 var dropdownVariants = {
   content: utils.cn(
-    chunkWYZY23QK_js.overlayListVariants.content,
+    chunkYJPVY7DM_js.overlayListVariants.content,
     "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"
   ),
-  viewport: chunkWYZY23QK_js.overlayListVariants.viewport,
-  item: (props) => utils.cn(chunkWYZY23QK_js.overlayListVariants.item(props), "focus:bg-elevation-elevation-2"),
-  slotSize: chunkWYZY23QK_js.overlayListVariants.slotSize,
+  viewport: chunkYJPVY7DM_js.overlayListVariants.viewport,
+  item: (props) => utils.cn(chunkYJPVY7DM_js.overlayListVariants.item(props), "focus:bg-elevation-elevation-2"),
+  slotSize: chunkYJPVY7DM_js.overlayListVariants.slotSize,
   separator: utils.cn("my-0.5 h-px bg-border-primary"),
   label: utils.cva("px-2 font-medium text-text-secondary", {
     defaultVariants: { size: "medium" },
@@ -1146,9 +1146,9 @@ Dropdown.Item = React.forwardRef(({ className, children, leftSlot, rightSlot, si
       className: utils.cn(dropdownVariants.item({ size }), className),
       ...props,
       children: [
-        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkWYZY23QK_js.overlayListVariants.slotSize({ size }), children: leftSlot }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(chunkWYZY23QK_js.overlayListVariants.itemText({ size }), "min-w-0 flex-1 truncate"), children }),
-        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkWYZY23QK_js.overlayListVariants.slotSize({ size }), children: rightSlot })
+        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkYJPVY7DM_js.overlayListVariants.slotSize({ size }), children: leftSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(chunkYJPVY7DM_js.overlayListVariants.itemText({ size }), "min-w-0 flex-1 truncate"), children }),
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkYJPVY7DM_js.overlayListVariants.slotSize({ size }), children: rightSlot })
       ]
     }
   );
@@ -1193,15 +1193,16 @@ var useTextAreaContext = () => {
   return context;
 };
 var textAreaVariants = {
-  container: chunkWYZY23QK_js.commonInputVariants.container,
-  label: chunkWYZY23QK_js.commonInputVariants.label,
+  container: chunkYJPVY7DM_js.commonInputVariants.container,
+  label: chunkYJPVY7DM_js.commonInputVariants.label,
   field: utils.cva(
     "scrollbar-overlay block w-full resize-none rounded-medium border transition-colors focus:outline-none",
     {
       variants: {
         variant: {
           fill: "border-transparent bg-elevation-elevation-2",
-          line: "border-border-primary"
+          line: "border-border-primary",
+          lineBackground: "border-border-primary bg-background-primary"
         },
         size: {
           xsmall: "min-h-[60px] px-1.5 py-[3.5px] text-body-3",
@@ -1226,7 +1227,10 @@ var textAreaVariants = {
         },
         { variant: "line", state: "focused", class: "border-border-focused" },
         { variant: "line", state: "error", class: "border-border-critical" },
-        { variant: "line", state: "disabled", class: "border-border-primary" }
+        { variant: "line", state: "disabled", class: "border-border-primary" },
+        { variant: "lineBackground", state: "focused", class: "border-border-focused" },
+        { variant: "lineBackground", state: "error", class: "border-border-critical" },
+        { variant: "lineBackground", state: "disabled", class: "border-border-primary" }
       ],
       defaultVariants: { variant: "fill", size: "medium", state: "default" }
     }
@@ -1244,7 +1248,7 @@ var textAreaVariants = {
     },
     defaultVariants: { size: "medium" }
   }),
-  description: chunkWYZY23QK_js.commonInputVariants.description,
+  description: chunkYJPVY7DM_js.commonInputVariants.description,
   counter: utils.cva("text-nowrap font-regular", {
     variants: {
       disabled: {
@@ -1274,7 +1278,7 @@ var TextArea = React__namespace.forwardRef(
       TextAreaContext.Provider,
       {
         value: { variant, size, error, disabled, id, value, maxLength, onChange },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(textAreaVariants.container, className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextArea.Field, { ...restTextAreaProps }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(textAreaVariants.container(), className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextArea.Field, { ...restTextAreaProps }) })
       }
     );
   }
@@ -1371,15 +1375,16 @@ var useTextFieldContext = () => {
   return context;
 };
 var textFieldVariants = {
-  container: chunkWYZY23QK_js.commonInputVariants.container,
-  label: chunkWYZY23QK_js.commonInputVariants.label,
+  container: chunkYJPVY7DM_js.commonInputVariants.container,
+  label: chunkYJPVY7DM_js.commonInputVariants.label,
   wrapper: utils.cva(
     "flex w-full flex-row items-center rounded-medium border transition-colors focus-within:border-border-focused focus-within:outline-none",
     {
       variants: {
         variant: {
           fill: "border-transparent bg-elevation-elevation-2",
-          line: "border-border-primary"
+          line: "border-border-primary",
+          lineBackground: "border-border-primary bg-background-primary"
         },
         size: {
           xsmall: "h-6 gap-0 px-1",
@@ -1401,7 +1406,9 @@ var textFieldVariants = {
           class: "bg-elevation-elevation-2 border-transparent"
         },
         { variant: "line", state: "error", class: "border-border-critical" },
-        { variant: "line", state: "disabled", class: "border-border-primary" }
+        { variant: "line", state: "disabled", class: "border-border-primary" },
+        { variant: "lineBackground", state: "error", class: "border-border-critical" },
+        { variant: "lineBackground", state: "disabled", class: "border-border-primary" }
       ],
       defaultVariants: { variant: "fill", size: "medium", state: "default" }
     }
@@ -1494,7 +1501,7 @@ var TextField = React.forwardRef(
   }, ref) => {
     const uniqueId = React.useId();
     const id = providedId || `text-field-${uniqueId}`;
-    return /* @__PURE__ */ jsxRuntime.jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(textFieldVariants.container, className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextField.Input, { ...inputProps }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(textFieldVariants.container(), className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextField.Input, { ...inputProps }) }) });
   }
 );
 TextField.Label = React.forwardRef(
@@ -1707,7 +1714,7 @@ Modal.Content = React.forwardRef(
           ref,
           className: utils.cn(
             // 공통 스타일
-            "fixed z-50 flex flex-col rounded-strong border border-border-primary bg-elevation-elevation-0 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "fixed z-50 flex flex-col rounded-strong border border-border-primary bg-background-primary duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             // fullsize일 때
             isFullSize ? "inset-0 m-10" : (
               // 일반 모달일 때
@@ -1953,13 +1960,13 @@ var SheetResizableBox = ({ side, options, children }) => {
       onResizeStart: () => setResizing(true),
       onResizeStop: handleResizeStop,
       handleComponent,
-      className: "flex min-h-0 flex-col bg-elevation-elevation-0 shadow-strong",
+      className: "flex min-h-0 flex-col bg-background-primary shadow-strong",
       children
     }
   );
 };
 var SHEET_CONTENT_BASE = "fixed z-50 data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
-var SHEET_CONTENT_BOX = "flex flex-col border-border-primary bg-elevation-elevation-0 shadow-strong";
+var SHEET_CONTENT_BOX = "flex flex-col border-border-primary bg-background-primary shadow-strong";
 var SHEET_SIDE_CLASSES = {
   right: "inset-y-0 right-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
   left: "inset-y-0 left-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
@@ -2716,43 +2723,43 @@ var buttonize = (fn) => {
 
 Object.defineProperty(exports, "ColorPalette", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.ColorPalette; }
+  get: function () { return chunkYJPVY7DM_js.ColorPalette; }
 });
 Object.defineProperty(exports, "ColorPaletteColors", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.ColorPaletteColors; }
+  get: function () { return chunkYJPVY7DM_js.ColorPaletteColors; }
 });
 Object.defineProperty(exports, "DEFAULT_COLOR", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.DEFAULT_COLOR; }
+  get: function () { return chunkYJPVY7DM_js.DEFAULT_COLOR; }
 });
 Object.defineProperty(exports, "Segment", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.Segment; }
+  get: function () { return chunkYJPVY7DM_js.Segment; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.Select; }
+  get: function () { return chunkYJPVY7DM_js.Select; }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.Tabs; }
+  get: function () { return chunkYJPVY7DM_js.Tabs; }
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.Tooltip; }
+  get: function () { return chunkYJPVY7DM_js.Tooltip; }
 });
 Object.defineProperty(exports, "colorPaletteColorClasses", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.colorPaletteColorClasses; }
+  get: function () { return chunkYJPVY7DM_js.colorPaletteColorClasses; }
 });
 Object.defineProperty(exports, "getColorPaletteColor", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.getColorPaletteColor; }
+  get: function () { return chunkYJPVY7DM_js.getColorPaletteColor; }
 });
 Object.defineProperty(exports, "isInPalette", {
   enumerable: true,
-  get: function () { return chunkWYZY23QK_js.isInPalette; }
+  get: function () { return chunkYJPVY7DM_js.isInPalette; }
 });
 exports.Avatar = Avatar;
 exports.Badge = Badge;