@blockle/blocks-react 1.0.0

package/README.md

@@ -0,0 +1,25 @@
+# @blockle/blocks-hooks
+
+A collection of React hooks.
+
+## Installation
+
+```bash
+npm install @blockle/hooks
+```
+
+## Usage
+
+### useIsomorphicLayoutEffect
+
+```tsx
+import { useIsomorphicLayoutEffect } from '@blockle/hooks';
+
+export const Component = () => {
+  useIsomorphicLayoutEffect(() => {
+    // Your effect
+  }, []);
+  
+  return <div>Component</div>;
+};
+```

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const visuallyHidden_css = require("./visually-hidden.css.cjs");
+const VisuallyHidden = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: blocksCore.classnames(visuallyHidden_css.visuallyHidden, className),
+      ...restProps,
+      children
+    }
+  );
+};
+exports.VisuallyHidden = VisuallyHidden;

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,6 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type VisuallyHiddenProps = {
+    children: React.ReactNode;
+    asChild?: boolean;
+} & HTMLElementProps<HTMLSpanElement>;
+export declare const VisuallyHidden: React.FC<VisuallyHiddenProps>;

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { visuallyHidden } from "./visually-hidden.css.js";
+const VisuallyHidden = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: classnames(visuallyHidden, className),
+      ...restProps,
+      children
+    }
+  );
+};
+export {
+  VisuallyHidden
+};

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.spec.d.ts

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

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { VisuallyHidden, VisuallyHiddenProps } from './VisuallyHidden';
+declare const meta: Meta<typeof VisuallyHidden>;
+export default meta;
+type Story = StoryObj<VisuallyHiddenProps>;
+export declare const Default: Story;

package/dist/components/accessibility/VisuallyHidden/index.d.ts

@@ -0,0 +1 @@
+export { VisuallyHidden, type VisuallyHiddenProps } from './VisuallyHidden';

package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/accessibility/VisuallyHidden/visually-hidden.css.ts", "@blockle/blocks-react");
+const visuallyHidden = css.style({
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+});
+fileScope.endFileScope();
+exports.visuallyHidden = visuallyHidden;

package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.d.ts

@@ -0,0 +1 @@
+export declare const visuallyHidden: string;

package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.js

@@ -0,0 +1,16 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/accessibility/VisuallyHidden/visually-hidden.css.ts", "@blockle/blocks-react");
+const visuallyHidden = style({
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+});
+endFileScope();
+export {
+  visuallyHidden
+};

package/dist/components/display/Divider/Divider.cjs

@@ -0,0 +1,28 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const divider_css = require("./divider.css.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const useComponentStyleDefaultProps = require("../../../hooks/useComponentStyles/useComponentStyleDefaultProps.cjs");
+const Box = require("../../layout/Box/Box.cjs");
+const Divider = ({
+  className,
+  color,
+  ...restProps
+}) => {
+  const dividerClass = useComponentStyles.useComponentStyles("divider", { base: true });
+  const dividerDefaults = useComponentStyleDefaultProps.useComponentStyleDefaultProps("divider");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      role: "separator",
+      inlineSize: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: blocksCore.classnames(className, dividerClass, divider_css.divider),
+      ...restProps
+    }
+  );
+};
+exports.Divider = Divider;

package/dist/components/display/Divider/Divider.d.ts

@@ -0,0 +1,7 @@
+import { Sprinkles } from '@blockle/blocks-core';
+export type DividerProps = {
+    className?: string;
+    color?: Sprinkles['backgroundColor'];
+    style?: React.CSSProperties;
+};
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/display/Divider/Divider.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { divider } from "./divider.css.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { useComponentStyleDefaultProps } from "../../../hooks/useComponentStyles/useComponentStyleDefaultProps.js";
+import { Box } from "../../layout/Box/Box.js";
+const Divider = ({
+  className,
+  color,
+  ...restProps
+}) => {
+  const dividerClass = useComponentStyles("divider", { base: true });
+  const dividerDefaults = useComponentStyleDefaultProps("divider");
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "separator",
+      inlineSize: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: classnames(className, dividerClass, divider),
+      ...restProps
+    }
+  );
+};
+export {
+  Divider
+};

package/dist/components/display/Divider/Divider.spec.d.ts

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

package/dist/components/display/Divider/Divider.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Divider, DividerProps } from './Divider';
+declare const meta: Meta<typeof Divider>;
+export default meta;
+type Story = StoryObj<DividerProps>;
+export declare const Default: Story;

package/dist/components/display/Divider/divider.css.cjs

