@sarunyu/system-one 1.1.1 → 1.2.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",
@@ -2785,7 +2939,7 @@ const sizeClasses = {
     font: "font-bold",
     gap: "gap-1.5",
     iconSize: "h-5 w-5",
-    badgeClass: "min-w-[18px] px-[5.5px] text-[length:var(--text-xs)] leading-[var(--leading-4)]"
+    badgeClass: "min-w-[16px] h-[16px] px-[3px] text-[length:var(--text-xs)] leading-[var(--leading-4)]"
   },
   md: {
     pad: "px-2.5 py-2",
@@ -2794,7 +2948,7 @@ const sizeClasses = {
     font: "font-bold",
     gap: "gap-1.5",
     iconSize: "h-[18px] w-[18px]",
-    badgeClass: "min-w-[18px] px-[5.5px] text-[length:var(--text-xs)] leading-[var(--leading-4)]"
+    badgeClass: "min-w-[16px] h-[16px] px-[3px] text-[length:var(--text-xs)] leading-[var(--leading-4)]"
   },
   sm: {
     pad: "px-2 py-1.5",
@@ -2803,7 +2957,7 @@ const sizeClasses = {
     font: "font-semibold",
     gap: "gap-1",
     iconSize: "h-4 w-4",
-    badgeClass: "min-h-[14px] px-1 text-[length:var(--text-xxs)] leading-[var(--leading-3)]"
+    badgeClass: "min-w-[14px] h-[14px] px-1 text-[length:var(--text-xxs)] leading-[var(--leading-3)]"
   }
 };
 function DefaultTabIcon({ className }) {
@@ -2824,7 +2978,7 @@ const Tab = forwardRef(function Tab2({
   const hasNotification = notification !== void 0 && notification !== null;
   const renderedIcon = icon === true ? /* @__PURE__ */ jsx(DefaultTabIcon, { className: s.iconSize }) : icon;
   const textColor = disabled ? "text-disabled" : active ? "text-primary-action" : "text-muted-foreground";
-  const borderColor = active && !disabled ? "border-primary-action" : "border-border";
+  const borderColor = disabled ? "border-border-disabled" : active ? "border-primary-action" : "border-border";
   const cursor = disabled ? "cursor-not-allowed" : "cursor-pointer";
   const hoverBg = !disabled && !active ? "hover:bg-hover-bg" : "";
   return /* @__PURE__ */ jsxs(
@@ -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