@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { selectableCard } from '../../selectableCard.variant.js';
+export interface SelectableCardCheckboxProps extends Omit<AriaCheckboxProps, 'children'>, VariantProps<typeof selectableCard> {
+    /**
+     * The title of the selectable card.
+     */
+    title: string;
+    /**
+     * Optional description text to display below the title.
+     */
+    description?: string;
+    /**
+     * Optional illustration to display in the card.
+     */
+    illustration?: ReactNode;
+}
+/**
+ * The `SelectableCardCheckbox` component renders a selectable card with a checkbox.
+ * It is designed to be used within a `SelectableCardCheckboxGroup` component.
+ * @param {string} props.title - The title of the selectable card
+ * @param {string} [props.description] - Optional description text to display below the title
+ * @param {ReactNode} [props.illustration] - Optional illustration to display in the card
+ * @param {string} props.value - The value of the checkbox, used for selection in the checkbox group
+ * @example
+ * ```tsx
+ * import { SelectableCardCheckbox, SelectableCardCheckboxGroup } from '@payfit/unity-components'
+ *
+ * <SelectableCardCheckboxGroup>
+ *   <SelectableCardCheckbox
+ *     title="Option 1"
+ *     description="Description for option 1"
+ *     value="option1"
+ *   />
+ *   <SelectableCardCheckbox
+ *     title="Option 2"
+ *     description="Description for option 2"
+ *     value="option2"
+ *   />
+ * </SelectableCardCheckboxGroup>
+ * ```
+ * @see {@link SelectableCardCheckboxProps} for all available props
+ * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardcheckboxgroup-selectablecardcheckbox--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ */
+declare const SelectableCardCheckbox: import('react').ForwardRefExoticComponent<SelectableCardCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { SelectableCardCheckbox };

package/dist/esm/components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.js

@@ -0,0 +1,40 @@
+import { jsx as r, jsxs as t, Fragment as n } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { useId as h } from "react-aria";
+import { Checkbox as p } from "react-aria-components";
+import { CheckboxIndicator as s } from "../../../checkbox/parts/CheckboxIndicator.js";
+import { Text as b } from "../../../text/Text.js";
+import { Content as x } from "../../internals/Content.js";
+import { Description as C } from "../../internals/Description.js";
+import { Illustration as k } from "../../internals/Illustration.js";
+import { SelectedIndicator as u } from "../../internals/SelectedIndicator.js";
+import { selectableCard as I } from "../../selectableCard.variant.js";
+const v = f(({ title: i, description: e, illustration: m, ...c }, a) => {
+  const { base: d } = I(), l = h();
+  return /* @__PURE__ */ r(
+    p,
+    {
+      ref: a,
+      className: ({ isFocusVisible: o }) => d({ isFocusVisible: o }),
+      ...c,
+      children: (o) => /* @__PURE__ */ t(n, { children: [
+        /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
+          s,
+          {
+            className: "group-hover:uy-border-border-form-hover",
+            ...o
+          }
+        ) }),
+        /* @__PURE__ */ t(x, { children: [
+          m && /* @__PURE__ */ r(k, { children: m }),
+          /* @__PURE__ */ r(b, { variant: "h3", id: `${l}-label`, children: i }),
+          e && /* @__PURE__ */ r(C, { children: e })
+        ] })
+      ] })
+    }
+  );
+});
+v.displayName = "SelectableCardCheckbox";
+export {
+  v as SelectableCardCheckbox
+};

package/dist/esm/components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.d.ts

