@purr-react-styled-components/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, 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-0hq1Ffuv.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("clsx"),t=require("react"),u=require("./index-BctM_nBW.cjs"),r=t.memo(({label:a="",hasValue:e,htmlAttributes:o})=>l.jsx(u.Styled.Label,{...o,$hasValue:e,className:i("radio-group-label",e&&"radio-group-label--hasValue"),children:a}));r.displayName="RadioGroupLabel";exports.RadioGroupLabel=r;

package/dist/_label-3aIov1Gh.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import l from "clsx";
+import { memo as m } from "react";
+import { S as i } from "./index-Br4lojAK.js";
+const p = m(({
+  label: r = "",
+  hasValue: o,
+  htmlAttributes: a
+}) => /* @__PURE__ */ e(i.Label, { ...a, $hasValue: o, className: l("radio-group-label", o && "radio-group-label--hasValue"), children: r }));
+p.displayName = "RadioGroupLabel";
+export {
+  p as RadioGroupLabel
+};

package/dist/_style.d.ts

@@ -0,0 +1,9 @@
+export declare const Styled: {
+    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+        $hasValue?: boolean;
+    }>> & string;
+    OptionLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+    OptionInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+    OptionLabelText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+};

package/dist/_types.d.ts

@@ -0,0 +1,35 @@
+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;
+}
+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 {
+    className?: string;
+    options: IRadioGroupOption[];
+    name: string;
+    value?: string;
+    label?: string;
+    isStandalone?: boolean;
+    direction?: TRadioGroupDirection;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    labelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    optionHtmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/index-BctM_nBW.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("react/jsx-runtime"),y=require("clsx"),n=require("react"),w=require("@purr-core/hooks.sync-state-with-props"),O=require("@purr-react-styled-components/components.flex-box"),s=require("styled-components"),L=require("@purr-core/utils.helpers"),l={Container:s.div.withConfig({displayName:"_style__Container",componentId:"sc-192tru7-0"})(["display:flex;flex-direction:column;gap:16px;"]),Label:s.span.withConfig({displayName:"_style__Label",componentId:"sc-192tru7-1"})(["transition:color 200ms ease-in-out;color:",';font-size:16px;font-family:"Verdana",sans-serif;'],({$hasValue:e})=>e?"#90caf9":"#ffffffb3"),OptionLabel:s.label.withConfig({displayName:"_style__OptionLabel",componentId:"sc-192tru7-2"})(["display:flex;align-items:center;gap:12px;cursor:pointer;"]),OptionInput:s.input.withConfig({displayName:"_style__OptionInput",componentId:"sc-192tru7-3"})(['appearance:none;width:16px;height:16px;border:2px solid #90caf9;border-radius:50%;&::before{transition:transform 200ms ease-in-out;content:"";display:block;margin-top:2px;margin-left:2px;width:8px;height:8px;border-radius:50%;background-color:#90caf9;transform:scale(0);}&:checked::before{transform:scale(1);}&[type="radio" i]{margin:0;}']),OptionLabelText:s.span.withConfig({displayName:"_style__OptionLabelText",componentId:"sc-192tru7-4"})(['font-family:"Verdana",sans-serif;font-size:16px;color:#ffffff;'])},g=n.memo(({label:e,value:t,name:i,htmlAttributes:c,isStandalone:p,currentValue:f,setCurrentValue:r,onChange:a})=>{const u=p?void 0:f===t,m=n.useCallback(h=>{a==null||a(t,h),r==null||r(t)},[a,r,t]),x=n.useMemo(()=>o.jsx(l.OptionLabelText,{className:"radio-group-option-label",children:e}),[e]);return o.jsxs(l.OptionLabel,{...c,className:"radio-group-option",children:[o.jsx(l.OptionInput,{className:y("radio-group-option-input",u?"radio-group-option-input--checked":""),name:i,type:"radio",value:t,checked:u,onChange:m}),x]})},L.arePropsShallowEqual(["currentValue"],(e,t,i)=>{switch(e){case"currentValue":return i.currentValue===i.value==(t.currentValue===t.value);default:return}}));g.displayName="RadioGroupOption";const R=n.lazy(()=>Promise.resolve().then(()=>require("./_label-0hq1Ffuv.cjs")).then(e=>({default:e.RadioGroupLabel}))),_=n.forwardRef(({options:e,className:t,name:i,value:c="",label:p="",onChange:f,isStandalone:r=!1,direction:a="column",htmlAttributes:u,labelHtmlAttributes:m,optionHtmlAttributes:x},h)=>{const{currentValue:b,setCurrentValue:N}=w(c,r);return o.jsxs(l.Container,{...u,className:y("radio-group",t),children:[o.jsx(n.Suspense,{children:!!p&&o.jsx(R,{hasValue:!!b,label:p,htmlAttributes:m})}),o.jsx(O.FlexBox,{gap:"16px",flexDirection:a,alignItems:a==="column"?"flex-start":void 0,children:e==null?void 0:e.map(d=>o.jsx(g,{label:d.label,value:d.value,name:i,htmlAttributes:x??d.htmlAttributes,isStandalone:r,currentValue:b,setCurrentValue:N,onChange:f},d.key))})]})});_.displayName="RadioGroup";exports.RadioGroup=_;exports.Styled=l;

package/dist/index-Br4lojAK.js

@@ -0,0 +1,85 @@
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import y from "clsx";
+import { memo as N, useCallback as w, useMemo as O, lazy as L, forwardRef as R, Suspense as I } from "react";
+import k from "@purr-core/hooks.sync-state-with-props";
+import { FlexBox as G } from "@purr-react-styled-components/components.flex-box";
+import n from "styled-components";
+import { arePropsShallowEqual as S } from "@purr-core/utils.helpers";
+const d = {
+  Container: n.div.withConfig({
+    displayName: "_style__Container",
+    componentId: "sc-192tru7-0"
+  })(["display:flex;flex-direction:column;gap:16px;"]),
+  Label: n.span.withConfig({
+    displayName: "_style__Label",
+    componentId: "sc-192tru7-1"
+  })(["transition:color 200ms ease-in-out;color:", ';font-size:16px;font-family:"Verdana",sans-serif;'], ({
+    $hasValue: e
+  }) => e ? "#90caf9" : "#ffffffb3"),
+  OptionLabel: n.label.withConfig({
+    displayName: "_style__OptionLabel",
+    componentId: "sc-192tru7-2"
+  })(["display:flex;align-items:center;gap:12px;cursor:pointer;"]),
+  OptionInput: n.input.withConfig({
+    displayName: "_style__OptionInput",
+    componentId: "sc-192tru7-3"
+  })(['appearance:none;width:16px;height:16px;border:2px solid #90caf9;border-radius:50%;&::before{transition:transform 200ms ease-in-out;content:"";display:block;margin-top:2px;margin-left:2px;width:8px;height:8px;border-radius:50%;background-color:#90caf9;transform:scale(0);}&:checked::before{transform:scale(1);}&[type="radio" i]{margin:0;}']),
+  OptionLabelText: n.span.withConfig({
+    displayName: "_style__OptionLabelText",
+    componentId: "sc-192tru7-4"
+  })(['font-family:"Verdana",sans-serif;font-size:16px;color:#ffffff;'])
+}, g = N(({
+  label: e,
+  value: o,
+  name: r,
+  htmlAttributes: l,
+  isStandalone: s,
+  currentValue: m,
+  setCurrentValue: t,
+  onChange: a
+}) => {
+  const p = s ? void 0 : m === o, f = w((b) => {
+    a == null || a(o, b), t == null || t(o);
+  }, [a, t, o]), u = O(() => /* @__PURE__ */ i(d.OptionLabelText, { className: "radio-group-option-label", children: e }), [e]);
+  return /* @__PURE__ */ x(d.OptionLabel, { ...l, className: "radio-group-option", children: [
+    /* @__PURE__ */ i(d.OptionInput, { className: y("radio-group-option-input", p ? "radio-group-option-input--checked" : ""), name: r, type: "radio", value: o, checked: p, onChange: f }),
+    u
+  ] });
+}, S(["currentValue"], (e, o, r) => {
+  switch (e) {
+    case "currentValue":
+      return r.currentValue === r.value == (o.currentValue === o.value);
+    default:
+      return;
+  }
+}));
+g.displayName = "RadioGroupOption";
+const V = L(() => import("./_label-3aIov1Gh.js").then((e) => ({
+  default: e.RadioGroupLabel
+}))), v = R(({
+  options: e,
+  className: o,
+  name: r,
+  value: l = "",
+  label: s = "",
+  onChange: m,
+  isStandalone: t = !1,
+  direction: a = "column",
+  htmlAttributes: p,
+  labelHtmlAttributes: f,
+  optionHtmlAttributes: u
+}, b) => {
+  const {
+    currentValue: h,
+    setCurrentValue: _
+  } = k(l, t);
+  return /* @__PURE__ */ x(d.Container, { ...p, className: y("radio-group", o), children: [
+    /* @__PURE__ */ i(I, { children: !!s && /* @__PURE__ */ i(V, { hasValue: !!h, label: s, htmlAttributes: f }) }),
+    /* @__PURE__ */ i(G, { gap: "16px", flexDirection: a, alignItems: a === "column" ? "flex-start" : void 0, children: e == null ? void 0 : e.map((c) => /* @__PURE__ */ i(g, { label: c.label, value: c.value, name: r, htmlAttributes: u ?? c.htmlAttributes, isStandalone: t, currentValue: h, setCurrentValue: _, onChange: m }, c.key)) })
+  ] });
+});
+v.displayName = "RadioGroup";
+export {
+  v as R,
+  d as S
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BctM_nBW.cjs");exports.RadioGroup=e.RadioGroup;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,4 @@
+import { R as a } from "./index-Br4lojAK.js";
+export {
+  a as RadioGroup
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@purr-react-styled-components/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": "*",
+    "styled-components": "*",
+    "clsx": "*",
+    "@purr-core/utils.definitions": "0.0.4",
+    "@purr-core/utils.helpers": "0.0.4",
+    "@purr-react-styled-components/components.flex-box": "0.0.1",
+    "@purr-core/hooks.sync-state-with-props": "0.0.2"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}