pxengine 0.1.55 → 0.1.56

package/dist/index.mjs

@@ -85,19 +85,30 @@ var TextAtom = ({
   markdown = false
 }) => {
   const baseStyles = {
-    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray900",
-    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray900",
-    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray900",
-    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray900",
-    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray700",
-    small: "text-sm font-medium leading-none text-gray600",
-    muted: "text-sm text-muted-foreground",
-    label: "text-[10px] font-bold text-gray400 uppercase tracking-widest pl-1"
+    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+    h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+    h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+    p: "leading-7 [&:not(:first-child)]:mt-6",
+    small: "text-sm font-medium leading-none",
+    muted: "text-sm",
+    label: "text-[10px] font-bold uppercase tracking-widest pl-1"
+  };
+  const defaultColors = {
+    h1: "var(--gray900)",
+    h2: "var(--gray900)",
+    h3: "var(--gray900)",
+    h4: "var(--gray900)",
+    p: "var(--gray700)",
+    small: "var(--gray600)",
+    muted: "hsl(var(--muted-foreground))",
+    label: "var(--gray400)"
   };
   const Component2 = variant === "small" || variant === "muted" || variant === "label" ? "p" : variant;
   const wrapperStyles = {
-    ...style,
-    ...backgroundColor && { backgroundColor }
+    color: `var(--px-text-color, ${defaultColors[variant] ?? "inherit"})`,
+    ...backgroundColor && { backgroundColor },
+    ...style
   };
   if (markdown) {
     return /* @__PURE__ */ jsx(
@@ -24550,6 +24561,7 @@ var IconAtom = ({
   size = 20,
   color,
   strokeWidth,
+  textColor = "text-dark",
   className,
   style
 }) => {
@@ -24564,7 +24576,7 @@ var IconAtom = ({
       size,
       color,
       strokeWidth,
-      className: cn("shrink-0 text-black", className),
+      className: cn("shrink-0", textColor, className),
       style
     }
   );
@@ -25081,17 +25093,43 @@ var InputAtom = ({
   disabled,
   options,
   config,
+  labelColor,
   className,
   style
 }) => {
   const containerClass = cn("flex flex-col gap-2 w-full", className);
+  const getAlignmentClass = (textAlign2) => {
+    switch (textAlign2) {
+      case "center":
+        return "items-center";
+      case "right":
+        return "items-end";
+      default:
+        return "items-start";
+    }
+  };
+  const alignmentClass = getAlignmentClass(style?.textAlign);
+  const alignedContainerClass = cn(containerClass, alignmentClass);
+  const { textAlign, ...remainingStyle } = style || {};
+  const labelBaseStyle = {
+    color: labelColor,
+    backgroundColor: "transparent",
+    background: "none"
+  };
   const renderLabel = () => {
     if (!label) return null;
-    return /* @__PURE__ */ jsxs6(Label, { className: "text-sm font-semibold text-foreground/80 pl-0.5", children: [
-      label,
-      " ",
-      required && /* @__PURE__ */ jsx17("span", { className: "text-destructive", children: "*" })
-    ] });
+    return /* @__PURE__ */ jsxs6(
+      Label,
+      {
+        style: labelBaseStyle,
+        className: "text-sm font-semibold text-foreground/80 pl-0.5 border-none shadow-none",
+        children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx17("span", { className: "text-destructive", children: "*" })
+        ]
+      }
+    );
   };
   const renderInput = () => {
     const commonProps = {
@@ -25101,10 +25139,10 @@ var InputAtom = ({
       required,
       readOnly: true,
       className: cn(
-        "rounded-xl border-border bg-background focus:ring-primary shadow-sm",
+        "rounded-xl border-border bg-transparent focus:ring-primary shadow-none",
         className
       ),
-      style
+      style: remainingStyle
     };
     switch (inputType) {
       case "textarea":
@@ -25114,18 +25152,15 @@ var InputAtom = ({
           /* @__PURE__ */ jsx17(
             SelectTrigger,
             {
-              className: cn(
-                "rounded-xl border-border bg-background shadow-sm",
-                className
-              ),
-              style,
+              className: cn("rounded-xl border-border bg-transparent shadow-none", className),
+              style: remainingStyle,
               children: /* @__PURE__ */ jsx17(SelectValue, { placeholder: placeholder || "Select option" })
             }
           ),
           /* @__PURE__ */ jsx17(SelectContent, { className: "rounded-xl border-border shadow-xl", children: options?.map((opt) => /* @__PURE__ */ jsx17(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
         ] });
       case "slider":
-        return /* @__PURE__ */ jsx17("div", { className: "pt-2 pb-1", style, children: /* @__PURE__ */ jsx17(
+        return /* @__PURE__ */ jsx17("div", { className: "pt-2 pb-1 w-full bg-transparent", style: remainingStyle, children: /* @__PURE__ */ jsx17(
           Slider,
           {
             value: [defaultValue || config?.min || 0],
@@ -25137,86 +25172,69 @@ var InputAtom = ({
           }
         ) });
       case "checkbox":
-        return /* @__PURE__ */ jsxs6(
-          "div",
-          {
-            className: cn(
-              "flex items-center space-x-3 py-1.5 px-0.5 group cursor-pointer",
-              className
-            ),
-            style,
-            children: [
-              /* @__PURE__ */ jsx17(
-                Checkbox,
-                {
-                  id: label,
-                  checked: defaultValue,
-                  disabled,
-                  className: "rounded-[6px] border-border data-[state=checked]:bg-primary shadow-sm"
-                }
-              ),
-              /* @__PURE__ */ jsx17(
-                "label",
-                {
-                  htmlFor: label,
-                  className: "text-sm font-medium leading-none cursor-pointer text-foreground/90 group-hover:text-foreground transition-colors",
-                  children: label
-                }
-              )
-            ]
-          }
-        );
+        return /* @__PURE__ */ jsxs6("div", { className: "flex items-center space-x-3 py-1.5 px-0.5 group cursor-pointer bg-transparent", style: remainingStyle, children: [
+          /* @__PURE__ */ jsx17(
+            Checkbox,
+            {
+              id: label,
+              checked: defaultValue,
+              disabled,
+              className: "rounded-[6px] border-border data-[state=checked]:bg-primary"
+            }
+          ),
+          /* @__PURE__ */ jsx17(
+            "label",
+            {
+              htmlFor: label,
+              style: labelBaseStyle,
+              className: "text-sm font-medium leading-none cursor-pointer text-foreground/90 group-hover:text-foreground transition-colors",
+              children: label
+            }
+          )
+        ] });
       case "switch":
-        return /* @__PURE__ */ jsxs6(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-between py-1.5 px-0.5",
-              className
-            ),
-            style,
-            children: [
-              /* @__PURE__ */ jsx17(
-                Label,
-                {
-                  htmlFor: label,
-                  className: "cursor-pointer text-foreground/90",
-                  children: label
-                }
-              ),
-              /* @__PURE__ */ jsx17(
-                Switch,
-                {
-                  id: label,
-                  checked: defaultValue,
-                  disabled,
-                  className: "data-[state=checked]:bg-primary shadow-sm"
-                }
-              )
-            ]
-          }
-        );
+        return /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between py-1.5 px-0.5 bg-transparent", style: remainingStyle, children: [
+          /* @__PURE__ */ jsx17(
+            Label,
+            {
+              htmlFor: label,
+              style: labelBaseStyle,
+              className: "cursor-pointer text-foreground/90",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx17(
+            Switch,
+            {
+              id: label,
+              checked: defaultValue,
+              disabled,
+              className: "data-[state=checked]:bg-primary"
+            }
+          )
+        ] });
       case "radio":
         return /* @__PURE__ */ jsx17(
           RadioGroup,
           {
             value: defaultValue,
             disabled,
-            className: cn("gap-2.5", className),
-            style,
-            children: options?.map((opt) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center space-x-3", children: [
+            className: cn("gap-2.5 bg-transparent", className),
+            style: remainingStyle,
+            children: options?.map((opt) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center space-x-3 bg-transparent", children: [
               /* @__PURE__ */ jsx17(
                 RadioGroupItem,
                 {
                   value: opt.value,
                   id: `${label}-${opt.value}`,
-                  className: "border-border text-primary shadow-sm"
+                  className: "border-border text-primary"
                 }
               ),
               /* @__PURE__ */ jsx17(
                 Label,
                 {
                   htmlFor: `${label}-${opt.value}`,
+                  style: labelBaseStyle,
                   className: "cursor-pointer text-foreground/80 font-medium",
                   children: opt.label
                 }
@@ -25225,44 +25243,27 @@ var InputAtom = ({
           }
         );
       case "otp":
-        return /* @__PURE__ */ jsx17(
-          "div",
+        return /* @__PURE__ */ jsx17("div", { className: "flex justify-center py-2 bg-transparent", style: remainingStyle, children: /* @__PURE__ */ jsx17(InputOTP, { maxLength: config?.maxLength || 6, disabled, value: defaultValue, children: /* @__PURE__ */ jsx17(InputOTPGroup, { className: "gap-2 bg-transparent", children: Array.from({ length: config?.maxLength || 6 }).map((_, i) => /* @__PURE__ */ jsx17(
+          InputOTPSlot,
           {
-            className: cn("flex justify-center py-2", className),
-            style,
-            children: /* @__PURE__ */ jsx17(
-              InputOTP,
-              {
-                maxLength: config?.maxLength || 6,
-                disabled,
-                value: defaultValue,
-                children: /* @__PURE__ */ jsx17(InputOTPGroup, { className: "gap-2", children: Array.from({ length: config?.maxLength || 6 }).map((_, i) => /* @__PURE__ */ jsx17(
-                  InputOTPSlot,
-                  {
-                    index: i,
-                    className: "rounded-xl border border-border bg-background shadow-sm"
-                  },
-                  i
-                )) })
-              }
-            )
-          }
-        );
+            index: i,
+            className: "rounded-xl border border-border bg-transparent"
+          },
+          i
+        )) }) }) });
       default:
         return /* @__PURE__ */ jsx17(
           Input,
           {
             ...commonProps,
             type: inputType,
-            className: cn(
-              "rounded-xl border-border bg-background focus:ring-primary shadow-sm h-11",
-              className
-            )
+            className: cn("rounded-xl border-border bg-transparent focus:ring-primary h-11 shadow-none", className)
           }
         );
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: containerClass, style, children: [
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
+  return /* @__PURE__ */ jsxs6("div", { className: alignedContainerClass, style: remainingStyle, "data-px-styled": hasPxVars ? "" : void 0, children: [
     inputType !== "checkbox" && inputType !== "switch" && renderLabel(),
     renderInput()
   ] });
@@ -25300,13 +25301,20 @@ var BadgeAtom = ({
   className,
   style
 }) => {
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   const customVariants = {
-    purple: "bg-primary/10 text-primary border-primary/20 hover:bg-primary/20",
-    green: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20 hover:bg-emerald-500/20"
+    purple: "border-primary/20 hover:bg-primary/20",
+    green: "border-emerald-500/20 hover:bg-emerald-500/20"
   };
   const isCustom = ["purple", "green"].includes(variant || "");
   const shadcnVariant = isCustom ? "outline" : variant;
   const customClass = isCustom ? customVariants[variant] : "";
+  const resolvedStyle = {
+    backgroundColor: "var(--px-bg-color, transparent)",
+    color: "var(--px-text-color, inherit)",
+    borderColor: "var(--px-border-color, currentColor)",
+    ...style
+  };
   return /* @__PURE__ */ jsx19(
     Badge2,
     {
@@ -25316,7 +25324,8 @@ var BadgeAtom = ({
         customClass,
         className
       ),
-      style,
+      style: resolvedStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: label
     }
   );
@@ -25535,9 +25544,11 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 import { jsx as jsx27 } from "react/jsx-runtime";
 var ProgressAtom = ({
   value,
-  className
+  className,
+  style
 }) => {
-  return /* @__PURE__ */ jsx27("div", { className: cn("w-full py-2", className), children: /* @__PURE__ */ jsx27(Progress, { value, className: "h-2 bg-gray-100" }) });
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
+  return /* @__PURE__ */ jsx27("div", { className: cn("w-full py-2", className), style, "data-px-styled": hasPxVars ? "" : void 0, children: /* @__PURE__ */ jsx27(Progress, { value, className: "h-2 bg-gray-100" }) });
 };
 
 // src/components/ui/skeleton.tsx
@@ -26710,7 +26721,8 @@ var BreadcrumbAtom = ({
 import { jsx as jsx54 } from "react/jsx-runtime";
 var SpinnerAtom = ({
   size = "md",
-  className
+  className,
+  style
 }) => {
   const sizeMap = {
     sm: "h-4 w-4",
@@ -26718,14 +26730,21 @@ var SpinnerAtom = ({
     lg: "h-8 w-8",
     xl: "h-12 w-12"
   };
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
+  const resolvedStyle = {
+    color: "var(--px-text-color, #a855f7)",
+    ...style
+  };
   return /* @__PURE__ */ jsx54(
     LoaderCircle,
     {
       className: cn(
-        "animate-spin text-purple500",
+        "animate-spin",
         sizeMap[size] || sizeMap.md,
         className
-      )
+      ),
+      style: resolvedStyle,
+      "data-px-styled": hasPxVars ? "" : void 0
     }
   );
 };
@@ -31900,51 +31919,71 @@ var FormTextareaAtom = ({
 
 // src/atoms/CheckboxAtom.tsx
 import { jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
-var CheckboxAtom = ({ id, label, checked, disabled, className, onCheckedChange }) => {
-  return /* @__PURE__ */ jsxs35("div", { className: cn("flex items-center space-x-2", className), children: [
-    /* @__PURE__ */ jsx65(
-      Checkbox,
-      {
-        id,
-        checked,
-        disabled,
-        onCheckedChange,
-        className: "rounded border-purple-300 text-purple-600 focus:ring-purple-500"
-      }
-    ),
-    label && /* @__PURE__ */ jsx65(
-      Label,
-      {
-        htmlFor: id,
-        className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
-        children: label
-      }
-    )
-  ] });
+var CheckboxAtom = ({ id, label, checked, disabled, className, style, onCheckedChange }) => {
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
+  return /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      className: cn("flex items-center space-x-2", className),
+      style,
+      "data-px-styled": hasPxVars ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx65(
+          Checkbox,
+          {
+            id,
+            checked,
+            disabled,
+            onCheckedChange,
+            className: "rounded"
+          }
+        ),
+        label && /* @__PURE__ */ jsx65(
+          Label,
+          {
+            htmlFor: id,
+            className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+            style: { color: "var(--px-label-color, inherit)" },
+            children: label
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/atoms/SwitchAtom.tsx
 import { jsx as jsx66, jsxs as jsxs36 } from "react/jsx-runtime";
-var SwitchAtom = ({ id, label, checked, disabled, className, onCheckedChange }) => {
-  return /* @__PURE__ */ jsxs36("div", { className: cn("flex items-center space-x-2", className), children: [
-    /* @__PURE__ */ jsx66(
-      Switch,
-      {
-        id,
-        checked,
-        disabled,
-        onCheckedChange
-      }
-    ),
-    label && /* @__PURE__ */ jsx66(
-      Label,
-      {
-        htmlFor: id,
-        className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
-        children: label
-      }
-    )
-  ] });
+var SwitchAtom = ({ id, label, checked, disabled, className, style, onCheckedChange }) => {
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
+  return /* @__PURE__ */ jsxs36(
+    "div",
+    {
+      className: cn("flex items-center space-x-2", className),
+      style,
+      "data-px-styled": hasPxVars ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx66(
+          Switch,
+          {
+            id,
+            checked,
+            disabled,
+            onCheckedChange
+          }
+        ),
+        label && /* @__PURE__ */ jsx66(
+          Label,
+          {
+            htmlFor: id,
+            className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+            style: { color: "var(--px-label-color, inherit)" },
+            children: label
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/atoms/LabelAtom.tsx
@@ -31955,12 +31994,16 @@ var LabelAtom = ({
   className,
   style
 }) => {
+  const resolvedStyle = {
+    color: "var(--px-text-color, inherit)",
+    ...style
+  };
   return /* @__PURE__ */ jsx67(
     Label,
     {
       htmlFor,
       className: cn("text-sm font-semibold", className),
-      style,
+      style: resolvedStyle,
       children: content
     }
   );
@@ -32045,6 +32088,7 @@ var ToggleAtom = ({
   style,
   onPressedChange
 }) => {
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   return /* @__PURE__ */ jsx70(
     Toggle,
     {
@@ -32055,6 +32099,7 @@ var ToggleAtom = ({
       onPressedChange,
       className: cn(className),
       style,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: label
     }
   );
@@ -32069,18 +32114,28 @@ var SliderAtom = ({
   step = 1,
   disabled,
   className,
+  style,
   onValueChange
 }) => {
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   return /* @__PURE__ */ jsx71(
-    Slider,
+    "div",
     {
-      defaultValue,
-      max: max2,
-      min: min2,
-      step,
-      disabled,
-      onValueChange,
-      className: cn("w-full py-4", className)
+      style,
+      "data-px-styled": hasPxVars ? "" : void 0,
+      className: "w-full py-4",
+      children: /* @__PURE__ */ jsx71(
+        Slider,
+        {
+          defaultValue,
+          max: max2,
+          min: min2,
+          step,
+          disabled,
+          onValueChange,
+          className: cn("w-full", className)
+        }
+      )
     }
   );
 };
@@ -32088,6 +32143,7 @@ var SliderAtom = ({
 // src/atoms/RadioGroupAtom.tsx
 import { jsx as jsx72, jsxs as jsxs38 } from "react/jsx-runtime";
 var RadioGroupAtom = ({ options, defaultValue, disabled, className, style, onValueChange }) => {
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   return /* @__PURE__ */ jsx72(
     RadioGroup,
     {
@@ -32096,6 +32152,7 @@ var RadioGroupAtom = ({ options, defaultValue, disabled, className, style, onVal
       onValueChange,
       className: cn("grid gap-2", className),
       style,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: options.map((option) => /* @__PURE__ */ jsxs38("div", { className: "flex items-center space-x-2", children: [
         /* @__PURE__ */ jsx72(
           RadioGroupItem,
@@ -32122,6 +32179,7 @@ var RadioGroupAtom = ({ options, defaultValue, disabled, className, style, onVal
 // src/atoms/RadioAtom.tsx
 import { jsx as jsx73, jsxs as jsxs39 } from "react/jsx-runtime";
 var RadioAtom = ({ id, label, value, checked, disabled, className, style, onValueChange }) => {
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   return /* @__PURE__ */ jsxs39(
     RadioGroup,
     {
@@ -32134,6 +32192,7 @@ var RadioAtom = ({ id, label, value, checked, disabled, className, style, onValu
         className
       ),
       style,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: [
         /* @__PURE__ */ jsx73(
           RadioGroupItem,
@@ -32151,7 +32210,7 @@ var RadioAtom = ({ id, label, value, checked, disabled, className, style, onValu
               "cursor-pointer text-sm transition-colors",
               checked ? "text-primary font-semibold" : "text-muted-foreground"
             ),
-            style: { color: "inherit" },
+            style: { color: "var(--px-label-color, inherit)" },
             children: label
           }
         )