@serendie/ui 0.1.12 → 0.1.13

package/dist/components/Divider.js

@@ -0,0 +1,49 @@
+import { jsx as d } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import { cx as n } from "../ui/styled-system/css/cx.js";
+import { cva as a } from "../ui/styled-system/css/cva.js";
+import "../ui/styled-system/helpers.js";
+const r = a({
+  base: {
+    border: "none"
+  },
+  variants: {
+    color: {
+      light: {
+        borderColor: "sd.reference.color.scale.gray.200"
+      },
+      normal: {
+        borderColor: "sd.reference.color.scale.gray.300"
+      },
+      dark: {
+        borderColor: "sd.system.color.component.outlineVariant"
+      }
+    },
+    type: {
+      horizontal: {
+        width: "100%",
+        height: "sd.reference.dimension.scale.1",
+        borderBottomStyle: "solid",
+        borderWidth: "sd.system.dimension.border.medium"
+      },
+      vertical: {
+        borderLeftStyle: "solid",
+        width: "sd.reference.dimension.scale.1",
+        borderWidth: "sd.system.dimension.border.medium",
+        height: "100%",
+        minHeight: "10px"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "normal",
+    type: "horizontal"
+  }
+}), b = (e) => {
+  const [o, t] = r.splitVariantProps(e), { className: s, ...i } = t;
+  return /* @__PURE__ */ d("hr", { className: n(r(o), s), ...i });
+};
+export {
+  b as Divider,
+  r as DividerStyle
+};

package/dist/components/Drawer.js

@@ -0,0 +1,98 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import { cx as s } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+import { sva as p } from "../ui/styled-system/css/sva.js";
+import { IconButton as g } from "./IconButton.js";
+import { SerendieSymbol as f } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+import { Portal as h } from "../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { DialogRoot as x } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
+import { DialogBackdrop as y } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
+import { DialogPositioner as u } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
+import { DialogContent as w } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
+import { DialogCloseTrigger as b } from "../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
+const r = p({
+  slots: ["backdrop", "content", "contentInner", "closeTrigger"],
+  base: {
+    backdrop: {
+      background: "sd.system.color.component.scrim",
+      position: "fixed",
+      inset: 0,
+      zIndex: "sd.system.elevation.zIndex.modal"
+    },
+    content: {
+      position: "fixed",
+      top: "0",
+      width: "calc(100% - {spacing.sd.system.dimension.spacing.extraLarge})",
+      maxWidth: "375px",
+      height: "100vh",
+      gap: "sd.system.dimension.spacing.twoExtraLarge",
+      backgroundColor: "sd.system.color.component.surface",
+      boxShadow: "sd.system.elevation.shadow.level5",
+      zIndex: "sd.system.elevation.zIndex.modal"
+    },
+    contentInner: {
+      display: "grid",
+      gap: "sd.system.dimension.spacing.medium"
+    },
+    closeTrigger: {
+      display: "flex",
+      alignItems: "flex-start",
+      padding: "sd.system.dimension.spacing.twoExtraSmall"
+    }
+  },
+  variants: {
+    type: {
+      left: {
+        content: {
+          left: "0",
+          justifyContent: "flex-start"
+        }
+      },
+      full: {
+        content: {
+          left: "0",
+          width: "100%",
+          minWidth: "100%",
+          maxWidth: "100%"
+        }
+      },
+      right: {
+        content: {
+          right: "0"
+        },
+        closeTrigger: {
+          justifyContent: "flex-end"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    type: "right"
+  }
+}), E = ({
+  isOpen: n,
+  children: i,
+  contentClassName: a,
+  backdropClassName: l,
+  ...m
+}) => {
+  const [d, c] = r.splitVariantProps(m), t = r(d);
+  return /* @__PURE__ */ e(x, { open: n, ...c, children: /* @__PURE__ */ o(h, { children: [
+    /* @__PURE__ */ e(y, { className: s(t.backdrop, l) }),
+    /* @__PURE__ */ e(u, { children: /* @__PURE__ */ o(w, { className: s(t.content, a), children: [
+      /* @__PURE__ */ e("header", { className: t.closeTrigger, children: /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
+        g,
+        {
+          icon: /* @__PURE__ */ e(f, { name: "close" }),
+          shape: "rectangle",
+          styleType: "ghost"
+        }
+      ) }) }),
+      i
+    ] }) })
+  ] }) });
+};
+export {
+  E as Drawer
+};

package/dist/components/DropdownMenu.js

@@ -0,0 +1,174 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import "../preset.js";
+import "./Accordion.js";
+import "./AccordionGroup.js";
+import "./Avatar.js";
+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 "./BottomNavigationItem.js";
+import { Button as c } from "./Button.js";
+import "./CheckBox.js";
+import "./ChoiceBox.js";
+import "./DashboardWidget.js";
+import "./Divider.js";
+import "./Drawer.js";
+import { IconButton as y } from "./IconButton.js";
+import "./ListItem.js";
+import "./ModalDialog.js";
+import "./NotificationBadge.js";
+import "./ProgressIndicator.js";
+import "./RadioButton.js";
+import "./Search.js";
+import "./Select.js";
+import "react";
+import "./Switch.js";
+import "./TabItem.js";
+import "./Tabs.js";
+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 { 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 { MenuItem as S } from "../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
+const v = l({
+  slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
+  base: {
+    content: {
+      bgColor: "sd.system.color.component.surface",
+      borderRadius: "sd.system.dimension.radius.medium",
+      bg: "sd.system.color.component.surface",
+      boxShadow: "sd.system.elevation.shadow.level1",
+      outline: "none"
+    },
+    itemGroup: {
+      width: 240
+    },
+    item: {
+      display: "flex",
+      height: "48px",
+      alignItems: "center",
+      gap: "sd.system.dimension.spacing.small",
+      paddingX: "sd.system.dimension.spacing.medium",
+      paddingY: "sd.system.dimension.spacing.extraSmall",
+      cursor: "pointer",
+      textStyle: "sd.system.typography.body.medium_compact",
+      expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      },
+      _hover: {
+        bgColor: "sd.system.color.interaction.hoveredVariant"
+      },
+      _highlighted: {
+        bgColor: "sd.system.color.interaction.hoveredVariant"
+      }
+    },
+    itemIcon: {
+      "& svg": {
+        width: "sd.reference.dimension.scale.8",
+        height: "sd.reference.dimension.scale.8"
+      }
+    },
+    button: {
+      paddingY: "sd.system.dimension.spacing.small",
+      paddingInlineStart: "sd.system.dimension.spacing.medium",
+      paddingRight: "sd.system.dimension.spacing.small",
+      color: "sd.system.color.component.onSurfaceVariant",
+      gap: "sd.system.dimension.spacing.extraSmall",
+      textStyle: "sd.system.typography.body.medium_compact",
+      expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      },
+      _disabled: {
+        outline: "solid",
+        outlineOffset: "0px",
+        outlineColor: "sd.system.color.component.outline",
+        outlineWidth: "sd.system.dimension.border.medium"
+      },
+      _expanded: {
+        textStyle: "sd.system.typography.body.medium_compact",
+        expanded: {
+          textStyle: "sd.system.typography.body.medium_expanded"
+        },
+        // Note: leftIcon が _open を受け取れないため button 側で制御
+        "& svg": {
+          transform: "rotate(180deg)"
+        }
+      }
+    },
+    buttonIcon: {
+      color: "sd.system.color.component.onSurface",
+      marginLeft: "2px",
+      transition: "transform 0.2s"
+    }
+  }
+}), pe = ({
+  styleType: r = "default",
+  title: i,
+  items: d,
+  disabled: m,
+  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,
+          {
+            name: "menu",
+            size: 24,
+            className: o.buttonIcon
+          }
+        ),
+        shape: "rectangle",
+        disabled: m,
+        styleType: "outlined",
+        title: i
+      }
+    ) : /* @__PURE__ */ e(
+      c,
+      {
+        styleType: "rectangle",
+        size: "medium",
+        disabled: m,
+        rightIcon: /* @__PURE__ */ e(
+          s,
+          {
+            name: "chevron-down",
+            size: 24,
+            className: o.buttonIcon
+          }
+        ),
+        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
+    )) }) }) }) })
+  ] });
+};
+export {
+  pe as DropdownMenu,
+  v as DropdownMenuStyle
+};

