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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.switch",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -26,8 +26,8 @@
     "styled-components": "*",
     "clsx": "*",
     "react-hook-form": "*",
-    "@purr-core/utils.definitions": "0.0.9",
-    "@purr-core/hooks.sync-state-with-props": "0.0.7"
+    "@purr-core/utils.definitions": "0.0.11",
+    "@purr-core/hooks.sync-state-with-props": "0.0.8"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -36,6 +36,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/_left-label.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ISwitchLeftLabelProps } from '../_types';
-
-export declare const SwitchLabelLeft: React.MemoExoticComponent<({ leftLabel, disabled, htmlAttributes, }: ISwitchLeftLabelProps) => React.JSX.Element | null>;

package/dist/_components/_right-label.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ISwitchRightLabelProps } from '../_types';
-
-export declare const SwitchLabelRight: React.MemoExoticComponent<({ rightLabel, disabled, htmlAttributes, }: ISwitchRightLabelProps) => React.JSX.Element | null>;

package/dist/_components/index.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ISwitchProps } from '../_types';
-
-export declare const Switch: React.ForwardRefExoticComponent<ISwitchProps & React.RefAttributes<HTMLInputElement>>;

package/dist/_left-label-czhdZw61.js

@@ -1,13 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import i from "clsx";
-import { memo as a } from "react";
-import { S as m } from "./index-phcxjttL.js";
-const s = a(({
-  leftLabel: e = "",
-  disabled: l = !1,
-  htmlAttributes: t
-}) => e ? /* @__PURE__ */ r(m.LeftLabel, { ...t, $disabled: l, className: i("switch-label", "switch-label__left", l && "switch-label__left--disabled"), children: e }) : null);
-s.displayName = "SwitchLabelLeft";
-export {
-  s as SwitchLabelLeft
-};

package/dist/_left-label-e5Y000QP.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("clsx"),c=require("react"),a=require("./index-CQvAkNbD.cjs"),l=c.memo(({leftLabel:e="",disabled:t=!1,htmlAttributes:i})=>e?r.jsx(a.Styled.LeftLabel,{...i,$disabled:t,className:s("switch-label","switch-label__left",t&&"switch-label__left--disabled"),children:e}):null);l.displayName="SwitchLabelLeft";exports.SwitchLabelLeft=l;

package/dist/_right-label-C447B9ho.js

@@ -1,13 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import r from "clsx";
-import { memo as a } from "react";
-import { S as m } from "./index-phcxjttL.js";
-const s = a(({
-  rightLabel: t = "",
-  disabled: i = !1,
-  htmlAttributes: l
-}) => t ? /* @__PURE__ */ e(m.RightLabel, { ...l, $disabled: i, className: r("switch-label", "switch-label__right", i && "switch-label__right--disabled"), children: t }) : null);
-s.displayName = "SwitchLabelRight";
-export {
-  s as SwitchLabelRight
-};

package/dist/_right-label-C8otwS0i.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("clsx"),c=require("react"),a=require("./index-CQvAkNbD.cjs"),i=c.memo(({rightLabel:e="",disabled:t=!1,htmlAttributes:l})=>e?r.jsx(a.Styled.RightLabel,{...l,$disabled:t,className:s("switch-label","switch-label__right",t&&"switch-label__right--disabled"),children:e}):null);i.displayName="SwitchLabelRight";exports.SwitchLabelRight=i;

package/dist/_style.d.ts

@@ -1,13 +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;
-    Pad: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $isOn: boolean;
-        $disabled: boolean;
-    }>> & string;
-    LeftLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-        $disabled: boolean;
-    }>> & string;
-    RightLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-        $disabled: boolean;
-    }>> & string;
-};

package/dist/_types.d.ts

