@sarunyu/system-one 4.2.1 → 4.3.0

package/AGENTS.md

@@ -15,6 +15,7 @@ in this package.** This file is the short version: the rules you must follow.
    - Custom status pills, category labels → use `<Tag>` / `<StatusTag>` / `<Chip>`.
    - Custom tabs → use `<TabGroup>`.
    - Custom checkbox/radio → use `<Checkbox>` / `<Radio>`.
+   - Custom toggle / switch → use `<Toggle>`.
    - Custom date/time pickers → use `<DateInput>` / `<TimeInput>`.
    - Custom tables → use `<Table>` + `<TableRow>` + `<TableHeaderCell>` + `<TableCell>`.
    - Custom modals/dialogs/alerts → use `<Modal>` (wrap it in your own `fixed inset-0` backdrop).

package/dist/index.cjs

@@ -247,7 +247,6 @@ const Button = React.forwardRef(function Button2({
   );
 });
 Button.displayName = "Button";
-const imgBanner = "";
 function DurationBadge({
   duration,
   size
@@ -343,6 +342,7 @@ const tagConfig = {
 const Card = React.forwardRef(function Card2({
   variant = "event",
   size = "desktop",
+  children,
   title,
   locked = true,
   image,
@@ -365,7 +365,24 @@ const Card = React.forwardRef(function Card2({
   // live
   duration
 }, ref) {
-  const bannerSrc = image ?? imgBanner;
+  const bannerSrc = image ?? "";
+  if (variant === "default") {
+    const shellPadding = size === "desktop" ? "p-4" : size === "tablet" ? "p-3" : "p-2.5";
+    const shellRadius = size === "mobile" ? "rounded-[6px]" : "rounded-[8px]";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex min-h-0 min-w-0 flex-col bg-card text-foreground shadow-card",
+          shellRadius,
+          shellPadding,
+          className
+        ),
+        children
+      }
+    );
+  }
   if (variant === "social") {
     const isDesktop = size === "desktop";
     const cardWidth = isDesktop ? "w-[587px]" : "w-[343px]";
@@ -1002,6 +1019,109 @@ const Checkbox = React.forwardRef(function Checkbox2({
   );
 });
 Checkbox.displayName = "Checkbox";
+const trackClass = {
+  sm: "w-8 h-5",
+  md: "w-10 h-6"
+};
+const thumbClass = {
+  sm: "top-0.5 left-0.5 size-4",
+  md: "top-0.5 left-0.5 size-5"
+};
+const thumbTranslate = {
+  sm: "translate-x-3",
+  md: "translate-x-4"
+};
+const Toggle = React.forwardRef(function Toggle2({
+  checked = false,
+  disabled = false,
+  onChange,
+  label,
+  description,
+  size: sizeProp,
+  id: idProp,
+  ariaLabel,
+  className
+}, ref) {
+  const generatedId = React.useId();
+  const switchId = idProp ?? generatedId;
+  const hasText = label !== void 0 || description !== void 0;
+  const hasDescription = description !== void 0;
+  const size = sizeProp ?? (hasText ? "sm" : "md");
+  const trackBg = disabled ? checked ? "bg-switch-on-disabled" : "bg-switch-background" : checked ? "bg-primary-action" : "bg-switch-background";
+  const thumbBg = disabled && !checked ? "bg-switch-background" : "bg-[var(--fill-white-1000)]";
+  const switchEl = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      id: switchId,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": hasText ? void 0 : ariaLabel,
+      disabled,
+      onClick: () => onChange == null ? void 0 : onChange(!checked),
+      className: cn(
+        "relative shrink-0 rounded-full p-0 transition-colors duration-200 ease-out",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        trackClass[size],
+        trackBg
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "pointer-events-none absolute rounded-full transition-transform duration-200 ease-out",
+            "shadow-[var(--toggle-knob-shadow)]",
+            thumbClass[size],
+            thumbBg,
+            checked && thumbTranslate[size]
+          )
+        }
+      )
+    }
+  );
+  if (!hasText) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex", className), children: switchEl });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: cn(
+        "flex w-full min-w-0 gap-4 select-none",
+        hasDescription ? "items-start" : "items-center",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0 text-sm font-normal leading-5", children: [
+          label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                disabled ? "text-disabled" : "text-foreground"
+              ),
+              children: label
+            }
+          ),
+          hasDescription && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "whitespace-pre-wrap font-normal",
+                disabled ? "text-disabled" : "text-[color:var(--text-default-secondary)]"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: switchEl })
+      ]
+    }
+  );
+});
+Toggle.displayName = "Toggle";
 function RadioVisual({ checked, disabled }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -3491,6 +3611,7 @@ function Modal({
 }) {
   const isContent = variant === "content";
   const isAlert = variant === "alert";
+  const isDialog = variant === "dialog";
   const isDesktop = responsive === "desktop";
   const alert = ALERT_CONFIG[alertStatus];
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3499,7 +3620,7 @@ function Modal({
       className: cn(
         "w-auto overflow-hidden border border-border bg-background",
         isAlert ? "w-[343px] rounded-2xl" : "rounded-xl",
-        isContent ? "min-w-[343px] max-w-[500px] " : isAlert ? void 0 : "min-w-[375px] max-w-[500px]",
+        isContent ? "min-w-[343px] max-w-[500px] " : isAlert ? void 0 : isDialog && "min-w-[375px] max-w-[500px]",
         className
       ),
       children: [
@@ -5290,6 +5411,7 @@ exports.TableRow = TableRow;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.TimeInput = TimeInput;
+exports.Toggle = Toggle;
 exports.cn = cn;
 exports.useIsMobile = useIsMobile;
 //# sourceMappingURL=index.cjs.map