package/dist/components/IconButton.js

@@ -0,0 +1,117 @@
+import { jsx as d } from "react/jsx-runtime";
+import a from "react";
+import "../ui/styled-system/css/css.js";
+import { cx as c } from "../ui/styled-system/css/cx.js";
+import { cva as m } from "../ui/styled-system/css/cva.js";
+import "../ui/styled-system/helpers.js";
+const e = m({
+  base: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    color: "sd.system.color.component.onSurface",
+    outlineWidth: "sd.system.dimension.border.medium",
+    outlineStyle: "solid",
+    cursor: "pointer",
+    "& svg": {
+      width: "sd.reference.dimension.scale.8",
+      height: "sd.reference.dimension.scale.8"
+    },
+    _disabled: {
+      color: "sd.system.color.interaction.disabledOnSurface",
+      cursor: "not-allowed",
+      outlineColor: "transparent",
+      bg: "sd.system.color.interaction.disabled"
+    }
+  },
+  variants: {
+    shape: {
+      rectangle: {
+        borderRadius: "sd.system.dimension.radius.medium"
+      },
+      circle: {
+        borderRadius: "sd.system.dimension.radius.full"
+      }
+    },
+    styleType: {
+      filled: {
+        color: "sd.system.color.impression.onPrimaryContainer",
+        bgColor: "sd.system.color.impression.primaryContainer",
+        _enabled: {
+          _hover: {
+            backgroundImage: "linear-gradient(0deg, {colors.sd.system.color.interaction.hovered} 0%, {colors.sd.system.color.interaction.hovered} 100%)"
+          },
+          _focusVisible: {
+            outlineWidth: "sd.system.dimension.border.medium",
+            outlineStyle: "solid",
+            outlineColor: "sd.system.color.interaction.hovered",
+            outlineOffset: "-1px",
+            backgroundImage: "linear-gradient(0deg, {colors.sd.system.color.interaction.hovered} 0%, {colors.sd.system.color.interaction.hovered} 100%)"
+          }
+        }
+      },
+      outlined: {
+        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"
+          }
+        }
+      },
+      ghost: {
+        outlineColor: "transparent",
+        _enabled: {
+          _hover: {
+            bgColor: "sd.system.color.interaction.hoveredVariant"
+          },
+          _focusVisible: {
+            bgColor: "sd.system.color.interaction.hoveredVariant",
+            outlineColor: "sd.system.color.component.outlineVariant"
+          }
+        },
+        _disabled: {
+          bg: "transparent"
+        }
+      }
+    },
+    size: {
+      large: {
+        w: "{spacing.sd.reference.dimension.scale.17}",
+        h: "{spacing.sd.reference.dimension.scale.17}",
+        "& svg": {
+          width: "sd.reference.dimension.scale.12",
+          height: "sd.reference.dimension.scale.12"
+        }
+      },
+      medium: {
+        w: "{spacing.sd.reference.dimension.scale.13}",
+        h: "{spacing.sd.reference.dimension.scale.13}"
+      },
+      small: {
+        w: "{spacing.sd.reference.dimension.scale.10}",
+        h: "{spacing.sd.reference.dimension.scale.10}"
+      }
+    }
+  },
+  defaultVariants: {
+    shape: "circle",
+    styleType: "filled",
+    size: "medium"
+  }
+}), b = a.forwardRef(
+  ({ icon: o, className: s, ...r }, n) => {
+    const [i, t] = e.splitVariantProps(r), l = e(i);
+    return /* @__PURE__ */ d("button", { ref: n, className: c(l, s), ...t, children: o });
+  }
+);
+export {
+  b as IconButton,
+  e as IconButtonStyle
+};

