@blockle/blocks 0.9.1 → 0.11.0

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

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { containerVertical, container, track, filledTrack, thumb } from "./slider.css.mjs";
+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: container2, orientation, onChange }) {
+  useEffect(() => {
+    const element = container2.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);
+    };
+  }, [container2, 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] = useState(
+    getBoundValue(value ?? defaultValue, min, max, step)
+  );
+  const baseClass = useComponentStyles("slider", { base: true, variants: { size, colorScheme } });
+  const trackClass = useComponentStyles("slider", { track: true }, false);
+  const filledTrackClass = useComponentStyles("slider", { filledTrack: true }, false);
+  const thumbClass = useComponentStyles("slider", { thumb: true }, false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (value !== void 0) {
+      setInternValue(getBoundValue(value, min, max, step));
+    }
+  }, [value, min, max, step]);
+  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 = 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__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: classnames(
+        container,
+        orientation === "vertical" ? containerVertical : "",
+        baseClass
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classnames(track, trackClass), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classnames(filledTrack, filledTrackClass),
+            style: {
+              inlineSize: `${internValue / max * 100}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classnames(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__ */ jsx("input", { type: "hidden", name, value: internValue })
+      ]
+    }
+  );
+};
+export {
+  Slider
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+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");
+var container = "_11vw2ud0";
+var containerVertical = "_11vw2ud1";
+var track = "_11vw2ud2";
+var filledTrack = "_11vw2ud3";
+var thumb = "_11vw2ud4";
+fileScope.endFileScope();
+exports.container = container;
+exports.containerVertical = containerVertical;
+exports.filledTrack = filledTrack;
+exports.thumb = thumb;
+exports.track = track;

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

@@ -0,0 +1,17 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+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");
+var container = "_11vw2ud0";
+var containerVertical = "_11vw2ud1";
+var track = "_11vw2ud2";
+var filledTrack = "_11vw2ud3";
+var thumb = "_11vw2ud4";
+endFileScope();
+export {
+  container,
+  containerVertical,
+  filledTrack,
+  thumb,
+  track
+};

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");
-fileScope.setFileScope("src/components/form/Switch/switch.css.ts", "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");
+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");
+var container = "tbb26a0";
+var input = "tbb26a1";
 fileScope.endFileScope();
 exports.container = container;
 exports.input = input;

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

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

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

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

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

@@ -0,0 +1 @@
+

package/dist/styles/components/overlay/Dialog/Dialog.cjs

@@ -248,7 +248,10 @@ const Dialog = ({
 };
 exports.Dialog = Dialog;
 exports.Portal = Portal;
+exports.hasAnimationDuration = hasAnimationDuration;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
+exports.useLayer = useLayer;
 exports.usePreventBodyScroll = usePreventBodyScroll;
 exports.useRootAriaHidden = useRootAriaHidden;
+exports.useVisibilityState = useVisibilityState;

package/dist/styles/components/overlay/Dialog/Dialog.mjs

@@ -248,8 +248,11 @@ const Dialog = ({
 export {
   Dialog,
   Portal,
+  hasAnimationDuration,
   useIsomorphicLayoutEffect,
   useKeyboard,
+  useLayer,
   usePreventBodyScroll,
-  useRootAriaHidden
+  useRootAriaHidden,
+  useVisibilityState
 };

package/dist/styles/components/overlay/Dialog/dialog.css.cjs

@@ -1,23 +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/overlay/Dialog/dialog.css.ts", "blocks");
-const backdrop = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      contain: "layout",
-      display: "flex",
-      placeItems: "center",
-      position: "fixed",
-      inlineSize: "100%",
-      blockSize: "100%",
-      insetInlineStart: 0,
-      insetBlockStart: 0,
-      overflow: "hidden",
-      zIndex: 1e3
-    }
-  }
-}, "backdrop");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./dialog.css.ts.vanilla.cjs");
+fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
+var backdrop = "_1j8hm8d0";
 fileScope.endFileScope();
 exports.backdrop = backdrop;

package/dist/styles/components/overlay/Dialog/dialog.css.mjs

@@ -1,23 +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/overlay/Dialog/dialog.css.ts", "blocks");
-const backdrop = style({
-  "@layer": {
-    [blocksLayer]: {
-      contain: "layout",
-      display: "flex",
-      placeItems: "center",
-      position: "fixed",
-      inlineSize: "100%",
-      blockSize: "100%",
-      insetInlineStart: 0,
-      insetBlockStart: 0,
-      overflow: "hidden",
-      zIndex: 1e3
-    }
-  }
-}, "backdrop");
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./dialog.css.ts.vanilla.mjs";
+setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
+var backdrop = "_1j8hm8d0";
 endFileScope();
 export {
   backdrop

package/dist/styles/components/overlay/Dialog/dialog.css.ts.vanilla.cjs

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

package/dist/styles/components/overlay/Dialog/dialog.css.ts.vanilla.mjs

@@ -0,0 +1 @@
+

package/dist/styles/components/typography/Heading/heading.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/typography/Heading/heading.css.ts", "blocks");
-const heading = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      margin: 0,
-      padding: 0
-    }
-  }
-}, "heading");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./heading.css.ts.vanilla.cjs");
+fileScope.setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks");
+var heading = "_176zl350";
 fileScope.endFileScope();
 exports.heading = heading;

package/dist/styles/components/typography/Heading/heading.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/typography/Heading/heading.css.ts", "blocks");
-const heading = style({
-  "@layer": {
-    [blocksLayer]: {
-      margin: 0,
-      padding: 0
-    }
-  }
-}, "heading");
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./heading.css.ts.vanilla.mjs";
+setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks");
+var heading = "_176zl350";
 endFileScope();
 export {
   heading

package/dist/styles/components/typography/Heading/heading.css.ts.vanilla.cjs

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

package/dist/styles/components/typography/Heading/heading.css.ts.vanilla.mjs

@@ -0,0 +1 @@
+

package/dist/styles/components/typography/Text/text.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/typography/Text/text.css.ts", "blocks");
-const text = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      margin: 0,
-      padding: 0
-    }
-  }
-}, "text");
+require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
+require("./text.css.ts.vanilla.cjs");
+fileScope.setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks");
+var text = "tiyd9n0";
 fileScope.endFileScope();
 exports.text = text;

package/dist/styles/components/typography/Text/text.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/typography/Text/text.css.ts", "blocks");
-const text = style({
-  "@layer": {
-    [blocksLayer]: {
-      margin: 0,
-      padding: 0
-    }
-  }
-}, "text");
+import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
+import "./text.css.ts.vanilla.mjs";
+setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks");
+var text = "tiyd9n0";
 endFileScope();
 export {
   text

package/dist/styles/components/typography/Text/text.css.ts.vanilla.cjs

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

package/dist/styles/components/typography/Text/text.css.ts.vanilla.mjs

@@ -0,0 +1 @@
+

package/dist/styles/entries/reset.css.ts.vanilla.cjs

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

package/dist/styles/entries/reset.css.ts.vanilla.mjs

@@ -0,0 +1 @@
+