@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

package/dist/esm/components/avatar/parts/AvatarFallback.d.mts

@@ -1,170 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
-    color: {
-        blue: {
-            background: string;
-            foreground: string;
-        };
-        sunglow: {
-            background: string;
-            foreground: string;
-        };
-        peach: {
-            background: string;
-            foreground: string;
-        };
-    };
-}, {
-    base: string;
-    background: string;
-    foreground: string;
-}, undefined, import('tailwind-variants/dist/config').TVConfig<{
-    color: {
-        blue: {
-            background: string;
-            foreground: string;
-        };
-        sunglow: {
-            background: string;
-            foreground: string;
-        };
-        peach: {
-            background: string;
-            foreground: string;
-        };
-    };
-}, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-}>, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-}, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-}>, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-}, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-}>, unknown, unknown, undefined>>>;
-type AvatarFallbackBaseProps = Pick<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, 'delayMs'>;
-type AvatarFallbackInitialsProps = AvatarFallbackBaseProps & {
-    /** The fallback's variant. It can be one of: `initials`, `placeholder` */
-    variant: 'initials';
-    /** The initials to display as fallback content. Only available when variant is set to `initials` */
-    children: string | null | undefined;
-    color?: never;
-};
-type AvatarFallbackPlaceholderProps = AvatarFallbackBaseProps & {
-    /** The variant of the fallback, should be 'placeholder' */
-    variant: 'placeholder';
-    /**
-     * The color variant for the placeholder. Can be one of: `blue`, `peach`, `sunglow`. Only available when variant is set to `placeholder`
-     * @default 'blue'
-     */
-    color?: VariantProps<typeof avatarPlaceholder>['color'];
-    children?: never;
-};
-type AvatarFallbackProps = AvatarFallbackInitialsProps | AvatarFallbackPlaceholderProps;
-/**
- * The AvatarFallback component displays a fallback content for an `Avatar` component when no image is provided or failed to load.
- */
-declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
-export { AvatarFallback };

package/dist/esm/components/avatar/parts/AvatarFallback.mjs

