@purr-react-tailwindcss/components.radio-group 0.0.1

package/dist/_components/_label.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IRadioGroupLabelProps } from '../_types';
+
+export declare const RadioGroupLabel: React.MemoExoticComponent<({ label, hasValue, htmlAttributes }: IRadioGroupLabelProps) => React.JSX.Element>;

package/dist/_components/_option.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IRadioGroupOptionProps } from '../_types';
+
+export declare const RadioGroupOption: React.MemoExoticComponent<({ label, value, name, htmlAttributes, textHTMLAttributes, checkBoxHTMLAttributes, checkBoxTickHTMLAttributes, isStandalone, currentValue, setCurrentValue, onChange, }: IRadioGroupOptionProps) => React.JSX.Element>;

package/dist/_components/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IRadioGroupProps } from '../_types';
+
+export declare const RadioGroup: React.ForwardRefExoticComponent<IRadioGroupProps & React.RefAttributes<HTMLElement>>;

package/dist/_label-Bwrjrv60.js

@@ -0,0 +1,21 @@
+import { jsx as t } from "react/jsx-runtime";
+import a from "clsx";
+import { memo as i } from "react";
+const s = i(
+  ({ label: o = "", hasValue: e, htmlAttributes: r }) => /* @__PURE__ */ t(
+    "span",
+    {
+      className: a(
+        "text-base transition-colors duration-200 ease-in-out",
+        e ? "text-blue-300" : "text-white",
+        "radio-group-label"
+      ),
+      ...r,
+      children: o
+    }
+  )
+);
+s.displayName = "RadioGroupLabel";
+export {
+  s as RadioGroupLabel
+};

package/dist/_label-VT0fJVvQ.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("clsx"),s=require("react"),e=s.memo(({label:t="",hasValue:o,htmlAttributes:r})=>a.jsx("span",{className:i("text-base transition-colors duration-200 ease-in-out",o?"text-blue-300":"text-white","radio-group-label"),...r,children:t}));e.displayName="RadioGroupLabel";exports.RadioGroupLabel=e;

package/dist/_types.d.ts

@@ -0,0 +1,38 @@
+import { ChangeEvent, HTMLAttributes, LabelHTMLAttributes } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+export type TRadioGroupDirection = "column" | "row";
+export interface IRadioGroupOption {
+    key: string;
+    value: string;
+    label?: string;
+    htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
+    textHTMLAttributes?: LabelHTMLAttributes<HTMLSpanElement> & IExtendable;
+    checkBoxHTMLAttributes?: LabelHTMLAttributes<HTMLInputElement> & IExtendable;
+    checkBoxTickHTMLAttributes?: LabelHTMLAttributes<HTMLInputElement> & IExtendable;
+}
+export interface IRadioGroupOptionProps extends IRadioGroupOption {
+    name: string;
+    currentValue?: string;
+    isStandalone?: boolean;
+    setCurrentValue?: (value: string) => void;
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+}
+export interface IRadioGroupLabelProps {
+    label?: string;
+    hasValue?: boolean;
+    htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
+}
+export interface IRadioGroupProps {
+    options: IRadioGroupOption[];
+    name: string;
+    value?: string;
+    label?: string;
+    isStandalone?: boolean;
+    direction?: TRadioGroupDirection;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    labelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    optionHtmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
+    optionGroupHtmlAttributes?: LabelHTMLAttributes<HTMLDivElement> & IExtendable;
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),b=require("clsx"),g=require("@purr-core/hooks.sync-state-with-props"),k=require("@purr-core/utils.helpers"),j=t.memo(({label:r,value:e,name:o,htmlAttributes:c,textHTMLAttributes:n,checkBoxHTMLAttributes:d,checkBoxTickHTMLAttributes:f,isStandalone:p,currentValue:m,setCurrentValue:a,onChange:l})=>{var R;const h=t.useRef(null),i=p?(R=h.current)==null?void 0:R.checked:m===e,x=p?void 0:m===e,u=t.useCallback(y=>{l==null||l(e,y),a==null||a(e)},[l,a,e]),w=t.useMemo(()=>s.jsx("span",{className:"radio-group-option-label text-base text-white",...n,children:r}),[r,n]);return s.jsxs("label",{className:"radio-group-option flex cursor-pointer items-center gap-3",...c,children:[s.jsxs("span",{className:"relative flex",children:[s.jsx("input",{className:b("h-4 w-4 appearance-none rounded-full border-2 border-blue-300","radio-group-option-input",i?"radio-group-option-input--checked":""),name:o,type:"radio",value:e,checked:x,onChange:u,ref:h,...d}),s.jsx("span",{className:b("absolute left-1 top-1 h-2 w-2 rounded-full bg-blue-300 transition-transform duration-200 ease-in-out",i?"scale-100 transform":"scale-0 transform"),...f})]}),w]})},k.arePropsShallowEqual(["currentValue"],(r,e,o)=>{switch(r){case"currentValue":return o.currentValue===o.value==(e.currentValue===e.value);default:return}}));j.displayName="RadioGroupOption";const q=t.lazy(()=>Promise.resolve().then(()=>require("./_label-VT0fJVvQ.cjs")).then(r=>({default:r.RadioGroupLabel}))),N=t.forwardRef(({options:r,name:e,value:o="",label:c="",onChange:n,isStandalone:d=!1,direction:f="column",htmlAttributes:p,labelHtmlAttributes:m,optionHtmlAttributes:a,optionGroupHtmlAttributes:l},h)=>{const{currentValue:i,setCurrentValue:x}=g(o,d);return s.jsxs("div",{className:"radio-group flex flex-col gap-4",...p,children:[s.jsx(t.Suspense,{children:!!c&&s.jsx(q,{hasValue:!!i,label:c,htmlAttributes:m})}),s.jsx("div",{className:b("flex gap-4",f==="column"?"flex-col items-start":"flex-row"),...l,children:r==null?void 0:r.map(u=>t.createElement(j,{...u,key:u.key,name:e,htmlAttributes:a??u.htmlAttributes,isStandalone:d,currentValue:i,setCurrentValue:x,onChange:n}))})]})});N.displayName="RadioGroup";exports.RadioGroup=N;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './_components';
+export * from './_types';

