@blockle/blocks-react 1.0.0

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

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

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

@@ -0,0 +1,75 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks-react");
+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

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

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

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

package/dist/components/form/Switch/Switch.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 react = require("react");
+const switch_css = require("./switch.css.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const Switch = ({
+  checked,
+  className,
+  defaultChecked,
+  onChange,
+  ref,
+  ...restProps
+}) => {
+  const [isChecked, setIsChecked] = react.useState(
+    defaultChecked || checked || false
+  );
+  const baseClassName = useComponentStyles.useComponentStyles("switch", { base: true });
+  const sliderClassName = useComponentStyles.useComponentStyles("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: blocksCore.classnames(className, switch_css.container, baseClassName),
+      "data-checked": isChecked,
+      onClick: (event) => {
+        if (event.target.tagName === "INPUT") {
+          return;
+        }
+        toggle();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: switch_css.input,
+            checked: isChecked,
+            onChange: onChangeHandler,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: sliderClassName, "data-checked": isChecked })
+      ]
+    }
+  ) });
+};
+exports.Switch = Switch;

package/dist/components/form/Switch/Switch.d.ts

@@ -0,0 +1,6 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type SwitchProps = {
+    onChange?: (value: boolean) => void;
+    ref?: React.Ref<HTMLInputElement>;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
+export declare const Switch: React.FC<SwitchProps>;

package/dist/components/form/Switch/Switch.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useState, useEffect, useCallback } from "react";
+import { input, container } from "./switch.css.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+const Switch = ({
+  checked,
+  className,
+  defaultChecked,
+  onChange,
+  ref,
+  ...restProps
+}) => {
+  const [isChecked, setIsChecked] = useState(
+    defaultChecked || checked || false
+  );
+  const baseClassName = useComponentStyles("switch", { base: true });
+  const sliderClassName = useComponentStyles("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/Switch.stories.d.ts

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

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

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from './Switch';

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

@@ -0,0 +1,27 @@
+"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/Switch/switch.css.ts", "@blockle/blocks-react");
+const container = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+});
+const input = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      opacity: 0,
+      maxBlockSize: 0,
+      maxInlineSize: 0
+    }
+  }
+});
+fileScope.endFileScope();
+exports.container = container;
+exports.input = input;

package/dist/components/form/Switch/switch.css.d.ts

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

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

@@ -0,0 +1,27 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks-react");
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+});
+const input = style({
+  "@layer": {
+    [blocksLayer]: {
+      opacity: 0,
+      maxBlockSize: 0,
+      maxInlineSize: 0
+    }
+  }
+});
+endFileScope();
+export {
+  container,
+  input
+};

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const blocksReactSlot = require("@blockle/blocks-react-slot");
+const [Template, Slot] = blocksReactSlot.createSlottable("div");
+const Box = ({
+  asChild,
+  className,
+  children,
+  ref,
+  ...restProps
+}) => {
+  const [atomsProps, otherProps] = blocksCore.getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Template,
+    {
+      ref,
+      asChild,
+      className: blocksCore.classnames(className, blocksCore.sprinkles(atomsProps)),
+      ...otherProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
+    }
+  );
+};
+exports.Box = Box;

package/dist/components/layout/Box/Box.d.ts

@@ -0,0 +1,10 @@
+import { HTMLElementProps, Sprinkles } from '@blockle/blocks-core';
+import { default as React } from 'react';
+export type BoxProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    ref?: React.Ref<HTMLDivElement>;
+    style?: React.CSSProperties;
+} & Sprinkles & HTMLElementProps<HTMLDivElement>;
+export declare const Box: React.FC<BoxProps>;

package/dist/components/layout/Box/Box.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { getAtomsAndProps, classnames, sprinkles } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+const [Template, Slot] = createSlottable("div");
+const Box = ({
+  asChild,
+  className,
+  children,
+  ref,
+  ...restProps
+}) => {
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsx(
+    Template,
+    {
+      ref,
+      asChild,
+      className: classnames(className, sprinkles(atomsProps)),
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(Slot, { children })
+    }
+  );
+};
+export {
+  Box
+};

package/dist/components/layout/Box/Box.spec.d.ts

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

package/dist/components/layout/Box/Box.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BoxProps } from './Box';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<BoxProps>;
+export declare const AsChild: StoryObj<BoxProps>;

package/dist/components/layout/Box/index.d.ts

@@ -0,0 +1 @@
+export { Box, type BoxProps } from './Box';

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const Box = require("../Box/Box.cjs");
+const Inline = ({
+  alignX,
+  alignY,
+  tag: Tag = "div",
+  children,
+  display = "flex",
+  spacing,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      asChild: true,
+      display,
+      gap: spacing,
+      flexDirection: "row",
+      justifyContent: alignX ? blocksCore.justifyContentMap[alignX] : void 0,
+      alignItems: alignY ? blocksCore.alignItemsMap[alignY] : void 0,
+      flexWrap: "wrap",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
+    }
+  );
+};
+exports.Inline = Inline;

package/dist/components/layout/Inline/Inline.d.ts

@@ -0,0 +1,12 @@
+import { AlignItemsMap, JustifyContentMap, MarginSprinkles, PaddingSprinkles, ResponsiveDisplayFlex, Sprinkles } from '@blockle/blocks-core';
+export type InlineProps = {
+    alignX?: keyof JustifyContentMap;
+    alignY?: keyof AlignItemsMap;
+    tag?: 'div' | 'ul' | 'ol' | 'nav';
+    children: React.ReactNode;
+    className?: string;
+    display?: ResponsiveDisplayFlex;
+    spacing: Sprinkles['gap'];
+    style?: React.CSSProperties;
+} & MarginSprinkles & PaddingSprinkles;
+export declare const Inline: React.FC<InlineProps>;

package/dist/components/layout/Inline/Inline.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { alignItemsMap, justifyContentMap } from "@blockle/blocks-core";
+import { Box } from "../Box/Box.js";
+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/Inline.stories.d.ts

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

package/dist/components/layout/Inline/index.d.ts

@@ -0,0 +1 @@
+export { Inline, type InlineProps } from './Inline';