@blockle/blocks 0.19.0 → 0.20.0-alpha1

package/dist/components/form/Input/Input.cjs

@@ -0,0 +1,50 @@
+"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_Input_input_css_cjs = require("./input.css.cjs");
+const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const Input = ({
+  className,
+  endSlot,
+  name,
+  placeholder,
+  ref,
+  startSlot,
+  type = "text",
+  ...restProps
+}) => {
+  const id = react.useId();
+  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles(
+    "input",
+    { container: true },
+    false
+  );
+  const inputClassName = lib_theme_store_theme_cjs.getComponentStyles("input", { input: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(components_layout_Box_Box_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    components_layout_Box_Box_cjs.Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      className: lib_utils_classnames_cjs.classnames(containerClassName, className),
+      children: [
+        startSlot,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id,
+            ref,
+            name,
+            type,
+            placeholder,
+            className: lib_utils_classnames_cjs.classnames(components_form_Input_input_css_cjs.input, inputClassName),
+            ...restProps
+          }
+        ),
+        endSlot
+      ]
+    }
+  ) });
+};
+exports.Input = Input;

package/dist/components/form/Input/Input.mjs

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+import { input } from "./input.css.mjs";
+import { Box } from "../../layout/Box/Box.mjs";
+const Input = ({
+  className,
+  endSlot,
+  name,
+  placeholder,
+  ref,
+  startSlot,
+  type = "text",
+  ...restProps
+}) => {
+  const id = useId();
+  const containerClassName = getComponentStyles(
+    "input",
+    { container: true },
+    false
+  );
+  const inputClassName = getComponentStyles("input", { input: true });
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      className: classnames(containerClassName, className),
+      children: [
+        startSlot,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            ref,
+            name,
+            type,
+            placeholder,
+            className: classnames(input, inputClassName),
+            ...restProps
+          }
+        ),
+        endSlot
+      ]
+    }
+  ) });
+};
+export {
+  Input
+};

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

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

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

@@ -0,0 +1 @@
+

package/dist/{styles/components → components}/form/Input/input.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/Input/input.css.ts", "@blockle/blocks");
 const input = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       appearance: "none",
       width: "100%",
       selectors: {

package/dist/components/form/Label/Label.cjs

@@ -0,0 +1,29 @@
+"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 lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const Label = ({
+  asSpan,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = asSpan ? "span" : "label";
+  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: lib_utils_classnames_cjs.classnames(containerClassName, className, lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
+      ...restProps,
+      children
+    }
+  );
+};
+exports.Label = Label;

package/dist/components/form/Label/Label.mjs

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+const Label = ({
+  asSpan,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = asSpan ? "span" : "label";
+  const containerClassName = getComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classnames(containerClassName, className, atoms({ cursor })),
+      ...restProps,
+      children
+    }
+  );
+};
+export {
+  Label
+};

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

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

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

@@ -0,0 +1 @@
+

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

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

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

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

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

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1 @@
+

package/dist/{styles/components → components}/form/Radio/radio.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/Radio/radio.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",
       cursor: "pointer",
       overflow: "hidden"
@@ -17,7 +17,7 @@ const input = css.style({
   inset: 0,
   opacity: 0,
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       all: "unset"
     }
   }

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

@@ -0,0 +1,64 @@
+"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/{styles/components → components}/form/Select/Select.mjs

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
 import { select, icon, wrapper } from "./select.css.mjs";
-import { useComponentStyles, Box } from "../../display/Divider/Divider.mjs";
+import { Box } from "../../layout/Box/Box.mjs";
 const Select = ({
   children,
   placeholder,
@@ -10,9 +11,16 @@ const Select = ({
   ref,
   ...restProps
 }) => {
-  const wrapperClassName = useComponentStyles("select", { wrapper: true }, false);
-  const selectClassName = useComponentStyles("select", { select: true, variants: { variant } });
-  const iconClassName = useComponentStyles("select", { icon: true }, false);
+  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",
@@ -26,12 +34,21 @@ const Select = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box, { className: classnames(icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
+    /* @__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",
       {

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

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

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

@@ -0,0 +1 @@
+

package/dist/{styles/components → components}/form/Select/select.css.cjs

@@ -1,18 +1,18 @@
 "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/Select/select.css.ts", "@blockle/blocks");
 const wrapper = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       position: "relative"
     }
   }
 }, "wrapper");
 const select = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       appearance: "none",
       inlineSize: "100%"
     }
@@ -20,7 +20,7 @@ const select = css.style({
 }, "select");
 const icon = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       position: "absolute",
       right: 0,
       top: 0,

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

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