@@ -0,0 +1,16 @@
+"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/display/Divider/divider.css.ts", "@blockle/blocks-react");
+const divider = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      clear: "both",
+      blockSize: "1px"
+    }
+  }
+});
+fileScope.endFileScope();
+exports.divider = divider;

package/dist/components/display/Divider/divider.css.d.ts

@@ -0,0 +1 @@
+export declare const divider: string;

package/dist/components/display/Divider/divider.css.js

@@ -0,0 +1,16 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks-react");
+const divider = style({
+  "@layer": {
+    [blocksLayer]: {
+      clear: "both",
+      blockSize: "1px"
+    }
+  }
+});
+endFileScope();
+export {
+  divider
+};

package/dist/components/display/Divider/index.d.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './Divider';

package/dist/components/feedback/Progress/Progress.cjs

@@ -0,0 +1,55 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const Box = require("../../layout/Box/Box.cjs");
+const Progress = ({
+  className,
+  indeterminate,
+  max = 100,
+  ref,
+  value = 0,
+  ...restProps
+}) => {
+  const progress = value / max * 100;
+  const containerClassName = useComponentStyles.useComponentStyles(
+    "progress",
+    {
+      base: true
+    },
+    false
+  );
+  const barClassName = useComponentStyles.useComponentStyles(
+    "progress",
+    { bar: true, variants: { indeterminate } },
+    false
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      ref,
+      className: blocksCore.classnames(containerClassName, className),
+      overflow: "hidden",
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Box.Box,
+        {
+          className: barClassName,
+          backgroundColor: "currentColor",
+          inlineSize: "full",
+          blockSize: "full",
+          style: {
+            transform: indeterminate ? void 0 : `translateX(-${100 - progress}%)`
+          }
+        }
+      )
+    }
+  );
+};
+exports.Progress = Progress;

package/dist/components/feedback/Progress/Progress.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export type ProgressProps = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
+    className?: string;
+    indeterminate?: boolean;
+    max?: number;
+    style?: React.CSSProperties;
+    /**
+     * The value of the progress bar, between 0 and max=100.
+     */
+    value?: number;
+    ref?: React.Ref<HTMLDivElement>;
+};
+export declare const Progress: React.FC<ProgressProps>;

package/dist/components/feedback/Progress/Progress.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Box } from "../../layout/Box/Box.js";
+const Progress = ({
+  className,
+  indeterminate,
+  max = 100,
+  ref,
+  value = 0,
+  ...restProps
+}) => {
+  const progress = value / max * 100;
+  const containerClassName = useComponentStyles(
+    "progress",
+    {
+      base: true
+    },
+    false
+  );
+  const barClassName = useComponentStyles(
+    "progress",
+    { bar: true, variants: { indeterminate } },
+    false
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      className: classnames(containerClassName, className),
+      overflow: "hidden",
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      ...restProps,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: barClassName,
+          backgroundColor: "currentColor",
+          inlineSize: "full",
+          blockSize: "full",
+          style: {
+            transform: indeterminate ? void 0 : `translateX(-${100 - progress}%)`
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  Progress
+};

package/dist/components/feedback/Progress/Progress.stories.d.ts

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

package/dist/components/feedback/Progress/index.d.ts

@@ -0,0 +1 @@
+export { Progress, type ProgressProps } from './Progress';

package/dist/components/feedback/Spinner/Spinner.cjs

@@ -0,0 +1,27 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const Box = require("../../layout/Box/Box.cjs");
+const Spinner = ({
+  className,
+  size,
+  color,
+  ...restProps
+}) => {
+  const spinnerClassName = useComponentStyles.useComponentStyles("spinner", {
+    base: true,
+    variants: { size, color }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      color,
+      className: blocksCore.classnames(spinnerClassName, className),
+      ...restProps
+    }
+  );
+};
+exports.Spinner = Spinner;

package/dist/components/feedback/Spinner/Spinner.d.ts

@@ -0,0 +1,10 @@
+import { ComponentThemes, MarginSprinkles } from '@blockle/blocks-core';
+type SpinnerTheme = ComponentThemes['spinner'];
+export type SpinnerProps = {
+    className?: string;
+    color?: SpinnerTheme['variants']['color'];
+    size?: SpinnerTheme['variants']['size'];
+    style?: React.CSSProperties;
+} & MarginSprinkles;
+export declare const Spinner: React.FC<SpinnerProps>;
+export {};

package/dist/components/feedback/Spinner/Spinner.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Box } from "../../layout/Box/Box.js";
+const Spinner = ({
+  className,
+  size,
+  color,
+  ...restProps
+}) => {
+  const spinnerClassName = useComponentStyles("spinner", {
+    base: true,
+    variants: { size, color }
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      color,
+      className: classnames(spinnerClassName, className),
+      ...restProps
+    }
+  );
+};
+export {
+  Spinner
+};

package/dist/components/feedback/Spinner/Spinner.stories.d.ts

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

package/dist/components/feedback/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from './Spinner';

package/dist/components/form/Button/Button.cjs

@@ -0,0 +1,58 @@
+"use client";
+"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 Button_css = require("./Button.css.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const Spinner = require("../../feedback/Spinner/Spinner.cjs");
+const [Template, Slot] = blocksReactSlot.createSlottable("button");
+const Button = ({
+  asChild,
+  children,
+  className,
+  disabled,
+  endSlot,
+  intent,
+  loading,
+  ref,
+  size,
+  startSlot,
+  variant,
+  ...restProps
+}) => {
+  const buttonClassName = useComponentStyles.useComponentStyles("button", {
+    base: true,
+    variants: {
+      variant,
+      intent,
+      size,
+      disabled,
+      loading
+    }
+  });
+  const [atomsProps, otherProps] = blocksCore.getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Template,
+    {
+      ref,
+      asChild,
+      disabled: disabled || loading,
+      className: blocksCore.classnames(
+        Button_css.buttonReset,
+        buttonClassName,
+        blocksCore.sprinkles(atomsProps),
+        className
+      ),
+      ...otherProps,
+      children: [
+        startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner.Spinner, { size }),
+        /* @__PURE__ */ jsxRuntime.jsx(Slot, { children }),
+        endSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: endSlot })
+      ]
+    }
+  );
+};
+exports.Button = Button;

