@purr-react-tailwindcss/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-K_1UpPNK.js

@@ -0,0 +1,27 @@
+import { jsx as a } from "react/jsx-runtime";
+import i from "clsx";
+import { memo as o } from "react";
+const r = o(
+  ({
+    leftLabel: t = "",
+    disabled: e = !1,
+    htmlAttributes: l
+  }) => t ? /* @__PURE__ */ a(
+    "span",
+    {
+      className: i(
+        "mr-2 font-sans text-base",
+        e ? "cursor-not-allowed text-white/50 opacity-50" : "text-white opacity-100",
+        "switch-label",
+        "switch-label__left",
+        e && "switch-label__left--disabled"
+      ),
+      ...l,
+      children: t
+    }
+  ) : null
+);
+r.displayName = "SwitchLabelLeft";
+export {
+  r as SwitchLabelLeft
+};

package/dist/_left-label-ciTiWzfK.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("clsx"),c=require("react"),l=c.memo(({leftLabel:e="",disabled:t=!1,htmlAttributes:s})=>e?i.jsx("span",{className:a("mr-2 font-sans text-base",t?"cursor-not-allowed text-white/50 opacity-50":"text-white opacity-100","switch-label","switch-label__left",t&&"switch-label__left--disabled"),...s,children:e}):null);l.displayName="SwitchLabelLeft";exports.SwitchLabelLeft=l;

package/dist/_right-label-32-rH0iQ.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("clsx"),c=require("react"),i=c.memo(({rightLabel:t="",disabled:e=!1,htmlAttributes:l})=>t?s.jsx("span",{className:a("ml-2 font-sans text-base",e?"cursor-not-allowed text-white/50 opacity-50":"text-white opacity-100","switch-label","switch-label__right",e&&"switch-label__right--disabled"),...l,children:t}):null);i.displayName="SwitchLabelRight";exports.SwitchLabelRight=i;

package/dist/_right-label-7YaXOwpz.js

@@ -0,0 +1,27 @@
+import { jsx as l } from "react/jsx-runtime";
+import a from "clsx";
+import { memo as o } from "react";
+const r = o(
+  ({
+    rightLabel: t = "",
+    disabled: e = !1,
+    htmlAttributes: i
+  }) => t ? /* @__PURE__ */ l(
+    "span",
+    {
+      className: a(
+        "ml-2 font-sans text-base",
+        e ? "cursor-not-allowed text-white/50 opacity-50" : "text-white opacity-100",
+        "switch-label",
+        "switch-label__right",
+        e && "switch-label__right--disabled"
+      ),
+      ...i,
+      children: t
+    }
+  ) : null
+);
+r.displayName = "SwitchLabelRight";
+export {
+  r as SwitchLabelRight
+};

