@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.6

package/dist/cjs/components/toast/UnityToast.d.ts

@@ -0,0 +1,55 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const unityToast: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        error: string;
+    };
+}, undefined, "sm:uy-w-[416px] uy-border uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125", import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        success: string;
+        error: string;
+    };
+}, {
+    variant: {
+        success: string;
+        error: string;
+    };
+}>, {
+    variant: {
+        success: string;
+        error: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        error: string;
+    };
+}, undefined, "sm:uy-w-[416px] uy-border uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125", import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        success: string;
+        error: string;
+    };
+}, {
+    variant: {
+        success: string;
+        error: string;
+    };
+}>, unknown, unknown, undefined>>;
+export interface UnityToastProps extends Required<Pick<VariantProps<typeof unityToast>, 'variant'>> {
+    /** callback to call to close the toast*/
+    onClose: () => void;
+    /** render the toast in inline mode or not (by default true) */
+    inline?: boolean;
+}
+/**
+ * The `UnityToast` is the component which will contain a title, a content, and action
+ * - `ToastTitle`: The title of the toast
+ * - `ToastContent`(optional): The content of the toast
+ * - `ToastAction`(optional): The action on the toast
+ */
+declare const UnityToast: {
+    ({ children, onClose, variant, inline, }: PropsWithChildren<UnityToastProps>): JSX.Element;
+    displayName: string;
+};
+export { UnityToast };

package/dist/cjs/components/toast/UnityToast.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react"),i=require("react-intl"),c=require("tailwind-variants"),y=require("../icon-button/IconButton.js"),d=require("../icon/Icon.js"),m=require("./parts/ToastTitle.js"),x=require("./Toast.context.js"),f=c.tv({base:"sm:uy-w-[416px] uy-border uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125",variants:{variant:{success:"uy-border-border-success",error:"uy-border-border-danger"}}}),g=e=>{const n=o.isValidElement(e)&&e.type===o.Fragment?e.props.children:e;if(o.Children.toArray(n).filter(r=>o.isValidElement(r)&&r.type===m.ToastTitle).length!==1)throw new Error("UnityToast must have one ToastTitle component")},l=({children:e,onClose:n,variant:s,inline:r=!0})=>{const a=i.useIntl();g(e);const u=f({variant:s});return t.jsx(x.ToastProvider,{inline:r,children:t.jsxs("div",{tabIndex:-1,role:s==="error"?"alert":"status","aria-atomic":"true","aria-live":s==="error"?"assertive":"polite",className:u,children:[t.jsxs("div",{className:"uy-flex uy-flex-row uy-grow",children:[t.jsx(d.Icon,{src:s==="success"?"CheckCircleFilled":"WarningCircleFilled",color:s==="success"?"content.success":"content.danger",className:"uy-mt-100",alt:a.formatMessage({id:"unity:component:toast:icon:status",defaultMessage:"Status"})}),t.jsx("div",{className:`${r?"uy-flex-col":"uy-flex-row uy-justify-between"} uy-flex uy-grow uy-ml-125`,children:e})]}),t.jsx("div",{role:"presentation",className:"uy-border-l-[1px] uy-border-border-neutral uy-self-stretch"}),t.jsx(y.IconButton,{icon:"CloseOutlined",iconRole:"presentation",label:a.formatMessage({id:"unity:component:toast:close:label",defaultMessage:"Close"}),variant:"ghost",color:"neutral",onClick:n})]})})};l.displayName="UnityToast";exports.UnityToast=l;

package/dist/cjs/components/toast/parts/ToastAction.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+export interface ToastActionProps {
+    onPress: () => void;
+}
+declare function ToastAction({ children, onPress, }: PropsWithChildren<ToastActionProps>): JSX.Element;
+declare namespace ToastAction {
+    var displayName: string;
+}
+export { ToastAction };

package/dist/cjs/components/toast/parts/ToastAction.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../button/Button.js");function e({children:o,onPress:n}){return t.jsx("div",{className:"uy-self-end",children:t.jsx(i.Button,{variant:"ghost",color:"primary",onPress:n,children:o})})}e.displayName="ToastAction";exports.ToastAction=e;

