@povio/ui 0.0.4 → 0.0.6

package/dist/components/buttons/InlineIconButton/InlineIconButton.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactElement, RefObject, SVGProps } from 'react';
+import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
+export interface InlineIconButtonProps extends Omit<AriaButtonProps, "children">, ButtonVariantProps {
+    label: string;
+    icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
+    link?: AriaLinkProps;
+    ref?: RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
+    disableTooltip?: boolean;
+}
+export declare const InlineIconButton: ({ label, ...props }: InlineIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/InlineIconButton/InlineIconButton.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+const InlineIconButton = ({ label, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      iconOnly: true,
+      variant: "text",
+      size: "xxs",
+      width: "hug",
+      children: label
+    }
+  );
+};
+export {
+  InlineIconButton
+};

package/dist/components/buttons/PillButton/PillButton.d.ts

@@ -0,0 +1,11 @@
+import { FC, SVGProps } from 'react';
+import { ButtonProps as AriaButtonProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
+import { PillButtonVariants } from '#ui/components/buttons/PillButton/pillButton.cva';
+import { ButtonContentVariantProps } from '#ui/components/buttons/shared/buttonContent.cva';
+export interface PillButtonProps extends AriaButtonProps, Omit<AriaToggleButtonProps, keyof AriaButtonProps>, ButtonContentVariantProps, PillButtonVariants {
+    children: string;
+    dismissable?: boolean;
+    toggle?: boolean;
+    icon?: FC<SVGProps<SVGSVGElement>>;
+}
+export declare const PillButton: ({ children, dismissable, toggle, icon, iconPosition, ...props }: PillButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/PillButton/PillButton.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { ToggleButton, Button } from "react-aria-components";
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { pillButton, pillButtonTypography, pillButtonIconSize, pillButtonContent } from "./pillButton.cva.js";
+import { ButtonContent } from "../shared/ButtonContent.js";
+import { TooltipEllipsis } from "../../overlays/Tooltip/TooltipEllipsis.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const PillButton = ({ children, dismissable, toggle, icon, iconPosition, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const pillButtonCva = uiStyle?.pillButton?.cva ?? pillButton;
+  const pillButtonTypographyMap = uiStyle?.pillButton?.typography ?? pillButtonTypography;
+  const Component = toggle ? ToggleButton : Button;
+  const getIconPosition = () => {
+    if (dismissable) {
+      return "right";
+    }
+    return icon ? iconPosition : "none";
+  };
+  return /* @__PURE__ */ jsx(TooltipEllipsis, { text: children, children: (onContentRef) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      className: pillButtonCva({
+        ...props,
+        className: props.className
+      }),
+      children: /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          text: children,
+          ref: onContentRef,
+          icon: dismissable ? CloseIcon : icon,
+          iconPosition: dismissable ? "right" : iconPosition,
+          className: pillButtonContent({ iconPosition: getIconPosition() }),
+          iconClassName: pillButtonIconSize,
+          typography: pillButtonTypographyMap({ ...props })
+        }
+      )
+    }
+  ) });
+};
+export {
+  PillButton
+};

