@sarunyu/system-one 4.2.1 → 4.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useContext, createContext } from "react";
+import React__default, { forwardRef, useState, useRef, useEffect, useCallback, useId, useMemo, useLayoutEffect, useContext, createContext } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { BookmarkSimpleIcon, BroadcastIcon, CalendarBlank, MapPin, Users, XCircle, CheckCircle, Lock, Check, Plus, Circle, Minus, CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight, CaretUp, CaretDown, X, MagnifyingGlass, ArrowUp, ArrowDown, ArrowsDownUp, Clock } from "@phosphor-icons/react";
@@ -228,7 +228,6 @@ const Button = forwardRef(function Button2({
   );
 });
 Button.displayName = "Button";
-const imgBanner = "";
 function DurationBadge({
   duration,
   size
@@ -324,6 +323,7 @@ const tagConfig = {
 const Card = forwardRef(function Card2({
   variant = "event",
   size = "desktop",
+  children,
   title,
   locked = true,
   image,
@@ -346,7 +346,24 @@ const Card = 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__ */ 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]";
@@ -983,6 +1000,109 @@ const Checkbox = 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 = forwardRef(function Toggle2({
+  checked = false,
+  disabled = false,
+  onChange,
+  label,
+  description,
+  size: sizeProp,
+  id: idProp,
+  ariaLabel,
+  className
+}, ref) {
+  const generatedId = 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__ */ 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__ */ 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__ */ jsx("span", { className: cn("inline-flex", className), children: switchEl });
+  }
+  return /* @__PURE__ */ 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__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0 text-sm font-normal leading-5", children: [
+          label !== void 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                disabled ? "text-disabled" : "text-foreground"
+              ),
+              children: label
+            }
+          ),
+          hasDescription && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "whitespace-pre-wrap font-normal",
+                disabled ? "text-disabled" : "text-[color:var(--text-default-secondary)]"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: switchEl })
+      ]
+    }
+  );
+});
+Toggle.displayName = "Toggle";
 function RadioVisual({ checked, disabled }) {
   return /* @__PURE__ */ jsx(
     "span",
@@ -3472,6 +3592,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__ */ jsxs(
@@ -3480,7 +3601,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: [
@@ -5272,6 +5393,7 @@ export {
   Tag,
   TextArea,
   TimeInput,
+  Toggle,
   cn,
   useIsMobile
 };