@devup-ui/components 0.1.16 → 0.1.17

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.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.16",
+  "version": "0.1.17",
   "type": "module",
   "publishConfig": {
     "access": "public"