package/dist/cjs/components/toast/parts/ToastContent.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare function ToastContent({ children }: PropsWithChildren<object>): JSX.Element | null;
+declare namespace ToastContent {
+    var displayName: string;
+}
+export { ToastContent };

package/dist/cjs/components/toast/parts/ToastContent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("../../text/Text.js"),r=require("../Toast.context.js");function t({children:e}){const{inline:n}=r.useToastContext();return n?o.jsx(s.Text,{variant:"body",className:"uy-mb-100",children:e}):null}t.displayName="ToastContent";exports.ToastContent=t;

package/dist/cjs/components/toast/parts/ToastTitle.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare function ToastTitle({ children }: PropsWithChildren<object>): JSX.Element;
+declare namespace ToastTitle {
+    var displayName: string;
+}
+export { ToastTitle };

package/dist/cjs/components/toast/parts/ToastTitle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("../../text/Text.js");function t({children:e}){return s.jsx(a.Text,{asElement:"h4",variant:"bodyStrong",className:"uy-mt-100",children:e})}t.displayName="ToastTitle";exports.ToastTitle=t;

package/dist/cjs/components/toast/toast.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { ToastActionProps } from './parts/ToastAction.js';
+import { UnityToastProps } from './UnityToast.js';
+interface Base {
+    title: ReactNode;
+    content?: ReactNode;
+}
+interface WithAction {
+    action: ReactNode;
+    actionOnPress: ToastActionProps['onPress'];
+}
+interface SuccessParams extends Base {
+    variant: Extract<UnityToastProps['variant'], 'success'>;
+    duration?: number;
+    action?: never;
+    actionOnPress?: never;
+}
+interface ErrorParams extends Base {
+    variant: Extract<UnityToastProps['variant'], 'error'>;
+    duration?: never;
+    action?: never;
+    actionOnPress?: never;
+}
+interface SuccessParamsWithAction extends Base, WithAction {
+    variant: Extract<UnityToastProps['variant'], 'success'>;
+    duration?: number;
+}
+interface ErrorParamsWithAction extends Base, WithAction {
+    variant: Extract<UnityToastProps['variant'], 'error'>;
+    duration?: never;
+}
+/**
+ * creates a toast
+ * @param prop the object which contains all the properties
+ * @param prop.title the toast title
+ * @param prop.content (optional) the content of the toast
+ * @param prop.variant the toast type
+ * @param prop.action (optional) the label of the action
+ * @param prop.actionOnPress (optional) the function to trigger when click on the action
+ * @param prop.duration (optional) to override the toast duration
+ */
+declare function toast({ title, content, variant, action, actionOnPress, duration, }: SuccessParams | ErrorParams | SuccessParamsWithAction | ErrorParamsWithAction): string;
+export { toast };

package/dist/cjs/components/toast/toast.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react-hot-toast"),c=require("./parts/ToastAction.js"),T=require("./parts/ToastContent.js"),d=require("./parts/ToastTitle.js"),f=require("./ToastManager.js"),j=require("./UnityToast.js"),q=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=q(l);function h({title:t,content:e,variant:s,action:n,actionOnPress:r,duration:u}){return i.default.custom(a=>o.jsxs(j.UnityToast,{onClose:()=>{i.default.dismiss(a.id)},variant:s,inline:!!e,children:[o.jsx(d.ToastTitle,{children:t}),e?o.jsx(T.ToastContent,{children:e}):null,n?o.jsx(c.ToastAction,{onPress:r,children:n}):null]}),{duration:u??f.TOAST_CONFIG[s].duration})}exports.toast=h;

package/dist/cjs/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+interface TooltipProps {
+    title: string;
+    children: ReactElement;
+}
+declare function Tooltip({ title, children }: TooltipProps): JSX.Element;
+export default Tooltip;

package/dist/cjs/components/tooltip/Tooltip.js

