@serendie/ui 0.1.12 → 0.1.13

package/dist/components/TextArea.js

@@ -0,0 +1,146 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import p, { forwardRef as v } from "react";
+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({
+  slots: [
+    "root",
+    "label",
+    "required",
+    "wrapper",
+    "textarea",
+    "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"
+      }
+    },
+    wrapper: {
+      display: "grid",
+      gridTemplateColumns: "1fr auto",
+      alignItems: "center",
+      outlineStyle: "solid",
+      outlineWidth: "sd.system.dimension.border.medium",
+      outlineColor: "sd.system.color.component.outline",
+      borderRadius: "sd.system.dimension.radius.medium",
+      _focusWithin: {
+        outlineWidth: "sd.system.dimension.border.thick",
+        outlineColor: "sd.system.color.impression.primary"
+      },
+      _disabled: {
+        backgroundColor: "sd.system.color.interaction.disabled"
+      },
+      _invalid: {
+        outlineColor: "sd.system.color.impression.negative"
+      },
+      '&:has([data-focus="true"])': {
+        outlineWidth: "sd.system.dimension.border.thick",
+        outlineColor: "sd.system.color.impression.primary"
+      }
+    },
+    textarea: {
+      outline: "none",
+      marginTop: "sd.system.dimension.spacing.extraSmall",
+      // NOTE: Figmaの値と違うがリサイズハンドルを考慮して小さくしている
+      marginRight: "sd.system.dimension.spacing.twoExtraSmall",
+      marginBottom: "sd.system.dimension.spacing.twoExtraSmall",
+      marginLeft: "sd.system.dimension.spacing.small",
+      _disabled: {
+        cursor: "not-allowed"
+      }
+    },
+    required: {
+      pl: "sd.system.dimension.spacing.extraSmall",
+      color: "sd.system.color.impression.negative"
+    },
+    messageField: {
+      textAlign: "right",
+      color: "sd.system.color.component.onSurfaceVariant",
+      textStyle: {
+        base: "sd.system.typography.body.extraSmall_compact",
+        expanded: "sd.system.typography.body.extraSmall_expanded"
+      }
+    },
+    invalidMessage: {
+      color: "sd.system.color.impression.negative"
+    }
+  },
+  variants: {
+    autoAdjustHeight: {
+      true: {
+        textarea: {
+          fieldSizing: "content",
+          minHeight: "2lh"
+        }
+      }
+    }
+  }
+}), k = v(
+  ({
+    placeholder: y,
+    label: r,
+    description: t,
+    required: d,
+    invalidMessage: o,
+    invalid: i,
+    disabled: n,
+    className: u,
+    ...l
+  }, g) => {
+    const x = p.useRef(null), h = _(x, g), [b, f] = c.splitVariantProps(l), e = c(b), S = t || i && o, m = l.id || p.useId();
+    return /* @__PURE__ */ a("div", { className: w(e.root, u), children: [
+      r ? /* @__PURE__ */ a("label", { className: e.label, htmlFor: m, children: [
+        r,
+        d && /* @__PURE__ */ s("span", { className: e.required, children: "必須" })
+      ] }) : null,
+      /* @__PURE__ */ s(
+        "div",
+        {
+          className: e.wrapper,
+          "data-invalid": i ? !0 : void 0,
+          "data-disabled": n ? !0 : void 0,
+          children: /* @__PURE__ */ s(
+            "textarea",
+            {
+              ref: h,
+              id: m,
+              placeholder: y,
+              required: d,
+              disabled: n,
+              className: e.textarea,
+              ...f
+            }
+          )
+        }
+      ),
+      S && /* @__PURE__ */ a("div", { className: e.messageField, children: [
+        t && /* @__PURE__ */ s("p", { className: e.description, children: t }),
+        i && o && /* @__PURE__ */ s("p", { className: e.invalidMessage, children: o })
+      ] })
+    ] });
+  }
+);
+export {
+  k as TextArea
+};

package/dist/components/TextField.js