package/dist/components/form/Button/Button.css.cjs

@@ -0,0 +1,16 @@
+"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/Button/Button.css.ts", "@blockle/blocks-react");
+const buttonReset = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      all: "unset",
+      cursor: "pointer"
+    }
+  }
+});
+fileScope.endFileScope();
+exports.buttonReset = buttonReset;

package/dist/components/form/Button/Button.css.d.ts

@@ -0,0 +1 @@
+export declare const buttonReset: string;

package/dist/components/form/Button/Button.css.js

@@ -0,0 +1,16 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks-react");
+const buttonReset = style({
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset",
+      cursor: "pointer"
+    }
+  }
+});
+endFileScope();
+export {
+  buttonReset
+};

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { ComponentThemes, HTMLElementProps, MarginSprinkles, Sprinkles } from '@blockle/blocks-core';
+type ButtonTheme = ComponentThemes['button'];
+export type ButtonProps = {
+    alignSelf?: Sprinkles['alignSelf'];
+    asChild?: boolean;
+    children: React.ReactNode;
+    disabled?: boolean;
+    endSlot?: React.ReactNode;
+    inlineSize?: Sprinkles['inlineSize'];
+    intent?: ButtonTheme['variants']['intent'];
+    loading?: boolean;
+    popovertarget?: string;
+    ref?: React.Ref<HTMLButtonElement>;
+    size?: ButtonTheme['variants']['size'];
+    startSlot?: React.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: ButtonTheme['variants']['variant'];
+} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginSprinkles;
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/components/form/Button/Button.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getAtomsAndProps, classnames, sprinkles } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+import { buttonReset } from "./Button.css.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Spinner } from "../../feedback/Spinner/Spinner.js";
+const [Template, Slot] = createSlottable("button");
+const Button = ({
+  asChild,
+  children,
+  className,
+  disabled,
+  endSlot,
+  intent,
+  loading,
+  ref,
+  size,
+  startSlot,
+  variant,
+  ...restProps
+}) => {
+  const buttonClassName = useComponentStyles("button", {
+    base: true,
+    variants: {
+      variant,
+      intent,
+      size,
+      disabled,
+      loading
+    }
+  });
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsxs(
+    Template,
+    {
+      ref,
+      asChild,
+      disabled: disabled || loading,
+      className: classnames(
+        buttonReset,
+        buttonClassName,
+        sprinkles(atomsProps),
+        className
+      ),
+      ...otherProps,
+      children: [
+        startSlot && /* @__PURE__ */ jsx("div", { children: startSlot }),
+        loading && /* @__PURE__ */ jsx(Spinner, { size }),
+        /* @__PURE__ */ jsx(Slot, { children }),
+        endSlot && /* @__PURE__ */ jsx("div", { children: endSlot })
+      ]
+    }
+  );
+};
+export {
+  Button
+};

package/dist/components/form/Button/Button.spec.d.ts

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

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ButtonProps } from './Button';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<ButtonProps>;
+export declare const LinkButton: StoryObj<ButtonProps>;
+export declare const Play: StoryObj<ButtonProps>;

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

@@ -0,0 +1 @@
+export { Button, type ButtonProps } from './Button';