@blockle/blocks 0.10.0 → 0.11.0

package/dist/styles/components/display/Divider/Divider.cjs

@@ -220,6 +220,7 @@ exports.Box = Box;
 exports.Divider = Divider;
 exports.Slot = Slot;
 exports.classnames = classnames;
+exports.composeRefs = composeRefs;
 exports.createSlottable = createSlottable;
 exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
 exports.useComponentStyles = useComponentStyles;

package/dist/styles/components/display/Divider/Divider.mjs

@@ -220,6 +220,7 @@ export {
   Divider,
   Slot,
   classnames,
+  composeRefs,
   createSlottable,
   useComponentStyleDefaultProps,
   useComponentStyles,

package/dist/styles/components/display/Divider/divider.css.cjs

@@ -1,15 +1,8 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./divider.css.ts.vanilla.cjs");
 fileScope.setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks");
-const divider = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      clear: "both",
-      blockSize: "1px"
-    }
-  }
-}, "divider");
+var divider = "_8au4lu0";
 fileScope.endFileScope();
 exports.divider = divider;

package/dist/styles/components/display/Divider/divider.css.mjs

@@ -1,15 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./divider.css.ts.vanilla.mjs";
 setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks");
-const divider = style({
-  "@layer": {
-    [blocksLayer]: {
-      clear: "both",
-      blockSize: "1px"
-    }
-  }
-}, "divider");
+var divider = "_8au4lu0";
 endFileScope();
 export {
   divider

package/dist/styles/components/form/Button/Button.css.cjs

@@ -1,15 +1,8 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./Button.css.ts.vanilla.cjs");
 fileScope.setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
-const buttonReset = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      all: "unset",
-      cursor: "pointer"
-    }
-  }
-}, "buttonReset");
+var buttonReset = "_97x9530";
 fileScope.endFileScope();
 exports.buttonReset = buttonReset;

package/dist/styles/components/form/Button/Button.css.mjs

@@ -1,15 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./Button.css.ts.vanilla.mjs";
 setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
-const buttonReset = style({
-  "@layer": {
-    [blocksLayer]: {
-      all: "unset",
-      cursor: "pointer"
-    }
-  }
-}, "buttonReset");
+var buttonReset = "_97x9530";
 endFileScope();
 export {
   buttonReset

package/dist/styles/components/form/Button/Button.css.ts.vanilla.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/styles/components/form/Button/Button.css.ts.vanilla.mjs

@@ -0,0 +1 @@
+

package/dist/styles/components/form/Checkbox/checkbox.css.cjs

@@ -1,30 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./checkbox.css.ts.vanilla.cjs");
 fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
-const container = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      position: "relative",
-      cursor: "pointer",
-      overflow: "hidden"
-    }
-  }
-}, "container");
-const input = css.style({
-  position: "absolute",
-  inset: 0,
-  opacity: 0,
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      all: "unset"
-    }
-  }
-}, "input");
-const icon = css.style({
-  pointerEvents: "none"
-}, "icon");
+var container = "_1t2nsd0";
+var input = "_1t2nsd1";
+var icon = "_1t2nsd2";
 fileScope.endFileScope();
 exports.container = container;
 exports.icon = icon;

package/dist/styles/components/form/Checkbox/checkbox.css.mjs

@@ -1,29 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./checkbox.css.ts.vanilla.mjs";
 setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
-const container = style({
-  "@layer": {
-    [blocksLayer]: {
-      position: "relative",
-      cursor: "pointer",
-      overflow: "hidden"
-    }
-  }
-}, "container");
-const input = style({
-  position: "absolute",
-  inset: 0,
-  opacity: 0,
-  "@layer": {
-    [blocksLayer]: {
-      all: "unset"
-    }
-  }
-}, "input");
-const icon = style({
-  pointerEvents: "none"
-}, "icon");
+var container = "_1t2nsd0";
+var input = "_1t2nsd1";
+var icon = "_1t2nsd2";
 endFileScope();
 export {
   container,

package/dist/styles/components/form/Checkbox/checkbox.css.ts.vanilla.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/styles/components/form/Checkbox/checkbox.css.ts.vanilla.mjs

@@ -0,0 +1 @@
+

package/dist/styles/components/form/Input/input.css.cjs

@@ -1,19 +1,8 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./input.css.ts.vanilla.cjs");
 fileScope.setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks");
-const input = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      appearance: "none",
-      selectors: {
-        "&:-webkit-autofill": {
-          transitionDelay: "9999s"
-        }
-      }
-    }
-  }
-}, "input");
+var input = "hjmnu0";
 fileScope.endFileScope();
 exports.input = input;

package/dist/styles/components/form/Input/input.css.mjs

@@ -1,19 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./input.css.ts.vanilla.mjs";
 setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks");
-const input = style({
-  "@layer": {
-    [blocksLayer]: {
-      appearance: "none",
-      selectors: {
-        "&:-webkit-autofill": {
-          transitionDelay: "9999s"
-        }
-      }
-    }
-  }
-}, "input");
+var input = "hjmnu0";
 endFileScope();
 export {
   input

package/dist/styles/components/form/Input/input.css.ts.vanilla.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/styles/components/form/Input/input.css.ts.vanilla.mjs

@@ -0,0 +1 @@
+

package/dist/styles/components/form/Radio/radio.css.cjs

@@ -1,30 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./radio.css.ts.vanilla.cjs");
 fileScope.setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks");
-const container = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      position: "relative",
-      cursor: "pointer",
-      overflow: "hidden"
-    }
-  }
-}, "container");
-const input = css.style({
-  position: "absolute",
-  inset: 0,
-  opacity: 0,
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      all: "unset"
-    }
-  }
-}, "input");
-const icon = css.style({
-  pointerEvents: "none"
-}, "icon");
+var container = "dh2y4e0";
+var input = "dh2y4e1";
+var icon = "dh2y4e2";
 fileScope.endFileScope();
 exports.container = container;
 exports.icon = icon;

