@blockle/blocks-react 1.0.0

package/dist/components/form/Checkbox/Checkbox.cjs

@@ -0,0 +1,80 @@
+"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 Label = require("../Label/Label.cjs");
+const checkbox_css = require("./checkbox.css.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const Checkbox = ({
+  children,
+  className,
+  id,
+  name,
+  ref,
+  required,
+  ...restProps
+}) => {
+  const containerClassName = useComponentStyles.useComponentStyles(
+    "checkbox",
+    { base: true },
+    false
+  );
+  const iconClassName = useComponentStyles.useComponentStyles("checkbox", { icon: true }, false);
+  const labelClassName = useComponentStyles.useComponentStyles("checkbox", { label: true }, false);
+  const reactId = react.useId();
+  const inputId = id || reactId;
+  const input = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: blocksCore.classnames(checkbox_css.container, containerClassName, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            name,
+            id: inputId,
+            className: checkbox_css.input,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: blocksCore.classnames(checkbox_css.icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
+      ]
+    }
+  );
+  if (!children) {
+    return input;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: labelClassName, children: [
+    input,
+    children && /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { required, htmlFor: inputId, children })
+  ] });
+};
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        style: { width: "1rem", height: "1rem", display: "block" },
+        role: "presentation",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "m4.5 12.75 6 6 9-13.5"
+          }
+        )
+      }
+    )
+  );
+};
+exports.Checkbox = Checkbox;

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

@@ -0,0 +1,9 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+import { default as React } from 'react';
+export type CheckboxProps = {
+    children?: React.ReactNode;
+    name: string;
+    ref?: React.Ref<HTMLInputElement>;
+    required?: boolean;
+} & HTMLElementProps<HTMLInputElement>;
+export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/form/Checkbox/Checkbox.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useId } from "react";
+import { Label } from "../Label/Label.js";
+import { input, icon, container } from "./checkbox.css.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+const Checkbox = ({
+  children,
+  className,
+  id,
+  name,
+  ref,
+  required,
+  ...restProps
+}) => {
+  const containerClassName = useComponentStyles(
+    "checkbox",
+    { base: true },
+    false
+  );
+  const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const reactId = useId();
+  const inputId = id || reactId;
+  const input$1 = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(container, containerClassName, className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            name,
+            id: inputId,
+            className: input,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
+      ]
+    }
+  );
+  if (!children) {
+    return input$1;
+  }
+  return /* @__PURE__ */ jsxs("span", { className: labelClassName, children: [
+    input$1,
+    children && /* @__PURE__ */ jsx(Label, { required, htmlFor: inputId, children })
+  ] });
+};
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        style: { width: "1rem", height: "1rem", display: "block" },
+        role: "presentation",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "m4.5 12.75 6 6 9-13.5"
+          }
+        )
+      }
+    )
+  );
+};
+export {
+  Checkbox
+};

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

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

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

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

package/dist/components/form/Checkbox/checkbox.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/Checkbox/checkbox.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/Checkbox/checkbox.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/Checkbox/checkbox.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/Checkbox/checkbox.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/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';

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

@@ -0,0 +1,52 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const blocksCore = require("@blockle/blocks-core");
+const input_css = require("./input.css.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const Box = require("../../layout/Box/Box.cjs");
+const Input = ({
+  className,
+  endSlot,
+  name,
+  placeholder,
+  ref,
+  startSlot,
+  type = "text",
+  ...restProps
+}) => {
+  const id = react.useId();
+  const containerClassName = useComponentStyles.useComponentStyles(
+    "input",
+    { container: true },
+    false
+  );
+  const inputClassName = useComponentStyles.useComponentStyles("input", { input: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Box.Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      className: blocksCore.classnames(containerClassName, className),
+      children: [
+        startSlot,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id,
+            ref,
+            name,
+            type,
+            placeholder,
+            className: blocksCore.classnames(input_css.input, inputClassName),
+            ...restProps
+          }
+        ),
+        endSlot
+      ]
+    }
+  ) });
+};
+exports.Input = Input;

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

@@ -0,0 +1,10 @@
+import { HTMLElementProps, OptionalLiteral } from '@blockle/blocks-core';
+export type InputProps = {
+    className?: string;
+    endSlot?: React.ReactNode;
+    name: string;
+    ref?: React.Ref<HTMLInputElement>;
+    startSlot?: React.ReactNode;
+    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
+export declare const Input: React.FC<InputProps>;

package/dist/components/form/Input/Input.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { classnames } from "@blockle/blocks-core";
+import { input } from "./input.css.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Box } from "../../layout/Box/Box.js";
+const Input = ({
+  className,
+  endSlot,
+  name,
+  placeholder,
+  ref,
+  startSlot,
+  type = "text",
+  ...restProps
+}) => {
+  const id = useId();
+  const containerClassName = useComponentStyles(
+    "input",
+    { container: true },
+    false
+  );
+  const inputClassName = useComponentStyles("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/Input.spec.d.ts

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

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

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

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

@@ -0,0 +1 @@
+export { Input, type InputProps } from './Input';

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

@@ -0,0 +1,21 @@
+"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/Input/input.css.ts", "@blockle/blocks-react");
+const input = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      appearance: "none",
+      width: "100%",
+      selectors: {
+        "&:-webkit-autofill": {
+          transitionDelay: "9999s"
+        }
+      }
+    }
+  }
+});
+fileScope.endFileScope();
+exports.input = input;

