@serendie/ui 2.1.3-dev.202509020325 → 2.1.3-dev.202509040333

package/dist/client.js

@@ -3,48 +3,50 @@ 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 f, BadgeCloseButton as c, BadgeStyle as l } 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 { 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 so } 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 yo, PaginationStyle as uo } from "./components/Pagination/Pagination.js";
+import { PasswordField as To } from "./components/PasswordField/PasswordField.js";
+import { ProgressIndicator as Do, ProgressIndicatorStyle as bo } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { RadioButton as vo, RadioButtonStyle as Mo, radioCheckedIconCss as wo, radioIconCss as Ao, radioUncheckedIconCss as Lo } from "./components/RadioButton/RadioButton.js";
+import { RadioGroup as Ro } from "./components/RadioButton/RadioGroup.js";
+import { Search as Go, SearchStyle as Uo } from "./components/Search/Search.js";
+import { Select as jo, SelectStyle as qo } from "./components/Select/Select.js";
+import { Switch as Eo, SwitchStyle as Ho } from "./components/Switch/Switch.js";
+import { Tabs as Ko, TabsStyle as Oo } from "./components/Tabs/Tabs.js";
+import { TabItem as Vo, TabItemStyle as Xo } from "./components/Tabs/TabItem.js";
+import { TextArea as Zo } from "./components/TextArea/TextArea.js";
+import { TextField as $o } from "./components/TextField/TextField.js";
+import { Toast as rr, ToastStyle as er, toaster as tr } from "./components/Toast/Toast.js";
+import { Tooltip as pr } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as ir } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as nr } from "./components/DataTable/DataTableComponent.js";
+import { parse as fr } 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,
+  c as BadgeCloseButton,
   l as BadgeStyle,
   h as Banner,
   S as BottomNavigation,
@@ -58,58 +60,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,
+  nr 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,
+  so 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,
+  yo as Pagination,
+  uo as PaginationStyle,
+  To as PasswordField,
+  Do as ProgressIndicator,
+  bo as ProgressIndicatorStyle,
+  vo as RadioButton,
+  Mo as RadioButtonStyle,
+  Ro as RadioGroup,
+  Go as Search,
+  Uo as SearchStyle,
+  jo as Select,
+  qo 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,
+  Eo as Switch,
+  Ho as SwitchStyle,
+  Vo as TabItem,
+  Xo as TabItemStyle,
+  Ko as Tabs,
+  Oo as TabsStyle,
+  Zo as TextArea,
+  $o as TextField,
+  rr as Toast,
+  er as ToastStyle,
+  pr as Tooltip,
+  ir 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,
+  fr as parseDate,
+  wo as radioCheckedIconCss,
+  Ao as radioIconCss,
+  Lo as radioUncheckedIconCss,
   L as spaciousChartMargin,
-  rr as toaster,
+  tr 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/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">>;