@sarunyu/system-one 4.3.0 → 4.4.1

package/README.md

@@ -60,12 +60,14 @@ ships no `Page`/`Section`/`Stack` primitives — use whatever layout looks right
 | `Button` | Action button — 5 variants, 10 sizes |
 | `Input` / `TextArea` / `SearchInput` | Text input, multiline, search field |
 | `Dropdown` / `DropdownMultiple` / `OptionList` | Select controls |
-| `Checkbox` / `Radio` | Boolean / single-choice |
+| `Checkbox` / `Toggle` / `Radio` | Checkbox, boolean switch (on/off), single-choice |
 | `DateInput` / `TimeInput` | Date and time pickers |
 | `Tag` / `StatusTag` / `Chip` | Labels, workflow states, filter chips |
 | `Tab` / `TabGroup` | Tabbed navigation |
 | `Card` | Event/content card (desktop / tablet / mobile variants) |
 | `Table` | Data tables (`TableRow` / `TableHeaderCell` / `TableCell`) |
+| `Modal` | Centered overlay — dialog / content / alert variants |
+| `BottomSheet` | Mobile-first bottom sheet (Vaul-based, with backdrop) |
 
 Full prop reference: [`llms.txt`](./llms.txt).
 
@@ -120,6 +122,8 @@ import type {
   ButtonVariant, ButtonSize,
   TagVariant, ChipSize,
   InputProps, DropdownOption,
+  ToggleSize, ToggleProps,
+  ModalVariant, ModalActionLayout,
 } from "@sarunyu/system-one";
 ```
 

package/dist/index.cjs

@@ -247,6 +247,19 @@ const Button = React.forwardRef(function Button2({
   );
 });
 Button.displayName = "Button";
+function BannerMedia({ src, alt }) {
+  if (!src) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-muted" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      alt,
+      className: "pointer-events-none absolute inset-0 size-full object-cover",
+      src
+    }
+  );
+}
 function DurationBadge({
   duration,
   size
@@ -340,7 +353,7 @@ const tagConfig = {
   }
 };
 const Card = React.forwardRef(function Card2({
-  variant = "event",
+  variant = "default",
   size = "desktop",
   children,
   title,
@@ -454,14 +467,7 @@ const Card = React.forwardRef(function Card2({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[84px] w-[149px] shrink-0 overflow-clip rounded-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                alt: "social thumbnail",
-                className: "pointer-events-none absolute inset-0 size-full object-cover",
-                src: bannerSrc
-              }
-            ) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[84px] w-[149px] shrink-0 overflow-clip rounded-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(BannerMedia, { src: bannerSrc, alt: "social thumbnail" }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
             isDesktop ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-[12px]", children: [
@@ -544,14 +550,7 @@ const Card = React.forwardRef(function Card2({
                 imgHeight
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    alt: "live thumbnail",
-                    className: "pointer-events-none absolute inset-0 size-full object-cover",
-                    src: bannerSrc
-                  }
-                ),
+                /* @__PURE__ */ jsxRuntime.jsx(BannerMedia, { src: bannerSrc, alt: "live thumbnail" }),
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -588,14 +587,7 @@ const Card = React.forwardRef(function Card2({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[184px] w-full shrink-0 overflow-clip", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                alt: "news banner",
-                className: "pointer-events-none absolute inset-0 size-full object-cover",
-                src: bannerSrc
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(BannerMedia, { src: bannerSrc, alt: "news banner" }),
             locked && /* @__PURE__ */ jsxRuntime.jsx(LockBadge, {})
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -625,14 +617,7 @@ const Card = React.forwardRef(function Card2({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[114px] w-[171px] shrink-0 overflow-clip", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                alt: "news banner",
-                className: "pointer-events-none absolute inset-0 size-full object-cover",
-                src: bannerSrc
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(BannerMedia, { src: bannerSrc, alt: "news banner" }),
             locked && /* @__PURE__ */ jsxRuntime.jsx(LockBadge, {})
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -670,11 +655,10 @@ const Card = React.forwardRef(function Card2({
             className: cn("relative w-full shrink-0 overflow-clip", bannerClass),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
+                BannerMedia,
                 {
-                  alt: variant === "news" ? "news banner" : "event banner",
-                  className: "pointer-events-none absolute inset-0 size-full object-cover",
-                  src: bannerSrc
+                  src: bannerSrc,
+                  alt: variant === "news" ? "news banner" : "event banner"
                 }
               ),
               locked && /* @__PURE__ */ jsxRuntime.jsx(LockBadge, { size })