@blockle/blocks 0.20.0-alpha1 → 1.0.0

package/dist/components/form/Radio/Radio.cjs

@@ -1,47 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-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_Radio_radio_css_cjs = require("./radio.css.cjs");
-const components_form_Label_Label_cjs = require("../Label/Label.cjs");
-const Radio = ({
-  name,
-  children,
-  className,
-  ref,
-  ...restProps
-}) => {
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles("radio", { base: true }, false);
-  const iconClassName = lib_theme_store_theme_cjs.getComponentStyles("radio", { icon: true }, false);
-  const labelClassName = lib_theme_store_theme_cjs.getComponentStyles("checkbox", { label: true }, false);
-  const input = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: lib_utils_classnames_cjs.classnames(components_form_Radio_radio_css_cjs.container, containerClassName, className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref,
-            type: "radio",
-            name,
-            className: components_form_Radio_radio_css_cjs.input,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib_utils_classnames_cjs.classnames(components_form_Radio_radio_css_cjs.icon, iconClassName) })
-      ]
-    }
-  );
-  if (!children) {
-    return input;
-  }
-  return (
-    // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
-      input,
-      /* @__PURE__ */ jsxRuntime.jsx(components_form_Label_Label_cjs.Label, { asSpan: true, children })
-    ] })
-  );
-};
-exports.Radio = Radio;

package/dist/components/form/Radio/Radio.mjs

@@ -1,48 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { input, icon, container } from "./radio.css.mjs";
-import { Label } from "../Label/Label.mjs";
-const Radio = ({
-  name,
-  children,
-  className,
-  ref,
-  ...restProps
-}) => {
-  const containerClassName = getComponentStyles("radio", { base: true }, false);
-  const iconClassName = getComponentStyles("radio", { icon: true }, false);
-  const labelClassName = getComponentStyles("checkbox", { label: true }, false);
-  const input$1 = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classnames(container, containerClassName, className),
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "radio",
-            name,
-            className: input,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
-      ]
-    }
-  );
-  if (!children) {
-    return input$1;
-  }
-  return (
-    // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-    /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
-      input$1,
-      /* @__PURE__ */ jsx(Label, { asSpan: true, children })
-    ] })
-  );
-};
-export {
-  Radio
-};

package/dist/components/form/Radio/RadioGroup.cjs

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

package/dist/components/form/Radio/RadioGroup.mjs

@@ -1 +0,0 @@
-

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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,31 +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/Radio/radio.css.ts", "@blockle/blocks");
-const container = css.style({
-  "@layer": {
-    [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": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      all: "unset"
-    }
-  }
-}, "input");
-const icon = css.style({
-  pointerEvents: "none"
-}, "icon");
-fileScope.endFileScope();
-exports.container = container;
-exports.icon = icon;
-exports.input = input;

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

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

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

@@ -1,64 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-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_Select_select_css_cjs = require("./select.css.cjs");
-const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
-const Select = ({
-  children,
-  placeholder,
-  className,
-  variant,
-  ref,
-  ...restProps
-}) => {
-  const wrapperClassName = lib_theme_store_theme_cjs.getComponentStyles(
-    "select",
-    { wrapper: true },
-    false
-  );
-  const selectClassName = lib_theme_store_theme_cjs.getComponentStyles("select", {
-    select: true,
-    variants: { variant }
-  });
-  const iconClassName = lib_theme_store_theme_cjs.getComponentStyles("select", { icon: true }, false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(components_layout_Box_Box_cjs.Box, { className: lib_utils_classnames_cjs.classnames(components_form_Select_select_css_cjs.wrapper, wrapperClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "select",
-      {
-        ref,
-        className: lib_utils_classnames_cjs.classnames(components_form_Select_select_css_cjs.select, selectClassName, className),
-        ...restProps,
-        children: [
-          placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
-          children
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      components_layout_Box_Box_cjs.Box,
-      {
-        className: lib_utils_classnames_cjs.classnames(components_form_Select_select_css_cjs.icon, iconClassName),
-        role: "presentation",
-        "aria-hidden": true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {})
-      }
-    )
-  ] });
-};
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", style: { width: "1rem", height: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
-        clipRule: "evenodd"
-      }
-    ) })
-  );
-};
-exports.Select = Select;

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

