@serendie/ui 2.2.4 → 2.2.5-dev.202510301500

package/dist/components/RadioButton/RadioButton.js

@@ -7,7 +7,7 @@ import { css as g } from "../../styled-system/css/css.js";
 import { RadioGroupItem as I } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
 import { RadioGroupItemContext as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
 import { RadioGroupItemControl as b } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
-import { RadioGroupItemText as c } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-text.js";
+import { RadioGroupItemText as m } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-text.js";
 import { RadioGroupItemHiddenInput as C } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
 const k = {
   flexShrink: 0,
@@ -22,11 +22,11 @@ const k = {
     color: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
 }, _ = {
-  color: "sd.system.color.component.outlineVariant",
+  color: "sd.system.color.component.outlineDim",
   _disabled: {
-    color: "color-mix(in srgb, {colors.sd.system.color.component.outlineVariant}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
+    color: "color-mix(in srgb, {colors.sd.system.color.component.outlineDim}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
-}, m = f({
+}, c = f({
   slots: [
     "item",
     "itemControl",
@@ -74,14 +74,14 @@ const k = {
       }
     }
   }
-}), E = ({
+}), V = ({
   value: n,
   label: t,
   helperText: s,
   className: d,
   ...a
 }) => {
-  const [l, p] = m.splitVariantProps(a), o = m(l), y = i(
+  const [l, p] = c.splitVariantProps(a), o = c(l), y = i(
     o.item,
     s && g({ alignItems: "flex-start" })
   );
@@ -94,8 +94,8 @@ const k = {
       children: [
         /* @__PURE__ */ e(S, { children: (u) => /* @__PURE__ */ e(b, { className: o.itemControl, asChild: !0, children: u.checked ? /* @__PURE__ */ e(x, { className: o.checkedIcon }) : /* @__PURE__ */ e(h, { className: o.unCheckedIcon }) }) }),
         /* @__PURE__ */ r("div", { className: o.itemTextGroup, children: [
-          t && /* @__PURE__ */ e(c, { className: o.itemText, children: t }),
-          s && /* @__PURE__ */ e(c, { className: o.helperText, children: s })
+          t && /* @__PURE__ */ e(m, { className: o.itemText, children: t }),
+          s && /* @__PURE__ */ e(m, { className: o.helperText, children: s })
         ] }),
         /* @__PURE__ */ e(C, {})
       ]
@@ -103,8 +103,8 @@ const k = {
   );
 };
 export {
-  E as RadioButton,
-  m as RadioButtonStyle,
+  V as RadioButton,
+  c as RadioButtonStyle,
   R as radioCheckedIconCss,
   k as radioIconCss,
   _ as radioUncheckedIconCss

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<"input" | "icon" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
+export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "input" | "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" | "root" | "item" | "valueText" | "iconBox" | "trigger", {
+export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "content" | "root" | "valueText" | "iconBox" | "trigger", {
     size: {
         medium: {
             root: {

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<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb">>;
+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">>;
 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<"root" | "list", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "list">>;
+export declare const TabsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root", import('../../../styled-system/types').SlotRecipeVariantRecord<"list" | "root">>;
 export declare const Tabs: ({ children, className, ...props }: ArkTabs.RootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextArea.d.ts

@@ -6,4 +6,5 @@ export declare const TextArea: React.ForwardRefExoticComponent<{
     invalidMessage?: string;
     autoAdjustHeight?: boolean;
     requiredLabel?: string;
+    fullWidth?: boolean;
 } & Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TextArea/TextArea.js

@@ -93,9 +93,16 @@ const p = C({
           minHeight: "2lh"
         }
       }
+    },
+    fullWidth: {
+      true: {
+        root: {
+          width: "100%"
+        }
+      }
     }
   }
-}), W = w(
+}), A = w(
   ({
     placeholder: y,
     label: r,
@@ -104,11 +111,11 @@ const p = C({
     requiredLabel: u,
     invalidMessage: o,
     invalid: a,
-    disabled: n,
+    disabled: l,
     className: g,
-    ...l
-  }, x) => {
-    const h = c.useRef(null), b = _(h, x), [f, S] = p.splitVariantProps(l), e = p(f), v = t || a && o, m = l.id || c.useId();
+    ...n
+  }, h) => {
+    const x = c.useRef(null), b = _(x, h), [f, S] = p.splitVariantProps(n), e = p(f), v = t || a && o, m = n.id || c.useId();
     return /* @__PURE__ */ i("div", { className: N(e.root, g), children: [
       r ? /* @__PURE__ */ i("label", { className: e.label, htmlFor: m, children: [
         r,
@@ -119,7 +126,7 @@ const p = C({
         {
           className: e.wrapper,
           "data-invalid": a ? !0 : void 0,
-          "data-disabled": n ? !0 : void 0,
+          "data-disabled": l ? !0 : void 0,
           children: /* @__PURE__ */ s(
             "textarea",
             {
@@ -127,7 +134,7 @@ const p = C({
               id: m,
               placeholder: y,
               required: d,
-              disabled: n,
+              disabled: l,
               className: e.textarea,
               ...S
             }
@@ -142,5 +149,5 @@ const p = C({
   }
 );
 export {
-  W as TextArea
+  A as TextArea
 };

package/dist/components/TextField/TextField.d.ts

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

package/dist/components/TextField/TextField.js

@@ -2,7 +2,7 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { SerendieSymbolAlertCircle as T, SerendieSymbolClose as W } from "@serendie/symbols";
 import q from "../../node_modules/merge-refs/dist/esm/index.js";
 import m, { forwardRef as z } from "react";
-import { textFieldRecipe as x } from "../../styled-system/recipes/text-field-recipe.js";
+import { textFieldRecipe as x } from "../../recipes/textFieldRecipe.js";
 import { cx as B } from "../../styled-system/css/cx.js";
 import { css as b } from "../../styled-system/css/css.js";
 const M = z(
@@ -23,7 +23,9 @@ const M = z(
     rightContent: p,
     ...l
   }, y) => {
-    const o = m.useRef(null), C = q(o, y), [P, _] = x.splitVariantProps(l), t = x(P), j = i || a && c, [I, k] = m.useState(l.defaultValue || f), v = l.id || m.useId(), A = () => {
+    const o = m.useRef(null), C = q(o, y), [P, _] = x.splitVariantProps({
+      ...l
+    }), t = x(P), j = i || a && c, [I, k] = m.useState(l.defaultValue || f), v = l.id || m.useId(), A = () => {
       var R;
       const s = {
         target: { value: "" }

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<"root" | "icon" | "text" | "textGroup", {
+export declare const ToastStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "text" | "root" | "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" | "root" | "title" | "buttonContainer", {
+declare const topAppBarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "container" | "left" | "root" | "buttonContainer", {
     type: {
         navbar: {};
         titleBar: {};

package/dist/node_modules/@serendie/design-token/dist/panda-tokens.js

@@ -464,10 +464,13 @@ const e = {
             inversePrimary: {
               value: "#EFF2FC"
             },
+            outlineBright: {
+              value: "#E4E4E3"
+            },
             outline: {
               value: "#D1D0CD"
             },
-            outlineVariant: {
+            outlineDim: {
               value: "#8C8B87"
             },
             scrim: {
@@ -1481,10 +1484,13 @@ const e = {
                   inversePrimary: {
                     value: "#D9F6FC"
                   },
+                  outlineBright: {
+                    value: "#E4E4E3"
+                  },
                   outline: {
                     value: "#D1D0CD"
                   },
-                  outlineVariant: {
+                  outlineDim: {
                     value: "#8C8B87"
                   },
                   scrim: {
@@ -1773,10 +1779,13 @@ const e = {
                   inversePrimary: {
                     value: "#FAECE6"
                   },
+                  outlineBright: {
+                    value: "#E4E4E3"
+                  },
                   outline: {
                     value: "#D1D0CD"
                   },
-                  outlineVariant: {
+                  outlineDim: {
                     value: "#8C8B87"
                   },
                   scrim: {
@@ -2065,10 +2074,13 @@ const e = {
                   inversePrimary: {
                     value: "#F4ECF6"
                   },
+                  outlineBright: {
+                    value: "#E4E4E3"
+                  },
                   outline: {
                     value: "#D1D0CD"
                   },
-                  outlineVariant: {
+                  outlineDim: {
                     value: "#8C8B87"
                   },
                   scrim: {
@@ -2357,10 +2369,13 @@ const e = {
                   inversePrimary: {
                     value: "#FFF4F8"
                   },
+                  outlineBright: {
+                    value: "#E4E4E3"
+                  },
                   outline: {
                     value: "#D1D0CD"
                   },
-                  outlineVariant: {
+                  outlineDim: {
                     value: "#8C8B87"
                   },
                   scrim: {

package/dist/node_modules/@serendie/design-token/dist/tokens.js

@@ -269,8 +269,9 @@ const e = {
           inverseSurface: "#232322",
           inverseOnSurface: "#FFFFFF",
           inversePrimary: "#EFF2FC",
+          outlineBright: "#E4E4E3",
           outline: "#D1D0CD",
-          outlineVariant: "#8C8B87",
+          outlineDim: "#8C8B87",
           scrim: "#00000033"
         },
         interaction: {
@@ -671,8 +672,9 @@ const e = {
                   inverseSurface: "#232322",
                   inverseOnSurface: "#FFFFFF",
                   inversePrimary: "#D9F6FC",
+                  outlineBright: "#E4E4E3",
                   outline: "#D1D0CD",
-                  outlineVariant: "#8C8B87",
+                  outlineDim: "#8C8B87",
                   scrim: "#00000033"
                 },
                 interaction: {
@@ -791,8 +793,9 @@ const e = {
                   inverseSurface: "#232322",
                   inverseOnSurface: "#FFFFFF",
                   inversePrimary: "#FAECE6",
+                  outlineBright: "#E4E4E3",
                   outline: "#D1D0CD",
-                  outlineVariant: "#8C8B87",
+                  outlineDim: "#8C8B87",
                   scrim: "#00000033"
                 },
                 interaction: {
@@ -911,8 +914,9 @@ const e = {
                   inverseSurface: "#232322",
                   inverseOnSurface: "#FFFFFF",
                   inversePrimary: "#F4ECF6",
+                  outlineBright: "#E4E4E3",
                   outline: "#D1D0CD",
-                  outlineVariant: "#8C8B87",
+                  outlineDim: "#8C8B87",
                   scrim: "#00000033"
                 },
                 interaction: {
@@ -1031,8 +1035,9 @@ const e = {
                   inverseSurface: "#232322",
                   inverseOnSurface: "#FFFFFF",
                   inversePrimary: "#FFF4F8",
+                  outlineBright: "#E4E4E3",
                   outline: "#D1D0CD",
-                  outlineVariant: "#8C8B87",
+                  outlineDim: "#8C8B87",
                   scrim: "#00000033"
                 },
                 interaction: {

package/dist/preset.d.ts

@@ -116,10 +116,13 @@ declare const themes: {
                                 inversePrimary: {
                                     value: string;
                                 };
+                                outlineBright: {
+                                    value: string;
+                                };
                                 outline: {
                                     value: string;
                                 };
-                                outlineVariant: {
+                                outlineDim: {
                                     value: string;
                                 };
                                 scrim: {
@@ -408,10 +411,13 @@ declare const themes: {
                                 inversePrimary: {
                                     value: string;
                                 };
+                                outlineBright: {
+                                    value: string;
+                                };
                                 outline: {
                                     value: string;
                                 };
-                                outlineVariant: {
+                                outlineDim: {
                                     value: string;
                                 };
                                 scrim: {
@@ -700,10 +706,13 @@ declare const themes: {
                                 inversePrimary: {
                                     value: string;
                                 };
+                                outlineBright: {
+                                    value: string;
+                                };
                                 outline: {
                                     value: string;
                                 };
-                                outlineVariant: {
+                                outlineDim: {
                                     value: string;
                                 };
                                 scrim: {
@@ -992,10 +1001,13 @@ declare const themes: {
                                 inversePrimary: {
                                     value: string;
                                 };
+                                outlineBright: {
+                                    value: string;
+                                };
                                 outline: {
                                     value: string;
                                 };
-                                outlineVariant: {
+                                outlineDim: {
                                     value: string;
                                 };
                                 scrim: {
@@ -1177,9 +1189,6 @@ export declare const SerendiePreset: {
             breakpoints: {
                 expanded: string;
             };
-            recipes: {
-                textFieldRecipe: import('../styled-system/types').SlotRecipeConfig;
-            };
             tokens: {
                 sizes: {
                     sd: {
@@ -1788,10 +1797,13 @@ export declare const SerendiePreset: {
                                     inversePrimary: {
                                         value: string;
                                     };
+                                    outlineBright: {
+                                        value: string;
+                                    };
                                     outline: {
                                         value: string;
                                     };
-                                    outlineVariant: {
+                                    outlineDim: {
                                         value: string;
                                     };
                                     scrim: {

package/dist/preset.js

@@ -1,20 +1,18 @@
-import { SerendieRecipes as e } from "./recipes/index.js";
-import { SerendieTypography as r, SerendieTokens as n } from "./tokens/index.js";
+import { SerendieTypography as e, SerendieTokens as n } from "./tokens/index.js";
 import { getToken as t } from "./tokens/getToken.js";
 import { SerendieKeyframes as o } from "./tokens/keyframes/index.js";
-const { sd: s } = t(), { themes: f, ...i } = n, k = {
+const { sd: r } = t(), { themes: p, ...s } = n, a = {
   name: "serendie",
   theme: {
     extend: {
       breakpoints: {
-        expanded: s.system.dimension.breakpoint.expanded
+        expanded: r.system.dimension.breakpoint.expanded
       },
-      recipes: e,
       tokens: {
-        ...i
+        ...s
       },
       textStyles: {
-        ...r
+        ...e
       },
       keyframes: {
         ...o
@@ -23,6 +21,6 @@ const { sd: s } = t(), { themes: f, ...i } = n, k = {
   }
 };
 export {
-  k as SerendiePreset,
-  f as themes
+  a as SerendiePreset,
+  p as themes
 };

package/dist/recipes/textFieldRecipe.d.ts

@@ -1,6 +1,13 @@
-import { SlotRecipeConfig } from '../../styled-system/types';
 /**
  * 共通フォームスタイルレシピ
  * TextField、DatePicker、Select、TextAreaなどのフォームコンポーネントで共通のスタイルを定義
  */
-export declare const textFieldRecipe: SlotRecipeConfig;
+export declare const textFieldRecipe: import('../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "description" | "input" | "label" | "root" | "labelRequired" | "inputWrapper" | "leftContent" | "rightContent" | "messageField" | "invalidMessage", {
+    fullWidth: {
+        true: {
+            root: {
+                width: "100%";
+            };
+        };
+    };
+}>;

package/dist/recipes/textFieldRecipe.js

@@ -1,4 +1,5 @@
-const e = {
+import { sva as e } from "../styled-system/css/sva.js";
+const o = e({
   className: "input",
   slots: [
     "root",
@@ -100,8 +101,17 @@ const e = {
     invalidMessage: {
       color: "sd.system.color.impression.negative"
     }
+  },
+  variants: {
+    fullWidth: {
+      true: {
+        root: {
+          width: "100%"
+        }
+      }
+    }
   }
-};
+});
 export {
-  e as textFieldRecipe
+  o as textFieldRecipe
 };

package/dist/styled-system/css/cva.js

@@ -1,65 +1,60 @@
-import { memo as y, compact as C, splitProps as h, uniq as w, mergeProps as E } from "../helpers.js";
-import { mergeCss as f, css as P } from "./css.js";
-const g = (s) => ({
+import { memo as y, compact as C, splitProps as P, uniq as h, mergeProps as E } from "../helpers.js";
+import { mergeCss as u, css as K } from "./css.js";
+const j = (n) => ({
   base: {},
   variants: {},
   defaultVariants: {},
   compoundVariants: [],
-  ...s
+  ...n
 });
-function K(s) {
-  const { base: a, variants: t, defaultVariants: e, compoundVariants: m } = g(s), i = (n) => ({ ...e, ...C(n) });
-  function o(n = {}) {
-    var l;
-    const r = i(n);
-    let c = { ...a };
-    for (const [V, v] of Object.entries(r))
-      (l = t[V]) != null && l[v] && (c = f(c, t[V][v]));
-    const u = M(m, r);
-    return f(c, u);
+function M(n) {
+  const { base: f, variants: s, defaultVariants: e, compoundVariants: m } = j(n), o = (t) => ({ ...e, ...C(t) });
+  function a(t = {}) {
+    var d;
+    const r = o(t);
+    let i = { ...f };
+    for (const [l, V] of Object.entries(r))
+      (d = s[l]) != null && d[V] && (i = u(i, s[l][V]));
+    const c = A(m, r);
+    return u(i, c);
   }
-  function d(n) {
-    const r = g(n.config), c = w(n.variantKeys, Object.keys(t));
-    return K({
-      base: f(a, r.base),
+  function v(t) {
+    const r = j(t.config), i = h(t.variantKeys, Object.keys(s));
+    return M({
+      base: u(f, r.base),
       variants: Object.fromEntries(
-        c.map((u) => [u, f(t[u], r.variants[u])])
+        i.map((c) => [c, u(s[c], r.variants[c])])
       ),
       defaultVariants: E(e, r.defaultVariants),
       compoundVariants: [...m, ...r.compoundVariants]
     });
   }
-  function p(n) {
-    return P(o(n));
+  function p(t) {
+    return K(a(t));
   }
-  const b = Object.keys(t);
-  function j(n) {
-    return h(n, b);
+  const b = Object.keys(s);
+  function O(t) {
+    return P(t, b);
   }
-  const O = Object.fromEntries(Object.entries(t).map(([n, r]) => [n, Object.keys(r)]));
+  const g = Object.fromEntries(Object.entries(s).map(([t, r]) => [t, Object.keys(r)]));
   return Object.assign(y(p), {
     __cva__: !0,
-    variantMap: O,
+    variantMap: g,
     variantKeys: b,
-    raw: o,
-    config: s,
-    merge: d,
-    splitVariantProps: j,
-    getVariantProps: i
+    raw: a,
+    config: n,
+    merge: v,
+    splitVariantProps: O,
+    getVariantProps: o
   });
 }
-function M(s, a) {
-  let t = {};
-  return s.forEach((e) => {
-    Object.entries(e).every(([i, o]) => i === "css" ? !0 : (Array.isArray(o) ? o : [o]).some((p) => a[i] === p)) && (t = f(t, e.css));
-  }), t;
-}
-function $(s, a, t, e) {
-  if (a.length > 0 && typeof (t == null ? void 0 : t[e]) == "object")
-    throw new Error(`[recipe:${s}:${e}] Conditions are not supported when using compound variants.`);
+function A(n, f) {
+  let s = {};
+  return n.forEach((e) => {
+    Object.entries(e).every(([o, a]) => o === "css" ? !0 : (Array.isArray(a) ? a : [a]).some((p) => f[o] === p)) && (s = u(s, e.css));
+  }), s;
 }
 export {
-  $ as assertCompoundVariant,
-  K as cva,
-  M as getCompoundVariantCss
+  M as cva,
+  A as getCompoundVariantCss
 };