@serendie/ui 0.1.13 → 0.1.15

package/dist/components/AccordionGroup.d.ts

@@ -1,2 +1,2 @@
 import { Accordion } from '@ark-ui/react';
-export declare const AccordionGroup: import('../../styled-system/jsx').StyledComponent<import('react').ForwardRefExoticComponent<Accordion.RootProps & import('react').RefAttributes<HTMLDivElement>>, {}>;
+export declare const AccordionGroup: import('../../styled-system/types').StyledComponent<import('react').ForwardRefExoticComponent<Accordion.RootProps & import('react').RefAttributes<HTMLDivElement>>, {}>;

package/dist/components/DropdownMenu.js

@@ -1,4 +1,4 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import "../preset.js";
 import "./Accordion.js";
 import "./AccordionGroup.js";
@@ -7,9 +7,9 @@ import "./Badge.js";
 import "./Banner.js";
 import "../ui/styled-system/css/css.js";
 import "../ui/styled-system/helpers.js";
-import { sva as l } from "../ui/styled-system/css/sva.js";
+import { sva as c } from "../ui/styled-system/css/sva.js";
 import "./BottomNavigationItem.js";
-import { Button as c } from "./Button.js";
+import { Button as l } from "./Button.js";
 import "./CheckBox.js";
 import "./ChoiceBox.js";
 import "./DashboardWidget.js";
@@ -23,7 +23,6 @@ import "./ProgressIndicator.js";
 import "./RadioButton.js";
 import "./Search.js";
 import "./Select.js";
-import "react";
 import "./Switch.js";
 import "./TabItem.js";
 import "./Tabs.js";
@@ -31,15 +30,15 @@ import "./TextArea.js";
 import "./TextField.js";
 import "./Toast.js";
 import "./TopAppBar.js";
-import { SerendieSymbol as s } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+import { SerendieSymbol as m } from "../node_modules/@serendie/symbols/dist/symbols2.js";
 import { Portal as u } from "../node_modules/@ark-ui/react/dist/components/portal/portal.js";
 import { MenuRoot as g } from "../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
 import { MenuTrigger as h } from "../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
 import { MenuPositioner as f } from "../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
-import { MenuContent as b } from "../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
-import { MenuItemGroup as x } from "../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
+import { MenuContent as x } from "../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
+import { MenuItemGroup as b } from "../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
 import { MenuItem as S } from "../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
-const v = l({
+const v = c({
   slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
   base: {
     content: {
@@ -110,65 +109,77 @@ const v = l({
       transition: "transform 0.2s"
     }
   }
-}), pe = ({
+}), po = ({
   styleType: r = "default",
   title: i,
   items: d,
-  disabled: m,
+  disabled: s,
   icon: p,
   ...a
 }) => {
-  const o = v();
-  return /* @__PURE__ */ n(g, { ...a, children: [
-    /* @__PURE__ */ e(h, { asChild: !0, children: r === "iconButton" ? /* @__PURE__ */ e(
-      y,
-      {
-        icon: p || /* @__PURE__ */ e(
-          s,
+  const e = v();
+  return /* @__PURE__ */ n(
+    g,
+    {
+      positioning: {
+        offset: {
+          mainAxis: 1,
+          crossAxis: 0
+        }
+      },
+      ...a,
+      children: [
+        /* @__PURE__ */ o(h, { asChild: !0, children: r === "iconButton" ? /* @__PURE__ */ o(
+          y,
           {
-            name: "menu",
-            size: 24,
-            className: o.buttonIcon
+            icon: p || /* @__PURE__ */ o(
+              m,
+              {
+                name: "menu",
+                size: 24,
+                className: e.buttonIcon
+              }
+            ),
+            shape: "rectangle",
+            disabled: s,
+            styleType: "outlined",
+            title: i
           }
-        ),
-        shape: "rectangle",
-        disabled: m,
-        styleType: "outlined",
-        title: i
-      }
-    ) : /* @__PURE__ */ e(
-      c,
-      {
-        styleType: "rectangle",
-        size: "medium",
-        disabled: m,
-        rightIcon: /* @__PURE__ */ e(
-          s,
+        ) : /* @__PURE__ */ o(
+          l,
           {
-            name: "chevron-down",
-            size: 24,
-            className: o.buttonIcon
+            styleType: "rectangle",
+            size: "medium",
+            disabled: s,
+            rightIcon: /* @__PURE__ */ o(
+              m,
+              {
+                name: "chevron-down",
+                size: 24,
+                className: e.buttonIcon
+              }
+            ),
+            className: e.button,
+            children: i
           }
-        ),
-        className: o.button,
-        children: i
-      }
-    ) }),
-    /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(b, { className: o.content, children: /* @__PURE__ */ e(x, { className: o.itemGroup, children: d.map((t) => /* @__PURE__ */ n(
-      S,
-      {
-        value: t.value,
-        className: o.item,
-        children: [
-          t.icon && /* @__PURE__ */ e("div", { className: o.itemIcon, children: t.icon }),
-          t.label
-        ]
-      },
-      t.value
-    )) }) }) }) })
-  ] });
+        ) }),
+        /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(x, { className: e.content, children: /* @__PURE__ */ o(b, { className: e.itemGroup, children: d.map((t) => /* @__PURE__ */ n(
+          S,
+          {
+            value: t.value,
+            className: e.item,
+            children: [
+              t.icon && /* @__PURE__ */ o("div", { className: e.itemIcon, children: t.icon }),
+              t.label
+            ]
+          },
+          t.value
+        )) }) }) }) })
+      ]
+    }
+  );
 };
 export {
-  pe as DropdownMenu,
+  po as DropdownMenu,
   v as DropdownMenuStyle
 };

