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

package/dist/index.cjs

@@ -0,0 +1 @@
+'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/index.d.cts

@@ -0,0 +1,42 @@
+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.d.ts

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

@@ -0,0 +1 @@
+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.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -24,9 +24,9 @@
     "typescript": "*",
     "react": "*",
     "clsx": "*",
-    "@purr-core/hooks.sync-state-with-props": "0.0.8",
-    "@purr-core/utils.helpers": "0.0.11",
-    "@purr-core/utils.definitions": "0.0.11"
+    "@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",