package/dist/index.js

@@ -0,0 +1,144 @@
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import { memo as y, useRef as g, useCallback as G, useMemo as O, lazy as j, forwardRef as A, Suspense as E, createElement as L } from "react";
+import R from "clsx";
+import S from "@purr-core/hooks.sync-state-with-props";
+import { arePropsShallowEqual as q } from "@purr-core/utils.helpers";
+const N = y(
+  ({
+    label: r,
+    value: e,
+    name: o,
+    htmlAttributes: c,
+    textHTMLAttributes: u,
+    checkBoxHTMLAttributes: n,
+    checkBoxTickHTMLAttributes: m,
+    isStandalone: d,
+    currentValue: p,
+    setCurrentValue: t,
+    onChange: a
+  }) => {
+    var x;
+    const f = g(null), s = d ? (x = f.current) == null ? void 0 : x.checked : p === e, h = d ? void 0 : p === e, i = G(
+      (k) => {
+        a == null || a(e, k), t == null || t(e);
+      },
+      [a, t, e]
+    ), w = O(
+      () => /* @__PURE__ */ l(
+        "span",
+        {
+          className: "radio-group-option-label text-base text-white",
+          ...u,
+          children: r
+        }
+      ),
+      [r, u]
+    );
+    return /* @__PURE__ */ b(
+      "label",
+      {
+        className: "radio-group-option flex cursor-pointer items-center gap-3",
+        ...c,
+        children: [
+          /* @__PURE__ */ b("span", { className: "relative flex", children: [
+            /* @__PURE__ */ l(
+              "input",
+              {
+                className: R(
+                  "h-4 w-4 appearance-none rounded-full border-2 border-blue-300",
+                  "radio-group-option-input",
+                  s ? "radio-group-option-input--checked" : ""
+                ),
+                name: o,
+                type: "radio",
+                value: e,
+                checked: h,
+                onChange: i,
+                ref: f,
+                ...n
+              }
+            ),
+            /* @__PURE__ */ l(
+              "span",
+              {
+                className: R(
+                  "absolute left-1 top-1 h-2 w-2 rounded-full bg-blue-300 transition-transform duration-200 ease-in-out",
+                  s ? "scale-100 transform" : "scale-0 transform"
+                ),
+                ...m
+              }
+            )
+          ] }),
+          w
+        ]
+      }
+    );
+  },
+  q(["currentValue"], (r, e, o) => {
+    switch (r) {
+      case "currentValue":
+        return o.currentValue === o.value == (e.currentValue === e.value);
+      default:
+        return;
+    }
+  })
+);
+N.displayName = "RadioGroupOption";
+const z = j(
+  () => import("./_label-Bwrjrv60.js").then((r) => ({
+    default: r.RadioGroupLabel
+  }))
+), I = A(
+  ({
+    options: r,
+    name: e,
+    value: o = "",
+    label: c = "",
+    onChange: u,
+    isStandalone: n = !1,
+    direction: m = "column",
+    htmlAttributes: d,
+    labelHtmlAttributes: p,
+    optionHtmlAttributes: t,
+    optionGroupHtmlAttributes: a
+  }, f) => {
+    const { currentValue: s, setCurrentValue: h } = S(o, n);
+    return /* @__PURE__ */ b("div", { className: "radio-group flex flex-col gap-4", ...d, children: [
+      /* @__PURE__ */ l(E, { children: !!c && /* @__PURE__ */ l(
+        z,
+        {
+          hasValue: !!s,
+          label: c,
+          htmlAttributes: p
+        }
+      ) }),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: R(
+            "flex gap-4",
+            m === "column" ? "flex-col items-start" : "flex-row"
+          ),
+          ...a,
+          children: r == null ? void 0 : r.map((i) => /* @__PURE__ */ L(
+            N,
+            {
+              ...i,
+              key: i.key,
+              name: e,
+              htmlAttributes: t ?? i.htmlAttributes,
+              isStandalone: n,
+              currentValue: s,
+              setCurrentValue: h,
+              onChange: u
+            }
+          ))
+        }
+      )
+    ] });
+  }
+);
+I.displayName = "RadioGroup";
+export {
+  I as RadioGroup
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@purr-react-tailwindcss/components.radio-group",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "typescript": "*",
+    "react": "*",
+    "clsx": "*",
+    "@purr-core/utils.helpers": "0.0.6",
+    "@purr-core/utils.definitions": "0.0.6",
+    "@purr-core/hooks.sync-state-with-props": "0.0.4"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}