@blockle/blocks 0.20.0-alpha1 → 1.0.0

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

@@ -1,25 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
-const Spinner = ({
-  className,
-  size,
-  color,
-  ...restProps
-}) => {
-  const spinnerClassName = lib_theme_store_theme_cjs.getComponentStyles("spinner", {
-    base: true,
-    variants: { size, color }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    components_layout_Box_Box_cjs.Box,
-    {
-      color,
-      className: lib_utils_classnames_cjs.classnames(spinnerClassName, className),
-      ...restProps
-    }
-  );
-};
-exports.Spinner = Spinner;

package/dist/components/feedback/Spinner/Spinner.mjs

@@ -1,26 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { Box } from "../../layout/Box/Box.mjs";
-const Spinner = ({
-  className,
-  size,
-  color,
-  ...restProps
-}) => {
-  const spinnerClassName = getComponentStyles("spinner", {
-    base: true,
-    variants: { size, color }
-  });
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      color,
-      className: classnames(spinnerClassName, className),
-      ...restProps
-    }
-  );
-};
-export {
-  Spinner
-};

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

@@ -1 +0,0 @@
-"use strict";

package/dist/components/feedback/Spinner/index.mjs

@@ -1 +0,0 @@
-

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

@@ -1,58 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const lib_asChildRenderer_createAsChildTemplate_cjs = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_form_Button_Button_css_cjs = require("./Button.css.cjs");
-const components_feedback_Spinner_Spinner_cjs = require("../../feedback/Spinner/Spinner.cjs");
-const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-const { Template, Slot } = lib_asChildRenderer_createAsChildTemplate_cjs.createAsChildTemplate("button");
-const Button = ({
-  asChild,
-  children,
-  className,
-  disabled,
-  endSlot,
-  intent,
-  loading,
-  ref,
-  size,
-  startSlot,
-  variant,
-  ...restProps
-}) => {
-  const buttonClassName = lib_theme_store_theme_cjs.getComponentStyles("button", {
-    base: true,
-    variants: {
-      variant,
-      intent,
-      size,
-      disabled,
-      loading
-    }
-  });
-  const [atomsProps, otherProps] = lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Template,
-    {
-      ref,
-      asChild,
-      disabled: disabled || loading,
-      className: lib_utils_classnames_cjs.classnames(
-        components_form_Button_Button_css_cjs.buttonReset,
-        buttonClassName,
-        lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps),
-        className
-      ),
-      ...otherProps,
-      children: [
-        startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),
-        loading && /* @__PURE__ */ jsxRuntime.jsx(components_feedback_Spinner_Spinner_cjs.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

@@ -1,15 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
-const buttonReset = css.style({
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      all: "unset",
-      cursor: "pointer"
-    }
-  }
-}, "buttonReset");
-fileScope.endFileScope();
-exports.buttonReset = buttonReset;

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

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

package/dist/components/form/Button/Button.mjs