package/dist/components/List.js

@@ -0,0 +1,5 @@
+import { jsx as o } from "react/jsx-runtime";
+const e = ({ children: r, ...t }) => /* @__PURE__ */ o("ul", { ...t, children: r });
+export {
+  e as List
+};

package/dist/components/ListItem.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-export declare const ListItemStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"description" | "title" | "root" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
+export declare const ListItemStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "root" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
     isLargeLeftIcon: {
         true: {
             leftIcon: {

package/dist/components/ListItem.js

@@ -0,0 +1,191 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { css as c } from "../ui/styled-system/css/css.js";
+import { cx as o } 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 { NotificationBadge as v } from "./NotificationBadge.js";
+const p = b({
+  slots: [
+    "root",
+    "wrapper",
+    "textGroup",
+    "title",
+    "description",
+    "rightIcon",
+    "leftIcon",
+    "badge"
+  ],
+  base: {
+    root: {
+      position: "relative"
+    },
+    wrapper: {
+      minH: 48,
+      display: "flex",
+      alignItems: "center",
+      paddingX: "sd.system.dimension.spacing.medium",
+      paddingY: "sd.system.dimension.spacing.extraSmall",
+      gap: "sd.system.dimension.spacing.small",
+      cursor: "pointer",
+      _hover: {
+        background: "color-mix(in srgb, {colors.sd.system.color.interaction.hoveredVariant}, {colors.sd.system.color.component.surface});"
+      },
+      _focusVisible: {
+        outline: "1px solid",
+        outlineColor: "sd.system.color.component.outline"
+      },
+      _selected: {
+        background: "sd.system.color.interaction.selectedSurface",
+        _hover: {
+          background: "sd.system.color.interaction.selectedSurface"
+        }
+      },
+      _disabled: {
+        opacity: 0.3,
+        cursor: "not-allowed",
+        _selected: {
+          background: "transparent"
+        }
+      }
+    },
+    textGroup: {
+      display: "flex",
+      flexDirection: "column",
+      flexGrow: 1
+    },
+    title: {
+      py: "sd.system.dimension.spacing.twoExtraSmall",
+      textStyle: "sd.system.typography.label.extraLarge_compact",
+      color: "sd.system.color.component.onSurface",
+      _expanded: {
+        textStyle: "sd.system.typography.label.extraLarge_expanded"
+      },
+      _disabled: {
+        opacity: 0.3
+      }
+    },
+    description: {
+      display: "flex",
+      flexDirection: "column",
+      textStyle: "sd.system.typography.body.extraSmall_compact",
+      color: "sd.system.color.component.onSurfaceVariant",
+      _expanded: {
+        textStyle: "sd.system.typography.body.extraSmall_expanded"
+      },
+      _disabled: {
+        opacity: 0.3
+      }
+    },
+    leftIcon: {
+      flexShrink: 0,
+      "& svg": {
+        display: "block",
+        maxHeight: "100%",
+        maxWidth: "100%",
+        width: "24px",
+        height: "24px"
+      },
+      _disabled: {
+        opacity: 0.3
+      }
+    },
+    rightIcon: {
+      flexShrink: 0,
+      "& svg": {
+        width: "24px",
+        height: "24px"
+      },
+      _disabled: {
+        opacity: 0.3
+      }
+    },
+    badge: {
+      position: "absolute",
+      right: "sd.system.dimension.spacing.medium",
+      top: "sd.system.dimension.spacing.extraSmall",
+      height: 24,
+      minW: 24
+    }
+  },
+  variants: {
+    isLargeLeftIcon: {
+      true: {
+        leftIcon: {
+          "& svg": {
+            width: "40px",
+            height: "40px"
+          }
+        }
+      },
+      false: {}
+    },
+    size: {
+      small: {
+        wrapper: {
+          minH: 38
+        }
+      }
+    }
+  }
+}), k = ({
+  leftIcon: a,
+  rightIcon: r,
+  title: m,
+  description: i,
+  badge: l,
+  children: d,
+  disabled: x,
+  selected: y,
+  focusVisible: g,
+  className: h,
+  ...n
+}) => {
+  const [u, f] = p.splitVariantProps(n), e = p(u);
+  return /* @__PURE__ */ s("li", { className: o(e.root, h), ...f, children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        tabIndex: 1,
+        className: o(
+          e.wrapper,
+          i && c({ alignItems: "flex-start" })
+        ),
+        "data-disabled": x ? !0 : void 0,
+        "data-selected": y ? !0 : void 0,
+        "data-focus-visible": g ? !0 : void 0,
+        children: [
+          a && /* @__PURE__ */ t(
+            "div",
+            {
+              className: e.leftIcon,
+              style: n.isLargeLeftIcon ? { padding: "0", width: "40px", height: "40px" } : { padding: "0", width: "24px", height: "24px" },
+              children: a
+            }
+          ),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: o(
+                e.textGroup,
+                (!!i || !!d) && c({ alignItems: "flex-start" })
+              ),
+              children: [
+                /* @__PURE__ */ t("span", { className: e.title, children: m }),
+                /* @__PURE__ */ s("div", { className: e.description, children: [
+                  i,
+                  d
+                ] })
+              ]
+            }
+          ),
+          r && /* @__PURE__ */ t("div", { className: e.rightIcon, children: r })
+        ]
+      }
+    ),
+    l && /* @__PURE__ */ t("div", { className: e.badge, children: /* @__PURE__ */ t(v, { count: l, variant: "secondary" }) })
+  ] });
+};
+export {
+  k as ListItem,
+  p as ListItemStyle
+};

package/dist/components/ModalDialog.d.ts

@@ -1,6 +1,6 @@
 import { DialogRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../styled-system/css';
-declare const ModalDialogStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../styled-system/types').SlotRecipeVariantRecord<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
+declare const ModalDialogStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../styled-system/types').SlotRecipeVariantRecord<"content" | "title" | "description" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
 type Props = {
     isOpen: boolean;
     title: string;