@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-HXHB2CK5.js

@@ -0,0 +1,108 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var headingVariants = cva(
+  "scroll-m-[var(--heading-base-scroll-margin)] tracking-[var(--heading-base-letter-spacing)] font-[var(--heading-base-font-weight)] text-[color:var(--heading-base-color)] font-[family-name:var(--heading-base-font-family)]",
+  {
+    variants: {
+      level: {
+        1: "text-[length:var(--heading-size-4xl-font-size)] leading-[var(--heading-size-4xl-line-height)] font-[var(--heading-weight-bold)]",
+        2: "text-[length:var(--heading-size-3xl-font-size)] leading-[var(--heading-size-3xl-line-height)]",
+        3: "text-[length:var(--heading-size-2xl-font-size)] leading-[var(--heading-size-2xl-line-height)]",
+        4: "text-[length:var(--heading-size-xl-font-size)] leading-[var(--heading-size-xl-line-height)]",
+        5: "text-[length:var(--heading-size-lg-font-size)] leading-[var(--heading-size-lg-line-height)]",
+        6: "text-[length:var(--heading-size-base-font-size)] leading-[var(--heading-size-base-line-height)]"
+      },
+      size: {
+        "4xl": "text-[length:var(--heading-size-4xl-font-size)] leading-[var(--heading-size-4xl-line-height)] font-[var(--heading-weight-bold)]",
+        "3xl": "text-[length:var(--heading-size-3xl-font-size)] leading-[var(--heading-size-3xl-line-height)]",
+        "2xl": "text-[length:var(--heading-size-2xl-font-size)] leading-[var(--heading-size-2xl-line-height)]",
+        xl: "text-[length:var(--heading-size-xl-font-size)] leading-[var(--heading-size-xl-line-height)]",
+        lg: "text-[length:var(--heading-size-lg-font-size)] leading-[var(--heading-size-lg-line-height)]",
+        base: "text-[length:var(--heading-size-base-font-size)] leading-[var(--heading-size-base-line-height)]",
+        sm: "text-[length:var(--heading-size-sm-font-size)] leading-[var(--heading-size-sm-line-height)]"
+      },
+      weight: {
+        normal: "font-[var(--heading-weight-normal)]",
+        medium: "font-[var(--heading-weight-medium)]",
+        semibold: "font-[var(--heading-weight-semibold)]",
+        bold: "font-[var(--heading-weight-bold)]",
+        extrabold: "font-[var(--heading-weight-extrabold)]"
+      },
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
+      },
+      color: {
+        default: "text-[color:var(--heading-color-default)]",
+        muted: "text-[color:var(--heading-color-muted)]",
+        primary: "text-[color:var(--heading-color-primary)]",
+        destructive: "text-[color:var(--heading-color-destructive)]"
+      },
+      gradient: {
+        none: "",
+        primary: "bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+        secondary: "bg-gradient-to-r from-secondary-foreground to-secondary-foreground/60 bg-clip-text text-transparent",
+        accent: "bg-gradient-to-r from-accent-foreground to-accent-foreground/60 bg-clip-text text-transparent",
+        rainbow: "bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 bg-clip-text text-transparent"
+      },
+      truncate: {
+        true: "truncate",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      level: 2,
+      weight: "semibold",
+      align: "left",
+      color: "default",
+      gradient: "none",
+      truncate: false
+    }
+  }
+);
+function Heading({
+  className,
+  level = 2,
+  size,
+  weight,
+  align,
+  color,
+  gradient,
+  truncate,
+  asChild = false,
+  ref,
+  ...props
+}) {
+  const Tag = asChild ? Slot : `h${String(level)}`;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: cn(
+        headingVariants({
+          level: size ? void 0 : level,
+          size,
+          weight,
+          align,
+          // When gradient is applied, ignore color (gradient overrides it)
+          color: gradient && gradient !== "none" ? void 0 : color,
+          gradient,
+          truncate
+        }),
+        className
+      ),
+      "data-gradient": gradient && gradient !== "none" ? gradient : void 0,
+      "data-level": level,
+      "data-slot": "heading",
+      ...props
+    }
+  );
+}
+
+export { Heading, headingVariants };
+//# sourceMappingURL=chunk-HXHB2CK5.js.map
+//# sourceMappingURL=chunk-HXHB2CK5.js.map

