@povio/ui 0.0.5 → 0.0.6

package/dist/components/text/Link/Link.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { LinkProps as AriaLinkProps } from 'react-aria-components';
+import { LinkVariantProps } from '#ui/components/text/Link/link.cva';
+export interface LinkProps extends PropsWithChildren<AriaLinkProps>, LinkVariantProps {
+    className?: string;
+}
+export declare const Link: ({ variant, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/text/Link/Link.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Link as Link$1 } from "react-aria-components";
+import { link } from "./link.cva.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const Link = ({ variant, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const linkCva = uiStyle?.link?.cva ?? link;
+  return /* @__PURE__ */ jsx(
+    Link$1,
+    {
+      ...props,
+      className: linkCva({ variant, className: props.className })
+    }
+  );
+};
+export {
+  Link
+};

package/dist/components/text/Link/link.cva.d.ts

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

package/dist/components/text/Link/link.cva.js

@@ -0,0 +1,18 @@
+import { cva } from "class-variance-authority";
+import { uiOutlineClass } from "../../outline.clsx.js";
+const link = cva(["underline", uiOutlineClass], {
+  variants: {
+    variant: {
+      default: [
+        "text-interactive-text-primary-idle focus-visible:outline-interactive-text-primary-focus",
+        "hover:text-interactive-text-primary-hover focus-visible:text-interactive-text-primary-focus active:text-interactive-text-primary-pressed"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+export {
+  link
+};

package/dist/components/text/Tag/Tag.d.ts

@@ -0,0 +1,10 @@
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { TagVariantProps } from '#ui/components/text/Tag/tag.cva';
+export interface TagProps extends TagVariantProps, AriaButtonProps {
+    className?: string;
+    children: string;
+    dismissable?: boolean;
+    isDisabled?: boolean;
+    onDismiss?: () => void;
+}
+export declare const Tag: ({ color, className, children, dismissable, isDisabled, onDismiss, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/text/Tag/Tag.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { TooltipEllipsis } from "../../overlays/Tooltip/TooltipEllipsis.js";
+import { tag } from "./tag.cva.js";
+import { Typography } from "../Typography/Typography.js";
+import { ns } from "../../../config/i18n.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const Tag = ({ color, className, children, dismissable, isDisabled, onDismiss, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const tagCva = uiStyle?.tag?.cva ?? tag;
+  const { t } = useTranslation(ns);
+  const buttonProps = { isDisabled, onPress: onDismiss, label: t(($) => $.ui.tag.dismiss), ...props };
+  return /* @__PURE__ */ jsx(TooltipEllipsis, { text: children, children: (onContentRef) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: tagCva({
+        color,
+        className: clsx("pointer-events-none", className)
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            ref: onContentRef,
+            variant: "default",
+            size: "label-2",
+            as: "span",
+            className: "truncate",
+            children
+          }
+        ),
+        dismissable && /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...buttonProps,
+            className: "pointer-events-auto shrink-0",
+            children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  Tag
+};

package/dist/components/text/Tag/tag.cva.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const tag: (props?: ({
+    color?: "primary" | "secondary" | "success" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TagVariantProps extends VariantProps<typeof tag> {
+}

package/{src/components/text/Tag/tag.cva.ts → dist/components/text/Tag/tag.cva.js}

@@ -1,15 +1,13 @@
-import { type VariantProps, cva } from "class-variance-authority";
-
-import { uiOutlineClass } from "#ui/components/outline.clsx";
-
-export const tag = cva(
+import { cva } from "class-variance-authority";
+import { uiOutlineClass } from "../../outline.clsx.js";
+const tag = cva(
   [
     uiOutlineClass,
     "inline-flex items-center gap-list-gap-icon-to-label",
     "p-pill-height-default px-1-5",
     "rounded-pill-rounding-default",
     "overflow-hidden",
-    "disabled:cursor-default",
+    "disabled:cursor-default"
   ],
   {
     variants: {
@@ -19,44 +17,43 @@ export const tag = cva(
           "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",
+          "focus-visible:outline-interactive-contained-primary-focus"
         ],
         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",
+          "focus-visible:outline-interactive-contained-primary-focus"
         ],
         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"
+    }
+  }
 );
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface TagVariantProps extends VariantProps<typeof tag> {}
+export {
+  tag
+};

package/dist/components/text/Typography/Typography.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, Ref } from 'react';
+import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+type TypographyTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
+interface TypographyPropsCva extends Omit<TypographyVariantProps, "size">, Required<Pick<TypographyVariantProps, "size">> {
+}
+export interface TypographyProps extends TypographyPropsCva, HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLHeadingElement>;
+    as?: TypographyTag;
+}
+export declare const Typography: ({ as, className, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/text/Typography/Typography.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { typography } from "./typography.cva.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const Typography = ({ as = "p", className, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const typographyCva = uiStyle?.typography?.cva ?? typography;
+  const Tag = as;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: typographyCva({
+        ...props,
+        sizeMobile: props.sizeMobile ?? props.size,
+        className
+      }),
+      ...props
+    }
+  );
+};
+export {
+  Typography
+};

package/dist/components/text/Typography/typography.cva.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const typography: (props?: ({
+    size?: "headline-1" | "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "body-1" | "body-2" | "body-3" | "body-4" | "label-1" | "label-2" | "label-3" | null | undefined;
+    sizeMobile?: "headline-1" | "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "body-1" | "body-2" | "body-3" | "body-4" | "label-1" | "label-2" | "label-3" | null | undefined;
+    variant?: "default" | "prominent-1" | "default-italic" | "prominent-1-italic" | "prominent-2" | "prominent-2-italic" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TypographyVariantProps extends VariantProps<typeof typography> {
+}

package/{src/components/text/Typography/typography.cva.ts → dist/components/text/Typography/typography.cva.js}

@@ -1,6 +1,5 @@
-import { type VariantProps, cva } from "class-variance-authority";
-
-export const typography = cva("", {
+import { cva } from "class-variance-authority";
+const typography = cva("", {
   variants: {
     size: {
       "headline-1": "md:text-desktop-headline-1",
@@ -16,7 +15,7 @@ export const typography = cva("", {
       "body-4": "md:text-desktop-body-4",
       "label-1": "md:text-label-1",
       "label-2": "md:text-label-2",
-      "label-3": "md:text-label-3",
+      "label-3": "md:text-label-3"
     },
     sizeMobile: {
       "headline-1": "text-mobile-headline-1",
@@ -32,7 +31,7 @@ export const typography = cva("", {
       "body-4": "text-mobile-body-4",
       "label-1": "text-label-1",
       "label-2": "text-label-2",
-      "label-3": "text-label-3",
+      "label-3": "text-label-3"
     },
     variant: {
       default: "",
@@ -40,17 +39,17 @@ export const typography = cva("", {
       "default-italic": "italic",
       "prominent-1-italic": "italic",
       "prominent-2": "",
-      "prominent-2-italic": "italic",
-    },
+      "prominent-2-italic": "italic"
+    }
   },
   compoundVariants: [
     {
       size: ["headline-1", "title-1", "title-2", "title-3", "title-4", "title-5", "title-6"],
-      className: "font-geist",
+      className: "font-geist"
     },
     {
       size: ["body-1", "body-2", "body-3", "body-4", "label-1", "label-2", "label-3"],
-      className: "font-inter",
+      className: "font-inter"
     },
     {
       size: [
@@ -63,10 +62,10 @@ export const typography = cva("", {
         "title-6",
         "label-1",
         "label-2",
-        "label-3",
+        "label-3"
       ],
       variant: ["default", "default-italic"],
-      className: "font-medium",
+      className: "font-medium"
     },
     {
       size: [
@@ -79,24 +78,23 @@ export const typography = cva("", {
         "title-6",
         "label-1",
         "label-2",
-        "label-3",
+        "label-3"
       ],
       variant: ["prominent-1", "prominent-1-italic"],
-      className: "font-semibold",
+      className: "font-semibold"
     },
     {
       size: ["body-1", "body-2", "body-3", "body-4"],
       variant: ["prominent-1", "prominent-1-italic"],
-      className: "font-medium",
+      className: "font-medium"
     },
     {
       size: ["body-1", "body-2", "body-3", "body-4"],
       variant: ["prominent-2", "prominent-2-italic"],
-      className: "font-semibold",
-    },
-  ],
+      className: "font-semibold"
+    }
+  ]
 });
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface TypographyVariantProps extends VariantProps<typeof typography> {}
+export {
+  typography
+};

package/dist/config/confirmation.context.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+import { ActionModalProps } from '#ui/components/overlays/ActionModal/ActionModal';
+export declare namespace Confirmation {
+    type ContextState = Pick<ActionModalProps, "heading" | "description" | "buttonSize" | "textAlign" | "primaryAction" | "secondaryAction" | "modalClassName"> & {
+        isOpen: boolean;
+    };
+    type ConfirmationInput = Pick<ContextState, "heading" | "description" | "buttonSize" | "textAlign" | "modalClassName"> & {
+        cancelLabel?: NonNullable<ContextState["secondaryAction"]>["label"];
+        confirmLabel?: NonNullable<ContextState["primaryAction"]>["label"];
+        cancelVariant?: NonNullable<ContextState["secondaryAction"]>["variant"];
+        cancelColor?: NonNullable<ContextState["secondaryAction"]>["color"];
+        confirmVariant?: NonNullable<ContextState["primaryAction"]>["variant"];
+        confirmColor?: NonNullable<ContextState["primaryAction"]>["color"];
+    };
+    interface Options {
+        confirm: (input: ConfirmationInput) => Promise<boolean>;
+    }
+    const Provider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+    const useConfirmation: () => Options;
+}

package/dist/config/confirmation.context.js

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo, use } from "react";
+import { useTranslation } from "react-i18next";
+import { ActionModal } from "../components/overlays/ActionModal/ActionModal.js";
+import { ns } from "./i18n.js";
+var Confirmation;
+((Confirmation2) => {
+  const DEFAULT_STATE = {
+    heading: "",
+    description: "",
+    isOpen: false,
+    primaryAction: {
+      label: "",
+      onPress: () => {
+      }
+    },
+    secondaryAction: {
+      label: "",
+      onPress: () => {
+      }
+    }
+  };
+  const Context = createContext(null);
+  Confirmation2.Provider = ({ children }) => {
+    const [state, setState] = useState(DEFAULT_STATE);
+    const { t } = useTranslation(ns);
+    const onCancel = () => setState(DEFAULT_STATE);
+    const confirm = useCallback(
+      async ({
+        heading,
+        description,
+        buttonSize,
+        textAlign,
+        modalClassName,
+        cancelLabel = t(($) => $.ui.confirmation.cancel),
+        confirmLabel = t(($) => $.ui.confirmation.confirm),
+        confirmVariant,
+        confirmColor,
+        cancelVariant,
+        cancelColor
+      }) => {
+        return new Promise((resolve) => {
+          setState({
+            heading,
+            description,
+            buttonSize,
+            textAlign,
+            modalClassName,
+            primaryAction: {
+              label: confirmLabel,
+              onPress() {
+                setState({
+                  ...state,
+                  isOpen: false,
+                  heading: "",
+                  description: ""
+                });
+                resolve(true);
+              },
+              variant: confirmVariant,
+              color: confirmColor
+            },
+            secondaryAction: {
+              label: cancelLabel,
+              onPress() {
+                onCancel();
+                resolve(false);
+              },
+              variant: cancelVariant,
+              color: cancelColor
+            },
+            isOpen: !state.isOpen
+          });
+        });
+      },
+      [state, t]
+    );
+    const value = useMemo(
+      () => ({
+        confirm
+      }),
+      [confirm]
+    );
+    return /* @__PURE__ */ jsxs(Context.Provider, { value, children: [
+      /* @__PURE__ */ jsx(
+        ActionModal,
+        {
+          ...state,
+          onClose: state.secondaryAction?.onPress ?? onCancel,
+          primaryAction: state.primaryAction,
+          secondaryAction: state.secondaryAction
+        }
+      ),
+      children
+    ] });
+  };
+  Confirmation2.useConfirmation = () => {
+    const context = use(Context);
+    if (!context) {
+      throw new Error("Confirmation.useConfirmation must be used within a Confirmation.Provider");
+    }
+    return context;
+  };
+})(Confirmation || (Confirmation = {}));
+export {
+  Confirmation
+};