@blockle/blocks 0.2.2 → 0.3.0

package/README.md

@@ -15,7 +15,7 @@ import React from 'react';
 
 import '@blockle/blocks/reset.css';
 import { ThemeProvider } from '@blockle/blocks';
-import { theme } from '@blockle/blocks/themes/momotaro';
+import { momotaro } from '@blockle/blocks/themes/momotaro';
 
 // const Link = makeLinkComponent(...)
 

package/dist/index.cjs

@@ -1,19 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
+const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
+const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
+const styles_components_Button_Button_css_cjs = require("./styles/components/Button/Button.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("div", { className: classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "standard" })), children });
+  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: "standard" })), children }) });
 };
-const defaultElement = "div";
+const defaultElement$1 = "div";
 const Box = react.forwardRef(function Box2({ className, as, ...restProps }, ref) {
-  const Component = as || defaultElement;
+  const Component = as || defaultElement$1;
   const atomProps = {};
   const otherProps = {};
   for (const [name, value] of Object.entries(restProps)) {
@@ -25,6 +27,123 @@ const Box = react.forwardRef(function Box2({ className, as, ...restProps }, ref)
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomProps)), ...otherProps });
 });
+const useTheme = () => {
+  const theme = react.useContext(BlocksProviderContext);
+  if (!theme) {
+    throw new Error("useTheme must be used within a BlocksProvider");
+  }
+  return theme;
+};
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+function useComponentStyles(name, props) {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    console.info(`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];
+      }
+    }
+  }
+  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 (!hasOwnProperty.call(component.variants, key)) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value) {
+        classNames.push(component.variants[key]);
+      }
+      continue;
+    }
+    const variant = component.variants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  if (component.compoundVariants) {
+    for (const compoundVariant of component.compoundVariants) {
+      const keys2 = Object.keys(compoundVariant.variants);
+      const matches = keys2.every((key) => {
+        const value = propsWithDefaults[key];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+const Spinner = ({ className, size, color, ...restProps }) => {
+  const spinnerClassName = useComponentStyles("spinner", { base: true, size, color });
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
+};
+const Button = react.forwardRef(function Button2({
+  children,
+  className,
+  type = "button",
+  variant,
+  intent,
+  size,
+  width,
+  startSlot,
+  endSlot,
+  loading,
+  disabled,
+  ...restProps
+}, ref) {
+  const isLinkVariant = variant === "link";
+  const buttonClassName = useComponentStyles("button", {
+    base: true,
+    variant: isLinkVariant ? "solid" : variant,
+    intent,
+    size
+  });
+  const linkClassName = useComponentStyles("link", { base: true, variant: "primary" });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box,
+    {
+      ref,
+      as: "button",
+      className: classnames(
+        styles_components_Button_Button_css_cjs.buttonReset,
+        isLinkVariant ? linkClassName : buttonClassName,
+        className
+      ),
+      width,
+      type,
+      disabled: disabled || loading,
+      ...restProps,
+      children: [
+        startSlot && /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: "medium", children: startSlot }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size, marginRight: "medium" }),
+        children,
+        endSlot && /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: "medium", children: endSlot })
+      ]
+    }
+  );
+});
 const Heading = ({
   className,
   level = 1,
@@ -139,12 +258,21 @@ const Text = ({
     }
   );
 };
-exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
+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 });
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
+});
 exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
+exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.BlocksProvider = BlocksProvider;
 exports.Box = Box;
+exports.Button = Button;
 exports.Heading = Heading;
 exports.Inline = Inline;
+exports.Link = Link;
+exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.Text = Text;
 exports.classnames = classnames;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Heading, HeadingProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, vars } from './reset.css.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, classnames, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -1,17 +1,21 @@
-import { jsx } from "react/jsx-runtime";
-import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { forwardRef } from "react";
+'use client';
+
 import { vars } from "./styles/lib/css/theme/vars.css.mjs";
+import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { buttonReset } from "./styles/components/Button/Button.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("div", { className: classnames(theme.vars, atoms({ fontFamily: "standard" })), children });
+  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx("div", { className: classnames(theme.vars, atoms({ fontFamily: "standard" })), children }) });
 };
-const defaultElement = "div";
+const defaultElement$1 = "div";
 const Box = forwardRef(function Box2({ className, as, ...restProps }, ref) {
-  const Component = as || defaultElement;
+  const Component = as || defaultElement$1;
   const atomProps = {};
   const otherProps = {};
   for (const [name, value] of Object.entries(restProps)) {
@@ -23,6 +27,123 @@ const Box = forwardRef(function Box2({ className, as, ...restProps }, ref) {
   }
   return /* @__PURE__ */ jsx(Component, { ref, className: classnames(className, atoms(atomProps)), ...otherProps });
 });
+const useTheme = () => {
+  const theme = useContext(BlocksProviderContext);
+  if (!theme) {
+    throw new Error("useTheme must be used within a BlocksProvider");
+  }
+  return theme;
+};
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+function useComponentStyles(name, props) {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    console.info(`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];
+      }
+    }
+  }
+  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 (!hasOwnProperty.call(component.variants, key)) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value) {
+        classNames.push(component.variants[key]);
+      }
+      continue;
+    }
+    const variant = component.variants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  if (component.compoundVariants) {
+    for (const compoundVariant of component.compoundVariants) {
+      const keys2 = Object.keys(compoundVariant.variants);
+      const matches = keys2.every((key) => {
+        const value = propsWithDefaults[key];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+const Spinner = ({ className, size, color, ...restProps }) => {
+  const spinnerClassName = useComponentStyles("spinner", { base: true, size, color });
+  return /* @__PURE__ */ jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
+};
+const Button = forwardRef(function Button2({
+  children,
+  className,
+  type = "button",
+  variant,
+  intent,
+  size,
+  width,
+  startSlot,
+  endSlot,
+  loading,
+  disabled,
+  ...restProps
+}, ref) {
+  const isLinkVariant = variant === "link";
+  const buttonClassName = useComponentStyles("button", {
+    base: true,
+    variant: isLinkVariant ? "solid" : variant,
+    intent,
+    size
+  });
+  const linkClassName = useComponentStyles("link", { base: true, variant: "primary" });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref,
+      as: "button",
+      className: classnames(
+        buttonReset,
+        isLinkVariant ? linkClassName : buttonClassName,
+        className
+      ),
+      width,
+      type,
+      disabled: disabled || loading,
+      ...restProps,
+      children: [
+        startSlot && /* @__PURE__ */ jsx(Box, { paddingRight: "medium", children: startSlot }),
+        loading && /* @__PURE__ */ jsx(Spinner, { size, marginRight: "medium" }),
+        children,
+        endSlot && /* @__PURE__ */ jsx(Box, { paddingLeft: "medium", children: endSlot })
+      ]
+    }
+  );
+});
 const Heading = ({
   className,
   level = 1,
@@ -137,11 +258,20 @@ 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 });
+  return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
+});
 export {
   BlocksProvider,
   Box,
+  Button,
   Heading,
   Inline,
+  Link,
+  Spinner,
   Stack,
   Text,
   atoms,