package/dist/styles/components/form/Radio/radio.css.mjs

@@ -1,29 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./radio.css.ts.vanilla.mjs";
 setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks");
-const container = style({
-  "@layer": {
-    [blocksLayer]: {
-      position: "relative",
-      cursor: "pointer",
-      overflow: "hidden"
-    }
-  }
-}, "container");
-const input = style({
-  position: "absolute",
-  inset: 0,
-  opacity: 0,
-  "@layer": {
-    [blocksLayer]: {
-      all: "unset"
-    }
-  }
-}, "input");
-const icon = style({
-  pointerEvents: "none"
-}, "icon");
+var container = "dh2y4e0";
+var input = "dh2y4e1";
+var icon = "dh2y4e2";
 endFileScope();
 export {
   container,

package/dist/styles/components/form/Radio/radio.css.ts.vanilla.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/styles/components/form/Radio/radio.css.ts.vanilla.mjs

@@ -0,0 +1 @@
+

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

@@ -3,9 +3,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const styles_components_form_Select_select_css_cjs = require("./select.css.cjs");
-const Select = react.forwardRef(function Select2({ children, placeholder, className, ...restProps }, ref) {
+const Select = react.forwardRef(function Select2({ children, placeholder, className, variant, ...restProps }, ref) {
   const wrapperClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { wrapper: true }, false);
-  const selectClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { select: true });
+  const selectClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { select: true, variants: { variant } });
   const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { icon: true }, false);
   return /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.wrapper, wrapperClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/styles/components/form/Select/Select.mjs

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
 import { wrapper, select, icon } from "./select.css.mjs";
-const Select = forwardRef(function Select2({ children, placeholder, className, ...restProps }, ref) {
+const Select = forwardRef(function Select2({ children, placeholder, className, variant, ...restProps }, ref) {
   const wrapperClassName = useComponentStyles("select", { wrapper: true }, false);
-  const selectClassName = useComponentStyles("select", { select: true });
+  const selectClassName = useComponentStyles("select", { select: true, variants: { variant } });
   const iconClassName = useComponentStyles("select", { icon: true }, false);
   return /* @__PURE__ */ jsxs(Box, { className: classnames(wrapper, wrapperClassName), children: [
     /* @__PURE__ */ jsxs(

package/dist/styles/components/form/Select/select.css.cjs

@@ -1,36 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./select.css.ts.vanilla.cjs");
 fileScope.setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
-const wrapper = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      position: "relative"
-    }
-  }
-}, "wrapper");
-const select = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      appearance: "none",
-      inlineSize: "100%"
-    }
-  }
-}, "select");
-const icon = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      pointerEvents: "none",
-      display: "flex",
-      alignItems: "center"
-    }
-  }
-}, "icon");
+var wrapper = "_1tosed90";
+var select = "_1tosed91";
+var icon = "_1tosed92";
 fileScope.endFileScope();
 exports.icon = icon;
 exports.select = select;

package/dist/styles/components/form/Select/select.css.mjs

@@ -1,35 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./select.css.ts.vanilla.mjs";
 setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
-const wrapper = style({
-  "@layer": {
-    [blocksLayer]: {
-      position: "relative"
-    }
-  }
-}, "wrapper");
-const select = style({
-  "@layer": {
-    [blocksLayer]: {
-      appearance: "none",
-      inlineSize: "100%"
-    }
-  }
-}, "select");
-const icon = style({
-  "@layer": {
-    [blocksLayer]: {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      pointerEvents: "none",
-      display: "flex",
-      alignItems: "center"
-    }
-  }
-}, "icon");
+var wrapper = "_1tosed90";
+var select = "_1tosed91";
+var icon = "_1tosed92";
 endFileScope();
 export {
   icon,

package/dist/styles/components/form/Select/select.css.ts.vanilla.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/styles/components/form/Select/select.css.ts.vanilla.mjs

@@ -0,0 +1 @@
+

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

@@ -1,70 +1,13 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./slider.css.ts.vanilla.cjs");
 fileScope.setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
-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");
+var container = "_11vw2ud0";
+var containerVertical = "_11vw2ud1";
+var track = "_11vw2ud2";
+var filledTrack = "_11vw2ud3";
+var thumb = "_11vw2ud4";
 fileScope.endFileScope();
 exports.container = container;
 exports.containerVertical = containerVertical;

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

@@ -1,69 +1,12 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./slider.css.ts.vanilla.mjs";
 setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
-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");
+var container = "_11vw2ud0";
+var containerVertical = "_11vw2ud1";
+var track = "_11vw2ud2";
+var filledTrack = "_11vw2ud3";
+var thumb = "_11vw2ud4";
 endFileScope();
 export {
   container,

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+

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

@@ -1,26 +1,10 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./switch.css.ts.vanilla.cjs");
 fileScope.setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks");
-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");
+var container = "tbb26a0";
+var input = "tbb26a1";
 fileScope.endFileScope();
 exports.container = container;
 exports.input = input;