@serendie/ui 2.1.3 → 2.2.0

package/dist/client.js

@@ -3,53 +3,56 @@ import { SerendiePreset as e } from "./preset.js";
 import { Accordion as a } from "./components/Accordion/Accordion.js";
 import { AccordionGroup as m } from "./components/Accordion/AccordionGroup.js";
 import { Avatar as x, AvatarStyle as n } from "./components/Avatar/Avatar.js";
-import { Badge as f, BadgeCloseButton as s, BadgeStyle as l } from "./components/Badge/Badge.js";
+import { Badge as s, BadgeCloseButton as c, BadgeStyle as d } from "./components/Badge/Badge.js";
 import { Banner as h } from "./components/Banner/Banner.js";
 import { BottomNavigation as S } from "./components/BottomNavigation/BottomNavigation.js";
-import { BottomNavigationItem as g, BottomNavigationItemStyle as y } from "./components/BottomNavigation/BottomNavigationItem.js";
+import { BottomNavigationItem as g, BottomNavigationItemStyle as u } from "./components/BottomNavigation/BottomNavigationItem.js";
 import { Button as I, ButtonStyle as T } from "./components/Button/Button.js";
-import { SerendieChartTheme as b } from "./components/Chart/SerendieChartTheme.js";
-import { compactChartMargin as D, defaultChartMargin as v, getChartColor as M, getChartColors as w, legendChartMargin as A, spaciousChartMargin as L, useBarChartProps as N, useChartProps as R, useLineChartProps as F, usePieChartProps as G } from "./components/Chart/SerendieChartProps.js";
+import { SerendieChartTheme as D } from "./components/Chart/SerendieChartTheme.js";
+import { compactChartMargin as k, defaultChartMargin as v, getChartColor as M, getChartColors as w, legendChartMargin as A, spaciousChartMargin as L, useBarChartProps as N, useChartProps as R, useLineChartProps as F, usePieChartProps as G } from "./components/Chart/SerendieChartProps.js";
 import { CheckBox as W, CheckBoxStyle as j, checkboxCheckedIconCss as q, checkboxIconCss as z, checkboxUncheckedIconCss as E } from "./components/CheckBox/CheckBox.js";
 import { ChoiceBox as J, ChoiceBoxStyle as K } from "./components/ChoiceBox/ChoiceBox.js";
 import { DashboardWidget as Q } from "./components/DashboardWidget/DashboardWidget.js";
 import { DataTable as X } from "./components/DataTable/index.js";
