@tipp/ui 1.6.2 → 1.6.3

package/dist/molecules/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "private": false,
   "type": "module",
   "exports": {
@@ -58,8 +58,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 { merge } from 'lodash-es';
 import type { ButtonProps } from '../../atoms';
 import { Box, Button, Flex } from '../../atoms';
 import { CalendarIcon } from '../../icon';
@@ -17,15 +18,26 @@ 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 = useMemo(() => {
+    const variant: ButtonProps['variant'] = 'outline';
+    const color: ButtonProps['color'] = 'gray';
+    const style: ButtonProps['style'] = {
+      width: '100%',
+    };
 
-  const buttonProps = { size, color, style, variant };
+    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]);
 
   const selectFormat = useMemo(() => {
     if (formatProps) return formatProps;