@@ -0,0 +1 @@
+"use strict";const n=require("react/jsx-runtime"),e=require("react-aria-components"),i=require("../actionable/Actionable.js"),u=require("../button/Button.js"),s=require("../link/Link.js"),r=o=>o.type===u.Button||o.type===e.Button;function y({title:o,children:t}){if(t.type!==u.Button&&t.type!==e.Button&&t.type!==s.Link&&t.type!==e.Link&&t.type!==i.Actionable)throw new Error("The tooltip can be applied only to Button and Link components, if you want to use it with something else, be sure to wrap it with a Actionable component");return n.jsxs(e.TooltipTrigger,{delay:500,closeDelay:1500,children:[t,n.jsx(e.Tooltip,{offset:r(t)?4:8,className:"uy-inline-flex uy-rounded-50 uy-pl-100 uy-pr-100 uy-pt-50 uy-pb-50 uy-bg-grayscale-L12 uy-max-w-[300px]",children:n.jsx("p",{className:"uy-typography-body-small uy-text-content-inverted uy-overflow-hidden uy-text-ellipsis uy-line-clamp-3",children:o})})]})}module.exports=y;

package/dist/cjs/docs/blocks/Cards.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+type CardProps = React.PropsWithChildren<unknown>;
+export declare const Card: React.FC<CardProps>;
+export declare const CardWithCover: React.FC<CardProps & {
+    coverSrc: string;
+    coverAlt: string;
+}>;
+export declare const CardHeader: React.FC;
+export declare const CardTitle: React.FC;
+export declare const CardContent: React.FC;
+export declare const CardActions: React.FC;
+export declare const Link: React.FC<React.ComponentProps<"a">>;
+type CardGridProps = {
+    children: React.ReactNode;
+    cols?: number;
+};
+export declare const CardGrid: React.FC<CardGridProps>;
+export {};

package/dist/cjs/hooks/use-breakpoint-listener.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./use-media-query.js"),i=e=>{const t=getComputedStyle(document.documentElement).getPropertyValue(`--uy-screens-${e}`);return parseInt(t.replace("px",""),10)},u=e=>`(min-width: ${i(e)}px)`;function o(){const e=r.useMediaQuery(u("xl")),t=r.useMediaQuery(u("lg")),n=r.useMediaQuery(u("md")),s=r.useMediaQuery(u("sm"));return e?"xl":t?"lg":n?"md":s?"sm":"xs"}exports.useBreakpointListener=o;

package/dist/cjs/hooks/use-form.d.ts

@@ -0,0 +1,48 @@
+import { JSX } from 'react';
+import { UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { FormFieldProps } from '../components/form-field/FormField.js';
+import { FormProps } from '../components/form/Form.js';
+import { Schema } from './use-form.types.js';
+export type UseUnityFormReturn<TSchema extends Schema> = {
+    methods: UseHookFormReturn<ZodInfer<TSchema>>;
+    Form: (props: Omit<FormProps<TSchema>, 'form' | 'schema'>) => JSX.Element;
+    FormField: (props: Omit<FormFieldProps<ZodInfer<TSchema>>, 'control'>) => JSX.Element;
+};
+/**
+ * A hook to create `Form` and `FormField` components that are bound to a specific schema definition and form controller. The resulting components will have full type-safety based on the provided schema type.
+ * @param schema {ZodObject} a Zod schema definition to validate the form data
+ * @param options {UseHookFormProps} the options to pass to the `react-hook-form` hook. See the [official documentation](https://react-hook-form.com/api/useform) for more details.
+ * @returns an object containing the bounded  `Form` and `FormField` components, as well as the form controller methods {@link UseUnityFormReturn}
+ * @example
+ * ```tsx
+ * import { useUnityForm } from '@payfit/unity-components'
+ * import * as z from 'zod'
+ *
+ * const schema = z.object({
+ *  foo: z.string().min(3),
+ *  bar: z.string().optional(),
+ * })
+ *
+ * function DemoForm() {
+ *   const { Form, FormField } = useUnityForm(schema, {
+ *     defaultValues: { foo: 'Hello world', bar: '' },
+ *   })
+ *
+ *   return (
+ *    <Form action={() => ...}>
+ *      <FormField name="foo" type="text">
+ *        // ...
+ *      </FormField>
+ *      // Type Error: "baz" is not assignable to "foo" | "bar".
+ *      <FormBield name="baz" type="text">
+ *        // ...
+ *      </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API]() • [Demo]()
+ */
+export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<ZodInfer<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;

package/dist/cjs/hooks/use-media-query.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),a=require("../utils/platform.js"),c=t=>a.isBrowser()&&!a.isTestEnvironment()?window.matchMedia(t):null,i=t=>t.matches;function d(t,n=!1){const e=r.useMemo(()=>c(t),[t]),[o,u]=r.useState(e?i(e):n),s=r.useCallback(()=>{e&&u(i(e))},[e]);return r.useLayoutEffect(()=>{if(e)return e.addEventListener("change",s),()=>{e.removeEventListener("change",s)}}),o}exports.useMediaQuery=d;