@@ -0,0 +1,20 @@
+import { RadioGroupProps } from 'react-aria-components';
+export type SelectableCardRadioGroupProps = Omit<RadioGroupProps, 'className' | 'style' | 'isDisabled' | 'isReadOnly'>;
+/**
+ * The `SelectableCardRadioGroup` component renders a group of mutually exclusive selectable card options.
+ * Use it to display a set of choices where only one selection is allowed.
+ * @example
+ * ```tsx
+ * import { SelectableCardRadioGroup, SelectableCardRadio } from '@payfit/unity-components'
+ *
+ * <SelectableCardRadioGroup>
+ *   <SelectableCardRadio value="option1">Option 1</SelectableCardRadio>
+ *   <SelectableCardRadio value="option2">Option 2</SelectableCardRadio>
+ *   <SelectableCardRadio value="option3">Option 3</SelectableCardRadio>
+ * </SelectableCardRadioGroup>
+ * ```
+ * @see {@link SelectableCardRadioGroupProps} for all available props
+ * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardradiogroup-docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ */
+declare const SelectableCardRadioGroup: import('react').ForwardRefExoticComponent<SelectableCardRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SelectableCardRadioGroup };

package/dist/esm/components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js

@@ -0,0 +1,24 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { RadioGroup as p } from "react-aria-components";
+import { useBreakpointListener as n } from "../../../hooks/use-breakpoint-listener.js";
+const u = m(({ children: r, value: e, onChange: i, onBlur: t, ...a }, l) => {
+  const o = n();
+  return /* @__PURE__ */ s(
+    p,
+    {
+      ...a,
+      orientation: o === "xs" || o === "sm" ? "vertical" : "horizontal",
+      value: e,
+      onBlur: t,
+      onChange: i,
+      className: "uy-flex md:uy-flex-row sm:uy-flex-col uy-gap-150",
+      ref: l,
+      children: r
+    }
+  );
+});
+u.displayName = "SelectableCardRadioGroup";
+export {
+  u as SelectableCardRadioGroup
+};

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/RadioIndicator.d.ts

@@ -0,0 +1,8 @@
+interface RadioIndocatorProps {
+    isSelected: boolean;
+}
+declare const RadioIndicator: {
+    ({ isSelected }: RadioIndocatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default RadioIndicator;

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/RadioIndicator.js

@@ -0,0 +1,67 @@
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { tv as t } from "tailwind-variants";
+const e = t({
+  base: "",
+  variants: {
+    isSelected: {
+      false: [
+        "uy-stroke-border-form-enabled",
+        "hover:uy-stroke-border-form-hover",
+        "focus-visible:uy-stroke-border-form-focus"
+      ]
+    }
+  }
+}), d = ({ isSelected: r }) => r ? /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ i("g", { id: "Radio input", children: [
+      /* @__PURE__ */ o(
+        "path",
+        {
+          id: "Background",
+          d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z",
+          fill: "white",
+          stroke: "#0157B2",
+          strokeWidth: "1.25"
+        }
+      ),
+      /* @__PURE__ */ o(
+        "path",
+        {
+          id: "Foreground",
+          d: "M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z",
+          fill: "#0157B2"
+        }
+      )
+    ] })
+  }
+) : /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ o("g", { id: "Radio input", children: /* @__PURE__ */ o(
+      "path",
+      {
+        className: e({ isSelected: r }),
+        id: "Background",
+        d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z",
+        fill: "white",
+        stroke: "currentColor",
+        strokeWidth: "1.25"
+      }
+    ) })
+  }
+);
+d.displayName = "RadioIndicator";
+export {
+  d as default
+};

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.d.ts

