@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,153 @@
+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.js').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.js').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 };

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

@@ -0,0 +1,68 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { ModalOverlay as c, Modal as h, Dialog as p } from "react-aria-components";
+import { tv as x } from "tailwind-variants";
+import { BottomSheetDragIndicator as w } from "./parts/BottomSheetDragIndicator.js";
+const g = x({
+  slots: {
+    overlay: [
+      "uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto",
+      "uy-backdrop-blur-sm uy-bg-utility-backdrop/65",
+      "data-[entering]:uy-animate-fade-in data-[exiting]:uy-animate-fade-out"
+    ],
+    wrapper: [
+      "uy-w-full md:uy-max-w-[50svw]",
+      "uy-fixed uy-bottom-0 uy-left-0 uy-right-0 md:uy-left-0 md:uy-right-0 md:uy-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",
+      "data-[entering]:uy-animate-slide-up-fade-in data-[exiting]:uy-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: n, content: m } = g();
+    return /* @__PURE__ */ t(
+      c,
+      {
+        className: d(),
+        isOpen: o,
+        onOpenChange: a,
+        defaultOpen: u,
+        isDismissable: r,
+        isKeyboardDismissDisabled: y,
+        children: /* @__PURE__ */ f(
+          h,
+          {
+            "data-dd-privacy": "allow",
+            ...i,
+            ref: l,
+            className: n(),
+            "data-unity-bottom-sheet": !0,
+            children: [
+              /* @__PURE__ */ t(w, {}),
+              /* @__PURE__ */ t(p, { className: m(), children: e })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+v.displayName = "BottomSheet";
+export {
+  v as BottomSheet,
+  g as bottomSheet
+};

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

@@ -0,0 +1,70 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+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, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [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, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, 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

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { tv as y } from "tailwind-variants";
+const s = y({
+  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 = n(
+  ({ 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

@@ -0,0 +1,54 @@
+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, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [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, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, 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

@@ -0,0 +1,67 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as b, useContext as g } from "react";
+import { useDrag as x } from "@use-gesture/react";
+import { OverlayTriggerStateContext as D } from "react-aria-components";
+import { tv as v } from "tailwind-variants";
+import { useBreakpointListener as S } from "../../../hooks/use-breakpoint-listener.js";
+const I = v({
+  slots: {
+    base: [
+      "md:uy-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"
+  }
+}), N = 100;
+function T() {
+  const r = b(null), o = g(D), n = S(), { base: i, indicator: l } = I(), m = n === "xs" || n === "sm", u = x(
+    (c) => {
+      var s;
+      const {
+        movement: [B, e],
+        direction: [E, d],
+        intentional: f,
+        cancel: y,
+        last: p,
+        event: h
+      } = c;
+      if (!m) {
+        y();
+        return;
+      }
+      h.preventDefault();
+      const t = (s = r.current) == null ? void 0 : s.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", p && f && (e > N || d > 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__ */ a(
+    "div",
+    {
+      className: i(),
+      "aria-hidden": "true",
+      ref: r,
+      ...u(),
+      children: /* @__PURE__ */ a("div", { className: l() })
+    }
+  );
+}
+T.displayName = "BottomSheetDragIndicator";
+export {
+  T as BottomSheetDragIndicator,
+  I as bottomSheetDragIndicator
+};

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

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const bottomSheetFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, 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

@@ -0,0 +1,28 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { tv as a } from "tailwind-variants";
+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))] md:uy-pb-200"
+  ]
+}), m = y(
+  ({ children: t, className: o, ...e }, r) => /* @__PURE__ */ u(
+    "footer",
+    {
+      ref: r,
+      className: s({ class: o }),
+      ...e,
+      children: t
+    }
+  )
+);
+m.displayName = "BottomSheetFooter";
+export {
+  m as BottomSheetFooter,
+  s as bottomSheetFooter
+};

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

@@ -0,0 +1,83 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: 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, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, 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

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { Heading as y } from "react-aria-components";
+import { tv as c } from "tailwind-variants";
+import { CircularIconButton as m } from "../../icon-button/CircularIconButton.js";
+const d = c({
+  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 = i(
+  ({ 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(y, { 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

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+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

@@ -0,0 +1,28 @@
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as i, useContext as u } from "react";
+const e = i({
+  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 = u(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
+};