@shipfox/react-ui 0.11.0 → 0.13.0

package/.turbo/turbo-build.log

@@ -1,19 +1,19 @@
  WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.11.0 build /runner/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.13.0 build /runner/_work/tooling/tooling/libs/react/ui
 > swc && pnpm run build:css
 
-Successfully compiled: 123 files with swc (685.7ms)
+Successfully compiled: 136 files with swc (375.92ms)
  WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.11.0 build:css /runner/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.13.0 build:css /runner/_work/tooling/tooling/libs/react/ui
 > vite build --config vite.css.config.ts && rm -f dist/css-entry.js dist/css-entry.js.map
 
-vite v7.2.4 building client environment for production...
+vite v7.2.7 building client environment for production...
 transforming...
 ✓ 2 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/styles.css    87.48 kB │ gzip: 13.97 kB
+dist/styles.css    92.31 kB │ gzip: 14.56 kB
 dist/css-entry.js   0.00 kB │ gzip:  0.02 kB
-✓ built in 2.01s
+✓ built in 632ms

package/.turbo/turbo-check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.11.0 check /runner/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.13.0 check /runner/_work/tooling/tooling/libs/react/ui
 > biome-check --fix
 
-Checked 142 files in 453ms. No fixes applied.
+Checked 155 files in 283ms. No fixes applied.

package/.turbo/turbo-type.log

@@ -1,5 +1,5 @@
  WARN  Issue while reading "/runner/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.11.0 type /runner/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.13.0 type /runner/_work/tooling/tooling/libs/react/ui
 > tsc-emit
 

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @shipfox/react-ui
 
+## 0.13.0
+
+### Minor Changes
+
+- 45a8a61: Add Tabs component
+
+## 0.12.0
+
+### Minor Changes
+
+- 5da4917: Add Date Picker component
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/components/badge/index.d.ts

@@ -1,5 +1,5 @@
-export { Badge, type BadgeProps, type BadgeVariant, badgeVariants } from './badge';
-export { IconBadge, type IconBadgeProps, type IconBadgeVariant } from './icon-badge';
-export { StatusBadge, type StatusBadgeProps } from './status-badge';
-export { UserBadge, type UserBadgeProps } from './user-badge';
+export * from './badge';
+export * from './icon-badge';
+export * from './status-badge';
+export * from './user-badge';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjF,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,gBAAgB,EAAC,MAAM,cAAc,CAAC;AACnF,OAAO,EAAC,WAAW,EAAE,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}

package/dist/components/badge/index.js

