@tipp/ui 1.6.3 → 1.6.4

package/dist/molecules/index.js

@@ -1,7 +1,7 @@
 import "../chunk-FLMSBAPO.js";
 import {
   DatePickerButton
-} from "../chunk-3HBRMWRE.js";
+} from "../chunk-W7C6PIK6.js";
 import {
   DatePicker
 } from "../chunk-GGYG5EKG.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "private": false,
   "type": "module",
   "exports": {
@@ -30,6 +30,7 @@
     "@radix-ui/themes": "^3.1.4",
     "@tanstack/react-table": "^8.19.3",
     "@tipp/biz-utils": "^1.1.1",
+    "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "lodash-es": "^4.17.21",
     "react": "^18.3.1",

package/src/molecules/date-picker/date-picker-button.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { format } from 'date-fns';
-import { merge } from 'lodash-es';
+import { clsx } from 'clsx';
 import type { ButtonProps } from '../../atoms';
 import { Box, Button, Flex } from '../../atoms';
 import { CalendarIcon } from '../../icon';
@@ -21,23 +21,8 @@ export function DatePickerButton(
   const buttonProps = useMemo(() => {
     const variant: ButtonProps['variant'] = 'outline';
     const color: ButtonProps['color'] = 'gray';
-    const style: ButtonProps['style'] = {
-      width: '100%',
-    };
-
-    const disabledProps: ButtonProps = {
-      style: {
-        background: 'var(--gray-a2)',
-        color: 'var(--gray-9)',
-        boxShadow: 'inset 0 0 0 1px var(--accent-a6)',
-      },
-      variant: 'surface',
-    };
-
-    const baseButtonProps = { size, color, style, variant };
-
-    return merge(baseButtonProps, disabled ? disabledProps : {});
-  }, [disabled, size]);
+    return { size, color, variant };
+  }, [size]);
 
   const selectFormat = useMemo(() => {
     if (formatProps) return formatProps;
@@ -45,11 +30,15 @@ export function DatePickerButton(
       date ? format(date, 'yyyy년 MM월 dd일') : placeholder;
   }, [formatProps, placeholder]);
 
+  const className = useMemo(() => {
+    return clsx('date-picker-button', disabled && 'disabled');
+  }, [disabled]);
+
   return (
     <Box p="0" width="100%">
       <DatePicker
         customInput={
-          <Button type="button" {...buttonProps}>
+          <Button className={className} type="button" {...buttonProps}>
             <Flex align="center" gap="3" justify="between" width="100%">
               {rest.selected ? selectFormat(rest.selected) : placeholder}
               <CalendarIcon />