@purr-react-styled-components/components.switch 0.0.1

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,71 @@
+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

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@purr-react-styled-components/components.switch",
+  "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": "*",
+    "react-hook-form": "*",
+    "@purr-core/utils.definitions": "0.0.4",
+    "@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"
+  }
+}