@purr-react-styled-components/components.radio-group 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -1 +1,51 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),y=require("clsx"),m=require("react"),_=require("@purr-core/hooks.sync-state-with-props"),f=require("styled-components"),k=require("@purr-core/utils.helpers"),b={Container:f.div.withConfig({displayName:"_style__Container",componentId:"sc-192tru7-0"})(["display:flex;flex-direction:",";align-items:",";gap:16px;position:relative;"],({$direction:e})=>e,({$direction:e})=>e==="column"?"flex-start":"inherit"),OptionLabel:f.label.withConfig({displayName:"_style__OptionLabel",componentId:"sc-192tru7-1"})(["display:flex;align-items:center;gap:12px;cursor:",";opacity:",";"],({$disabled:e})=>e?"not-allowed":"pointer",({$disabled:e})=>e?.4:1),OptionInput:f.input.withConfig({displayName:"_style__OptionInput",componentId:"sc-192tru7-2"})(['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;}'])},g=m.memo(({label:e,value:r,name:o,disabled:a,htmlAttributes:s,isStandalone:n,currentValue:p,setCurrentValue:t,onChange:i})=>{const c=n?void 0:p===r,h=m.useCallback(u=>{i==null||i(r,u),t==null||t(r)},[i,t,r]);return d.jsxs(b.OptionLabel,{$disabled:a,...s,className:"radio-group-option",children:[d.jsx(b.OptionInput,{className:y("radio-group-option-input",c?"radio-group-option-input--checked":""),name:o,type:"radio",value:r,checked:c,onChange:h,disabled:a}),e]})},k.arePropsShallowEqual(["currentValue"],(e,r,o)=>{switch(e){case"currentValue":return o.currentValue===o.value==(r.currentValue===r.value);default:return}}));g.displayName="RadioGroupOption";const x=m.forwardRef(({options:e,className:r,name:o,value:a="",onChange:s,isStandalone:n=!1,direction:p="column",disabled:t=!1,htmlAttributes:i,optionHtmlAttributes:c},h)=>{const{currentValue:u,setCurrentValue:w}=_(a,n);return d.jsx(b.Container,{...i,$direction:p,className:y("radio-group",r),children:e==null?void 0:e.map(l=>d.jsx(g,{label:l.label,value:l.value,name:o,htmlAttributes:c??l.htmlAttributes,isStandalone:n,currentValue:u,setCurrentValue:w,onChange:s,disabled:l.disabled??t},l.key))})});x.displayName="RadioGroup";exports.RadioGroup=x;
+'use strict';var y=require('clsx'),h=require('react'),G=require('@purr-core/hooks.sync-state-with-props'),m=require('styled-components'),utils_helpers=require('@purr-core/utils.helpers');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var y__default=/*#__PURE__*/_interopDefault(y);var h__default=/*#__PURE__*/_interopDefault(h);var G__default=/*#__PURE__*/_interopDefault(G);var m__default=/*#__PURE__*/_interopDefault(m);var i={Container:m__default.default.div`
+    display: flex;
+    flex-direction: ${({$direction:o})=>o};
+    align-items: ${({$direction:o})=>o==="column"?"flex-start":"inherit"};
+    gap: 16px;
+    position: relative;
+  `,OptionLabel:m__default.default.label`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: ${({$disabled:o})=>o?"not-allowed":"pointer"};
+    opacity: ${({$disabled:o})=>o?.4:1};
+  `,OptionInput:m__default.default.input`
+    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;
+    }
+  `};var f=h.memo(({label:o,value:r,name:e,disabled:t,htmlAttributes:u,isStandalone:n,currentValue:s,setCurrentValue:l,onChange:p})=>{let d=n?void 0:s===r,b=h.useCallback(c=>{p?.(r,c),l?.(r);},[p,l,r]);return h__default.default.createElement(i.OptionLabel,{$disabled:t,...u,className:"radio-group-option"},h__default.default.createElement(i.OptionInput,{className:y__default.default("radio-group-option-input",d?"radio-group-option-input--checked":""),name:e,type:"radio",value:r,checked:d,onChange:b,disabled:t}),o)},utils_helpers.arePropsShallowEqual(["currentValue"],(o,r,e)=>{if(o==="currentValue")return e.currentValue===e.value==(r.currentValue===r.value)}));f.displayName="RadioGroupOption";var S=h.forwardRef(({options:o,className:r,name:e,value:t="",onChange:u,isStandalone:n=false,direction:s="column",disabled:l=false,htmlAttributes:p,optionHtmlAttributes:d},b)=>{let{currentValue:c,setCurrentValue:x}=G__default.default(t,n);return h__default.default.createElement(i.Container,{...p,$direction:s,className:y__default.default("radio-group",r)},o?.map(a=>h__default.default.createElement(f,{key:a.key,label:a.label,value:a.value,name:e,htmlAttributes:d??a.htmlAttributes,isStandalone:n,currentValue:c,setCurrentValue:x,onChange:u,disabled:a.disabled??l})))});S.displayName="RadioGroup";exports.RadioGroup=S;

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