package/dist/components/buttons/PillButton/pillButton.cva.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+export declare const pillButton: (props?: ({
+    color?: "primary" | "secondary" | "success" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface PillButtonVariants extends VariantProps<typeof pillButton> {
+}
+export declare const pillButtonContent: (props?: ({
+    iconPosition?: "none" | "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const pillButtonIconSize: string;
+export declare const pillButtonTypography: (props: {
+    color?: "primary" | "secondary" | "success" | "warning" | "error" | null | undefined;
+}) => TypographyVariantProps | undefined;

package/{src/components/buttons/PillButton/pillButton.cva.ts → dist/components/buttons/PillButton/pillButton.cva.js}

@@ -1,15 +1,12 @@
-import { type VariantProps, cva } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
-
-import { uiOutlineClass } from "#ui/components/outline.clsx";
-import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
-import { compoundMapper } from "#ui/utils/compoundMapper";
-
-export const pillButton = cva(
+import { uiOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const pillButton = cva(
   [
     uiOutlineClass,
     "flex items-center justify-center",
-    "rounded-pill-rounding-default px-pill-side-default py-pill-height-default",
+    "rounded-pill-rounding-default px-pill-side-default py-pill-height-default"
   ],
   {
     variants: {
@@ -22,7 +19,7 @@ export const pillButton = cva(
           "focus-visible:outline-interactive-contained-primary-focus",
           "selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-primary-on-toggled-idle",
           "selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled",
-          "selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
+          "selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover"
         ],
         secondary: [
           "bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
@@ -32,57 +29,58 @@ export const pillButton = cva(
           "focus-visible:outline-interactive-contained-primary-focus",
           "selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
           "selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled",
-          "selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
+          "selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover"
         ],
         success: [
           "bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
           "hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
           "pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
           "disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus",
+          "focus-visible:outline-interactive-contained-primary-focus"
         ],
         warning: [
           "bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
           "hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
           "pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
           "disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus",
+          "focus-visible:outline-interactive-contained-primary-focus"
         ],
         error: [
           "bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
           "hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
           "pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
           "disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus",
-        ],
-      },
+          "focus-visible:outline-interactive-contained-primary-focus"
+        ]
+      }
     },
     defaultVariants: {
-      color: "primary",
-    },
-  },
+      color: "primary"
+    }
+  }
 );
-
-export interface PillButtonVariants extends VariantProps<typeof pillButton> {}
-
-export const pillButtonContent = cva("", {
+const pillButtonContent = cva("", {
   variants: {
     iconPosition: {
       left: "gap-list-gap-icon-to-label pr-list-gap-content",
       right: "gap-list-gap-icon-to-label pl-list-gap-content",
-      none: "gap-list-gap-icon-to-label",
-    },
+      none: "gap-list-gap-icon-to-label"
+    }
   },
   defaultVariants: {
-    iconPosition: "left",
-  },
+    iconPosition: "left"
+  }
 });
-
-export const pillButtonIconSize = clsx("h-6 w-6");
-
-export const pillButtonTypography = compoundMapper<TypographyVariantProps, PillButtonVariants>({
+const pillButtonIconSize = clsx("h-6 w-6");
+const pillButtonTypography = compoundMapper({
   default: {
     size: "label-2",
-    variant: "prominent-1",
-  },
+    variant: "prominent-1"
+  }
 });
+export {
+  pillButton,
+  pillButtonContent,
+  pillButtonIconSize,
+  pillButtonTypography
+};

package/dist/components/buttons/SplitButton/SplitButton.d.ts

@@ -0,0 +1,10 @@
+import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
+import { MenuItem } from '#ui/components/Menu/Menu';
+export interface SplitButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
+    label: string;
+    labelRight: string;
+    link?: AriaLinkProps;
+    items: MenuItem[];
+}
+export declare const SplitButton: ({ variant, color, width, size, label, labelRight, link, items, className, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/SplitButton/SplitButton.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ChevronDownIcon } from "../../../assets/icons/ChevronDown.js";
+import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Menu } from "../../Menu/Menu.js";
+const SplitButton = ({
+  variant,
+  color,
+  width,
+  size,
+  label,
+  labelRight,
+  link,
+  items,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "group/split flex items-center",
+      "data-split": "",
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...props,
+            width,
+            size,
+            variant,
+            color,
+            link,
+            className: clsx("!rounded-r-none border-r border-solid", className),
+            "data-separator": "",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Menu,
+          {
+            trigger: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size,
+                variant,
+                color,
+                label: labelRight,
+                icon: ChevronDownIcon,
+                className: "!rounded-l-none !border-l-0"
+              }
+            ),
+            items
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SplitButton
+};

package/dist/components/buttons/TextButton/TextButton.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+import { ButtonIconProps } from '#ui/components/buttons/Button/Button';
+import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
+import { ButtonContentVariantProps } from '#ui/components/buttons/shared/buttonContent.cva';
+export type TextButtonProps = Omit<ButtonVariantProps, "variant"> & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<true | false> & {
+    children: string;
+    isLoading?: boolean;
+    link?: AriaLinkProps;
+    disableTooltip?: boolean;
+};
+export declare const TextButton: ({ children, ...props }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/TextButton/TextButton.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+const TextButton = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      variant: "text",
+      size: "xxs",
+      width: props.width ?? "hug",
+      disableTooltip: props.disableTooltip,
+      children
+    }
+  );
+};
+export {
+  TextButton
+};

package/dist/components/buttons/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,9 @@
+import { ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
+import { ButtonIconProps } from '#ui/components/buttons/Button/Button';
+import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
+import { ButtonContentVariantProps } from '#ui/components/buttons/shared/buttonContent.cva';
+export type ToggleButtonProps = ButtonVariantProps & ButtonContentVariantProps & AriaToggleButtonProps & ButtonIconProps<true | false> & {
+    children: string;
+    disableTooltip?: boolean;
+};
+export declare const ToggleButton: ({ children, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/ToggleButton/ToggleButton.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+const ToggleButton = ({ children, ...props }) => {
+  return (
+    // @ts-expect-error Types not matching, but this is only for backwards compatibility
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...props,
+        toggle: true,
+        variant: "outlined",
+        color: "primary",
+        disableTooltip: props.disableTooltip,
+        children
+      }
+    )
+  );
+};
+export {
+  ToggleButton
+};

package/dist/components/buttons/shared/ButtonContent.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactElement, Ref, SVGProps } from 'react';
+import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
+import { ButtonContentVariantProps } from '#ui/components/buttons/shared/buttonContent.cva';
+import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+interface ButtonContentProps extends ButtonContentVariantProps, Pick<ButtonVariantProps, "size"> {
+    ref?: Ref<HTMLHeadingElement>;
+    text: string;
+    isLoading?: boolean;
+    className?: string;
+    icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+    iconClassName?: string;
+    hideText?: boolean;
+    typography?: TypographyVariantProps;
+}
+export declare const ButtonContent: ({ ref, text, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography, }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/buttons/shared/ButtonContent.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement } from "react";
+import { buttonContent } from "./buttonContent.cva.js";
+import { Loader } from "../../status/Loader/Loader.js";
+import { Typography } from "../../text/Typography/Typography.js";
+const ButtonContent = ({
+  ref,
+  text,
+  isLoading,
+  className,
+  icon: Icon,
+  iconClassName,
+  hideText,
+  iconPosition,
+  typography
+}) => {
+  let iconOrLoader = null;
+  if (isLoading) {
+    iconOrLoader = /* @__PURE__ */ jsx(Loader, { className: "shrink-0" });
+  } else if (Icon) {
+    if (isValidElement(Icon)) {
+      iconOrLoader = Icon;
+    } else {
+      iconOrLoader = /* @__PURE__ */ jsx(Icon, { className: clsx("shrink-0", iconClassName) });
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: buttonContent({
+        iconPosition: iconOrLoader ? iconPosition : null,
+        className
+      }),
+      children: [
+        iconOrLoader,
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            as: "span",
+            ...{ size: "label-2", variant: "prominent-1", ...typography },
+            className: clsx("hyphens-auto md:truncate", hideText && "sr-only"),
+            ref,
+            children: text
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ButtonContent
+};

package/dist/components/buttons/shared/buttonContent.cva.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const buttonContent: (props?: ({
+    iconPosition?: "none" | "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonContentVariantProps extends VariantProps<typeof buttonContent> {
+}

package/dist/components/buttons/shared/buttonContent.cva.js

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority";
+const buttonContent = cva("flex w-full items-center justify-center", {
+  variants: {
+    iconPosition: {
+      left: "flex-row",
+      right: "flex-row-reverse",
+      none: "flex-row"
+    }
+  },
+  defaultVariants: {
+    iconPosition: "left"
+  }
+});
+export {
+  buttonContent
+};

package/dist/components/inputs/Checkbox/Checkbox.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType, ReactElement, Ref, SVGProps } from 'react';
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { CheckboxVariantProps } from '#ui/components/inputs/Checkbox/checkbox.cva';
+import { FormFieldErrorProps } from '#ui/components/inputs/FormField/FormFieldError';
+import { ControlProps } from '#ui/components/inputs/shared/form.types';
+interface CheckboxBaseProps extends FormFieldErrorProps, CheckboxVariantProps, Omit<AriaCheckboxProps, "className"> {
+    ref?: Ref<HTMLLabelElement>;
+    children: string | ReactElement;
+    hideLabel?: boolean;
+    selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    indeterminateIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+}
+export type CheckboxProps = CheckboxBaseProps;
+export type ControlledCheckboxProps<TFieldValues extends FieldValues> = ControlProps<CheckboxProps, TFieldValues, "isSelected">;
+export declare const Checkbox: <TFieldValues extends FieldValues>(props: ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Checkbox/Checkbox.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { Checkbox as Checkbox$1 } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { checkboxTypography, checkboxIndicatorClass } from "./checkbox.cva.js";
+import { FormFieldError } from "../FormField/FormFieldError.js";
+import { CheckContent } from "../shared/CheckContent.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { CheckboxCheckmark } from "./CheckboxCheckmark.js";
+const CheckboxBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const uiStyle = UIStyle.useConfig();
+  const checkboxTypographyMap = uiStyle?.checkbox?.typography ?? checkboxTypography;
+  const {
+    className,
+    children,
+    isDisabled,
+    error,
+    variant = ui.checkbox.variant,
+    hideLabel = ui.input.hideLabel,
+    ...rest
+  } = props;
+  const formFieldErrorProps = {
+    error,
+    isDisabled
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Checkbox$1,
+      {
+        ...rest,
+        isDisabled,
+        isInvalid: !!error,
+        "aria-errormessage": error || void 0,
+        className: clsx(checkboxIndicatorClass, className),
+        children: [
+          /* @__PURE__ */ jsx(
+            CheckboxCheckmark,
+            {
+              variant,
+              ...rest
+            }
+          ),
+          !hideLabel && /* @__PURE__ */ jsx(CheckContent, { typography: checkboxTypographyMap({ variant, ...rest }), children })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })
+  ] });
+};
+const Checkbox = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          CheckboxBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            isSelected: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            name: field.name,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(CheckboxBase, { ...props });
+};
+export {
+  Checkbox
+};

package/dist/components/inputs/Checkbox/CheckboxCheckmark.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType, SVGProps } from 'react';
+import { CheckboxVariantProps } from '#ui/components/inputs/Checkbox/checkbox.cva';
+interface CheckboxCheckmarkProps extends CheckboxVariantProps {
+    className?: string;
+    selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    indeterminateIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+}
+export declare const CheckboxCheckmark: ({ variant, className, selectedIcon: SelectedIcon, indeterminateIcon: IndeterminateIcon, ...props }: CheckboxCheckmarkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Checkbox/CheckboxCheckmark.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { CheckboxCheckmarkIcon } from "../../../assets/icons/CheckboxCheckmark.js";
+import { CheckboxIndeterminateIcon } from "../../../assets/icons/CheckboxIndeterminate.js";
+import { checkbox } from "./checkbox.cva.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const CheckboxCheckmark = ({
+  variant,
+  className,
+  selectedIcon: SelectedIcon = CheckboxCheckmarkIcon,
+  indeterminateIcon: IndeterminateIcon = CheckboxIndeterminateIcon,
+  ...props
+}) => {
+  const uiStyle = UIStyle.useConfig();
+  const checkboxCva = uiStyle?.checkbox?.cva ?? checkbox;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: checkboxCva({
+        variant,
+        ...props,
+        className
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectedIcon,
+          {
+            className: clsx(
+              "absolute hidden size-3 group-selected:block",
+              "text-interactive-contained-primary-on-idle group-hover:text-interactive-contained-primary-on-hover"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IndeterminateIcon,
+          {
+            className: clsx(
+              "absolute hidden size-3 group-indeterminate:block",
+              "text-interactive-contained-primary-on-idle group-hover:text-interactive-contained-primary-on-hover"
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  CheckboxCheckmark
+};

package/dist/components/inputs/Checkbox/checkbox.cva.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+export declare const checkbox: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CheckboxVariantProps extends VariantProps<typeof checkbox> {
+}
+export declare const checkboxIndicatorClass = "group flex items-center gap-2";
+export declare const checkboxTypography: (props: {
+    variant?: "default" | null | undefined;
+}) => TypographyVariantProps | undefined;