package/dist/chunk-HXHB2CK5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Heading/Heading.tsx"],"names":[],"mappings":"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","file":"chunk-HXHB2CK5.js","sourcesContent":["import type { HeadingProps } from \"./Heading.types\"\nimport type { ElementType } from \"react\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst headingVariants = cva(\n  \"scroll-m-[var(--heading-base-scroll-margin)] tracking-[var(--heading-base-letter-spacing)] font-[var(--heading-base-font-weight)] text-[color:var(--heading-base-color)] font-[family-name:var(--heading-base-font-family)]\",\n  {\n    variants: {\n      level: {\n        1: \"text-[length:var(--heading-size-4xl-font-size)] leading-[var(--heading-size-4xl-line-height)] font-[var(--heading-weight-bold)]\",\n        2: \"text-[length:var(--heading-size-3xl-font-size)] leading-[var(--heading-size-3xl-line-height)]\",\n        3: \"text-[length:var(--heading-size-2xl-font-size)] leading-[var(--heading-size-2xl-line-height)]\",\n        4: \"text-[length:var(--heading-size-xl-font-size)] leading-[var(--heading-size-xl-line-height)]\",\n        5: \"text-[length:var(--heading-size-lg-font-size)] leading-[var(--heading-size-lg-line-height)]\",\n        6: \"text-[length:var(--heading-size-base-font-size)] leading-[var(--heading-size-base-line-height)]\",\n      },\n      size: {\n        \"4xl\": \"text-[length:var(--heading-size-4xl-font-size)] leading-[var(--heading-size-4xl-line-height)] font-[var(--heading-weight-bold)]\",\n        \"3xl\": \"text-[length:var(--heading-size-3xl-font-size)] leading-[var(--heading-size-3xl-line-height)]\",\n        \"2xl\": \"text-[length:var(--heading-size-2xl-font-size)] leading-[var(--heading-size-2xl-line-height)]\",\n        xl: \"text-[length:var(--heading-size-xl-font-size)] leading-[var(--heading-size-xl-line-height)]\",\n        lg: \"text-[length:var(--heading-size-lg-font-size)] leading-[var(--heading-size-lg-line-height)]\",\n        base: \"text-[length:var(--heading-size-base-font-size)] leading-[var(--heading-size-base-line-height)]\",\n        sm: \"text-[length:var(--heading-size-sm-font-size)] leading-[var(--heading-size-sm-line-height)]\",\n      },\n      weight: {\n        normal: \"font-[var(--heading-weight-normal)]\",\n        medium: \"font-[var(--heading-weight-medium)]\",\n        semibold: \"font-[var(--heading-weight-semibold)]\",\n        bold: \"font-[var(--heading-weight-bold)]\",\n        extrabold: \"font-[var(--heading-weight-extrabold)]\",\n      },\n      align: {\n        left: \"text-left\",\n        center: \"text-center\",\n        right: \"text-right\",\n      },\n      color: {\n        default: \"text-[color:var(--heading-color-default)]\",\n        muted: \"text-[color:var(--heading-color-muted)]\",\n        primary: \"text-[color:var(--heading-color-primary)]\",\n        destructive: \"text-[color:var(--heading-color-destructive)]\",\n      },\n      gradient: {\n        none: \"\",\n        primary: \"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\",\n        secondary: \"bg-gradient-to-r from-secondary-foreground to-secondary-foreground/60 bg-clip-text text-transparent\",\n        accent: \"bg-gradient-to-r from-accent-foreground to-accent-foreground/60 bg-clip-text text-transparent\",\n        rainbow: \"bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 bg-clip-text text-transparent\",\n      },\n      truncate: {\n        true: \"truncate\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      level: 2,\n      weight: \"semibold\",\n      align: \"left\",\n      color: \"default\",\n      gradient: \"none\",\n      truncate: false,\n    },\n  }\n)\n\n/**\n * Heading - Componente de titulo semantico com niveis h1-h6.\n *\n * Permite separar o nivel semantico (para acessibilidade e SEO)\n * do tamanho visual (para design), usando as props `level` e `size`.\n *\n * @example\n * // H2 semantico com tamanho visual de H1\n * <Heading level={2} size=\"4xl\">Titulo Grande</Heading>\n */\nfunction Heading({\n  className,\n  level = 2,\n  size,\n  weight,\n  align,\n  color,\n  gradient,\n  truncate,\n  asChild = false,\n  ref,\n  ...props\n}: HeadingProps) {\n  const Tag: ElementType = asChild ? Slot : (`h${String(level)}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\")\n\n  return (\n    <Tag\n      ref={ref}\n      className={cn(\n        headingVariants({\n          level: size ? undefined : level,\n          size,\n          weight,\n          align,\n          // When gradient is applied, ignore color (gradient overrides it)\n          color: gradient && gradient !== \"none\" ? undefined : color,\n          gradient,\n          truncate,\n        }),\n        className\n      )}\n      data-gradient={gradient && gradient !== \"none\" ? gradient : undefined}\n      data-level={level}\n      data-slot=\"heading\"\n      {...props}\n    />\n  )\n}\n\nexport { Heading, headingVariants }\n"]}