-import { Divider as Z, DividerStyle as _ } from "./components/Divider/Divider.js";
-import { Drawer as oo } from "./components/Drawer/Drawer.js";
-import { DropdownMenu as eo, DropdownMenuStyle as to } from "./components/DropdownMenu/DropdownMenu.js";
-import { IconButton as po, IconButtonStyle as mo } from "./components/IconButton/IconButton.js";
-import { List as xo } from "./components/List/List.js";
-import { ListItem as co, ListItemStyle as fo } from "./components/List/ListItem.js";
-import { ModalDialog as lo } from "./components/ModalDialog/ModalDialog.js";
-import { NotificationBadge as Co } from "./components/NotificationBadge/NotificationBadge.js";
-import { Pagination as Bo, PaginationStyle as go } from "./components/Pagination/Pagination.js";
-import { PasswordField as uo } from "./components/PasswordField/PasswordField.js";
-import { ProgressIndicator as To, ProgressIndicatorStyle as Po } from "./components/ProgressIndicator/ProgressIndicator.js";
-import { RadioButton as ko, RadioButtonStyle as Do, radioCheckedIconCss as vo, radioIconCss as Mo, radioUncheckedIconCss as wo } from "./components/RadioButton/RadioButton.js";
-import { RadioGroup as Lo } from "./components/RadioButton/RadioGroup.js";
-import { Search as Ro, SearchStyle as Fo } from "./components/Search/Search.js";
-import { Select as Uo, SelectStyle as Wo } from "./components/Select/Select.js";
-import { Switch as qo, SwitchStyle as zo } from "./components/Switch/Switch.js";
-import { Tabs as Ho, TabsStyle as Jo } from "./components/Tabs/Tabs.js";
-import { TabItem as Oo, TabItemStyle as Qo } from "./components/Tabs/TabItem.js";
-import { TextArea as Xo } from "./components/TextArea/TextArea.js";
-import { TextField as Zo } from "./components/TextField/TextField.js";
-import { Toast as $o, ToastStyle as or, toaster as rr } from "./components/Toast/Toast.js";
-import { Tooltip as tr } from "./components/Tooltip/Tooltip.js";
-import { TopAppBar as pr } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as ir } from "./components/DataTable/DataTableComponent.js";
+import { DatePicker as Z } from "./components/DatePicker/DatePicker.js";
+import { Divider as $, DividerStyle as oo } from "./components/Divider/Divider.js";
+import { Drawer as eo } from "./components/Drawer/Drawer.js";
+import { DropdownMenu as ao, DropdownMenuStyle as po } from "./components/DropdownMenu/DropdownMenu.js";
+import { IconButton as io, IconButtonStyle as xo } from "./components/IconButton/IconButton.js";
+import { List as fo } from "./components/List/List.js";
+import { ListItem as co, ListItemStyle as lo } from "./components/List/ListItem.js";
+import { ModalDialog as Co } from "./components/ModalDialog/ModalDialog.js";
+import { NotificationBadge as Bo } from "./components/NotificationBadge/NotificationBadge.js";
+import { Pagination as uo, PaginationStyle as yo } from "./components/Pagination/Pagination.js";
+import { PasswordField as To } from "./components/PasswordField/PasswordField.js";
+import { ProgressIndicator as Do } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { ProgressIndicatorIndeterminate as ko } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
+import { RadioButton as Mo, RadioButtonStyle as wo, radioCheckedIconCss as Ao, radioIconCss as Lo, radioUncheckedIconCss as No } from "./components/RadioButton/RadioButton.js";
+import { RadioGroup as Fo } from "./components/RadioButton/RadioGroup.js";
+import { Search as Uo, SearchStyle as Wo } from "./components/Search/Search.js";
+import { Select as qo, SelectStyle as zo } from "./components/Select/Select.js";
+import { Switch as Ho, SwitchStyle as Jo } from "./components/Switch/Switch.js";
+import { Tabs as Oo, TabsStyle as Qo } from "./components/Tabs/Tabs.js";
+import { TabItem as Xo, TabItemStyle as Yo } from "./components/Tabs/TabItem.js";
+import { TextArea as _o } from "./components/TextArea/TextArea.js";
+import { TextField as or } from "./components/TextField/TextField.js";
+import { Toast as er, ToastStyle as tr, toaster as ar } from "./components/Toast/Toast.js";
+import { Tooltip as mr } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as xr } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as fr } from "./components/DataTable/DataTableComponent.js";
+import { parse as cr } from "./node_modules/@zag-js/date-picker/dist/index.js";
 export {
   a as Accordion,
   m as AccordionGroup,
   x as Avatar,
   n as AvatarStyle,
-  f as Badge,
-  s as BadgeCloseButton,
-  l as BadgeStyle,
+  s as Badge,
+  c as BadgeCloseButton,
+  d as BadgeStyle,
   h as Banner,
   S as BottomNavigation,
   g as BottomNavigationItem,
-  y as BottomNavigationItemStyle,
+  u as BottomNavigationItemStyle,
   I as Button,
   T as ButtonStyle,
   W as CheckBox,
@@ -58,58 +61,60 @@ export {
   K as ChoiceBoxStyle,
   Q as DashboardWidget,
   X as DataTable,
-  ir as DataTableComponent,
-  Z as Divider,
-  _ as DividerStyle,
-  oo as Drawer,
-  eo as DropdownMenu,
-  to as DropdownMenuStyle,
-  po as IconButton,
-  mo as IconButtonStyle,
-  xo as List,
+  fr as DataTableComponent,
+  Z as DatePicker,
+  $ as Divider,
+  oo as DividerStyle,
+  eo as Drawer,
+  ao as DropdownMenu,
+  po as DropdownMenuStyle,
+  io as IconButton,
+  xo as IconButtonStyle,
+  fo as List,
   co as ListItem,
-  fo as ListItemStyle,
-  lo as ModalDialog,
-  Co as NotificationBadge,
-  Bo as Pagination,
-  go as PaginationStyle,
-  uo as PasswordField,
-  To as ProgressIndicator,
-  Po as ProgressIndicatorStyle,
-  ko as RadioButton,
-  Do as RadioButtonStyle,
-  Lo as RadioGroup,
-  Ro as Search,
-  Fo as SearchStyle,
-  Uo as Select,
-  Wo as SelectStyle,
-  b as SerendieChartTheme,
+  lo as ListItemStyle,
+  Co as ModalDialog,
+  Bo as NotificationBadge,
+  uo as Pagination,
+  yo as PaginationStyle,
+  To as PasswordField,
+  Do as ProgressIndicator,
+  ko as ProgressIndicatorIndeterminate,
+  Mo as RadioButton,
+  wo as RadioButtonStyle,
+  Fo as RadioGroup,
+  Uo as Search,
+  Wo as SearchStyle,
+  qo as Select,
+  zo as SelectStyle,
+  D as SerendieChartTheme,
   e as SerendiePreset,
-  qo as Switch,
-  zo as SwitchStyle,
-  Oo as TabItem,
-  Qo as TabItemStyle,
-  Ho as Tabs,
-  Jo as TabsStyle,
-  Xo as TextArea,
-  Zo as TextField,
-  $o as Toast,
-  or as ToastStyle,
-  tr as Tooltip,
-  pr as TopAppBar,
+  Ho as Switch,
+  Jo as SwitchStyle,
+  Xo as TabItem,
+  Yo as TabItemStyle,
+  Oo as Tabs,
+  Qo as TabsStyle,
+  _o as TextArea,
+  or as TextField,
+  er as Toast,
+  tr as ToastStyle,
+  mr as Tooltip,
+  xr as TopAppBar,
   q as checkboxCheckedIconCss,
   z as checkboxIconCss,
   E as checkboxUncheckedIconCss,
-  D as compactChartMargin,
+  k as compactChartMargin,
   v as defaultChartMargin,
   M as getChartColor,
   w as getChartColors,
   A as legendChartMargin,
-  vo as radioCheckedIconCss,
-  Mo as radioIconCss,
-  wo as radioUncheckedIconCss,
+  cr as parseDate,
+  Ao as radioCheckedIconCss,
+  Lo as radioIconCss,
+  No as radioUncheckedIconCss,
   L as spaciousChartMargin,
-  rr as toaster,
+  ar as toaster,
   N as useBarChartProps,
   R as useChartProps,
   F as useLineChartProps,

package/dist/components/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import { AccordionItemProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/types';
-declare const AccordionStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "title" | "itemIndicator" | "icon" | "description", {
+declare const AccordionStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "description" | "item" | "title" | "itemIndicator", {
     isLeftIcon: {
         true: {
             item: {

package/dist/components/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import { AvatarRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const AvatarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"image" | "root" | "fallback", {
+export declare const AvatarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "image" | "fallback", {
     size: {
         small: {
             root: {

package/dist/components/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-declare const BannerStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "title" | "icon" | "description", {
+declare const BannerStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "icon" | "description" | "title", {
     type: {
         information: {
             container: {

package/dist/components/BottomNavigation/BottomNavigationItem.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const BottomNavigationItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "label" | "root" | "iconGroup" | "badge", {
+export declare const BottomNavigationItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "label" | "icon" | "iconGroup" | "badge", {
     isActive: {
         true: {
             label: {

package/dist/components/Button/Button.d.ts

@@ -117,14 +117,14 @@ type ButtonLoadingProps = {
 };
 export declare const Button: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
-    size?: "small" | "medium" | undefined;
+    size?: "medium" | "small" | undefined;
 } & {
     leftIcon?: React.ReactElement;
 } & {
     rightIcon?: never;
 } & ButtonLoadingProps, "ref"> | Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
-    size?: "small" | "medium" | undefined;
+    size?: "medium" | "small" | undefined;
 } & {
     leftIcon?: never;
 } & {

package/dist/components/Button/Button.js

@@ -1,11 +1,11 @@
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
 import b from "react";
-import { ProgressIndicator as f } from "../ProgressIndicator/ProgressIndicator.js";
+import { ProgressIndicatorIndeterminate as f } from "../ProgressIndicator/ProgressIndicatorIndeterminate.js";
 import { cva as h } from "../../styled-system/css/cva.js";
 import { css as x } from "../../styled-system/css/css.js";
 import { cx as _ } from "../../styled-system/css/cx.js";
 import { styled as v } from "../../styled-system/jsx/factory.js";
-const r = {
+const d = {
   color: "sd.system.color.component.onSurface",
   outlineWidth: "sd.system.dimension.border.medium",
   outlineStyle: "solid",
@@ -25,7 +25,7 @@ const r = {
     color: "sd.system.color.interaction.disabledOnSurface",
     outline: "none"
   }
-}, l = h({
+}, a = h({
   base: {
     borderRadius: "sd.system.dimension.radius.full",
     position: "relative",
@@ -87,9 +87,9 @@ const r = {
           color: "sd.system.color.interaction.disabledOnSurface"
         }
       },
-      outlined: r,
+      outlined: d,
       rectangle: {
-        ...r,
+        ...d,
         borderRadius: "sd.system.dimension.radius.medium"
       }
     },
@@ -118,18 +118,18 @@ const r = {
     styleType: "filled",
     size: "medium"
   }
-}), n = v("span", {
+}), i = v("span", {
   base: {
     position: "relative",
     zIndex: "sd.system.elevation.zIndex.base"
   }
-}), P = b.forwardRef(
-  (o, a) => {
+}), R = b.forwardRef(
+  (n, l) => {
     const [
-      d,
+      r,
       { children: m, leftIcon: e, rightIcon: s, isLoading: t, className: c, ...y }
-    ] = l.splitVariantProps(o), p = l(d), u = x(
-      e || s ? o.size === "medium" ? {
+    ] = a.splitVariantProps(n), p = a(r), u = x(
+      e || s ? n.size === "medium" ? {
         //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
         paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
         paddingRight: s ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge"
@@ -142,26 +142,27 @@ const r = {
     return /* @__PURE__ */ g(
       "button",
       {
-        ref: a,
+        ref: l,
         className: _(p, u, c),
         ...y,
         children: [
-          t && /* @__PURE__ */ i(
+          t && /* @__PURE__ */ o(
             f,
             {
-              size: d.size,
-              color: o.styleType === void 0 || o.styleType === "filled" ? "white" : "gray"
+              type: "circular",
+              size: r.size || "medium",
+              color: "subtle"
             }
           ),
-          !t && e && /* @__PURE__ */ i(n, { p: "2px", children: e }),
-          /* @__PURE__ */ i(n, { children: m }),
-          !t && s && /* @__PURE__ */ i(n, { p: "2px", children: s })
+          !t && e && /* @__PURE__ */ o(i, { p: "2px", children: e }),
+          /* @__PURE__ */ o(i, { children: m }),
+          !t && s && /* @__PURE__ */ o(i, { p: "2px", children: s })
         ]
       }
     );
   }
 );
 export {
-  P as Button,
-  l as ButtonStyle
+  R as Button,
+  a as ButtonStyle
 };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,13 @@
+import { DatePickerRootProps } from '@ark-ui/react';
+interface DatePickerProps extends DatePickerRootProps {
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    invalid?: boolean;
+    invalidMessage?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    isCalendarOnly?: boolean;
+}
+export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,203 @@
+import { jsx as e, jsxs as a, Fragment as y } from "react/jsx-runtime";
+import { SerendieSymbolCalendar as R, SerendieSymbolArrowRight as F, SerendieSymbolChevronDown as I, SerendieSymbolChevronLeft as W, SerendieSymbolChevronRight as O } from "@serendie/symbols";
+import { forwardRef as j, useState as H } from "react";
+import { datePickerStyles as C } from "./styles.js";
+import { textFieldRecipe as A } from "../../styled-system/recipes/text-field-recipe.js";
+import { Portal as L } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { DatePickerRoot as k } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-root.js";
+import { DatePickerLabel as V } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-label.js";
+import { DatePickerControl as q } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-control.js";
+import { cx as p } from "../../styled-system/css/cx.js";
+import { DatePickerTrigger as B } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-trigger.js";
+import { css as t } from "../../styled-system/css/css.js";
+import { DatePickerInput as h } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-input.js";
+import { DatePickerPositioner as J } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-positioner.js";
+import { DatePickerContent as Y } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-content.js";
+import { DatePickerView as _ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view.js";
+import { DatePickerContext as z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-context.js";
+import { DatePickerViewControl as E } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view-control.js";
+import { DatePickerYearSelect as G } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-year-select.js";
+import { DatePickerPrevTrigger as K } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-prev-trigger.js";
+import { DatePickerMonthSelect as Q } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-month-select.js";
+import { DatePickerNextTrigger as U } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-next-trigger.js";
+import { DatePickerTable as X } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table.js";
+import { DatePickerTableHead as Z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-head.js";
+import { DatePickerTableRow as D } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-row.js";
+import { DatePickerTableHeader as $ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-header.js";
+import { DatePickerTableBody as M } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-body.js";
+import { DatePickerTableCell as ee } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell.js";
+import { DatePickerTableCellTrigger as re } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell-trigger.js";
+const Ie = j(
+  ({
+    placeholder: r = "日付を選択",
+    label: l,
+    required: m,
+    invalid: o,
+    invalidMessage: n,
+    selectionMode: s = "single",
+    startPlaceholder: v = "開始日",
+    endPlaceholder: x = "終了日",
+    locale: f = "ja-JP",
+    isCalendarOnly: S = !1,
+    ...c
+  }, N) => {
+    const T = C(), i = A(), [g, d] = H(!1), w = s === "range";
+    return S ? /* @__PURE__ */ e(
+      k,
+      {
+        locale: f,
+        ...c,
+        ref: N,
+        selectionMode: s,
+        open: !0,
+        className: i.root,
+        children: /* @__PURE__ */ e(b, {})
+      }
+    ) : /* @__PURE__ */ a(
+      k,
+      {
+        locale: f,
+        ...c,
+        ref: N,
+        selectionMode: s,
+        className: i.root,
+        open: g,
+        onOpenChange: (u) => {
+          var P;
+          d(u.open), (P = c.onOpenChange) == null || P.call(c, u);
+        },
+        children: [
+          /* @__PURE__ */ a(y, { children: [
+            l && /* @__PURE__ */ a(V, { className: i.label, children: [
+              l,
+              m && /* @__PURE__ */ e("span", { className: i.labelRequired, children: "必須" })
+            ] }),
+            /* @__PURE__ */ a(
+              q,
+              {
+                className: p(
+                  i.inputWrapper,
+                  t({
+                    _expanded: {
+                      outlineWidth: "sd.system.dimension.border.thick",
+                      outlineColor: "sd.system.color.impression.primary"
+                    }
+                  })
+                ),
+                "data-expanded": g ? !0 : void 0,
+                "data-Invalid": o,
+                children: [
+                  /* @__PURE__ */ e("div", { className: i.leftContent, children: /* @__PURE__ */ e(B, { className: t({ display: "flex" }), children: /* @__PURE__ */ e(R, {}) }) }),
+                  w ? /* @__PURE__ */ a(
+                    "div",
+                    {
+                      className: t({
+                        display: "grid",
+                        gridTemplateColumns: "1fr auto 1fr",
+                        alignItems: "center"
+                      }),
+                      children: [
+                        /* @__PURE__ */ e(
+                          h,
+                          {
+                            index: 0,
+                            placeholder: v,
+                            className: p(
+                              i.input,
+                              t({
+                                minWidth: "100%",
+                                borderRadius: "sd.system.dimension.radius.medium"
+                              })
+                            ),
+                            onFocus: () => d(!0)
+                          }
+                        ),
+                        /* @__PURE__ */ e(F, {}),
+                        /* @__PURE__ */ e(
+                          h,
+                          {
+                            index: 1,
+                            placeholder: x,
+                            className: p(
+                              i.input,
+                              t({
+                                minWidth: "100%",
+                                borderRadius: "sd.system.dimension.radius.medium"
+                              })
+                            ),
+                            onFocus: () => d(!0)
+                          }
+                        )
+                      ]
+                    }
+                  ) : /* @__PURE__ */ e(
+                    h,
+                    {
+                      placeholder: r,
+                      className: i.input,
+                      onFocus: () => d(!0)
+                    }
+                  ),
+                  /* @__PURE__ */ e("div", {})
+                ]
+              }
+            ),
+            o && n && /* @__PURE__ */ e("div", { className: i.messageField, children: /* @__PURE__ */ e("p", { className: i.invalidMessage, children: n }) })
+          ] }),
+          /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(J, { className: T.positioner, children: /* @__PURE__ */ e(b, {}) }) })
+        ]
+      }
+    );
+  }
+), b = () => {
+  const r = C();
+  return /* @__PURE__ */ e(Y, { className: r.content, children: /* @__PURE__ */ e(_, { view: "day", className: r.view, children: /* @__PURE__ */ e(z, { children: (l) => /* @__PURE__ */ a(y, { children: [
+    /* @__PURE__ */ a(E, { className: r.viewControl, children: [
+      /* @__PURE__ */ a("div", { className: r.selectWrapper, children: [
+        /* @__PURE__ */ e(G, { className: r.select }),
+        /* @__PURE__ */ e(I, { className: r.selectIcon })
+      ] }),
+      /* @__PURE__ */ a("div", { className: t({ display: "flex", alignItems: "center" }), children: [
+        /* @__PURE__ */ e(K, { className: r.prevTrigger, children: /* @__PURE__ */ e(W, {}) }),
+        /* @__PURE__ */ e(
+          Q,
+          {
+            className: t({
+              appearance: "none",
+              textAlign: "center"
+            })
+          }
+        ),
+        /* @__PURE__ */ e(U, { className: r.nextTrigger, children: /* @__PURE__ */ e(O, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ a(X, { className: r.table, children: [
+      /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(D, { children: l.weekDays.map((m, o) => /* @__PURE__ */ e(
+        $,
+        {
+          className: r.tableHeader,
+          children: m.narrow
+        },
+        o
+      )) }) }),
+      /* @__PURE__ */ e(M, { children: l.weeks.map((m, o) => /* @__PURE__ */ e(D, { children: m.map((n, s) => /* @__PURE__ */ e(
+        ee,
+        {
+          value: n,
+          className: r.tableCell,
+          children: /* @__PURE__ */ e(
+            re,
+            {
+              className: r.tableCellTrigger,
+              children: n.day
+            }
+          )
+        },
+        s
+      )) }, o)) })
+    ] })
+  ] }) }) }) });
+};
+export {
+  Ie as DatePicker
+};

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

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export { parseDate } from './parseDate';

package/dist/components/DatePicker/index.js

@@ -0,0 +1,6 @@
+import { DatePicker as a } from "./DatePicker.js";
+import { parse as p } from "../../node_modules/@zag-js/date-picker/dist/index.js";
+export {
+  a as DatePicker,
+  p as parseDate
+};

package/dist/components/DatePicker/parseDate.d.ts

@@ -0,0 +1 @@
+export { parseDate } from '@ark-ui/react/date-picker';

package/dist/components/DatePicker/styles.d.ts

@@ -0,0 +1 @@
+export declare const datePickerStyles: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "table" | "select" | "view" | "tableCell" | "positioner" | "viewControl" | "prevTrigger" | "nextTrigger" | "tableHeader" | "tableCellTrigger" | "selectWrapper" | "selectIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "table" | "select" | "view" | "tableCell" | "positioner" | "viewControl" | "prevTrigger" | "nextTrigger" | "tableHeader" | "tableCellTrigger" | "selectWrapper" | "selectIcon">>;