package/dist/_types.d.ts

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

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("clsx"),s=require("react"),b=require("@purr-core/hooks.sync-state-with-props"),m=s.lazy(()=>Promise.resolve().then(()=>require("./_left-label-ciTiWzfK.cjs")).then(a=>({default:a.SwitchLabelLeft}))),j=s.lazy(()=>Promise.resolve().then(()=>require("./_right-label-32-rH0iQ.cjs")).then(a=>({default:a.SwitchLabelRight}))),u=s.forwardRef(({value:a=!1,leftLabel:n="",rightLabel:l="",htmlAttributes:h,inputHtmlAttributes:f,leftLabelHtmlAttributes:w,rightLabelHtmlAttributes:p,onChange:c,disabled:e=!1,required:g=!1,isStandalone:x=!1},S)=>{const{currentValue:t,setCurrentValue:d}=b(a,x),y=i=>{d(i.target.checked),c==null||c(i.target.checked,i)};return r.jsxs("div",{className:"switch inline-flex items-center",...h,children:[r.jsx(s.Suspense,{children:!!n&&r.jsx(m,{htmlAttributes:w,leftLabel:n,disabled:e})}),r.jsx("div",{className:o("relative h-3 w-8 rounded-lg transition-all duration-200 ease-in-out after:pointer-events-none after:absolute after:-left-1 after:-top-1 after:h-5 after:w-5 after:rounded-full after:transition-all after:duration-200 after:ease-in-out",e&&t&&"bg-sky-400/20 after:bg-slate-700",e&&!t&&"bg-white/20 after:bg-gray-500",!e&&t&&"bg-sky-400/50 after:bg-blue-300",!e&&!t&&"bg-white/50 after:bg-gray-200",t?"after:translate-x-5":"after:translate-x-0","switch-pad",t&&"switch-pad--on",e&&"switch-pad--disabled"),children:r.jsx("input",{ref:S,checked:t,onChange:y,disabled:e,type:"checkbox",required:g,className:o("absolute left-0 top-0 h-3 w-8 opacity-0",e?"cursor-not-allowed":"cursor-pointer"),...f})}),r.jsx(s.Suspense,{children:!!l&&r.jsx(j,{htmlAttributes:p,rightLabel:l,disabled:e})})]})});u.displayName="Switch";exports.Switch=u;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,88 @@
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
+import l from "clsx";
+import { lazy as f, forwardRef as x, Suspense as n } from "react";
+import k from "@purr-core/hooks.sync-state-with-props";
+const v = f(
+  () => import("./_left-label-K_1UpPNK.js").then((a) => ({
+    default: a.SwitchLabelLeft
+  }))
+), L = f(
+  () => import("./_right-label-7YaXOwpz.js").then((a) => ({
+    default: a.SwitchLabelRight
+  }))
+), N = x(
+  ({
+    value: a = !1,
+    leftLabel: c = "",
+    rightLabel: o = "",
+    htmlAttributes: h,
+    inputHtmlAttributes: u,
+    leftLabelHtmlAttributes: p,
+    rightLabelHtmlAttributes: m,
+    onChange: s,
+    disabled: t = !1,
+    required: w = !1,
+    isStandalone: g = !1
+  }, d) => {
+    const { currentValue: e, setCurrentValue: b } = k(
+      a,
+      g
+    ), y = (i) => {
+      b(i.target.checked), s == null || s(i.target.checked, i);
+    };
+    return /* @__PURE__ */ S("div", { className: "switch inline-flex items-center", ...h, children: [
+      /* @__PURE__ */ r(n, { children: !!c && /* @__PURE__ */ r(
+        v,
+        {
+          htmlAttributes: p,
+          leftLabel: c,
+          disabled: t
+        }
+      ) }),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: l(
+            "relative h-3 w-8 rounded-lg transition-all duration-200 ease-in-out after:pointer-events-none after:absolute after:-left-1 after:-top-1 after:h-5 after:w-5 after:rounded-full after:transition-all after:duration-200 after:ease-in-out",
+            t && e && "bg-sky-400/20 after:bg-slate-700",
+            t && !e && "bg-white/20 after:bg-gray-500",
+            !t && e && "bg-sky-400/50 after:bg-blue-300",
+            !t && !e && "bg-white/50 after:bg-gray-200",
+            e ? "after:translate-x-5" : "after:translate-x-0",
+            "switch-pad",
+            e && "switch-pad--on",
+            t && "switch-pad--disabled"
+          ),
+          children: /* @__PURE__ */ r(
+            "input",
+            {
+              ref: d,
+              checked: e,
+              onChange: y,
+              disabled: t,
+              type: "checkbox",
+              required: w,
+              className: l(
+                "absolute left-0 top-0 h-3 w-8 opacity-0",
+                t ? "cursor-not-allowed" : "cursor-pointer"
+              ),
+              ...u
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ r(n, { children: !!o && /* @__PURE__ */ r(
+        L,
+        {
+          htmlAttributes: m,
+          rightLabel: o,
+          disabled: t
+        }
+      ) })
+    ] });
+  }
+);
+N.displayName = "Switch";
+export {
+  N as Switch
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@purr-react-tailwindcss/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": "*",
+    "clsx": "*",
+    "react-hook-form": "*",
+    "@purr-core/utils.definitions": "0.0.6",
+    "@purr-core/hooks.sync-state-with-props": "0.0.4"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}