package/dist/chunk-I7ZLEC7Y.js

@@ -0,0 +1,128 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var responsiveContainerVariants = cva(
+  [
+    "w-full"
+  ],
+  {
+    variants: {
+      /**
+       * Container style variant
+       * - default: Responsive container with max-width and centering
+       * - fluid: Full width, no max-width constraint
+       * - constrained: Tightly constrained max-width (max-w-7xl)
+       */
+      variant: {
+        default: "mx-auto",
+        fluid: "",
+        constrained: "mx-auto max-w-7xl"
+      },
+      /**
+       * Maximum width of the container
+       * Only applies when variant is "default"
+       * - sm: max-w-4xl - Compact content
+       * - md: max-w-5xl - Standard content
+       * - lg: max-w-6xl - Wider content (default)
+       * - xl: max-w-7xl - Dashboard layouts
+       * - 2xl: max-w-screen-2xl - Full-width applications
+       */
+      maxWidth: {
+        sm: "max-w-4xl",
+        md: "max-w-5xl",
+        lg: "max-w-6xl",
+        xl: "max-w-7xl",
+        "2xl": "max-w-screen-2xl"
+      },
+      /**
+       * Responsive horizontal padding
+       * - true: Applies responsive padding (px-4 sm:px-6 lg:px-8)
+       * - false: No padding
+       */
+      padding: {
+        true: "px-4 sm:px-6 lg:px-8",
+        false: ""
+      },
+      /**
+       * Breakpoint for layout direction change
+       * Changes from column to row layout at specified breakpoint
+       * - sm: flex-col sm:flex-row
+       * - md: flex-col md:flex-row
+       * - lg: flex-col lg:flex-row
+       * - none: No flex layout applied
+       */
+      breakpoint: {
+        sm: "flex flex-col sm:flex-row",
+        md: "flex flex-col md:flex-row",
+        lg: "flex flex-col lg:flex-row",
+        none: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      maxWidth: "lg",
+      padding: true,
+      breakpoint: "none"
+    },
+    compoundVariants: [
+      // Fluid variant ignores maxWidth
+      {
+        variant: "fluid",
+        className: "max-w-none"
+      },
+      // Constrained variant has its own maxWidth
+      {
+        variant: "constrained",
+        maxWidth: "sm",
+        className: ""
+      },
+      {
+        variant: "constrained",
+        maxWidth: "md",
+        className: ""
+      },
+      {
+        variant: "constrained",
+        maxWidth: "lg",
+        className: ""
+      },
+      {
+        variant: "constrained",
+        maxWidth: "xl",
+        className: ""
+      },
+      {
+        variant: "constrained",
+        maxWidth: "2xl",
+        className: ""
+      }
+    ]
+  }
+);
+function ResponsiveContainer({
+  as: Component = "div",
+  variant,
+  maxWidth,
+  padding,
+  breakpoint,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        responsiveContainerVariants({ variant, maxWidth, padding, breakpoint }),
+        className
+      ),
+      "data-slot": "responsive-container",
+      ...props
+    }
+  );
+}
+
+export { ResponsiveContainer, responsiveContainerVariants };
+//# sourceMappingURL=chunk-I7ZLEC7Y.js.map
+//# sourceMappingURL=chunk-I7ZLEC7Y.js.map

