@devup-ui/components 0.1.42 → 0.1.44

package/dist/components/Toggle/index.js

@@ -1,93 +1,73 @@
 "use client";
-import { jsxs as c, Fragment as f, jsx as i } from "react/jsx-runtime";
-import { Box as n, Input as w } from "@devup-ui/react";
-import { useState as B } from "react";
-function S({
-  defaultValue: l = null,
-  value: t = null,
-  onChange: s,
-  disabled: o,
-  className: p,
-  style: g,
-  variant: d = "default",
-  colors: r,
-  classNames: u,
-  styles: m
-}) {
-  const [b, v] = B(
-    t ?? l ?? !1
-  ), a = t ?? b;
-  function x(h) {
-    s?.(!h), v((y) => !y);
-  }
-  const e = d === "default";
-  return /* @__PURE__ */ c(f, { children: [
-    /* @__PURE__ */ i(
-      n,
-      {
-        "aria-disabled": o,
-        bg: a ? "var(--primary)" : "var(--bg, light-dark(#E4E4E4, #383838))",
-        borderRadius: "500px",
-        boxSizing: "border-box",
-        className: p,
-        cursor: "pointer",
-        h: e ? "28px" : "8px",
-        justifyContent: a && "flex-end",
-        onClick: () => !o && x(a),
-        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: a ? "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: g,
-        styleVars: {
-          primary: r?.primary,
-          bg: r?.bg,
-          primaryHoverBg: r?.primaryHoverBg,
-          hoverBg: r?.hoverBg,
-          disabledBg: r?.disabledBg
-        },
-        "test-id": "toggle-wrapper",
-        transition: ".25s",
-        w: e ? "50px" : "40px",
-        children: /* @__PURE__ */ i(
-          n,
-          {
-            _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: u?.toggle,
-            filter: !e && "drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",
-            outline: "4px",
-            pos: "absolute",
-            style: m?.toggle,
-            styleVars: {
-              primary: r?.primary,
-              primaryHoverBg: r?.primaryHoverBg,
-              switchShadow: r?.switchShadow,
-              switchHoverOutline: r?.switchHoverOutline
-            },
-            top: !e && "-6px",
-            transform: a && "translateX(calc(100% + 2px))",
-            transition: ".25s"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ i(w, { type: "hidden", value: String(a) })
-  ] });
+"use client";
+import { Box as e, Input as t } from "@devup-ui/react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useState as a } from "react";
+//#region src/components/Toggle/index.tsx
+function o({ defaultValue: o = null, value: s = null, onChange: c, disabled: l, className: u, style: d, variant: f = "default", colors: p, classNames: m, styles: h }) {
+	let [g, _] = a(s ?? o ?? !1), v = s ?? g;
+	function y(e) {
+		c?.(!e), _((e) => !e);
+	}
+	let b = f === "default";
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+		"aria-disabled": l,
+		bg: v ? "var(--primary)" : "var(--bg, light-dark(#E4E4E4, #383838))",
+		borderRadius: "500px",
+		boxSizing: "border-box",
+		className: u,
+		cursor: "pointer",
+		h: b ? "28px" : "8px",
+		justifyContent: v && "flex-end",
+		onClick: () => !l && y(v),
+		p: b && 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: v ? "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: d,
+		styleVars: {
+			primary: p?.primary,
+			bg: p?.bg,
+			primaryHoverBg: p?.primaryHoverBg,
+			hoverBg: p?.hoverBg,
+			disabledBg: p?.disabledBg
+		},
+		"test-id": "toggle-wrapper",
+		transition: ".25s",
+		w: b ? "50px" : "40px",
+		children: /* @__PURE__ */ r(e, {
+			_groupHover: !b && {
+				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: m?.toggle,
+			filter: !b && "drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",
+			outline: "4px",
+			pos: "absolute",
+			style: h?.toggle,
+			styleVars: {
+				primary: p?.primary,
+				primaryHoverBg: p?.primaryHoverBg,
+				switchShadow: p?.switchShadow,
+				switchHoverOutline: p?.switchHoverOutline
+			},
+			top: !b && "-6px",
+			transform: v && "translateX(calc(100% + 2px))",
+			transition: ".25s"
+		})
+	}), /* @__PURE__ */ r(t, {
+		type: "hidden",
+		value: String(v)
+	})] });
 }
-export {
-  S as Toggle
-};
+//#endregion
+export { o as Toggle };

package/dist/contexts/useSelect.cjs

@@ -1,2 +1 @@
-"use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),c=t.createContext(null),n=()=>{const e=t.useContext(c);if(!e)throw new Error("useSelect must be used within a Select");return e};exports.SelectContext=c;exports.useSelect=n;
+"use client";"use client";require(`../_virtual/_rolldown/runtime.cjs`);let e=require(`react`);var t=(0,e.createContext)(null),n=()=>{let n=(0,e.useContext)(t);if(!n)throw Error(`useSelect must be used within a Select`);return n};exports.SelectContext=t,exports.useSelect=n;

package/dist/contexts/useSelect.js

@@ -1,12 +1,11 @@
 "use client";
-import { createContext as t, useContext as o } from "react";
-const n = t(null), c = () => {
-  const e = o(n);
-  if (!e)
-    throw new Error("useSelect must be used within a Select");
-  return e;
-};
-export {
-  n as SelectContext,
-  c as useSelect
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region src/contexts/useSelect.ts
+var n = e(null), r = () => {
+	let e = t(n);
+	if (!e) throw Error("useSelect must be used within a Select");
+	return e;
 };
+//#endregion
+export { n as SelectContext, r as useSelect };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),i=require("./components/Checkbox/index.cjs"),o=require("./components/Input/index.cjs"),c=require("./components/Radio/index.cjs"),p=require("./components/RadioGroup/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),u=require("./components/Textarea/index.cjs"),S=require("./components/Toggle/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Checkbox=i.Checkbox;exports.Input=o.Input;exports.Radio=c.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.Textarea=u.Textarea;exports.Toggle=S.Toggle;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./components/Button/index.cjs`),t=require(`./components/Checkbox/index.cjs`),n=require(`./components/Input/index.cjs`),r=require(`./components/Radio/index.cjs`),i=require(`./components/RadioGroup/index.cjs`),a=require(`./contexts/useSelect.cjs`),o=require(`./components/Select/index.cjs`),s=require(`./components/Stepper/index.cjs`),c=require(`./components/Textarea/index.cjs`),l=require(`./components/Toggle/index.cjs`);exports.Button=e.Button,exports.Checkbox=t.Checkbox,exports.Input=n.Input,exports.Radio=r.Radio,exports.RadioGroup=i.RadioGroup,exports.Select=o.Select,exports.SelectContainer=o.SelectContainer,exports.SelectContext=a.SelectContext,exports.SelectDivider=o.SelectDivider,exports.SelectOption=o.SelectOption,exports.SelectTrigger=o.SelectTrigger,exports.Stepper=s.Stepper,exports.StepperContainer=s.StepperContainer,exports.StepperDecreaseButton=s.StepperDecreaseButton,exports.StepperIncreaseButton=s.StepperIncreaseButton,exports.StepperInput=s.StepperInput,exports.Textarea=c.Textarea,exports.Toggle=l.Toggle,exports.useSelect=a.useSelect,exports.useStepper=s.useStepper;

package/dist/index.js

@@ -1,32 +1,11 @@
-import { Button as r } from "./components/Button/index.js";
-import { Checkbox as p } from "./components/Checkbox/index.js";
-import { Input as S } from "./components/Input/index.js";
-import { Radio as c } from "./components/Radio/index.js";
-import { RadioGroup as m } from "./components/RadioGroup/index.js";
-import { Select as i, SelectContainer as l, SelectDivider as u, SelectOption as g, SelectTrigger as s } from "./components/Select/index.js";
-import { Stepper as d, StepperContainer as B, StepperDecreaseButton as I, StepperIncreaseButton as T, StepperInput as D, useStepper as R } from "./components/Stepper/index.js";
-import { Textarea as h } from "./components/Textarea/index.js";
-import { Toggle as v } from "./components/Toggle/index.js";
-import { SelectContext as O, useSelect as j } from "./contexts/useSelect.js";
-export {
-  r as Button,
-  p as Checkbox,
-  S as Input,
-  c as Radio,
-  m as RadioGroup,
-  i as Select,
-  l as SelectContainer,
-  O as SelectContext,
-  u as SelectDivider,
-  g as SelectOption,
-  s as SelectTrigger,
-  d as Stepper,
-  B as StepperContainer,
-  I as StepperDecreaseButton,
-  T as StepperIncreaseButton,
-  D as StepperInput,
-  h as Textarea,
-  v as Toggle,
-  j as useSelect,
-  R as useStepper
-};
+import { Button as e } from "./components/Button/index.js";
+import { Checkbox as t } from "./components/Checkbox/index.js";
+import { Input as n } from "./components/Input/index.js";
+import { Radio as r } from "./components/Radio/index.js";
+import { RadioGroup as i } from "./components/RadioGroup/index.js";
+import { SelectContext as a, useSelect as o } from "./contexts/useSelect.js";
+import { Select as s, SelectContainer as c, SelectDivider as l, SelectOption as u, SelectTrigger as d } from "./components/Select/index.js";
+import { Stepper as f, StepperContainer as p, StepperDecreaseButton as m, StepperIncreaseButton as h, StepperInput as g, useStepper as _ } from "./components/Stepper/index.js";
+import { Textarea as v } from "./components/Textarea/index.js";
+import { Toggle as y } from "./components/Toggle/index.js";
+export { e as Button, t as Checkbox, n as Input, r as Radio, i as RadioGroup, s as Select, c as SelectContainer, a as SelectContext, l as SelectDivider, u as SelectOption, d as SelectTrigger, f as Stepper, p as StepperContainer, m as StepperDecreaseButton, h as StepperIncreaseButton, g as StepperInput, v as Textarea, y as Toggle, o as useSelect, _ as useStepper };

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.42",
+  "version": "0.1.44",
   "type": "module",
   "scripts": {
     "lint": "eslint",
@@ -43,28 +43,25 @@
   ],
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@devup-ui/react": "^1.0.34",
-    "csstype-extra": "latest",
+    "@devup-ui/react": "^1.0.35",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4",
     "clsx": "^2.1"
   },
   "devDependencies": {
-    "@devup-ui/vite-plugin": "^1.0.56",
-    "@storybook/addon-docs": "^10.2",
-    "@storybook/addon-onboarding": "^10.2",
-    "@storybook/react-vite": "^10.2",
+    "@devup-ui/vite-plugin": "^1.0.58",
+    "@storybook/addon-docs": "^10.3",
+    "@storybook/addon-onboarding": "^10.3",
+    "@storybook/react-vite": "^10.3",
     "@types/react": "^19.2",
-    "eslint-plugin-storybook": "^10.2",
+    "eslint-plugin-storybook": "^10.3",
     "rollup-plugin-preserve-directives": "^0.4",
-    "storybook": "^10.2",
-    "typescript": "^5.9",
-    "vite": "^7.3",
+    "storybook": "^10.3",
+    "typescript": "^6.0",
+    "vite": "^8.0",
     "vite-plugin-dts": "^4.5"
   },
   "peerDependencies": {
-    "@devup-ui/react": "^1.0.34",
-    "csstype-extra": "*",
+    "@devup-ui/react": "^1.0.35",
     "react": "*"
   }
 }