@payfit/unity-components 2.46.11 → 2.46.13

package/dist/esm/components/bottom-sheet/BottomSheet.js

@@ -1,69 +0,0 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { uyTv as c } from "@payfit/unity-themes";
-import { Dialog as h } from "react-aria-components/Dialog";
-import { ModalOverlay as p, Modal as x } from "react-aria-components/Modal";
-import { BottomSheetDragIndicator as w } from "./parts/BottomSheetDragIndicator.js";
-const g = c({
-  slots: {
-    overlay: [
-      "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
-      "uy:backdrop-blur-sm uy:bg-utility-backdrop/65",
-      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
-    ],
-    wrapper: [
-      "uy:w-full uy:md:max-w-[50svw]",
-      "uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:md:left-0 uy:md:right-0 uy:md:mx-auto uy:z-[100]",
-      "uy:bg-surface-neutral uy:rounded-t-200",
-      "uy:shadow-flying",
-      "uy:flex uy:flex-col uy:max-h-[95svh]",
-      "uy:overflow-hidden",
-      "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out"
-    ],
-    content: [
-      "uy:flex uy:flex-col uy:h-full uy:min-h-[40svh] uy:overflow-hidden uy:outline-none"
-    ]
-  }
-}), v = s(
-  ({
-    children: e,
-    isOpen: o,
-    onOpenChange: a,
-    defaultOpen: u,
-    isDismissable: r = !0,
-    isKeyboardDismissDisabled: y = !1,
-    ...i
-  }, l) => {
-    const { overlay: d, wrapper: m, content: n } = g();
-    return /* @__PURE__ */ t(
-      p,
-      {
-        className: d(),
-        isOpen: o,
-        onOpenChange: a,
-        defaultOpen: u,
-        isDismissable: r,
-        isKeyboardDismissDisabled: y,
-        children: /* @__PURE__ */ f(
-          x,
-          {
-            "data-dd-privacy": "allow",
-            ...i,
-            ref: l,
-            className: m(),
-            "data-unity-bottom-sheet": !0,
-            children: [
-              /* @__PURE__ */ t(w, {}),
-              /* @__PURE__ */ t(h, { className: n(), children: e })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-v.displayName = "BottomSheet";
-export {
-  v as BottomSheet,
-  g as bottomSheet
-};

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.d.ts

@@ -1,56 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const bottomSheetContent: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            scroller?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            scroller?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    scroller: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            scroller?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    scroller: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    scroller: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface BottomSheetContentProps extends PropsWithChildren<VariantProps<typeof bottomSheetContent>> {
-    className?: string;
-}
-/**
- * The `BottomSheetContent` component renders the main content area of a bottom sheet.
- * It takes up the majority of the space between the header and footer components
- * The content is scrollable when it exceeds the available space.
- * @component
- * @param {BottomSheetContentProps} props - The props for the `BottomSheetContent` component
- * @example
- * ```tsx
- * import { BottomSheetContent } from '@payfit/unity-components'
- *
- * <BottomSheetContent>
- *   Your panel content here
- * </BottomSheetContent>
- * ```
- * @see {@link BottomSheetContentProps} for all available props
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
- */
-declare const BottomSheetContent: import('react').ForwardRefExoticComponent<BottomSheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
-export { BottomSheetContent };

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.js

@@ -1,26 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { uyTv as n } from "@payfit/unity-themes";
-const s = n({
-  slots: {
-    base: [
-      "uy:bg-surface-neutral uy:typography-body uy:text-content-neutral",
-      "uy:flex uy:flex-col uy:flex-1 uy:min-h-0 uy:overflow-hidden",
-      "uy:w-full"
-    ],
-    scroller: [
-      "uy:flex-1 uy:overflow-y-auto uy:overflow-x-hidden uy:p-300",
-      "uy:h-full uy:min-h-0"
-    ]
-  }
-}), f = y(
-  ({ children: o, ...t }, l) => {
-    const { base: r, scroller: u } = s();
-    return /* @__PURE__ */ e("section", { ref: l, className: r(), ...t, children: /* @__PURE__ */ e("div", { className: u(), children: o }) });
-  }
-);
-f.displayName = "BottomSheetContent";
-export {
-  f as BottomSheetContent,
-  s as bottomSheetContent
-};

package/dist/esm/components/bottom-sheet/parts/BottomSheetDragIndicator.d.ts

@@ -1,40 +0,0 @@
-export declare const bottomSheetDragIndicator: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            indicator?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            indicator?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    indicator: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            indicator?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    indicator: string;
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    indicator: string;
-}, undefined, unknown, unknown, undefined>>;
-/**
- * A drag indicator component that connects to the overlay state context and
- * provides swipe-to-dismiss functionality for the SidePanel.
- * @internal
- */
-export declare function BottomSheetDragIndicator(): import("react/jsx-runtime").JSX.Element;
-export declare namespace BottomSheetDragIndicator {
-    var displayName: string;
-}

package/dist/esm/components/bottom-sheet/parts/BottomSheetDragIndicator.js

@@ -1,66 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useRef as h, useContext as b } from "react";
-import { uyTv as g } from "@payfit/unity-themes";
-import { useDrag as x } from "@use-gesture/react";
-import { OverlayTriggerStateContext as D } from "react-aria-components/Dialog";
-import { useBreakpointListener as v } from "../../../hooks/use-breakpoint-listener.js";
-const S = g({
-  slots: {
-    base: [
-      "uy:md:hidden uy:mx-auto uy:py-100 uy:w-500",
-      "uy:cursor-grab uy:touch-action-none"
-    ],
-    indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
-  }
-}), T = 100;
-function I() {
-  const r = h(null), o = b(D), n = v(), { base: a, indicator: i } = S(), l = n === "xs" || n === "sm", m = x(
-    (u) => {
-      const {
-        movement: [N, e],
-        direction: [B, c],
-        intentional: d,
-        cancel: f,
-        last: y,
-        event: p
-      } = u;
-      if (!l) {
-        f();
-        return;
-      }
-      p.preventDefault();
-      const t = r.current?.closest(
-        "[data-unity-bottom-sheet]"
-      );
-      if (t) {
-        if (e < 0) {
-          t.style.transform = "translate3d(0, 0, 0)";
-          return;
-        }
-        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", y && d && (e > T || c > 0 ? o && setTimeout(() => {
-          o.close();
-        }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
-      }
-    },
-    {
-      axis: "y",
-      filterTaps: !0,
-      threshold: 5
-    }
-  );
-  return /* @__PURE__ */ s(
-    "div",
-    {
-      className: a(),
-      "aria-hidden": "true",
-      ref: r,
-      ...m(),
-      children: /* @__PURE__ */ s("div", { className: i() })
-    }
-  );
-}
-I.displayName = "BottomSheetDragIndicator";
-export {
-  I as BottomSheetDragIndicator,
-  S as bottomSheetDragIndicator
-};

package/dist/esm/components/bottom-sheet/parts/BottomSheetFooter.d.ts

@@ -1,27 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const bottomSheetFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
-export interface BottomSheetFooterProps extends PropsWithChildren<VariantProps<typeof bottomSheetFooter>> {
-    className?: string;
-}
-/**
- * The `BottomSheetFooter` component renders the footer section of a bottom sheet.
- * It provides a space for action buttons and stays fixed at the bottom of the panel.
- * On mobile devices, it respects the safe area to avoid being obscured by device UI elements.
- * @component
- * @param {BottomSheetFooterProps} props - The props for the `BottomSheetFooter` component
- * @example
- * ```tsx
- * import { BottomSheetFooter, Button } from '@payfit/unity-components'
- *
- * <BottomSheetFooter>
- *   <Button variant="secondary">Cancel</Button>
- *   <Button>Save</Button>
- * </BottomSheetFooter>
- * ```
- * @see {@link BottomSheetFooterProps} for all available props
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/navigation-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
- */
-declare const BottomSheetFooter: import('react').ForwardRefExoticComponent<BottomSheetFooterProps & import('react').RefAttributes<HTMLDivElement>>;
-export { BottomSheetFooter };

package/dist/esm/components/bottom-sheet/parts/BottomSheetFooter.js

@@ -1,28 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { uyTv as a } from "@payfit/unity-themes";
-const s = a({
-  base: [
-    "uy:py-150 uy:px-300 uy:w-full",
-    "uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0",
-    "uy:bg-surface-neutral uy:border-t uy:border-solid uy:border-border-neutral",
-    "uy:sticky uy:bottom-0 uy:z-10",
-    "uy:mt-auto",
-    "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
-  ]
-}), m = y(
-  ({ children: o, className: t, ...e }, r) => /* @__PURE__ */ u(
-    "footer",
-    {
-      ref: r,
-      className: s({ class: t }),
-      ...e,
-      children: o
-    }
-  )
-);
-m.displayName = "BottomSheetFooter";
-export {
-  m as BottomSheetFooter,
-  s as bottomSheetFooter
-};

package/dist/esm/components/bottom-sheet/parts/BottomSheetHeader.d.ts

@@ -1,65 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            buttonContainer?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            buttonContainer?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    content: string[];
-    heading: string[];
-    buttonContainer: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            buttonContainer?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    content: string[];
-    heading: string[];
-    buttonContainer: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    content: string[];
-    heading: string[];
-    buttonContainer: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface BottomSheetHeaderProps extends PropsWithChildren<VariantProps<typeof bottomSheetHeader>> {
-    className?: string;
-}
-/**
- * The `BottomSheetHeader` component renders the header section of a side panel.
- * It includes a title and close button, and on mobile it displays a drag handle for bottom sheet interaction.
- * @component
- * @param {BottomSheetHeaderProps} props - The props for the `BottomSheetHeader` component
- * @example
- * ```tsx
- * import { BottomSheetHeader } from '@payfit/unity-components'
- *
- * <BottomSheetHeader>Title of the panel</BottomSheetHeader>
- * ```
- * @see {@link BottomSheetHeaderProps} for all available props
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
- */
-declare const BottomSheetHeader: import('react').ForwardRefExoticComponent<BottomSheetHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
-export { BottomSheetHeader };

package/dist/esm/components/bottom-sheet/parts/BottomSheetHeader.js

@@ -1,45 +0,0 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { uyTv as i } from "@payfit/unity-themes";
-import { Heading as c } from "react-aria-components/Heading";
-import { CircularIconButton as m } from "../../icon-button/CircularIconButton.js";
-const d = i({
-  slots: {
-    base: [
-      "uy:py-200 uy:px-300 uy:w-full",
-      "uy:flex uy:flex-col uy:shrink-0",
-      "uy:bg-surface-neutral uy:rounded-tl-200 uy:rounded-tr-200 uy:shadow-raising",
-      "uy:sticky uy:top-0 uy:z-10"
-    ],
-    content: ["uy:flex uy:items-center uy:w-full"],
-    heading: [
-      "uy:typography-h3 uy:text-center uy:text-content-neutral uy:truncate",
-      "uy:flex-1 uy:min-w-0"
-    ],
-    buttonContainer: ["uy:flex-shrink-0 uy:flex-grow-0 uy:w-[28px]"]
-  }
-}), f = y(
-  ({ children: o, ...r }, n) => {
-    const { base: u, content: l, heading: a, buttonContainer: t } = d();
-    return /* @__PURE__ */ e("header", { ref: n, className: u(), ...r, children: /* @__PURE__ */ s("div", { className: l(), children: [
-      /* @__PURE__ */ e("div", { className: t() }),
-      /* @__PURE__ */ e(c, { slot: "title", className: a(), children: o }),
-      /* @__PURE__ */ e("div", { className: t(), children: /* @__PURE__ */ e(
-        m,
-        {
-          asElement: "button",
-          slot: "close",
-          icon: "CloseOutlined",
-          title: "Close",
-          size: "large",
-          color: "content.neutral.low"
-        }
-      ) })
-    ] }) });
-  }
-);
-f.displayName = "BottomSheetHeader";
-export {
-  f as BottomSheetHeader,
-  d as bottomSheetHeader
-};

package/dist/esm/components/breadcrumbs/Breadcrumbs.context.d.ts

@@ -1,12 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
-interface BreadcrumbsContextValue {
-    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
-    isMobile: boolean;
-    isStaticApi: boolean;
-}
-export declare const BreadcrumbsContext: import('react').Context<BreadcrumbsContextValue>;
-export declare function BreadcrumbsProvider({ children, wrap, isMobile, isStaticApi, }: PropsWithChildren<BreadcrumbsContextValue>): import("react/jsx-runtime").JSX.Element;
-export declare function useBreadcrumbsContext(): BreadcrumbsContextValue;
-export {};

package/dist/esm/components/breadcrumbs/Breadcrumbs.context.js

@@ -1,28 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useContext as i, createContext as u } from "react";
-const e = u({
-  wrap: "wrap",
-  isMobile: !1,
-  isStaticApi: !1
-});
-function m({
-  children: r,
-  wrap: t,
-  isMobile: o,
-  isStaticApi: n
-}) {
-  return /* @__PURE__ */ s(e.Provider, { value: { wrap: t, isMobile: o, isStaticApi: n }, children: r });
-}
-function d() {
-  const r = i(e);
-  if (!r)
-    throw new Error(
-      "useBreadcrumbsContext must be used within an BreadcrumbsProvider"
-    );
-  return r;
-}
-export {
-  e as BreadcrumbsContext,
-  m as BreadcrumbsProvider,
-  d as useBreadcrumbsContext
-};

package/dist/esm/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,53 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from 'react';
-import { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components/Breadcrumbs';
-import { AriaBreadcrumbsProps as AriaAriaBreadcrumbsProps } from 'react-aria/useBreadcrumbs';
-import { Breadcrumb } from './parts/Breadcrumb.js';
-import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
-type BreadcrumbWrap = VariantProps<typeof breadcrumbsVariant>['wrap'];
-export type BreadcrumbType = 'collapsed' | 'non-collapsed';
-export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<never>, 'onAction'> {
-    items?: never;
-    /**
-     * The breadcrumb list to render (static API)
-     */
-    children: ReactNode;
-    /**
-     * Controls breadcrumbs layout: wrap or nowrap
-     */
-    wrap: BreadcrumbWrap;
-    /**
-     * Defines breadcrumb rendering strategy.
-     * @default 'non-collapsed'
-     */
-    type?: BreadcrumbType;
-}
-export interface BreadcrumbsWithItemProps<TItem extends {
-    label: string;
-}> extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant>, Pick<AriaBreadcrumbsProps<TItem>, 'onAction'> {
-    /**
-     * The list of items to render, when using the dynamic API.
-     */
-    items: TItem[];
-    /**
-     * The render function for each breadcrumb item (dynamic API)
-     */
-    children: (item: TItem) => ReactElement<ComponentPropsWithoutRef<typeof Breadcrumb>>;
-    /**
-     * Controls breadcrumbs layout: wrap or nowrap
-     */
-    wrap: BreadcrumbWrap;
-    /**
-     * Defines breadcrumb rendering strategy.
-     * @default 'non-collapsed'
-     */
-    type?: BreadcrumbType;
-}
-declare const Breadcrumbs: (<TItem extends {
-    label: string;
-}>(props: (BreadcrumbsProps | BreadcrumbsWithItemProps<TItem>) & {
-    ref?: Ref<HTMLOListElement>;
-}) => ReactNode) & {
-    displayName: string;
-};
-export { Breadcrumbs };