@blockle/blocks 0.7.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_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;
@@ -172,6 +174,45 @@ const Button = react.forwardRef(function Button2({
     }
   );
 });
+const Label = ({
+  visualOnly,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = visualOnly ? "span" : "label";
+  const containerClassName = useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
+      ...restProps,
+      children
+    }
+  );
+};
+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.jsxs("label", { className: labelClassName, children: [
+    input,
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { visualOnly: true, required, children: label })
+  ] });
+});
 const useLayer = () => {
   const layerRef = react.useRef();
   react.useEffect(
@@ -456,29 +497,6 @@ const Input = react.forwardRef(function Input2({ className, name, type = "text",
     endSlot
   ] }) });
 });
-const Label = ({
-  visualOnly,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = visualOnly ? "span" : "label";
-  const containerClassName = useComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      className: classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
 const defaultElement = "a";
 const Link = react.forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
   const Component = as || defaultElement;
@@ -488,6 +506,22 @@ const Link = react.forwardRef(function Link2({ as, className, 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",
@@ -546,6 +580,7 @@ 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;
@@ -553,6 +588,8 @@ 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, Label, LabelProps, 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';

package/dist/index.mjs

@@ -5,13 +5,15 @@ 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, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useId } from "react";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
+import { container, input, icon } from "./styles/components/Checkbox/checkbox.css.mjs";
 import { backdropLeaveAnimation, backdropLeave, backdrop, dialogLeave, dialog } from "./styles/components/Dialog/dialog.css.mjs";
 import { createPortal } from "react-dom";
 import { divider } from "./styles/components/Divider/divider.css.mjs";
-import { input } from "./styles/components/Input/input.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";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -172,6 +174,45 @@ const Button = forwardRef(function Button2({
     }
   );
 });
+const Label = ({
+  visualOnly,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = visualOnly ? "span" : "label";
+  const containerClassName = useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classnames(containerClassName, className, atoms({ cursor })),
+      ...restProps,
+      children
+    }
+  );
+};
+const Checkbox = 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$12 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "checkbox", name, className: input, ...restProps }),
+    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
+  ] });
+  if (!label) {
+    return input$12;
+  }
+  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+    input$12,
+    label && /* @__PURE__ */ jsx(Label, { visualOnly: true, required, children: label })
+  ] });
+});
 const useLayer = () => {
   const layerRef = useRef();
   useEffect(
@@ -205,12 +246,12 @@ const useVisibilityState = (open) => {
   return [visible, hide];
 };
 const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
+const getFirstFocusableElement = (container2) => {
+  const focusable = container2.querySelector(focusableSelectors);
   return focusable || null;
 };
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
+const focusFirstElement = (container2) => {
+  const focusable = getFirstFocusableElement(container2);
   if (focusable) {
     focusable.focus();
   }
@@ -270,11 +311,11 @@ const usePreventBodyScroll = (enabled = true) => {
     };
   }, [enabled]);
 };
-const Portal = ({ children, container }) => {
+const Portal = ({ children, container: container2 }) => {
   const context = useTheme();
   return createPortal(
     /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
-    container || document.body
+    container2 || document.body
   );
 };
 const Dialog = ({
@@ -449,36 +490,13 @@ const Input = forwardRef(function Input2({ className, name, type = "text", start
         placeholder: placeholder || label,
         width: "full",
         overflow: "hidden",
-        className: classnames(input, inputClassName),
+        className: classnames(input$1, inputClassName),
         ...restProps
       }
     ),
     endSlot
   ] }) });
 });