@@ -0,0 +1,179 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import m, { forwardRef as I } from "react";
+import P from "../node_modules/merge-refs/dist/esm/index.js";
+import { css as b } from "../ui/styled-system/css/css.js";
+import { cx as j } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+import { sva as q } from "../ui/styled-system/css/sva.js";
+import { SerendieSymbol as f } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+const v = q({
+  slots: [
+    "root",
+    "label",
+    "required",
+    "inputWrapper",
+    "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: "1fr 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"
+      }
+    },
+    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"
+    }
+  }
+}), H = I(
+  ({
+    placeholder: S,
+    label: c,
+    description: n,
+    required: p,
+    invalidMessage: d,
+    invalid: o,
+    type: _ = "text",
+    disabled: r,
+    onChange: u,
+    value: y,
+    className: N,
+    ...t
+  }, C) => {
+    const l = m.useRef(null), w = P(l, C), [R, W] = v.splitVariantProps(t), e = v(R), F = n || o && d, [k, T] = m.useState(t.defaultValue || y), g = t.id || m.useId(), V = () => {
+      var x;
+      const i = {
+        target: { value: "" }
+      };
+      h(i), (x = t.onReset) == null || x.call(t, i), l.current && (l.current.value = "");
+    }, h = (i) => {
+      T(i.target.value), u && u(i);
+    };
+    return /* @__PURE__ */ a("div", { className: j(e.root, N), children: [
+      c ? /* @__PURE__ */ a("label", { className: e.label, htmlFor: g, children: [
+        c,
+        p && /* @__PURE__ */ s("span", { className: e.required, children: "必須" })
+      ] }) : null,
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: e.inputWrapper,
+          "data-invalid": o ? !0 : void 0,
+          "data-disabled": r ? !0 : void 0,
+          children: [
+            /* @__PURE__ */ s(
+              "input",
+              {
+                ref: w,
+                id: g,
+                placeholder: S,
+                required: p,
+                disabled: r,
+                value: y,
+                type: _,
+                className: e.input,
+                onChange: h,
+                ...W
+              }
+            ),
+            /* @__PURE__ */ s("div", { className: e.icon, children: !r && /* disabledの場合はアイコンを表示しない */
+            (o ? /* @__PURE__ */ s(
+              "span",
+              {
+                className: b({
+                  color: "sd.system.color.impression.negative"
+                }),
+                children: /* @__PURE__ */ s(f, { name: "alert-circle", size: 20 })
+              }
+            ) : k ? /* @__PURE__ */ s(
+              "button",
+              {
+                className: b({ cursor: "pointer" }),
+                onClick: V,
+                "aria-label": "値をクリア",
+                children: /* @__PURE__ */ s(f, { name: "close", size: 20 })
+              }
+            ) : null) })
+          ]
+        }
+      ),
+      F && /* @__PURE__ */ a("div", { className: e.messageField, children: [
+        n && /* @__PURE__ */ s("p", { className: e.description, children: n }),
+        o && d && /* @__PURE__ */ s("p", { className: e.invalidMessage, children: d })
+      ] })
+    ] });
+  }
+);
+export {
+  H as TextField
+};

package/dist/components/Toast.js

