@blockle/blocks 0.6.0 → 0.7.1

package/dist/index.cjs

@@ -5,13 +5,15 @@ const styles_lib_theme_makeComponentTheme_cjs = require("./styles/lib/theme/make
 const styles_lib_theme_makeTheme_cjs = require("./styles/lib/theme/makeTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("./styles/lib/theme/vars.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
-const react = require("react");
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const styles_components_Button_Button_css_cjs = require("./styles/components/Button/Button.css.cjs");
-const styles_components_Divider_divider_css_cjs = require("./styles/components/Divider/divider.css.cjs");
+const styles_components_Checkbox_checkbox_css_cjs = require("./styles/components/Checkbox/checkbox.css.cjs");
 const styles_components_Dialog_dialog_css_cjs = require("./styles/components/Dialog/dialog.css.cjs");
 const reactDom = require("react-dom");
+const styles_components_Divider_divider_css_cjs = require("./styles/components/Divider/divider.css.cjs");
 const styles_components_Input_input_css_cjs = require("./styles/components/Input/input.css.cjs");
+const styles_components_Radio_radio_css_cjs = require("./styles/components/Radio/radio.css.cjs");
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -72,33 +74,36 @@ function useComponentStyles(name, props, useDefaultVariants = true) {
   if (!component.variants) {
     return classNames.join(" ");
   }
-  if (useDefaultVariants && component.defaultVariants) {
-    const keys2 = Object.keys(component.defaultVariants);
+  const { defaultVariants } = component;
+  if (useDefaultVariants && defaultVariants) {
+    const keys2 = Object.keys(defaultVariants);
     for (const key of keys2) {
-      if (variantsWithDefaults[key] === void 0) {
-        variantsWithDefaults[key] = component.defaultVariants[key];
+      if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
+        variantsWithDefaults[key] = defaultVariants[key];
       }
     }
   }
   const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
   for (const key of keys) {
     const value = variantsWithDefaults[key];
     if (value === void 0) {
       continue;
     }
     if (typeof value === "boolean") {
-      if (value && component.variants[key]) {
-        classNames.push(component.variants[key]);
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
       }
       continue;
     }
-    const variant = component.variants[key][value];
+    const variant = componentVariants[key][value];
     if (variant) {
       classNames.push(variant);
     }
   }
-  if (component.compoundVariants) {
-    for (const compoundVariant of component.compoundVariants) {
+  const { compoundVariants } = component;
+  if (compoundVariants) {
+    for (const compoundVariant of compoundVariants) {
       const keys2 = Object.keys(compoundVariant.variants);
       const matches = keys2.every((key) => {
         const value = variantsWithDefaults[key];
@@ -140,31 +145,22 @@ const Button = react.forwardRef(function Button2({
   disabled,
   ...restProps
 }, ref) {
-  const isLinkVariant = variant === "link";
   const buttonClassName = useComponentStyles("button", {
     base: true,
     variants: {
-      variant: isLinkVariant ? "solid" : variant,
+      variant,
       intent,
       size,
       disabled,
       loading
     }
   });
-  const linkClassName = useComponentStyles("link", {
-    base: true,
-    variants: { variant: "primary" }
-  });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
       ref,
       as: "button",
-      className: classnames(
-        styles_components_Button_Button_css_cjs.buttonReset,
-        isLinkVariant ? linkClassName : buttonClassName,
-        className
-      ),
+      className: classnames(styles_components_Button_Button_css_cjs.buttonReset, buttonClassName, className),
       width,
       type,
       disabled: disabled || loading,
@@ -178,143 +174,45 @@ const Button = react.forwardRef(function Button2({
     }
   );
 });
-const Heading = ({
-  className,
-  level = 1,
+const Label = ({
+  visualOnly,
   children,
-  align,
-  fontSize,
-  fontWeight = "strong",
-  fontFamily,
+  className,
+  required,
+  size,
+  cursor,
   ...restProps
 }) => {
-  const as = `h${level}`;
+  const Component = visualOnly ? "span" : "label";
+  const containerClassName = useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
+    Component,
     {
-      as,
-      className,
-      fontFamily,
-      fontWeight,
-      fontSize,
-      textAlign: align,
-      padding: "none",
-      margin: "none",
+      className: classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
       ...restProps,
       children
     }
   );
 };
-const justifyContentMap = {
-  left: "flex-start",
-  right: "flex-end",
-  center: "center",
-  between: "space-between",
-  around: "space-around"
-};
-const alignItemsMap = {
-  left: "flex-start",
-  right: "flex-end",
-  center: "center",
-  stretch: "stretch"
-};
-const Inline = ({
-  alignX,
-  alignY,
-  as = "div",
-  children,
-  display = "flex",
-  gap,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      as,
-      display,
-      gap,
-      flexDirection: "row",
-      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
-      alignItems: alignY ? alignItemsMap[alignY] : void 0,
-      flexWrap: "wrap",
-      ...props,
-      children
-    }
-  );
-};
-const Stack = ({
-  as = "div",
-  display = "flex",
-  children,
-  gap,
-  alignX,
-  ...restProps
-}) => {
-  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && as !== "ol") {
-    console.warn('Stack: start prop is only valid when as="ol"');
+const Checkbox = react.forwardRef(function Checkbox2({ name, label, required, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("checkbox", { base: true }, false);
+  const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classnames(styles_components_Checkbox_checkbox_css_cjs.container, containerClassName, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "checkbox", name, className: styles_components_Checkbox_checkbox_css_cjs.input, ...restProps }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames(styles_components_Checkbox_checkbox_css_cjs.icon, iconClassName) })
+  ] });
+  if (!label) {
+    return input;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      as,
-      display,
-      gap,
-      flexDirection: "column",
-      alignItems: alignX ? alignItemsMap[alignX] : void 0,
-      ...restProps,
-      children
-    }
-  );
-};
-const Text = ({
-  as = "span",
-  children,
-  color,
-  fontSize,
-  fontWeight,
-  fontFamily,
-  textAlign,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      as,
-      color,
-      fontSize,
-      fontWeight,
-      fontFamily,
-      textAlign,
-      padding: "none",
-      margin: "none",
-      ...restProps,
-      children
-    }
-  );
-};
-const defaultElement = "a";
-const Link = react.forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
-  const Component = as || defaultElement;
-  const linkClassName = useComponentStyles("link", {
-    base: true,
-    variants: { variant, underline }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
+    input,
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { visualOnly: true, required, children: label })
+  ] });
 });
-const Divider = ({ className, color, ...restProps }) => {
-  const dividerClass = useComponentStyles("divider", { base: true });
-  const dividerDefaults = useComponentStyleDefaultProps("divider");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      role: "separator",
-      width: "full",
-      backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider),
-      ...restProps
-    }
-  );
-};
 const useLayer = () => {
   const layerRef = react.useRef();
   react.useEffect(
@@ -327,7 +225,9 @@ const useLayer = () => {
   );
   return () => {
     if (!layerRef.current) {
-      layerRef.current = document.createElement("div");
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
       document.body.append(layerRef.current);
     }
     return layerRef.current;
@@ -418,7 +318,14 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const Dialog = ({ children, open, className, onRequestClose, size }) => {
+const Dialog = ({
+  children,
+  open,
+  className,
+  onRequestClose,
+  size,
+  ...restProps
+}) => {
   const dialogRef = react.useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
@@ -473,6 +380,7 @@ const Dialog = ({ children, open, className, onRequestClose, size }) => {
         {
           ref: dialogRef,
           as: "dialog",
+          "aria-modal": "true",
           open: true,
           className: classnames(
             styles_components_Dialog_dialog_css_cjs.dialog,
@@ -480,12 +388,91 @@ const Dialog = ({ children, open, className, onRequestClose, size }) => {
             dialogClassName,
             className
           ),
+          ...restProps,
           children
         }
       )
     }
   ) }) });
 };
