@vnejs/uis.react.toggle 0.1.3 → 0.1.5

package/dist/Toggle.d.ts

@@ -1,4 +1,3 @@
-import "./Toggle.styl";
 export declare const Toggle: ({ isSelected, size, transition, className, isToggled, onToggle }: {
     isSelected?: boolean;
     size?: number;

package/dist/Toggle.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,MAAM,GAAI;;;;;;;CAAgG,4CAsCtH,CAAC"}

package/dist/Toggle.js

@@ -1,8 +1,7 @@
 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");
+import { getVneLength } from "@vnejs/uis.utils";
+import { b } from "./Toggle.styles.js";
 export const Toggle = ({ isSelected = false, size = 96, transition = 300, className = "", isToggled = false, onToggle }) => {
     const style = useMemo(() => {
         const result = {};

package/dist/Toggle.js.map

@@ -1 +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"}
+{"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,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AAEvC,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.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const b: (...args: any[]) => string;
+//# sourceMappingURL=Toggle.styles.d.ts.map

package/dist/Toggle.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../src/Toggle.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,4BAAe,CAAC"}

package/dist/Toggle.styles.js

@@ -0,0 +1,35 @@
+import { cn, getVneLength, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Toggle");
+const CSS = `
+${sel(b())} {
+  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 ${getVneLength(24)} var(--vne-color-active, rgba(255, 255, 255, 90%)));
+  background: var(--vne-toggle-color-untoggled);
+}
+
+${sel(b("button"))} {
+  position: absolute;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  border-radius: 50%;
+  background: var(--vne-toggle-color-button);
+}
+
+${sel(b())}[vne-cursor-target] {
+  opacity: 0.75;
+}
+
+${sel(b({ isToggled: true }))} {
+  background: var(--vne-toggle-color-toggled);
+}
+
+${sel(b({ isSelected: true }))} {
+  box-shadow: var(--vne-toggle-shadow-selected);
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=Toggle.styles.js.map

package/dist/Toggle.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.js","sourceRoot":"","sources":["../src/Toggle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;AAE9B,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;iEAKuD,YAAY,CAAC,EAAE,CAAC;;;;EAI/E,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;;;;;;;;;EAShB,GAAG,CAAC,CAAC,EAAE,CAAC;;;;EAIR,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAI3B,GAAG,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAG7B,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,31 +1,26 @@
 {
   "name": "@vnejs/uis.react.toggle",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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"
+    "build": "npx @vnejs/monorepo package",
+    "publish:major:uis:react": "npm run publish:major",
+    "publish:minor:uis:react": "npm run publish:minor",
+    "publish:patch:uis:react": "npm run publish:patch",
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "peerDependencies": {
-    "@bem-react/classname": "1.5.12",
-    "@vnejs/uis.utils": "~0.1.0",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "@vnejs/uis.utils": "~0.1.0"
   },
   "devDependencies": {
-    "@vnejs/uis.react": "~0.1.0",
-    "typescript": "^6.0.3",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4"
+    "@vnejs/uis.react": "~0.1.0"
   },
   "files": [
     "dist",
-    "package.json"
+    "src",
+    "tsconfig.json"
   ]
 }

package/src/Toggle.stories.tsx

@@ -0,0 +1,46 @@
+import { useMemo, useState } from "react";
+
+import { renderWithVneWrap, VneWrap } from "@vnejs/uis.react";
+
+import { Flex } from "@vnejs/uis.react";
+import { Toggle } from "./Toggle";
+
+export const Common = {
+  args: {
+    ...VneWrap.DEFAULT_ARGS,
+
+    isSelected: true,
+
+    size: 120,
+    transition: 300,
+  },
+};
+
+export default {
+  title: "Primitives/Toggle",
+  render: renderWithVneWrap(({ top, right, bottom, left, isUseTop, isUseRight, isUseBottom, isUseLeft, ...args }) => {
+    const [isOn, setIsOn] = useState(false);
+
+    return (
+      <Flex
+        align={Flex.ALIGN.CENTER}
+        justify={Flex.JUSTIFY.CENTER}
+        direction={Flex.DIRECTION.COLUMN}
+        height={2160}
+      >
+        <Toggle
+          {...args}
+          isToggled={isOn}
+          onToggle={() => setIsOn(!isOn)}
+        />
+      </Flex>
+    );
+  }),
+  argTypes: {
+    // engine
+    ...VneWrap.ARGS,
+
+    size: { control: { type: "number", min: 36, max: 360, step: 12 } },
+    transition: { control: { type: "number", min: 0, max: 500, step: 50 } },
+  },
+};

package/src/Toggle.styles.ts

@@ -0,0 +1,37 @@
+import { cn, getVneLength, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Toggle");
+
+const CSS = `
+${sel(b())} {
+  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 ${getVneLength(24)} var(--vne-color-active, rgba(255, 255, 255, 90%)));
+  background: var(--vne-toggle-color-untoggled);
+}
+
+${sel(b("button"))} {
+  position: absolute;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  border-radius: 50%;
+  background: var(--vne-toggle-color-button);
+}
+
+${sel(b())}[vne-cursor-target] {
+  opacity: 0.75;
+}
+
+${sel(b({ isToggled: true }))} {
+  background: var(--vne-toggle-color-toggled);
+}
+
+${sel(b({ isSelected: true }))} {
+  box-shadow: var(--vne-toggle-shadow-selected);
+}
+`;
+
+injectStyles(CSS);

package/src/Toggle.tsx

@@ -0,0 +1,45 @@
+import { useCallback, useMemo } from "react";
+
+import { getVneLength } from "@vnejs/uis.utils";
+
+import { b } from "./Toggle.styles.js";
+
+export const Toggle = ({ isSelected = false, size = 96, transition = 300, className = "", isToggled = false, onToggle }) => {
+  const style = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    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: Record<string, any> = { left: isToggled ? "50%" : "0" };
+
+    if (transition) result.transition = `${transition}ms`;
+
+    return result;
+  }, [isToggled, transition]);
+
+  const onToggleHandler = useCallback(() => onToggle && onToggle(!isToggled), [isToggled, onToggle]);
+
+  return (
+    <div
+      className={b({ isSelected, isToggled }, [className])}
+      onClick={onToggleHandler}
+      style={style}
+      vne-cursor-type="pointer"
+    >
+      <div
+        className={b("button")}
+        style={styleButton}
+      />
+    </div>
+  );
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./Toggle";

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.react.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../../../globals.d.ts",
+    "../../../peer-modules.d.ts"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/**/*.stories.tsx"
+  ]
+}

package/dist/Toggle.styl

@@ -1,27 +0,0 @@
-.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)