@@ -1,59 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.mjs";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { buttonReset } from "./Button.css.mjs";
-import { Spinner } from "../../feedback/Spinner/Spinner.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-const { Template, Slot } = createAsChildTemplate("button");
-const Button = ({
-  asChild,
-  children,
-  className,
-  disabled,
-  endSlot,
-  intent,
-  loading,
-  ref,
-  size,
-  startSlot,
-  variant,
-  ...restProps
-}) => {
-  const buttonClassName = getComponentStyles("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,
-        atoms(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/index.cjs

@@ -1 +0,0 @@
-"use strict";

package/dist/components/form/Button/index.mjs

@@ -1 +0,0 @@
-

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

@@ -1,78 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_form_Label_Label_cjs = require("../Label/Label.cjs");
-const components_form_Checkbox_checkbox_css_cjs = require("./checkbox.css.cjs");
-const Checkbox = ({
-  children,
-  className,
-  id,
-  name,
-  ref,
-  required,
-  ...restProps
-}) => {
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles(
-    "checkbox",
-    { base: true },
-    false
-  );
-  const iconClassName = lib_theme_store_theme_cjs.getComponentStyles("checkbox", { icon: true }, false);
-  const labelClassName = lib_theme_store_theme_cjs.getComponentStyles("checkbox", { label: true }, false);
-  const reactId = react.useId();
-  const inputId = id || reactId;
-  const input = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: lib_utils_classnames_cjs.classnames(components_form_Checkbox_checkbox_css_cjs.container, containerClassName, className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            name,
-            id: inputId,
-            className: components_form_Checkbox_checkbox_css_cjs.input,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib_utils_classnames_cjs.classnames(components_form_Checkbox_checkbox_css_cjs.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(components_form_Label_Label_cjs.Label, { required, htmlFor: inputId, children })
-  ] });
-};
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        style: { width: "1rem", height: "1rem", display: "block" },
-        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.mjs

@@ -1,79 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useId } from "react";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { Label } from "../Label/Label.mjs";
-import { input, icon, container } from "./checkbox.css.mjs";
-const Checkbox = ({
-  children,
-  className,
-  id,
-  name,
-  ref,
-  required,
-  ...restProps
-}) => {
-  const containerClassName = getComponentStyles(
-    "checkbox",
-    { base: true },
-    false
-  );
-  const iconClassName = getComponentStyles("checkbox", { icon: true }, false);
-  const labelClassName = getComponentStyles("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
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        style: { width: "1rem", height: "1rem", display: "block" },
-        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.css.cjs

@@ -1,31 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
-const container = css.style({
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      position: "relative",
-      cursor: "pointer",
-      overflow: "hidden"
-    }
-  }
-}, "container");
-const input = css.style({
-  position: "absolute",
-  inset: 0,
-  opacity: 0,
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      all: "unset"
-    }
-  }
-}, "input");
-const icon = css.style({
-  pointerEvents: "none"
-}, "icon");
-fileScope.endFileScope();
-exports.container = container;
-exports.icon = icon;
-exports.input = input;

package/dist/components/form/Checkbox/checkbox.css.mjs

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

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

@@ -1 +0,0 @@
-"use strict";

package/dist/components/form/Checkbox/index.mjs

@@ -1 +0,0 @@
-

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

@@ -1,50 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_form_Input_input_css_cjs = require("./input.css.cjs");
-const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
-const Input = ({
-  className,
-  endSlot,
-  name,
-  placeholder,
-  ref,
-  startSlot,
-  type = "text",
-  ...restProps
-}) => {
-  const id = react.useId();
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles(
-    "input",
-    { container: true },
-    false
-  );
-  const inputClassName = lib_theme_store_theme_cjs.getComponentStyles("input", { input: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(components_layout_Box_Box_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    components_layout_Box_Box_cjs.Box,
-    {
-      display: "flex",
-      alignItems: "center",
-      className: lib_utils_classnames_cjs.classnames(containerClassName, className),
-      children: [
-        startSlot,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id,
-            ref,
-            name,
-            type,
-            placeholder,
-            className: lib_utils_classnames_cjs.classnames(components_form_Input_input_css_cjs.input, inputClassName),
-            ...restProps
-          }
-        ),
-        endSlot
-      ]
-    }
-  ) });
-};
-exports.Input = Input;

package/dist/components/form/Input/Input.mjs

@@ -1,51 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { input } from "./input.css.mjs";
-import { Box } from "../../layout/Box/Box.mjs";
-const Input = ({
-  className,
-  endSlot,
-  name,
-  placeholder,
-  ref,
-  startSlot,
-  type = "text",
-  ...restProps
-}) => {
-  const id = useId();
-  const containerClassName = getComponentStyles(
-    "input",
-    { container: true },
-    false
-  );
-  const inputClassName = getComponentStyles("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/index.cjs

@@ -1 +0,0 @@
-"use strict";

package/dist/components/form/Input/index.mjs

@@ -1 +0,0 @@
-

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

@@ -1,20 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks");
-const input = css.style({
-  "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
-      appearance: "none",
-      width: "100%",
-      selectors: {
-        "&:-webkit-autofill": {
-          transitionDelay: "9999s"
-        }
-      }
-    }
-  }
-}, "input");
-fileScope.endFileScope();
-exports.input = input;

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

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

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

@@ -1,29 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-const Label = ({
-  asSpan,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = asSpan ? "span" : "label";
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      className: lib_utils_classnames_cjs.classnames(containerClassName, className, lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
-exports.Label = Label;

package/dist/components/form/Label/Label.mjs

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-const Label = ({
-  asSpan,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = asSpan ? "span" : "label";
-  const containerClassName = getComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: classnames(containerClassName, className, atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
-export {
-  Label
-};

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

@@ -1 +0,0 @@
-"use strict";

package/dist/components/form/Label/index.mjs

@@ -1 +0,0 @@
-