@sarunyu/system-one 1.1.2 → 1.3.0

package/dist/index.js

@@ -377,6 +377,160 @@ const Card = forwardRef(function Card2({
   );
 });
 Card.displayName = "Card";
+const pageWidthClass = {
+  sm: "max-w-[640px]",
+  md: "max-w-[960px]",
+  lg: "max-w-[1200px]",
+  xl: "max-w-[1440px]",
+  full: "max-w-none"
+};
+const Page = forwardRef(function Page2({ width = "lg", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      ref,
+      className: cn(
+        "mx-auto w-full px-6 md:px-8 py-10 flex flex-col gap-12",
+        pageWidthClass[width],
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+const PageHeader = forwardRef(
+  function PageHeader2({ title, description, actions, eyebrow, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 min-w-0", children: [
+            eyebrow && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: eyebrow }),
+            /* @__PURE__ */ jsx("h1", { children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-[720px]", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3 shrink-0", children: actions })
+        ]
+      }
+    );
+  }
+);
+const Section = forwardRef(function Section2({ title, description, actions, className, children, ...rest }, ref) {
+  const hasHeader = Boolean(title || description || actions);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn("flex flex-col gap-6", className),
+      ...rest,
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
+            title && /* @__PURE__ */ jsx("h2", { children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-[720px]", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3 shrink-0", children: actions })
+        ] }),
+        children
+      ]
+    }
+  );
+});
+const Toolbar = forwardRef(
+  function Toolbar2({ end, className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-wrap items-center gap-3",
+          className
+        ),
+        ...rest,
+        children: [
+          children,
+          end && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-3", children: end })
+        ]
+      }
+    );
+  }
+);
+const cardGridColsClass = {
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+};
+const CardGrid = forwardRef(
+  function CardGrid2({ cols = 3, className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("grid gap-6", cardGridColsClass[cols], className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+const stackGapClass = {
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12"
+};
+const stackAlignClass = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+const stackJustifyClass = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+const Stack = forwardRef(function Stack2({
+  direction = "col",
+  gap = 4,
+  align,
+  justify,
+  wrap,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex",
+        direction === "col" ? "flex-col" : "flex-row",
+        stackGapClass[gap],
+        align && stackAlignClass[align],
+        justify && stackJustifyClass[justify],
+        wrap && "flex-wrap",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
 const sizeStyles$1 = {
   large: {
     container: "h-9 px-3 gap-1",
@@ -3876,19 +4030,25 @@ TimeInput.displayName = "TimeInput";
 export {
   Button,
   Card,
+  CardGrid,
   Chip,
   DateInput,
   Dropdown,
   DropdownMultiple,
   Input,
   OptionList,
+  Page,
+  PageHeader,
   SearchInput,
+  Section,
+  Stack,
   StatusTag,
   Tab,
   TabGroup,
   Tag,
   TextArea,
   TimeInput,
+  Toolbar,
   cn
 };
 //# sourceMappingURL=index.js.map