@purr-react-tailwindcss/components.radio-group 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -1 +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;
+'use strict';var g=require('clsx'),s=require('react'),z=require('@purr-core/hooks.sync-state-with-props'),utils_helpers=require('@purr-core/utils.helpers');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var g__default=/*#__PURE__*/_interopDefault(g);var s__default=/*#__PURE__*/_interopDefault(s);var z__default=/*#__PURE__*/_interopDefault(z);var L=Object.defineProperty;var k=(e,o)=>()=>(e&&(o=e(e=0)),o);var y=(e,o)=>{for(var r in o)L(e,r,{get:o[r],enumerable:true});};var N={};y(N,{RadioGroupLabel:()=>G});var G,R=k(()=>{G=s.memo(({label:e="",hasValue:o,htmlAttributes:r})=>s__default.default.createElement("span",{className:g__default.default("text-base transition-colors duration-200 ease-in-out",o?"text-blue-300":"text-white","radio-group-label"),...r},e));G.displayName="RadioGroupLabel";});var x=s.memo(({label:e,value:o,name:r,htmlAttributes:t,textHTMLAttributes:i,checkBoxHTMLAttributes:l,checkBoxTickHTMLAttributes:f,isStandalone:u,currentValue:m,setCurrentValue:d,onChange:c})=>{let b=s.useRef(null),a=u?b.current?.checked:m===o,h=u?void 0:m===o,n=s.useCallback(I=>{c?.(o,I),d?.(o);},[c,d,o]),w=s.useMemo(()=>s__default.default.createElement("span",{className:"radio-group-option-label text-base text-white",...i},e),[e,i]);return s__default.default.createElement("label",{className:"radio-group-option flex cursor-pointer items-center gap-3",...t},s__default.default.createElement("span",{className:"relative flex"},s__default.default.createElement("input",{className:g__default.default("h-4 w-4 appearance-none rounded-full border-2 border-blue-300","radio-group-option-input",a?"radio-group-option-input--checked":""),name:r,type:"radio",value:o,checked:h,onChange:n,ref:b,...l}),s__default.default.createElement("span",{className:g__default.default("absolute left-1 top-1 h-2 w-2 rounded-full bg-blue-300 transition-transform duration-200 ease-in-out",a?"scale-100 transform":"scale-0 transform"),...f})),w)},utils_helpers.arePropsShallowEqual(["currentValue"],(e,o,r)=>{if(e==="currentValue")return r.currentValue===r.value==(o.currentValue===o.value)}));x.displayName="RadioGroupOption";var W=s.lazy(()=>Promise.resolve().then(()=>(R(),N)).then(e=>({default:e.RadioGroupLabel}))),_=s.forwardRef(({options:e,name:o,value:r="",label:t="",onChange:i,isStandalone:l=false,direction:f="column",htmlAttributes:u,labelHtmlAttributes:m,optionHtmlAttributes:d,optionGroupHtmlAttributes:c},b)=>{let{currentValue:a,setCurrentValue:h}=z__default.default(r,l);return s__default.default.createElement("div",{className:"radio-group flex flex-col gap-4",...u},s__default.default.createElement(s.Suspense,null,!!t&&s__default.default.createElement(W,{hasValue:!!a,label:t,htmlAttributes:m})),s__default.default.createElement("div",{className:g__default.default("flex gap-4",f==="column"?"flex-col items-start":"flex-row"),...c},e?.map(n=>s__default.default.createElement(x,{...n,key:n.key,name:o,htmlAttributes:d??n.htmlAttributes,isStandalone:l,currentValue:a,setCurrentValue:h,onChange:i}))))});_.displayName="RadioGroup";exports.RadioGroup=_;

package/dist/{_types.d.ts → index.d.cts}

@@ -1,8 +1,8 @@
-import { ChangeEvent, HTMLAttributes, LabelHTMLAttributes } from 'react';
+import React, { LabelHTMLAttributes, HTMLAttributes, ChangeEvent } from 'react';
 import { IExtendable } from '@purr-core/utils.definitions';
 