package/dist/components/IconButton.d.ts

@@ -1,5 +1,4 @@
-import { default as React, ComponentProps } from 'react';
-import { RecipeVariantProps } from '../../styled-system/types';
+import { default as React } from 'react';
 export declare const IconButtonStyle: import('../../styled-system/types').RecipeRuntimeFn<{
     shape: {
         rectangle: {
@@ -74,8 +73,39 @@ export declare const IconButtonStyle: import('../../styled-system/types').Recipe
         };
     };
 }>;
-type ButtonProps = RecipeVariantProps<typeof IconButtonStyle> & ComponentProps<"button"> & {
-    icon: React.ReactElement;
+type StyleType = "filled" | "outlined" | "ghost";
+type Size = "large" | "medium" | "small";
+type RectangleProps = {
+    shape: "rectangle";
+    size?: Exclude<Size, "large">;
+};
+type CircleProps = {
+    shape: "circle";
+    size?: Exclude<Size, "large">;
+    styleType?: StyleType;
+};
+type CircleLargeProps = {
+    shape: "circle";
+    size: "large";
+    styleType?: Exclude<StyleType, "ghost">;
 };
-export declare const IconButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: React.ForwardRefExoticComponent<(Omit<{
+    shape?: "circle" | "rectangle" | undefined;
+    styleType?: "filled" | "outlined" | "ghost" | undefined;
+    size?: "small" | "large" | "medium" | 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;
+} & 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;
+} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon: React.ReactElement;
+} & CircleLargeProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/PasswordField.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { TextField } from './TextField';
+type PasswordFieldProps = Omit<React.ComponentProps<typeof TextField>, "type" | "rightContent"> & {
+    /**
+     * パスワードの表示/非表示切り替えを無効にする
+     */
+    disableToggle?: boolean;
+};
+export declare const PasswordField: React.ForwardRefExoticComponent<Omit<PasswordFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/Search.js

@@ -1,4 +1,4 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import "../ui/styled-system/css/css.js";
 import { cx as c } from "../ui/styled-system/css/cx.js";
 import "../ui/styled-system/helpers.js";
