@devup-ui/components 0.1.15 → 0.1.17

package/dist/components/Radio/Radio.stories.d.ts

@@ -7,20 +7,6 @@ export default _default;
 export declare const Default: {
     args: {
         checked: undefined;
-        colors: {
-            primary: string;
-            border: string;
-            text: string;
-            bg: string;
-            hoverBg: string;
-            hoverBorder: string;
-            hoverColor: string;
-            checkedBg: string;
-            checkedBorder: string;
-            checkedColor: string;
-            disabledBg: string;
-            disabledColor: string;
-        };
         name: string;
         children: string;
         variant: string;

package/dist/components/Radio/Radio.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,CAAA;;;;;AAEzB,wBAGC;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;CAqBnB,CAAA"}
+{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,CAAA;;;;;AAEzB,wBAGC;AAED,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAA"}

package/dist/components/Radio/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("@devup-ui/react");function x({className:t,disabled:d,children:h,variant:g="default",checked:v,classNames:b,styles:u,style:n,firstButton:B,lastButton:k,colors:e,...p}){const a=g==="button";return i.jsxs(r.Box,{alignItems:a?void 0:"center","aria-disabled":d,as:"label",cursor:a?void 0:"pointer",display:a?void 0:"inline-flex",gap:a?void 0:2,selectors:{"&[aria-disabled=true]":{cursor:"default"}},children:[a?i.jsx(r.Input,{checked:v,className:t,"data-radio-input":!0,disabled:d,display:"none",opacity:0,styleOrder:1,type:"radio",...p}):i.jsx(r.Input,{_focus:{outline:"1px sold var(--border, var(--primary))"},appearance:"none",bg:"light-dark(#fff, #2E2E2E)",border:"1px solid",borderColor:"$border",borderRadius:"100%",checked:v,className:t,"data-radio-input":!0,disabled:d,height:"18px",m:0,selectors:{"&:checked:not(:disabled)":{bg:"var(--checkedBg, var(--primary, light-dark(#fff, #2E2E2E)))",border:"3px solid",borderColor:"var(--checkedBg, light-dark(#fff, #2E2E2E))",boxShadow:"0 0 0 1px var(--checkedBorder, var(--primary))"},"&:hover:not(:disabled,:checked)":{border:"1px solid var(--hoverBorder, var(--primary))",bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))"},"&:is(:disabled, [aria-disabled=true])":{bgColor:"var(--disabledBg, light-dark(#F0F0F3, #47474A))"}},styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,text:e==null?void 0:e.text,bg:e==null?void 0:e.bg,hoverBg:e==null?void 0:e.hoverBg,hoverBorder:e==null?void 0:e.hoverBorder,hoverColor:e==null?void 0:e.hoverColor,checkedBg:e==null?void 0:e.checkedBg,checkedBorder:e==null?void 0:e.checkedBorder,checkedColor:e==null?void 0:e.checkedColor,disabledBg:e==null?void 0:e.disabledBg,disabledColor:e==null?void 0:e.disabledColor},transition:".25s",type:"radio",width:"18px",...p}),g==="button"?i.jsx(r.Box,{_disabled:{cursor:"not-allowed"},"aria-disabled":d,bg:"var(--bg, light-dark(#fff, #2E2E2E))",border:"1px solid",borderColor:"$border",borderRadius:B?"6px 0 0 6px":k?"0 6px 6px 0":void 0,className:t,color:"var(--text, light-dark(#000, #fff))",cursor:"pointer","data-radio-button":!0,display:"flex",px:8,py:4,selectors:{"[data-radio-input]:checked + &:not([aria-disabled=true])":{fontWeight:600,bg:"var(--checkedBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 80%), color-mix(in srgb, var(--primary) 10%, black 80%)))",borderColor:"var(--checkedBorder, var(--primary))",color:"var(--checkedColor, var(--primary))"},"&:hover:not([aria-disabled=true])":{bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))",borderColor:"var(--hoverBorder, var(--primary))"},"[data-radio-input]:disabled + &":{bg:"var(--disabledBg, light-dark(#F0F0F3, #47474A))",color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:n,styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,text:e==null?void 0:e.text,bg:e==null?void 0:e.bg,hoverBg:e==null?void 0:e.hoverBg,hoverBorder:e==null?void 0:e.hoverBorder,hoverColor:e==null?void 0:e.hoverColor,checkedBg:e==null?void 0:e.checkedBg,checkedBorder:e==null?void 0:e.checkedBorder,checkedColor:e==null?void 0:e.checkedColor,disabledBg:e==null?void 0:e.disabledBg,disabledColor:e==null?void 0:e.disabledColor},transition:"background-color 0.25s, border-color 0.25s",w:"fit-content",children:h}):i.jsx(r.Text,{"aria-disabled":d,className:b==null?void 0:b.label,color:"var(--text, light-dark(#000, #fff))",selectors:{"&[aria-disabled=true]":{color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:n,styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,text:e==null?void 0:e.text,bg:e==null?void 0:e.bg,hoverBg:e==null?void 0:e.hoverBg,hoverBorder:e==null?void 0:e.hoverBorder,hoverColor:e==null?void 0:e.hoverColor,checkedBg:e==null?void 0:e.checkedBg,checkedBorder:e==null?void 0:e.checkedBorder,checkedColor:e==null?void 0:e.checkedColor,disabledBg:e==null?void 0:e.disabledBg,disabledColor:e==null?void 0:e.disabledColor},children:h})]})}exports.Radio=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("@devup-ui/react");function x({className:t,disabled:d,children:h,variant:g="default",checked:v,classNames:b,styles:u,style:n,firstButton:B,lastButton:k,colors:e,...p}){const a=g==="button";return i.jsxs(r.Box,{alignItems:a?void 0:"center","aria-disabled":d,as:"label",cursor:a?void 0:"pointer",display:a?void 0:"inline-flex",gap:a?void 0:2,selectors:{"&[aria-disabled=true]":{cursor:"default"}},children:[a?i.jsx(r.Input,{checked:v,className:t,"data-radio-input":!0,disabled:d,display:"none",opacity:0,styleOrder:1,type:"radio",...p}):i.jsx(r.Input,{_focus:{outline:"1px sold var(--border, var(--primary))"},appearance:"none",bg:"light-dark(#fff, #2E2E2E)",border:"1px solid",borderColor:"$border",borderRadius:"100%",checked:v,className:t,"data-radio-input":!0,disabled:d,height:"18px",m:0,selectors:{"&:checked:not(:disabled)":{bg:"var(--checkedBg, var(--primary, light-dark(#fff, #2E2E2E)))",border:"3px solid",borderColor:"var(--checkedBg, light-dark(#fff, #2E2E2E))",boxShadow:"0 0 0 1px var(--checkedBorder, var(--primary))"},"&:hover:not(:disabled,:checked)":{border:"1px solid var(--hoverBorder, var(--primary))",bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))"},"&:is(:disabled, [aria-disabled=true])":{bgColor:"var(--disabledBg, light-dark(#F0F0F3, #47474A))"}},styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,text:e==null?void 0:e.text,bg:e==null?void 0:e.bg,hoverBg:e==null?void 0:e.hoverBg,hoverBorder:e==null?void 0:e.hoverBorder,hoverColor:e==null?void 0:e.hoverColor,checkedBg:e==null?void 0:e.checkedBg,checkedBorder:e==null?void 0:e.checkedBorder,checkedColor:e==null?void 0:e.checkedColor,disabledBg:e==null?void 0:e.disabledBg,disabledColor:e==null?void 0:e.disabledColor},transition:".25s",type:"radio",width:"18px",...p}),g==="button"?i.jsx(r.Box,{_disabled:{cursor:"not-allowed"},"aria-disabled":d,bg:"var(--bg, light-dark(#fff, #2E2E2E))",border:"1px solid",borderColor:"$border",borderRadius:B?"8px 0 0 8px":k?"0 8px 8px 0":void 0,className:t,color:"var(--text, light-dark(#000, #fff))",cursor:"pointer","data-radio-button":!0,display:"flex",px:8,py:3,selectors:{"[data-radio-input]:checked + &:not([aria-disabled=true])":{fontWeight:600,bg:"var(--checkedBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 80%), color-mix(in srgb, var(--primary) 10%, black 80%)))",borderColor:"var(--checkedBorder, var(--primary))",color:"var(--checkedColor, var(--primary))"},"&:hover:not([aria-disabled=true])":{bg:"var(--hoverBg, light-dark(color-mix(in srgb, var(--primary) 10%, white 90%), color-mix(in srgb, var(--primary) 10%, black 90%)))",borderColor:"var(--hoverBorder, var(--primary))"},"[data-radio-input]:disabled + &":{bg:"var(--disabledBg, light-dark(#F0F0F3, #47474A))",color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:n,styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,text:e==null?void 0:e.text,bg:e==null?void 0:e.bg,hoverBg:e==null?void 0:e.hoverBg,hoverBorder:e==null?void 0:e.hoverBorder,hoverColor:e==null?void 0:e.hoverColor,checkedBg:e==null?void 0:e.checkedBg,checkedBorder:e==null?void 0:e.checkedBorder,checkedColor:e==null?void 0:e.checkedColor,disabledBg:e==null?void 0:e.disabledBg,disabledColor:e==null?void 0:e.disabledColor},transition:"background-color 0.25s, border-color 0.25s",w:"fit-content",children:h}):i.jsx(r.Text,{"aria-disabled":d,className:b==null?void 0:b.label,color:"var(--text, light-dark(#000, #fff))",selectors:{"&[aria-disabled=true]":{color:"var(--disabledColor, light-dark(#D6D7DE, #373737))"}},style:n,styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,border:e==null?void 0:e.border,text:e==null?void 0:e.text,bg:e==null?void 0:e.bg,hoverBg:e==null?void 0:e.hoverBg,hoverBorder:e==null?void 0:e.hoverBorder,hoverColor:e==null?void 0:e.hoverColor,checkedBg:e==null?void 0:e.checkedBg,checkedBorder:e==null?void 0:e.checkedBorder,checkedColor:e==null?void 0:e.checkedColor,disabledBg:e==null?void 0:e.disabledBg,disabledColor:e==null?void 0:e.disabledColor},children:h})]})}exports.Radio=x;

package/dist/components/Radio/index.js

@@ -109,14 +109,14 @@ function E({
             bg: "var(--bg, light-dark(#fff, #2E2E2E))",
             border: "1px solid",
             borderColor: "$border",
-            borderRadius: B ? "6px 0 0 6px" : x ? "0 6px 6px 0" : void 0,
+            borderRadius: B ? "8px 0 0 8px" : x ? "0 8px 8px 0" : void 0,
             className: r,
             color: "var(--text, light-dark(#000, #fff))",
             cursor: "pointer",
             "data-radio-button": !0,
             display: "flex",
             px: 8,
-            py: 4,
+            py: 3,
             selectors: {
               // checked
               "[data-radio-input]:checked + &:not([aria-disabled=true])": {

package/dist/components/RadioGroup/RadioGroup.stories.d.ts

@@ -8,20 +8,6 @@ export declare const Default: {
     args: {
         disabled: boolean;
         name: string;
-        colors: {
-            primary: string;
-            border: string;
-            text: string;
-            bg: string;
-            hoverBg: string;
-            hoverBorder: string;
-            hoverColor: string;
-            checkedBg: string;
-            checkedBorder: string;
-            checkedColor: string;
-            disabledBg: string;
-            disabledColor: string;
-        };
         options: {
             value: string;
             label: string;

package/dist/components/RadioGroup/RadioGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;;;;;AAEpC,wBAGC;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CAmCnB,CAAA"}
+{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;;;;;AAEpC,wBAGC;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;CAqBnB,CAAA"}

package/dist/components/Toggle/Toggle.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Toggle } from './index';
+type Story = StoryObj<typeof meta>;
+declare const meta: Meta<typeof Toggle>;
+export declare const Default: Story;
+export default meta;
+//# sourceMappingURL=Toggle.stories.d.ts.map

package/dist/components/Toggle/Toggle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Toggle/index.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("@devup-ui/react"),l=require("react");function H({defaultValue:x=null,value:d=null,onChange:a,disabled:u,className:b,style:v,variant:h="default",colors:r,classNames:n,styles:g}){const[m,y]=l.useState(d??x??!1),i=d??m;function f(w){a==null||a(!w),y(B=>!B)}const e=h==="default";return t.jsxs(t.Fragment,{children:[t.jsx(p.Box,{"aria-disabled":u,bg:i?"var(--primary)":"var(--bg, light-dark(#E4E4E4, #383838))",borderRadius:"500px",boxSizing:"border-box",className:b,cursor:"pointer",h:e?"28px":"8px",justifyContent:i&&"flex-end",onClick:()=>!u&&f(i),p:!e&&1,position:"relative",role:"group",selectors:{"&[aria-disabled=true]":{cursor:"not-allowed",bg:"var(--disabledBg, light-dark(#D6D7DE, #373737))"},"&:hover:not([aria-disabled=true]):not(:disabled)":{bg:i?"var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))":"var(--hoverBg, light-dark(#C3C2C8, #696A6F))"}},style:v,styleVars:{primary:r==null?void 0:r.primary,bg:r==null?void 0:r.bg,primaryHoverBg:r==null?void 0:r.primaryHoverBg,hoverBg:r==null?void 0:r.hoverBg,disabledBg:r==null?void 0:r.disabledBg},"test-id":"toggle-wrapper",transition:".25s",w:e?"50px":"40px",children:t.jsx(p.Box,{_groupHover:!e&&{outline:"4px solid",outlineColor:"var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))"},backgroundColor:"#fff",borderRadius:"100%",boxSize:"20px",className:n==null?void 0:n.toggle,filter:!e&&"drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",outline:"4px",pos:"absolute",style:g==null?void 0:g.toggle,styleVars:{primary:r==null?void 0:r.primary,primaryHoverBg:r==null?void 0:r.primaryHoverBg,switchShadow:r==null?void 0:r.switchShadow,switchHoverOutline:r==null?void 0:r.switchHoverOutline},top:!e&&"-6px",transform:i&&"translateX(calc(100% + 2px))",transition:e?".25s":"transform .25s"})}),t.jsx(p.Input,{type:"hidden",value:String(i)})]})}exports.Toggle=H;

package/dist/components/Toggle/index.d.ts

@@ -0,0 +1,27 @@
+interface ToggleProps {
+    defaultValue?: boolean | null;
+    value?: boolean | null;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    variant?: 'default' | 'switch';
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: {
+        toggle?: string;
+    };
+    styles?: {
+        toggle?: React.CSSProperties;
+    };
+    colors?: {
+        primary?: string;
+        bg?: string;
+        hoverBg?: string;
+        primaryHoverBg?: string;
+        disabledBg?: string;
+        switchHoverOutline?: string;
+        switchShadow?: string;
+    };
+}
+export declare function Toggle({ defaultValue, value, onChange, disabled, className, style, variant, colors, classNames, styles, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":"AAIA,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAC7B,CAAA;IACD,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;CACF;AAED,wBAAgB,MAAM,CAAC,EACrB,YAAmB,EACnB,KAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,MAAM,EACN,UAAU,EACV,MAAM,GACP,EAAE,WAAW,2CAwFb"}

package/dist/components/Toggle/index.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsxs as H, Fragment as k, jsx as p } from "react/jsx-runtime";
+import { Box as u, Input as l } from "@devup-ui/react";
+import { useState as S } from "react";
+function E({
+  defaultValue: b = null,
+  value: d = null,
+  onChange: a,
+  disabled: g,
+  className: v,
+  style: x,
+  variant: m = "default",
+  colors: r,
+  classNames: e,
+  styles: n
+}) {
+  const [h, f] = S(
+    d ?? b ?? !1
+  ), t = d ?? h;
+  function y(w) {
+    a == null || a(!w), f((B) => !B);
+  }
+  const i = m === "default";
+  return /* @__PURE__ */ H(k, { children: [
+    /* @__PURE__ */ p(
+      u,
+      {
+        "aria-disabled": g,
+        bg: t ? "var(--primary)" : "var(--bg, light-dark(#E4E4E4, #383838))",
+        borderRadius: "500px",
+        boxSizing: "border-box",
+        className: v,
+        cursor: "pointer",
+        h: i ? "28px" : "8px",
+        justifyContent: t && "flex-end",
+        onClick: () => !g && y(t),
+        p: !i && 1,
+        position: "relative",
+        role: "group",
+        selectors: {
+          "&[aria-disabled=true]": {
+            cursor: "not-allowed",
+            bg: "var(--disabledBg, light-dark(#D6D7DE, #373737))"
+          },
+          "&:hover:not([aria-disabled=true]):not(:disabled)": {
+            bg: t ? "var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))" : "var(--hoverBg, light-dark(#C3C2C8, #696A6F))"
+          }
+        },
+        style: x,
+        styleVars: {
+          primary: r == null ? void 0 : r.primary,
+          bg: r == null ? void 0 : r.bg,
+          primaryHoverBg: r == null ? void 0 : r.primaryHoverBg,
+          hoverBg: r == null ? void 0 : r.hoverBg,
+          disabledBg: r == null ? void 0 : r.disabledBg
+        },
+        "test-id": "toggle-wrapper",
+        transition: ".25s",
+        w: i ? "50px" : "40px",
+        children: /* @__PURE__ */ p(
+          u,
+          {
+            _groupHover: !i && {
+              outline: "4px solid",
+              outlineColor: "var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))"
+            },
+            backgroundColor: "#fff",
+            borderRadius: "100%",
+            boxSize: "20px",
+            className: e == null ? void 0 : e.toggle,
+            filter: !i && "drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",
+            outline: "4px",
+            pos: "absolute",
+            style: n == null ? void 0 : n.toggle,
+            styleVars: {
+              primary: r == null ? void 0 : r.primary,
+              primaryHoverBg: r == null ? void 0 : r.primaryHoverBg,
+              switchShadow: r == null ? void 0 : r.switchShadow,
+              switchHoverOutline: r == null ? void 0 : r.switchHoverOutline
+            },
+            top: !i && "-6px",
+            transform: t && "translateX(calc(100% + 2px))",
+            transition: i ? ".25s" : "transform .25s"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ p(l, { type: "hidden", value: String(t) })
+  ] });
+}
+export {
+  E as Toggle
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),p=require("./components/Input/index.cjs"),i=require("./components/Radio/index.cjs"),o=require("./components/RadioGroup/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Input=p.Input;exports.Radio=i.Radio;exports.RadioGroup=o.RadioGroup;exports.Select=t.Select;exports.SelectContainer=t.SelectContainer;exports.SelectDivider=t.SelectDivider;exports.SelectOption=t.SelectOption;exports.SelectTrigger=t.SelectTrigger;exports.Stepper=e.Stepper;exports.StepperContainer=e.StepperContainer;exports.StepperDecreaseButton=e.StepperDecreaseButton;exports.StepperIncreaseButton=e.StepperIncreaseButton;exports.StepperInput=e.StepperInput;exports.useStepper=e.useStepper;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),i=require("./components/Input/index.cjs"),o=require("./components/Radio/index.cjs"),p=require("./components/RadioGroup/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),c=require("./components/Toggle/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Input=i.Input;exports.Radio=o.Radio;exports.RadioGroup=p.RadioGroup;exports.Select=t.Select;exports.SelectContainer=t.SelectContainer;exports.SelectDivider=t.SelectDivider;exports.SelectOption=t.SelectOption;exports.SelectTrigger=t.SelectTrigger;exports.Stepper=e.Stepper;exports.StepperContainer=e.StepperContainer;exports.StepperDecreaseButton=e.StepperDecreaseButton;exports.StepperIncreaseButton=e.StepperIncreaseButton;exports.StepperInput=e.StepperInput;exports.useStepper=e.useStepper;exports.Toggle=c.Toggle;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { Radio } from './components/Radio';
 export { RadioGroup } from './components/RadioGroup';
 export { Select, SelectContainer, SelectDivider, SelectOption, SelectTrigger, } from './components/Select';
 export { Stepper, StepperContainer, StepperDecreaseButton, StepperIncreaseButton, StepperInput, useStepper, } from './components/Stepper';
+export { Toggle } from './components/Toggle';
 export { SelectContext, useSelect } from './contexts/useSelect';
 export type { SelectType, SelectValue } from './types/select';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC/D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC/D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,26 +1,28 @@
 import { Button as r } from "./components/Button/index.js";
 import { Input as p } from "./components/Input/index.js";
 import { Radio as n } from "./components/Radio/index.js";
-import { RadioGroup as i } from "./components/RadioGroup/index.js";
-import { Select as x, SelectContainer as f, SelectDivider as l, SelectOption as m, SelectTrigger as a } from "./components/Select/index.js";
-import { Stepper as d, StepperContainer as B, StepperDecreaseButton as C, StepperIncreaseButton as I, StepperInput as g, useStepper as D } from "./components/Stepper/index.js";
-import { SelectContext as v, useSelect as G } from "./contexts/useSelect.js";
+import { RadioGroup as x } from "./components/RadioGroup/index.js";
+import { Select as i, SelectContainer as l, SelectDivider as m, SelectOption as u, SelectTrigger as a } from "./components/Select/index.js";
+import { Stepper as s, StepperContainer as d, StepperDecreaseButton as B, StepperIncreaseButton as C, StepperInput as I, useStepper as D } from "./components/Stepper/index.js";
+import { Toggle as T } from "./components/Toggle/index.js";
+import { SelectContext as G, useSelect as O } from "./contexts/useSelect.js";
 export {
   r as Button,
   p as Input,
   n as Radio,
-  i as RadioGroup,
-  x as Select,
-  f as SelectContainer,
-  v as SelectContext,
-  l as SelectDivider,
-  m as SelectOption,
+  x as RadioGroup,
+  i as Select,
+  l as SelectContainer,
+  G as SelectContext,
+  m as SelectDivider,
+  u as SelectOption,
   a as SelectTrigger,
-  d as Stepper,
-  B as StepperContainer,
-  C as StepperDecreaseButton,
-  I as StepperIncreaseButton,
-  g as StepperInput,
-  G as useSelect,
+  s as Stepper,
+  d as StepperContainer,
+  B as StepperDecreaseButton,
+  C as StepperIncreaseButton,
+  I as StepperInput,
+  T as Toggle,
+  O as useSelect,
   D as useStepper
 };

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -52,7 +52,7 @@
     "vite": "^7.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@devup-ui/vite-plugin": "1.0.35"
+    "@devup-ui/vite-plugin": "1.0.36"
   },
   "peerDependencies": {
     "csstype": "*",