-const Label = ({
-  visualOnly,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = visualOnly ? "span" : "label";
-  const containerClassName = useComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: classnames(containerClassName, className, atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
 const defaultElement = "a";
 const Link = forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
   const Component = as || defaultElement;
@@ -488,6 +506,22 @@ const Link = forwardRef(function Link2({ as, className, variant, underline, ...r
   });
   return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
 });
+const Radio = 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 input2 = /* @__PURE__ */ jsxs("div", { className: classnames(container$1, containerClassName, className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "radio", name, className: input$2, ...restProps }),
+    /* @__PURE__ */ jsx("div", { className: classnames(icon$1, iconClassName) })
+  ] });
+  if (!label) {
+    return input2;
+  }
+  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+    input2,
+    label && /* @__PURE__ */ jsx(Label, { visualOnly: true, children: label })
+  ] });
+});
 const Stack = ({
   as = "div",
   display = "flex",
@@ -542,6 +576,7 @@ export {
   BlocksProvider,
   Box,
   Button,
+  Checkbox,
   Dialog,
   Divider,
   Heading,
@@ -549,6 +584,8 @@ export {
   Input,
   Label,
   Link,
+  Portal,
+  Radio,
   Spinner,
   Stack,
   Text,

package/dist/momotaro.chunk.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
 import * as react from 'react';
-import { HTMLProps, ReactNode, FC } from 'react';
+import react__default, { HTMLProps, ReactNode, FC } from 'react';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 
 declare const atoms: ((props: {
@@ -574,6 +574,17 @@ declare const Button: react.ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
 } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
 
+type CheckboxProps = {
+    name: string;
+    label?: react__default.ReactNode;
+    required?: boolean;
+} & HTMLElementProps<HTMLInputElement>;
+declare const Checkbox: react__default.ForwardRefExoticComponent<{
+    name: string;
+    label?: react__default.ReactNode;
+    required?: boolean | undefined;
+} & HTMLElementProps<HTMLInputElement> & react__default.RefAttributes<HTMLInputElement>>;
+
 type DialogProps = {
     children?: ReactNode;
     open: boolean;
@@ -665,6 +676,23 @@ type LinkProps = {
 type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
 declare const Link: PolymorphicLink;
 
+type PortalProps = {
+    children: ReactNode;
+    container?: HTMLElement;
+};
+declare const Portal: FC<PortalProps>;
+
+type RadioProps = {
+    name: string;
+    value: string;
+    label?: React.ReactNode;
+} & HTMLElementProps<HTMLInputElement>;
+declare const Radio: react.ForwardRefExoticComponent<{
+    name: string;
+    value: string;
+    label?: React.ReactNode;
+} & HTMLElementProps<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
+
 type SpinnerProps = {
     className?: string;
     color?: SpinnerTheme['variants']['color'];
@@ -719,4 +747,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: Theme;
 
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };
+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, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };

package/dist/styles/components/Checkbox/checkbox.css.cjs

@@ -0,0 +1,31 @@
+"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");
+fileScope.setFileScope("src/components/Checkbox/checkbox.css.ts?used", "blocks");
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = css.style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = css.style({
+  pointerEvents: "none"
+}, "icon");
+fileScope.endFileScope();
+exports.container = container;
+exports.icon = icon;
+exports.input = input;

package/dist/styles/components/Checkbox/checkbox.css.mjs

@@ -0,0 +1,32 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Checkbox/checkbox.css.ts?used", "blocks");
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = style({
+  pointerEvents: "none"
+}, "icon");
+endFileScope();
+export {
+  container,
+  icon,
+  input
+};

package/dist/styles/components/Radio/radio.css.cjs

@@ -0,0 +1,31 @@
+"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");
+fileScope.setFileScope("src/components/Radio/radio.css.ts?used", "blocks");
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = css.style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = css.style({
+  pointerEvents: "none"
+}, "icon");
+fileScope.endFileScope();
+exports.container = container;
+exports.icon = icon;
+exports.input = input;

package/dist/styles/components/Radio/radio.css.mjs

@@ -0,0 +1,32 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Radio/radio.css.ts?used", "blocks");
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = style({
+  pointerEvents: "none"
+}, "icon");
+endFileScope();
+export {
+  container,
+  icon,
+  input
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",