@@ -0,0 +1,50 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { RadioProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { selectableCard } from '../../selectableCard.variant.js';
+export interface SelectableCardRadioProps extends Omit<RadioProps, 'children'>, PropsWithChildren<VariantProps<typeof selectableCard>> {
+    /**
+     * The title of the selectable card.
+     */
+    title: string;
+    /**
+     * Optional description text to display below the title.
+     */
+    description?: string;
+    /**
+     * Optional illustration to display in the card.
+     */
+    illustration?: ReactNode;
+}
+/**
+ * The `SelectableCardRadio` component renders a selectable card with a radio button.
+ * It is designed to be used within a `SelectableCardRadioGroup` component.
+ * @param props.title - The title of the selectable card
+ * @param [props.description] - Optional description text to display below the title
+ * @param [props.illustration] - Optional illustration to display in the card
+ * @param props.value - The value of the radio button, used for selection in the radio group
+ * @example
+ * ```tsx
+ * import { SelectableCardRadio, SelectableCardRadioGroup } from '@payfit/unity-components'
+ *
+ * <SelectableCardRadioGroup>
+ *   <SelectableCardRadio
+ *     title="Option 1"
+ *     description="Description for option 1"
+ *     value="option1"
+ *   />
+ *   <SelectableCardRadio
+ *     title="Option 2"
+ *     description="Description for option 2"
+ *     value="option2"
+ *   />
+ * </SelectableCardRadioGroup>
+ * ```
+ * @see {@link SelectableCardRadioProps} for all available props
+ * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardradiogroup-selectablecardradio--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ */
+declare const SelectableCardRadio: {
+    ({ title, description, illustration, ...props }: SelectableCardRadioProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SelectableCardRadio };

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js

@@ -0,0 +1,36 @@
+import { jsx as r, jsxs as i, Fragment as c } from "react/jsx-runtime";
+import { Radio as l } from "react-aria-components";
+import { Text as n } from "../../../text/Text.js";
+import { Content as p } from "../../internals/Content.js";
+import { Description as s } from "../../internals/Description.js";
+import { Illustration as f } from "../../internals/Illustration.js";
+import { SelectedIndicator as h } from "../../internals/SelectedIndicator.js";
+import { selectableCard as b } from "../../selectableCard.variant.js";
+import x from "./RadioIndicator.js";
+const C = ({
+  title: m,
+  description: e,
+  illustration: t,
+  ...a
+}) => {
+  const { base: d } = b();
+  return /* @__PURE__ */ r(
+    l,
+    {
+      className: ({ isFocusVisible: o }) => d({ isFocusVisible: o }),
+      ...a,
+      children: ({ isSelected: o }) => /* @__PURE__ */ i(c, { children: [
+        /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(x, { isSelected: o }) }),
+        /* @__PURE__ */ i(p, { children: [
+          t && /* @__PURE__ */ r(f, { children: t }),
+          /* @__PURE__ */ r(n, { variant: "h3", children: m }),
+          e && /* @__PURE__ */ r(s, { children: e })
+        ] })
+      ] })
+    }
+  );
+};
+C.displayName = "SelectableCardRadio";
+export {
+  C as SelectableCardRadio
+};

package/dist/esm/components/selectable-card/selectableCard.variant.d.ts

@@ -0,0 +1,35 @@
+export declare const selectableCard: import('tailwind-variants').TVReturnType<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    base: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    isFocusVisible: {
+        true: string;
+    };
+}>, {
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    base: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    base: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isFocusVisible: {
+        true: string;
+    };
+}, {
+    isFocusVisible: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/esm/components/selectable-card/selectableCard.variant.js

@@ -0,0 +1,24 @@
+import { tv as r } from "tailwind-variants";
+const o = r({
+  slots: {
+    base: [
+      "uy-group",
+      "uy-flex uy-flex-row uy-items-start uy-basis-0 uy-grow uy-cursor-pointer",
+      "uy-border uy-border-solid uy-rounded-200 uy-border-border-form-enabled",
+      "uy-text-content-form-enabled",
+      "uy-bg-surface-form-enabled",
+      "hover:uy-border-border-form-hover",
+      "data-[selected]:uy-border-border-form-active",
+      "data-[invalid]:uy-border-border-form-error data-[invalid]:uy-bg-surface-form-error",
+      "focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"
+    ]
+  },
+  variants: {
+    isFocusVisible: {
+      true: "uy-outline-none uy-ring-2 uy-ring-offset-2 uy-ring-utility-focus-ring"
+    }
+  }
+});
+export {
+  o as selectableCard
+};

package/dist/esm/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.d.ts

@@ -0,0 +1,31 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { LabelProps } from '../label/Label.js';
+export interface SelectableCardCheckboxGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the radio button group. */
+    label: string;
+    /** Helper text to display below the radio button group. */
+    helperText?: ReactNode;
+    /** Feedback text to display, typically used for error messages. */
+    feedbackText?: ReactNode;
+}
+/**
+ * The `SelectableCardCheckboxGroupField` component renders a group of selectable card checkboxes within a form field.
+ * Use it to collect multiple selections from users in a visually appealing and accessible manner.
+ * @example
+ * ```tsx
+ * import { SelectableCardCheckboxGroupField, SelectableCardCheckbox } from '@payfit/unity-components'
+ *
+ * <SelectableCardCheckboxGroupField name="options" label="Choose options">
+ *   <SelectableCardCheckbox value="option1">Option 1</SelectableCardCheckbox>
+ *   <SelectableCardCheckbox value="option2">Option 2</SelectableCardCheckbox>
+ *   <SelectableCardCheckbox value="option3">Option 3</SelectableCardCheckbox>
+ * </SelectableCardCheckboxGroupField>
+ * ```
+ * @see {@link SelectableCardCheckboxGroupFieldProps} for all available props
+ * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/forms-selectablecard-selectablecardradiogroupfield--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ */
+declare const SelectableCardCheckboxGroupField: import('react').ForwardRefExoticComponent<SelectableCardCheckboxGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
+export { SelectableCardCheckboxGroupField };

