@blockle/blocks-react 1.0.0

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const blocksCore = require("@blockle/blocks-core");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks-react");
+const container = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+});
+const input = css.style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      all: "unset"
+    }
+  }
+});
+const icon = css.style({
+  pointerEvents: "none"
+});
+fileScope.endFileScope();
+exports.container = container;
+exports.icon = icon;
+exports.input = input;

package/dist/components/form/Radio/radio.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const input: string;
+export declare const icon: string;

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

@@ -0,0 +1,32 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks-react");
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+});
+const input = style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset"
+    }
+  }
+});
+const icon = style({
+  pointerEvents: "none"
+});
+endFileScope();
+export {
+  container,
+  icon,
+  input
+};

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

@@ -0,0 +1,73 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const select_css = require("./select.css.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const Box = require("../../layout/Box/Box.cjs");
+const Select = ({
+  children,
+  placeholder,
+  className,
+  variant,
+  ref,
+  ...restProps
+}) => {
+  const wrapperClassName = useComponentStyles.useComponentStyles(
+    "select",
+    { wrapper: true },
+    false
+  );
+  const selectClassName = useComponentStyles.useComponentStyles("select", {
+    select: true,
+    variants: { variant }
+  });
+  const iconClassName = useComponentStyles.useComponentStyles("select", { icon: true }, false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { className: blocksCore.classnames(select_css.wrapper, wrapperClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        ref,
+        className: blocksCore.classnames(select_css.select, selectClassName, className),
+        ...restProps,
+        children: [
+          placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Box.Box,
+      {
+        className: blocksCore.classnames(select_css.icon, iconClassName),
+        role: "presentation",
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {})
+      }
+    )
+  ] });
+};
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        role: "presentation",
+        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.d.ts

@@ -0,0 +1,11 @@
+import { ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
+import { default as React } from 'react';
+type SelectTheme = ComponentThemes['select'];
+export type SelectProps = {
+    children: React.ReactNode;
+    placeholder?: string;
+    ref?: React.Ref<HTMLSelectElement>;
+    variant?: SelectTheme['variants']['variant'];
+} & HTMLElementProps<HTMLSelectElement>;
+export declare const Select: React.FC<SelectProps>;
+export {};

package/dist/components/form/Select/Select.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { select, icon, wrapper } from "./select.css.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Box } from "../../layout/Box/Box.js";
+const Select = ({
+  children,
+  placeholder,
+  className,
+  variant,
+  ref,
+  ...restProps
+}) => {
+  const wrapperClassName = useComponentStyles(
+    "select",
+    { wrapper: true },
+    false
+  );
+  const selectClassName = useComponentStyles("select", {
+    select: true,
+    variants: { variant }
+  });
+  const iconClassName = useComponentStyles("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
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        role: "presentation",
+        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/Select.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Select, SelectProps } from './Select';
+declare const _default: Meta<typeof Select>;
+export default _default;
+export declare const Default: StoryObj<SelectProps>;

package/dist/components/form/Select/index.d.ts

@@ -0,0 +1 @@
+export { Select, type SelectProps } from './Select';

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const blocksCore = require("@blockle/blocks-core");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks-react");
+const wrapper = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      position: "relative"
+    }
+  }
+});
+const select = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      appearance: "none",
+      inlineSize: "100%"
+    }
+  }
+});
+const icon = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      display: "flex",
+      alignItems: "center"
+    }
+  }
+});
+fileScope.endFileScope();
+exports.icon = icon;
+exports.select = select;
+exports.wrapper = wrapper;

package/dist/components/form/Select/select.css.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapper: string;
+export declare const select: string;
+export declare const icon: string;

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

@@ -0,0 +1,38 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks-react");
+const wrapper = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative"
+    }
+  }
+});
+const select = style({
+  "@layer": {
+    [blocksLayer]: {
+      appearance: "none",
+      inlineSize: "100%"
+    }
+  }
+});
+const icon = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      display: "flex",
+      alignItems: "center"
+    }
+  }
+});
+endFileScope();
+export {
+  icon,
+  select,
+  wrapper
+};

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

