@blockle/blocks 0.19.0 → 0.20.0-alpha1

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

@@ -0,0 +1,19 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
+const components_accessibility_VisuallyHidden_visuallyHidden_css_cjs = require("./visually-hidden.css.cjs");
+const VisuallyHidden = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: lib_utils_classnames_cjs.classnames(components_accessibility_VisuallyHidden_visuallyHidden_css_cjs.visuallyHidden, className),
+      ...restProps,
+      children
+    }
+  );
+};
+exports.VisuallyHidden = VisuallyHidden;

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.mjs

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

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

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

package/dist/components/accessibility/VisuallyHidden/index.mjs

@@ -0,0 +1 @@
+

package/dist/{styles/components/Accessibility → components/accessibility}/VisuallyHidden/visually-hidden.css.cjs

@@ -1,7 +1,7 @@
 "use strict";
 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");
+fileScope.setFileScope("src/components/accessibility/VisuallyHidden/visually-hidden.css.ts", "@blockle/blocks");
 const visuallyHidden = css.style({
   clip: "rect(0 0 0 0)",
   clipPath: "inset(50%)",

package/dist/{styles/components/Accessibility → components/accessibility}/VisuallyHidden/visually-hidden.css.mjs

@@ -1,6 +1,6 @@
 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");
+setFileScope("src/components/accessibility/VisuallyHidden/visually-hidden.css.ts", "@blockle/blocks");
 const visuallyHidden = style({
   clip: "rect(0 0 0 0)",
   clipPath: "inset(50%)",

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

@@ -0,0 +1,25 @@
+"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_display_Divider_divider_css_cjs = require("./divider.css.cjs");
+const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const Divider = ({
+  className,
+  color,
+  ...restProps
+}) => {
+  const dividerClass = lib_theme_store_theme_cjs.getComponentStyles("divider", { base: true });
+  const dividerDefaults = lib_theme_store_theme_cjs.getComponentStyleDefaults("divider");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_layout_Box_Box_cjs.Box,
+    {
+      role: "separator",
+      inlineSize: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: lib_utils_classnames_cjs.classnames(className, dividerClass, components_display_Divider_divider_css_cjs.divider),
+      ...restProps
+    }
+  );
+};
+exports.Divider = Divider;

package/dist/components/display/Divider/Divider.mjs

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { getComponentStyles, getComponentStyleDefaults } from "../../../lib/theme/store/theme.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+import { divider } from "./divider.css.mjs";
+import { Box } from "../../layout/Box/Box.mjs";
+const Divider = ({
+  className,
+  color,
+  ...restProps
+}) => {
+  const dividerClass = getComponentStyles("divider", { base: true });
+  const dividerDefaults = getComponentStyleDefaults("divider");
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "separator",
+      inlineSize: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: classnames(className, dividerClass, divider),
+      ...restProps
+    }
+  );
+};
+export {
+  Divider
+};

package/dist/{styles/components → components}/display/Divider/divider.css.cjs

@@ -1,11 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks");
 const divider = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       clear: "both",
       blockSize: "1px"
     }

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

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

package/dist/components/display/Divider/index.mjs

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,53 @@
+"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 Progress = ({
+  className,
+  indeterminate,
+  max = 100,
+  ref,
+  value = 0,
+  ...restProps
+}) => {
+  const progress = value / max * 100;
+  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles(
+    "progress",
+    {
+      base: true
+    },
+    false
+  );
+  const barClassName = lib_theme_store_theme_cjs.getComponentStyles(
+    "progress",
+    { bar: true, variants: { indeterminate } },
+    false
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_layout_Box_Box_cjs.Box,
+    {
+      ref,
+      className: lib_utils_classnames_cjs.classnames(containerClassName, className),
+      overflow: "hidden",
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        components_layout_Box_Box_cjs.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.mjs

@@ -0,0 +1,54 @@
+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 Progress = ({
+  className,
+  indeterminate,
+  max = 100,
+  ref,
+  value = 0,
+  ...restProps
+}) => {
+  const progress = value / max * 100;
+  const containerClassName = getComponentStyles(
+    "progress",
+    {
+      base: true
+    },
+    false
+  );
+  const barClassName = getComponentStyles(
+    "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/index.cjs

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

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

@@ -0,0 +1 @@
+

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

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

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

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,58 @@
+"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/{styles/components → components}/form/Button/Button.css.cjs

@@ -1,11 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+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": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       all: "unset",
       cursor: "pointer"
     }

package/dist/{styles/components → components}/form/Button/Button.mjs

@@ -1,13 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useComponentStyles, Box, createAsChildTemplate } from "../../display/Divider/Divider.mjs";
+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 "../../Accessibility/VisuallyHidden/VisuallyHidden.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 Spinner = ({ className, size, color, ...restProps }) => {
-  const spinnerClassName = useComponentStyles("spinner", { base: true, variants: { size, color } });
-  return /* @__PURE__ */ jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
-};
 const { Template, Slot } = createAsChildTemplate("button");
 const Button = ({
   asChild,
@@ -23,7 +21,7 @@ const Button = ({
   variant,
   ...restProps
 }) => {
-  const buttonClassName = useComponentStyles("button", {
+  const buttonClassName = getComponentStyles("button", {
     base: true,
     variants: {
       variant,
@@ -40,7 +38,12 @@ const Button = ({
       ref,
       asChild,
       disabled: disabled || loading,
-      className: classnames(buttonReset, buttonClassName, atoms(atomsProps), className),
+      className: classnames(
+        buttonReset,
+        buttonClassName,
+        atoms(atomsProps),
+        className
+      ),
       ...otherProps,
       children: [
         startSlot && /* @__PURE__ */ jsx("div", { children: startSlot }),
@@ -52,6 +55,5 @@ const Button = ({
   );
 };
 export {
-  Button,
-  Spinner
+  Button
 };

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

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

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

@@ -0,0 +1 @@
+

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

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

@@ -0,0 +1,79 @@
+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/{styles/components → components}/form/Checkbox/checkbox.css.cjs

@@ -1,11 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+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": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"
@@ -17,7 +17,7 @@ const input = css.style({
   inset: 0,
   opacity: 0,
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       all: "unset"
     }
   }

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

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

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

@@ -0,0 +1 @@
+