@polastack/design-system 0.1.14 → 0.1.15

package/dist/index.d.ts

@@ -370,7 +370,7 @@ declare const formLayoutVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FormLayoutProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof formLayoutVariants> {
-    columns?: number;
+    columns?: number | 'responsive';
 }
 declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>>;
 interface FormSectionProps extends React.HTMLAttributes<HTMLFieldSetElement> {
@@ -717,7 +717,7 @@ interface PrintFieldProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const PrintField: React.ForwardRefExoticComponent<PrintFieldProps & React.RefAttributes<HTMLDivElement>>;
 declare const printFieldGroupVariants: (props?: ({
-    columns?: 2 | 1 | 3 | null | undefined;
+    columns?: 2 | 1 | 3 | "responsive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PrintFieldGroupProps extends React.HTMLAttributes<HTMLDListElement>, VariantProps<typeof printFieldGroupVariants> {
 }

package/dist/index.js

@@ -302,7 +302,7 @@ import * as React4 from "react";
 import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var badgeVariants = cva2(
-  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors",
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors touch:px-3 touch:py-1 touch:text-sm",
   {
     variants: {
       variant: {
@@ -637,7 +637,7 @@ var CardHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "div",
   {
     ref,
-    className: cn("flex flex-col gap-1.5 p-6", className),
+    className: cn("flex flex-col gap-1.5 p-4 sm:p-6", className),
     ...props
   }
 ));
@@ -646,7 +646,7 @@ var CardTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "h3",
   {
     ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    className: cn("text-base sm:text-lg font-semibold leading-none tracking-tight", className),
     ...props
   }
 ));
@@ -660,13 +660,13 @@ var CardDescription = React10.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9("div", { ref, className: cn("p-4 pt-0 sm:p-6 sm:pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   "div",
   {
     ref,
-    className: cn("flex items-center p-6 pt-0", className),
+    className: cn("flex items-center p-4 pt-0 sm:p-6 sm:pt-0", className),
     ...props
   }
 ));
@@ -715,7 +715,7 @@ var ToastViewport = React12.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 ToastViewport.displayName = "ToastViewport";
 var toastVariants = cva5(
-  "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-lg border p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=open]:slide-in-from-right-full data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-lg border p-3 sm:p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-full sm:data-[state=open]:slide-in-from-right-full data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-bottom-full sm:data-[state=closed]:slide-out-to-right-full",
   {
     variants: {
       variant: {
@@ -1865,15 +1865,22 @@ var formLayoutVariants = cva10("", {
   }
 });
 var FormLayout = React26.forwardRef(
-  ({ className, layout, size, columns = 2, style, ...props }, ref) => /* @__PURE__ */ jsx25(
-    "div",
-    {
-      ref,
-      className: cn(formLayoutVariants({ layout, size }), className),
-      style: layout === "grid" ? { gridTemplateColumns: `repeat(${columns}, 1fr)`, ...style } : style,
-      ...props
-    }
-  )
+  ({ className, layout, size, columns = 2, style, ...props }, ref) => {
+    const isResponsive = columns === "responsive";
+    return /* @__PURE__ */ jsx25(
+      "div",
+      {
+        ref,
+        className: cn(
+          formLayoutVariants({ layout, size }),
+          isResponsive && layout === "grid" && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+          className
+        ),
+        style: layout === "grid" && !isResponsive ? { gridTemplateColumns: `repeat(${columns}, 1fr)`, ...style } : style,
+        ...props
+      }
+    );
+  }
 );
 FormLayout.displayName = "FormLayout";
 var FormSection = React26.forwardRef(({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
@@ -1920,7 +1927,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 var [TabsVariantProvider, useTabsVariant] = createContext2("TabsVariant");
 var Tabs = TabsPrimitive.Root;
 var tabsListVariants = cva11(
-  "inline-flex items-center justify-center",
+  "inline-flex items-center justify-center overflow-x-auto max-w-full",
   {
     variants: {
       variant: {
@@ -1940,7 +1947,7 @@ var TabsList = React27.forwardRef(({ className, variant = "default", ...props },
   }
 ) }));
 TabsList.displayName = "TabsList";
-var tabsTriggerBase = "inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 touch:min-h-[--touch-target-min]";
+var tabsTriggerBase = "inline-flex items-center justify-center whitespace-nowrap shrink-0 px-3 py-1.5 text-sm font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 touch:min-h-[--touch-target-min]";
 var tabsTriggerVariantStyles = {
   default: "rounded-md data-[state=active]:bg-[var(--color-surface-raised)] data-[state=active]:shadow-sm data-[state=active]:text-[var(--color-on-surface)] text-[var(--color-on-surface-secondary)]",
   underline: "border-b-2 border-transparent rounded-none data-[state=active]:border-primary-500 data-[state=active]:text-[var(--color-on-surface)] text-[var(--color-on-surface-secondary)]"
@@ -2103,7 +2110,7 @@ var TableCell = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-3 py-2.5 align-middle text-sm [&:has([role=checkbox])]:pr-0",
+      "px-2 py-2 sm:px-3 sm:py-2.5 align-middle text-sm [&:has([role=checkbox])]:pr-0",
       className
     ),
     ...props
@@ -2145,12 +2152,12 @@ function DataTablePagination({
     "div",
     {
       className: cn(
-        "flex items-center justify-between px-3 py-3 text-sm text-[var(--color-on-surface-secondary)]",
+        "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between px-3 py-3 text-sm text-[var(--color-on-surface-secondary)]",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx29("span", { children: "Rows per page" }),
+          /* @__PURE__ */ jsx29("span", { className: "hidden sm:inline", children: "Rows per page" }),
           /* @__PURE__ */ jsx29(
             "select",
             {
@@ -2849,7 +2856,7 @@ var DialogContent = React35.forwardRef(({ className, children, ...props }, ref)
         "inset-0",
         // Desktop: centered modal
         "sm:inset-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
-        "sm:w-full sm:max-w-lg sm:rounded-xl sm:border sm:border-[var(--color-border)]",
+        "sm:w-full sm:max-w-lg md:max-w-xl sm:rounded-xl sm:border sm:border-[var(--color-border)]",
         // Animations
         "animate-in fade-in-0",
         "sm:zoom-in-95 sm:slide-in-from-left-1/2 sm:slide-in-from-top-[48%]",
@@ -3169,7 +3176,7 @@ var DrawerContent = React36.forwardRef(({ className, size, children, ...props },
       {
         ref,
         className: cn(
-          "fixed top-0 h-full bg-[var(--color-surface-raised)] shadow-xl",
+          "fixed top-0 h-full max-w-full bg-[var(--color-surface-raised)] shadow-xl",
           "focus-visible:outline-none",
           side === "right" && "right-0 border-l border-[var(--color-border)] animate-slide-in-right data-[state=closed]:animate-slide-out-right",
           side === "left" && "left-0 border-r border-[var(--color-border)] animate-slide-in-left data-[state=closed]:animate-slide-out-left",
@@ -3191,7 +3198,7 @@ var DrawerHeader = React36.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "flex items-center justify-between border-b border-[var(--color-border)] px-6 py-4",
+        "flex items-center justify-between border-b border-[var(--color-border)] px-4 py-3 sm:px-6 sm:py-4",
         className
       ),
       ...props,
@@ -3270,7 +3277,7 @@ var DrawerFooter = React36.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "flex items-center justify-end gap-2 border-t border-[var(--color-border)] px-6 py-4",
+      "flex items-center justify-end gap-2 border-t border-[var(--color-border)] px-4 py-3 sm:px-6 sm:py-4",
       className
     ),
     ...props
@@ -3840,7 +3847,8 @@ var printFieldGroupVariants = cva16("grid gap-x-6 gap-y-2", {
     columns: {
       1: "grid-cols-1",
       2: "grid-cols-2",
-      3: "grid-cols-3"
+      3: "grid-cols-3",
+      responsive: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
     }
   },
   defaultVariants: {
@@ -3901,7 +3909,7 @@ var StatCard = React46.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-5",
+          "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-4 sm:p-5",
           className
         ),
         ...props,
@@ -3911,7 +3919,7 @@ var StatCard = React46.forwardRef(
             icon && /* @__PURE__ */ jsx48("span", { className: "text-[var(--color-on-surface-muted)]", children: icon })
           ] }),
           /* @__PURE__ */ jsxs27("div", { className: "flex items-baseline gap-2 mt-2", children: [
-            /* @__PURE__ */ jsx48("span", { className: "text-2xl font-bold tabular-nums", children: value }),
+            /* @__PURE__ */ jsx48("span", { className: "text-xl sm:text-2xl font-bold tabular-nums", children: value }),
             trend && /* @__PURE__ */ jsxs27("span", { className: cn("inline-flex items-center gap-0.5 text-xs font-medium", TREND_STYLES[direction]), children: [
               direction !== "neutral" && /* @__PURE__ */ jsx48("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx48("path", { d: TREND_ICONS[direction] }) }),
               trend
@@ -3938,14 +3946,14 @@ var ChartContainer = React47.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs28("div", { className: "flex items-start justify-between gap-4 p-5 pb-0", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4 p-4 sm:p-5 pb-0", children: [
           /* @__PURE__ */ jsxs28("div", { children: [
             /* @__PURE__ */ jsx49("h3", { className: "text-sm font-semibold leading-none tracking-tight", children: title }),
             description && /* @__PURE__ */ jsx49("p", { className: "mt-1 text-xs text-[var(--color-on-surface-muted)]", children: description })
           ] }),
           actions && /* @__PURE__ */ jsx49("div", { className: "flex items-center gap-2 shrink-0", children: actions })
         ] }),
-        /* @__PURE__ */ jsx49("div", { className: "p-5", children })
+        /* @__PURE__ */ jsx49("div", { className: "p-4 sm:p-5", children })
       ]
     }
   )