@blockle/blocks 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
-const styles_lib_css_theme_makeComponentTheme_cjs = require("./styles/lib/css/theme/makeComponentTheme.cjs");
-const styles_lib_css_theme_makeTheme_cjs = require("./styles/lib/css/theme/makeTheme.cjs");
-const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("./styles/lib/theme/makeComponentTheme.cjs");
+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");
@@ -11,13 +11,26 @@ const styles_components_Button_Button_css_cjs = require("./styles/components/But
 const styles_components_Divider_divider_css_cjs = require("./styles/components/Divider/divider.css.cjs");
 const styles_components_Dialog_dialog_css_cjs = require("./styles/components/Dialog/dialog.css.cjs");
 const reactDom = require("react-dom");
+const styles_components_Input_input_css_cjs = require("./styles/components/Input/input.css.cjs");
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
 };
 const BlocksProviderContext = react.createContext(null);
-const BlocksProvider = ({ children, theme }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" })), children }) });
+const BlocksProvider = ({
+  children,
+  theme,
+  className,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" }), className),
+      ...restProps,
+      children
+    }
+  ) });
 };
 const defaultElement$1 = "div";
 const Box = react.forwardRef(function Box2({ className, as, ...restProps }, ref) {
@@ -40,41 +53,41 @@ const useTheme = () => {
   }
   return theme;
 };
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-function useComponentStyles(name, props) {
+function useComponentStyles(name, props, useDefaultVariants = true) {
   const { components } = useTheme();
   const component = components[name];
   if (!component) {
-    console.info(`Component ${name} is not defined in the theme`);
+    console.warn(`Component ${name} is not defined in the theme`);
     return "";
   }
   const classNames = [];
-  const propsWithDefaults = { ...props };
-  if (component.defaultVariants) {
-    const keys2 = Object.keys(component.defaultVariants);
-    for (const key of keys2) {
-      if (propsWithDefaults[key] === void 0) {
-        propsWithDefaults[key] = component.defaultVariants[key];
-      }
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(component[key]);
     }
   }
-  if (propsWithDefaults.base && component.base) {
-    classNames.push(component.base);
-  }
   if (!component.variants) {
     return classNames.join(" ");
   }
-  const keys = Object.keys(propsWithDefaults);
-  for (const key of keys) {
-    const value = propsWithDefaults[key];
-    if (key === "base" || value === void 0) {
-      continue;
+  if (useDefaultVariants && component.defaultVariants) {
+    const keys2 = Object.keys(component.defaultVariants);
+    for (const key of keys2) {
+      if (variantsWithDefaults[key] === void 0) {
+        variantsWithDefaults[key] = component.defaultVariants[key];
+      }
     }
-    if (!hasOwnProperty.call(component.variants, key)) {
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0) {
       continue;
     }
     if (typeof value === "boolean") {
-      if (value) {
+      if (value && component.variants[key]) {
         classNames.push(component.variants[key]);
       }
       continue;
@@ -88,7 +101,7 @@ function useComponentStyles(name, props) {
     for (const compoundVariant of component.compoundVariants) {
       const keys2 = Object.keys(compoundVariant.variants);
       const matches = keys2.every((key) => {
-        const value = propsWithDefaults[key];
+        const value = variantsWithDefaults[key];
         if (value === void 0) {
           return false;
         }
@@ -104,10 +117,13 @@ function useComponentStyles(name, props) {
 const useComponentStyleDefaultProps = (name) => {
   const { components } = useTheme();
   const component = components[name];
-  return (component == null ? void 0 : component.defaultVariants) ?? {};
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
 };
 const Spinner = ({ className, size, color, ...restProps }) => {
-  const spinnerClassName = useComponentStyles("spinner", { base: true, size, color });
+  const spinnerClassName = useComponentStyles("spinner", { base: true, variants: { size, color } });
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
 };
 const Button = react.forwardRef(function Button2({
@@ -127,11 +143,18 @@ const Button = react.forwardRef(function Button2({
   const isLinkVariant = variant === "link";
   const buttonClassName = useComponentStyles("button", {
     base: true,
-    variant: isLinkVariant ? "solid" : variant,
-    intent,
-    size
+    variants: {
+      variant: isLinkVariant ? "solid" : variant,
+      intent,
+      size,
+      disabled,
+      loading
+    }
+  });
+  const linkClassName = useComponentStyles("link", {
+    base: true,
+    variants: { variant: "primary" }
   });
-  const linkClassName = useComponentStyles("link", { base: true, variant: "primary" });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
@@ -272,10 +295,13 @@ const Text = ({
 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, variant, underline });
+  const linkClassName = useComponentStyles("link", {
+    base: true,
+    variants: { variant, underline }
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
 });
-const Divider = ({ className, color }) => {
+const Divider = ({ className, color, ...restProps }) => {
   const dividerClass = useComponentStyles("divider", { base: true });
   const dividerDefaults = useComponentStyleDefaultProps("divider");
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -284,7 +310,8 @@ const Divider = ({ className, color }) => {
       role: "separator",
       width: "full",
       backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider)
+      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider),
+      ...restProps
     }
   );
 };
@@ -391,7 +418,7 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const Dialog = ({ children, open, className, onRequestClose }) => {
+const Dialog = ({ children, open, className, onRequestClose, size }) => {
   const dialogRef = react.useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
@@ -428,8 +455,8 @@ const Dialog = ({ children, open, className, onRequestClose }) => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, enabled]);
-  const backdropClassName = useComponentStyles("dialog", { backdrop: true });
-  const dialogClassName = useComponentStyles("dialog", { base: true });
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
+  const dialogClassName = useComponentStyles("dialog", { base: true, variants: { size } });
   if (!visible) {
     return null;
   }
@@ -459,10 +486,34 @@ const Dialog = ({ children, open, className, onRequestClose }) => {
     }
   ) }) });
 };
+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);
+  const inputClassName = useComponentStyles("input", { input: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", alignItems: "center", className: classnames(containerClassName, className), children: [
+    startSlot,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Box,
+      {
+        as: "input",
+        id,
+        ref,
+        name,
+        type,
+        placeholder: placeholder || label,
+        width: "full",
+        overflow: "hidden",
+        className: classnames(styles_components_Input_input_css_cjs.input, inputClassName),
+        ...restProps
+      }
+    ),
+    endSlot
+  ] }) });
+});
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
-exports.makeComponentTheme = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme;
-exports.makeTheme = styles_lib_css_theme_makeTheme_cjs.makeTheme;
-exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
+exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
+exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
+exports.vars = styles_lib_theme_vars_css_cjs.vars;
 exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.BlocksProvider = BlocksProvider;
 exports.Box = Box;
@@ -471,6 +522,7 @@ exports.Dialog = Dialog;
 exports.Divider = Divider;
 exports.Heading = Heading;
 exports.Inline = Inline;
+exports.Input = Input;
 exports.Link = Link;
 exports.Spinner = Spinner;
 exports.Stack = Stack;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, vars } from './momotaro.chunk.js';
+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';

package/dist/index.mjs

@@ -1,23 +1,36 @@
 'use client';
 
 import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
-import { makeComponentTheme } from "./styles/lib/css/theme/makeComponentTheme.mjs";
-import { makeTheme } from "./styles/lib/css/theme/makeTheme.mjs";
-import { vars } from "./styles/lib/css/theme/vars.css.mjs";
+import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
+import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
+import { vars } from "./styles/lib/theme/vars.css.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect } from "react";
+import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
 import { divider } from "./styles/components/Divider/divider.css.mjs";
 import { backdropLeaveAnimation, backdropLeave, backdrop, dialogLeave, dialog } from "./styles/components/Dialog/dialog.css.mjs";
 import { createPortal } from "react-dom";
+import { input } from "./styles/components/Input/input.css.mjs";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
 };
 const BlocksProviderContext = createContext(null);
-const BlocksProvider = ({ children, theme }) => {
-  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx("div", { className: classnames(theme.vars, atoms({ fontFamily: "primary" })), children }) });
+const BlocksProvider = ({
+  children,
+  theme,
+  className,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classnames(theme.vars, atoms({ fontFamily: "primary" }), className),
+      ...restProps,
+      children
+    }
+  ) });
 };
 const defaultElement$1 = "div";
 const Box = forwardRef(function Box2({ className, as, ...restProps }, ref) {
@@ -40,41 +53,41 @@ const useTheme = () => {
   }
   return theme;
 };
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-function useComponentStyles(name, props) {
+function useComponentStyles(name, props, useDefaultVariants = true) {
   const { components } = useTheme();
   const component = components[name];
   if (!component) {
-    console.info(`Component ${name} is not defined in the theme`);
+    console.warn(`Component ${name} is not defined in the theme`);
     return "";
   }
   const classNames = [];
-  const propsWithDefaults = { ...props };
-  if (component.defaultVariants) {
-    const keys2 = Object.keys(component.defaultVariants);
-    for (const key of keys2) {
-      if (propsWithDefaults[key] === void 0) {
-        propsWithDefaults[key] = component.defaultVariants[key];
-      }
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(component[key]);
     }
   }
-  if (propsWithDefaults.base && component.base) {
-    classNames.push(component.base);
-  }
   if (!component.variants) {
     return classNames.join(" ");
   }
-  const keys = Object.keys(propsWithDefaults);
-  for (const key of keys) {
-    const value = propsWithDefaults[key];
-    if (key === "base" || value === void 0) {
-      continue;
+  if (useDefaultVariants && component.defaultVariants) {
+    const keys2 = Object.keys(component.defaultVariants);
+    for (const key of keys2) {
+      if (variantsWithDefaults[key] === void 0) {
+        variantsWithDefaults[key] = component.defaultVariants[key];
+      }
     }
-    if (!hasOwnProperty.call(component.variants, key)) {
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0) {
       continue;
     }
     if (typeof value === "boolean") {
-      if (value) {
+      if (value && component.variants[key]) {
         classNames.push(component.variants[key]);
       }
       continue;
@@ -88,7 +101,7 @@ function useComponentStyles(name, props) {
     for (const compoundVariant of component.compoundVariants) {
       const keys2 = Object.keys(compoundVariant.variants);
       const matches = keys2.every((key) => {
-        const value = propsWithDefaults[key];
+        const value = variantsWithDefaults[key];
         if (value === void 0) {
           return false;
         }
@@ -104,10 +117,13 @@ function useComponentStyles(name, props) {
 const useComponentStyleDefaultProps = (name) => {
   const { components } = useTheme();
   const component = components[name];
-  return (component == null ? void 0 : component.defaultVariants) ?? {};
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
 };
 const Spinner = ({ className, size, color, ...restProps }) => {
-  const spinnerClassName = useComponentStyles("spinner", { base: true, size, color });
+  const spinnerClassName = useComponentStyles("spinner", { base: true, variants: { size, color } });
   return /* @__PURE__ */ jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
 };
 const Button = forwardRef(function Button2({
@@ -127,11 +143,18 @@ const Button = forwardRef(function Button2({
   const isLinkVariant = variant === "link";
   const buttonClassName = useComponentStyles("button", {
     base: true,
-    variant: isLinkVariant ? "solid" : variant,
-    intent,
-    size
+    variants: {
+      variant: isLinkVariant ? "solid" : variant,
+      intent,
+      size,
+      disabled,
+      loading
+    }
+  });
+  const linkClassName = useComponentStyles("link", {
+    base: true,
+    variants: { variant: "primary" }
   });
-  const linkClassName = useComponentStyles("link", { base: true, variant: "primary" });
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -272,10 +295,13 @@ const Text = ({
 const defaultElement = "a";
 const Link = forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
   const Component = as || defaultElement;
-  const linkClassName = useComponentStyles("link", { base: true, variant, underline });
+  const linkClassName = useComponentStyles("link", {
+    base: true,
+    variants: { variant, underline }
+  });
   return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
 });
-const Divider = ({ className, color }) => {
+const Divider = ({ className, color, ...restProps }) => {
   const dividerClass = useComponentStyles("divider", { base: true });
   const dividerDefaults = useComponentStyleDefaultProps("divider");
   return /* @__PURE__ */ jsx(
@@ -284,7 +310,8 @@ const Divider = ({ className, color }) => {
       role: "separator",
       width: "full",
       backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, divider)
+      className: classnames(className, dividerClass, divider),
+      ...restProps
     }
   );
 };
@@ -391,7 +418,7 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const Dialog = ({ children, open, className, onRequestClose }) => {
+const Dialog = ({ children, open, className, onRequestClose, size }) => {
   const dialogRef = useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
@@ -428,8 +455,8 @@ const Dialog = ({ children, open, className, onRequestClose }) => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, enabled]);
-  const backdropClassName = useComponentStyles("dialog", { backdrop: true });
-  const dialogClassName = useComponentStyles("dialog", { base: true });
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
+  const dialogClassName = useComponentStyles("dialog", { base: true, variants: { size } });
   if (!visible) {
     return null;
   }
@@ -459,6 +486,30 @@ const Dialog = ({ children, open, className, onRequestClose }) => {
     }
   ) }) });
 };
+const Input = forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, label, placeholder, ...restProps }, ref) {
+  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(
+      Box,
+      {
+        as: "input",
+        id,
+        ref,
+        name,
+        type,
+        placeholder: placeholder || label,
+        width: "full",
+        overflow: "hidden",
+        className: classnames(input, inputClassName),
+        ...restProps
+      }
+    ),
+    endSlot
+  ] }) });
+});
 export {
   BlocksProvider,
   Box,
@@ -467,6 +518,7 @@ export {
   Divider,
   Heading,
   Inline,
+  Input,
   Link,
   Spinner,
   Stack,