@@ -1,6 +1,6 @@
-export { Badge, badgeVariants } from './badge.js';
-export { IconBadge } from './icon-badge.js';
-export { StatusBadge } from './status-badge.js';
-export { UserBadge } from './user-badge.js';
+export * from './badge.js';
+export * from './icon-badge.js';
+export * from './status-badge.js';
+export * from './user-badge.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/badge/index.ts"],"sourcesContent":["export {Badge, type BadgeProps, type BadgeVariant, badgeVariants} from './badge';\nexport {IconBadge, type IconBadgeProps, type IconBadgeVariant} from './icon-badge';\nexport {StatusBadge, type StatusBadgeProps} from './status-badge';\nexport {UserBadge, type UserBadgeProps} from './user-badge';\n"],"names":["Badge","badgeVariants","IconBadge","StatusBadge","UserBadge"],"mappings":"AAAA,SAAQA,KAAK,EAAsCC,aAAa,QAAO,UAAU;AACjF,SAAQC,SAAS,QAAmD,eAAe;AACnF,SAAQC,WAAW,QAA8B,iBAAiB;AAClE,SAAQC,SAAS,QAA4B,eAAe"}
+{"version":3,"sources":["../../../src/components/badge/index.ts"],"sourcesContent":["export * from './badge';\nexport * from './icon-badge';\nexport * from './status-badge';\nexport * from './user-badge';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,eAAe"}

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react';
+import { DayPicker } from 'react-day-picker';
+export type CalendarProps = ComponentProps<typeof DayPicker>;
+export declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/calendar/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAG3C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAE7D,wBAAgB,QAAQ,CAAC,EAAC,SAAS,EAAE,UAAU,EAAE,eAAsB,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,2CAkFhG"}

package/dist/components/calendar/calendar.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../../components/icon/index.js';
+import { DayPicker } from 'react-day-picker';
+import { cn } from '../../utils/cn.js';
+export function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+    return /*#__PURE__*/ _jsx(DayPicker, {
+        showOutsideDays: showOutsideDays,
+        className: cn('p-16 transition-colors', className),
+        classNames: {
+            months: 'flex flex-col sm:flex-row gap-24',
+            month: 'space-y-16 relative',
+            month_caption: 'flex items-center justify-center mb-8 px-4 relative h-32',
+            caption_label: 'text-sm font-medium text-foreground-neutral-base',
+            nav: 'flex items-center gap-4 fixed left-0 top-16 w-full z-10',
+            button_previous: cn('size-32 bg-transparent p-0 absolute left-16 top-0', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-base', 'hover:bg-background-button-transparent-hover', 'active:bg-background-button-transparent-pressed', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
+            button_next: cn('size-32 bg-transparent p-0 absolute right-16 top-0', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-base', 'hover:bg-background-button-transparent-hover', 'active:bg-background-button-transparent-pressed', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
+            month_grid: 'w-full border-collapse mt-8',
+            weekdays: 'flex mb-8',
+            weekday: 'text-foreground-neutral-subtle text-xs font-medium w-36 h-32 flex items-center justify-center',
+            week: 'flex mt-4',
+            day: cn('relative text-center size-36 p-0 text-sm font-normal [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', '[&:last-child[data-selected=true]_button]:rounded-r-6', props.showWeekNumber ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-6' : '[&:first-child[data-selected=true]_button]:rounded-l-6'),
+            day_button: cn('size-36 p-0 text-sm font-normal rounded-6', 'inline-flex items-center justify-center', 'hover:bg-background-button-transparent-hover', 'focus-visible:shadow-border-interactive-with-active', 'transition-colors outline-none', 'aria-selected:opacity-100'),
+            range_start: 'day-range-start rounded-6',
+            range_end: 'day-range-end rounded-6',
+            selected: cn('bg-foreground-highlight-interactive/80 !text-foreground-neutral-base font-medium rounded-6', 'hover:bg-foreground-highlight-interactive-hover/80', 'focus:bg-foreground-highlight-interactive/80'),
+            today: cn('bg-background-field-base text-foreground-neutral-base font-medium rounded-6', 'border border-border-neutral-base'),
+            outside: 'day-outside text-foreground-neutral-muted',
+            disabled: 'text-foreground-neutral-disabled opacity-30 cursor-not-allowed',
+            range_middle: cn('aria-selected:bg-foreground-highlight-interactive/10 aria-selected:text-foreground-neutral-base', 'rounded-none', 'first:rounded-l-6 first:rounded-r-none', 'last:rounded-r-6 last:rounded-l-none'),
+            hidden: 'invisible',
+            ...classNames
+        },
+        components: {
+            Chevron: ({ orientation })=>{
+                const iconName = orientation === 'left' ? 'arrowLeftSLine' : 'arrowRightSLine';
+                return /*#__PURE__*/ _jsx(Icon, {
+                    name: iconName,
+                    className: "size-20"
+                });
+            }
+        },
+        ...props
+    });
+}
+
+//# sourceMappingURL=calendar.js.map

package/dist/components/calendar/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/calendar/calendar.tsx"],"sourcesContent":["import {Icon} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {DayPicker} from 'react-day-picker';\nimport {cn} from 'utils/cn';\n\nexport type CalendarProps = ComponentProps<typeof DayPicker>;\n\nexport function Calendar({className, classNames, showOutsideDays = true, ...props}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn('p-16 transition-colors', className)}\n      classNames={{\n        months: 'flex flex-col sm:flex-row gap-24',\n        month: 'space-y-16 relative',\n        month_caption: 'flex items-center justify-center mb-8 px-4 relative h-32',\n        caption_label: 'text-sm font-medium text-foreground-neutral-base',\n        nav: 'flex items-center gap-4 fixed left-0 top-16 w-full z-10',\n        button_previous: cn(\n          'size-32 bg-transparent p-0 absolute left-16 top-0',\n          'inline-flex items-center justify-center rounded-6',\n          'text-foreground-neutral-base',\n          'hover:bg-background-button-transparent-hover',\n          'active:bg-background-button-transparent-pressed',\n          'transition-colors outline-none',\n          'focus-visible:shadow-border-interactive-with-active',\n          'disabled:pointer-events-none disabled:opacity-50',\n        ),\n        button_next: cn(\n          'size-32 bg-transparent p-0 absolute right-16 top-0',\n          'inline-flex items-center justify-center rounded-6',\n          'text-foreground-neutral-base',\n          'hover:bg-background-button-transparent-hover',\n          'active:bg-background-button-transparent-pressed',\n          'transition-colors outline-none',\n          'focus-visible:shadow-border-interactive-with-active',\n          'disabled:pointer-events-none disabled:opacity-50',\n        ),\n        month_grid: 'w-full border-collapse mt-8',\n        weekdays: 'flex mb-8',\n        weekday:\n          'text-foreground-neutral-subtle text-xs font-medium w-36 h-32 flex items-center justify-center',\n        week: 'flex mt-4',\n        day: cn(\n          'relative text-center size-36 p-0 text-sm font-normal [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',\n          '[&:last-child[data-selected=true]_button]:rounded-r-6',\n          props.showWeekNumber\n            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-6'\n            : '[&:first-child[data-selected=true]_button]:rounded-l-6',\n        ),\n        day_button: cn(\n          'size-36 p-0 text-sm font-normal rounded-6',\n          'inline-flex items-center justify-center',\n          'hover:bg-background-button-transparent-hover',\n          'focus-visible:shadow-border-interactive-with-active',\n          'transition-colors outline-none',\n          'aria-selected:opacity-100',\n        ),\n        range_start: 'day-range-start rounded-6',\n        range_end: 'day-range-end rounded-6',\n        selected: cn(\n          'bg-foreground-highlight-interactive/80 !text-foreground-neutral-base font-medium rounded-6',\n          'hover:bg-foreground-highlight-interactive-hover/80',\n          'focus:bg-foreground-highlight-interactive/80',\n        ),\n        today: cn(\n          'bg-background-field-base text-foreground-neutral-base font-medium rounded-6',\n          'border border-border-neutral-base',\n        ),\n        outside: 'day-outside text-foreground-neutral-muted',\n        disabled: 'text-foreground-neutral-disabled opacity-30 cursor-not-allowed',\n        range_middle: cn(\n          'aria-selected:bg-foreground-highlight-interactive/10 aria-selected:text-foreground-neutral-base',\n          'rounded-none',\n          'first:rounded-l-6 first:rounded-r-none',\n          'last:rounded-r-6 last:rounded-l-none',\n        ),\n        hidden: 'invisible',\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({orientation}) => {\n          const iconName = orientation === 'left' ? 'arrowLeftSLine' : 'arrowRightSLine';\n          return <Icon name={iconName} className=\"size-20\" />;\n        },\n      }}\n      {...props}\n    />\n  );\n}\n"],"names":["Icon","DayPicker","cn","Calendar","className","classNames","showOutsideDays","props","months","month","month_caption","caption_label","nav","button_previous","button_next","month_grid","weekdays","weekday","week","day","showWeekNumber","day_button","range_start","range_end","selected","today","outside","disabled","range_middle","hidden","components","Chevron","orientation","iconName","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,kBAAkB;AAErC,SAAQC,SAAS,QAAO,mBAAmB;AAC3C,SAAQC,EAAE,QAAO,WAAW;AAI5B,OAAO,SAASC,SAAS,EAACC,SAAS,EAAEC,UAAU,EAAEC,kBAAkB,IAAI,EAAE,GAAGC,OAAqB;IAC/F,qBACE,KAACN;QACCK,iBAAiBA;QACjBF,WAAWF,GAAG,0BAA0BE;QACxCC,YAAY;YACVG,QAAQ;YACRC,OAAO;YACPC,eAAe;YACfC,eAAe;YACfC,KAAK;YACLC,iBAAiBX,GACf,qDACA,qDACA,gCACA,gDACA,mDACA,kCACA,uDACA;YAEFY,aAAaZ,GACX,sDACA,qDACA,gCACA,gDACA,mDACA,kCACA,uDACA;YAEFa,YAAY;YACZC,UAAU;YACVC,SACE;YACFC,MAAM;YACNC,KAAKjB,GACH,mJACA,yDACAK,MAAMa,cAAc,GAChB,4DACA;YAENC,YAAYnB,GACV,6CACA,2CACA,gDACA,uDACA,kCACA;YAEFoB,aAAa;YACbC,WAAW;YACXC,UAAUtB,GACR,8FACA,sDACA;YAEFuB,OAAOvB,GACL,+EACA;YAEFwB,SAAS;YACTC,UAAU;YACVC,cAAc1B,GACZ,mGACA,gBACA,0CACA;YAEF2B,QAAQ;YACR,GAAGxB,UAAU;QACf;QACAyB,YAAY;YACVC,SAAS,CAAC,EAACC,WAAW,EAAC;gBACrB,MAAMC,WAAWD,gBAAgB,SAAS,mBAAmB;gBAC7D,qBAAO,KAAChC;oBAAKkC,MAAMD;oBAAU7B,WAAU;;YACzC;QACF;QACC,GAAGG,KAAK;;AAGf"}

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './calendar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/calendar/index.js

@@ -0,0 +1,3 @@
+export * from './calendar.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/calendar/index.ts"],"sourcesContent":["export * from './calendar';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa"}

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,19 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps, ReactNode } from 'react';
+export declare const datePickerVariants: (props?: ({
+    variant?: "base" | "component" | null | undefined;
+    size?: "base" | "small" | null | undefined;
+    state?: "default" | "error" | "disabled" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type DatePickerProps = Omit<ComponentProps<'input'>, 'size' | 'type'> & VariantProps<typeof datePickerVariants> & {
+    date?: Date;
+    onDateSelect?: (date: Date | undefined) => void;
+    placeholder?: string;
+    dateFormat?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    onClear?: () => void;
+    closeOnSelect?: boolean;
+};
+export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/date-picker/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAKhE,OAAO,KAAK,EAAC,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrD,eAAO,MAAM,kBAAkB;;;;8EAyB9B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC1E,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEJ,eAAO,MAAM,UAAU,2HAgItB,CAAC"}

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Calendar } from '../../components/calendar/index.js';
+import { Icon } from '../../components/icon/index.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover/index.js';
+import { format } from 'date-fns';
+import { forwardRef, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+export const datePickerVariants = cva('relative flex items-center rounded-6 shadow-button-neutral transition-[background-color,box-shadow] outline-none', {
+    variants: {
+        variant: {
+            base: 'bg-background-field-base hover:bg-background-field-hover',
+            component: 'bg-background-field-component hover:bg-background-field-component-hover'
+        },
+        size: {
+            base: 'h-32',
+            small: 'h-28'
+        },
+        state: {
+            default: '',
+            error: 'shadow-border-error',
+            disabled: 'bg-background-neutral-disabled shadow-none pointer-events-none cursor-not-allowed'
+        }
+    },
+    defaultVariants: {
+        variant: 'base',
+        size: 'base',
+        state: 'default'
+    }
+});
+export const DatePicker = /*#__PURE__*/ forwardRef(({ className, variant, size, state, date, onDateSelect, placeholder = 'DD/MM/YYYY', dateFormat = 'dd/MM/yyyy', leftIcon, rightIcon, onClear, disabled, closeOnSelect = false, ...props }, ref)=>{
+    const [open, setOpen] = useState(false);
+    const isDisabled = disabled || state === 'disabled';
+    const displayValue = date ? format(date, dateFormat) : '';
+    const handleSelect = (selectedDate)=>{
+        onDateSelect?.(selectedDate);
+        if (closeOnSelect) {
+            setOpen(false);
+        }
+    };
+    const handleClear = (e)=>{
+        e.stopPropagation();
+        onClear?.();
+        setOpen(false);
+    };
+    return /*#__PURE__*/ _jsxs(Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn(open && 'shadow-border-interactive-with-active', datePickerVariants({
+                    variant,
+                    size,
+                    state: isDisabled ? 'disabled' : state
+                }), className),
+                children: [
+                    /*#__PURE__*/ _jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            disabled: isDisabled,
+                            className: cn('flex items-center justify-center shrink-0 transition-colors', size === 'small' ? 'size-28' : 'size-32', isDisabled && 'text-foreground-neutral-disabled'),
+                            "aria-label": "Open calendar",
+                            children: leftIcon || /*#__PURE__*/ _jsx(Icon, {
+                                name: "calendar2Line",
+                                className: cn('size-16 text-foreground-neutral-muted', isDisabled && 'text-foreground-neutral-disabled')
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "h-full w-px bg-border-neutral-base shrink-0"
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        ref: ref,
+                        type: "text",
+                        disabled: isDisabled,
+                        placeholder: placeholder,
+                        value: displayValue,
+                        readOnly: true,
+                        className: cn('flex-1 min-w-0 px-8 text-sm leading-20 bg-transparent outline-none border-none cursor-pointer', 'placeholder:text-foreground-neutral-muted', 'text-foreground-neutral-base', 'disabled:text-foreground-neutral-disabled disabled:cursor-not-allowed', size === 'small' ? 'py-4' : 'py-6'),
+                        onClick: ()=>!isDisabled && setOpen(true),
+                        ...props
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleClear,
+                        className: cn('flex items-center justify-center shrink-0 cursor-pointer', size === 'small' ? 'size-28' : 'size-32', date && onClear && !isDisabled ? 'visible' : 'invisible'),
+                        "aria-label": "Clear date",
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            name: "closeLine",
+                            className: "size-16 text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors"
+                        })
+                    }),
+                    rightIcon && !date && /*#__PURE__*/ _jsx("div", {
+                        className: cn('flex items-center justify-center shrink-0', size === 'small' ? 'size-28' : 'size-32'),
+                        children: rightIcon
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(PopoverContent, {
+                className: "w-auto p-0",
+                align: "start",
+                children: /*#__PURE__*/ _jsx(Calendar, {
+                    mode: "single",
+                    selected: date,
+                    onSelect: handleSelect
+                })
+            })
+        ]
+    });
+});
+DatePicker.displayName = 'DatePicker';
+
+//# sourceMappingURL=date-picker.js.map

package/dist/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport {Calendar} from 'components/calendar';\nimport {Icon} from 'components/icon';\nimport {Popover, PopoverContent, PopoverTrigger} from 'components/popover';\nimport {format} from 'date-fns';\nimport type {ComponentProps, ReactNode} from 'react';\nimport {forwardRef, useState} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const datePickerVariants = cva(\n  'relative flex items-center rounded-6 shadow-button-neutral transition-[background-color,box-shadow] outline-none',\n  {\n    variants: {\n      variant: {\n        base: 'bg-background-field-base hover:bg-background-field-hover',\n        component: 'bg-background-field-component hover:bg-background-field-component-hover',\n      },\n      size: {\n        base: 'h-32',\n        small: 'h-28',\n      },\n      state: {\n        default: '',\n        error: 'shadow-border-error',\n        disabled:\n          'bg-background-neutral-disabled shadow-none pointer-events-none cursor-not-allowed',\n      },\n    },\n    defaultVariants: {\n      variant: 'base',\n      size: 'base',\n      state: 'default',\n    },\n  },\n);\n\nexport type DatePickerProps = Omit<ComponentProps<'input'>, 'size' | 'type'> &\n  VariantProps<typeof datePickerVariants> & {\n    date?: Date;\n    onDateSelect?: (date: Date | undefined) => void;\n    placeholder?: string;\n    dateFormat?: string;\n    leftIcon?: ReactNode;\n    rightIcon?: ReactNode;\n    onClear?: () => void;\n    closeOnSelect?: boolean;\n  };\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      state,\n      date,\n      onDateSelect,\n      placeholder = 'DD/MM/YYYY',\n      dateFormat = 'dd/MM/yyyy',\n      leftIcon,\n      rightIcon,\n      onClear,\n      disabled,\n      closeOnSelect = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = useState(false);\n    const isDisabled = disabled || state === 'disabled';\n    const displayValue = date ? format(date, dateFormat) : '';\n\n    const handleSelect = (selectedDate: Date | undefined) => {\n      onDateSelect?.(selectedDate);\n      if (closeOnSelect) {\n        setOpen(false);\n      }\n    };\n\n    const handleClear = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onClear?.();\n      setOpen(false);\n    };\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <div\n          className={cn(\n            open && 'shadow-border-interactive-with-active',\n            datePickerVariants({variant, size, state: isDisabled ? 'disabled' : state}),\n            className,\n          )}\n        >\n          {/* Calendar Icon Button */}\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              disabled={isDisabled}\n              className={cn(\n                'flex items-center justify-center shrink-0 transition-colors',\n                size === 'small' ? 'size-28' : 'size-32',\n                isDisabled && 'text-foreground-neutral-disabled',\n              )}\n              aria-label=\"Open calendar\"\n            >\n              {leftIcon || (\n                <Icon\n                  name=\"calendar2Line\"\n                  className={cn(\n                    'size-16 text-foreground-neutral-muted',\n                    isDisabled && 'text-foreground-neutral-disabled',\n                  )}\n                />\n              )}\n            </button>\n          </PopoverTrigger>\n\n          {/* Divider */}\n          <div className=\"h-full w-px bg-border-neutral-base shrink-0\" />\n\n          {/* Input Field */}\n          <input\n            ref={ref}\n            type=\"text\"\n            disabled={isDisabled}\n            placeholder={placeholder}\n            value={displayValue}\n            readOnly\n            className={cn(\n              'flex-1 min-w-0 px-8 text-sm leading-20 bg-transparent outline-none border-none cursor-pointer',\n              'placeholder:text-foreground-neutral-muted',\n              'text-foreground-neutral-base',\n              'disabled:text-foreground-neutral-disabled disabled:cursor-not-allowed',\n              size === 'small' ? 'py-4' : 'py-6',\n            )}\n            onClick={() => !isDisabled && setOpen(true)}\n            {...props}\n          />\n\n          {/* Clear Button (shown when date is selected) */}\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            className={cn(\n              'flex items-center justify-center shrink-0 cursor-pointer',\n              size === 'small' ? 'size-28' : 'size-32',\n              date && onClear && !isDisabled ? 'visible' : 'invisible',\n            )}\n            aria-label=\"Clear date\"\n          >\n            <Icon\n              name=\"closeLine\"\n              className=\"size-16 text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors\"\n            />\n          </button>\n\n          {/* Custom Right Icon */}\n          {rightIcon && !date && (\n            <div\n              className={cn(\n                'flex items-center justify-center shrink-0',\n                size === 'small' ? 'size-28' : 'size-32',\n              )}\n            >\n              {rightIcon}\n            </div>\n          )}\n        </div>\n\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" selected={date} onSelect={handleSelect} />\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\n\nDatePicker.displayName = 'DatePicker';\n"],"names":["cva","Calendar","Icon","Popover","PopoverContent","PopoverTrigger","format","forwardRef","useState","cn","datePickerVariants","variants","variant","base","component","size","small","state","default","error","disabled","defaultVariants","DatePicker","className","date","onDateSelect","placeholder","dateFormat","leftIcon","rightIcon","onClear","closeOnSelect","props","ref","open","setOpen","isDisabled","displayValue","handleSelect","selectedDate","handleClear","e","stopPropagation","onOpenChange","div","asChild","button","type","aria-label","name","input","value","readOnly","onClick","align","mode","selected","onSelect","displayName"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,QAAQ,QAAO,sBAAsB;AAC7C,SAAQC,IAAI,QAAO,kBAAkB;AACrC,SAAQC,OAAO,EAAEC,cAAc,EAAEC,cAAc,QAAO,qBAAqB;AAC3E,SAAQC,MAAM,QAAO,WAAW;AAEhC,SAAQC,UAAU,EAAEC,QAAQ,QAAO,QAAQ;AAC3C,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBV,IAChC,oHACA;IACEW,UAAU;QACRC,SAAS;YACPC,MAAM;YACNC,WAAW;QACb;QACAC,MAAM;YACJF,MAAM;YACNG,OAAO;QACT;QACAC,OAAO;YACLC,SAAS;YACTC,OAAO;YACPC,UACE;QACJ;IACF;IACAC,iBAAiB;QACfT,SAAS;QACTG,MAAM;QACNE,OAAO;IACT;AACF,GACA;AAcF,OAAO,MAAMK,2BAAaf,WACxB,CACE,EACEgB,SAAS,EACTX,OAAO,EACPG,IAAI,EACJE,KAAK,EACLO,IAAI,EACJC,YAAY,EACZC,cAAc,YAAY,EAC1BC,aAAa,YAAY,EACzBC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPV,QAAQ,EACRW,gBAAgB,KAAK,EACrB,GAAGC,OACJ,EACDC;IAEA,MAAM,CAACC,MAAMC,QAAQ,GAAG3B,SAAS;IACjC,MAAM4B,aAAahB,YAAYH,UAAU;IACzC,MAAMoB,eAAeb,OAAOlB,OAAOkB,MAAMG,cAAc;IAEvD,MAAMW,eAAe,CAACC;QACpBd,eAAec;QACf,IAAIR,eAAe;YACjBI,QAAQ;QACV;IACF;IAEA,MAAMK,cAAc,CAACC;QACnBA,EAAEC,eAAe;QACjBZ;QACAK,QAAQ;IACV;IAEA,qBACE,MAAChC;QAAQ+B,MAAMA;QAAMS,cAAcR;;0BACjC,MAACS;gBACCrB,WAAWd,GACTyB,QAAQ,yCACRxB,mBAAmB;oBAACE;oBAASG;oBAAME,OAAOmB,aAAa,aAAanB;gBAAK,IACzEM;;kCAIF,KAAClB;wBAAewC,OAAO;kCACrB,cAAA,KAACC;4BACCC,MAAK;4BACL3B,UAAUgB;4BACVb,WAAWd,GACT,+DACAM,SAAS,UAAU,YAAY,WAC/BqB,cAAc;4BAEhBY,cAAW;sCAEVpB,0BACC,KAAC1B;gCACC+C,MAAK;gCACL1B,WAAWd,GACT,yCACA2B,cAAc;;;;kCAQxB,KAACQ;wBAAIrB,WAAU;;kCAGf,KAAC2B;wBACCjB,KAAKA;wBACLc,MAAK;wBACL3B,UAAUgB;wBACVV,aAAaA;wBACbyB,OAAOd;wBACPe,QAAQ;wBACR7B,WAAWd,GACT,iGACA,6CACA,gCACA,yEACAM,SAAS,UAAU,SAAS;wBAE9BsC,SAAS,IAAM,CAACjB,cAAcD,QAAQ;wBACrC,GAAGH,KAAK;;kCAIX,KAACc;wBACCC,MAAK;wBACLM,SAASb;wBACTjB,WAAWd,GACT,4DACAM,SAAS,UAAU,YAAY,WAC/BS,QAAQM,WAAW,CAACM,aAAa,YAAY;wBAE/CY,cAAW;kCAEX,cAAA,KAAC9C;4BACC+C,MAAK;4BACL1B,WAAU;;;oBAKbM,aAAa,CAACL,sBACb,KAACoB;wBACCrB,WAAWd,GACT,6CACAM,SAAS,UAAU,YAAY;kCAGhCc;;;;0BAKP,KAACzB;gBAAemB,WAAU;gBAAa+B,OAAM;0BAC3C,cAAA,KAACrD;oBAASsD,MAAK;oBAASC,UAAUhC;oBAAMiC,UAAUnB;;;;;AAI1D,GACA;AAEFhB,WAAWoC,WAAW,GAAG"}