@serendie/ui 1.0.1 → 2.0.0-dev.202507180004

package/dist/components/DataTable/table/HeaderRow.js

@@ -0,0 +1,40 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { flexRender as i } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { DataTable as t } from "../index.js";
+import { css as a } from "../../../styled-system/css/css.js";
+import "../../../styled-system/helpers.js";
+function p({
+  headerGroup: l,
+  enableRowSelection: n,
+  table: o
+}) {
+  return /* @__PURE__ */ m(t.Tr, { children: [
+    n && /* @__PURE__ */ r(
+      t.HeaderCheckbox,
+      {
+        checked: o.getIsSomeRowsSelected() ? "indeterminate" : !!o.getIsAllRowsSelected(),
+        onChange: o.getToggleAllRowsSelectedHandler(),
+        value: "select-all",
+        className: a({
+          verticalAlign: "middle"
+        })
+      }
+    ),
+    l.headers.map((e) => {
+      const c = e.column.getCanSort(), s = e.column.getIsSorted();
+      return /* @__PURE__ */ r(
+        t.HeaderCell,
+        {
+          sortable: c,
+          sortDirection: s,
+          onSort: () => e.column.toggleSorting(),
+          children: i(e.column.columnDef.header, e.getContext())
+        },
+        e.id
+      );
+    })
+  ] }, l.id);
+}
+export {
+  p as HeaderRow
+};