@@ -0,0 +1,94 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import "../ui/styled-system/helpers.js";
+import { sva as c } from "../ui/styled-system/css/sva.js";
+import { SerendieSymbol as m } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+import { createToaster as l } from "../node_modules/@ark-ui/react/dist/components/toast/create-toaster.js";
+import { Toaster as d } from "../node_modules/@ark-ui/react/dist/components/toast/toaster.js";
+import { ToastRoot as p } from "../node_modules/@ark-ui/react/dist/components/toast/toast-root.js";
+import { ToastTitle as y } from "../node_modules/@ark-ui/react/dist/components/toast/toast-title.js";
+const x = c({
+  slots: ["root", "textGroup", "text", "icon"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      paddingX: "sd.system.dimension.spacing.extraLarge",
+      borderRadius: "sd.system.dimension.radius.medium",
+      boxShadow: "sd.system.elevation.shadow.level3",
+      height: 40
+    },
+    textGroup: {
+      display: "flex",
+      alignItems: "center",
+      gap: "sd.system.dimension.spacing.twoExtraSmall"
+    },
+    text: {
+      textStyle: "sd.system.typography.body.small_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.body.small_expanded"
+      }
+    },
+    icon: {
+      color: "sd.system.color.component.inverseOnSurface"
+    }
+  },
+  variants: {
+    variant: {
+      default: {
+        root: {
+          background: "sd.system.color.component.inverseSurface"
+        },
+        text: {
+          color: "sd.system.color.component.inverseOnSurface"
+        },
+        icon: {
+          color: "sd.system.color.impression.positive"
+        }
+      },
+      error: {
+        root: {
+          background: "sd.system.color.impression.negativeContainer",
+          borderColor: "sd.system.color.impression.negative",
+          borderWidth: 1
+        },
+        text: {
+          color: "sd.system.color.impression.negative"
+        },
+        icon: {
+          color: "sd.system.color.impression.negative"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), N = l({
+  placement: "bottom"
+}), k = ({ toaster: r }) => {
+  const i = {
+    success: "check-circle",
+    error: "alert-circle"
+  };
+  return /* @__PURE__ */ t(d, { toaster: r, children: (e) => {
+    const a = e.type === "error" ? "error" : "default", o = x({ variant: a }), s = i[e.type];
+    return /* @__PURE__ */ t(p, { className: o.root, children: /* @__PURE__ */ n("div", { className: o.textGroup, children: [
+      s && /* @__PURE__ */ t(
+        m,
+        {
+          name: s,
+          size: 24,
+          variant: "filled",
+          className: o.icon
+        }
+      ),
+      /* @__PURE__ */ t(y, { className: o.text, children: e.title })
+    ] }) }, e.id);
+  } });
+};
+export {
+  k as Toast,
+  x as ToastStyle,
+  N as toaster
+};

package/dist/components/TopAppBar.js

@@ -0,0 +1,78 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import { cx as d } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+import { sva as y } from "../ui/styled-system/css/sva.js";
+import { NotificationBadge as x } from "./NotificationBadge.js";
+const i = y({
+  slots: ["root", "container", "left", "buttonContainer", "title"],
+  base: {
+    root: {
+      width: "100%",
+      backgroundColor: "sd.system.color.component.surface"
+    },
+    container: {
+      height: "48px",
+      display: "flex",
+      justifyContent: "space-between",
+      gap: "8px",
+      alignItems: "center"
+    },
+    left: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      width: "100%"
+    },
+    buttonContainer: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    },
+    title: {
+      textStyle: "sd.system.typography.title.medium_compact",
+      maxW: "100%",
+      _expanded: {
+        textStyle: "sd.system.typography.title.medium_expanded"
+      }
+    }
+  },
+  variants: {
+    type: {
+      navbar: {},
+      titleBar: {},
+      titleBarTitleOnly: {
+        root: {
+          _lastOfType: {
+            paddingBottom: "8px"
+          },
+          _firstOfType: {
+            paddingBottom: "0px"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    type: "navbar"
+  }
+}), N = ({
+  headingIconButton: n,
+  trailingIconButtons: r,
+  badge: a,
+  title: s,
+  ...l
+}) => {
+  const [p, { className: c, ...m }] = i.splitVariantProps(l), t = i(p);
+  return /* @__PURE__ */ e("nav", { className: d(t.root, c), ...m, children: /* @__PURE__ */ o("div", { className: t.container, children: [
+    /* @__PURE__ */ o("div", { className: t.left, children: [
+      /* @__PURE__ */ e("div", { className: t.buttonContainer, children: n }),
+      /* @__PURE__ */ e("h1", { className: t.title, children: s }),
+      a && /* @__PURE__ */ e(x, { count: a, position: "relative" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: t.buttonContainer, children: r })
+  ] }) });
+};
+export {
+  N as TopAppBar
+};