package/dist/esm/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.js

@@ -0,0 +1,46 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { useFormContext as f } from "react-hook-form";
+import { FormField as x } from "../form-field/FormField.js";
+import { FormControl as F } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as h } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as b } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as u } from "../form-field/parts/FormLabel.js";
+import { SelectableCardCheckboxGroup as C } from "../selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js";
+const k = s(
+  ({
+    children: m,
+    name: r,
+    isRequired: l,
+    requiredVariant: t,
+    label: c,
+    helperText: i,
+    feedbackText: p,
+    ...a
+  }, d) => {
+    const { control: n } = f();
+    return /* @__PURE__ */ e(
+      x,
+      {
+        ...{
+          isRequired: l
+        },
+        control: n,
+        name: r,
+        className: "uy-gap-150",
+        children: [
+          /* @__PURE__ */ e("div", { className: "uy-flex-col uy-gap-50", children: [
+            /* @__PURE__ */ o(u, { requiredVariant: t, children: c }),
+            /* @__PURE__ */ o(b, { children: i })
+          ] }),
+          /* @__PURE__ */ o(F, { children: /* @__PURE__ */ o(C, { ref: d, name: r, ...a, children: m }) }),
+          /* @__PURE__ */ o(h, { children: p })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "SelectableCardCheckboxGroupField";
+export {
+  k as SelectableCardCheckboxGroupField
+};

package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.d.ts

@@ -0,0 +1,31 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { LabelProps } from '../label/Label.js';
+export interface SelectableCardRadioGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the radio button group. */
+    label: string;
+    /** Helper text to display below the radio button group. */
+    helperText?: ReactNode;
+    /** Feedback text to display, typically used for error messages. */
+    feedbackText?: ReactNode;
+}
+/**
+ * The `SelectableCardRadioGroupField` component renders a group of mutually exclusive selectable card options within a form field.
+ * Use it to collect a single selection from users in a visually appealing and accessible manner.
+ * @example
+ * ```tsx
+ * import { SelectableCardRadioGroupField, SelectableCardRadio } from '@payfit/unity-components'
+ *
+ * <SelectableCardRadioGroupField name="option" label="Choose an option">
+ *   <SelectableCardRadio value="option1">Option 1</SelectableCardRadio>
+ *   <SelectableCardRadio value="option2">Option 2</SelectableCardRadio>
+ *   <SelectableCardRadio value="option3">Option 3</SelectableCardRadio>
+ * </SelectableCardRadioGroupField>
+ * ```
+ * @see {@link SelectableCardRadioGroupFieldProps} for all available props
+ * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/forms-selectablecard-selectablecardcheckboxgroupfield--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ */
+declare const SelectableCardRadioGroupField: import('react').ForwardRefExoticComponent<SelectableCardRadioGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
+export { SelectableCardRadioGroupField };

package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js

@@ -0,0 +1,46 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { useFormContext as f } from "react-hook-form";
+import { FormField as F } from "../form-field/FormField.js";
+import { FormControl as u } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as x } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as h } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as b } from "../form-field/parts/FormLabel.js";
+import { SelectableCardRadioGroup as C } from "../selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js";
+const y = s(
+  ({
+    children: m,
+    name: r,
+    isRequired: l,
+    requiredVariant: i,
+    label: t,
+    helperText: a,
+    feedbackText: c,
+    ...d
+  }, p) => {
+    const { control: n } = f();
+    return /* @__PURE__ */ e(
+      F,
+      {
+        ...{
+          isRequired: l
+        },
+        control: n,
+        name: r,
+        className: "uy-gap-150",
+        children: [
+          /* @__PURE__ */ e("div", { className: "uy-flex-col uy-gap-50", children: [
+            /* @__PURE__ */ o(b, { requiredVariant: i, children: t }),
+            /* @__PURE__ */ o(h, { children: a })
+          ] }),
+          /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(C, { ref: p, name: r, ...d, children: m }) }),
+          /* @__PURE__ */ o(x, { children: c })
+        ]
+      }
+    );
+  }
+);
+y.displayName = "SelectableCardRadioGroupField";
+export {
+  y as SelectableCardRadioGroupField
+};

