@povio/ui 0.0.8 → 0.0.9

package/{src → dist}/components/buttons/IconButton/IconButton.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactElement, SVGProps } from 'react';
 import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
-import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
+import { ButtonVariantProps } from '../Button/button.cva';
 export interface IconButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
     label: string;
     icon: FC<SVGProps<SVGSVGElement>> | ReactElement;

package/dist/components/buttons/IconButton/IconButton.js

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

package/{src → dist}/components/buttons/InlineIconButton/InlineIconButton.d.ts

@@ -1,6 +1,6 @@
 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';
+import { ButtonVariantProps } from '../Button/button.cva';
 export interface InlineIconButtonProps extends Omit<AriaButtonProps, "children">, ButtonVariantProps {
     label: string;
     icon: FC<SVGProps<SVGSVGElement>> | ReactElement;

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/{src → dist}/components/buttons/PillButton/PillButton.d.ts

@@ -1,7 +1,7 @@
 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';
+import { PillButtonVariants } from './pillButton.cva';
+import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 export interface PillButtonProps extends AriaButtonProps, Omit<AriaToggleButtonProps, keyof AriaButtonProps>, ButtonContentVariantProps, PillButtonVariants {
     children: string;
     dismissable?: boolean;

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/{src → dist}/components/buttons/PillButton/pillButton.cva.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+import { TypographyVariantProps } from '../../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;

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

@@ -0,0 +1,86 @@
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+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 border border-transparent px-pill-side-default py-pill-height-default"
+  ],
+  {
+    variants: {
+      color: {
+        primary: [
+          "bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
+          "hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
+          "pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
+          "disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
+          "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"
+        ],
+        secondary: [
+          "bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
+          "hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+          "pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+          "disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+          "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"
+        ],
+        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"
+        ],
+        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"
+        ],
+        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"
+        ]
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  }
+);
+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"
+    }
+  },
+  defaultVariants: {
+    iconPosition: "left"
+  }
+});
+const pillButtonIconSize = clsx("h-6 w-6");
+const pillButtonTypography = compoundMapper({
+  default: {
+    size: "label-2",
+    variant: "prominent-1"
+  }
+});
+export {
+  pillButton,
+  pillButtonContent,
+  pillButtonIconSize,
+  pillButtonTypography
+};

package/{src → dist}/components/buttons/SplitButton/SplitButton.d.ts

@@ -1,6 +1,6 @@
 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';
+import { ButtonVariantProps } from '../Button/button.cva';
+import { MenuItem } from '../../Menu/Menu';
 export interface SplitButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
     label: string;
     labelRight: string;

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/{src → dist}/components/buttons/TextButton/TextButton.d.ts

@@ -1,7 +1,7 @@
 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';
+import { ButtonIconProps } from '../Button/Button';
+import { ButtonVariantProps } from '../Button/button.cva';
+import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 export type TextButtonProps = Omit<ButtonVariantProps, "variant"> & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<true | false> & {
     children: string;
     isLoading?: boolean;

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/{src → dist}/components/buttons/ToggleButton/ToggleButton.d.ts

@@ -1,7 +1,7 @@
 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';
+import { ButtonIconProps } from '../Button/Button';
+import { ButtonVariantProps } from '../Button/button.cva';
+import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 export type ToggleButtonProps = ButtonVariantProps & ButtonContentVariantProps & AriaToggleButtonProps & ButtonIconProps<true | false> & {
     children: string;
     disableTooltip?: boolean;

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/{src → dist}/components/buttons/shared/ButtonContent.d.ts

@@ -1,7 +1,7 @@
 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';
+import { ButtonVariantProps } from '../Button/button.cva';
+import { ButtonContentVariantProps } from './buttonContent.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface ButtonContentProps extends ButtonContentVariantProps, Pick<ButtonVariantProps, "size"> {
     ref?: Ref<HTMLHeadingElement>;
     text: string;

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.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/{src → dist}/components/inputs/Checkbox/Checkbox.d.ts

@@ -1,9 +1,9 @@
 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';
+import { CheckboxVariantProps } from './checkbox.cva';
+import { FormFieldErrorProps } from '../FormField/FormFieldError';
+import { ControlProps } from '../shared/form.types';
 interface CheckboxBaseProps extends FormFieldErrorProps, CheckboxVariantProps, Omit<AriaCheckboxProps, "className"> {
     ref?: Ref<HTMLLabelElement>;
     children: string | ReactElement;

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/{src → dist}/components/inputs/Checkbox/CheckboxCheckmark.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType, SVGProps } from 'react';
-import { CheckboxVariantProps } from '#ui/components/inputs/Checkbox/checkbox.cva';
+import { CheckboxVariantProps } from './checkbox.cva';
 interface CheckboxCheckmarkProps extends CheckboxVariantProps {
     className?: string;
     selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;

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/{src → dist}/components/inputs/Checkbox/checkbox.cva.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 export declare const checkbox: (props?: ({
     variant?: "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,47 @@
+import { cva } from "class-variance-authority";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const checkbox = cva(
+  ["flex items-center justify-center border-2", "relative size-4 shrink-0 rounded-xs p-1", uiGroupOutlineClass],
+  {
+    variants: {
+      variant: {
+        default: [
+          "m-1 border-interactive-contained-secondary-idle",
+          "group-disabled:border-interactive-contained-secondary-disabled",
+          "group-hover:border-interactive-contained-secondary-hover",
+          "group-pressed:border-interactive-contained-secondary-pressed",
+          "group-selected:border-interactive-contained-primary-idle",
+          "group-selected:bg-interactive-contained-primary-idle",
+          "group-selected:group-hover:bg-interactive-contained-primary-hover",
+          "group-selected:group-hover:border-interactive-contained-primary-hover",
+          "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-selected:group-pressed:border-interactive-contained-primary-pressed",
+          "group-indeterminate:border-interactive-contained-primary-idle",
+          "group-indeterminate:bg-interactive-contained-primary-idle",
+          "group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
+          "group-indeterminate:group-hover:border-interactive-contained-primary-hover",
+          "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
+          "group-invalid:border-interactive-contained-error-idle",
+          "group-focus-visible:outline-interactive-contained-primary-focus"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const checkboxIndicatorClass = "group flex items-center gap-2";
+const checkboxTypography = compoundMapper({
+  default: {
+    size: "label-1",
+    variant: "default"
+  }
+});
+export {
+  checkbox,
+  checkboxIndicatorClass,
+  checkboxTypography
+};

package/{src → dist}/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -2,9 +2,9 @@ import { CalendarDate, DateValue } from '@internationalized/date';
 import { Ref } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
-import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+import { FormFieldProps } from '../../FormField/FormField';
+import { ControlProps } from '../../shared/form.types';
+import { InputVariantProps } from '../../shared/input.cva';
 interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
     ref?: Ref<HTMLDivElement>;
     disableDropdown?: boolean;