package/dist/chunk-I7ZLEC7Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ResponsiveContainer/ResponsiveContainer.variants.ts","../src/components/layout/ResponsiveContainer/ResponsiveContainer.tsx"],"names":[],"mappings":";;;;;AAMO,IAAM,2BAAA,GAA8B,GAAA;AAAA,EACzC;AAAA,IACE;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,SAAA;AAAA,QACT,KAAA,EAAO,EAAA;AAAA,QACP,WAAA,EAAa;AAAA,OACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA,QAAA,EAAU;AAAA,QACR,EAAA,EAAI,WAAA;AAAA,QACJ,EAAA,EAAI,WAAA;AAAA,QACJ,EAAA,EAAI,WAAA;AAAA,QACJ,EAAA,EAAI,WAAA;AAAA,QACJ,KAAA,EAAO;AAAA,OACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,sBAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASA,UAAA,EAAY;AAAA,QACV,EAAA,EAAI,2BAAA;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAU,IAAA;AAAA,MACV,OAAA,EAAS,IAAA;AAAA,MACT,UAAA,EAAY;AAAA,KACd;AAAA,IACA,gBAAA,EAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAA,EAAS,OAAA;AAAA,QACT,SAAA,EAAW;AAAA,OACb;AAAA;AAAA,MAEA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,SAAA,EAAW;AAAA,OACb;AAAA,MACA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,SAAA,EAAW;AAAA,OACb;AAAA,MACA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,SAAA,EAAW;AAAA,OACb;AAAA,MACA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,SAAA,EAAW;AAAA,OACb;AAAA,MACA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,KAAA;AAAA,QACV,SAAA,EAAW;AAAA;AACb;AACF;AAEJ;ACvEA,SAAS,mBAAA,CAAoB;AAAA,EAC3B,IAAI,SAAA,GAAY,KAAA;AAAA,EAChB,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA6B;AAC3B,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4BAA4B,EAAE,OAAA,EAAS,QAAA,EAAU,OAAA,EAAS,YAAY,CAAA;AAAA,QACtE;AAAA,OACF;AAAA,MACA,WAAA,EAAU,sBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-I7ZLEC7Y.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ResponsiveContainer variant styles\n * Layout component for managing responsive behavior across breakpoints\n */\nexport const responsiveContainerVariants = cva(\n  [\n    \"w-full\",\n  ],\n  {\n    variants: {\n      /**\n       * Container style variant\n       * - default: Responsive container with max-width and centering\n       * - fluid: Full width, no max-width constraint\n       * - constrained: Tightly constrained max-width (max-w-7xl)\n       */\n      variant: {\n        default: \"mx-auto\",\n        fluid: \"\",\n        constrained: \"mx-auto max-w-7xl\",\n      },\n      /**\n       * Maximum width of the container\n       * Only applies when variant is \"default\"\n       * - sm: max-w-4xl - Compact content\n       * - md: max-w-5xl - Standard content\n       * - lg: max-w-6xl - Wider content (default)\n       * - xl: max-w-7xl - Dashboard layouts\n       * - 2xl: max-w-screen-2xl - Full-width applications\n       */\n      maxWidth: {\n        sm: \"max-w-4xl\",\n        md: \"max-w-5xl\",\n        lg: \"max-w-6xl\",\n        xl: \"max-w-7xl\",\n        \"2xl\": \"max-w-screen-2xl\",\n      },\n      /**\n       * Responsive horizontal padding\n       * - true: Applies responsive padding (px-4 sm:px-6 lg:px-8)\n       * - false: No padding\n       */\n      padding: {\n        true: \"px-4 sm:px-6 lg:px-8\",\n        false: \"\",\n      },\n      /**\n       * Breakpoint for layout direction change\n       * Changes from column to row layout at specified breakpoint\n       * - sm: flex-col sm:flex-row\n       * - md: flex-col md:flex-row\n       * - lg: flex-col lg:flex-row\n       * - none: No flex layout applied\n       */\n      breakpoint: {\n        sm: \"flex flex-col sm:flex-row\",\n        md: \"flex flex-col md:flex-row\",\n        lg: \"flex flex-col lg:flex-row\",\n        none: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      maxWidth: \"lg\",\n      padding: true,\n      breakpoint: \"none\",\n    },\n    compoundVariants: [\n      // Fluid variant ignores maxWidth\n      {\n        variant: \"fluid\",\n        className: \"max-w-none\",\n      },\n      // Constrained variant has its own maxWidth\n      {\n        variant: \"constrained\",\n        maxWidth: \"sm\",\n        className: \"\",\n      },\n      {\n        variant: \"constrained\",\n        maxWidth: \"md\",\n        className: \"\",\n      },\n      {\n        variant: \"constrained\",\n        maxWidth: \"lg\",\n        className: \"\",\n      },\n      {\n        variant: \"constrained\",\n        maxWidth: \"xl\",\n        className: \"\",\n      },\n      {\n        variant: \"constrained\",\n        maxWidth: \"2xl\",\n        className: \"\",\n      },\n    ],\n  }\n)\n\nexport type ResponsiveContainerVariantProps = VariantProps<typeof responsiveContainerVariants>\n","import type { ResponsiveContainerProps } from \"./ResponsiveContainer.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { responsiveContainerVariants } from \"./ResponsiveContainer.variants\"\n\n/**\n * ResponsiveContainer\n *\n * A layout component that manages responsive behavior across breakpoints,\n * adjusting layout, width constraints, and padding automatically.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <ResponsiveContainer>\n *   <Content />\n * </ResponsiveContainer>\n *\n * // With responsive layout direction\n * <ResponsiveContainer breakpoint=\"md\">\n *   <Sidebar />\n *   <MainContent />\n * </ResponsiveContainer>\n *\n * // Constrained width without padding\n * <ResponsiveContainer variant=\"constrained\" padding={false}>\n *   <Article />\n * </ResponsiveContainer>\n * ```\n */\nfunction ResponsiveContainer({\n  as: Component = \"div\",\n  variant,\n  maxWidth,\n  padding,\n  breakpoint,\n  className,\n  ...props\n}: ResponsiveContainerProps) {\n  return (\n    <Component\n      className={cn(\n        responsiveContainerVariants({ variant, maxWidth, padding, breakpoint }),\n        className\n      )}\n      data-slot=\"responsive-container\"\n      {...props}\n    />\n  )\n}\n\nexport { ResponsiveContainer }\n"]}

