@vertz/theme-shadcn 0.2.1 → 0.2.2

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { GlobalCSSOutput, Theme, VariantFunction as VariantFunction5 } from "@vertz/ui";
-import { CheckboxElements, CheckboxOptions, CheckboxState, ProgressElements, ProgressOptions, ProgressState, RadioOptions as RadioOptions2, SliderElements, SliderOptions, SliderState, SwitchElements as SwitchElements2, SwitchState as SwitchState2, ToastOptions as ToastOptions2 } from "@vertz/ui-primitives";
+import { CheckboxElements, CheckboxOptions, CheckboxState, ProgressElements, ProgressOptions, ProgressState, RadioOptions as RadioOptions2, SliderElements, SliderOptions, SliderState, ToastOptions as ToastOptions2 } from "@vertz/ui-primitives";
 import { ChildValue } from "@vertz/ui";
 interface AlertProps {
 	variant?: "default" | "destructive";
@@ -472,13 +472,11 @@ type ThemedToastResult = ToastElements & {
 	announce: (content: string) => ToastMessage;
 	dismiss: (id: string) => void;
 };
-import { ToggleElements, ToggleOptions, ToggleState } from "@vertz/ui-primitives";
+import { ToggleOptions } from "@vertz/ui-primitives";
 interface ToggleStyleClasses {
 	readonly root: string;
 }
-declare function createThemedToggle(styles: ToggleStyleClasses): (options?: ToggleOptions) => ToggleElements & {
-	state: ToggleState;
-};
+declare function createThemedToggle(styles: ToggleStyleClasses): (options?: ToggleOptions) => HTMLElement;
 import { ToggleGroupElements, ToggleGroupOptions, ToggleGroupState } from "@vertz/ui-primitives";
 interface ToggleGroupStyleClasses {
 	readonly root: string;
@@ -976,9 +974,7 @@ interface ThemedPrimitives {
 		state: CheckboxState;
 	};
 	/** Themed Switch — wraps @vertz/ui-primitives Switch with shadcn styles. */
-	switch: (options?: ThemedSwitchOptions) => SwitchElements2 & {
-		state: SwitchState2;
-	};
+	switch: (options?: ThemedSwitchOptions) => HTMLElement;
 	/** Themed Popover — composable JSX component with Popover.Trigger, Popover.Content. */
 	Popover: ThemedPopoverComponent;
 	/** Themed Progress — wraps @vertz/ui-primitives Progress with shadcn styles. */

package/dist/index.js

@@ -1718,23 +1718,23 @@ import { Switch } from "@vertz/ui-primitives";
 function createThemedSwitch(styles) {
   return function themedSwitch(options) {
     const { size, ...primitiveOptions } = options ?? {};
-    const result = Switch.Root(primitiveOptions);
-    result.root.classList.add(size === "sm" ? styles.rootSm : styles.root);
+    const root = Switch.Root(primitiveOptions);
+    root.classList.add(size === "sm" ? styles.rootSm : styles.root);
     const thumb = document.createElement("span");
     thumb.classList.add(size === "sm" ? styles.thumbSm : styles.thumb);
-    const initialState = result.root.getAttribute("data-state") ?? "unchecked";
+    const initialState = root.getAttribute("data-state") ?? "unchecked";
     thumb.setAttribute("data-state", initialState);
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         if (mutation.attributeName === "data-state") {
-          const newState = result.root.getAttribute("data-state") ?? "unchecked";
+          const newState = root.getAttribute("data-state") ?? "unchecked";
           thumb.setAttribute("data-state", newState);
         }
       }
     });
-    observer.observe(result.root, { attributes: true, attributeFilter: ["data-state"] });
-    result.root.appendChild(thumb);
-    return result;
+    observer.observe(root, { attributes: true, attributeFilter: ["data-state"] });
+    root.appendChild(thumb);
+    return root;
   };
 }
 
@@ -1852,9 +1852,9 @@ function createThemedToast(styles) {
 import { Toggle } from "@vertz/ui-primitives";
 function createThemedToggle(styles) {
   return function themedToggle(options) {
-    const result = Toggle.Root(options);
-    result.root.classList.add(styles.root);
-    return result;
+    const root = Toggle.Root(options);
+    root.classList.add(styles.root);
+    return root;
   };
 }
 
@@ -4238,12 +4238,8 @@ function createSwitchStyles() {
       "cursor:pointer",
       "bg:input",
       "transition:colors",
-      {
-        "&": [
-          { property: "height", value: "18.4px" },
-          { property: "width", value: "32px" }
-        ]
-      },
+      "h:5",
+      "w:8",
       { [DARK]: [bgOpacity("input", 80)] },
       focusRing13,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
@@ -4258,13 +4254,30 @@ function createSwitchStyles() {
       "w:4",
       "rounded:full",
       "bg:background",
-      "transition:transform",
+      {
+        "&": [
+          {
+            property: "transition",
+            value: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+          }
+        ]
+      },
       {
         '&[data-state="unchecked"]': [{ property: "transform", value: "translateX(0)" }],
         '&[data-state="checked"]': [
           { property: "transform", value: "translateX(calc(100% - 2px))" }
         ]
       },
+      {
+        'button:active > &[data-state="unchecked"]': [
+          "w:5",
+          { property: "transform", value: "translateX(0)" }
+        ],
+        'button:active > &[data-state="checked"]': [
+          "w:5",
+          { property: "transform", value: "translateX(0.625rem)" }
+        ]
+      },
       {
         [`${DARK}[data-state="unchecked"]`]: [
           { property: "background-color", value: "var(--color-foreground)" }
@@ -4286,12 +4299,8 @@ function createSwitchStyles() {
       "cursor:pointer",
       "bg:input",
       "transition:colors",
-      {
-        "&": [
-          { property: "height", value: "14px" },
-          { property: "width", value: "24px" }
-        ]
-      },
+      "h:3.5",
+      "w:6",
       { [DARK]: [bgOpacity("input", 80)] },
       focusRing13,
       { "&:disabled": ["pointer-events-none", "opacity:0.5"] },
@@ -4306,13 +4315,30 @@ function createSwitchStyles() {
       "w:3",
       "rounded:full",
       "bg:background",
-      "transition:transform",
+      {
+        "&": [
+          {
+            property: "transition",
+            value: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+          }
+        ]
+      },
       {
         '&[data-state="unchecked"]': [{ property: "transform", value: "translateX(0)" }],
         '&[data-state="checked"]': [
           { property: "transform", value: "translateX(calc(100% - 2px))" }
         ]
       },
+      {
+        'button:active > &[data-state="unchecked"]': [
+          "w:3.5",
+          { property: "transform", value: "translateX(0)" }
+        ],
+        'button:active > &[data-state="checked"]': [
+          "w:3.5",
+          { property: "transform", value: "translateX(0.5rem)" }
+        ]
+      },
       {
         [`${DARK}[data-state="unchecked"]`]: [
           { property: "background-color", value: "var(--color-foreground)" }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/theme-shadcn",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "license": "MIT",
   "description": "Shadcn-inspired theme for Vertz — pre-built style definitions using variants() and css()",
@@ -35,12 +35,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@vertz/ui": "0.2.1",
-    "@vertz/ui-primitives": "0.2.1"
+    "@vertz/ui": "0.2.2",
+    "@vertz/ui-primitives": "0.2.2"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.7.0",
-    "bunup": "latest",
+    "bunup": "^0.16.31",
     "happy-dom": "^20.7.0",
     "typescript": "^5.7.0"
   },