+const Divider = ({ className, color, ...restProps }) => {
+  const dividerClass = useComponentStyles("divider", { base: true });
+  const dividerDefaults = useComponentStyleDefaultProps("divider");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      role: "separator",
+      width: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider),
+      ...restProps
+    }
+  );
+};
+const Heading = ({
+  className,
+  level = 1,
+  children,
+  align,
+  fontSize,
+  fontWeight = "strong",
+  fontFamily,
+  ...restProps
+}) => {
+  const as = `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      as,
+      className,
+      fontFamily,
+      fontWeight,
+      fontSize,
+      textAlign: align,
+      padding: "none",
+      margin: "none",
+      ...restProps,
+      children
+    }
+  );
+};
+const justifyContentMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around"
+};
+const alignItemsMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  stretch: "stretch"
+};
+const Inline = ({
+  alignX,
+  alignY,
+  as = "div",
+  children,
+  display = "flex",
+  gap,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      as,
+      display,
+      gap,
+      flexDirection: "row",
+      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
+      alignItems: alignY ? alignItemsMap[alignY] : void 0,
+      flexWrap: "wrap",
+      ...props,
+      children
+    }
+  );
+};
 const Input = react.forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, label, placeholder, ...restProps }, ref) {
   const id = react.useId();
   const containerClassName = useComponentStyles("input", { container: true }, false);
@@ -510,6 +497,81 @@ const Input = react.forwardRef(function Input2({ className, name, type = "text",
     endSlot
   ] }) });
 });
+const defaultElement = "a";
+const Link = react.forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
+  const Component = as || defaultElement;
+  const linkClassName = useComponentStyles("link", {
+    base: true,
+    variants: { variant, underline }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
+});
+const Radio = react.forwardRef(function Checkbox3({ name, label, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("radio", { base: true }, false);
+  const iconClassName = useComponentStyles("radio", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classnames(styles_components_Radio_radio_css_cjs.container, containerClassName, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "radio", name, className: styles_components_Radio_radio_css_cjs.input, ...restProps }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames(styles_components_Radio_radio_css_cjs.icon, iconClassName) })
+  ] });
+  if (!label) {
+    return input;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
+    input,
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { visualOnly: true, children: label })
+  ] });
+});
+const Stack = ({
+  as = "div",
+  display = "flex",
+  children,
+  gap,
+  alignX,
+  ...restProps
+}) => {
+  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && as !== "ol") {
+    console.warn('Stack: start prop is only valid when as="ol"');
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      as,
+      display,
+      gap,
+      flexDirection: "column",
+      alignItems: alignX ? alignItemsMap[alignX] : void 0,
+      ...restProps,
+      children
+    }
+  );
+};
+const Text = ({
+  as = "span",
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      as,
+      color,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      textAlign,
+      padding: "none",
+      margin: "none",
+      ...restProps,
+      children
+    }
+  );
+};
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
 exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
 exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
@@ -518,12 +580,16 @@ exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.BlocksProvider = BlocksProvider;
 exports.Box = Box;
 exports.Button = Button;
+exports.Checkbox = Checkbox;
 exports.Dialog = Dialog;
 exports.Divider = Divider;
 exports.Heading = Heading;
 exports.Inline = Inline;
 exports.Input = Input;
+exports.Label = Label;
 exports.Link = Link;
+exports.Portal = Portal;
+exports.Radio = Radio;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.Text = Text;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Radio, RadioProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, vars } from './momotaro.chunk.js';