@@ -0,0 +1,139 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const react = require("react");
+const useControlledValue = require("../../../hooks/useControlledValue/useControlledValue.cjs");
+const slider_css = require("./slider.css.cjs");
+const usePointerProgress = require("./usePointerProgress.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const usableKeys = /* @__PURE__ */ new Set([
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "Home",
+  "End"
+]);
+const Slider = ({
+  min = 0,
+  max = 100,
+  step = 0.01,
+  orientation = "horizontal",
+  defaultValue = 0,
+  onChange,
+  value,
+  name,
+  size,
+  colorScheme,
+  disabled,
+  precision = 2,
+  ...restProps
+}) => {
+  const baseClass = useComponentStyles.useComponentStyles("slider", {
+    base: true,
+    variants: { size, colorScheme, disabled }
+  });
+  const trackClass = useComponentStyles.useComponentStyles("slider", { track: true }, false);
+  const filledTrackClass = useComponentStyles.useComponentStyles(
+    "slider",
+    { filledTrack: true },
+    false
+  );
+  const thumbClass = useComponentStyles.useComponentStyles("slider", { thumb: true }, false);
+  const containerRef = react.useRef(null);
+  const [currentValue, setValue] = useControlledValue.useControlledValue({
+    defaultValue,
+    value,
+    onChange,
+    transformValue: (value2) => blocksCore.roundToPrecision(blocksCore.getBoundValue(value2, min, max, step), precision)
+  });
+  usePointerProgress.usePointerProgress({
+    container: containerRef,
+    orientation,
+    onChange(progress) {
+      if (orientation === "vertical") {
+        progress = 1 - progress;
+      }
+      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: blocksCore.classnames(
+        slider_css.container,
+        orientation === "vertical" ? slider_css.containerVertical : "",
+        baseClass
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: blocksCore.classnames(slider_css.track, trackClass), children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: blocksCore.classnames(slider_css.filledTrack, filledTrackClass),
+            style: {
+              inlineSize: `${currentValue / max * 100}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: blocksCore.classnames(slider_css.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.d.ts

@@ -0,0 +1,22 @@
+import { ComponentThemes } from '@blockle/blocks-core';
+import { default as React } from 'react';
+type SliderTheme = ComponentThemes['slider'];
+export type SliderProps = {
+    name?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
+    'aria-label'?: string;
+    size: SliderTheme['variants']['size'];
+    colorScheme: SliderTheme['variants']['colorScheme'];
+    disabled?: boolean;
+    precision?: number;
+};
+export declare const Slider: React.FC<SliderProps>;
+export {};

package/dist/components/form/Slider/Slider.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { classnames, roundToPrecision, getBoundValue } from "@blockle/blocks-core";
+import { useRef, useCallback } from "react";
+import { useControlledValue } from "../../../hooks/useControlledValue/useControlledValue.js";
+import { filledTrack, track, thumb, container, containerVertical } from "./slider.css.js";
+import { usePointerProgress } from "./usePointerProgress.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+const usableKeys = /* @__PURE__ */ new Set([
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "Home",
+  "End"
+]);
+const Slider = ({
+  min = 0,
+  max = 100,
+  step = 0.01,
+  orientation = "horizontal",
+  defaultValue = 0,
+  onChange,
+  value,
+  name,
+  size,
+  colorScheme,
+  disabled,
+  precision = 2,
+  ...restProps
+}) => {
+  const baseClass = useComponentStyles("slider", {
+    base: true,
+    variants: { size, colorScheme, disabled }
+  });
+  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);
+  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") {
+        progress = 1 - progress;
+      }
+      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/Slider.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/form/Slider/Slider.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Slider, SliderProps } from './Slider';
+declare const _default: Meta<typeof Slider>;
+export default _default;
+export declare const Default: StoryObj<SliderProps>;
+export declare const WithState: StoryObj<SliderProps>;
+export declare const WithStepSize: StoryObj<SliderProps>;

package/dist/components/form/Slider/index.d.ts

@@ -0,0 +1 @@
+export { Slider, type SliderProps } from './Slider';