@serendie/ui 0.1.12 → 0.1.13

package/dist/components/Select.js

@@ -0,0 +1,242 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+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 { 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";
+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 n = b({
+  slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
+  base: {
+    root: {
+      display: "inline-grid",
+      gridTemplateColumns: "minmax(auto, 300px)",
+      rowGap: "sd.system.dimension.spacing.extraSmall"
+    },
+    trigger: {
+      width: "100%",
+      textAlign: "left",
+      display: "grid",
+      gridTemplateColumns: "1fr auto",
+      paddingTop: "sd.system.dimension.spacing.small",
+      paddingRight: "sd.system.dimension.spacing.extraSmall",
+      paddingBottom: "sd.system.dimension.spacing.small",
+      paddingLeft: "sd.system.dimension.spacing.medium",
+      alignItems: "center",
+      borderRadius: "sd.system.dimension.radius.medium",
+      outlineStyle: "solid",
+      outlineWidth: "sd.system.dimension.border.medium",
+      outlineColor: "sd.system.color.component.outline",
+      bg: "sd.system.color.component.surface",
+      cursor: "pointer",
+      _enabled: {
+        _focusVisible: {
+          outlineWidth: "sd.system.dimension.border.thick",
+          outlineColor: "sd.system.color.impression.primary"
+        },
+        _hover: {
+          outlineColor: "sd.system.color.interaction.hovered",
+          bg: "color-mix(in srgb, {colors.sd.system.color.component.surface}, {colors.sd.system.color.interaction.hoveredVariant})"
+        }
+      },
+      _disabled: {
+        bgColor: "sd.system.color.interaction.disabled",
+        color: "sd.system.color.interaction.disabledOnSurface",
+        cursor: "not-allowed"
+      },
+      _invalid: {
+        outlineColor: "sd.system.color.impression.negative"
+      }
+    },
+    valueText: {
+      outline: "none",
+      width: "100%",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      textStyle: {
+        base: "sd.system.typography.body.medium_compact",
+        expanded: "sd.system.typography.body.medium_expanded"
+      },
+      "[data-placeholder-shown] &": {
+        color: "sd.system.color.component.onSurfaceVariant"
+      },
+      _disabled: {
+        "[data-placeholder-shown] &": {
+          color: "sd.system.color.interaction.disabledOnSurface"
+        }
+      }
+    },
+    content: {
+      bgColor: "sd.system.color.component.surface",
+      borderRadius: "sd.system.dimension.radius.medium",
+      boxShadow: "sd.system.elevation.shadow.level1",
+      zIndex: "sd.system.elevation.zIndex.dropdown",
+      width: "100%",
+      cursor: "pointer"
+    },
+    item: {
+      width: "100%"
+    },
+    iconBox: {
+      w: "40px",
+      display: "flex",
+      justifyContent: "center",
+      "[data-disabled] &": {
+        color: "sd.system.color.interaction.disabledOnSurface"
+      }
+    }
+  },
+  variants: {
+    size: {
+      medium: {
+        root: {
+          textStyle: {
+            base: "sd.system.typography.body.medium_compact",
+            expanded: "sd.system.typography.body.medium_expanded"
+          }
+        },
+        valueText: {
+          textStyle: {
+            base: "sd.system.typography.body.medium_compact",
+            expanded: "sd.system.typography.body.medium_expanded"
+          }
+        },
+        trigger: {
+          height: 48
+        },
+        item: {}
+      },
+      small: {
+        root: {
+          gridTemplateColumns: "minmax(auto, 150px)",
+          textStyle: {
+            base: "sd.system.typography.body.small_compact"
+          }
+        },
+        valueText: {
+          textStyle: {
+            base: "sd.system.typography.body.small_compact",
+            expanded: "sd.system.typography.body.small_expanded"
+          }
+        },
+        trigger: {
+          height: 32,
+          paddingTop: "sd.system.dimension.spacing.twoExtraSmall",
+          paddingRight: "sd.system.dimension.spacing.extraSmall",
+          paddingBottom: "sd.system.dimension.spacing.twoExtraSmall",
+          paddingLeft: "sd.system.dimension.spacing.extraSmall",
+          borderRadius: "sd.system.dimension.radius.small"
+        },
+        content: {
+          borderRadius: "sd.system.dimension.radius.small"
+        },
+        item: {}
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+}), Y = ({
+  placeholder: c = "",
+  label: m,
+  required: p,
+  invalid: a,
+  invalidMessage: r,
+  className: y,
+  ...l
+}) => {
+  const [o, g] = n.splitVariantProps(l), s = n(o), u = S();
+  return /* @__PURE__ */ i(
+    C,
+    {
+      ...g,
+      invalid: a,
+      className: h(s.root, y),
+      positioning: { sameWidth: !0 },
+      children: [
+        m && o.size != "small" && // smallの場合はラベルを表示しない
+        /* @__PURE__ */ i(
+          T,
+          {
+            className: d({
+              textStyle: {
+                base: "sd.system.typography.label.medium_compact",
+                expanded: "sd.system.typography.label.medium_expanded"
+              }
+            }),
+            children: [
+              m,
+              p && // とりあえず必須メッセージはハードコード
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: d({
+                    pl: "sd.system.dimension.spacing.extraSmall",
+                    color: "sd.system.color.impression.negative"
+                  }),
+                  children: "必須"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ i(z, { className: s.trigger, children: [
+          /* @__PURE__ */ e(
+            R,
+            {
+              placeholder: c,
+              className: s.valueText
+            }
+          ),
+          /* @__PURE__ */ e(
+            w,
+            {
+              name: "chevron-down",
+              className: s.iconBox,
+              size: 20
+            }
+          )
+        ] }) }),
+        a && r && /* @__PURE__ */ e(
+          "div",
+          {
+            className: d({
+              textStyle: {
+                base: "sd.system.typography.body.extraSmall_compact",
+                expanded: "sd.system.typography.body.extraSmall_expanded"
+              },
+              color: "sd.system.color.impression.negative"
+            }),
+            children: r
+          }
+        ),
+        /* @__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,
+          {
+            title: t.label,
+            value: t.value,
+            className: s.item,
+            size: o.size == "small" ? "small" : void 0
+          }
+        ) }, x)) }) }) }) })
+      ]
+    }
+  );
+};
+export {
+  Y as Select,
+  n as SelectStyle
+};

package/dist/components/SvgIcon.js

@@ -0,0 +1,72 @@
+import { jsx as p } from "react/jsx-runtime";
+import f from "../node_modules/@material-design-icons/svg/round/add.svg.js";
+import v from "../assets/avatar.svg.js";
+import g from "../assets/check.svg.js";
+import n from "../assets/icons/outline/close.svg.js";
+import S from "../assets/checkCircle.svg.js";
+import t from "../node_modules/@material-design-icons/svg/round/arrow_outward.svg.js";
+import m from "../node_modules/@material-design-icons/svg/round/content_copy.svg.js";
+import a from "../node_modules/@material-design-icons/svg/round/chevron_left.svg.js";
+import l from "../node_modules/@material-design-icons/svg/round/chevron_right.svg.js";
+import h from "../node_modules/@material-design-icons/svg/round/face.svg.js";
+import s from "../node_modules/@material-design-icons/svg/round/search.svg.js";
+import C from "../assets/texture.svg.js";
+import u from "../node_modules/@material-design-icons/svg/round/expand_more.svg.js";
+import d from "../assets/error.svg.js";
+import _ from "../assets/errorFill.svg.js";
+import x from "../assets/errorCircle.svg.js";
+import w from "../node_modules/@material-design-icons/svg/outlined/info.svg.js";
+import k from "../node_modules/@material-design-icons/svg/round/menu.svg.js";
+import A from "../node_modules/@material-design-icons/svg/round/account_circle.svg.js";
+import E from "../node_modules/@material-design-icons/svg/round/settings.svg.js";
+import { css as y } from "../ui/styled-system/css/css.js";
+import { cx as M } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+const b = {
+  add: f,
+  avatar: v,
+  check: g,
+  checkCircle: S,
+  arrow_outward: t,
+  arrow_blank: t,
+  content_copy: m,
+  clipboard_copy: m,
+  chevron_left: a,
+  chevron_right: l,
+  close: n,
+  face: h,
+  search: s,
+  texture: C,
+  expandMore: u,
+  errorCircle: x,
+  error: d,
+  error_fill: _,
+  info: w,
+  menu: k,
+  account_circle: A,
+  settings: E
+}, z = ({
+  icon: e,
+  size: r,
+  className: i,
+  ...c
+}) => {
+  const o = b[e];
+  return o ? /* @__PURE__ */ p(
+    o,
+    {
+      ...c,
+      width: r || "1em",
+      height: r || "1em",
+      className: M(
+        y({
+          fill: "currentColor"
+        }),
+        i
+      )
+    }
+  ) : null;
+};
+export {
+  z as SvgIcon
+};

package/dist/components/Switch.js

@@ -0,0 +1,128 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { css as u } from "../ui/styled-system/css/css.js";
+import { cx as t } 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 { SwitchRoot as h } from "../node_modules/@ark-ui/react/dist/components/switch/switch-root.js";
+import { SwitchLabel as i } from "../node_modules/@ark-ui/react/dist/components/switch/switch-label.js";
+import { SwitchControl as g } from "../node_modules/@ark-ui/react/dist/components/switch/switch-control.js";
+import { SwitchThumb as f } from "../node_modules/@ark-ui/react/dist/components/switch/switch-thumb.js";
+import { SwitchHiddenInput as x } from "../node_modules/@ark-ui/react/dist/components/switch/switch-hidden-input.js";
+const n = b({
+  slots: ["root", "control", "thumb", "label", "textGroup", "helperText"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      gap: "sd.system.dimension.spacing.medium",
+      paddingY: "sd.system.dimension.spacing.small",
+      paddingX: "sd.system.dimension.spacing.medium",
+      '&[data-focus="true"] .control': {
+        borderColor: "sd.system.color.impression.primary"
+      }
+    },
+    control: {
+      cursor: "pointer",
+      width: 52,
+      height: 32,
+      flexShrink: 0,
+      backgroundColor: "sd.system.color.interaction.disabled",
+      borderRadius: "sd.system.dimension.radius.full",
+      borderWidth: 1,
+      borderColor: "sd.system.color.component.outline",
+      transitionDuration: ".2s",
+      transitionProperty: "background, borderColor",
+      transitionTimingFunction: "cubic-bezier(.2, 0, 0, 1)",
+      _checked: {
+        backgroundColor: "sd.system.color.impression.primary",
+        borderColor: "sd.system.color.impression.primary",
+        _disabled: {
+          backgroundColor: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});",
+          borderColor: "transparent"
+        }
+      },
+      _disabled: {
+        cursor: "default",
+        background: "sd.system.color.interaction.disabled"
+      },
+      ".group:has(:focus-visible) &": {
+        borderColor: "sd.system.color.impression.primary"
+      }
+    },
+    thumb: {
+      display: "block",
+      width: 20,
+      height: 20,
+      marginY: 5,
+      marginX: 6,
+      background: "sd.system.color.component.surface",
+      borderRadius: "sd.system.dimension.radius.full",
+      borderColor: "sd.system.color.component.outline",
+      borderWidth: 1,
+      transitionDuration: ".3s",
+      transitionProperty: "transform, borderColor",
+      transitionTimingFunction: "cubic-bezier(.2, 0, 0, 1)",
+      _checked: {
+        transform: "translateX(19px)",
+        borderColor: "sd.system.color.component.surface"
+      }
+    },
+    label: {
+      color: "sd.system.color.component.onSurface",
+      textStyle: "sd.system.typography.body.medium_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      },
+      _disabled: {
+        color: "sd.system.color.interaction.disabledOnSurface"
+      }
+    },
+    textGroup: {
+      display: "flex",
+      flexFlow: "column",
+      width: 160
+    },
+    helperText: {
+      color: "sd.system.color.component.onSurfaceVariant",
+      marginTop: "sd.system.dimension.spacing.twoExtraSmall",
+      lineHeight: "sd.reference.typography.lineHeight.tight",
+      textStyle: "sd.system.typography.body.extraSmall_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.body.extraSmall_expanded"
+      },
+      _disabled: {
+        color: "sd.system.color.interaction.disabledOnSurface"
+      }
+    }
+  }
+}), G = y(
+  ({ label: d, helperText: s, className: a, ...l }, m) => {
+    const [c, p] = n.splitVariantProps(l), o = n(c);
+    return /* @__PURE__ */ e(
+      h,
+      {
+        ref: m,
+        className: t(
+          "group",
+          o.root,
+          s && u({ alignItems: "flex-start" }),
+          a
+        ),
+        ...p,
+        children: [
+          /* @__PURE__ */ e("div", { className: o.textGroup, children: [
+            /* @__PURE__ */ r(i, { className: o.label, children: d }),
+            s && /* @__PURE__ */ r(i, { className: o.helperText, children: s })
+          ] }),
+          /* @__PURE__ */ r(g, { className: t("control", o.control), children: /* @__PURE__ */ r(f, { className: o.thumb }) }),
+          /* @__PURE__ */ r(x, {})
+        ]
+      }
+    );
+  }
+);
+export {
+  G as Switch,
+  n as SwitchStyle
+};

package/dist/components/TabItem.js

@@ -0,0 +1,98 @@
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import { cx as b } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+import { sva as u } from "../ui/styled-system/css/sva.js";
+import { NotificationBadge as i } from "./NotificationBadge.js";
+import { TabTrigger as h } from "../node_modules/@ark-ui/react/dist/components/tabs/tab-trigger.js";
+const l = u({
+  slots: ["trigger", "dot", "badgeBox", "badge"],
+  base: {
+    trigger: {
+      display: "flex",
+      justifyContent: "center",
+      flex: 1,
+      gap: "sd.system.dimension.spacing.twoExtraSmall",
+      alignItems: "center",
+      height: 44,
+      cursor: "pointer",
+      color: "sd.system.color.component.onSurface",
+      transitionDuration: ".2s",
+      transitionProperty: "color, border-color",
+      transitionTimingFunction: "cubic-bezier(.2, 0, 0, 1)",
+      borderBottom: "2px solid",
+      borderBottomColor: "transparent",
+      textStyle: "sd.system.typography.label.large_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.label.large_expanded"
+      },
+      _selected: {
+        color: "sd.system.color.impression.primary",
+        fontWeight: "bold",
+        borderBottomColor: "sd.system.color.impression.primary"
+      },
+      _disabled: {
+        cursor: "default",
+        color: "sd.system.color.interaction.disabledOnSurface"
+      },
+      _hover: {
+        color: "sd.system.color.impression.primary",
+        _disabled: {
+          color: "sd.system.color.interaction.disabledOnSurface"
+        }
+      },
+      _focusVisible: {
+        outlineWidth: "1px",
+        outlineStyle: "solid",
+        outlineColor: "sd.system.color.component.outline",
+        outlineOffset: "-1px"
+      }
+    },
+    dot: {
+      height: 8,
+      width: 8
+    },
+    badgeBox: {
+      height: 16,
+      width: 16
+    },
+    badge: {
+      backgroundColor: "color-mix(in srgb, {colors.sd.system.color.interaction.hoveredOnPrimary}, {colors.sd.system.color.impression.negativeContainer});"
+    }
+  }
+}), C = ({
+  title: n,
+  value: a,
+  disabled: r,
+  dot: c,
+  badge: t,
+  className: d,
+  ...m
+}) => {
+  const [p, g] = l.splitVariantProps(m), e = l(p), s = r ? e.badge : "";
+  return /* @__PURE__ */ y(
+    h,
+    {
+      value: a,
+      className: b(e.trigger, d),
+      disabled: r,
+      ...g,
+      children: [
+        /* @__PURE__ */ o("span", { children: n }),
+        c && /* @__PURE__ */ o("div", { className: e.dot, children: /* @__PURE__ */ o(i, { noNumber: !0, className: s }) }),
+        t && /* @__PURE__ */ o("div", { className: e.badgeBox, children: /* @__PURE__ */ o(
+          i,
+          {
+            count: t,
+            size: "small",
+            className: s
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  C as TabItem,
+  l as TabItemStyle
+};

package/dist/components/Tabs.js

@@ -0,0 +1,29 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import { cx as n } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+import { sva as l } from "../ui/styled-system/css/sva.js";
+import { TabsRoot as p } from "../node_modules/@ark-ui/react/dist/components/tabs/tabs-root.js";
+import { TabList as c } from "../node_modules/@ark-ui/react/dist/components/tabs/tab-list.js";
+const o = l({
+  slots: ["root", "list"],
+  base: {
+    root: {
+      display: "flex",
+      paddingX: "sd.system.dimension.spacing.medium"
+    },
+    list: {
+      display: "flex",
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "space-around"
+    }
+  }
+}), g = ({ children: r, className: i, ...e }) => {
+  const [a, m] = o.splitVariantProps(e), s = o(a);
+  return /* @__PURE__ */ t(p, { className: n(s.root, i), ...m, children: /* @__PURE__ */ t(c, { className: s.list, children: r }) });
+};
+export {
+  g as Tabs,
+  o as TabsStyle
+};