@pittorica/radio-react 0.25.0 → 0.26.1

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

@@ -8,18 +8,19 @@ export type RadioProps<E extends ElementType = 'button'> = Omit<BoxProps<E>, 'on
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;
-    /** @default 'indigo' */
+    /** @default 'source' */
     color?: PittoricaColor;
     value?: string;
     name?: string;
     onCheckedChange?: (checked: boolean) => void;
+    required?: boolean;
 };
 /**
  * Primitive Radio component.
  * Fully polymorphic and agnostic foundation.
  */
 export declare const Radio: {
-    <E extends ElementType = "button">({ checked, disabled, color, className, style, onCheckedChange, name, as, ...props }: RadioProps<E>): 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,WAAW,EAAmB,MAAM,OAAO,CAAC;AAM9E,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;CAC9C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK;KAAI,CAAC,SAAS,WAAW,kGAUxC,UAAU,CAAC,CAAC,CAAC;;CA0Cf,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 u } from "react/jsx-runtime";
-import { forwardRef as _, createElement as $ } from "react";
-function x(t) {
-  var r, i, a = "";
-  if (typeof t == "string" || typeof t == "number") a += t;
-  else if (typeof t == "object") if (Array.isArray(t)) {
-    var o = t.length;
-    for (r = 0; r < o; r++) t[r] && (i = x(t[r])) && (a && (a += " "), a += i);
-  } else for (i in t) t[i] && (a && (a += " "), a += i);
-  return a;
+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 z() {
-  for (var t, r, i = 0, a = "", o = arguments.length; i < o; i++) (t = arguments[i]) && (r = x(t)) && (a && (a += " "), a += r);
-  return a;
+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
@@ -46,32 +46,32 @@ var F = {
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const N = (t, r, i, a) => {
+const x = (i, a, r, t) => {
   const o = _(
-    ({ color: s = "currentColor", size: p = 24, stroke: d = 2, title: n, className: m, children: c, ...l }, g) => $(
+    ({ color: l = "currentColor", size: c = 24, stroke: m = 2, title: p, className: d, children: n, ...g }, u) => w(
       "svg",
       {
-        ref: g,
-        ...F[t],
-        width: p,
-        height: p,
-        className: ["tabler-icon", `tabler-icon-${r}`, m].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: d,
-          stroke: s
+          strokeWidth: m,
+          stroke: l
         },
-        ...l
+        ...g
       },
       [
-        n && $("title", { key: "svg-title" }, n),
-        ...a.map(([f, v]) => $(f, v)),
-        ...Array.isArray(c) ? c : [c]
+        p && w("title", { key: "svg-title" }, p),
+        ...t.map(([f, s]) => w(f, s)),
+        ...Array.isArray(n) ? n : [n]
       ]
     )
   );
-  return o.displayName = `${i}`, o;
+  return o.displayName = `${r}`, o;
 };
 /**
  * @license @tabler/icons-react v3.36.1 - MIT
@@ -79,107 +79,114 @@ const N = (t, r, i, a) => {
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const I = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-0" }]], M = N("outline", "circle", "Circle", I);
+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 S = [["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" }]], E = N("filled", "circle-check-filled", "CircleCheckFilled", S);
-function A(t) {
-  var r, i, a = "";
-  if (typeof t == "string" || typeof t == "number") a += t;
-  else if (typeof t == "object") if (Array.isArray(t)) {
-    var o = t.length;
-    for (r = 0; r < o; r++) t[r] && (i = A(t[r])) && (a && (a += " "), a += i);
-  } else for (i in t) t[i] && (a && (a += " "), a += i);
-  return a;
+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 q() {
-  for (var t, r, i = 0, a = "", o = arguments.length; i < o; i++) (t = arguments[i]) && (r = A(t)) && (a && (a += " "), a += r);
-  return a;
+function G() {
+  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 C = ({
-  as: t,
-  children: r,
-  display: i,
-  m: a,
+const R = ({
+  as: i,
+  children: a,
+  display: r,
+  m: t,
   mt: o,
-  mr: s,
-  mb: p,
-  ml: d,
-  mx: n,
-  my: m,
-  p: c,
-  pt: l,
-  pr: g,
+  mr: l,
+  mb: c,
+  ml: m,
+  mx: p,
+  my: d,
+  p: n,
+  pt: g,
+  pr: u,
   pb: f,
-  pl: v,
+  pl: s,
   px: h,
-  py: y,
-  width: b,
-  height: w,
-  position: k,
-  style: R,
+  py: v,
+  width: k,
+  height: y,
+  position: b,
+  style: A,
   className: B,
   disabled: L,
-  ...T
+  required: T,
+  ...j
 }) => {
-  const j = t || "div", e = {};
-  i && (e.display = i), b && (e.width = b), w && (e.height = w), k && (e.position = k), a && (e.margin = `var(--pittorica-space-${a})`), o && (e.marginTop = `var(--pittorica-space-${o})`), s && (e.marginRight = `var(--pittorica-space-${s})`), p && (e.marginBottom = `var(--pittorica-space-${p})`), d && (e.marginLeft = `var(--pittorica-space-${d})`), n && (e.marginLeft = `var(--pittorica-space-${n})`, e.marginRight = `var(--pittorica-space-${n})`), m && (e.marginTop = `var(--pittorica-space-${m})`, e.marginBottom = `var(--pittorica-space-${m})`), c && (e.padding = `var(--pittorica-space-${c})`), l && (e.paddingTop = `var(--pittorica-space-${l})`), g && (e.paddingRight = `var(--pittorica-space-${g})`), f && (e.paddingBottom = `var(--pittorica-space-${f})`), v && (e.paddingLeft = `var(--pittorica-space-${v})`), h && (e.paddingLeft = `var(--pittorica-space-${h})`, e.paddingRight = `var(--pittorica-space-${h})`), y && (e.paddingTop = `var(--pittorica-space-${y})`, e.paddingBottom = `var(--pittorica-space-${y})`);
+  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 = {
-    ...R,
+    ...A,
     ...e
   };
-  return /* @__PURE__ */ u(
-    j,
+  return /* @__PURE__ */ $(
+    q,
     {
-      className: q("pittorica-box", B),
+      className: G("pittorica-box", B),
       style: W,
       disabled: L,
-      ...T,
-      children: r
+      required: T,
+      ...j,
+      children: a
     }
   );
 };
-C.displayName = "Box";
-const D = ({
-  checked: t,
+R.displayName = "Box";
+const H = ({
+  checked: i,
+  defaultChecked: a,
   disabled: r,
-  color: i = "indigo",
-  className: a,
-  style: o,
-  onCheckedChange: s,
-  name: p,
+  color: t = "source",
+  className: o,
+  style: l,
+  onCheckedChange: c,
+  name: m,
+  required: p = !1,
   as: d,
   ...n
 }) => {
-  const c = i !== "inherit" && !(i != null && i.startsWith("#")) && !(i != null && i.startsWith("rgb")) ? `var(--pittorica-${i}-9)` : i, l = d || "button", g = (f) => {
-    r || (s == null || s(!t), typeof n.onClick == "function" && n.onClick(f));
-  };
-  return /* @__PURE__ */ u(
-    C,
+  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,
     {
-      as: l,
-      type: l === "button" ? "button" : void 0,
+      as: v,
+      type: v === "button" ? "button" : void 0,
       role: "radio",
-      name: p,
-      "aria-checked": t,
-      "data-state": t ? "checked" : "unchecked",
+      name: m,
+      "aria-checked": s,
+      "aria-required": p,
+      "data-state": s ? "checked" : "unchecked",
       disabled: r,
-      className: z("pittorica-radio-root", a),
-      onClick: g,
+      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": c,
-        ...o
+        "--pittorica-source-color": h,
+        ...l
       },
       ...n,
-      children: t ? /* @__PURE__ */ u(E, { size: 14 }) : /* @__PURE__ */ u(M, { size: 14, opacity: 0.5 })
+      children: s ? /* @__PURE__ */ $(D, { size: 14 }) : /* @__PURE__ */ $(S, { size: 14, opacity: 0.5 })
     }
   );
 };
-D.displayName = "Radio";
+H.displayName = "Radio";
 export {
-  D as Radio
+  H as Radio
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pittorica/radio-react",
-  "version": "0.25.0",
+  "version": "0.26.1",
+  "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.25.0",
-    "@pittorica/text-react": "0.25.0"
+    "@pittorica/box-react": "0.26.1",
+    "@pittorica/text-react": "0.26.1"
   },
   "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/flex-react": "0.25.0",
-    "@pittorica/theme-react": "0.25.0",
-    "pittorica": "0.25.0"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "@pittorica/theme-react": "0.26.1",
+    "pittorica": "0.26.1",
+    "@pittorica/flex-react": "0.26.1"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -36,7 +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",
+    "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"}