-export type TRadioGroupDirection = "column" | "row";
-export interface IRadioGroupOption {
+type TRadioGroupDirection = "column" | "row";
+interface IRadioGroupOption {
     key: string;
     value: string;
     label?: string;
@@ -11,19 +11,19 @@ export interface IRadioGroupOption {
     checkBoxHTMLAttributes?: LabelHTMLAttributes<HTMLInputElement> & IExtendable;
     checkBoxTickHTMLAttributes?: LabelHTMLAttributes<HTMLInputElement> & IExtendable;
 }
-export interface IRadioGroupOptionProps extends IRadioGroupOption {
+interface IRadioGroupOptionProps extends IRadioGroupOption {
     name: string;
     currentValue?: string;
     isStandalone?: boolean;
     setCurrentValue?: (value: string) => void;
     onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
 }
-export interface IRadioGroupLabelProps {
+interface IRadioGroupLabelProps {
     label?: string;
     hasValue?: boolean;
     htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
 }
-export interface IRadioGroupProps {
+interface IRadioGroupProps {
     options: IRadioGroupOption[];
     name: string;
     value?: string;
@@ -36,3 +36,7 @@ export interface IRadioGroupProps {
     optionGroupHtmlAttributes?: LabelHTMLAttributes<HTMLDivElement> & IExtendable;
     onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
 }
+
+declare const RadioGroup: React.ForwardRefExoticComponent<IRadioGroupProps & React.RefAttributes<HTMLElement>>;
+
+export { type IRadioGroupLabelProps, type IRadioGroupOption, type IRadioGroupOptionProps, type IRadioGroupProps, RadioGroup, type TRadioGroupDirection };

package/dist/index.d.ts

@@ -1,2 +1,42 @@
-export * from './_components';
-export * from './_types';
+import React, { LabelHTMLAttributes, HTMLAttributes, ChangeEvent } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+type TRadioGroupDirection = "column" | "row";
+interface IRadioGroupOption {
+    key: string;
+    value: string;
+    label?: string;
+    htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
+    textHTMLAttributes?: LabelHTMLAttributes<HTMLSpanElement> & IExtendable;
+    checkBoxHTMLAttributes?: LabelHTMLAttributes<HTMLInputElement> & IExtendable;
+    checkBoxTickHTMLAttributes?: LabelHTMLAttributes<HTMLInputElement> & IExtendable;
+}
+interface IRadioGroupOptionProps extends IRadioGroupOption {
+    name: string;
+    currentValue?: string;
+    isStandalone?: boolean;
+    setCurrentValue?: (value: string) => void;
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+}
+interface IRadioGroupLabelProps {
+    label?: string;
+    hasValue?: boolean;
+    htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
+}
+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;
+}
+
+declare const RadioGroup: React.ForwardRefExoticComponent<IRadioGroupProps & React.RefAttributes<HTMLElement>>;
+
+export { type IRadioGroupLabelProps, type IRadioGroupOption, type IRadioGroupOptionProps, type IRadioGroupProps, RadioGroup, type TRadioGroupDirection };

package/dist/index.js

@@ -1,144 +1 @@
-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
-};
+import g from'clsx';import s,{memo,useRef,useCallback,useMemo,lazy,forwardRef,Suspense}from'react';import z from'@purr-core/hooks.sync-state-with-props';import {arePropsShallowEqual}from'@purr-core/utils.helpers';var L=Object.defineProperty;var k=(e,o)=>()=>(e&&(o=e(e=0)),o);var y=(e,o)=>{for(var r in o)L(e,r,{get:o[r],enumerable:true});};var N={};y(N,{RadioGroupLabel:()=>G});var G,R=k(()=>{G=memo(({label:e="",hasValue:o,htmlAttributes:r})=>s.createElement("span",{className:g("text-base transition-colors duration-200 ease-in-out",o?"text-blue-300":"text-white","radio-group-label"),...r},e));G.displayName="RadioGroupLabel";});var x=memo(({label:e,value:o,name:r,htmlAttributes:t,textHTMLAttributes:i,checkBoxHTMLAttributes:l,checkBoxTickHTMLAttributes:f,isStandalone:u,currentValue:m,setCurrentValue:d,onChange:c})=>{let b=useRef(null),a=u?b.current?.checked:m===o,h=u?void 0:m===o,n=useCallback(I=>{c?.(o,I),d?.(o);},[c,d,o]),w=useMemo(()=>s.createElement("span",{className:"radio-group-option-label text-base text-white",...i},e),[e,i]);return s.createElement("label",{className:"radio-group-option flex cursor-pointer items-center gap-3",...t},s.createElement("span",{className:"relative flex"},s.createElement("input",{className:g("h-4 w-4 appearance-none rounded-full border-2 border-blue-300","radio-group-option-input",a?"radio-group-option-input--checked":""),name:r,type:"radio",value:o,checked:h,onChange:n,ref:b,...l}),s.createElement("span",{className:g("absolute left-1 top-1 h-2 w-2 rounded-full bg-blue-300 transition-transform duration-200 ease-in-out",a?"scale-100 transform":"scale-0 transform"),...f})),w)},arePropsShallowEqual(["currentValue"],(e,o,r)=>{if(e==="currentValue")return r.currentValue===r.value==(o.currentValue===o.value)}));x.displayName="RadioGroupOption";var W=lazy(()=>Promise.resolve().then(()=>(R(),N)).then(e=>({default:e.RadioGroupLabel}))),_=forwardRef(({options:e,name:o,value:r="",label:t="",onChange:i,isStandalone:l=false,direction:f="column",htmlAttributes:u,labelHtmlAttributes:m,optionHtmlAttributes:d,optionGroupHtmlAttributes:c},b)=>{let{currentValue:a,setCurrentValue:h}=z(r,l);return s.createElement("div",{className:"radio-group flex flex-col gap-4",...u},s.createElement(Suspense,null,!!t&&s.createElement(W,{hasValue:!!a,label:t,htmlAttributes:m})),s.createElement("div",{className:g("flex gap-4",f==="column"?"flex-col items-start":"flex-row"),...c},e?.map(n=>s.createElement(x,{...n,key:n.key,name:o,htmlAttributes:d??n.htmlAttributes,isStandalone:l,currentValue:a,setCurrentValue:h,onChange:i}))))});_.displayName="RadioGroup";export{_ as RadioGroup};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-tailwindcss/components.radio-group",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -24,9 +24,9 @@
     "typescript": "*",
     "react": "*",
     "clsx": "*",
-    "@purr-core/utils.helpers": "0.0.10",
-    "@purr-core/utils.definitions": "0.0.10",
-    "@purr-core/hooks.sync-state-with-props": "0.0.7"
+    "@purr-core/utils.definitions": "0.0.12",
+    "@purr-core/utils.helpers": "0.0.12",
+    "@purr-core/hooks.sync-state-with-props": "0.0.9"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -35,6 +35,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

package/dist/_components/_label.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1 +0,0 @@
-"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;