@@ -1,87 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as p from "react";
-import * as t from "@radix-ui/react-avatar";
-import { twMerge as f } from "tailwind-merge";
-import { tv as l } from "tailwind-variants";
-import { useAvatarContext as b } from "../Avatar.context.mjs";
-import { avatarBase as n } from "../Avatar.variants.mjs";
-import { getInitials as v } from "../utils.mjs";
-const h = l({
-  extend: n,
-  slots: {
-    base: "uy-absolute uy-overflow-hidden",
-    background: "",
-    foreground: ""
-  },
-  variants: {
-    color: {
-      blue: {
-        background: "uy-bg-blue-L7",
-        foreground: "uy-fill-blue-L5"
-      },
-      sunglow: {
-        background: "uy-bg-sunglow-L3",
-        foreground: "uy-fill-sunglow-L2"
-      },
-      peach: {
-        background: "uy-bg-peach-L3",
-        foreground: "uy-fill-peach-L2"
-      }
-    }
-  }
-}), w = l({
-  extend: n,
-  base: "uy-absolute uy-flex uy-h-full uy-w-full uy-items-center uy-justify-center uy-text-content-neutral uy-bg-surface-neutral-lowest",
-  variants: {
-    size: {
-      xs: "uy-typography-body-small-strong",
-      sm: "uy-typography-body-small-strong",
-      md: "uy-typography-body-small-strong",
-      lg: "uy-typography-body-strong",
-      xl: "uy-typography-h2"
-    }
-  }
-}), x = p.forwardRef(({ variant: s, color: u, children: i, ...r }, y) => {
-  const c = b(), { size: e, variant: o } = c;
-  if (s === "placeholder") {
-    const { base: d, background: g, foreground: m } = h({
-      color: u,
-      size: e,
-      variant: o
-    });
-    return /* @__PURE__ */ a(
-      "svg",
-      {
-        role: "img",
-        "aria-hidden": !0,
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 16 16",
-        className: f(d(), g()),
-        ...r,
-        children: /* @__PURE__ */ a(
-          "path",
-          {
-            className: m(),
-            fillRule: "evenodd",
-            d: "M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",
-            clipRule: "evenodd"
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ a(
-    t.Fallback,
-    {
-      ref: y,
-      role: "presentation",
-      className: w({ size: e, variant: o }),
-      ...r,
-      children: v(i)
-    }
-  );
-});
-x.displayName = t.Fallback.displayName;
-export {
-  x as AvatarFallback
-};

package/dist/esm/components/avatar/parts/AvatarImage.d.mts

@@ -1,8 +0,0 @@
-import { AvatarImageProps as RadixAvatarImageProps } from '@radix-ui/react-avatar';
-import * as React from 'react';
-type AvatarImageProps = Omit<RadixAvatarImageProps, 'style' | 'width' | 'height' | 'slot' | 'asChild'>;
-/**
- * The AvatarImage component displays an image for the avatar.
- */
-declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
-export { AvatarImage };

package/dist/esm/components/avatar/parts/AvatarImage.mjs

@@ -1,21 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as n from "react";
-import * as a from "@radix-ui/react-avatar";
-import { twMerge as p } from "tailwind-merge";
-import { tv as f } from "tailwind-variants";
-import { useAvatarContext as u } from "../Avatar.context.mjs";
-import { avatarBase as c } from "../Avatar.variants.mjs";
-const l = f({
-  extend: c,
-  base: "uy-aspect-square uy-w-full uy-h-full uy-object-cover uy-bg-surface-neutral-lowest"
-}), v = n.forwardRef(({ className: r, ...t }, e) => {
-  const { variant: o, size: s } = u(), m = p(
-    l({ variant: o, size: s }),
-    r
-  );
-  return /* @__PURE__ */ i(a.Image, { ref: e, className: m, ...t });
-});
-v.displayName = a.Image.displayName;
-export {
-  v as AvatarImage
-};

package/dist/esm/components/avatar/parts/AvatarPair.d.mts

@@ -1,48 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-import { avatarBase } from '../Avatar.variants.mjs';
-import * as React from 'react';
-export type AvatarPairProps = PropsWithChildren<{
-    /** Variant of the avatar pair. they match the variants of the Avatar component */
-    variant: NonNullable<VariantProps<typeof avatarBase>['variant']>;
-    /**
-     * Set to true to visually hide the avatar pair
-     * @default false
-     */
-    isHidden?: boolean;
-    /** Accessible label for the avatar */
-    'aria-label'?: string;
-    /** ID of the element that labels the avatar */
-    'aria-labelledby'?: string;
-    /** ID of the element that describes the avatar */
-    'aria-describedby'?: string;
-    /** Additional details for the avatar */
-    'aria-details'?: string;
-    /** Indicates if the avatar is hidden from assistive technologies */
-    'aria-hidden'?: boolean;
-}>;
-/**
- * The `AvatarPair` component displays a paired, smaller avatar in the bottom-right corner of the containing avatar.
- */
-declare const AvatarPair: React.ForwardRefExoticComponent<{
-    /** Variant of the avatar pair. they match the variants of the Avatar component */
-    variant: NonNullable<VariantProps<typeof avatarBase>["variant"]>;
-    /**
-     * Set to true to visually hide the avatar pair
-     * @default false
-     */
-    isHidden?: boolean;
-    /** Accessible label for the avatar */
-    'aria-label'?: string;
-    /** ID of the element that labels the avatar */
-    'aria-labelledby'?: string;
-    /** ID of the element that describes the avatar */
-    'aria-describedby'?: string;
-    /** Additional details for the avatar */
-    'aria-details'?: string;
-    /** Indicates if the avatar is hidden from assistive technologies */
-    'aria-hidden'?: boolean;
-} & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
-export { AvatarPair };

package/dist/esm/components/avatar/parts/AvatarPair.mjs

@@ -1,47 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as d from "react";
-import * as l from "@radix-ui/react-avatar";
-import { tv as c } from "tailwind-variants";
-import { useAvatarContext as y, AvatarProvider as p } from "../Avatar.context.mjs";
-import { avatarBase as v } from "../Avatar.variants.mjs";
-const z = c({
-  extend: v,
-  base: "uy-absolute uy-overflow-hidden uy-leading-[0] uy-border uy-border-solid uy-border-content-inverted -uy-bottom-[var(--pair-offset)] -uy-right-[var(--pair-offset)] uy-transition-transform uy-origin-center",
-  variants: {
-    size: {
-      xs: "uy-size-200",
-      sm: "uy-size-300"
-    },
-    isHidden: {
-      true: "uy-scale-0",
-      false: "uy-scale-100"
-    }
-  },
-  defaultVariants: {
-    size: "sm",
-    variant: "circle",
-    isHidden: !1
-  }
-}), x = d.forwardRef(
-  ({ variant: r, isHidden: a, children: i, ...o }, n) => {
-    const { size: f } = y(), e = f === "xl", t = e ? "sm" : "xs", m = e ? 0 : 4, u = z({ variant: r, size: t, isHidden: a });
-    return /* @__PURE__ */ s(p, { variant: r, size: t, hasPair: !0, children: /* @__PURE__ */ s(
-      l.Root,
-      {
-        ref: n,
-        role: "img",
-        className: u,
-        "aria-hidden": a,
-        style: {
-          "--pair-offset": `${m}px`
-        },
-        ...o,
-        children: i
-      }
-    ) });
-  }
-);
-x.displayName = "AvatarPair";
-export {
-  x as AvatarPair
-};

package/dist/esm/components/avatar/utils.d.mts

@@ -1 +0,0 @@
-export declare const getInitials: (value: string | null | undefined) => string;

package/dist/esm/components/badge/Badge.d.mts

@@ -1,70 +0,0 @@
-import { AriaRole } from 'react';
-import { VariantProps } from 'tailwind-variants';
-declare const badge: import('tailwind-variants').TVReturnType<{
-    variant: {
-        success: string;
-        warning: string;
-        danger: string;
-        neutral: string;
-        promo: string;
-        attention: string;
-        numeric: string;
-        contextual: string;
-    };
-}, undefined, "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center", {
-    twMerge: false;
-}, {
-    variant: {
-        success: string;
-        warning: string;
-        danger: string;
-        neutral: string;
-        promo: string;
-        attention: string;
-        numeric: string;
-        contextual: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
-        success: string;
-        warning: string;
-        danger: string;
-        neutral: string;
-        promo: string;
-        attention: string;
-        numeric: string;
-        contextual: string;
-    };
-}, undefined, "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center", {
-    twMerge: false;
-}, unknown, unknown, undefined>>;
-/**
- * The Badge component is a visual label or indicator used to convey status or highlight content.
- */
-declare const Badge: import('react').ForwardRefExoticComponent<{
-    /**
-     * To add classes to the badge
-     */
-    className?: string;
-    /**
-     * Defines the visual style of the badge
-     * @default 'neutral'
-     */
-    variant?: VariantProps<typeof badge>["variant"];
-    /**
-     * Explicit ARIA role for the badge. If not provided, will be determined by variant
-     */
-    role?: Extract<AriaRole, "status" | "alert">;
-    /**
-     * Changes the root element to a different HTML element. The default element is a `<span>`.
-     * @default false
-     */
-    asChild?: boolean;
-    /**
-     * Accessible label for the badge
-     */
-    'aria-label'?: string;
-} & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLSpanElement>>;
-export { Badge };

package/dist/esm/components/badge/Badge.mjs

@@ -1,61 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { Slot as y } from "@radix-ui/react-slot";
-import { twMerge as d } from "tailwind-merge";
-import { tv as i } from "tailwind-variants";
-const g = i(
-  {
-    base: "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center",
-    variants: {
-      variant: {
-        success: "uy-bg-surface-success-low uy-text-content-neutral",
-        warning: "uy-bg-surface-warning-low uy-text-content-neutral",
-        danger: "uy-bg-surface-danger-low uy-text-content-neutral",
-        neutral: "uy-bg-surface-neutral-lowest uy-text-content-neutral",
-        promo: "uy-bg-surface-promo-low uy-text-content-neutral",
-        attention: "uy-bg-surface-danger uy-text-content-inverted",
-        numeric: "uy-bg-surface-primary-low uy-text-blue-L10",
-        contextual: "uy-bg-surface-neutral uy-border uy-border-solid uy-border-border-neutral uy-text-content-neutral"
-      }
-    },
-    defaultVariants: {
-      variant: "neutral"
-    }
-  },
-  { twMerge: !1 }
-), m = {
-  success: "status",
-  warning: "alert",
-  danger: "alert",
-  neutral: "status",
-  promo: "status",
-  attention: "alert",
-  contextual: "status",
-  numeric: "status"
-}, p = c(
-  ({
-    className: e,
-    variant: t = "neutral",
-    role: r,
-    asChild: a = !1,
-    children: n,
-    ...u
-  }, o) => {
-    const s = r ?? m[t] ?? "status";
-    return /* @__PURE__ */ l(
-      a ? y : "span",
-      {
-        "data-dd-privacy": "allow",
-        ref: o,
-        className: d(g({ variant: t }), e),
-        role: s,
-        ...u,
-        children: n
-      }
-    );
-  }
-);
-p.displayName = "Badge";
-export {
-  p as Badge
-};

package/dist/esm/components/bottom-sheet/BottomSheet.d.mts

@@ -1,153 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-export declare const bottomSheet: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    overlay: string[];
-    wrapper: string[];
-    content: string[];
-}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    overlay: string[];
-    wrapper: string[];
-    content: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    overlay: string[];
-    wrapper: string[];
-    content: string[];
-}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, unknown, unknown, undefined>>;
-export interface BottomSheetProps extends PropsWithChildren<VariantProps<typeof bottomSheet>> {
-    /**
-     * Controls whether the sheet can be dismissed by clicking outside or using escape key.
-     * @default true
-     */
-    isDismissable?: boolean;
-    /**
-     * When true, pressing the Escape key will not close the sheet.
-     * This is useful when you need to prevent accidental dismissal.
-     * @default false
-     */
-    isKeyboardDismissDisabled?: boolean;
-    /**
-     * Controls the open state of the sheet in controlled mode.
-     * Must be used together with `onOpenChange`.
-     */
-    isOpen?: boolean;
-    /**
-     * Sets the initial open state in uncontrolled mode.
-     * @default false
-     */
-    defaultOpen?: boolean;
-    /**
-     * Callback fired when the open state changes.
-     * Required when using controlled mode with `isOpen`.
-     */
-    onOpenChange?: (isOpen: boolean) => void;
-}
-/**
- * The BottomSheet component provides a mobile-optimized interface for displaying content
- * that slides up from the bottom of the screen. It's ideal for secondary tasks and supplementary
- * information without leaving the current context.
- *
- * This component is specifically designed as a bottom-anchored variant, unlike the SidePanel
- * which adapts to different viewports.
- *
- * Control the sheet using either uncontrolled mode with `defaultOpen` or controlled mode with
- * `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
- * `isKeyboardDismissDisabled` props.
- * @param {BottomSheetProps} props - The props for the BottomSheet component
- * @see {@link BottomSheetProps} for all available props
- * @example
- * ```tsx
- * import {
- *   BottomSheet,
- *   BottomSheetHeader,
- *   BottomSheetContent,
- *   BottomSheetFooter,
- *   Button,
- *   DialogTrigger
- * } from '@payfit/unity-components'
- *
- * // Uncontrolled example
- * function BasicExample() {
- *   return (
- *     <DialogTrigger>
- *       <Button>Open bottom sheet</Button>
- *       <BottomSheet>
- *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
- *         <BottomSheetContent>Your content here</BottomSheetContent>
- *         <BottomSheetFooter>
- *           <Button variant="secondary">Cancel</Button>
- *           <Button variant="primary">Save</Button>
- *         </BottomSheetFooter>
- *       </BottomSheet>
- *     </DialogTrigger>
- *   )
- * }
- *
- * // Controlled example
- * function ControlledExample() {
- *   const [isOpen, setIsOpen] = useState(false)
- *
- *   return (
- *     <>
- *       <Button onPress={() => setIsOpen(true)}>Open bottom sheet</Button>
- *
- *       <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
- *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
- *         <BottomSheetContent>Your content here</BottomSheetContent>
- *         <BottomSheetFooter>
- *           <Button
- *             variant="primary"
- *             onPress={() => setIsOpen(false)}
- *           >
- *             Close
- *           </Button>
- *         </BottomSheetFooter>
- *       </BottomSheet>
- *     </>
- *   )
- * }
- * ```
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
- */
-declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
-export { BottomSheet };