@@ -1,30 +0,0 @@
-import { ChangeEvent, HTMLAttributes, InputHTMLAttributes } from 'react';
-import { FieldError } from 'react-hook-form';
-import { IExtendable } from '@purr-core/utils.definitions';
-
-export interface ISwitchProps {
-    value?: boolean;
-    leftLabel?: string;
-    rightLabel?: string;
-    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
-    inputHtmlAttributes?: InputHTMLAttributes<HTMLInputElement> & IExtendable;
-    leftHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
-    rightHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
-    className?: string;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    error?: FieldError;
-    isStandalone?: boolean;
-    onChange?: (value: boolean, e: ChangeEvent<HTMLInputElement>) => void;
-}
-export interface ISwitchLeftLabelProps {
-    leftLabel?: string;
-    disabled?: boolean;
-    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
-}
-export interface ISwitchRightLabelProps {
-    rightLabel?: string;
-    disabled?: boolean;
-    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
-}

package/dist/index-CQvAkNbD.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),f=require("clsx"),n=require("react"),j=require("@purr-core/hooks.sync-state-with-props"),r=require("styled-components"),p=({$disabled:t})=>t?r.css(["opacity:0.5;cursor:not-allowed;"]):r.css(["opacity:1;"]),d=({$disabled:t})=>r.css(["color:",';font-size:16px;font-family:"Verdana",sans-serif;'],t?"#ffffff80":"#ffffff"),l={Container:r.div.withConfig({displayName:"_style__Container",componentId:"sc-1bz7btz-0"})(["display:inline-flex;align-items:center;"]),Pad:r.div.withConfig({displayName:"_style__Pad",componentId:"sc-1bz7btz-1"})(["position:relative;transition:all 200ms ease-in-out;width:34px;height:14px;border-radius:7px;background-color:",';&::after{position:absolute;pointer-events:none;transition:all 200ms ease-in-out;content:"";width:20px;height:20px;border-radius:50%;background-color:',";transform:",";}& > input{position:absolute;height:20px;width:34px;top:-3px;opacity:0;cursor:",";}"],({$isOn:t,$disabled:i})=>i?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)",({$isOn:t,$disabled:i})=>i?t?"rgb(64, 90, 112)":"rgb(117, 117, 117)":t?"rgb(144, 202, 249)":"rgb(224, 224, 224)",({$isOn:t})=>t?"translate(17px, -3px)":"translate(-3px, -3px)",({$disabled:t})=>t?"not-allowed":"pointer"),LeftLabel:r.span.withConfig({displayName:"_style__LeftLabel",componentId:"sc-1bz7btz-2"})(["margin-right:8px;",";",";"],d,p),RightLabel:r.span.withConfig({displayName:"_style__RightLabel",componentId:"sc-1bz7btz-3"})(["margin-left:8px;",";",";"],d,p)},q=n.lazy(()=>Promise.resolve().then(()=>require("./_left-label-e5Y000QP.cjs")).then(t=>({default:t.SwitchLabelLeft}))),N=n.lazy(()=>Promise.resolve().then(()=>require("./_right-label-C8otwS0i.cjs")).then(t=>({default:t.SwitchLabelRight}))),h=n.forwardRef(({value:t=!1,leftLabel:i="",rightLabel:u="",htmlAttributes:b,inputHtmlAttributes:x,leftHtmlAttributes:g,rightHtmlAttributes:m,onChange:a,className:y="",disabled:s=!1,required:w=!1,isStandalone:S=!1},L)=>{const{currentValue:o,setCurrentValue:_}=j(t,S),z=c=>{_(c.target.checked),a==null||a(c.target.checked,c)};return e.jsxs(l.Container,{...b,className:f("switch",y),children:[e.jsx(n.Suspense,{children:!!i&&e.jsx(q,{htmlAttributes:g,leftLabel:i,disabled:s})}),e.jsx(l.Pad,{$isOn:o,$disabled:s,className:f("switch-pad",o&&"switch-pad--on",s&&"switch-pad--disabled"),children:e.jsx("input",{...x,ref:L,checked:o,onChange:z,disabled:s,type:"checkbox",required:w})}),e.jsx(n.Suspense,{children:!!u&&e.jsx(N,{htmlAttributes:m,rightLabel:u,disabled:s})})]})});h.displayName="Switch";exports.Styled=l;exports.Switch=h;

package/dist/index-phcxjttL.js

@@ -1,71 +0,0 @@
-import { jsxs as k, jsx as r } from "react/jsx-runtime";
-import p from "clsx";
-import { lazy as m, forwardRef as C, Suspense as f } from "react";
-import R from "@purr-core/hooks.sync-state-with-props";
-import n, { css as l } from "styled-components";
-const d = ({
-  $disabled: t
-}) => t ? l(["opacity:0.5;cursor:not-allowed;"]) : l(["opacity:1;"]), h = ({
-  $disabled: t
-}) => l(["color:", ';font-size:16px;font-family:"Verdana",sans-serif;'], t ? "#ffffff80" : "#ffffff"), u = {
-  Container: n.div.withConfig({
-    displayName: "_style__Container",
-    componentId: "sc-1bz7btz-0"
-  })(["display:inline-flex;align-items:center;"]),
-  Pad: n.div.withConfig({
-    displayName: "_style__Pad",
-    componentId: "sc-1bz7btz-1"
-  })(["position:relative;transition:all 200ms ease-in-out;width:34px;height:14px;border-radius:7px;background-color:", ';&::after{position:absolute;pointer-events:none;transition:all 200ms ease-in-out;content:"";width:20px;height:20px;border-radius:50%;background-color:', ";transform:", ";}& > input{position:absolute;height:20px;width:34px;top:-3px;opacity:0;cursor:", ";}"], ({
-    $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)", ({
-    $isOn: t,
-    $disabled: e
-  }) => e ? t ? "rgb(64, 90, 112)" : "rgb(117, 117, 117)" : t ? "rgb(144, 202, 249)" : "rgb(224, 224, 224)", ({
-    $isOn: t
-  }) => t ? "translate(17px, -3px)" : "translate(-3px, -3px)", ({
-    $disabled: t
-  }) => t ? "not-allowed" : "pointer"),
-  LeftLabel: n.span.withConfig({
-    displayName: "_style__LeftLabel",
-    componentId: "sc-1bz7btz-2"
-  })(["margin-right:8px;", ";", ";"], h, d),
-  RightLabel: n.span.withConfig({
-    displayName: "_style__RightLabel",
-    componentId: "sc-1bz7btz-3"
-  })(["margin-left:8px;", ";", ";"], h, d)
-}, v = m(() => import("./_left-label-czhdZw61.js").then((t) => ({
-  default: t.SwitchLabelLeft
-}))), I = m(() => import("./_right-label-C447B9ho.js").then((t) => ({
-  default: t.SwitchLabelRight
-}))), P = C(({
-  value: t = !1,
-  leftLabel: e = "",
-  rightLabel: c = "",
-  htmlAttributes: b,
-  inputHtmlAttributes: g,
-  leftHtmlAttributes: y,
-  rightHtmlAttributes: x,
-  onChange: a,
-  className: w = "",
-  disabled: i = !1,
-  required: L = !1,
-  isStandalone: S = !1
-}, _) => {
-  const {
-    currentValue: o,
-    setCurrentValue: z
-  } = R(t, S), N = (s) => {
-    z(s.target.checked), a == null || a(s.target.checked, s);
-  };
-  return /* @__PURE__ */ k(u.Container, { ...b, className: p("switch", w), children: [
-    /* @__PURE__ */ r(f, { children: !!e && /* @__PURE__ */ r(v, { htmlAttributes: y, leftLabel: e, disabled: i }) }),
-    /* @__PURE__ */ r(u.Pad, { $isOn: o, $disabled: i, className: p("switch-pad", o && "switch-pad--on", i && "switch-pad--disabled"), children: /* @__PURE__ */ r("input", { ...g, ref: _, checked: o, onChange: N, disabled: i, type: "checkbox", required: L }) }),
-    /* @__PURE__ */ r(f, { children: !!c && /* @__PURE__ */ r(I, { htmlAttributes: x, rightLabel: c, disabled: i }) })
-  ] });
-});
-P.displayName = "Switch";
-export {
-  u as S,
-  P as a
-};

package/dist/index.cjs

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,4 +0,0 @@
-import { a as r } from "./index-phcxjttL.js";
-export {
-  r as Switch
-};