@vnejs/uis.react.toggle 0.1.2

package/dist/Toggle.d.ts

@@ -0,0 +1,10 @@
+import "./Toggle.styl";
+export declare const Toggle: ({ isSelected, size, transition, className, isToggled, onToggle }: {
+    isSelected?: boolean;
+    size?: number;
+    transition?: number;
+    className?: string;
+    isToggled?: boolean;
+    onToggle: any;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,eAAe,CAAC;AAIvB,eAAO,MAAM,MAAM,GAAI;;;;;;;CAAgG,4CAsCtH,CAAC"}

package/dist/Toggle.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { cn, getVneLength } from "@vnejs/uis.utils";
+import "./Toggle.styl";
+const b = cn("Toggle");
+export const Toggle = ({ isSelected = false, size = 96, transition = 300, className = "", isToggled = false, onToggle }) => {
+    const style = useMemo(() => {
+        const result = {};
+        if (size) {
+            result.width = getVneLength(2 * size);
+            result.height = getVneLength(size);
+            result.borderRadius = getVneLength(0.5 * size);
+        }
+        if (transition)
+            result.transition = `${transition}ms`;
+        return result;
+    }, [size, transition]);
+    const styleButton = useMemo(() => {
+        const result = { left: isToggled ? "50%" : "0" };
+        if (transition)
+            result.transition = `${transition}ms`;
+        return result;
+    }, [isToggled, transition]);
+    const onToggleHandler = useCallback(() => onToggle && onToggle(!isToggled), [isToggled, onToggle]);
+    return (_jsx("div", { className: b({ isSelected, isToggled }, [className]), onClick: onToggleHandler, style: style, "vne-cursor-type": "pointer", children: _jsx("div", { className: b("button"), style: styleButton }) }));
+};
+//# sourceMappingURL=Toggle.js.map

package/dist/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,GAAG,GAAG,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzH,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAwB,EAAE,CAAC;QAEvC,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YACtC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;YACnC,MAAM,CAAC,YAAY,GAAG,YAAY,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,UAAU;YAAE,MAAM,CAAC,UAAU,GAAG,GAAG,UAAU,IAAI,CAAC;QAEtD,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,MAAM,GAAwB,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QAEtE,IAAI,UAAU;YAAE,MAAM,CAAC,UAAU,GAAG,GAAG,UAAU,IAAI,CAAC;QAEtD,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnG,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,EACpD,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,KAAK,qBACI,SAAS,YAEzB,cACE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,KAAK,EAAE,WAAW,GAClB,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Toggle.styl

@@ -0,0 +1,27 @@
+.Toggle
+    position: relative
+
+    --vne-toggle-color-untoggled: var(--vne-color-disabled, rgba(255, 255, 255, 30%))
+    --vne-toggle-color-toggled: var(--vne-color-primary, rgba(255, 255, 255, 60%))
+    --vne-toggle-color-button: var(--vne-color-active, rgba(255, 255, 255, 90%))
+
+    --vne-toggle-shadow-selected: var(--vne-shadow-selected, 0 0 s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)') var(--vne-color-active, rgba(255, 255, 255, 90%)))
+
+    background: var(--vne-toggle-color-untoggled)
+
+    &-button
+        position: absolute
+        top: 0
+        width: 50%
+        height: 100%
+        border-radius: 50%
+        background: var(--vne-toggle-color-button)
+
+    &[vne-cursor-target]
+        opacity: 0.75
+
+    &_isToggled
+        background: var(--vne-toggle-color-toggled)
+
+    &_isSelected
+        box-shadow: var(--vne-toggle-shadow-selected)

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Toggle";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./Toggle";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@vnejs/uis.react.toggle",
+  "version": "0.1.2",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "node ../../scripts/build-package.mjs",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
+    "publish:major": "npm run build && npm version major && npm publish --access public",
+    "publish:minor": "npm run build && npm version minor && npm publish --access public",
+    "publish:patch": "npm run build && npm version patch && npm publish --access public"
+  },
+  "peerDependencies": {
+    "@bem-react/classname": "1.5.12",
+    "@vnejs/uis.utils": "~0.1.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@vnejs/uis.react": "~0.1.0",
+    "typescript": "^5.7.3",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4"
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ]
+}