@blockle/blocks 0.20.0-alpha1.0 → 1.0.0

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

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const layers_css = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
-const wrapper = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      position: "relative"
-    }
-  }
-});
-const select = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      appearance: "none",
-      inlineSize: "100%"
-    }
-  }
-});
-const icon = css.style({
-  "@layer": {
-    [layers_css.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

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

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

@@ -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.js";
-setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
-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

@@ -1,141 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const useControlledValue = require("../../../hooks/useControlledValue/useControlledValue.cjs");
-const theme = require("../../../lib/theme/store/theme.cjs");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const math = require("../../../lib/utils/math.cjs");
-const slider_css = require("./slider.css.cjs");
-const usePointerProgress = 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 = theme.getComponentStyles("slider", {
-    base: true,
-    variants: { size, colorScheme, disabled }
-  });
-  const trackClass = theme.getComponentStyles("slider", { track: true }, false);
-  const filledTrackClass = theme.getComponentStyles(
-    "slider",
-    { filledTrack: true },
-    false
-  );
-  const thumbClass = theme.getComponentStyles("slider", { thumb: true }, false);
-  const containerRef = react.useRef(null);
-  const [currentValue, setValue] = useControlledValue.useControlledValue({
-    defaultValue,
-    value,
-    onChange,
-    transformValue: (value2) => math.roundToPrecision(math.getBoundValue(value2, min, max, step), precision)
-  });
-  usePointerProgress.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: classnames.classnames(
-        slider_css.container,
-        orientation === "vertical" ? slider_css.containerVertical : "",
-        baseClass
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames.classnames(slider_css.track, trackClass), children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: classnames.classnames(slider_css.filledTrack, filledTrackClass),
-            style: {
-              inlineSize: `${currentValue / max * 100}%`
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: classnames.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

@@ -1,20 +0,0 @@
-import { default as React } from 'react';
-import { SliderTheme } from '../../../lib/theme/componentThemes';
-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>;

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

@@ -1,141 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useCallback } from "react";
-import { useControlledValue } from "../../../hooks/useControlledValue/useControlledValue.js";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { roundToPrecision, getBoundValue } from "../../../lib/utils/math.js";
-import { filledTrack, track, thumb, containerVertical, container } from "./slider.css.js";
-import { usePointerProgress } from "./usePointerProgress.js";
-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/Slider.spec.d.ts

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

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

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

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

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

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

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const layers_css = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
-const container = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      position: "relative",
-      writingMode: "horizontal-tb"
-    }
-  }
-});
-const containerVertical = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      writingMode: "vertical-lr"
-    }
-  }
-});
-const track = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      cursor: "pointer",
-      position: "absolute",
-      inlineSize: "100%",
-      insetBlockStart: "50%",
-      transform: "translateY(-50%)",
-      selectors: {
-        [`${containerVertical} &`]: {
-          transform: "translateX(-50%)"
-        }
-      }
-    }
-  }
-});
-const filledTrack = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      position: "absolute",
-      blockSize: "100%",
-      borderRadius: "inherit",
-      selectors: {
-        [`${containerVertical} &`]: {
-          insetInlineEnd: "0%"
-        }
-      }
-    }
-  }
-});
-const thumb = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      cursor: "pointer",
-      position: "absolute",
-      blockSize: "100%",
-      insetBlockStart: "50%",
-      transform: "translate(-50%, -50%)",
-      touchAction: "none",
-      border: "none",
-      selectors: {
-        [`${containerVertical} &`]: {
-          transform: "translate(-50%, 50%)"
-        }
-      }
-    }
-  }
-});
-fileScope.endFileScope();
-exports.container = container;
-exports.containerVertical = containerVertical;
-exports.filledTrack = filledTrack;
-exports.thumb = thumb;
-exports.track = track;

package/dist/components/form/Slider/slider.css.d.ts

@@ -1,5 +0,0 @@
-export declare const container: string;
-export declare const containerVertical: string;
-export declare const track: string;
-export declare const filledTrack: string;
-export declare const thumb: string;

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

@@ -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.js";
-setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
-const container = style({
-  "@layer": {
-    [blocksLayer]: {
-      position: "relative",
-      writingMode: "horizontal-tb"
-    }
-  }
-});
-const containerVertical = style({
-  "@layer": {
-    [blocksLayer]: {
-      writingMode: "vertical-lr"
-    }
-  }
-});
-const track = style({
-  "@layer": {
-    [blocksLayer]: {
-      cursor: "pointer",
-      position: "absolute",
-      inlineSize: "100%",
-      insetBlockStart: "50%",
-      transform: "translateY(-50%)",
-      selectors: {
-        [`${containerVertical} &`]: {
-          transform: "translateX(-50%)"
-        }
-      }
-    }
-  }
-});
-const filledTrack = style({
-  "@layer": {
-    [blocksLayer]: {
-      position: "absolute",
-      blockSize: "100%",
-      borderRadius: "inherit",
-      selectors: {
-        [`${containerVertical} &`]: {
-          insetInlineEnd: "0%"
-        }
-      }
-    }
-  }
-});
-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%)"
-        }
-      }
-    }
-  }
-});
-endFileScope();
-export {
-  container,
-  containerVertical,
-  filledTrack,
-  thumb,
-  track
-};

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

@@ -1,47 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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.getProgress = getProgress;
-exports.usePointerProgress = usePointerProgress;

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

@@ -1,11 +0,0 @@
-type PointerProgressOptions<T extends React.RefObject<HTMLElement | null>> = {
-    container: T;
-    orientation: 'horizontal' | 'vertical';
-    onChange(progress: number): void;
-};
-export declare function getProgress(event: PointerEvent, rect: DOMRect): [x: number, y: number];
-/**
- * Utility hook to track pointer events and calculate progress based on the pointer position.
- */
-export declare function usePointerProgress<T extends React.RefObject<HTMLElement | null>>({ container, orientation, onChange }: PointerProgressOptions<T>): void;
-export {};

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

@@ -1,47 +0,0 @@
-"use client";
-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 {
-  getProgress,
-  usePointerProgress
-};