@serendie/ui 0.1.12 → 0.1.13

package/dist/components/BottomNavigationItem.js

@@ -0,0 +1,92 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import { cx as p } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+import { sva as d } from "../ui/styled-system/css/sva.js";
+import { NotificationBadge as y } from "./NotificationBadge.js";
+const i = d({
+  slots: ["root", "iconGroup", "icon", "label", "badge"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "sd.system.dimension.spacing.twoExtraSmall",
+      height: 64,
+      flex: 1,
+      cursor: "pointer"
+    },
+    iconGroup: {
+      position: "relative"
+    },
+    label: {
+      color: "sd.system.color.component.onSurface",
+      textStyle: "sd.system.typography.label.small_compact",
+      expanded: {
+        textStyle: "sd.system.typography.label.small_compact"
+      }
+    },
+    icon: {
+      color: "sd.system.color.component.onSurface",
+      "& svg": {
+        width: "sd.reference.dimension.scale.8",
+        height: "sd.reference.dimension.scale.8"
+      }
+    },
+    badge: {
+      position: "absolute",
+      top: "-6px",
+      right: "4px"
+    }
+  },
+  variants: {
+    isActive: {
+      true: {
+        label: {
+          color: "sd.system.color.impression.primary"
+        },
+        icon: {
+          color: "sd.system.color.impression.primary"
+        }
+      }
+    },
+    dot: {
+      true: {
+        badge: {
+          top: "-2.5px",
+          right: "4px"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    isActive: !1
+  }
+}), v = ({
+  icon: r,
+  label: a,
+  count: l,
+  className: n,
+  ...c
+}) => {
+  const [t, m] = i.splitVariantProps(c), o = i(t);
+  return /* @__PURE__ */ s("button", { className: p(o.root, n), ...m, children: [
+    /* @__PURE__ */ s("div", { className: o.iconGroup, children: [
+      /* @__PURE__ */ e("div", { className: o.badge, children: /* @__PURE__ */ e(
+        y,
+        {
+          count: l || 0,
+          noNumber: t.dot,
+          size: "small"
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: o.icon, children: r })
+    ] }),
+    /* @__PURE__ */ e("span", { className: o.label, children: a })
+  ] });
+};
+export {
+  v as BottomNavigationItem,
+  i as BottomNavigationItemStyle
+};

package/dist/components/Button.d.ts

@@ -117,14 +117,14 @@ type ButtonLoadingProps = {
 };
 export declare const Button: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
-    size?: "medium" | "small" | undefined;
+    size?: "small" | "medium" | undefined;
 } & {
     leftIcon?: React.ReactElement;
 } & {
     rightIcon?: never;
 } & ButtonLoadingProps, "ref"> | Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
-    size?: "medium" | "small" | undefined;
+    size?: "small" | "medium" | undefined;
 } & {
     leftIcon?: never;
 } & {

package/dist/components/Button.js

@@ -0,0 +1,196 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import b from "react";
+import { css as f } from "../ui/styled-system/css/css.js";
+import { cx as h } from "../ui/styled-system/css/cx.js";
+import { cva as x } from "../ui/styled-system/css/cva.js";
+import "../ui/styled-system/helpers.js";
+import { styled as _ } from "../ui/styled-system/jsx/factory.js";
+import "../ui/styled-system/jsx/is-valid-prop.js";
+import "../preset.js";
+import "./Accordion.js";
+import "./AccordionGroup.js";
+import "./Avatar.js";
+import "./Badge.js";
+import "./Banner.js";
+import "./BottomNavigationItem.js";
+import "./CheckBox.js";
+import "./ChoiceBox.js";
+import "./DashboardWidget.js";
+import "./Divider.js";
+import "./Drawer.js";
+import "./DropdownMenu.js";
+import "./IconButton.js";
+import "./ListItem.js";
+import "./ModalDialog.js";
+import "./NotificationBadge.js";
+import { ProgressIndicator as v } from "./ProgressIndicator.js";
+import "./RadioButton.js";
+import "./Search.js";
+import "./Select.js";
+import "./Switch.js";
+import "./TabItem.js";
+import "./Tabs.js";
+import "./TextArea.js";
+import "./TextField.js";
+import "./Toast.js";
+import "./TopAppBar.js";
+const d = {
+  color: "sd.system.color.component.onSurface",
+  outlineWidth: "sd.system.dimension.border.medium",
+  outlineStyle: "solid",
+  outlineColor: "sd.system.color.component.outline",
+  bgColor: "sd.system.color.component.surface",
+  _enabled: {
+    _hover: {
+      bgColor: "sd.system.color.interaction.hoveredVariant"
+    },
+    _focusVisible: {
+      outlineColor: "sd.system.color.component.outlineVariant",
+      bgColor: "sd.system.color.interaction.hoveredVariant"
+    }
+  },
+  _disabled: {
+    bgColor: "sd.system.color.interaction.disabled",
+    color: "sd.system.color.interaction.disabledOnSurface",
+    outline: "none"
+  }
+}, m = x({
+  base: {
+    borderRadius: "sd.system.dimension.radius.full",
+    position: "relative",
+    display: "inline-flex",
+    gap: "sd.system.dimension.spacing.twoExtraSmall",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    cursor: "pointer",
+    _disabled: {
+      cursor: "not-allowed"
+    }
+  },
+  variants: {
+    styleType: {
+      filled: {
+        bg: "sd.system.color.impression.primaryContainer",
+        color: "sd.system.color.impression.onPrimaryContainer",
+        _enabled: {
+          _hover: {
+            _after: {
+              content: "''",
+              position: "absolute",
+              inset: "0",
+              bg: "sd.system.color.interaction.hovered"
+            }
+          },
+          _focusVisible: {
+            outlineWidth: "sd.system.dimension.border.medium",
+            outlineStyle: "solid",
+            outlineColor: "sd.system.color.interaction.hovered",
+            _after: {
+              content: "''",
+              position: "absolute",
+              inset: "0",
+              bg: "sd.system.color.interaction.hovered"
+            }
+          }
+        },
+        _disabled: {
+          bg: "sd.system.color.interaction.disabled",
+          color: "sd.system.color.interaction.disabledOnSurface"
+        }
+      },
+      ghost: {
+        color: "sd.system.color.impression.primary",
+        _enabled: {
+          _hover: {
+            bgColor: "sd.system.color.interaction.hoveredVariant"
+          },
+          _focusVisible: {
+            bgColor: "sd.system.color.interaction.hoveredVariant",
+            outlineWidth: "sd.system.dimension.border.medium",
+            outlineStyle: "solid",
+            outlineColor: "sd.system.color.component.outlineVariant"
+          }
+        },
+        _disabled: {
+          color: "sd.system.color.interaction.disabledOnSurface"
+        }
+      },
+      outlined: d,
+      rectangle: {
+        ...d,
+        borderRadius: "sd.system.dimension.radius.medium"
+      }
+    },
+    size: {
+      medium: {
+        height: 48,
+        px: "sd.system.dimension.spacing.extraLarge",
+        py: "sd.system.dimension.spacing.small",
+        textStyle: "sd.system.typography.label.large_compact",
+        expanded: {
+          textStyle: "sd.system.typography.label.large_expanded"
+        }
+      },
+      small: {
+        height: 32,
+        px: "sd.system.dimension.spacing.small",
+        py: "sd.system.dimension.spacing.twoExtraSmall",
+        textStyle: "sd.system.typography.label.medium_compact",
+        expanded: {
+          textStyle: "sd.system.typography.label.medium_expanded"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    styleType: "filled",
+    size: "medium"
+  }
+}), r = _("span", {
+  base: {
+    position: "relative",
+    zIndex: "sd.system.elevation.zIndex.base"
+  }
+}), te = b.forwardRef(
+  (s, l) => {
+    const [
+      n,
+      { children: a, leftIcon: e, rightIcon: o, isLoading: t, className: p, ...c }
+    ] = m.splitVariantProps(s), y = m(n), u = f(
+      e || o ? s.size === "medium" ? {
+        //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
+        paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
+        paddingRight: o ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge"
+      } : {
+        //アイコンがある側 `spacing.extraSmall`、無い側は`spacing.medium`
+        paddingLeft: e ? "sd.system.dimension.spacing.extraSmall" : "sd.system.dimension.spacing.medium",
+        paddingRight: o ? "sd.system.dimension.spacing.extraSmall" : "sd.system.dimension.spacing.medium"
+      } : {}
+    );
+    return /* @__PURE__ */ g(
+      "button",
+      {
+        ref: l,
+        className: h(y, u, p),
+        ...c,
+        children: [
+          t && /* @__PURE__ */ i(
+            v,
+            {
+              size: n.size,
+              color: s.styleType === void 0 || s.styleType === "filled" ? "white" : "gray"
+            }
+          ),
+          !t && e && /* @__PURE__ */ i(r, { p: "2px", children: e }),
+          /* @__PURE__ */ i(r, { children: a }),
+          !t && o && /* @__PURE__ */ i(r, { p: "2px", children: o })
+        ]
+      }
+    );
+  }
+);
+export {
+  te as Button,
+  m as ButtonStyle
+};

package/dist/components/CheckBox.js

@@ -0,0 +1,129 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { css as x } 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 u } from "../ui/styled-system/css/sva.js";
+import k from "../assets/checkboxChecked.svg.js";
+import b from "../assets/checkboxUnchecked.svg.js";
+import { CheckboxRoot as g } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
+import { CheckboxContext as f } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
+import { CheckboxControl as C } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
+import { CheckboxLabel as c } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-label.js";
+import { CheckboxHiddenInput as S } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
+const I = {
+  flexShrink: 0,
+  cursor: "pointer",
+  ".group:has(:focus-visible) &": {
+    outlineStyle: "solid",
+    outlineOffset: "-2px",
+    outlineWidth: "1.5px",
+    outlineColor: "sd.system.color.impression.primary",
+    borderRadius: "sd.system.dimension.radius.small"
+  },
+  _disabled: {
+    _checked: {
+      "& svg": {
+        color: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
+      },
+      "& .checkmark": {
+        color: "color-mix(in srgb, {colors.sd.system.color.interaction.disabled}, {colors.sd.system.color.impression.onPrimaryContainer});"
+      }
+    }
+  }
+}, _ = {
+  width: 24,
+  height: 24,
+  color: "sd.system.color.impression.primary",
+  "& .checkmark": {
+    color: "sd.system.color.impression.onPrimaryContainer"
+  }
+}, v = {
+  width: 24,
+  height: 24,
+  color: "sd.system.color.component.outline",
+  _disabled: {
+    color: "color-mix(in srgb, {colors.sd.system.color.component.outline}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
+  }
+}, i = u({
+  slots: [
+    "root",
+    "itemControl",
+    "checkedIcon",
+    "uncheckedIcon",
+    "itemTextGroup",
+    "itemText",
+    "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",
+      cursor: "pointer"
+    },
+    itemControl: I,
+    checkedIcon: _,
+    uncheckedIcon: v,
+    itemTextGroup: {
+      display: "flex",
+      flexFlow: "column"
+    },
+    itemText: {
+      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"
+      }
+    },
+    helperText: {
+      color: "sd.system.color.component.onSurfaceVariant",
+      marginTop: "sd.system.dimension.spacing.twoExtraSmall",
+      textStyle: "sd.system.typography.body.extraSmall_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.body.extraSmall_expanded"
+      },
+      _disabled: {
+        color: "sd.system.color.interaction.disabledOnSurface"
+      }
+    }
+  }
+}), F = ({
+  value: n,
+  label: m,
+  helperText: s,
+  className: l,
+  ...d
+}) => {
+  const [a, p] = i.splitVariantProps(d), o = i(a), y = t(
+    o.root,
+    s && x({ alignItems: "flex-start" })
+  );
+  return /* @__PURE__ */ r(
+    g,
+    {
+      value: n,
+      className: t("group", y, l),
+      ...p,
+      children: [
+        /* @__PURE__ */ e(f, { children: (h) => /* @__PURE__ */ e(C, { className: o.itemControl, children: h.checked ? /* @__PURE__ */ e(k, { className: o.checkedIcon }) : /* @__PURE__ */ e(b, { className: o.uncheckedIcon }) }) }),
+        /* @__PURE__ */ r("div", { className: o.itemTextGroup, children: [
+          /* @__PURE__ */ e(c, { className: o.itemText, children: m }),
+          s && /* @__PURE__ */ e(c, { className: o.helperText, children: s })
+        ] }),
+        /* @__PURE__ */ e(S, {})
+      ]
+    }
+  );
+};
+export {
+  F as CheckBox,
+  i as CheckBoxStyle,
+  _ as checkboxCheckedIconCss,
+  I as checkboxIconCss,
+  v as checkboxUncheckedIconCss
+};

package/dist/components/ChoiceBox.js

@@ -0,0 +1,83 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { checkboxIconCss as a, checkboxCheckedIconCss as p, checkboxUncheckedIconCss as I } from "./CheckBox.js";
+import { radioIconCss as C, radioCheckedIconCss as x, radioUncheckedIconCss as l } from "./RadioButton.js";
+import b from "../assets/radioChecked.svg.js";
+import f from "../assets/radioUnchecked.svg.js";
+import u from "../assets/checkboxChecked.svg.js";
+import U from "../assets/checkboxUnchecked.svg.js";
+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 N } from "../ui/styled-system/css/sva.js";
+import { RadioGroupItem as R } from "../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
+import { RadioGroupItemContext as g } from "../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
+import { RadioGroupItemControl as v } from "../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
+import { RadioGroupItemHiddenInput as S } from "../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
+import { CheckboxRoot as G } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
+import { CheckboxContext as P } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
+import { CheckboxControl as j } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
+import { CheckboxHiddenInput as y } from "../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
+const h = N({
+  slots: [
+    "root",
+    "radioItem",
+    "radioCheckedIcon",
+    "radioUncheckedIcon",
+    "checkboxItem",
+    "checkboxCheckedIcon",
+    "checkboxUncheckedIcon"
+  ],
+  base: {
+    root: {
+      display: "flex"
+    },
+    radioItem: C,
+    radioCheckedIcon: x,
+    radioUncheckedIcon: l,
+    checkboxItem: a,
+    checkboxCheckedIcon: p,
+    checkboxUncheckedIcon: I
+  }
+}), Y = ({
+  type: r,
+  value: t,
+  className: i,
+  ...s
+}) => {
+  const [k, m] = h.splitVariantProps(s), c = h(k);
+  if (r === "radio")
+    return /* @__PURE__ */ d(
+      R,
+      {
+        value: t,
+        className: n("group", c.root, i),
+        ...m,
+        children: [
+          /* @__PURE__ */ o(g, { children: (e) => /* @__PURE__ */ o(v, { className: c.radioItem, asChild: !0, children: e.checked ? /* @__PURE__ */ o(b, { className: c.radioCheckedIcon }) : /* @__PURE__ */ o(f, { className: c.radioUncheckedIcon }) }) }),
+          /* @__PURE__ */ o(S, {})
+        ]
+      }
+    );
+  if (r === "checkbox")
+    return /* @__PURE__ */ d(
+      G,
+      {
+        value: t,
+        className: n("group", c.root, i),
+        ...m,
+        children: [
+          /* @__PURE__ */ o(P, { children: (e) => /* @__PURE__ */ o(j, { className: c.checkboxItem, children: e.checked ? /* @__PURE__ */ o(u, { className: c.checkboxCheckedIcon }) : /* @__PURE__ */ o(
+            U,
+            {
+              className: c.checkboxUncheckedIcon
+            }
+          ) }) }),
+          /* @__PURE__ */ o(y, {})
+        ]
+      }
+    );
+};
+export {
+  Y as ChoiceBox,
+  h as ChoiceBoxStyle
+};

package/dist/components/DashboardWidget.js

@@ -0,0 +1,155 @@
+import { jsxs as l, jsx as a } 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";
+import { sva as y } from "../ui/styled-system/css/sva.js";
+import { SerendieSymbol as u } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+const g = y({
+  slots: [
+    "root",
+    "labelContainer",
+    "label",
+    "labelTitle",
+    "labelText",
+    "area",
+    "areaContainer",
+    "areaValue",
+    "areaValueLabel",
+    "areaValueContainer",
+    "areaValueNumber",
+    "areaValueNumberUnit"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sd.system.dimension.spacing.medium",
+      py: "sd.system.dimension.spacing.small",
+      px: "sd.system.dimension.spacing.medium",
+      width: "100%",
+      bgColor: "sd.system.color.component.surface",
+      borderRadius: "sd.system.dimension.radius.medium"
+    },
+    labelContainer: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "100%",
+      cursor: "pointer"
+    },
+    label: {
+      display: "flex",
+      alignItems: "center",
+      gap: "sd.system.dimension.spacing.medium",
+      width: "100%"
+    },
+    labelTitle: {
+      textStyle: "sd.system.typography.label.extraLarge_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.label.extraLarge_expanded"
+      }
+    },
+    labelText: {
+      textStyle: "sd.system.typography.label.small_compact",
+      color: "sd.system.color.component.onSurfaceVariant",
+      _expanded: {
+        textStyle: "sd.system.typography.label.small_expanded"
+      }
+    },
+    area: {
+      display: "grid",
+      gridTemplateColumns: "1fr",
+      gap: "sd.system.dimension.spacing.medium"
+    },
+    areaContainer: {},
+    areaValue: {
+      display: "flex",
+      flexDirection: "column",
+      alignSelf: "flex-end"
+    },
+    areaValueLabel: {
+      color: "sd.system.color.component.onSurfaceVariant",
+      textStyle: "sd.system.typography.label.small_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.label.small_expanded"
+      }
+    },
+    areaValueContainer: {
+      display: "flex",
+      alignItems: "baseline",
+      gap: "sd.system.dimension.spacing.twoExtraSmall"
+    },
+    areaValueNumber: {
+      textStyle: "sd.system.typography.title.large_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.title.large_expanded"
+      }
+    },
+    areaValueNumberUnit: {
+      color: "sd.system.color.component.onSurfaceVariant",
+      textStyle: "sd.system.typography.label.small_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.label.small_expanded"
+      }
+    }
+  },
+  variants: {
+    values: {
+      noValue: {
+        area: {
+          gridTemplateColumns: "1fr"
+        }
+      },
+      singleValue: {
+        area: {
+          gridTemplateColumns: "auto 1fr",
+          gap: "sd.system.dimension.spacing.twoExtraLarge"
+        }
+      },
+      doubleValue: {
+        areaContainer: {
+          gridColumn: "span 2",
+          order: -1
+        },
+        area: {
+          gridTemplateColumns: "1fr 1fr"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    values: "singleValue"
+  }
+}), S = ({
+  values: t,
+  children: n,
+  linkTo: i,
+  className: o,
+  ...m
+}) => {
+  const e = g({
+    values: t === void 0 ? "noValue" : t.length === 1 ? "singleValue" : "doubleValue"
+  }), d = ({ label: s, value: r, unit: p }) => /* @__PURE__ */ l("div", { className: e.areaValue, children: [
+    /* @__PURE__ */ a("h3", { className: e.areaValueLabel, children: s }),
+    /* @__PURE__ */ l("div", { className: e.areaValueContainer, children: [
+      /* @__PURE__ */ a("p", { className: e.areaValueNumber, children: r }),
+      /* @__PURE__ */ a("p", { className: e.areaValueNumberUnit, children: p })
+    ] })
+  ] });
+  return /* @__PURE__ */ l("div", { className: c(e.root, o), ...m, children: [
+    /* @__PURE__ */ l("a", { href: i, className: e.labelContainer, children: [
+      /* @__PURE__ */ l("div", { className: e.label, children: [
+        /* @__PURE__ */ a("h2", { className: e.labelTitle, children: "title" }),
+        /* @__PURE__ */ a("p", { className: e.labelText, children: "icon" })
+      ] }),
+      /* @__PURE__ */ a(u, { name: "chevron-right" })
+    ] }),
+    /* @__PURE__ */ l("div", { className: e.area, children: [
+      t == null ? void 0 : t.map((s, r) => /* @__PURE__ */ a(d, { ...s }, r)),
+      /* @__PURE__ */ a("div", { className: e.areaContainer, children: n })
+    ] })
+  ] });
+};
+export {
+  S as DashboardWidget
+};