@blockle/blocks 0.6.0 → 0.7.1

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: {
@@ -248,9 +248,6 @@ declare const breakpointQuery: (key: Breakpoint) => string;
  */
 type OptionalLiteral<T extends string> = T | (string & {});
 type RecordLike = Record<string | number, unknown>;
-type IsStringUnion<T> = T extends string ? (string extends T ? false : true) : false;
-type IsNumberUnion<T> = T extends number ? (number extends T ? false : true) : false;
-type IsUnion<T> = IsStringUnion<T> extends true ? true : IsNumberUnion<T> extends true ? true : false;
 
 type Atoms = Parameters<typeof atoms>[0];
 type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
@@ -278,7 +275,7 @@ type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
 type ButtonTheme = {
     base: string;
     variants: {
-        variant: 'solid' | 'outline' | 'ghost' | 'link';
+        variant: 'solid' | 'outline' | 'ghost';
         intent: 'neutral' | 'danger';
         size: 'small' | 'medium' | 'large';
         loading: boolean;
@@ -300,7 +297,7 @@ type SpinnerTheme = {
     };
 };
 type DividerTheme = {
-    base: string;
+    base?: string;
     variants: {
         color: Exclude<Atoms['color'], undefined>;
     };
@@ -316,22 +313,52 @@ type InputTheme = {
     container: string;
     input: string;
     variants: {
+        variant: 'solid' | 'outline';
         disabled: boolean;
+        required: boolean;
+    };
+};
+type CheckboxTheme = {
+    base: string;
+    icon: string;
+    label: string;
+    variants: {
+        required: boolean;
+    };
+};
+type RadioTheme = {
+    base: string;
+    icon: string;
+    label: string;
+};
+type LabelTheme = {
+    base: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        required: boolean;
     };
 };
-type ThemeComponents = {
+type ComponentThemes = {
     button: ButtonTheme;
     link: LinkTheme;
     spinner: SpinnerTheme;
     divider: DividerTheme;
     dialog: DialogTheme;
     input: InputTheme;
+    checkbox: CheckboxTheme;
+    radio: RadioTheme;
+    label: LabelTheme;
 };
-type ThemeComponentsProps = {
-    [K in keyof ThemeComponents]: ThemeComponentProps<ThemeComponents[K]>;
+/**
+ * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
+ */
+type ComponentThemeProps<T extends RecordLike> = Omit<{
+    [K in keyof T]?: Exclude<T[K], undefined> extends string ? boolean : never;
+}, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? Partial<T['variants']> : never;
 };
-type ThemeComponentProps<T extends RecordLike> = {
-    [K in keyof T]?: T[K] extends RecordLike ? ThemeComponentProps<T[K]> : IsUnion<T[K]> extends true ? T[K] : T[K] extends string ? boolean : T[K];
+type ComponentThemesProps = {
+    [K in keyof ComponentThemes]: ComponentThemeProps<ComponentThemes[K]>;
 };
 
 /**
@@ -354,8 +381,14 @@ type ThemeComponentProps<T extends RecordLike> = {
  *  };
  * };
  */
-type ComponentThemeToStyles<T extends RecordLike> = {
-    [K in keyof T]?: T[K] extends RecordLike ? ComponentThemeToStyles<T[K]> : IsUnion<Exclude<T[K], undefined>> extends true ? Exclude<T[K], undefined> extends string | number ? ComponentThemeToStyles<Record<Exclude<T[K], undefined>, string>> : never : string;
+type VariantsToStyle<T extends RecordLike> = {
+    [K in keyof T]?: T[K] extends string | number ? Partial<Record<T[K], string>> : T[K] extends boolean ? string : never;
+};
+/**
+ * ComponentThemeToStyles is a helper type to define the props passed to useComponentStyles.
+ */
+type ComponentThemeToStyles<T extends RecordLike> = Omit<T, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? VariantsToStyle<T['variants']> : never;
 };
 type ComponentThemeCompoundVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
     variants: {
@@ -371,7 +404,7 @@ type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
     defaultVariants?: ComponentThemeDefaultVariants<T>;
 };
 type ThemeComponentsStyles = {
-    [K in keyof ThemeComponents]?: ComponentTheme<ThemeComponents[K]>;
+    [K in keyof ComponentThemes]: ComponentTheme<ComponentThemes[K]>;
 };
 declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: ThemeComponentsStyles[T]): ThemeComponentsStyles[T];
 
@@ -411,12 +444,12 @@ type ThemeTokens = {
 type ThemeInput = {
     name: string;
     tokens: ThemeTokens;
-    components: Partial<ThemeComponentsStyles>;
+    components: ThemeComponentsStyles;
 };
 type Theme = {
     name: string;
     vars: string;
-    components: Partial<ThemeComponentsStyles>;
+    components: ThemeComponentsStyles;
 };
 declare function makeTheme(theme: ThemeInput): Theme;
 
@@ -530,7 +563,7 @@ type ButtonProps = {
 declare const Button: react.ForwardRefExoticComponent<{
     children: ReactNode;
     type?: "button" | "submit" | "reset" | undefined;
-    variant?: "link" | "outline" | "solid" | "ghost" | undefined;
+    variant?: "outline" | "solid" | "ghost" | undefined;
     intent?: "danger" | "neutral" | undefined;
     size?: "small" | "medium" | "large" | undefined;
     width?: Atoms['width'];
@@ -541,6 +574,34 @@ 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;
+    onRequestClose: () => void;
+    className?: string;
+    size?: DialogTheme['variants']['size'];
+    'aria-label'?: string;
+};
+declare const Dialog: FC<DialogProps>;
+
+type DividerProps = {
+    className?: string;
+    color?: Atoms['backgroundColor'];
+    style?: React.CSSProperties;
+};
+declare const Divider: FC<DividerProps>;
+
 type HeadingProps = {
     align?: Atoms['textAlign'];
     children: React.ReactNode;
@@ -580,6 +641,66 @@ type InlineProps = {
 } & MarginAndPaddingAtoms;
 declare const Inline: React.FC<InlineProps>;
 
+type InputProps = {
+    className?: string;
+    name: string;
+    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    label: string;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
+declare const Input: react.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    name: string;
+    type?: OptionalLiteral<"number" | "text" | "tel" | "url" | "email" | "password"> | undefined;
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    label: string;
+} & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
+
+type LabelProps = {
+    visualOnly?: boolean;
+    htmlFor?: string;
+    children?: React.ReactNode;
+    required?: boolean;
+    size?: LabelTheme['variants']['size'];
+    cursor?: Atoms['cursor'];
+} & HTMLElementProps<HTMLLabelElement>;
+declare const Label: React.FC<LabelProps>;
+
+type LinkProps = {
+    children?: ReactNode;
+    underline?: LinkTheme['variants']['underline'];
+    variant?: LinkTheme['variants']['variant'];
+} & Atoms & HTMLElementProps<HTMLAnchorElement>;
+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'];
+    size?: SpinnerTheme['variants']['size'];
+    style?: React.CSSProperties;
+} & MarginAtoms;
+declare const Spinner: FC<SpinnerProps>;
+
 type StackProps = {
     alignX?: keyof AlignItemsMap;
     as?: 'div' | 'section' | 'ul' | 'ol';
@@ -588,6 +709,7 @@ type StackProps = {
     display?: ResponsiveDisplayFlex;
     gap: Atoms['gap'];
     style?: React.CSSProperties;
+    role?: React.AriaRole;
     /**
      * Start prop is only valid when as="ol"
      */
@@ -612,66 +734,17 @@ type TextProps = {
 } & MarginAndPaddingAtoms & HTMLElementProps<HTMLSpanElement>;
 declare const Text: React.FC<TextProps>;
 
-type LinkProps = {
-    children?: ReactNode;
-    underline?: LinkTheme['variants']['underline'];
-    variant?: LinkTheme['variants']['variant'];
-} & Atoms & HTMLElementProps<HTMLAnchorElement>;
-type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
-declare const Link: PolymorphicLink;
-
-type SpinnerProps = {
-    className?: string;
-    color?: SpinnerTheme['variants']['color'];
-    size?: SpinnerTheme['variants']['size'];
-    style?: React.CSSProperties;
-} & MarginAtoms;
-declare const Spinner: FC<SpinnerProps>;
-
-type DividerProps = {
-    className?: string;
-    color?: Atoms['backgroundColor'];
-    style?: React.CSSProperties;
-};
-declare const Divider: FC<DividerProps>;
-
-type DialogProps = {
-    children?: ReactNode;
-    open: boolean;
-    onRequestClose: () => void;
-    className?: string;
-    size?: DialogTheme['variants']['size'];
-};
-declare const Dialog: FC<DialogProps>;
-
-type InputProps = {
-    className?: string;
-    name: string;
-    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
-    label: string;
-} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
-declare const Input: react.ForwardRefExoticComponent<{
-    className?: string | undefined;
-    name: string;
-    type?: OptionalLiteral<"number" | "text" | "tel" | "url" | "email" | "password"> | undefined;
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
-    label: string;
-} & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
-
-declare function useComponentStyles<T extends keyof ThemeComponentsProps>(name: T, props: ThemeComponentsProps[T], useDefaultVariants?: boolean): string;
+declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
 
 type ThemeComponentsStylesRequired = Required<ThemeComponentsStyles>;
 type Components = {
     [K in keyof ThemeComponentsStylesRequired]: ThemeComponentsStylesRequired[K] extends RecordLike ? Required<ThemeComponentsStylesRequired[K]>['defaultVariants'] extends RecordLike ? ThemeComponentsStylesRequired[K]['defaultVariants'] extends undefined ? never : Exclude<ThemeComponentsStylesRequired[K]['defaultVariants'], undefined> : never : never;
 };
-declare const useComponentStyleDefaultProps: <T extends keyof ThemeComponents>(name: T) => Components[T];
+declare const useComponentStyleDefaultProps: <T extends keyof ComponentThemes>(name: T) => Components[T];
 
 type Args = null | undefined | boolean | string;
 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, 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/dist/styles/themes/momotaro/components/button.css.cjs

@@ -2,8 +2,8 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
 const primaryColor = css.createVar("primaryColor");

package/dist/styles/themes/momotaro/components/button.css.mjs

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar, style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-import { clickable } from "./helpers.css.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
+import { clickable } from "./helpers.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
 const primaryColor = createVar("primaryColor");

package/dist/styles/themes/momotaro/components/checkbox.css.cjs

@@ -0,0 +1,53 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+const styles_themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/checkbox.css.ts?used", "blocks");
+const checkbox = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("checkbox", {
+  base: css.style([{
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`,
+    transitionProperty: "background-color",
+    ":hover": {
+      backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+    },
+    selectors: {
+      "&:has(input:checked):not(:hover)": {
+        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primary
+      }
+    }
+  }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    backgroundColor: "primaryLight",
+    borderRadius: "small"
+  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "checkbox_base"),
+  icon: css.style({
+    height: 12,
+    width: 12,
+    backgroundColor: "white",
+    borderRadius: "8px",
+    transform: "scale(0)",
+    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`,
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    }
+  }, "checkbox_icon"),
+  label: styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+fileScope.endFileScope();
+exports.checkbox = checkbox;

package/dist/styles/themes/momotaro/components/checkbox.css.mjs

@@ -0,0 +1,54 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+import { focusable } from "./helpers.css.mjs";
+import { bounceOut } from "./transitions.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/checkbox.css.ts?used", "blocks");
+const checkbox = makeComponentTheme("checkbox", {
+  base: style([{
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    transition: `transform ${vars.transition.fast}`,
+    transitionProperty: "background-color",
+    ":hover": {
+      backgroundColor: vars.color.primaryDark
+    },
+    selectors: {
+      "&:has(input:checked):not(:hover)": {
+        backgroundColor: vars.color.primary
+      }
+    }
+  }, atoms({
+    backgroundColor: "primaryLight",
+    borderRadius: "small"
+  }), focusable], "checkbox_base"),
+  icon: style({
+    height: 12,
+    width: 12,
+    backgroundColor: "white",
+    borderRadius: "8px",
+    transform: "scale(0)",
+    transition: `transform ${vars.transition.normal} ${bounceOut}`,
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    }
+  }, "checkbox_icon"),
+  label: atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+endFileScope();
+export {
+  checkbox
+};

package/dist/styles/themes/momotaro/components/helpers.css.cjs

@@ -14,6 +14,19 @@ const focusable = css.style({
   ":disabled": {
     opacity: 0.5,
     cursor: "auto"
+  },
+  selectors: {
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow,
+      transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
+      transitionProperty: "box-shadow"
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
   }
 }, "focusable");
 const clickable = css.style([focusable, {

package/dist/styles/themes/momotaro/components/helpers.css.mjs

@@ -13,6 +13,19 @@ const focusable = style({
   ":disabled": {
     opacity: 0.5,
     cursor: "auto"
+  },
+  selectors: {
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: vars.focus.boxShadow,
+      transitionDuration: vars.transition.fast,
+      transitionProperty: "box-shadow"
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
   }
 }, "focusable");
 const clickable = style([focusable, {

package/dist/styles/themes/momotaro/components/index.cjs

@@ -1,9 +1,12 @@
 "use strict";
 const styles_themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
+const styles_themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
 const styles_themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
 const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
 const styles_themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
+const styles_themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
+const styles_themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
@@ -11,6 +14,9 @@ const components = {
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
   divider: styles_themes_momotaro_components_divider_css_cjs.divider,
   dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog,
-  input: styles_themes_momotaro_components_input_css_cjs.input
+  input: styles_themes_momotaro_components_input_css_cjs.input,
+  checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
+  radio: styles_themes_momotaro_components_radio_css_cjs.radio,
+  label: styles_themes_momotaro_components_label_css_cjs.label
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -1,8 +1,11 @@
 import { button } from "./button.css.mjs";
+import { checkbox } from "./checkbox.css.mjs";
 import { dialog } from "./dialog.css.mjs";
 import { divider } from "./divider.css.mjs";
 import { input } from "./input.css.mjs";
+import { label } from "./label.css.mjs";
 import { link } from "./link.css.mjs";
+import { radio } from "./radio.css.mjs";
 import { spinner } from "./spinner.css.mjs";
 const components = {
   button,
@@ -10,7 +13,10 @@ const components = {
   spinner,
   divider,
   dialog,
-  input
+  input,
+  checkbox,
+  radio,
+  label
 };
 export {
   components