package/dist/components/DataTable/table/Root.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function Root({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Root.js

@@ -0,0 +1,34 @@
+import { jsx as e } from "react/jsx-runtime";
+import "../../../styled-system/css/css.js";
+import { cx as s } from "../../../styled-system/css/cx.js";
+import "../../../styled-system/helpers.js";
+import { sva as a } from "../../../styled-system/css/sva.js";
+const l = a({
+  slots: ["container", "table"],
+  base: {
+    container: {
+      border: "1px solid",
+      borderColor: "sd.system.color.component.outline",
+      borderRadius: "4px",
+      overflow: "hidden",
+      boxShadow: "sm",
+      background: "sd.system.color.component.surface",
+      overflowX: "auto"
+    },
+    table: {
+      w: "100%",
+      borderCollapse: "separate",
+      borderSpacing: 0
+    }
+  }
+});
+function b({
+  children: r,
+  className: t
+}) {
+  const o = l();
+  return /* @__PURE__ */ e("div", { className: s(o.container, t), children: /* @__PURE__ */ e("table", { role: "table", className: o.table, children: r }) });
+}
+export {
+  b as Root
+};

package/dist/components/DataTable/table/Row.d.ts

@@ -0,0 +1,5 @@
+import { Row as TanstackRow } from '@tanstack/react-table';
+export declare function Row<TData>({ row, enableRowSelection, }: {
+    row: TanstackRow<TData>;
+    enableRowSelection?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Row.js

@@ -0,0 +1,90 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { flexRender as l } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { DataTable as o } from "../index.js";
+import "../../../styled-system/css/css.js";
+import { cva as m } from "../../../styled-system/css/cva.js";
+import "../../../styled-system/helpers.js";
+const c = m({
+  base: {
+    _hover: {
+      _after: {
+        content: "''",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        w: "100%",
+        h: "100%",
+        bg: "sd.system.color.interaction.hoveredVariant",
+        zIndex: 1
+      }
+    }
+  },
+  variants: {
+    state: {
+      selected: {
+        base: {
+          _after: {
+            content: "''",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            pointerEvents: "none",
+            w: "100%",
+            h: "100%",
+            bg: "sd.system.color.component.inversePrimary",
+            zIndex: 1,
+            mixBlendMode: "multiply"
+          },
+          _hover: {
+            _after: {
+              content: "''",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              pointerEvents: "none",
+              w: "100%",
+              h: "100%",
+              bg: "color-mix(in srgb, token(colors.sd.system.color.component.inversePrimary) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+              zIndex: 1,
+              mixBlendMode: "multiply"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function v({
+  row: e,
+  enableRowSelection: r
+}) {
+  return /* @__PURE__ */ i(
+    o.Tr,
+    {
+      className: c({
+        state: e.getIsSelected() ? "selected" : void 0
+      }),
+      children: [
+        r && /* @__PURE__ */ n(
+          o.BodyCheckbox,
+          {
+            checked: e.getIsSelected(),
+            onChange: e.getToggleSelectedHandler(),
+            value: e.id
+          }
+        ),
+        e.getVisibleCells().map((t) => {
+          const s = a(t);
+          return /* @__PURE__ */ n(o.BodyCell, { type: s, children: l(t.column.columnDef.cell, t.getContext()) }, t.id);
+        })
+      ]
+    }
+  );
+}
+function a(e) {
+  return e.column.columnDef.meta && "getType" in e.column.columnDef.meta && typeof e.column.columnDef.meta.getType == "function" ? e.column.columnDef.meta.getType(e.row.original) : "default";
+}
+export {
+  v as Row
+};

package/dist/components/DataTable/table/Tbody.d.ts

@@ -0,0 +1 @@
+export declare function Tbody({ children, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Tbody.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+function b({ children: o, ...r }) {
+  return /* @__PURE__ */ t("tbody", { ...r, children: o });
+}
+export {
+  b as Tbody
+};

package/dist/components/DataTable/table/Thead.d.ts

@@ -0,0 +1 @@
+export declare function Thead({ children, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Thead.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+function n({ children: r, ...t }) {
+  return /* @__PURE__ */ e("thead", { ...t, children: r });
+}
+export {
+  n as Thead
+};

package/dist/components/DataTable/table/Tr.d.ts

@@ -0,0 +1 @@
+export declare function Tr({ children, className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/Tr.js

@@ -0,0 +1,27 @@
+import { jsx as i } from "react/jsx-runtime";
+import { css as m } from "../../../styled-system/css/css.js";
+import { cx as e } from "../../../styled-system/css/cx.js";
+import "../../../styled-system/helpers.js";
+function n({
+  children: r,
+  className: o,
+  ...t
+}) {
+  return /* @__PURE__ */ i(
+    "tr",
+    {
+      role: "row",
+      className: e(
+        m({
+          position: "relative"
+        }),
+        o
+      ),
+      ...t,
+      children: r
+    }
+  );
+}
+export {
+  n as Tr
+};

package/dist/components/DataTable/table/index.d.ts

@@ -0,0 +1,10 @@
+export { Root } from './Root';
+export { Thead } from './Thead';
+export { Tr } from './Tr';
+export { Row } from './Row';
+export { HeaderRow } from './HeaderRow';
+export { BodyCell } from './BodyCell';
+export { HeaderCheckbox } from './HeaderCheckbox';
+export { BodyCheckbox } from './BodyCheckbox';
+export { Tbody } from './Tbody';
+export { HeaderCell } from './HeaderCell';

package/dist/components/DataTable/table/index.js

@@ -0,0 +1,22 @@
+import { Root as e } from "./Root.js";
+import { Thead as t } from "./Thead.js";
+import { Tr as m } from "./Tr.js";
+import { Row as d } from "./Row.js";
+import { HeaderRow as l } from "./HeaderRow.js";
+import { BodyCell as b } from "./BodyCell.js";
+import { HeaderCheckbox as y } from "./HeaderCheckbox.js";
+import { BodyCheckbox as R } from "./BodyCheckbox.js";
+import { Tbody as c } from "./Tbody.js";
+import { HeaderCell as w } from "./HeaderCell.js";
+export {
+  b as BodyCell,
+  R as BodyCheckbox,
+  w as HeaderCell,
+  y as HeaderCheckbox,
+  l as HeaderRow,
+  e as Root,
+  d as Row,
+  c as Tbody,
+  t as Thead,
+  m as Tr
+};

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import { MenuRootProps } from '@ark-ui/react';
-export declare const DropdownMenuStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon">>;
+export declare const DropdownMenuStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "button" | "item" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "button" | "item" | "itemGroup" | "itemIcon" | "buttonIcon">>;
 export type MenuItemProps = {
     value: string;
     label: string;

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/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/RadioButton/RadioButton.d.ts

@@ -20,7 +20,7 @@ export declare const radioUncheckedIconCss: {
         color: string;
     };
 };
-export declare const RadioButtonStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "itemControl" | "checkedIcon" | "itemTextGroup" | "itemText" | "helperText" | "unCheckedIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"item" | "itemControl" | "checkedIcon" | "itemTextGroup" | "itemText" | "helperText" | "unCheckedIcon">>;
+export declare const RadioButtonStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"itemControl" | "checkedIcon" | "itemTextGroup" | "itemText" | "helperText" | "item" | "unCheckedIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"itemControl" | "checkedIcon" | "itemTextGroup" | "itemText" | "helperText" | "item" | "unCheckedIcon">>;
 type RadioButtonItemProps = {
     label?: string;
     helperText?: string;

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<"combobox" | "input" | "icon" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
     size: {
         medium: {
             iconBox: {
@@ -46,6 +46,8 @@ export declare const SearchStyle: import('../../../styled-system/types').SlotRec
         };
     };
 }>;
-type SearchStyleProps = ComboboxRootProps<string> & RecipeVariantProps<typeof SearchStyle>;
+type SearchStyleProps = ComboboxRootProps<string> & RecipeVariantProps<typeof SearchStyle> & {
+    items?: string[];
+};
 export declare const Search: React.FC<SearchStyleProps>;
 export {};

package/dist/components/Search/Search.js

@@ -1,23 +1,24 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { SerendieSymbolMagnifyingGlass as l, SerendieSymbolClose as c } from "@serendie/symbols";
+import { SerendieSymbolMagnifyingGlass as p, SerendieSymbolClose as g } from "@serendie/symbols";
 import "../../styled-system/css/css.js";
-import { cx as p } from "../../styled-system/css/cx.js";
+import { cx as y } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
-import { sva as g } from "../../styled-system/css/sva.js";
+import { sva as x } from "../../styled-system/css/sva.js";
 import "react";
 import "../../styled-system/jsx/is-valid-prop.js";
-import { Box as y } from "../../styled-system/jsx/box.js";
-import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { ComboboxRoot as b } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
-import { ComboboxControl as u } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
-import { ComboboxInput as h } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-input.js";
-import { ComboboxTrigger as f } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-trigger.js";
-import { ComboboxPositioner as S } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-positioner.js";
-import { ComboboxContent as w } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-content.js";
-import { ComboboxItemGroup as C } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-group.js";
-import { ComboboxItem as I } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item.js";
-import { ComboboxItemText as v } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-text.js";
-const m = g({
+import { Box as b } from "../../styled-system/jsx/box.js";
+import { createListCollection as u } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
+import { Portal as h } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { ComboboxRoot as f } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
+import { ComboboxControl as S } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
+import { ComboboxInput as C } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-input.js";
+import { ComboboxTrigger as w } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-trigger.js";
+import { ComboboxPositioner as I } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-positioner.js";
+import { ComboboxContent as v } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-content.js";
+import { ComboboxItemGroup as B } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-group.js";
+import { ComboboxItem as N } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item.js";
+import { ComboboxItemText as _ } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-text.js";
+const d = x({
   slots: [
     "input",
     "control",
@@ -146,15 +147,16 @@ const m = g({
   defaultVariants: {
     size: "medium"
   }
-}), D = ({
+}), U = ({
   items: i = [],
-  ...d
+  ...a
 }) => {
-  const [a, t] = m.splitVariantProps(d), s = m(a);
+  const [r, l] = d.splitVariantProps(a), s = d(r), { collection: E, ...t } = l, n = u({ items: i });
   return /* @__PURE__ */ e(
-    b,
+    f,
     {
-      items: i,
+      ...t,
+      collection: n,
       lazyMount: !0,
       unmountOnExit: !0,
       positioning: {
@@ -163,36 +165,35 @@ const m = g({
           crossAxis: 0
         }
       },
-      ...t,
       children: [
-        /* @__PURE__ */ e(u, { className: p(s.control, t.className), children: [
-          /* @__PURE__ */ o("div", { className: s.iconBox, children: /* @__PURE__ */ o(l, { className: s.icon }) }),
-          /* @__PURE__ */ o(h, { className: s.input }),
-          i.length > 0 && /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(c, { className: s.icon }) }) })
+        /* @__PURE__ */ e(S, { className: y(s.control, t.className), children: [
+          /* @__PURE__ */ o("div", { className: s.iconBox, children: /* @__PURE__ */ o(p, { className: s.icon }) }),
+          /* @__PURE__ */ o(C, { className: s.input }),
+          i.length > 0 && /* @__PURE__ */ o(w, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(g, { className: s.icon }) }) })
         ] }),
-        i.length > 0 && /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(S, { children: /* @__PURE__ */ o(w, { className: s.combobox, children: /* @__PURE__ */ o(C, { id: "framework", children: i.map((n, r) => /* @__PURE__ */ e(
-          I,
+        i.length > 0 && /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(v, { className: s.combobox, children: /* @__PURE__ */ o(B, { id: "framework", children: n.items.map((m, c) => /* @__PURE__ */ e(
+          N,
           {
-            item: n,
+            item: m,
             className: s.comboboxItem,
             children: [
               /* @__PURE__ */ o(
-                y,
+                b,
                 {
                   w: "sd.system.dimension.spacing.large",
                   h: "sd.system.dimension.spacing.large"
                 }
               ),
-              /* @__PURE__ */ o(v, { children: n })
+              /* @__PURE__ */ o(_, { children: m })
             ]
           },
-          r
+          c
         )) }) }) }) })
       ]
     }
   );
 };
 export {
-  D as Search,
-  m as SearchStyle
+  U as Search,
+  d as SearchStyle
 };

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" | "iconBox" | "valueText" | "trigger", {
+export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "item" | "valueText" | "iconBox" | "trigger", {
     size: {
         medium: {
             root: {
@@ -55,6 +55,7 @@ type Props = {
     label?: string;
     required?: boolean;
     invalidMessage?: string;
+    items?: selectItem[];
 };
 type selectItem = {
     label: string;

package/dist/components/Select/Select.js

@@ -1,22 +1,22 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { SerendieSymbolChevronDown as h } from "@serendie/symbols";
-import { useId as b } from "react";
+import { SerendieSymbolChevronDown as S } from "@serendie/symbols";
 import { css as d } from "../../styled-system/css/css.js";
 import { cx as f } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
-import { sva as S } from "../../styled-system/css/sva.js";
-import { List as v } from "../List/List.js";
-import { ListItem as w } from "../List/ListItem.js";
-import { Portal as _ } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { SelectRoot as C } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
-import { SelectLabel as T } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
-import { SelectControl as N } from "../../node_modules/@ark-ui/react/dist/components/select/select-control.js";
-import { SelectTrigger as z } from "../../node_modules/@ark-ui/react/dist/components/select/select-trigger.js";
-import { SelectValueText as R } from "../../node_modules/@ark-ui/react/dist/components/select/select-value-text.js";
-import { SelectPositioner as I } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
-import { SelectContent as V } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
-import { SelectItem as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
-const l = S({
+import { sva as v } from "../../styled-system/css/sva.js";
+import { List as w } from "../List/List.js";
+import { ListItem as _ } from "../List/ListItem.js";
+import { createListCollection as C } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
+import { Portal as T } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { SelectRoot as N } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
+import { SelectLabel as z } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
+import { SelectControl as R } from "../../node_modules/@ark-ui/react/dist/components/select/select-control.js";
+import { SelectTrigger as V } from "../../node_modules/@ark-ui/react/dist/components/select/select-trigger.js";
+import { SelectValueText as L } from "../../node_modules/@ark-ui/react/dist/components/select/select-value-text.js";
+import { SelectPositioner as P } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
+import { SelectContent as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
+import { SelectItem as I } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
+const n = v({
   slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
   base: {
     root: {
@@ -153,22 +153,28 @@ const l = S({
   defaultVariants: {
     size: "medium"
   }
-}), Y = ({
+}), M = ({
   placeholder: c = "",
   label: r,
   required: p,
-  invalid: m,
-  invalidMessage: a,
+  invalid: a,
+  invalidMessage: m,
   className: y,
-  ...n
+  items: g = [],
+  ...u
 }) => {
-  const [o, g] = l.splitVariantProps(n), s = l(o), u = b();
+  const [t, x] = n.splitVariantProps(u), o = n(t), { collection: O, ...h } = x, l = C({
+    items: g,
+    itemToString: (s) => s.label,
+    itemToValue: (s) => s.value
+  });
   return /* @__PURE__ */ i(
-    C,
+    N,
     {
-      ...g,
-      invalid: m,
-      className: f(s.root, y),
+      ...h,
+      collection: l,
+      invalid: a,
+      className: f(o.root, y),
       positioning: {
         sameWidth: !0,
         offset: {
@@ -177,9 +183,9 @@ const l = S({
         }
       },
       children: [
-        r && o.size != "small" && // smallの場合はラベルを表示しない
+        r && t.size != "small" && // smallの場合はラベルを表示しない
         /* @__PURE__ */ i(
-          T,
+          z,
           {
             className: d({
               textStyle: {
@@ -203,17 +209,17 @@ const l = S({
             ]
           }
         ),
-        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ i(z, { className: s.trigger, children: [
+        /* @__PURE__ */ e(R, { children: /* @__PURE__ */ i(V, { className: o.trigger, children: [
           /* @__PURE__ */ e(
-            R,
+            L,
             {
               placeholder: c,
-              className: s.valueText
+              className: o.valueText
             }
           ),
-          /* @__PURE__ */ e(h, { className: s.iconBox })
+          /* @__PURE__ */ e(S, { className: o.iconBox })
         ] }) }),
-        m && a && /* @__PURE__ */ e(
+        a && m && /* @__PURE__ */ e(
           "div",
           {
             className: d({
@@ -223,23 +229,23 @@ const l = S({
               },
               color: "sd.system.color.impression.negative"
             }),
-            children: a
+            children: m
           }
         ),
-        /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(V, { className: s.content, children: /* @__PURE__ */ e(v, { id: u, children: n.items.map((t, x) => /* @__PURE__ */ e(B, { item: t, children: /* @__PURE__ */ e(
-          w,
+        /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(B, { className: o.content, children: /* @__PURE__ */ e(w, { children: l.items.map((s, b) => /* @__PURE__ */ e(I, { item: s, children: /* @__PURE__ */ e(
+          _,
           {
-            title: t.label,
-            value: t.value,
-            className: s.item,
-            size: o.size == "small" ? "small" : void 0
+            title: s.label,
+            value: s.value,
+            className: o.item,
+            size: t.size == "small" ? "small" : void 0
           }
-        ) }, x)) }) }) }) })
+        ) }, b)) }) }) }) })
       ]
     }
   );
 };
 export {
-  Y as Select,
-  l as SelectStyle
+  M as Select,
+  n as SelectStyle
 };

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

@@ -1,6 +1,6 @@
 import { Tabs as ArkTabs } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const TabItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"badge" | "dot" | "trigger" | "badgeBox", import('../../../styled-system/types').SlotRecipeVariantRecord<"badge" | "dot" | "trigger" | "badgeBox">>;
+export declare const TabItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"dot" | "badge" | "trigger" | "badgeBox", import('../../../styled-system/types').SlotRecipeVariantRecord<"dot" | "badge" | "trigger" | "badgeBox">>;
 type TabItemBaseProps = {
     title: string;
     value: string;

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<"text" | "root" | "icon" | "textGroup", {
     variant: {
         default: {
             root: {