@povio/ui 0.0.6 → 0.0.8

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

@@ -1,17 +0,0 @@
-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/dist/components/buttons/InlineIconButton/InlineIconButton.js

@@ -1,18 +0,0 @@
-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.js

@@ -1,44 +0,0 @@
-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.js

@@ -1,86 +0,0 @@
-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 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/dist/components/buttons/SplitButton/SplitButton.js

@@ -1,62 +0,0 @@
-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.js

@@ -1,18 +0,0 @@
-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.js

@@ -1,21 +0,0 @@
-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.js

@@ -1,53 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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.js

@@ -1,81 +0,0 @@
-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.js

@@ -1,49 +0,0 @@
-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.js

@@ -1,47 +0,0 @@
-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: [
-          "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
-};