@@ -1,65 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { select, icon, wrapper } from "./select.css.mjs";
-import { Box } from "../../layout/Box/Box.mjs";
-const Select = ({
-  children,
-  placeholder,
-  className,
-  variant,
-  ref,
-  ...restProps
-}) => {
-  const wrapperClassName = getComponentStyles(
-    "select",
-    { wrapper: true },
-    false
-  );
-  const selectClassName = getComponentStyles("select", {
-    select: true,
-    variants: { variant }
-  });
-  const iconClassName = getComponentStyles("select", { icon: true }, false);
-  return /* @__PURE__ */ jsxs(Box, { className: classnames(wrapper, wrapperClassName), children: [
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        ref,
-        className: classnames(select, selectClassName, className),
-        ...restProps,
-        children: [
-          placeholder && /* @__PURE__ */ jsx("option", { value: "", children: placeholder }),
-          children
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: classnames(icon, iconClassName),
-        role: "presentation",
-        "aria-hidden": true,
-        children: /* @__PURE__ */ jsx(DefaultIcon, {})
-      }
-    )
-  ] });
-};
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
-    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", style: { width: "1rem", height: "1rem" }, children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
-        clipRule: "evenodd"
-      }
-    ) })
-  );
-};
-export {
-  Select
-};

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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,37 +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/Select/select.css.ts", "@blockle/blocks");
-const wrapper = css.style({
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      position: "relative"
-    }
-  }
-}, "wrapper");
-const select = css.style({
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      appearance: "none",
-      inlineSize: "100%"
-    }
-  }
-}, "select");
-const icon = css.style({
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      pointerEvents: "none",
-      display: "flex",
-      alignItems: "center"
-    }
-  }
-}, "icon");
-fileScope.endFileScope();
-exports.icon = icon;
-exports.select = select;
-exports.wrapper = wrapper;

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

@@ -1,38 +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/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");
-endFileScope();
-export {
-  icon,
-  select,
-  wrapper
-};

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

@@ -1,139 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const hooks_useControlledValue_useControlledValue_cjs = require("../../../hooks/useControlledValue/useControlledValue.cjs");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const lib_utils_math_cjs = require("../../../lib/utils/math.cjs");
-const components_form_Slider_slider_css_cjs = require("./slider.css.cjs");
-const components_form_Slider_usePointerProgress_cjs = require("./usePointerProgress.cjs");
-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 = lib_theme_store_theme_cjs.getComponentStyles("slider", {
-    base: true,
-    variants: { size, colorScheme, disabled }
-  });
-  const trackClass = lib_theme_store_theme_cjs.getComponentStyles("slider", { track: true }, false);
-  const filledTrackClass = lib_theme_store_theme_cjs.getComponentStyles(
-    "slider",
-    { filledTrack: true },
-    false
-  );
-  const thumbClass = lib_theme_store_theme_cjs.getComponentStyles("slider", { thumb: true }, false);
-  const containerRef = react.useRef(null);
-  const [currentValue, setValue] = hooks_useControlledValue_useControlledValue_cjs.useControlledValue({
-    defaultValue,
-    value,
-    onChange,
-    transformValue: (value2) => lib_utils_math_cjs.roundToPrecision(lib_utils_math_cjs.getBoundValue(value2, min, max, step), precision)
-  });
-  components_form_Slider_usePointerProgress_cjs.usePointerProgress({
-    container: containerRef,
-    orientation,
-    onChange(progress) {
-      if (orientation === "vertical") {
-        setValue(max * (1 - progress));
-      } else {
-        setValue(max * progress);
-      }
-    }
-  });
-  const onKeyDown = react.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__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: lib_utils_classnames_cjs.classnames(
-        components_form_Slider_slider_css_cjs.container,
-        orientation === "vertical" ? components_form_Slider_slider_css_cjs.containerVertical : "",
-        baseClass
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib_utils_classnames_cjs.classnames(components_form_Slider_slider_css_cjs.track, trackClass), children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: lib_utils_classnames_cjs.classnames(components_form_Slider_slider_css_cjs.filledTrack, filledTrackClass),
-            style: {
-              inlineSize: `${currentValue / max * 100}%`
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: lib_utils_classnames_cjs.classnames(components_form_Slider_slider_css_cjs.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__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "hidden",
-            disabled,
-            name,
-            value: currentValue
-          }
-        )
-      ]
-    }
-  );
-};
-exports.Slider = Slider;

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

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

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

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

@@ -1 +0,0 @@
-