@purr-react-styled-components/components.switch 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +49 -0
  2. package/dist/index.d.cts +34 -0
  3. package/dist/index.d.ts +34 -0
  4. package/dist/index.js +49 -0
  5. package/package.json +3 -3
package/dist/index.cjs ADDED
@@ -0,0 +1,49 @@
1
+ 'use strict';var l=require('styled-components'),x=require('clsx'),o=require('react'),B=require('@purr-core/hooks.sync-state-with-props');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var l__default=/*#__PURE__*/_interopDefault(l);var x__default=/*#__PURE__*/_interopDefault(x);var o__default=/*#__PURE__*/_interopDefault(o);var B__default=/*#__PURE__*/_interopDefault(B);var z=Object.defineProperty;var f=(t,e)=>()=>(t&&(e=t(t=0)),e);var c=(t,e)=>{for(var r in e)z(t,r,{get:e[r],enumerable:true});};var h,b,i,n=f(()=>{h=({$disabled:t})=>t?l.css`
2
+ opacity: 0.5;
3
+ cursor: not-allowed;
4
+ `:l.css`
5
+ opacity: 1;
6
+ `,b=({$disabled:t})=>l.css`
7
+ color: ${t?"#ffffff80":"#ffffff"};
8
+ font-size: 16px;
9
+ font-family: "Verdana", sans-serif;
10
+ `,i={Container:l__default.default.div`
11
+ display: inline-flex;
12
+ align-items: center;
13
+ `,Pad:l__default.default.div`
14
+ position: relative;
15
+ transition: all 200ms ease-in-out;
16
+ width: 34px;
17
+ height: 14px;
18
+ border-radius: 7px;
19
+ background-color: ${({$isOn:t,$disabled:e})=>e?t?"rgb(144, 202, 249, 0.2)":"rgb(255, 255, 255, 0.2)":t?"rgb(144, 202, 249, 0.5)":"rgb(255, 255, 255, 0.5)"};
20
+
21
+ &::after {
22
+ position: absolute;
23
+ pointer-events: none;
24
+ transition: all 200ms ease-in-out;
25
+ content: "";
26
+ width: 20px;
27
+ height: 20px;
28
+ border-radius: 50%;
29
+ background-color: ${({$isOn:t,$disabled:e})=>e?t?"rgb(64, 90, 112)":"rgb(117, 117, 117)":t?"rgb(144, 202, 249)":"rgb(224, 224, 224)"};
30
+ transform: ${({$isOn:t})=>t?"translate(17px, -3px)":"translate(-3px, -3px)"};
31
+ }
32
+
33
+ & > input {
34
+ position: absolute;
35
+ height: 20px;
36
+ width: 34px;
37
+ top: -3px;
38
+ opacity: 0;
39
+ cursor: ${({$disabled:t})=>t?"not-allowed":"pointer"};
40
+ }
41
+ `,LeftLabel:l__default.default.span`
42
+ margin-right: 8px;
43
+ ${b};
44
+ ${h};
45
+ `,RightLabel:l__default.default.span`
46
+ margin-left: 8px;
47
+ ${b};
48
+ ${h};
49
+ `};});var u={};c(u,{SwitchLabelLeft:()=>m});var m,g=f(()=>{n();m=o.memo(({leftLabel:t="",disabled:e=false,htmlAttributes:r})=>t?o__default.default.createElement(i.LeftLabel,{...r,$disabled:e,className:x__default.default("switch-label","switch-label__left",e&&"switch-label__left--disabled")},t):null);m.displayName="SwitchLabelLeft";});var S={};c(S,{SwitchLabelRight:()=>w});var w,L=f(()=>{n();w=o.memo(({rightLabel:t="",disabled:e=false,htmlAttributes:r})=>t?o__default.default.createElement(i.RightLabel,{...r,$disabled:e,className:x__default.default("switch-label","switch-label__right",e&&"switch-label__right--disabled")},t):null);w.displayName="SwitchLabelRight";});n();var D=o.lazy(()=>Promise.resolve().then(()=>(g(),u)).then(t=>({default:t.SwitchLabelLeft}))),G=o.lazy(()=>Promise.resolve().then(()=>(L(),S)).then(t=>({default:t.SwitchLabelRight}))),J=o.forwardRef(({value:t=false,leftLabel:e="",rightLabel:r="",htmlAttributes:P,inputHtmlAttributes:C,leftHtmlAttributes:I,rightHtmlAttributes:_,onChange:N,className:k="",disabled:a=false,required:v=false,isStandalone:E=false},R)=>{let{currentValue:s,setCurrentValue:M}=B__default.default(t,E),V=p=>{M(p.target.checked),N?.(p.target.checked,p);};return o__default.default.createElement(i.Container,{...P,className:x__default.default("switch",k)},o__default.default.createElement(o.Suspense,null,!!e&&o__default.default.createElement(D,{htmlAttributes:I,leftLabel:e,disabled:a})),o__default.default.createElement(i.Pad,{$isOn:s,$disabled:a,className:x__default.default("switch-pad",s&&"switch-pad--on",a&&"switch-pad--disabled")},o__default.default.createElement("input",{...C,ref:R,checked:s,onChange:V,disabled:a,type:"checkbox",required:v})),o__default.default.createElement(o.Suspense,null,!!r&&o__default.default.createElement(G,{htmlAttributes:_,rightLabel:r,disabled:a})))});J.displayName="Switch";exports.Switch=J;
package/dist/index.d.cts ADDED
@@ -0,0 +1,34 @@
1
+ import React, { HTMLAttributes, InputHTMLAttributes, ChangeEvent } from 'react';
2
+ import { FieldError } from 'react-hook-form';
3
+ import { IExtendable } from '@purr-core/utils.definitions';
4
+
5
+ interface ISwitchProps {
6
+ value?: boolean;
7
+ leftLabel?: string;
8
+ rightLabel?: string;
9
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
10
+ inputHtmlAttributes?: InputHTMLAttributes<HTMLInputElement> & IExtendable;
11
+ leftHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
12
+ rightHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
13
+ className?: string;
14
+ fullWidth?: boolean;
15
+ disabled?: boolean;
16
+ required?: boolean;
17
+ error?: FieldError;
18
+ isStandalone?: boolean;
19
+ onChange?: (value: boolean, e: ChangeEvent<HTMLInputElement>) => void;
20
+ }
21
+ interface ISwitchLeftLabelProps {
22
+ leftLabel?: string;
23
+ disabled?: boolean;
24
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
25
+ }
26
+ interface ISwitchRightLabelProps {
27
+ rightLabel?: string;
28
+ disabled?: boolean;
29
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
30
+ }
31
+
32
+ declare const Switch: React.ForwardRefExoticComponent<ISwitchProps & React.RefAttributes<HTMLInputElement>>;
33
+
34
+ export { type ISwitchLeftLabelProps, type ISwitchProps, type ISwitchRightLabelProps, Switch };
package/dist/index.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ import React, { HTMLAttributes, InputHTMLAttributes, ChangeEvent } from 'react';
2
+ import { FieldError } from 'react-hook-form';
3
+ import { IExtendable } from '@purr-core/utils.definitions';
4
+
5
+ interface ISwitchProps {
6
+ value?: boolean;
7
+ leftLabel?: string;
8
+ rightLabel?: string;
9
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
10
+ inputHtmlAttributes?: InputHTMLAttributes<HTMLInputElement> & IExtendable;
11
+ leftHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
12
+ rightHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
13
+ className?: string;
14
+ fullWidth?: boolean;
15
+ disabled?: boolean;
16
+ required?: boolean;
17
+ error?: FieldError;
18
+ isStandalone?: boolean;
19
+ onChange?: (value: boolean, e: ChangeEvent<HTMLInputElement>) => void;
20
+ }
21
+ interface ISwitchLeftLabelProps {
22
+ leftLabel?: string;
23
+ disabled?: boolean;
24
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
25
+ }
26
+ interface ISwitchRightLabelProps {
27
+ rightLabel?: string;
28
+ disabled?: boolean;
29
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
30
+ }
31
+
32
+ declare const Switch: React.ForwardRefExoticComponent<ISwitchProps & React.RefAttributes<HTMLInputElement>>;
33
+
34
+ export { type ISwitchLeftLabelProps, type ISwitchProps, type ISwitchRightLabelProps, Switch };
package/dist/index.js ADDED
@@ -0,0 +1,49 @@
1
+ import l,{css}from'styled-components';import x from'clsx';import o,{lazy,forwardRef,Suspense,memo}from'react';import B from'@purr-core/hooks.sync-state-with-props';var z=Object.defineProperty;var f=(t,e)=>()=>(t&&(e=t(t=0)),e);var c=(t,e)=>{for(var r in e)z(t,r,{get:e[r],enumerable:true});};var h,b,i,n=f(()=>{h=({$disabled:t})=>t?css`
2
+ opacity: 0.5;
3
+ cursor: not-allowed;
4
+ `:css`
5
+ opacity: 1;
6
+ `,b=({$disabled:t})=>css`
7
+ color: ${t?"#ffffff80":"#ffffff"};
8
+ font-size: 16px;
9
+ font-family: "Verdana", sans-serif;
10
+ `,i={Container:l.div`
11
+ display: inline-flex;
12
+ align-items: center;
13
+ `,Pad:l.div`
14
+ position: relative;
15
+ transition: all 200ms ease-in-out;
16
+ width: 34px;
17
+ height: 14px;
18
+ border-radius: 7px;
19
+ background-color: ${({$isOn:t,$disabled:e})=>e?t?"rgb(144, 202, 249, 0.2)":"rgb(255, 255, 255, 0.2)":t?"rgb(144, 202, 249, 0.5)":"rgb(255, 255, 255, 0.5)"};
20
+
21
+ &::after {
22
+ position: absolute;
23
+ pointer-events: none;
24
+ transition: all 200ms ease-in-out;
25
+ content: "";
26
+ width: 20px;
27
+ height: 20px;
28
+ border-radius: 50%;
29
+ background-color: ${({$isOn:t,$disabled:e})=>e?t?"rgb(64, 90, 112)":"rgb(117, 117, 117)":t?"rgb(144, 202, 249)":"rgb(224, 224, 224)"};
30
+ transform: ${({$isOn:t})=>t?"translate(17px, -3px)":"translate(-3px, -3px)"};
31
+ }
32
+
33
+ & > input {
34
+ position: absolute;
35
+ height: 20px;
36
+ width: 34px;
37
+ top: -3px;
38
+ opacity: 0;
39
+ cursor: ${({$disabled:t})=>t?"not-allowed":"pointer"};
40
+ }
41
+ `,LeftLabel:l.span`
42
+ margin-right: 8px;
43
+ ${b};
44
+ ${h};
45
+ `,RightLabel:l.span`
46
+ margin-left: 8px;
47
+ ${b};
48
+ ${h};
49
+ `};});var u={};c(u,{SwitchLabelLeft:()=>m});var m,g=f(()=>{n();m=memo(({leftLabel:t="",disabled:e=false,htmlAttributes:r})=>t?o.createElement(i.LeftLabel,{...r,$disabled:e,className:x("switch-label","switch-label__left",e&&"switch-label__left--disabled")},t):null);m.displayName="SwitchLabelLeft";});var S={};c(S,{SwitchLabelRight:()=>w});var w,L=f(()=>{n();w=memo(({rightLabel:t="",disabled:e=false,htmlAttributes:r})=>t?o.createElement(i.RightLabel,{...r,$disabled:e,className:x("switch-label","switch-label__right",e&&"switch-label__right--disabled")},t):null);w.displayName="SwitchLabelRight";});n();var D=lazy(()=>Promise.resolve().then(()=>(g(),u)).then(t=>({default:t.SwitchLabelLeft}))),G=lazy(()=>Promise.resolve().then(()=>(L(),S)).then(t=>({default:t.SwitchLabelRight}))),J=forwardRef(({value:t=false,leftLabel:e="",rightLabel:r="",htmlAttributes:P,inputHtmlAttributes:C,leftHtmlAttributes:I,rightHtmlAttributes:_,onChange:N,className:k="",disabled:a=false,required:v=false,isStandalone:E=false},R)=>{let{currentValue:s,setCurrentValue:M}=B(t,E),V=p=>{M(p.target.checked),N?.(p.target.checked,p);};return o.createElement(i.Container,{...P,className:x("switch",k)},o.createElement(Suspense,null,!!e&&o.createElement(D,{htmlAttributes:I,leftLabel:e,disabled:a})),o.createElement(i.Pad,{$isOn:s,$disabled:a,className:x("switch-pad",s&&"switch-pad--on",a&&"switch-pad--disabled")},o.createElement("input",{...C,ref:R,checked:s,onChange:V,disabled:a,type:"checkbox",required:v})),o.createElement(Suspense,null,!!r&&o.createElement(G,{htmlAttributes:_,rightLabel:r,disabled:a})))});J.displayName="Switch";export{J as Switch};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purr-react-styled-components/components.switch",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -26,8 +26,8 @@
26
26
  "styled-components": "*",
27
27
  "clsx": "*",
28
28
  "react-hook-form": "*",
29
- "@purr-core/utils.definitions": "0.0.11",
30
- "@purr-core/hooks.sync-state-with-props": "0.0.8"
29
+ "@purr-core/utils.definitions": "0.0.12",
30
+ "@purr-core/hooks.sync-state-with-props": "0.0.9"
31
31
  },
32
32
  "author": "@DinhThienPhuc",
33
33
  "license": "ISC",