package/dist/cjs/index.d.ts

@@ -0,0 +1,55 @@
+export * from './components/actionable/Actionable.js';
+export * from './components/alert/Alert.js';
+export * from './components/alert/parts/AlertActions.js';
+export * from './components/alert/parts/AlertContent.js';
+export * from './components/alert/parts/AlertTitle.js';
+export * from './components/anchor/Anchor.js';
+export * from './components/app-layout/AppLayout.js';
+export * from './components/avatar/Avatar.js';
+export * from './components/avatar/parts/AvatarFallback.js';
+export * from './components/avatar/parts/AvatarImage.js';
+export * from './components/avatar/parts/AvatarPair.js';
+export * from './components/badge/Badge.js';
+export * from './components/breadcrumbs/Breadcrumbs.js';
+export * from './components/breadcrumbs/parts/Breadcrumb.js';
+export * from './components/button/Button.js';
+export * from './components/dialog/Dialog.js';
+export * from './components/dialog/parts/DialogActions.js';
+export * from './components/dialog/parts/DialogContent.js';
+export * from './components/dialog/parts/DialogTitle.js';
+export * from './components/flex/Flex.js';
+export * from './components/flex/Flex.variants.js';
+export * from './components/flex/FlexItem.js';
+export * from './components/form/Form.js';
+export * from './components/grid/Grid.js';
+export * from './components/grid/Grid.variants.js';
+export * from './components/grid/GridItem.js';
+export * from './components/icon/Icon.js';
+export * from './components/icon-button/IconButton.js';
+export * from './components/link/Link.js';
+export * from './components/menu/Menu.js';
+export * from './components/menu/parts/MenuContent.js';
+export * from './components/menu/parts/MenuHeader.js';
+export * from './components/menu/parts/MenuItem.js';
+export * from './components/menu/parts/MenuSeparator.js';
+export * from './components/menu/parts/MenuTrigger.js';
+export * from './components/nav/Nav.js';
+export * from './components/nav/parts/NavGroup.js';
+export * from './components/nav/parts/NavItem.js';
+export * from './components/payfit-brand/PayFitBrand.js';
+export * from './components/payfit-brand/PayFitPreprod.js';
+export * from './components/pill/Pill.js';
+export * from './components/progress-bar/ProgressBar.js';
+export * from './components/spinner/Spinner.js';
+export * from './components/tabs/Tabs.js';
+export * from './components/tabs/parts/Tab.js';
+export * from './components/tabs/parts/TabList.js';
+export * from './components/tabs/parts/TabPanel.js';
+export * from './components/text/Text.js';
+export * from './components/text/Text.variants.js';
+export * from './components/toast/toast.js';
+export * from './components/toast/ToastManager.js';
+export * from './hooks/use-breakpoint-listener.js';
+export * from './hooks/use-media-query.js';
+export * from './providers/router/RouterProvider.js';
+export * from './providers/router/integrations/UnityReactRouterV5Provider.js';