@@ -146,38 +146,53 @@ const a = p({
   defaultVariants: {
     size: "medium"
   }
-}), A = ({
-  items: e = [],
+}), q = ({
+  items: i = [],
   ...d
 }) => {
-  const [r, t] = a.splitVariantProps(d), s = a(r);
-  return /* @__PURE__ */ i(x, { items: e, lazyMount: !0, unmountOnExit: !0, ...t, children: [
-    /* @__PURE__ */ i(b, { className: c(s.control, t.className), children: [
-      /* @__PURE__ */ o("div", { className: s.iconBox, children: /* @__PURE__ */ o(m, { name: "magnifying-glass", className: s.icon }) }),
-      /* @__PURE__ */ o(u, { className: s.input }),
-      e.length > 0 && /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(m, { name: "close", className: s.icon }) }) })
-    ] }),
-    e.length > 0 && /* @__PURE__ */ o(y, { children: /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(S, { className: s.combobox, children: /* @__PURE__ */ o(w, { id: "framework", children: e.map((n, l) => /* @__PURE__ */ i(
-      C,
-      {
-        item: n,
-        className: s.comboboxItem,
-        children: [
-          /* @__PURE__ */ o(
-            g,
-            {
-              w: "sd.system.dimension.spacing.large",
-              h: "sd.system.dimension.spacing.large"
-            }
-          ),
-          /* @__PURE__ */ o(I, { children: n })
-        ]
+  const [r, n] = a.splitVariantProps(d), s = a(r);
+  return /* @__PURE__ */ e(
+    x,
+    {
+      items: i,
+      lazyMount: !0,
+      unmountOnExit: !0,
+      positioning: {
+        offset: {
+          mainAxis: 2,
+          crossAxis: 0
+        }
       },
-      l
-    )) }) }) }) })
-  ] });
+      ...n,
+      children: [
+        /* @__PURE__ */ e(b, { className: c(s.control, n.className), children: [
+          /* @__PURE__ */ o("div", { className: s.iconBox, children: /* @__PURE__ */ o(m, { name: "magnifying-glass", className: s.icon }) }),
+          /* @__PURE__ */ o(u, { className: s.input }),
+          i.length > 0 && /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(m, { name: "close", className: s.icon }) }) })
+        ] }),
+        i.length > 0 && /* @__PURE__ */ o(y, { children: /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(S, { className: s.combobox, children: /* @__PURE__ */ o(w, { id: "framework", children: i.map((t, l) => /* @__PURE__ */ e(
+          C,
+          {
+            item: t,
+            className: s.comboboxItem,
+            children: [
+              /* @__PURE__ */ o(
+                g,
+                {
+                  w: "sd.system.dimension.spacing.large",
+                  h: "sd.system.dimension.spacing.large"
+                }
+              ),
+              /* @__PURE__ */ o(I, { children: t })
+            ]
+          },
+          l
+        )) }) }) }) })
+      ]
+    }
+  );
 };
 export {
-  A as Search,
+  q as Search,
   a as SearchStyle
 };

package/dist/components/Select.d.ts

