@blockle/blocks 0.9.1 → 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");
-fileScope.setFileScope("src/components/display/Divider/divider.css.ts", "blocks");
-const divider = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      clear: "both",
-      blockSize: "1px"
-    }
-  }
-}, "divider");
+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");
+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";
-setFileScope("src/components/display/Divider/divider.css.ts", "blocks");
-const divider = style({
-  "@layer": {
-    [blocksLayer]: {
-      clear: "both",
-      blockSize: "1px"
-    }
-  }
-}, "divider");
+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");
+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");
-fileScope.setFileScope("src/components/form/Button/Button.css.ts", "blocks");
-const buttonReset = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      all: "unset",
-      cursor: "pointer"
-    }
-  }
-}, "buttonReset");
+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");
+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";
-setFileScope("src/components/form/Button/Button.css.ts", "blocks");
-const buttonReset = style({
-  "@layer": {
-    [blocksLayer]: {
-      all: "unset",
-      cursor: "pointer"
-    }
-  }
-}, "buttonReset");
+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");
+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");
-fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "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");
+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");
+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";
-setFileScope("src/components/form/Checkbox/checkbox.css.ts", "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");
+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");
+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");
-fileScope.setFileScope("src/components/form/Input/input.css.ts", "blocks");
-const input = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      appearance: "none",
-      selectors: {
-        "&:-webkit-autofill": {
-          transitionDelay: "9999s"
-        }
-      }
-    }
-  }
-}, "input");
+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");
+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";
-setFileScope("src/components/form/Input/input.css.ts", "blocks");
-const input = style({
-  "@layer": {
-    [blocksLayer]: {
-      appearance: "none",
-      selectors: {
-        "&:-webkit-autofill": {
-          transitionDelay: "9999s"
-        }
-      }
-    }
-  }
-}, "input");
+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");
+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");
-fileScope.setFileScope("src/components/form/Radio/radio.css.ts", "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");
+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");
+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";
-setFileScope("src/components/form/Radio/radio.css.ts", "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");
+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");
+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");
-fileScope.setFileScope("src/components/form/Select/select.css.ts", "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");
+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");
+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";
-setFileScope("src/components/form/Select/select.css.ts", "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");
+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");
+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.cjs

@@ -0,0 +1,155 @@
+"use strict";
+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_Slider_slider_css_cjs = require("./slider.css.cjs");
+function getProgress(event, rect) {
+  const { clientX, clientY } = event;
+  const { width, height, left, top } = rect;
+  const x = (clientX - left) / width;
+  const y = (clientY - top) / height;
+  return [x, y];
+}
+function usePointerProgress({ container, orientation, onChange }) {
+  react.useEffect(() => {
+    const element = container.current;
+    function pointerdown(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!element) {
+        return;
+      }
+      const containerRect = element.getBoundingClientRect();
+      const axisIndex = orientation === "horizontal" ? 0 : 1;
+      const progress = getProgress(event, containerRect);
+      onChange(progress[axisIndex]);
+      const pointermove = (event2) => {
+        event2.preventDefault();
+        const progress2 = getProgress(event2, containerRect);
+        onChange(progress2[axisIndex]);
+      };
+      const pointerup = () => {
+        document.removeEventListener("pointermove", pointermove);
+        document.removeEventListener("pointerup", pointerup);
+      };
+      document.addEventListener("pointermove", pointermove);
+      document.addEventListener("pointerup", pointerup);
+    }
+    if (!element) {
+      return;
+    }
+    element.addEventListener("pointerdown", pointerdown);
+    return () => {
+      element.removeEventListener("pointerdown", pointerdown);
+    };
+  }, [container, onChange, orientation]);
+}
+function getBoundValue(newValue, min, max, step) {
+  let value = Math.round(newValue / step) * step;
+  value = Math.max(min, Math.min(max, value));
+  return value;
+}
+const Slider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  defaultValue = 0,
+  onChange,
+  value,
+  name,
+  size,
+  colorScheme,
+  ...restProps
+}) => {
+  const [internValue, setInternValue] = react.useState(
+    getBoundValue(value ?? defaultValue, min, max, step)
+  );
+  const baseClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { base: true, variants: { size, colorScheme } });
+  const trackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { track: true }, false);
+  const filledTrackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { filledTrack: true }, false);
+  const thumbClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { thumb: true }, false);
+  const containerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (value !== void 0) {
+      setInternValue(getBoundValue(value, min, max, step));
+    }
+  }, [value, min, max, step]);
+  react.useEffect(() => {
+    if (onChange && internValue !== value) {
+      onChange(internValue);
+    }
+  }, [internValue, onChange, value]);
+  usePointerProgress({
+    container: containerRef,
+    orientation,
+    onChange(progress) {
+      if (orientation === "vertical") {
+        progress = 1 - progress;
+      }
+      setInternValue(getBoundValue(max * progress, min, max, step));
+    }
+  });
+  const onKeyDown = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const specialKey = ["PageUp", "PageDown"];
+      const stepModifier = event.shiftKey || specialKey.includes(event.key) ? (max - min) / 10 : step;
+      if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") {
+        return setInternValue((value2) => getBoundValue(value2 - stepModifier, min, max, step));
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
+        return setInternValue((value2) => getBoundValue(value2 + stepModifier, min, max, step));
+      }
+      if (event.key === "Home") {
+        return setInternValue(min);
+      }
+      if (event.key === "End") {
+        return setInternValue(max);
+      }
+    },
+    [max, min, step]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: styles_components_display_Divider_Divider_cjs.classnames(
+        styles_components_form_Slider_slider_css_cjs.container,
+        orientation === "vertical" ? styles_components_form_Slider_slider_css_cjs.containerVertical : "",
+        baseClass
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.track, trackClass), children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.filledTrack, filledTrackClass),
+            style: {
+              inlineSize: `${internValue / max * 100}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.thumb, thumbClass),
+            tabIndex: 0,
+            role: "slider",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": internValue,
+            "aria-orientation": orientation,
+            style: {
+              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${internValue / max * 100}%`
+            },
+            onKeyDown,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: internValue })
+      ]
+    }
+  );
+};
+exports.Slider = Slider;