package/dist/cjs/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./components/actionable/Actionable.js"),s=require("./components/alert/Alert.js"),c=require("./components/alert/parts/AlertActions.js"),l=require("./components/alert/parts/AlertContent.js"),q=require("./components/alert/parts/AlertTitle.js"),d=require("./components/anchor/Anchor.js"),g=require("./components/app-layout/AppLayout.js"),A=require("./components/avatar/Avatar.js"),m=require("./components/avatar/parts/AvatarFallback.js"),T=require("./components/avatar/parts/AvatarImage.js"),v=require("./components/avatar/parts/AvatarPair.js"),I=require("./components/badge/Badge.js"),P=require("./components/breadcrumbs/Breadcrumbs.js"),b=require("./components/breadcrumbs/parts/Breadcrumb.js"),B=require("./components/button/Button.js"),M=require("./components/dialog/Dialog.js"),p=require("./components/dialog/parts/DialogActions.js"),F=require("./components/dialog/parts/DialogContent.js"),y=require("./components/dialog/parts/DialogTitle.js"),e=require("./components/flex/Flex.js"),r=require("./components/flex/Flex.variants.js"),t=require("./components/flex/FlexItem.js"),x=require("./components/form/Form.js"),D=require("./components/grid/Grid.js"),n=require("./components/grid/Grid.variants.js"),S=require("./components/grid/GridItem.js"),k=require("./components/icon/Icon.js"),C=require("./components/icon-button/IconButton.js"),G=require("./components/link/Link.js"),L=require("./components/menu/Menu.js"),N=require("./components/menu/parts/MenuContent.js"),R=require("./components/menu/parts/MenuHeader.js"),f=require("./components/menu/parts/MenuItem.js"),O=require("./components/menu/parts/MenuSeparator.js"),_=require("./components/menu/parts/MenuTrigger.js"),h=require("./components/nav/Nav.js"),H=require("./components/nav/parts/NavGroup.js"),a=require("./components/nav/parts/NavItem.js"),Q=require("./components/payfit-brand/PayFitBrand.js"),U=require("./components/payfit-brand/PayFitPreprod.js"),V=require("./components/pill/Pill.js"),j=require("./components/progress-bar/ProgressBar.js"),w=require("./components/spinner/Spinner.js"),z=require("./components/tabs/Tabs.js"),E=require("./components/tabs/parts/Tab.js"),J=require("./components/tabs/parts/TabList.js"),K=require("./components/tabs/parts/TabPanel.js"),W=require("./components/text/Text.js"),X=require("./components/text/Text.variants.js"),Y=require("./components/toast/toast.js"),o=require("./components/toast/ToastManager.js"),Z=require("./hooks/use-breakpoint-listener.js"),$=require("./hooks/use-media-query.js"),i=require("./providers/router/RouterProvider.js"),ee=require("./providers/router/integrations/UnityReactRouterV5Provider.js"),re=require("react-aria-components");exports.Actionable=u.Actionable;exports.Alert=s.Alert;exports.AlertActions=c.AlertActions;exports.AlertContent=l.AlertContent;exports.AlertTitle=q.AlertTitle;exports.Anchor=d.Anchor;exports.AppLayout=g.AppLayout;exports.Avatar=A.Avatar;exports.AvatarFallback=m.AvatarFallback;exports.AvatarImage=T.AvatarImage;exports.AvatarPair=v.AvatarPair;exports.Badge=I.Badge;exports.Breadcrumbs=P.Breadcrumbs;exports.Breadcrumb=b.Breadcrumb;exports.Button=B.Button;exports.Dialog=M.Dialog;exports.DialogActions=p.DialogActions;exports.DialogContent=F.DialogContent;exports.DialogTitle=y.DialogTitle;exports.Flex=e.Flex;exports.Stack=e.Stack;exports.flex=r.flex;exports.flexItem=r.flexItem;exports.FlexItem=t.FlexItem;exports.StackItem=t.StackItem;exports.Form=x.Form;exports.Grid=D.Grid;exports.grid=n.grid;exports.gridItem=n.gridItem;exports.GridItem=S.GridItem;exports.Icon=k.Icon;exports.IconButton=C.IconButton;exports.Link=G.Link;exports.Menu=L.Menu;exports.MenuContent=N.MenuContent;exports.MenuHeader=R.MenuHeader;exports.MenuItem=f.MenuItem;exports.MenuSeparator=O.MenuSeparator;exports.MenuTrigger=_.MenuTrigger;exports.Nav=h.Nav;exports.NavGroup=H.NavGroup;exports.NavItem=a.NavItem;exports.navItemBase=a.navItemBase;exports.PayFitBrand=Q.PayFitBrand;exports.PayFitBrandPreprod=U.PayFitBrandPreprod;exports.Pill=V.Pill;exports.ProgressBar=j.ProgressBar;exports.Spinner=w.Spinner;exports.Tabs=z.Tabs;exports.Tab=E.Tab;exports.TabList=J.TabList;exports.TabPanel=K.TabPanel;exports.Text=W.Text;exports.text=X.text;exports.toast=Y.toast;exports.TOAST_CONFIG=o.TOAST_CONFIG;exports.ToastManager=o.ToastManager;exports.useBreakpointListener=Z.useBreakpointListener;exports.useMediaQuery=$.useMediaQuery;exports.RouterProvider=i.RouterProvider;exports.useRouter=i.useRouter;exports.UnityReactRouterV5Provider=ee.UnityReactRouterV5Provider;Object.defineProperty(exports,"DialogTrigger",{enumerable:!0,get:()=>re.DialogTrigger});