package/dist/esm/components/side-panel/SidePanel.d.ts

@@ -0,0 +1,152 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanel: 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 SidePanelProps extends PropsWithChildren<VariantProps<typeof sidePanel>> {
+    /**
+     * Controls whether the panel can be dismissed by clicking outside or using escape key.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /**
+     * When true, pressing the Escape key will not close the panel.
+     * This is useful when you need to prevent accidental dismissal.
+     * @default false
+     */
+    isKeyboardDismissDisabled?: boolean;
+    /**
+     * Controls the open state of the panel 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 SidePanel component provides contextual space for supplementary content without fully
+ * interrupting the user's workflow. It slides in from the right on desktop and from the bottom on mobile.
+ *
+ * You can use SidePanel to display detailed information, forms, or secondary actions while keeping
+ * the main interface visible and accessible. It's ideal for multi-step processes, editing items in a list,
+ * or displaying contextual details.
+ *
+ * Control the panel using either uncontrolled mode with `defaultOpen` or controlled mode with
+ * `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
+ * `isKeyboardDismissDisabled` props.
+ * @param {SidePanelProps} props - The props for the SidePanel component
+ * @see {@link SidePanelProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   SidePanel,
+ *   SidePanelHeader,
+ *   SidePanelContent,
+ *   SidePanelFooter,
+ *   Button
+ * } from '@payfit/unity-components'
+ *
+ * // Uncontrolled example
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open panel</Button>
+ *       <SidePanel>
+ *         <SidePanelHeader>Panel title</SidePanelHeader>
+ *         <SidePanelContent>Your content here</SidePanelContent>
+ *         <SidePanelFooter>
+ *           <Button variant="secondary">Cancel</Button>
+ *           <Button variant="primary">Save</Button>
+ *         </SidePanelFooter>
+ *       </SidePanel>
+ *     </DialogTrigger>
+ *   )
+ * }
+ *
+ * // Controlled example
+ * function ControlledExample() {
+ *   const [isOpen, setIsOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button onPress={() => setIsOpen(true)}>Open panel</Button>
+ *
+ *       <SidePanel isOpen={isOpen} onOpenChange={setIsOpen}>
+ *         <SidePanelHeader>Panel title</SidePanelHeader>
+ *         <SidePanelContent>Your content here</SidePanelContent>
+ *         <SidePanelFooter>
+ *           <Button
+ *             variant="primary"
+ *             onPress={() => setIsOpen(false)}
+ *           >
+ *             Close
+ *           </Button>
+ *         </SidePanelFooter>
+ *       </SidePanel>
+ *     </>
+ *   )
+ * }
+ * ```
+ * @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 SidePanel: import('react').ForwardRefExoticComponent<SidePanelProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanel };