@tipp/ui 1.6.2 → 1.6.4

package/dist/molecules/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.6.2",
+  "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",
@@ -58,8 +59,8 @@
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/typescript-config": "1.0.1",
-    "@tipp/eslint-config": "1.0.1"
+    "@tipp/eslint-config": "1.0.1",
+    "@tipp/typescript-config": "1.0.1"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",

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

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { format } from 'date-fns';
+import { clsx } from 'clsx';
 import type { ButtonProps } from '../../atoms';
 import { Box, Button, Flex } from '../../atoms';
 import { CalendarIcon } from '../../icon';
@@ -17,15 +18,11 @@ export function DatePickerButton(
 ): React.ReactElement {
   const { size, placeholder, format: formatProps, disabled, ...rest } = props;
 
-  const variant: ButtonProps['variant'] = disabled ? 'surface' : 'outline';
-  const color: ButtonProps['color'] = 'gray';
-  const style: ButtonProps['style'] = {
-    color: disabled ? 'var(--gray-9)' : undefined,
-    width: '100%',
-    backgroundColor: disabled ? 'var(--gray-a11)' : undefined,
-  };
-
-  const buttonProps = { size, color, style, variant };
+  const buttonProps = useMemo(() => {
+    const variant: ButtonProps['variant'] = 'outline';
+    const color: ButtonProps['color'] = 'gray';
+    return { size, color, variant };
+  }, [size]);
 
   const selectFormat = useMemo(() => {
     if (formatProps) return formatProps;
@@ -33,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 />