@@ -22,7 +22,9 @@ export declare const SelectStyle: import('../../styled-system/types').SlotRecipe
         };
         small: {
             root: {
-                gridTemplateColumns: "minmax(auto, 150px)";
+                "@layer components": {
+                    width: "min(100%, 150px)";
+                };
                 textStyle: {
                     base: "sd.system.typography.body.small_compact";
                 };

package/dist/components/Select.js

@@ -3,8 +3,8 @@ import { css as d } from "../ui/styled-system/css/css.js";
 import { cx as h } from "../ui/styled-system/css/cx.js";
 import "../ui/styled-system/helpers.js";
 import { sva as b } from "../ui/styled-system/css/sva.js";
-import { useId as S } from "react";
-import { ListItem as f } from "./ListItem.js";
+import { useId as f } from "react";
+import { ListItem as S } from "./ListItem.js";
 import { List as v } from "./List.js";
 import { SerendieSymbol as w } from "../node_modules/@serendie/symbols/dist/symbols2.js";
 import { Portal as _ } from "../node_modules/@ark-ui/react/dist/components/portal/portal.js";
@@ -16,12 +16,14 @@ import { SelectValueText as R } from "../node_modules/@ark-ui/react/dist/compone
 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 n = b({
+const l = b({
   slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
   base: {
     root: {
       display: "inline-grid",
-      gridTemplateColumns: "minmax(auto, 300px)",
+      "@layer components": {
+        width: "min(100%, 300px)"
+      },
       rowGap: "sd.system.dimension.spacing.extraSmall"
     },
     trigger: {
@@ -120,7 +122,9 @@ const n = b({
       },
       small: {
         root: {
-          gridTemplateColumns: "minmax(auto, 150px)",
+          "@layer components": {
+            width: "min(100%, 150px)"
+          },
           textStyle: {
             base: "sd.system.typography.body.small_compact"
           }
@@ -151,23 +155,29 @@ const n = b({
   }
 }), Y = ({
   placeholder: c = "",
-  label: m,
+  label: r,
   required: p,
-  invalid: a,
-  invalidMessage: r,
+  invalid: m,
+  invalidMessage: a,
   className: y,
-  ...l
+  ...n
 }) => {
-  const [o, g] = n.splitVariantProps(l), s = n(o), u = S();
+  const [o, g] = l.splitVariantProps(n), s = l(o), u = f();
   return /* @__PURE__ */ i(
     C,
     {
       ...g,
-      invalid: a,
+      invalid: m,
       className: h(s.root, y),
-      positioning: { sameWidth: !0 },
+      positioning: {
+        sameWidth: !0,
+        offset: {
+          mainAxis: 1,
+          crossAxis: 0
+        }
+      },
       children: [
-        m && o.size != "small" && // smallの場合はラベルを表示しない
+        r && o.size != "small" && // smallの場合はラベルを表示しない
         /* @__PURE__ */ i(
           T,
           {
@@ -178,7 +188,7 @@ const n = b({
               }
             }),
             children: [
-              m,
+              r,
               p && // とりあえず必須メッセージはハードコード
               /* @__PURE__ */ e(
                 "span",
@@ -210,7 +220,7 @@ const n = b({
             }
           )
         ] }) }),
-        a && r && /* @__PURE__ */ e(
+        m && a && /* @__PURE__ */ e(
           "div",
           {
             className: d({
@@ -220,11 +230,11 @@ const n = b({
               },
               color: "sd.system.color.impression.negative"
             }),
-            children: r
+            children: a
           }
         ),
-        /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(V, { className: s.content, children: /* @__PURE__ */ e(v, { id: u, children: l.items.map((t, x) => /* @__PURE__ */ e(B, { item: t, children: /* @__PURE__ */ e(
-          f,
+        /* @__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(
+          S,
           {
             title: t.label,
             value: t.value,
@@ -238,5 +248,5 @@ const n = b({
 };
 export {
   Y as Select,
-  n as SelectStyle
+  l as SelectStyle
 };

package/dist/components/TextArea.js

@@ -4,8 +4,8 @@ import _ from "../node_modules/merge-refs/dist/esm/index.js";
 import "../ui/styled-system/css/css.js";
 import { cx as w } from "../ui/styled-system/css/cx.js";
 import "../ui/styled-system/helpers.js";
-import { sva as N } from "../ui/styled-system/css/sva.js";
-const c = N({
+import { sva as C } from "../ui/styled-system/css/sva.js";
+const c = C({
   slots: [
     "root",
     "label",
@@ -44,6 +44,7 @@ const c = N({
       outlineWidth: "sd.system.dimension.border.medium",
       outlineColor: "sd.system.color.component.outline",
       borderRadius: "sd.system.dimension.radius.medium",
+      backgroundColor: "sd.system.color.component.surface",
       _focusWithin: {
         outlineWidth: "sd.system.dimension.border.thick",
         outlineColor: "sd.system.color.impression.primary"
@@ -96,7 +97,7 @@ const c = N({
       }
     }
   }
-}), k = v(
+}), j = v(
   ({
     placeholder: y,
     label: r,
@@ -142,5 +143,5 @@ const c = N({
   }
 );
 export {
-  k as TextArea
+  j as TextArea
 };

package/dist/components/TextField.d.ts

@@ -4,4 +4,6 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     description?: string;
     invalid?: boolean;
     invalidMessage?: string;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
 } & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;