@@ -1,26 +1,26 @@
-import { ChangeEvent, HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
+import React, { ReactNode, 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?: ReactNode;
     htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
     disabled?: boolean;
 }
-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?: ReactNode;
     htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
 }
-export interface IRadioGroupProps {
+interface IRadioGroupProps {
     className?: string;
     options: IRadioGroupOption[];
     name: string;
@@ -32,3 +32,7 @@ export interface IRadioGroupProps {
     optionHtmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & 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,38 @@
-export * from './_components';
-export * from './_types';
+import React, { ReactNode, LabelHTMLAttributes, HTMLAttributes, ChangeEvent } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+type TRadioGroupDirection = "column" | "row";
+interface IRadioGroupOption {
+    key: string;
+    value: string;
+    label?: ReactNode;
+    htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
+    disabled?: boolean;
+}
+interface IRadioGroupOptionProps extends IRadioGroupOption {
+    name: string;
+    currentValue?: string;
+    isStandalone?: boolean;
+    setCurrentValue?: (value: string) => void;
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+}
+interface IRadioGroupLabelProps {
+    label?: ReactNode;
+    htmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & IExtendable;
+}
+interface IRadioGroupProps {
+    className?: string;
+    options: IRadioGroupOption[];
+    name: string;
+    value?: string;
+    isStandalone?: boolean;
+    direction?: TRadioGroupDirection;
+    disabled?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    optionHtmlAttributes?: LabelHTMLAttributes<HTMLLabelElement> & 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,76 +1,51 @@
-import { jsxs as x, jsx as m } from "react/jsx-runtime";
-import h from "clsx";
-import { memo as w, useCallback as k, forwardRef as N } from "react";
-import _ from "@purr-core/hooks.sync-state-with-props";
-import u from "styled-components";
-import { arePropsShallowEqual as O } from "@purr-core/utils.helpers";
-const f = {
-  Container: u.div.withConfig({
-    displayName: "_style__Container",
-    componentId: "sc-192tru7-0"
-  })(["display:flex;flex-direction:", ";align-items:", ";gap:16px;position:relative;"], ({
-    $direction: r
-  }) => r, ({
-    $direction: r
-  }) => r === "column" ? "flex-start" : "inherit"),
-  OptionLabel: u.label.withConfig({
-    displayName: "_style__OptionLabel",
-    componentId: "sc-192tru7-1"
-  })(["display:flex;align-items:center;gap:12px;cursor:", ";opacity:", ";"], ({
-    $disabled: r
-  }) => r ? "not-allowed" : "pointer", ({
-    $disabled: r
-  }) => r ? 0.4 : 1),
-  OptionInput: u.input.withConfig({
-    displayName: "_style__OptionInput",
-    componentId: "sc-192tru7-2"
-  })(['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;}'])
-}, y = w(({
-  label: r,
-  value: e,
-  name: o,
-  disabled: a,
-  htmlAttributes: d,
-  isStandalone: n,
-  currentValue: p,
-  setCurrentValue: t,
-  onChange: i
-}) => {
-  const c = n ? void 0 : p === e, b = k((s) => {
-    i == null || i(e, s), t == null || t(e);
-  }, [i, t, e]);
-  return /* @__PURE__ */ x(f.OptionLabel, { $disabled: a, ...d, className: "radio-group-option", children: [
-    /* @__PURE__ */ m(f.OptionInput, { className: h("radio-group-option-input", c ? "radio-group-option-input--checked" : ""), name: o, type: "radio", value: e, checked: c, onChange: b, disabled: a }),
-    r
-  ] });
-}, O(["currentValue"], (r, e, o) => {
-  switch (r) {
-    case "currentValue":
-      return o.currentValue === o.value == (e.currentValue === e.value);
-    default:
-      return;
-  }
-}));
-y.displayName = "RadioGroupOption";
-const R = N(({
-  options: r,
-  className: e,
-  name: o,
-  value: a = "",
-  onChange: d,
-  isStandalone: n = !1,
-  direction: p = "column",
-  disabled: t = !1,
-  htmlAttributes: i,
-  optionHtmlAttributes: c
-}, b) => {
-  const {
-    currentValue: s,
-    setCurrentValue: g
-  } = _(a, n);
-  return /* @__PURE__ */ m(f.Container, { ...i, $direction: p, className: h("radio-group", e), children: r == null ? void 0 : r.map((l) => /* @__PURE__ */ m(y, { label: l.label, value: l.value, name: o, htmlAttributes: c ?? l.htmlAttributes, isStandalone: n, currentValue: s, setCurrentValue: g, onChange: d, disabled: l.disabled ?? t }, l.key)) });
-});
-R.displayName = "RadioGroup";
-export {
-  R as RadioGroup
-};
+import y from'clsx';import h,{memo,useCallback,forwardRef}from'react';import G from'@purr-core/hooks.sync-state-with-props';import m from'styled-components';import {arePropsShallowEqual}from'@purr-core/utils.helpers';var i={Container:m.div`
+    display: flex;
+    flex-direction: ${({$direction:o})=>o};
+    align-items: ${({$direction:o})=>o==="column"?"flex-start":"inherit"};
+    gap: 16px;
+    position: relative;
+  `,OptionLabel:m.label`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: ${({$disabled:o})=>o?"not-allowed":"pointer"};
+    opacity: ${({$disabled:o})=>o?.4:1};
+  `,OptionInput:m.input`
+    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;
+    }
+  `};var f=memo(({label:o,value:r,name:e,disabled:t,htmlAttributes:u,isStandalone:n,currentValue:s,setCurrentValue:l,onChange:p})=>{let d=n?void 0:s===r,b=useCallback(c=>{p?.(r,c),l?.(r);},[p,l,r]);return h.createElement(i.OptionLabel,{$disabled:t,...u,className:"radio-group-option"},h.createElement(i.OptionInput,{className:y("radio-group-option-input",d?"radio-group-option-input--checked":""),name:e,type:"radio",value:r,checked:d,onChange:b,disabled:t}),o)},arePropsShallowEqual(["currentValue"],(o,r,e)=>{if(o==="currentValue")return e.currentValue===e.value==(r.currentValue===r.value)}));f.displayName="RadioGroupOption";var S=forwardRef(({options:o,className:r,name:e,value:t="",onChange:u,isStandalone:n=false,direction:s="column",disabled:l=false,htmlAttributes:p,optionHtmlAttributes:d},b)=>{let{currentValue:c,setCurrentValue:x}=G(t,n);return h.createElement(i.Container,{...p,$direction:s,className:y("radio-group",r)},o?.map(a=>h.createElement(f,{key:a.key,label:a.label,value:a.value,name:e,htmlAttributes:d??a.htmlAttributes,isStandalone:n,currentValue:c,setCurrentValue:x,onChange:u,disabled:a.disabled??l})))});S.displayName="RadioGroup";export{S as RadioGroup};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.radio-group",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,12 +25,12 @@
     "react": "*",
     "styled-components": "*",
     "clsx": "*",
-    "@purr-core/utils.definitions": "0.0.10",
-    "@purr-core/utils.helpers": "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"
   },
   "devDependencies": {
-    "@purr-react-styled-components/components.form-field": "0.0.1"
+    "@purr-react-styled-components/components.form-field": "0.0.3"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -39,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/_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/_style.d.ts

@@ -1,9 +0,0 @@
-export declare const Styled: {
-    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $direction: "row" | "column";
-    }>> & 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;
-};