@blockle/blocks 0.8.5 → 0.8.7

package/README.md

@@ -1,13 +1,11 @@
-# @blockle/blocks
+# @blockle/blocks design system
 
-TODO: Fix ts and add fix script: "release": "yarn ts && yarn test && yarn build && changeset publish"
-
-Blocks design system
+Design system for react with vanilla-extract.
 
 ## Installation
 
 ```bash
-npm install @blockle/blocks
+yarn add @blockle/blocks
 ```
 
 ## Setup
@@ -16,15 +14,13 @@ npm install @blockle/blocks
 import React from 'react';
 
 import '@blockle/blocks/reset.css';
-import { ThemeProvider } from '@blockle/blocks';
+import { BlocksProvider } from '@blockle/blocks';
 import { momotaro } from '@blockle/blocks/themes/momotaro';
 
-// const Link = makeLinkComponent(...)
-
 const App = () => (
-  <ThemeProvider theme={theme} spritePath="/public/" linkComponent={Link}>
-    ...
-  </ThemeProvider>
+  <BlocksProvider theme={momotaro}>
+    <div>Your app here</div>
+  </BlocksProvider>
 );
 ```
 
@@ -34,7 +30,7 @@ const App = () => (
 import React from 'react';
 import { Button } from '@blockle/blocks';
 
-const App = () => <Button>Click me</Button>;
+const App = () => <Button variant="ghost">Click me</Button>;
 ```
 
 ## Theming
@@ -42,9 +38,11 @@ const App = () => <Button>Click me</Button>;
 yourTheme.css.ts
 
 ```jsx
-import { makeTokens, makeComponentTheme, makeTheme } from "@blockle/blocks";
+import { ThemeTokens, makeComponentTheme, makeTheme, style } from "@blockle/blocks";
 
-const tokens = makeTokens({ ... });
+const tokens: ThemeTokens = {
+  // ...
+};
 
 const button = makeComponentTheme('button', {
   base: style({
@@ -58,12 +56,15 @@ const button = makeComponentTheme('button', {
       ...
     })
   },
+  compoundVariants: [],
+  defaultVariants: {
+    variant: 'primary',
+  },
 });
 
-const theme = makeTheme({
+export const theme = makeTheme({
+  name: 'Theme name',
   tokens,
-  components: {
-    button
-  }
+  components,
 });
 ```

package/dist/index.cjs

@@ -1,6 +1,7 @@
 "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_style_style_cjs = require("./styles/lib/css/style/style.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");
@@ -15,6 +16,7 @@ const styles_components_Divider_divider_css_cjs = require("./styles/components/D
 const styles_components_Heading_heading_css_cjs = require("./styles/components/Heading/heading.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 styles_components_Switch_switch_css_cjs = require("./styles/components/Switch/switch.css.cjs");
 const styles_components_Text_text_css_cjs = require("./styles/components/Text/text.css.cjs");
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
@@ -659,7 +661,7 @@ const Progress = react.forwardRef(function Progress2({ value, max = 100, classNa
   const containerClassName = useComponentStyles(
     "progress",
     {
-      container: true
+      base: true
     },
     false
   );
@@ -733,10 +735,66 @@ const Stack = ({
     }
   );
 };
+const Switch = react.forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
+  const [isChecked, setIsChecked] = react.useState(defaultChecked || checked || false);
+  const baseClassName = useComponentStyles("switch", { base: true });
+  const sliderClassName = useComponentStyles("switch", { slider: true });
+  react.useEffect(() => {
+    if (checked !== void 0) {
+      setIsChecked(checked);
+    }
+  }, [checked]);
+  const toggle = react.useCallback(() => {
+    setIsChecked((checked2) => {
+      const newValue = !checked2;
+      if (onChange) {
+        onChange(newValue);
+      }
+      return newValue;
+    });
+  }, [onChange]);
+  const onChangeHandler = react.useCallback(
+    (event) => {
+      setIsChecked(event.target.checked);
+      if (onChange) {
+        onChange(event.target.checked);
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classnames(className, styles_components_Switch_switch_css_cjs.container, baseClassName),
+      "data-checked": isChecked,
+      onClick: (event) => {
+        if (event.target.tagName === "INPUT") {
+          return;
+        }
+        toggle();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: styles_components_Switch_switch_css_cjs.input,
+            checked: isChecked,
+            onChange: onChangeHandler,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: sliderClassName, "data-checked": isChecked })
+      ]
+    }
+  ) });
+});
 const Text = react.forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, asChild: true, className: classnames(styles_components_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
 });
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
+exports.style = styles_lib_css_style_style_cjs.style;
 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;
