@blockle/blocks 0.20.0-alpha1 → 1.0.0

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

@@ -1,74 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-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": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      position: "relative",
-      writingMode: "horizontal-tb"
-    }
-  }
-}, "container");
-const containerVertical = css.style({
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      writingMode: "vertical-lr"
-    }
-  }
-}, "containerVertical");
-const track = css.style({
-  "@layer": {
-    [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": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      position: "absolute",
-      blockSize: "100%",
-      borderRadius: "inherit",
-      selectors: {
-        [`${containerVertical} &`]: {
-          insetInlineEnd: "0%"
-        }
-      }
-    }
-  }
-}, "filledTrack");
-const thumb = css.style({
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      cursor: "pointer",
-      position: "absolute",
-      blockSize: "100%",
-      insetBlockStart: "50%",
-      transform: "translate(-50%, -50%)",
-      touchAction: "none",
-      border: "none",
-      selectors: {
-        [`${containerVertical} &`]: {
-          transform: "translate(-50%, 50%)"
-        }
-      }
-    }
-  }
-}, "thumb");
-fileScope.endFileScope();
-exports.container = container;
-exports.containerVertical = containerVertical;
-exports.filledTrack = filledTrack;
-exports.thumb = thumb;
-exports.track = track;

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

@@ -1,75 +0,0 @@
-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/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",
-      border: "none",
-      selectors: {
-        [`${containerVertical} &`]: {
-          transform: "translate(-50%, 50%)"
-        }
-      }
-    }
-  }
-}, "thumb");
-endFileScope();
-export {
-  container,
-  containerVertical,
-  filledTrack,
-  thumb,
-  track
-};

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

@@ -1,44 +0,0 @@
-"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

@@ -1,45 +0,0 @@
-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/components/form/Switch/Switch.cjs

@@ -1,71 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-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,
-  defaultChecked,
-  onChange,
-  ref,
-  ...restProps
-}) => {
-  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);
-    }
-  }, [checked]);
-  const toggle = react.useCallback(() => {
-    setIsChecked((checked2) => {
-      const newValue = !checked2;
-      if (onChange) {
-        onChange(newValue);
-      }
-      return newValue;
-    });
-  }, [onChange]);
-  const onChangeHandler = react.useCallback(
-    (event) => {
-      setIsChecked(event.target.checked);
-      if (onChange) {
-        onChange(event.target.checked);
-      }
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      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") {
-          return;
-        }
-        toggle();
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            className: components_form_Switch_switch_css_cjs.input,
-            checked: isChecked,
-            onChange: onChangeHandler,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: sliderClassName, "data-checked": isChecked })
-      ]
-    }
-  ) });
-};
-exports.Switch = Switch;

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

@@ -1,74 +0,0 @@
-'use client';
-
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { input, container } from "./switch.css.mjs";
-const Switch = ({
-  checked,
-  className,
-  defaultChecked,
-  onChange,
-  ref,
-  ...restProps
-}) => {
-  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);
-    }
-  }, [checked]);
-  const toggle = useCallback(() => {
-    setIsChecked((checked2) => {
-      const newValue = !checked2;
-      if (onChange) {
-        onChange(newValue);
-      }
-      return newValue;
-    });
-  }, [onChange]);
-  const onChangeHandler = useCallback(
-    (event) => {
-      setIsChecked(event.target.checked);
-      if (onChange) {
-        onChange(event.target.checked);
-      }
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classnames(className, container, baseClassName),
-      "data-checked": isChecked,
-      onClick: (event) => {
-        if (event.target.tagName === "INPUT") {
-          return;
-        }
-        toggle();
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            className: input,
-            checked: isChecked,
-            onChange: onChangeHandler,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: sliderClassName, "data-checked": isChecked })
-      ]
-    }
-  ) });
-};
-export {
-  Switch
-};

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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,26 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-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": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      cursor: "pointer",
-      userSelect: "none",
-      position: "relative"
-    }
-  }
-}, "container");
-const input = css.style({
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      opacity: 0,
-      maxBlockSize: 0,
-      maxInlineSize: 0
-    }
-  }
-}, "input");
-fileScope.endFileScope();
-exports.container = container;
-exports.input = input;

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

@@ -1,27 +0,0 @@
-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", "@blockle/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");
-endFileScope();
-export {
-  container,
-  input
-};

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

@@ -1,27 +0,0 @@
-"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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,29 +0,0 @@
-"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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,29 +0,0 @@
-"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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,31 +0,0 @@
-"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;