package/dist/components/form/Input/input.css.d.ts

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

package/dist/components/form/Input/input.css.js

@@ -0,0 +1,21 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks-react");
+const input = style({
+  "@layer": {
+    [blocksLayer]: {
+      appearance: "none",
+      width: "100%",
+      selectors: {
+        "&:-webkit-autofill": {
+          transitionDelay: "9999s"
+        }
+      }
+    }
+  }
+});
+endFileScope();
+export {
+  input
+};

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

@@ -0,0 +1,34 @@
+"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 Label = ({
+  asSpan,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = asSpan ? "span" : "label";
+  const containerClassName = useComponentStyles.useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: blocksCore.classnames(
+        containerClassName,
+        className,
+        blocksCore.sprinkles({ cursor })
+      ),
+      ...restProps,
+      children
+    }
+  );
+};
+exports.Label = Label;

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

@@ -0,0 +1,18 @@
+import { ComponentThemes, HTMLElementProps, Sprinkles } from '@blockle/blocks-core';
+type LabelTheme = ComponentThemes['label'];
+export type LabelProps = {
+    /**
+     * If true, the label will be rendered as a span element
+     * but will still have the same styles as a label.
+     * Useful for when you want to use a label element but
+     * can't because of the parent element's structure.
+     */
+    asSpan?: boolean;
+    htmlFor?: string;
+    children?: React.ReactNode;
+    required?: boolean;
+    size?: LabelTheme['variants']['size'];
+    cursor?: Sprinkles['cursor'];
+} & HTMLElementProps<HTMLLabelElement>;
+export declare const Label: React.FC<LabelProps>;
+export {};

package/dist/components/form/Label/Label.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { classnames, sprinkles } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+const Label = ({
+  asSpan,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = asSpan ? "span" : "label";
+  const containerClassName = useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classnames(
+        containerClassName,
+        className,
+        sprinkles({ cursor })
+      ),
+      ...restProps,
+      children
+    }
+  );
+};
+export {
+  Label
+};

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

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

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

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

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

@@ -0,0 +1 @@
+export { Label, type LabelProps } from './Label';

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

@@ -0,0 +1,50 @@
+"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 radio_css = require("./radio.css.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const Label = require("../Label/Label.cjs");
+const Radio = ({
+  name,
+  children,
+  className,
+  ref,
+  ...restProps
+}) => {
+  const rid = react.useId();
+  const id = restProps.id ?? rid;
+  const containerClassName = useComponentStyles.useComponentStyles("radio", { base: true }, false);
+  const iconClassName = useComponentStyles.useComponentStyles("radio", { icon: true }, false);
+  const labelClassName = useComponentStyles.useComponentStyles("checkbox", { label: true }, false);
+  const input = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: blocksCore.classnames(radio_css.container, containerClassName, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: "radio",
+            name,
+            id,
+            className: radio_css.input,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: blocksCore.classnames(radio_css.icon, iconClassName) })
+      ]
+    }
+  );
+  if (!children) {
+    return input;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: labelClassName, children: [
+    input,
+    /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { asSpan: true, children })
+  ] });
+};
+exports.Radio = Radio;

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

@@ -0,0 +1,8 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type RadioProps = {
+    children?: React.ReactNode;
+    name: string;
+    ref?: React.Ref<HTMLInputElement>;
+    value: string;
+} & HTMLElementProps<HTMLInputElement>;
+export declare const Radio: React.FC<RadioProps>;

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

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useId } from "react";
+import { input, icon, container } from "./radio.css.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Label } from "../Label/Label.js";
+const Radio = ({
+  name,
+  children,
+  className,
+  ref,
+  ...restProps
+}) => {
+  const rid = useId();
+  const id = restProps.id ?? rid;
+  const containerClassName = useComponentStyles("radio", { base: true }, false);
+  const iconClassName = useComponentStyles("radio", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input$1 = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(container, containerClassName, className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "radio",
+            name,
+            id,
+            className: input,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
+      ]
+    }
+  );
+  if (!children) {
+    return input$1;
+  }
+  return /* @__PURE__ */ jsxs("label", { htmlFor: id, className: labelClassName, children: [
+    input$1,
+    /* @__PURE__ */ jsx(Label, { asSpan: true, children })
+  ] });
+};
+export {
+  Radio
+};

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

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

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

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

package/dist/components/form/Radio/RadioGroup.d.ts

@@ -0,0 +1,8 @@
+export type RadioGroupProps = {
+    'aria-labelledby'?: string;
+    children: React.ReactNode;
+    className?: string;
+    required?: boolean;
+    style?: React.CSSProperties;
+};
+export declare const RadioGroup: React.FC<RadioGroupProps>;

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

@@ -0,0 +1,2 @@
+export { Radio, type RadioProps } from './Radio';
+export { RadioGroup, type RadioGroupProps } from './RadioGroup';