@blockle/blocks 0.11.0 → 0.11.2

package/dist/styles/components/form/Slider/slider.css.cjs

@@ -1,13 +1,70 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./slider.css.ts.vanilla.cjs");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
-var container = "_11vw2ud0";
-var containerVertical = "_11vw2ud1";
-var track = "_11vw2ud2";
-var filledTrack = "_11vw2ud3";
-var thumb = "_11vw2ud4";
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      writingMode: "horizontal-tb"
+    }
+  }
+}, "container");
+const containerVertical = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      writingMode: "vertical-lr"
+    }
+  }
+}, "containerVertical");
+const track = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      inlineSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translateY(-50%)",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translateX(-50%)"
+        }
+      }
+    }
+  }
+}, "track");
+const filledTrack = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "absolute",
+      blockSize: "100%",
+      borderRadius: "inherit",
+      selectors: {
+        [`${containerVertical} &`]: {
+          insetInlineEnd: "0%"
+        }
+      }
+    }
+  }
+}, "filledTrack");
+const thumb = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      blockSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translate(-50%, -50%)",
+      touchAction: "none",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translate(-50%, 50%)"
+        }
+      }
+    }
+  }
+}, "thumb");
 fileScope.endFileScope();
 exports.container = container;
 exports.containerVertical = containerVertical;

package/dist/styles/components/form/Slider/slider.css.mjs

@@ -1,12 +1,69 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./slider.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
-var container = "_11vw2ud0";
-var containerVertical = "_11vw2ud1";
-var track = "_11vw2ud2";
-var filledTrack = "_11vw2ud3";
-var thumb = "_11vw2ud4";
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      writingMode: "horizontal-tb"
+    }
+  }
+}, "container");
+const containerVertical = style({
+  "@layer": {
+    [blocksLayer]: {
+      writingMode: "vertical-lr"
+    }
+  }
+}, "containerVertical");
+const track = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      inlineSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translateY(-50%)",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translateX(-50%)"
+        }
+      }
+    }
+  }
+}, "track");
+const filledTrack = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "absolute",
+      blockSize: "100%",
+      borderRadius: "inherit",
+      selectors: {
+        [`${containerVertical} &`]: {
+          insetInlineEnd: "0%"
+        }
+      }
+    }
+  }
+}, "filledTrack");
+const thumb = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      blockSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translate(-50%, -50%)",
+      touchAction: "none",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translate(-50%, 50%)"
+        }
+      }
+    }
+  }
+}, "thumb");
 endFileScope();
 export {
   container,

package/dist/styles/components/form/Switch/Switch.cjs

@@ -1,18 +1,18 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const require$$0 = require("react");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const styles_components_form_Switch_switch_css_cjs = require("./switch.css.cjs");
-const Switch = react.forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
-  const [isChecked, setIsChecked] = react.useState(defaultChecked || checked || false);
+const Switch = require$$0.forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
+  const [isChecked, setIsChecked] = require$$0.useState(defaultChecked || checked || false);
   const baseClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("switch", { base: true });
   const sliderClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("switch", { slider: true }, false);
-  react.useEffect(() => {
+  require$$0.useEffect(() => {
     if (checked !== void 0) {
       setIsChecked(checked);
     }
   }, [checked]);
-  const toggle = react.useCallback(() => {
+  const toggle = require$$0.useCallback(() => {
     setIsChecked((checked2) => {
       const newValue = !checked2;
       if (onChange) {
@@ -21,7 +21,7 @@ const Switch = react.forwardRef(function Switch2({ className, checked, onChange,
       return newValue;
     });
   }, [onChange]);
-  const onChangeHandler = react.useCallback(
+  const onChangeHandler = require$$0.useCallback(
     (event) => {
       setIsChecked(event.target.checked);
       if (onChange) {

package/dist/styles/components/form/Switch/switch.css.cjs

@@ -1,10 +1,26 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./switch.css.ts.vanilla.cjs");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks");
-var container = "tbb26a0";
-var input = "tbb26a1";
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+}, "container");
+const input = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      opacity: 0,
+      maxBlockSize: 0,
+      maxInlineSize: 0
+    }
+  }
+}, "input");
 fileScope.endFileScope();
 exports.container = container;
 exports.input = input;

package/dist/styles/components/form/Switch/switch.css.mjs

@@ -1,9 +1,25 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./switch.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks");
-var container = "tbb26a0";
-var input = "tbb26a1";
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+}, "container");
+const input = style({
+  "@layer": {
+    [blocksLayer]: {
+      opacity: 0,
+      maxBlockSize: 0,
+      maxInlineSize: 0
+    }
+  }
+}, "input");
 endFileScope();
 export {
   container,

package/dist/styles/components/other/BlocksProvider/BlocksProvider.cjs

@@ -1,6 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const require$$0 = require("react");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const BlocksProvider = ({
@@ -9,16 +9,16 @@ const BlocksProvider = ({
   className,
   ...restProps
 }) => {
-  const ref = react.useRef(null);
-  const [ariaHidden, setAriaHidden] = react.useState(false);
-  const contextValue = react.useMemo(
+  const ref = require$$0.useRef(null);
+  const [ariaHidden, setAriaHidden] = require$$0.useState(false);
+  const contextValue = require$$0.useMemo(
     () => ({
       theme,
       setAriaHidden
     }),
     [theme, setAriaHidden]
   );
-  react.useEffect(() => {
+  require$$0.useEffect(() => {
     var _a, _b;
     if (ariaHidden) {
       (_a = ref.current) == null ? void 0 : _a.setAttribute("inert", "");