package/dist/cjs/providers/router/RouterProvider.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps } from 'react';
+import { RouterProvider as AriaRouterProvider } from 'react-aria-components';
+export interface ExtendedRouterContextValue {
+    /**
+     * Function to determine if a route is active
+     */
+    isActive: (to: string) => boolean;
+}
+/**
+ * Hook to access the extended ARIA router context. For internal use in Unity only.
+ */
+export declare const useRouter: () => ExtendedRouterContextValue | null;
+type AriaRouterProviderProps = ComponentProps<typeof AriaRouterProvider>;
+export interface RouterProviderProps extends ComponentProps<typeof AriaRouterProvider> {
+    /**
+     * function received from a client-side routing library to perform a client-side navigation programmatically
+     */
+    navigate: AriaRouterProviderProps['navigate'];
+    /**
+     * Optional function to convert a router-specific href to a native HTML href, e.g. prepending a base path
+     */
+    useHref?: AriaRouterProviderProps['useHref'];
+    /**
+     * Function to determine if a route is active
+     */
+    isActive: (to: string) => boolean;
+}
+/**
+ * The `RouterProvider` component is a provider that allows for integrations between Unity components that render links (such as `Link`, `NavItem`, etc.) and any client-side routing library in a single or multi-page application.
+ *
+ * By default, links perform native browser navigation when they are interacted with. However, many apps and frameworks use client side routers to avoid a full page reload when navigating between pages. The `RouterProvider` component configures all Unity components that support it to navigate using the client side router you provide. Set this up once in the root of your app, and any component with the href prop will automatically navigate using your router.
+ */
+export declare function RouterProvider({ isActive, children, ...routerProps }: RouterProviderProps): JSX.Element;
+export declare namespace RouterProvider {
+    var displayName: string;
+}
+export {};

package/dist/cjs/providers/router/integrations/UnityReactRouterV5Provider.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Provider that integrates Unity's RouterProvider with React Router v5.
+ * Handles navigation and active state detection automatically.
+ */
+export declare function UnityReactRouterV5Provider({ children, }: PropsWithChildren<unknown>): JSX.Element;