@@ -758,6 +816,7 @@ exports.Radio = Radio;
 exports.Slot = Slot;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
+exports.Switch = Switch;
 exports.Text = Text;
 exports.classnames = classnames;
 exports.createSlottable = createSlottable;

package/dist/index.d.ts

@@ -1 +1 @@
-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, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, 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, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -1,11 +1,12 @@
 'use client';
 
 import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
+import { style } from "./styles/lib/css/style/style.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 { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, forwardRef, Children, isValidElement, cloneElement, useContext, useEffect, useLayoutEffect, useRef, useState, useCallback, useId } from "react";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
 import { container, input, icon } from "./styles/components/Checkbox/checkbox.css.mjs";
@@ -15,6 +16,7 @@ import { divider } from "./styles/components/Divider/divider.css.mjs";
 import { heading } from "./styles/components/Heading/heading.css.mjs";
 import { input as input$1 } from "./styles/components/Input/input.css.mjs";
 import { container as container$1, input as input$2, icon as icon$1 } from "./styles/components/Radio/radio.css.mjs";
+import { container as container$2, input as input$3 } from "./styles/components/Switch/switch.css.mjs";
 import { text } from "./styles/components/Text/text.css.mjs";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
@@ -446,8 +448,8 @@ function hasAnimationDuration(element) {
   if (!element) {
     return false;
   }
-  const style = window.getComputedStyle(element);
-  return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
+  const style2 = window.getComputedStyle(element);
+  return style2.transitionDuration !== "0s" || style2.animationDuration !== "0s";
 }
 const Portal = ({ children, container: container2 }) => {
   const context = useTheme();
@@ -659,7 +661,7 @@ const Progress = forwardRef(function Progress2({ value, max = 100, className, ..
   const containerClassName = useComponentStyles(
     "progress",
     {
-      container: true
+      base: true
     },
     false
   );
@@ -733,6 +735,61 @@ const Stack = ({
     }
   );
 };
+const Switch = forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
+  const [isChecked, setIsChecked] = useState(defaultChecked || checked || false);
+  const baseClassName = useComponentStyles("switch", { base: true });
+  const sliderClassName = useComponentStyles("switch", { slider: true });
+  useEffect(() => {
+    if (checked !== void 0) {
+      setIsChecked(checked);
+    }
+  }, [checked]);
+  const toggle = useCallback(() => {
+    setIsChecked((checked2) => {
+      const newValue = !checked2;
+      if (onChange) {
+        onChange(newValue);
+      }
+      return newValue;
+    });
+  }, [onChange]);
+  const onChangeHandler = useCallback(
+    (event) => {
+      setIsChecked(event.target.checked);
+      if (onChange) {
+        onChange(event.target.checked);
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(className, container$2, baseClassName),
+      "data-checked": isChecked,
+      onClick: (event) => {
+        if (event.target.tagName === "INPUT") {
+          return;
+        }
+        toggle();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: input$3,
+            checked: isChecked,
+            onChange: onChangeHandler,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: sliderClassName, "data-checked": isChecked })
+      ]
+    }
+  ) });
+});
 const Text = forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
   return /* @__PURE__ */ jsx(Box, { ref, asChild: true, className: classnames(text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsx(Tag, { children }) });
 });
@@ -754,6 +811,7 @@ export {
   Slot,
   Spinner,
   Stack,
+  Switch,
   Text,
   atoms,
   breakpointQuery,
@@ -761,6 +819,7 @@ export {
   createSlottable,
   makeComponentTheme,
   makeTheme,
+  style,
   useComponentStyleDefaultProps,
   useComponentStyles,
   useIsomorphicLayoutEffect,