@pittorica/radio-react 0.24.0 → 0.26.0

package/README.md

@@ -4,16 +4,46 @@ The `Radio` component.
 
 ## Installation
 
-```bash
+\`\`\`bash
 npm install @pittorica/radio-react
-```
+\`\`\`
 
 ## Usage
 
-```jsx
+\`\`\`jsx
 import { Radio } from '@pittorica/radio-react';
-// TODO: Add usage example
-```
+
+function MyForm() {
+const [selectedValue, setSelectedValue] = useState('option1');
+
+return (
+
+<form>
+<Radio
+label="Option 1"
+value="option1"
+name="myRadioGroup"
+checked={selectedValue === 'option1'}
+onCheckedChange={(checked) => {
+if (checked) setSelectedValue('option1');
+}}
+required // Mark as required
+color="source" // Default color is now 'source'
+/>
+<Radio
+label="Option 2"
+value="option2"
+name="myRadioGroup"
+checked={selectedValue === 'option2'}
+onCheckedChange={(checked) => {
+if (checked) setSelectedValue('option2');
+}}
+/>
+<button type="submit" disabled={!selectedValue}>Submit</button>
+</form>
+);
+}
+\`\`\`
 
 ## License
 

package/dist/Radio.d.ts

@@ -1,22 +1,26 @@
-import { type Ref } from 'react';
+import { type ElementType } from 'react';
 import { type BoxProps } from '@pittorica/box-react';
 import type { PittoricaColor } from '@pittorica/text-react';
-export interface RadioProps extends Omit<BoxProps, 'onChange'> {
+/**
+ * Fix TS2314 & TS2312: Use 'type' alias for intersection with polymorphic BoxProps<E>.
+ */
+export type RadioProps<E extends ElementType = 'button'> = Omit<BoxProps<E>, 'onChange'> & {
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;
-    /** @default 'indigo' */
+    /** @default 'source' */
     color?: PittoricaColor;
     value?: string;
     name?: string;
     onCheckedChange?: (checked: boolean) => void;
-    ref?: Ref<HTMLButtonElement>;
-}
+    required?: boolean;
+};
 /**
  * Primitive Radio component.
+ * Fully polymorphic and agnostic foundation.
  */
 export declare const Radio: {
-    ({ checked, disabled, color, className, style, onCheckedChange, name, ref, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    <E extends ElementType = "button">({ checked, defaultChecked, disabled, color, className, style, onCheckedChange, name, required, as, ...props }: RadioProps<E>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Radio.d.ts.map

package/dist/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../src/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,GAAG,EAAa,MAAM,OAAO,CAAC;AAMhE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;2FAUf,UAAU;;CAgCZ,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../src/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,IAAI,CAC7D,QAAQ,CAAC,CAAC,CAAC,EACX,UAAU,CACX,GAAG;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK;KAAI,CAAC,SAAS,WAAW,4HAYxC,UAAU,CAAC,CAAC,CAAC;;CAoDf,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export type { RadioProps } from './Radio.js';
-export { Radio } from './Radio.js';
+export * from './Radio.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -1,17 +1,17 @@
-import { jsx as h } from "react/jsx-runtime";
-import { forwardRef as I, createElement as v } from "react";
-function b(t) {
-  var e, i, r = "";
-  if (typeof t == "string" || typeof t == "number") r += t;
-  else if (typeof t == "object") if (Array.isArray(t)) {
-    var a = t.length;
-    for (e = 0; e < a; e++) t[e] && (i = b(t[e])) && (r && (r += " "), r += i);
-  } else for (i in t) t[i] && (r && (r += " "), r += i);
-  return r;
+import { jsx as $ } from "react/jsx-runtime";
+import { forwardRef as _, createElement as w, useState as z } from "react";
+function C(i) {
+  var a, r, t = "";
+  if (typeof i == "string" || typeof i == "number") t += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var o = i.length;
+    for (a = 0; a < o; a++) i[a] && (r = C(i[a])) && (t && (t += " "), t += r);
+  } else for (r in i) i[r] && (t && (t += " "), t += r);
+  return t;
 }
-function M() {
-  for (var t, e, i = 0, r = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (e = b(t)) && (r && (r += " "), r += e);
-  return r;
+function I() {
+  for (var i, a, r = 0, t = "", o = arguments.length; r < o; r++) (i = arguments[r]) && (a = C(i)) && (t && (t += " "), t += a);
+  return t;
 }
 /**
  * @license @tabler/icons-react v3.36.1 - MIT
@@ -19,7 +19,7 @@ function M() {
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var S = {
+var F = {
   outline: {
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -46,32 +46,32 @@ var S = {
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const $ = (t, e, i, r) => {
-  const a = I(
-    ({ color: s = "currentColor", size: l = 24, stroke: c = 2, title: p, className: d, children: n, ...m }, f) => v(
+const x = (i, a, r, t) => {
+  const o = _(
+    ({ color: l = "currentColor", size: c = 24, stroke: m = 2, title: p, className: d, children: n, ...g }, u) => w(
       "svg",
       {
-        ref: f,
-        ...S[t],
-        width: l,
-        height: l,
-        className: ["tabler-icon", `tabler-icon-${e}`, d].join(" "),
-        ...t === "filled" ? {
-          fill: s
+        ref: u,
+        ...F[i],
+        width: c,
+        height: c,
+        className: ["tabler-icon", `tabler-icon-${a}`, d].join(" "),
+        ...i === "filled" ? {
+          fill: l
         } : {
-          strokeWidth: c,
-          stroke: s
+          strokeWidth: m,
+          stroke: l
         },
-        ...m
+        ...g
       },
       [
-        p && v("title", { key: "svg-title" }, p),
-        ...r.map(([g, u]) => v(g, u)),
+        p && w("title", { key: "svg-title" }, p),
+        ...t.map(([f, s]) => w(f, s)),
         ...Array.isArray(n) ? n : [n]
       ]
     )
   );
-  return a.displayName = `${i}`, a;
+  return o.displayName = `${r}`, o;
 };
 /**
  * @license @tabler/icons-react v3.36.1 - MIT
@@ -79,112 +79,110 @@ const $ = (t, e, i, r) => {
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const T = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-0" }]], q = $("outline", "circle", "Circle", T);
+const M = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-0" }]], S = x("outline", "circle", "Circle", M);
 /**
  * @license @tabler/icons-react v3.36.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const E = [["path", { d: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z", key: "svg-0" }]], D = $("filled", "circle-check-filled", "CircleCheckFilled", E);
-function k(t) {
-  var e, i, r = "";
-  if (typeof t == "string" || typeof t == "number") r += t;
-  else if (typeof t == "object") if (Array.isArray(t)) {
-    var a = t.length;
-    for (e = 0; e < a; e++) t[e] && (i = k(t[e])) && (r && (r += " "), r += i);
-  } else for (i in t) t[i] && (r && (r += " "), r += i);
-  return r;
+const E = [["path", { d: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z", key: "svg-0" }]], D = x("filled", "circle-check-filled", "CircleCheckFilled", E);
+function N(i) {
+  var a, r, t = "";
+  if (typeof i == "string" || typeof i == "number") t += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var o = i.length;
+    for (a = 0; a < o; a++) i[a] && (r = N(i[a])) && (t && (t += " "), t += r);
+  } else for (r in i) i[r] && (t && (t += " "), t += r);
+  return t;
 }
 function G() {
-  for (var t, e, i = 0, r = "", a = arguments.length; i < a; i++) (t = arguments[i]) && (e = k(t)) && (r && (r += " "), r += e);
-  return r;
+  for (var i, a, r = 0, t = "", o = arguments.length; r < o; r++) (i = arguments[r]) && (a = N(i)) && (t && (t += " "), t += a);
+  return t;
 }
-const x = ({
-  ref: t,
-  as: e = "div",
-  children: i,
+const R = ({
+  as: i,
+  children: a,
   display: r,
-  m: a,
-  mt: s,
+  m: t,
+  mt: o,
   mr: l,
   mb: c,
-  ml: p,
-  p: d,
-  pt: n,
-  pr: m,
+  ml: m,
+  mx: p,
+  my: d,
+  p: n,
+  pt: g,
+  pr: u,
   pb: f,
-  pl: g,
-  width: u,
+  pl: s,
+  px: h,
+  py: v,
+  width: k,
   height: y,
-  position: w,
-  style: N,
-  className: A,
-  href: R,
-  target: j,
-  rel: B,
-  htmlFor: C,
-  type: F,
-  name: L,
-  disabled: W,
-  ..._
+  position: b,
+  style: A,
+  className: B,
+  disabled: L,
+  required: T,
+  ...j
 }) => {
-  const o = {};
-  r && (o.display = r), u && (o.width = u), y && (o.height = y), w && (o.position = w), a && (o.margin = `var(--pittorica-space-${a})`), s && (o.marginTop = `var(--pittorica-space-${s})`), l && (o.marginRight = `var(--pittorica-space-${l})`), c && (o.marginBottom = `var(--pittorica-space-${c})`), p && (o.marginLeft = `var(--pittorica-space-${p})`), d && (o.padding = `var(--pittorica-space-${d})`), n && (o.paddingTop = `var(--pittorica-space-${n})`), m && (o.paddingRight = `var(--pittorica-space-${m})`), f && (o.paddingBottom = `var(--pittorica-space-${f})`), g && (o.paddingLeft = `var(--pittorica-space-${g})`);
-  const z = {
-    ...N,
-    ...o
+  const q = i || "div", e = {};
+  r && (e.display = r), k && (e.width = k), y && (e.height = y), b && (e.position = b), t && (e.margin = `var(--pittorica-space-${t})`), o && (e.marginTop = `var(--pittorica-space-${o})`), l && (e.marginRight = `var(--pittorica-space-${l})`), c && (e.marginBottom = `var(--pittorica-space-${c})`), m && (e.marginLeft = `var(--pittorica-space-${m})`), p && (e.marginLeft = `var(--pittorica-space-${p})`, e.marginRight = `var(--pittorica-space-${p})`), d && (e.marginTop = `var(--pittorica-space-${d})`, e.marginBottom = `var(--pittorica-space-${d})`), n && (e.padding = `var(--pittorica-space-${n})`), g && (e.paddingTop = `var(--pittorica-space-${g})`), u && (e.paddingRight = `var(--pittorica-space-${u})`), f && (e.paddingBottom = `var(--pittorica-space-${f})`), s && (e.paddingLeft = `var(--pittorica-space-${s})`), h && (e.paddingLeft = `var(--pittorica-space-${h})`, e.paddingRight = `var(--pittorica-space-${h})`), v && (e.paddingTop = `var(--pittorica-space-${v})`, e.paddingBottom = `var(--pittorica-space-${v})`);
+  const W = {
+    ...A,
+    ...e
   };
-  return /* @__PURE__ */ h(
-    e,
+  return /* @__PURE__ */ $(
+    q,
     {
-      ref: t,
-      className: G("pittorica-box", A),
-      style: z,
-      href: R,
-      target: j,
-      rel: B,
-      htmlFor: C,
-      type: F,
-      name: L,
-      disabled: W,
-      ..._,
-      children: i
+      className: G("pittorica-box", B),
+      style: W,
+      disabled: L,
+      required: T,
+      ...j,
+      children: a
     }
   );
 };
-x.displayName = "Box";
+R.displayName = "Box";
 const H = ({
-  checked: t,
-  disabled: e,
-  color: i = "indigo",
-  className: r,
-  style: a,
-  onCheckedChange: s,
-  name: l,
-  ref: c,
-  ...p
+  checked: i,
+  defaultChecked: a,
+  disabled: r,
+  color: t = "source",
+  className: o,
+  style: l,
+  onCheckedChange: c,
+  name: m,
+  required: p = !1,
+  as: d,
+  ...n
 }) => {
-  const n = i !== "inherit" && !(i != null && i.startsWith("#")) && !(i != null && i.startsWith("rgb")) ? `var(--pittorica-${i}-9)` : i;
-  return /* @__PURE__ */ h(
-    x,
+  const [g, u] = z(
+    a ?? !1
+  ), f = i !== void 0, s = f ? i : g, h = t !== "inherit" && !(t != null && t.startsWith("#")) && !(t != null && t.startsWith("rgb")) ? `var(--pittorica-${t}-9)` : t, v = d || "button";
+  return /* @__PURE__ */ $(
+    R,
     {
-      ...p,
-      as: "button",
-      type: "button",
+      as: v,
+      type: v === "button" ? "button" : void 0,
       role: "radio",
-      name: l,
-      "aria-checked": t,
-      "data-state": t ? "checked" : "unchecked",
-      disabled: e,
-      className: M("pittorica-radio-root", r),
-      onClick: () => !e && (s == null ? void 0 : s(!t)),
-      ref: c,
+      name: m,
+      "aria-checked": s,
+      "aria-required": p,
+      "data-state": s ? "checked" : "unchecked",
+      disabled: r,
+      onClick: (y) => {
+        r || (f || u(!s), c == null || c(!s), typeof n.onClick == "function" && n.onClick(y));
+      },
+      className: I("pittorica-radio-root", o),
       style: {
-        "--pittorica-source-color": n,
-        ...a
+        "--pittorica-source-color": h,
+        ...l
       },
-      children: t ? /* @__PURE__ */ h(D, { size: 14 }) : /* @__PURE__ */ h(q, { size: 14, opacity: 0.5 })
+      ...n,
+      children: s ? /* @__PURE__ */ $(D, { size: 14 }) : /* @__PURE__ */ $(S, { size: 14, opacity: 0.5 })
     }
   );
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pittorica/radio-react",
-  "version": "0.24.0",
+  "version": "0.26.0",
+  "homepage": "https://pittorica.dcdavidev.me",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -11,8 +12,8 @@
   "dependencies": {
     "@tabler/icons-react": "^3.36.1",
     "clsx": "^2.1.1",
-    "@pittorica/box-react": "0.24.0",
-    "@pittorica/text-react": "0.24.0"
+    "@pittorica/text-react": "0.26.0",
+    "@pittorica/box-react": "0.26.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -22,11 +23,11 @@
     "@vitejs/plugin-react": "^4.0.0",
     "jsdom": "^22.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vitest": "^2.1.9",
-    "@pittorica/theme-react": "0.24.0",
-    "@pittorica/flex-react": "0.24.0",
-    "pittorica": "0.24.0"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "@pittorica/flex-react": "0.26.0",
+    "@pittorica/theme-react": "0.26.0",
+    "pittorica": "0.26.0"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -36,8 +37,7 @@
     "build": "npm run clean && npm run build:js && npm run build:types",
     "build:js": "vite build",
     "build:types": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist",
-    "dev": "vite",
+    "clean": "rm -rf dist *.tsbuildinfo",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/dist/Radio.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Radio } from './Radio.js';
-declare const meta: Meta<typeof Radio>;
-export default meta;
-export declare const Basic: StoryObj<typeof Radio>;
-export declare const Colors: StoryObj<typeof Radio>;
-export declare const States: StoryObj<typeof Radio>;
-//# sourceMappingURL=Radio.stories.d.ts.map

package/dist/Radio.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../src/Radio.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAI5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,KAAK,CAYxC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,OAAO,KAAK,CASzC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,OAAO,KAAK,CAiBzC,CAAC"}

package/dist/Radio.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import '@testing-library/jest-dom';
-//# sourceMappingURL=Radio.test.d.ts.map

package/dist/Radio.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Radio.test.d.ts","sourceRoot":"","sources":["../src/Radio.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}