package/dist/cjs/providers/router/integrations/UnityReactRouterV5Provider.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),h=require("history"),r=require("react-router-dom"),l=require("../RouterProvider.js"),d=(e,o)=>h.createLocation(e,null,void 0,o);function p({children:e}){const o=r.useHistory(),n=r.useLocation(),a=t=>{const c=d(t,n),{pathname:s}=c,i=s.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1");return i?!!r.matchPath(n.pathname,{path:i,exact:t==="/"}):!1};return u.jsx(l.RouterProvider,{navigate:t=>{o.push(t.toString())},isActive:a,children:e})}exports.UnityReactRouterV5Provider=p;

package/dist/esm/components/actionable/Actionable.d.mts

@@ -0,0 +1,11 @@
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+/**
+ * The Actionable primitive is a component that helps you build interactive surfaces of any kind.
+ */
+declare const Actionable: import('react').ForwardRefExoticComponent<Omit<AriaButtonProps, "style" | "slot"> & {
+    /** Additional class names to apply to the actionable */
+    className?: string;
+    /** set to true to remove the Actionable's base styles */
+    isUnstyled?: boolean;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { Actionable };

package/dist/esm/components/alert/Alert.d.mts

@@ -0,0 +1,155 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const alert: import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}>, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type BaseAlertProps = PropsWithChildren<{
+    /**
+     * The alert's variant, which determines its visual style.
+     */
+    variant: NonNullable<VariantProps<typeof alert>['variant']>;
+}>;
+type DismissableConfig = {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable?: false;
+    onDismiss?: never;
+    dismissButtonLabel?: never;
+} | {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable: true;
+    /**
+     * Callback function to handle the alert's dismissal behavior.
+     */
+    onDismiss: () => void;
+    /**
+     * Label for the close button.
+     */
+    dismissButtonLabel: string;
+};
+export type AlertProps = BaseAlertProps & DismissableConfig;
+/**
+ * Alerts display brief messages for the user without interrupting their use of the app. They can provide feedback, confirmations, warnings, or errors.
+ */
+declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Alert };

package/dist/esm/components/alert/Alert.mjs

@@ -0,0 +1,68 @@
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { tv as g } from "tailwind-variants";
+import { CircularIconButton as m } from "../icon-button/CircularIconButton.mjs";
+import { Icon as p } from "../icon/Icon.mjs";
+const w = g({
+  slots: {
+    base: "uy-p-200 uy-flex uy-gap-200 uy-border uy-rounded-100",
+    content: "uy-flex uy-flex-col uy-flex-1 uy-gap-200 uy-pt-50 uy-pb-100",
+    icon: "uy-mt-50"
+  },
+  variants: {
+    variant: {
+      info: {
+        base: "uy-bg-surface-info-lowest uy-border-border-info-lowest"
+      },
+      warning: {
+        base: "uy-bg-surface-warning-lowest uy-border-border-warning-lowest"
+      },
+      success: {
+        base: "uy-bg-surface-success-lowest uy-border-border-success-lowest"
+      },
+      danger: {
+        base: "uy-bg-surface-danger-lowest uy-border-border-danger-lowest"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+}), x = {
+  info: { src: "InfoFilled", color: "content.info" },
+  warning: { src: "WarningFilled", color: "content.warning" },
+  success: { src: "CheckCircleFilled", color: "content.success" },
+  danger: { src: "WarningCircleFilled", color: "content.danger" }
+}, v = b(
+  ({
+    children: o,
+    variant: e,
+    isDismissable: s,
+    onDismiss: n,
+    dismissButtonLabel: t,
+    ...a
+  }, c) => {
+    const { base: l, content: i, icon: u } = w({ variant: e }), d = x[e], f = {
+      role: e === "danger" ? "alert" : "status",
+      "aria-live": e === "danger" ? "assertive" : "polite",
+      "aria-atomic": !0,
+      "aria-relevant": "additions removals"
+    };
+    return /* @__PURE__ */ y("div", { ref: c, className: l(), ...f, ...a, children: [
+      /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(p, { size: 24, ...d, alt: `${e} alert` }) }),
+      /* @__PURE__ */ r("section", { className: i(), children: o }),
+      s && /* @__PURE__ */ r(
+        m,
+        {
+          title: t,
+          icon: "CloseOutlined",
+          onPress: n
+        }
+      )
+    ] });
+  }
+);
+v.displayName = "Alert";
+export {
+  v as Alert
+};

package/dist/esm/components/alert/parts/AlertActions.d.mts

@@ -0,0 +1,55 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const alertActions: import('tailwind-variants').TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config').TVConfig<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}>, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config').TVConfig<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type AlertActionsProps = PropsWithChildren<{
+    /**
+     * The direction in which to lay out the child actions.
+     * @default 'column'
+     */
+    direction?: VariantProps<typeof alertActions>['direction'];
+}>;
+declare const AlertActions: import('react').ForwardRefExoticComponent<{
+    /**
+     * The direction in which to lay out the child actions.
+     * @default 'column'
+     */
+    direction?: VariantProps<typeof alertActions>["direction"];
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertActions };