@blockle/blocks 0.19.0 → 0.20.0-alpha1

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

@@ -0,0 +1,142 @@
+'use client';
+
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useCallback } from "react";
+import { useControlledValue } from "../../../hooks/useControlledValue/useControlledValue.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+import { roundToPrecision, getBoundValue } from "../../../lib/utils/math.mjs";
+import { filledTrack, track, thumb, containerVertical, container } from "./slider.css.mjs";
+import { usePointerProgress } from "./usePointerProgress.mjs";
+const usableKeys = /* @__PURE__ */ new Set([
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "Home",
+  "End"
+]);
+const Slider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  defaultValue = 0,
+  onChange,
+  value,
+  name,
+  size,
+  colorScheme,
+  disabled,
+  precision = 2,
+  ...restProps
+}) => {
+  const baseClass = getComponentStyles("slider", {
+    base: true,
+    variants: { size, colorScheme, disabled }
+  });
+  const trackClass = getComponentStyles("slider", { track: true }, false);
+  const filledTrackClass = getComponentStyles(
+    "slider",
+    { filledTrack: true },
+    false
+  );
+  const thumbClass = getComponentStyles("slider", { thumb: true }, false);
+  const containerRef = useRef(null);
+  const [currentValue, setValue] = useControlledValue({
+    defaultValue,
+    value,
+    onChange,
+    transformValue: (value2) => roundToPrecision(getBoundValue(value2, min, max, step), precision)
+  });
+  usePointerProgress({
+    container: containerRef,
+    orientation,
+    onChange(progress) {
+      if (orientation === "vertical") {
+        setValue(max * (1 - progress));
+      } else {
+        setValue(max * progress);
+      }
+    }
+  });
+  const onKeyDown = useCallback(
+    (event) => {
+      if (!usableKeys.has(event.key)) {
+        return;
+      }
+      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 setValue(currentValue - stepModifier);
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
+        return setValue(currentValue + stepModifier);
+      }
+      if (event.key === "Home") {
+        return setValue(min);
+      }
+      if (event.key === "End") {
+        return setValue(max);
+      }
+    },
+    [max, min, step, setValue, currentValue]
+  );
+  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: `${currentValue / max * 100}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: classnames(thumb, thumbClass),
+            role: "slider",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": currentValue,
+            "aria-orientation": orientation,
+            style: {
+              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${currentValue / max * 100}%`
+            },
+            onKeyDown,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "hidden",
+            disabled,
+            name,
+            value: currentValue
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Slider
+};

package/dist/components/form/Slider/index.cjs

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

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

@@ -0,0 +1 @@
+

package/dist/{styles/components → components}/form/Slider/slider.css.cjs

@@ -1,11 +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");
+const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.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]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       position: "relative",
       writingMode: "horizontal-tb"
     }
@@ -13,14 +13,14 @@ const container = css.style({
 }, "container");
 const containerVertical = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       writingMode: "vertical-lr"
     }
   }
 }, "containerVertical");
 const track = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       cursor: "pointer",
       position: "absolute",
       inlineSize: "100%",
@@ -36,7 +36,7 @@ const track = css.style({
 }, "track");
 const filledTrack = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       position: "absolute",
       blockSize: "100%",
       borderRadius: "inherit",
@@ -50,7 +50,7 @@ const filledTrack = css.style({
 }, "filledTrack");
 const thumb = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       cursor: "pointer",
       position: "absolute",
       blockSize: "100%",

package/dist/components/form/Slider/usePointerProgress.cjs

@@ -0,0 +1,44 @@
+"use strict";
+const react = require("react");
+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]);
+}
+exports.usePointerProgress = usePointerProgress;

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

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+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 }) {
+  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]);
+}
+export {
+  usePointerProgress
+};

package/dist/{styles/components → components}/form/Switch/Switch.cjs

@@ -1,9 +1,9 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
-const styles_components_form_Switch_switch_css_cjs = require("./switch.css.cjs");
-const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
+const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
+const components_form_Switch_switch_css_cjs = require("./switch.css.cjs");
 const Switch = ({
   checked,
   className,
@@ -12,9 +12,11 @@ const Switch = ({
   ref,
   ...restProps
 }) => {
-  const [isChecked, setIsChecked] = react.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);
+  const [isChecked, setIsChecked] = react.useState(
+    defaultChecked || checked || false
+  );
+  const baseClassName = lib_theme_store_theme_cjs.getComponentStyles("switch", { base: true });
+  const sliderClassName = lib_theme_store_theme_cjs.getComponentStyles("switch", { slider: true }, false);
   react.useEffect(() => {
     if (checked !== void 0) {
       setIsChecked(checked);
@@ -41,7 +43,7 @@ const Switch = ({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(className, styles_components_form_Switch_switch_css_cjs.container, baseClassName),
+      className: lib_utils_classnames_cjs.classnames(className, components_form_Switch_switch_css_cjs.container, baseClassName),
       "data-checked": isChecked,
       onClick: (event) => {
         if (event.target.tagName === "INPUT") {
@@ -55,7 +57,7 @@ const Switch = ({
           {
             ref,
             type: "checkbox",
-            className: styles_components_form_Switch_switch_css_cjs.input,
+            className: components_form_Switch_switch_css_cjs.input,
             checked: isChecked,
             onChange: onChangeHandler,
             ...restProps

package/dist/{styles/components → components}/form/Switch/Switch.mjs

@@ -1,8 +1,10 @@
+'use client';
+
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
-import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
 import { input, container } from "./switch.css.mjs";
-import { useComponentStyles } from "../../display/Divider/Divider.mjs";
 const Switch = ({
   checked,
   className,
@@ -11,9 +13,11 @@ const Switch = ({
   ref,
   ...restProps
 }) => {
-  const [isChecked, setIsChecked] = useState(defaultChecked || checked || false);
-  const baseClassName = useComponentStyles("switch", { base: true });
-  const sliderClassName = useComponentStyles("switch", { slider: true }, false);
+  const [isChecked, setIsChecked] = useState(
+    defaultChecked || checked || false
+  );
+  const baseClassName = getComponentStyles("switch", { base: true });
+  const sliderClassName = getComponentStyles("switch", { slider: true }, false);
   useEffect(() => {
     if (checked !== void 0) {
       setIsChecked(checked);

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

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

package/dist/components/form/Switch/index.mjs

@@ -0,0 +1 @@
+

package/dist/{styles/components → components}/form/Switch/switch.css.cjs

@@ -1,11 +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");
+const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.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]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       cursor: "pointer",
       userSelect: "none",
       position: "relative"
@@ -14,7 +14,7 @@ const container = css.style({
 }, "container");
 const input = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       opacity: 0,
       maxBlockSize: 0,
       maxInlineSize: 0

package/dist/components/layout/Box/Box.cjs

@@ -0,0 +1,27 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_asChildRenderer_createAsChildTemplate_cjs = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
+const lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
+const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const { Template, Slot } = lib_asChildRenderer_createAsChildTemplate_cjs.createAsChildTemplate("div");
+const Box = ({
+  asChild,
+  className,
+  children,
+  ref,
+  ...restProps
+}) => {
+  const [atomsProps, otherProps] = lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Template,
+    {
+      ref,
+      asChild,
+      className: lib_utils_classnames_cjs.classnames(className, lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
+      ...otherProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
+    }
+  );
+};
+exports.Box = Box;

package/dist/components/layout/Box/Box.mjs

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.mjs";
+import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+const { Template, Slot } = createAsChildTemplate("div");
+const Box = ({
+  asChild,
+  className,
+  children,
+  ref,
+  ...restProps
+}) => {
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsx(
+    Template,
+    {
+      ref,
+      asChild,
+      className: classnames(className, atoms(atomsProps)),
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(Slot, { children })
+    }
+  );
+};
+export {
+  Box
+};

package/dist/components/layout/Box/index.cjs

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

package/dist/components/layout/Box/index.mjs

@@ -0,0 +1 @@
+

package/dist/components/layout/Inline/Inline.cjs

@@ -0,0 +1,29 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_css_flexbox_flexbox_cjs = require("../../../lib/css/flexbox/flexbox.cjs");
+const components_layout_Box_Box_cjs = require("../Box/Box.cjs");
+const Inline = ({
+  alignX,
+  alignY,
+  tag: Tag = "div",
+  children,
+  display = "flex",
+  spacing,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_layout_Box_Box_cjs.Box,
+    {
+      asChild: true,
+      display,
+      gap: spacing,
+      flexDirection: "row",
+      justifyContent: alignX ? lib_css_flexbox_flexbox_cjs.justifyContentMap[alignX] : void 0,
+      alignItems: alignY ? lib_css_flexbox_flexbox_cjs.alignItemsMap[alignY] : void 0,
+      flexWrap: "wrap",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
+    }
+  );
+};
+exports.Inline = Inline;

package/dist/components/layout/Inline/Inline.mjs

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { alignItemsMap, justifyContentMap } from "../../../lib/css/flexbox/flexbox.mjs";
+import { Box } from "../Box/Box.mjs";
+const Inline = ({
+  alignX,
+  alignY,
+  tag: Tag = "div",
+  children,
+  display = "flex",
+  spacing,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      display,
+      gap: spacing,
+      flexDirection: "row",
+      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
+      alignItems: alignY ? alignItemsMap[alignY] : void 0,
+      flexWrap: "wrap",
+      ...props,
+      children: /* @__PURE__ */ jsx(Tag, { children })
+    }
+  );
+};
+export {
+  Inline
+};

package/dist/components/layout/Inline/index.cjs

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

package/dist/components/layout/Inline/index.mjs

@@ -0,0 +1 @@
+

package/dist/components/layout/Stack/Stack.cjs

@@ -0,0 +1,29 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_css_flexbox_flexbox_cjs = require("../../../lib/css/flexbox/flexbox.cjs");
+const components_layout_Box_Box_cjs = require("../Box/Box.cjs");
+const Stack = ({
+  tag: Tag = "div",
+  display = "flex",
+  children,
+  spacing,
+  alignX,
+  ...restProps
+}) => {
+  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && Tag !== "ol") {
+    console.warn('Stack: "start" prop is only valid with tag="ol"');
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_layout_Box_Box_cjs.Box,
+    {
+      asChild: true,
+      display,
+      gap: spacing,
+      flexDirection: "column",
+      alignItems: alignX ? lib_css_flexbox_flexbox_cjs.alignItemsMap[alignX] : void 0,
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
+    }
+  );
+};
+exports.Stack = Stack;

package/dist/components/layout/Stack/Stack.mjs

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { alignItemsMap } from "../../../lib/css/flexbox/flexbox.mjs";
+import { Box } from "../Box/Box.mjs";
+const Stack = ({
+  tag: Tag = "div",
+  display = "flex",
+  children,
+  spacing,
+  alignX,
+  ...restProps
+}) => {
+  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && Tag !== "ol") {
+    console.warn('Stack: "start" prop is only valid with tag="ol"');
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      display,
+      gap: spacing,
+      flexDirection: "column",
+      alignItems: alignX ? alignItemsMap[alignX] : void 0,
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Tag, { children })
+    }
+  );
+};
+export {
+  Stack
+};

package/dist/components/layout/Stack/index.cjs

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

package/dist/components/layout/Stack/index.mjs

@@ -0,0 +1 @@
+

package/dist/components/navigation/Link/Link.cjs

@@ -0,0 +1,31 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_asChildRenderer_createAsChildTemplate_cjs = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
+const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
+const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
+const { Template, Slot } = lib_asChildRenderer_createAsChildTemplate_cjs.createAsChildTemplate("a");
+const Link = ({
+  asChild,
+  children,
+  className,
+  ref,
+  underline,
+  variant,
+  ...restProps
+}) => {
+  const linkClassName = lib_theme_store_theme_cjs.getComponentStyles("link", {
+    base: true,
+    variants: { variant, underline }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Template,
+    {
+      asChild,
+      ref,
+      className: lib_utils_classnames_cjs.classnames(className, linkClassName),
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
+    }
+  );
+};
+exports.Link = Link;

package/dist/components/navigation/Link/Link.mjs

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+const { Template, Slot } = createAsChildTemplate("a");
+const Link = ({
+  asChild,
+  children,
+  className,
+  ref,
+  underline,
+  variant,
+  ...restProps
+}) => {
+  const linkClassName = getComponentStyles("link", {
+    base: true,
+    variants: { variant, underline }
+  });
+  return /* @__PURE__ */ jsx(
+    Template,
+    {
+      asChild,
+      ref,
+      className: classnames(className, linkClassName),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Slot, { children })
+    }
+  );
+};
+export {
+  Link
+};

package/dist/components/navigation/Link/index.cjs

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

package/dist/components/navigation/Link/index.mjs

@@ -0,0 +1 @@
+