@serendie/ui 2.1.2 → 2.1.3-dev.202509030422

package/dist/components/DatePicker/styles.js

@@ -0,0 +1,224 @@
+import { sva as e } from "../../styled-system/css/sva.js";
+const o = e({
+  slots: [
+    "positioner",
+    "content",
+    "view",
+    "viewControl",
+    "prevTrigger",
+    "nextTrigger",
+    "table",
+    "tableHeader",
+    "tableCell",
+    "tableCellTrigger",
+    "select",
+    "selectWrapper",
+    "selectIcon"
+  ],
+  base: {
+    positioner: {
+      position: "relative",
+      zIndex: "sd.system.elevation.zIndex.dropdown"
+    },
+    content: {
+      background: "sd.system.color.component.surface",
+      borderRadius: "sd.system.dimension.radius.medium",
+      boxShadow: "sd.system.elevation.shadow.level1",
+      flexDirection: "column",
+      gap: "sd.system.dimension.spacing.small",
+      p: "sd.system.dimension.spacing.small",
+      width: "fit-content",
+      zIndex: "sd.system.elevation.zIndex.dropdown",
+      _open: {
+        display: "flex",
+        animation: "fadeIn 0.25s ease-out"
+      },
+      _closed: {
+        display: "none",
+        animation: "fadeOut 0.2s ease-out"
+      }
+    },
+    view: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sd.system.dimension.spacing.small",
+      _hidden: {
+        display: "none"
+      }
+    },
+    viewControl: {
+      display: "flex",
+      gap: "sd.system.dimension.spacing.extraSmall",
+      justifyContent: "space-between",
+      alignItems: "center",
+      h: "40px",
+      px: "sd.system.dimension.spacing.twoExtraSmall"
+    },
+    select: {
+      appearance: "none",
+      paddingRight: "30px"
+    },
+    selectWrapper: {
+      position: "relative",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    selectIcon: {
+      position: "absolute",
+      right: "0",
+      top: "50%",
+      transform: "translateY(-50%)",
+      pointerEvents: "none"
+    },
+    prevTrigger: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "inline-flex",
+      justifyContent: "center",
+      borderRadius: "sd.system.dimension.radius.medium",
+      color: "sd.system.color.component.onSurface",
+      _hover: {
+        bg: "sd.system.color.interaction.hoveredVariant"
+      }
+    },
+    nextTrigger: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "inline-flex",
+      justifyContent: "center",
+      borderRadius: "sd.system.dimension.radius.medium",
+      color: "sd.system.color.component.onSurface",
+      _hover: {
+        bg: "sd.system.color.interaction.hoveredVariant"
+      }
+    },
+    table: {
+      width: "full",
+      borderCollapse: "separate",
+      borderSpacing: "0"
+    },
+    tableHeader: {
+      color: "sd.system.color.component.onSurfaceVariant",
+      fontWeight: "normal",
+      h: "40px",
+      textStyle: "sd.system.typography.body.small_compact",
+      textAlign: "center"
+    },
+    tableCell: {
+      textAlign: "center",
+      p: "0",
+      position: "relative"
+    },
+    tableCellTrigger: {
+      alignItems: "center",
+      borderRadius: "sd.system.dimension.radius.full",
+      cursor: "pointer",
+      display: "inline-flex",
+      fontVariantNumeric: "tabular-nums",
+      justifyContent: "center",
+      h: "40px",
+      w: "40px",
+      position: "relative",
+      color: "sd.system.color.component.onSurface",
+      border: "none",
+      background: "transparent",
+      textStyle: "sd.system.typography.body.small_compact",
+      zIndex: "2",
+      _hover: {
+        _before: {
+          bg: "sd.system.color.interaction.hoveredVariant"
+        }
+      },
+      _before: {
+        content: "''",
+        position: "absolute",
+        inset: "0",
+        zIndex: "-1",
+        borderRadius: "sd.system.dimension.radius.full"
+      },
+      _today: {
+        _before: {
+          borderWidth: "sd.system.dimension.border.medium",
+          borderColor: "sd.system.color.component.outline",
+          borderStyle: "solid"
+        },
+        "&[data-in-range]": {
+          _before: {
+            borderColor: "sd.reference.color.scale.white.1000"
+          }
+        }
+      },
+      "&[data-in-range]": {
+        bg: "sd.system.color.interaction.selectedSurface",
+        borderRadius: "0px"
+      },
+      "&[data-in-range]&[data-in-hover-range]": {
+        bg: "sd.system.color.interaction.hoveredVariant"
+      },
+      "&[data-hover-range-start]": {
+        bg: "sd.system.color.interaction.hoveredVariant",
+        borderTopLeftRadius: "sd.system.dimension.radius.full",
+        borderBottomLeftRadius: "sd.system.dimension.radius.full",
+        borderTopRightRadius: "0px",
+        borderBottomRightRadius: "0px"
+      },
+      "&[data-hover-range-end]": {
+        bg: "sd.system.color.interaction.hoveredVariant",
+        borderTopRightRadius: "sd.system.dimension.radius.full",
+        borderBottomRightRadius: "sd.system.dimension.radius.full",
+        borderTopLeftRadius: "0px",
+        borderBottomLeftRadius: "0px"
+      },
+      "&[data-hover-range-start]&[data-hover-range-end]": {
+        borderTopLeftRadius: "sd.system.dimension.radius.full",
+        borderBottomLeftRadius: "sd.system.dimension.radius.full",
+        borderTopRightRadius: "sd.system.dimension.radius.full",
+        borderBottomRightRadius: "sd.system.dimension.radius.full"
+      },
+      "&[data-range-start]": {
+        borderTopLeftRadius: "sd.system.dimension.radius.full",
+        borderBottomLeftRadius: "sd.system.dimension.radius.full"
+      },
+      "&[data-range-end]": {
+        borderTopRightRadius: "sd.system.dimension.radius.full",
+        borderBottomRightRadius: "sd.system.dimension.radius.full"
+      },
+      _selected: {
+        color: "sd.system.color.impression.onPrimaryContainer",
+        _hover: {
+          _before: {
+            background: "sd.system.color.impression.primaryContainer"
+          }
+        },
+        _before: {
+          background: "sd.system.color.impression.primaryContainer"
+        },
+        zIndex: "100"
+      },
+      _disabled: {
+        color: "sd.system.color.interaction.disabledOnSurface",
+        cursor: "not-allowed",
+        _hover: {
+          _before: {
+            background: "transparent"
+          }
+        }
+      },
+      _unavailable: {
+        color: "sd.system.color.interaction.disabledOnSurface",
+        cursor: "not-allowed",
+        textDecoration: "line-through",
+        _hover: {
+          _before: {
+            background: "transparent"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {}
+});
+export {
+  o as datePickerStyles
+};

package/dist/components/IconButton/IconButton.d.ts

@@ -92,19 +92,19 @@ type CircleLargeProps = {
 export declare const IconButton: React.ForwardRefExoticComponent<(Omit<{
     shape?: "circle" | "rectangle" | undefined;
     styleType?: "filled" | "outlined" | "ghost" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "medium" | "small" | "large" | undefined;
 } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: React.ReactElement;
 } & RectangleProps, "ref"> | Omit<{
     shape?: "circle" | "rectangle" | undefined;
     styleType?: "filled" | "outlined" | "ghost" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "medium" | "small" | "large" | undefined;
 } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: React.ReactElement;
 } & CircleProps, "ref"> | Omit<{
     shape?: "circle" | "rectangle" | undefined;
     styleType?: "filled" | "outlined" | "ghost" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "medium" | "small" | "large" | undefined;
 } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: React.ReactElement;
 } & CircleLargeProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/List/ListItem.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "root" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
+export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "description" | "title" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
     isLargeLeftIcon: {
         true: {
             leftIcon: {

package/dist/components/ModalDialog/ModalDialog.d.ts

@@ -1,6 +1,6 @@
 import { DialogRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-declare const ModalDialogStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
+declare const ModalDialogStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
 type Props = {
     isOpen: boolean;
     title: string;

package/dist/components/NotificationBadge/NotificationBadge.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-declare const NotificationBadgeStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"text" | "root", {
+declare const NotificationBadgeStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "text", {
     size: {
         small: {
             root: {

package/dist/components/Pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const PaginationStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "root" | "ellipsis" | "prevTrigger" | "nextTrigger", {
+export declare const PaginationStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "item" | "ellipsis" | "prevTrigger" | "nextTrigger", {
     size: {
         medium: {
             root: {

package/dist/components/Search/Search.d.ts

@@ -1,6 +1,6 @@
 import { ComboboxRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "input" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
+export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"input" | "icon" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
     size: {
         medium: {
             iconBox: {

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { SelectRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "root" | "valueText" | "iconBox" | "trigger", {
+export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "item" | "valueText" | "iconBox" | "trigger", {
     size: {
         medium: {
             root: {
@@ -56,11 +56,12 @@ type Props = {
     required?: boolean;
     invalidMessage?: string;
     items?: selectItem[];
+    collection?: SelectRootProps<selectItem>["collection"];
 };
 type selectItem = {
     label: string;
     value: string;
 };
-type SelectStyleProps = Props & SelectRootProps<selectItem> & RecipeVariantProps<typeof SelectStyle>;
+type SelectStyleProps = Props & Omit<SelectRootProps<selectItem>, "collection"> & RecipeVariantProps<typeof SelectStyle>;
 export declare const Select: React.FC<SelectStyleProps>;
 export {};

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import { Switch as ArkSwitch, SwitchRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SwitchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb", import('../../../styled-system/types').SlotRecipeVariantRecord<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb">>;
+export declare const SwitchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb">>;
 type SwitchItemProps = {
     label: string;
     helperText?: string;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
 import { Tabs as ArkTabs } from '@ark-ui/react';
-export declare const TabsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root", import('../../../styled-system/types').SlotRecipeVariantRecord<"list" | "root">>;
+export declare const TabsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "list", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "list">>;
 export declare const Tabs: ({ children, className, ...props }: ArkTabs.RootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextField/TextField.js

@@ -1,189 +1,92 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { SerendieSymbolAlertCircle as P, SerendieSymbolClose as j } from "@serendie/symbols";
-import q from "../../node_modules/merge-refs/dist/esm/index.js";
-import m, { forwardRef as L } from "react";
-import { sva as M } from "../../styled-system/css/sva.js";
-import { cx as A } from "../../styled-system/css/cx.js";
-import { css as v } from "../../styled-system/css/css.js";
-const S = M({
-  slots: [
-    "root",
-    "label",
-    "required",
-    "inputWrapper",
-    "leftContent",
-    "rightContent",
-    "input",
-    "icon",
-    "messageField",
-    "description",
-    "invalidMessage"
-  ],
-  base: {
-    root: {
-      display: "inline-grid",
-      // 後から指定したCSSからwidthが上書きできないため、@layer componentsを指定
-      "@layer components": {
-        width: "min(100%, 300px)"
-      },
-      gridTemplateColumns: "auto",
-      rowGap: "sd.system.dimension.spacing.extraSmall",
-      textStyle: {
-        base: "sd.system.typography.body.medium_compact",
-        expanded: "sd.system.typography.body.medium_expanded"
-      }
-    },
-    label: {
-      textStyle: {
-        base: "sd.system.typography.label.medium_compact",
-        expanded: "sd.system.typography.label.medium_expanded"
-      }
-    },
-    inputWrapper: {
-      height: 48,
-      display: "grid",
-      gridTemplateColumns: "auto 1fr auto auto",
-      alignItems: "center",
-      outlineStyle: "solid",
-      outlineWidth: "sd.system.dimension.border.medium",
-      outlineColor: "sd.system.color.component.outline",
-      borderRadius: "sd.system.dimension.radius.medium",
-      backgroundColor: "sd.system.color.component.surface",
-      '&:has([data-focus="true"])': {
-        outlineWidth: "sd.system.dimension.border.thick",
-        outlineColor: "sd.system.color.impression.primary"
-      },
-      _focusWithin: {
-        outlineWidth: "sd.system.dimension.border.thick",
-        outlineColor: "sd.system.color.impression.primary"
-      },
-      _disabled: {
-        backgroundColor: "sd.system.color.interaction.disabled",
-        cursor: "not-allowed"
-      },
-      _invalid: {
-        outlineColor: "sd.system.color.impression.negative"
-      }
-    },
-    leftContent: {
-      paddingLeft: "sd.system.dimension.spacing.medium"
-    },
-    rightContent: {
-      paddingRight: "sd.system.dimension.spacing.medium"
-    },
-    input: {
-      outline: "none",
-      paddingTop: "sd.system.dimension.spacing.extraSmall",
-      paddingRight: "sd.system.dimension.spacing.twoExtraSmall",
-      paddingBottom: "sd.system.dimension.spacing.extraSmall",
-      paddingLeft: "sd.system.dimension.spacing.medium"
-    },
-    icon: {
-      display: "grid",
-      placeItems: "center",
-      w: "48px",
-      h: "48px",
-      expanded: {
-        w: "44px",
-        h: "44px"
-      }
-    },
-    required: {
-      pl: "sd.system.dimension.spacing.extraSmall",
-      color: "sd.system.color.impression.negative"
-    },
-    messageField: {
-      textStyle: {
-        base: "sd.system.typography.body.extraSmall_compact",
-        expanded: "sd.system.typography.body.extraSmall_expanded"
-      }
-    },
-    invalidMessage: {
-      color: "sd.system.color.impression.negative"
-    }
-  }
-}), K = L(
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { SerendieSymbolAlertCircle as A, SerendieSymbolClose as T } from "@serendie/symbols";
+import W from "../../node_modules/merge-refs/dist/esm/index.js";
+import m, { forwardRef as q } from "react";
+import { textFieldRecipe as x } from "../../styled-system/recipes/text-field-recipe.js";
+import { cx as z } from "../../styled-system/css/cx.js";
+import { css as b } from "../../styled-system/css/css.js";
+const L = q(
   ({
-    placeholder: C,
-    label: c,
-    description: a,
-    required: p,
-    invalidMessage: d,
-    invalid: o,
-    type: N = "text",
-    disabled: l,
-    onChange: u,
-    value: y,
-    className: _,
-    leftContent: g,
-    rightContent: h,
-    ...t
+    placeholder: F,
+    label: d,
+    description: i,
+    required: u,
+    invalidMessage: c,
+    invalid: a,
+    type: S = "text",
+    disabled: n,
+    onChange: h,
+    value: f,
+    className: V,
+    leftContent: N,
+    rightContent: p,
+    ...l
   }, w) => {
-    const r = m.useRef(null), R = q(r, w), [F, W] = S.splitVariantProps(t), s = S(F), k = a || o && d, [T, V] = m.useState(t.defaultValue || y), x = t.id || m.useId(), I = () => {
-      var b;
-      const i = {
+    const o = m.useRef(null), y = W(o, w), [C, P] = x.splitVariantProps(l), t = x(C), _ = i || a && c, [j, I] = m.useState(l.defaultValue || f), v = l.id || m.useId(), k = () => {
+      var R;
+      const s = {
         target: { value: "" }
       };
-      f(i), (b = t.onReset) == null || b.call(t, i), r.current && (r.current.value = "");
-    }, f = (i) => {
-      V(i.target.value), u && u(i);
+      g(s), (R = l.onReset) == null || R.call(l, s), o.current && (o.current.value = "");
+    }, g = (s) => {
+      I(s.target.value), h && h(s);
     };
-    return /* @__PURE__ */ n("div", { className: A(s.root, _), children: [
-      c ? /* @__PURE__ */ n("label", { className: s.label, htmlFor: x, children: [
-        c,
-        p && /* @__PURE__ */ e("span", { className: s.required, children: "必須" })
+    return /* @__PURE__ */ r("div", { className: z(t.root, V), children: [
+      d ? /* @__PURE__ */ r("label", { className: t.label, htmlFor: v, children: [
+        d,
+        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: "必須" })
       ] }) : null,
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ r(
         "div",
         {
-          className: s.inputWrapper,
-          "data-invalid": o ? !0 : void 0,
-          "data-disabled": l ? !0 : void 0,
+          className: t.inputWrapper,
+          "data-invalid": a ? !0 : void 0,
+          "data-disabled": n ? !0 : void 0,
           children: [
-            g ? /* @__PURE__ */ e("div", { className: s.leftContent, children: g }) : /* @__PURE__ */ e("div", {}),
+            N ? /* @__PURE__ */ e("div", { className: t.leftContent, children: N }) : /* @__PURE__ */ e("div", {}),
             /* @__PURE__ */ e(
               "input",
               {
-                ref: R,
-                id: x,
-                placeholder: C,
-                required: p,
-                disabled: l,
-                value: y,
-                type: N,
-                className: s.input,
-                onChange: f,
-                ...W
+                ref: y,
+                id: v,
+                placeholder: F,
+                required: u,
+                disabled: n,
+                value: f,
+                type: S,
+                className: t.input,
+                onChange: g,
+                ...P
               }
             ),
-            h ? /* @__PURE__ */ e("div", { className: s.rightContent, children: h }) : /* @__PURE__ */ e("div", { className: s.icon, children: !l && /* disabledの場合はアイコンを表示しない */
-            (o ? /* @__PURE__ */ e(
+            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !n && /* disabledの場合はアイコンを表示しない */
+            (a ? /* @__PURE__ */ e(
               "span",
               {
-                className: v({
+                className: b({
                   color: "sd.system.color.impression.negative"
                 }),
-                children: /* @__PURE__ */ e(P, { width: 20, height: 20 })
+                children: /* @__PURE__ */ e(A, { width: 20, height: 20 })
               }
-            ) : T ? /* @__PURE__ */ e(
+            ) : j ? /* @__PURE__ */ e(
               "button",
               {
-                className: v({ cursor: "pointer" }),
-                onClick: I,
+                className: b({ cursor: "pointer" }),
+                onClick: k,
                 "aria-label": "値をクリア",
-                children: /* @__PURE__ */ e(j, { width: 20, height: 20 })
+                children: /* @__PURE__ */ e(T, { width: 20, height: 20 })
               }
             ) : null) })
           ]
         }
       ),
-      k && /* @__PURE__ */ n("div", { className: s.messageField, children: [
-        a && /* @__PURE__ */ e("p", { className: s.description, children: a }),
-        o && d && /* @__PURE__ */ e("p", { className: s.invalidMessage, children: d })
+      _ && /* @__PURE__ */ r("div", { className: t.messageField, children: [
+        i && /* @__PURE__ */ e("p", { className: t.description, children: i }),
+        a && c && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: c })
       ] })
     ] });
   }
 );
 export {
-  K as TextField
+  L as TextField
 };

package/dist/components/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import { createToaster } from '@ark-ui/react';
-export declare const ToastStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "text" | "root" | "textGroup", {
+export declare const ToastStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "icon" | "text" | "textGroup", {
     variant: {
         default: {
             root: {

package/dist/components/TopAppBar/TopAppBar.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
 import { NotificationBadgeProps } from '../NotificationBadge';
-declare const topAppBarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "left" | "title" | "root" | "buttonContainer", {
+declare const topAppBarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "left" | "root" | "title" | "buttonContainer", {
     type: {
         navbar: {};
         titleBar: {};

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/CheckBox/index.ts';
 export * from './components/ChoiceBox/index.ts';
 export * from './components/DashboardWidget/index.ts';
 export * from './components/DataTable/index.ts';
+export * from './components/DatePicker/index.ts';
 export * from './components/Divider/index.ts';
 export * from './components/Drawer/index.ts';
 export * from './components/DropdownMenu/index.ts';