@purr-react-styled-components/components.radio-group 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.radio-group",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,11 +25,12 @@
     "react": "*",
     "styled-components": "*",
     "clsx": "*",
-    "@purr-core/utils.definitions": "0.0.9",
-    "@purr-core/utils.helpers": "0.0.9",
-    "@purr-react-styled-components/components.flex-box": "0.0.7",
-    "@purr-react-styled-components/components.helper-text": "0.0.6",
-    "@purr-core/hooks.sync-state-with-props": "0.0.7"
+    "@purr-core/utils.definitions": "0.0.11",
+    "@purr-core/utils.helpers": "0.0.11",
+    "@purr-core/hooks.sync-state-with-props": "0.0.8"
+  },
+  "devDependencies": {
+    "@purr-react-styled-components/components.form-field": "0.0.2"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -38,6 +39,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, 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, disabled, htmlAttributes, 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-DEWFA00w.js

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

package/dist/_label-DnBnK4Hi.cjs

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

package/dist/_style.d.ts

@@ -1,9 +0,0 @@
-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').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-    OptionLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
-        $disabled?: boolean;
-    }>> & 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

@@ -1,40 +0,0 @@
-import { ChangeEvent, HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
-import { FieldError } from 'react-hook-form';
-import { IExtendable } from '@purr-core/utils.definitions';
-import { IHelperTextProps } from '@purr-react-styled-components/components.helper-text';
-
-export type TRadioGroupDirection = "column" | "row";
-export interface IRadioGroupOption {
-    key: string;
-    value: string;
-    label?: ReactNode;
-    htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
-    disabled?: boolean;
-}
-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;
-    htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
-}
-export interface IRadioGroupProps {
-    className?: string;
-    options: IRadioGroupOption[];
-    name: string;
-    value?: string;
-    label?: string;
-    isStandalone?: boolean;
-    direction?: TRadioGroupDirection;
-    error?: FieldError;
-    disabled?: boolean;
-    helperTextProps?: IHelperTextProps;
-    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
-    labelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
-    optionHtmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
-    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
-}

package/dist/index-BggW1El6.js

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

package/dist/index-D__1tkxO.cjs

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

package/dist/index.cjs

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

package/dist/index.d.ts

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

package/dist/index.js

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