package/dist/chunk-ICAQYWCX.js

@@ -0,0 +1,153 @@
+import { radioGroupIndicatorVariants, radioGroupItemVariants } from './chunk-ONTUN5XH.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function RadioButton({
+  className,
+  size = "md",
+  label,
+  id,
+  ref,
+  ...props
+}) {
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  const isChecked = props.checked ?? props.defaultChecked ?? false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "inline-flex items-center gap-2",
+      "data-slot": "radio-button-wrapper",
+      "data-state": isChecked ? "checked" : "unchecked",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative inline-flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              className: cn(
+                "peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed",
+                className
+              ),
+              id: inputId,
+              type: "radio",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                radioGroupItemVariants({ size }),
+                "peer-checked:border-primary peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 peer-focus-visible:ring-[3px]",
+                "peer-checked:[&_[data-slot=radio-button-indicator]]:flex"
+              ),
+              "data-slot": "radio-button-visual",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    radioGroupIndicatorVariants({ size }),
+                    "hidden items-center justify-center bg-transparent"
+                  ),
+                  "data-slot": "radio-button-indicator",
+                  children: /* @__PURE__ */ jsx("div", { className: "size-full rounded-full bg-[color:var(--radio-indicator-color)]" })
+                }
+              )
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: cn(
+              "text-sm font-medium leading-none cursor-pointer select-none",
+              "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+              size === "lg" && "text-base",
+              size === "sm" && "text-xs"
+            ),
+            "data-slot": "radio-button-label",
+            htmlFor: inputId,
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+var radioButtonVariants = cva(
+  [
+    "peer appearance-none shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none cursor-pointer",
+    "border-input bg-background dark:bg-input/30",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "checked:border-primary checked:bg-primary",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioButtonIndicatorVariants = cva(
+  [
+    "pointer-events-none absolute rounded-full bg-primary-foreground transition-transform",
+    "scale-0 peer-checked:scale-100"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-1.5",
+        md: "size-2",
+        lg: "size-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioButtonWrapperVariants = cva(
+  "relative inline-flex items-center justify-center",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioButtonLabelVariants = cva(
+  "cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "text-sm ml-2",
+        md: "text-sm ml-2",
+        lg: "text-base ml-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export { RadioButton, radioButtonIndicatorVariants, radioButtonLabelVariants, radioButtonVariants, radioButtonWrapperVariants };
+//# sourceMappingURL=chunk-ICAQYWCX.js.map
+//# sourceMappingURL=chunk-ICAQYWCX.js.map

package/dist/chunk-ICAQYWCX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/RadioButton/RadioButton.tsx","../src/components/forms/RadioButton/RadioButton.variants.ts"],"names":[],"mappings":"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","file":"chunk-ICAQYWCX.js","sourcesContent":["import type { RadioButtonProps } from \"./RadioButton.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  radioGroupIndicatorVariants,\n  radioGroupItemVariants,\n} from \"../RadioGroup/RadioGroup.variants\"\n\n/**\n * A standalone radio button component using native HTML input.\n * For simple use cases without RadioGroup.\n * Visuals are consistent with RadioGroup.\n *\n * @example\n * ```tsx\n * <RadioButton name=\"option\" value=\"1\" label=\"Option 1\" />\n * <RadioButton name=\"option\" value=\"2\" label=\"Option 2\" />\n * ```\n */\nfunction RadioButton({\n  className,\n  size = \"md\",\n  label,\n  id,\n  ref,\n  ...props\n}: RadioButtonProps) {\n  const generatedId = React.useId()\n  const inputId = id ?? generatedId\n  const isChecked = props.checked ?? props.defaultChecked ?? false\n\n  return (\n    <div\n      className=\"inline-flex items-center gap-2\"\n      data-slot=\"radio-button-wrapper\"\n      data-state={isChecked ? \"checked\" : \"unchecked\"}\n    >\n      <div className=\"relative inline-flex items-center justify-center\">\n        <input\n          ref={ref}\n          className={cn(\n            \"peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed\",\n            className\n          )}\n          id={inputId}\n          type=\"radio\"\n          {...props}\n        />\n        <div\n          className={cn(\n            radioGroupItemVariants({ size }),\n            \"peer-checked:border-primary peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 peer-focus-visible:ring-[3px]\",\n            \"peer-checked:[&_[data-slot=radio-button-indicator]]:flex\"\n          )}\n          data-slot=\"radio-button-visual\"\n        >\n          <div\n            className={cn(\n              radioGroupIndicatorVariants({ size }),\n              \"hidden items-center justify-center bg-transparent\"\n            )}\n            data-slot=\"radio-button-indicator\"\n          >\n            <div className=\"size-full rounded-full bg-[color:var(--radio-indicator-color)]\" />\n          </div>\n        </div>\n      </div>\n      {label && (\n        <label\n          className={cn(\n            \"text-sm font-medium leading-none cursor-pointer select-none\",\n            \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n            size === \"lg\" && \"text-base\",\n            size === \"sm\" && \"text-xs\"\n          )}\n          data-slot=\"radio-button-label\"\n          htmlFor={inputId}\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  )\n}\n\nexport { RadioButton }\n","import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const radioButtonVariants = cva(\n  [\n    \"peer appearance-none shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none cursor-pointer\",\n    \"border-input bg-background dark:bg-input/30\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"checked:border-primary checked:bg-primary\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioButtonIndicatorVariants = cva(\n  [\n    \"pointer-events-none absolute rounded-full bg-primary-foreground transition-transform\",\n    \"scale-0 peer-checked:scale-100\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-1.5\",\n        md: \"size-2\",\n        lg: \"size-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioButtonWrapperVariants = cva(\n  \"relative inline-flex items-center justify-center\",\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioButtonLabelVariants = cva(\n  \"cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"text-sm ml-2\",\n        md: \"text-sm ml-2\",\n        lg: \"text-base ml-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type RadioButtonVariantProps = VariantProps<typeof radioButtonVariants>\nexport type RadioButtonIndicatorVariantProps = VariantProps<typeof radioButtonIndicatorVariants>\nexport type RadioButtonWrapperVariantProps = VariantProps<typeof radioButtonWrapperVariants>\nexport type RadioButtonLabelVariantProps = VariantProps<typeof radioButtonLabelVariants>\n"]}