@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/table/parts/TableHeader.d.cts

@@ -0,0 +1,29 @@
+import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const tableHeader: 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 type TableHeaderProps = PropsWithChildren<VariantProps<typeof tableHeader>>;
+/**
+ * The `TableHeader` component renders the header section of a table, containing column headers.
+ * It automatically processes its children to add row indices and applies appropriate styling.
+ * @param {TableHeaderProps} props - The props for the `TableHeader` component
+ * @param {ReactNode} props.children - The column headers to render (typically TableColumnHeader components)
+ * @example
+ * ```tsx
+ * import { TableHeader, TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableHeader>
+ *   <TableColumnHeader>Name</TableColumnHeader>
+ *   <TableColumnHeader>Email</TableColumnHeader>
+ *   <TableColumnHeader>Department</TableColumnHeader>
+ * </TableHeader>
+ * ```
+ * @see {@link TableHeaderProps} for all available props
+ * @see {@link TableColumnHeader} for the column header component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tableheader--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<VariantProps<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>>> & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableHeader };

package/dist/cjs/components/table/parts/TablePagination.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),q=require("react-aria"),I=require("react-intl"),O=require("tailwind-variants"),R=require("../../pagination/Pagination.cjs"),T=require("../../select/parts/SelectOption.cjs"),L=require("../../select/Select.cjs"),m=O.tv({base:["uy-bg-surface-neutral-low","uy-sticky uy-bottom-0","uy-grid uy-grid-cols-3 uy-items-center","uy-ps-200 uy-py-100 uy-pe-100"]}),A=[{value:"10",label:"10"},{value:"50",label:"50"},{value:"100",label:"100"},{value:"200",label:"200"}],f=y.forwardRef((P,h)=>{const{pageCount:t,rowCount:l,currentPage:u,rowsPerPage:n=10,defaultPage:c,pageSizeOptions:j=A,defaultPageSize:x=n,onPageChange:v,onNextPress:S,onPreviousPress:N,onPageSizeChange:o,itemLabel:g="unity:component:table:pagination:item",...w}=P,a=q.useId(),s=I.useIntl(),[M,$]=y.useState(x),z={pageCount:t,defaultPage:c,currentPage:u,onPageChange:v,onNextPress:S,onPreviousPress:N},r=Math.max(((u??c??1)-1)*n+1,1),d=Math.min(r+n-1,l),p={singular:s.formatMessage({id:g,defaultMessage:"items"},{count:1}),plural:s.formatMessage({id:g,defaultMessage:"items"},{count:2})};return e.jsxs("div",{"data-dd-privacy":"allow",...w,ref:h,className:m(),"data-unity-slot":"table-pagination",children:[e.jsx("div",{className:"uy-justify-self-start",children:e.jsx("span",{id:`table-pagination-${a}-label`,className:"uy-typography-body uy-text-content-neutral",children:s.formatMessage({id:"unity:component:table:pagination:label",defaultMessage:`${r}-${d} out of ${l*t} items`},{pageCount:t,startRow:r,endRow:d,totalRows:l*t,itemLabel:p.plural})})}),e.jsx("div",{className:"uy-justify-self-center",children:t>1&&e.jsx(R.Pagination,{...z,"aria-labelledby":`table-pagination-${a}-label`})}),e.jsx("div",{className:"uy-justify-self-end",children:e.jsxs("form",{className:"uy-flex uy-gap-100 uy-items-center",children:[e.jsx("label",{className:"uy-shrink-0",id:`table-pagination-${a}-pagesize-label`,htmlFor:`table-pagination-${a}-pagesize-select`,children:s.formatMessage({id:"unity:component:table:pagination:page-size-control-label",defaultMessage:"Items per page"},{itemLabel:p.plural})}),e.jsx("div",{className:"uy-grow-0 uy-w-1000",children:e.jsx(L.Select,{id:`table-pagination-${a}-pagesize-select`,items:j,placeholder:"",value:`${M}`,onChange:i=>{const b=parseInt(i,10);o==null||o(b),$(b)},"aria-labelledby":`table-pagination-${a}-pagesize-label`,children:i=>e.jsx(T.SelectOption,{id:i.value,children:i.label})})})]})})]})});f.displayName="TablePagination";exports.TablePagination=f;exports.tablePagination=m;

package/dist/cjs/components/table/parts/TablePagination.d.cts

@@ -0,0 +1,135 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { PaginationProps } from '../../pagination/Pagination.cjs';
+export declare const tablePagination: 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>>;
+type PageSizeOption = {
+    value: string;
+    label: string;
+};
+export interface TablePaginationProps extends PropsWithChildren<VariantProps<typeof tablePagination>> {
+    /**
+     * The total number of pages to display
+     */
+    pageCount: number;
+    /**
+     * Represents the total number of rows that are available or being counted.
+     * This variable typically holds a numeric value to indicate the total count of rows
+     * relevant for a specific process, dataset, or operation.
+     */
+    rowCount: number;
+    /**
+     * The number of rows per page
+     */
+    rowsPerPage: number;
+    /**
+     * Represents the current page being viewed or processed in a paginated dataset.
+     * This variable may be optional depending on the application logic and usage context,
+     * and can hold either a numeric value indicating the current page or remain undefined
+     * if not explicitly set.
+     */
+    currentPage?: number;
+    /**
+     * The initial page to display when in uncontrolled mode
+     */
+    defaultPage?: number;
+    /**
+     * Represents the default number of items to display per page in a paginated view.
+     * The value is expected to correspond to one of the selectable options available via `PageSizeOption`.
+     * This property is optional and can be left undefined, in which case a default behavior may apply.
+     */
+    defaultPageSize?: PageSizeOption['value'];
+    /**
+     * A callback function that is triggered when a page is hovered over in the pagination component.
+     *
+     * This function is intended for handling hover events on individual pagination controls or elements.
+     * It is derived from the `onPageHover` property in the `Pagination` component.
+     */
+    onPageHover?: PaginationProps['onPageHover'];
+    /**
+     * Callback fired when the page changes
+     * @param page - The new page number
+     * @param previous - The previous page number
+     * @param direction - The direction of navigation (1 for forward, -1 for backward)
+     */
+    onPageChange?: PaginationProps['onPageChange'];
+    /**
+     * Optional callback for next button press
+     */
+    onNextPress?: PaginationProps['onNextPress'];
+    /**
+     * Optional callback for previous button press
+     */
+    onPreviousPress?: PaginationProps['onPreviousPress'];
+    /**
+     * The options for the number of rows per page selection dropdown.
+     * If not provided, the default options will be used.
+     * @default [
+     *   { value: '10', label: '10' },
+     *   { value: '50', label: '50' },
+     *   { value: '100', label: '100' },
+     *   { value: '200', label: '200' },
+     * ]
+     */
+    pageSizeOptions?: PageSizeOption[];
+    /**
+     * Callback fired when the number of rows per page changes
+     * @param pageSize - The new number of rows per page
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * The label name that each row in the table represents
+     * @default 'unity:component:table:pagination:item'
+     */
+    itemLabel?: string;
+}
+/**
+ * The `TablePagination` component provides pagination controls for tables with large datasets.
+ * It displays the current range of items being shown, pagination controls, and a dropdown to change the number of rows per page.
+ * @note This is a **stateless** component, meaning that it does not manage its own state, and you have to provide the necessary callbacks to handle page changes and row count changes.
+ * @param {TablePaginationProps} props - The props for the `TablePagination` component
+ * @param {number} props.pageCount - The total number of pages
+ * @param {number} props.rowCount - The total number of rows in the dataset
+ * @param {number} props.rowsPerPage - The number of rows per page
+ * @param {number} [props.currentPage] - The current page (for controlled pagination)
+ * @param {number} [props.defaultPage] - The initial page (for uncontrolled pagination)
+ * @param {PageSizeOption[]} [props.pageSizeOptions] - Options for the number of rows per page dropdown
+ * @param {string} [props.defaultPageSize] - The default number of rows per page
+ * @param {Function} [props.onPageChange] - Callback when the page changes
+ * @param {Function} [props.onPageSizeChange] - Callback when the number of rows per page changes
+ * @param {string} [props.itemLabel] - Label for the items being paginated
+ * @example
+ * ```tsx
+ * import { TablePagination } from '@payfit/unity-components'
+ *
+ * <TablePagination
+ *   pageCount={10}
+ *   rowCount={100}
+ *   rowsPerPage={10}
+ *   currentPage={1}
+ *   onPageChange={(page) => console.log(`Page changed to ${page}`)}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * // With custom page size options
+ * import { TablePagination } from '@payfit/unity-components'
+ *
+ * <TablePagination
+ *   pageCount={5}
+ *   rowCount={50}
+ *   rowsPerPage={10}
+ *   pageSizeOptions={[
+ *     { value: '5', label: '5' },
+ *     { value: '10', label: '10' },
+ *     { value: '25', label: '25' },
+ *   ]}
+ *   onPageSizeChange={(size) => console.log(`Page size changed to ${size}`)}
+ * />
+ * ```
+ * @see {@link TablePaginationProps} for all available props
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tableheader--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TablePagination: import('react').ForwardRefExoticComponent<TablePaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TablePagination };

package/dist/cjs/components/table/parts/TableRow.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),t=require("react"),f=require("tailwind-variants"),y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=y(t),l=f.tv({base:["uy-group uy-h-500","uy-bg-surface-neutral uy-border-b uy-border-solid uy-border-b-border-neutral-enabled","uy-transition-colors uy-duration-200 uy-ease-in-out","hover:uy-border-b-border-neutral-hover hover:uy-bg-surface-neutral-low-hover","aria-[selected=true]:uy-bg-surface-neutral-selected aria-[selected=true]:uy-border-b-border-neutral-selected","focus-visible:uy-outline-2 focus-visible:-uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"]}),s=t.forwardRef(({children:e,rowIndex:u=0,onKeyDown:a,isSelected:o,...i},n)=>{const d=t.Children.map(e,(r,b)=>p.default.isValidElement(r)?t.cloneElement(r,{rowIndex:u,colIndex:b,...r.props}):r);return c.jsx("tr",{ref:n,role:"row",className:l(),"aria-rowindex":u+1,"aria-selected":o,onKeyDown:r=>{a==null||a(r)},"data-dd-privacy":"mask","data-selectable":o!==void 0,...i,children:d})});s.displayName="TableRow";exports.TableRow=s;exports.tableRow=l;

package/dist/cjs/components/table/parts/TableRow.d.cts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    rowIndex?: number;
+    isSelected?: boolean;
+}
+export declare const tableRow: 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>>;
+/**
+ * The `TableRow` component renders a row in the table, containing cells of data.
+ * It automatically processes its children to add row and column indices and handles selection state.
+ * @param {TableRowProps} props - The props for the `TableRow` component
+ * @param {ReactNode} props.children - The cells to render (typically TableCell components)
+ * @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableBody)
+ * @param {boolean} [props.isSelected] - Whether the row is selected
+ * @example
+ * ```tsx
+ * import { TableRow, TableCell } from '@payfit/unity-components'
+ *
+ * <TableRow>
+ *   <TableCell isRowHeader>John Doe</TableCell>
+ *   <TableCell>john.doe@example.com</TableCell>
+ *   <TableCell>Engineering</TableCell>
+ * </TableRow>
+ * ```
+ * @example
+ * ```tsx
+ * // With selection
+ * import { TableRow, TableCell } from '@payfit/unity-components'
+ *
+ * <TableRow isSelected={true}>
+ *   <TableCell>Selected row content</TableCell>
+ * </TableRow>
+ * ```
+ * @see {@link TableRowProps} for all available props
+ * @see {@link TableCell} for the cell component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tablerow--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export { TableRow };

package/dist/cjs/components/tabs/Tabs.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("react"),b=require("react-aria-components"),u=require("./Tabs.context.cjs"),d=require("./Tabs.variant.cjs"),r=c.forwardRef(({children:t,variant:e,scrollable:a=!1,...n},o)=>{const{base:i}=d.tabsVariant({variant:e,scrollable:a});return s.jsx(u.TabsProvider,{variant:e,scrollable:a,children:s.jsx(b.Tabs,{"data-dd-privacy":"allow",ref:o,className:i(),...n,children:t})})});r.displayName="Tabs";exports.Tabs=r;

package/dist/cjs/components/tabs/Tabs.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),t=r.createContext({variant:"primary",scrollable:!1});function a({children:e,variant:n,scrollable:o}){return s.jsx(t.Provider,{value:{variant:n,scrollable:o},children:e})}function i(){const e=r.useContext(t);if(!e)throw new Error("useTabsContext must be used within an TabsProvider");return e}exports.TabsContext=t;exports.TabsProvider=a;exports.useTabsContext=i;

package/dist/cjs/components/tabs/Tabs.context.d.cts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { tabsVariant } from './Tabs.variant.cjs';
+interface TabsContextValue {
+    variant: VariantProps<typeof tabsVariant>['variant'];
+    scrollable: boolean;
+}
+export declare const TabsContext: import('react').Context<TabsContextValue>;
+export declare function TabsProvider({ children, variant, scrollable, }: PropsWithChildren<TabsContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useTabsContext(): TabsContextValue;
+export {};

package/dist/cjs/components/tabs/Tabs.d.cts

@@ -0,0 +1,12 @@
+import { TabsProps as AriaTabsProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { tabsVariant } from './Tabs.variant.cjs';
+export interface TabsProps extends Omit<AriaTabsProps, 'isDisabled' | 'orientation' | 'className' | 'style' | 'disabledKeys' | 'keyboardActivation' | 'slot'>, VariantProps<typeof tabsVariant> {
+    /** set to true to make the tabs scrollable */
+    scrollable?: boolean;
+}
+/**
+ * Tabs allow users to explore and switch between different views.
+ */
+declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Tabs };

package/dist/cjs/components/tabs/Tabs.variant.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),t=e.tv({slots:{base:"uy-w-full",tabList:"uy-flex",tab:["uy-flex uy-relative uy-shrink-0 uy-gap-100 uy-whitespace-nowrap uy-min-w-[3ch] uy-text-center uy-text-content-form-enabled uy-text-action uy-pt-150 uy-pb-150 uy-pl-200 uy-pr-200 uy-rounded-25 uy-cursor-pointer",'data-[selected]:after:uy-content:" " data-[selected]:after:uy-w-full data-[selected]:after:uy-h-[4px] data-[selected]:after:uy-absolute data-[selected]:after:uy-bottom-[-1px] data-[selected]:after:uy-left-0 data-[selected]:after:uy-right-0',"hover:uy-cursor-pointer focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[4px]"]},variants:{variant:{primary:{tab:"data-[selected]:after:uy-bg-border-form-active"},neutral:{tab:"data-[selected]:after:uy-bg-content-neutral"}},scrollable:{true:{tabList:""},false:{base:"",tabList:"uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled"}}},defaultVariants:{variant:"primary",scrollable:!1}});exports.tabsVariant=t;

package/dist/cjs/components/tabs/Tabs.variant.d.cts

@@ -0,0 +1,139 @@
+export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}>, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/cjs/components/tabs/parts/NavigationButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react-aria-components"),s=require("tailwind-variants"),a=require("../../icon/Icon.cjs"),l=s.tv({slots:{base:"uy-absolute uy-pt-150 uy-pb-150",button:"uy-rounded-circle hover:uy-text-content-neutral-hover focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",icon:"uy-text-content-neutral-enabled"},variants:{direction:{left:{base:"uy-top-0 uy-left-0 uy-z-10 uy-bg-gradient-to-r uy-from-surface-inverted/0 uy-from-surface-inverted/100 uy-pl-50 uy-pr-200"},right:{base:"uy-right-0 uy-top-0 uy-z-10 uy-bg-gradient-to-l uy-from-surface-inverted/100 uy-from-surface-inverted/0 uy-pl-200 uy-pr-50"}}}}),c=({direction:t,onPress:u})=>{const{base:r,button:n,icon:o}=l({direction:t});return e.jsx("div",{className:r(),children:e.jsx(i.Button,{id:`scroll-${t}`,className:n(),"aria-label":`Scroll ${t}`,onPress:u,children:e.jsx(a.Icon,{className:o(),"aria-labelledby":`scroll-${t}`,src:t==="left"?"CaretLeftOutlined":"CaretRightOutlined"})})})};exports.NavigationButton=c;

package/dist/cjs/components/tabs/parts/NavigationButton.d.cts

@@ -0,0 +1,7 @@
+import { ButtonProps } from 'react-aria-components';
+type Direction = 'left' | 'right';
+interface NavigationButtonProps extends Pick<ButtonProps, 'onPress'> {
+    direction: Direction;
+}
+declare const NavigationButton: ({ direction, onPress }: NavigationButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { NavigationButton };

package/dist/cjs/components/tabs/parts/Tab.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),l=require("react-aria-components"),u=require("../Tabs.context.cjs"),T=require("../Tabs.variant.cjs"),a=b.forwardRef(({children:r,suffix:e,...s},n)=>{const{variant:o,scrollable:c}=u.useTabsContext(),{tab:i}=T.tabsVariant({variant:o,scrollable:c});return t.jsxs(l.Tab,{ref:n,...s,className:i(),children:[r,e?t.jsx("span",{children:e}):null]})});a.displayName="Tab";exports.Tab=a;

package/dist/cjs/components/tabs/parts/Tab.d.cts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { TabProps as AriaTabProps } from 'react-aria-components';
+export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className' | 'style' | 'download' | 'ping' | 'routerOptions'> {
+    suffix?: ReactNode;
+}
+declare const Tab: import('react').ForwardRefExoticComponent<TabProps & {
+    children?: ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { Tab };

package/dist/cjs/components/tabs/parts/TabList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("react"),g=require("react-aria-components"),N=require("../Tabs.context.cjs"),W=require("../Tabs.variant.cjs"),L=require("./NavigationButton.cjs"),y=l.forwardRef(({children:f},b)=>{const e=l.useRef(null),[v,m]=l.useState(!1),[S,x]=l.useState(!0),{variant:R,scrollable:d}=N.useTabsContext(),{tabList:h}=W.tabsVariant({variant:R,scrollable:d}),T=t=>{const{scrollLeft:o,scrollWidth:s,clientWidth:r}=t.currentTarget;m(o>0),x(o+r<s)},j=()=>{var r;const t=(r=e.current)==null?void 0:r.querySelectorAll("div[role=tab]");if(!e.current||!t)return 0;const{scrollLeft:o}=e.current,s=Array.from(t);for(let a=s.length-1;a>=0;a--){const c=s[a];if(c.offsetLeft<o)return-c.offsetWidth}return 0},q=()=>{var c;const t=(c=e.current)==null?void 0:c.querySelectorAll("div[role=tab]");if(!e.current||!t)return 0;const{scrollLeft:o,clientWidth:s}=e.current,r=Array.from(t),a=o+s;for(let i=0;i<r.length-1;i++){const u=r[i];if(u.offsetLeft+u.offsetWidth>a)return u.offsetWidth}return 0};return d?n.jsxs("div",{className:"uy-relative",children:[v&&n.jsx(L.NavigationButton,{direction:"left",onPress:()=>{var t;(t=e.current)==null||t.scrollBy({behavior:"smooth",left:j()})}}),n.jsx("div",{ref:e,"data-testid":"scrollable-tab-list",className:"uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled",onScroll:T,children:n.jsx(g.TabList,{ref:b,className:h(),children:f})}),S&&n.jsx(L.NavigationButton,{direction:"right",onPress:()=>{var t;(t=e.current)==null||t.scrollBy({behavior:"smooth",left:q()})}})]}):n.jsx(g.TabList,{ref:b,className:h(),children:f})});y.displayName="TabList";exports.TabList=y;

package/dist/cjs/components/tabs/parts/TabList.d.cts

@@ -0,0 +1,4 @@
+declare const TabList: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { TabList };

package/dist/cjs/components/tabs/parts/TabPanel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),s=require("react-aria-components"),e=o.forwardRef(({children:a,...r},t)=>n.jsx(s.TabPanel,{ref:t,...r,children:a}));e.displayName="TabPanel";exports.TabPanel=e;

package/dist/cjs/components/tabs/parts/TabPanel.d.cts

@@ -0,0 +1,4 @@
+import { TabPanelProps as AriaTabPanelProps } from 'react-aria-components';
+export type TabPanelProps = Omit<AriaTabPanelProps, 'classname' | 'style'>;
+declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TabPanel };

package/dist/cjs/components/text/Text.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),g=require("react"),u=require("./Text.variants.cjs"),b={inherit:"span",h1:"h1",h2:"h2",h3:"h3",h4:"h4",overline:"h6",subtitle:"h5",displayTitle:"h1",displayBody:"p",body:"p",bodyStrong:"strong",bodySmall:"small",bodySmallStrong:"strong",bodyLarge:"p",bodyLargeStrong:"strong",action:"span",actionLarge:"span",actionSmall:"span"},s=g.forwardRef(({children:o,variant:e,color:a,isTruncated:n,lineClamp:t,asElement:r,className:l,...i},c)=>{const d=t!==void 0,m=u.text({variant:e,color:a,isTruncated:n,isLineClamped:d,className:l}),y=b[e??"inherit"],p=r??y;return h.jsx(p,{"data-dd-privacy":"mask",...i,ref:c,className:m,style:{"--uy-text-line-clamp":t},children:o})});s.displayName="Text";exports.Text=s;

package/dist/cjs/components/text/Text.d.cts

@@ -0,0 +1,84 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { text } from './Text.variants.cjs';
+type ValidTextElements = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
+export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The HTML element to render the text as. Defaults to a recommended element based on the variant.
+     * @default 'span'
+     */
+    asElement?: ValidTextElements;
+    /**
+     * The language of the text content See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
+     */
+    lang?: HTMLSpanElement['lang'];
+    /**
+     * The typography variant to use.
+     * @default 'inherit'
+     */
+    variant?: VariantProps<typeof text>['variant'];
+    /**
+     * The text's color. This can be any token under the `content` colors namespace.
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof text>['color'];
+    /**
+     * Whether the text should be truncated to one line and have an ellipsis.
+     * @default false
+     */
+    isTruncated?: boolean;
+    /**
+     * The number of lines to clamp the text to.
+     * @default undefined
+     */
+    lineClamp?: number;
+    /**
+     * Additional class names to apply to the text.
+     * @default undefined
+     */
+    className?: string;
+}>;
+/**
+ * The `Text` component is used to render text with different variants and colors.
+ */
+declare const Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The HTML element to render the text as. Defaults to a recommended element based on the variant.
+     * @default 'span'
+     */
+    asElement?: ValidTextElements;
+    /**
+     * The language of the text content See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
+     */
+    lang?: HTMLSpanElement["lang"];
+    /**
+     * The typography variant to use.
+     * @default 'inherit'
+     */
+    variant?: VariantProps<typeof text>["variant"];
+    /**
+     * The text's color. This can be any token under the `content` colors namespace.
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof text>["color"];
+    /**
+     * Whether the text should be truncated to one line and have an ellipsis.
+     * @default false
+     */
+    isTruncated?: boolean;
+    /**
+     * The number of lines to clamp the text to.
+     * @default undefined
+     */
+    lineClamp?: number;
+    /**
+     * Additional class names to apply to the text.
+     * @default undefined
+     */
+    className?: string;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { Text };

package/dist/cjs/components/text/Text.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("tailwind-variants"),e=t.tv({base:"",variants:{variant:{inherit:"",h1:"uy-typography-h1",h2:"uy-typography-h2",h3:"uy-typography-h3",h4:"uy-typography-h4",overline:"uy-typography-overline",subtitle:"uy-typography-subtitle",displayTitle:"uy-typography-display-title",displayBody:"uy-typography-display-body",body:"uy-typography-body",bodyStrong:"uy-typography-body-strong",bodySmall:"uy-typography-body-small",bodySmallStrong:"uy-typography-body-small-strong",bodyLarge:"uy-typography-body-large",bodyLargeStrong:"uy-typography-body-large-strong",action:"uy-typography-action",actionLarge:"uy-typography-body-large",actionSmall:"uy-typography-body-small"},color:{inherit:"uy-text-inherit","content.primary":"uy-text-content-primary","content.primary.enabled":"uy-text-content-primary-enabled","content.primary.hover":"uy-text-content-primary-hover","content.primary.pressed":"uy-text-content-primary-pressed","content.primary.focus":"uy-text-content-primary-focus","content.primary.active":"uy-text-content-primary-active","content.primary.disabled":"uy-text-content-primary-disabled","content.neutral":"uy-text-content-neutral","content.neutral.enabled":"uy-text-content-neutral-enabled","content.neutral.hover":"uy-text-content-neutral-hover","content.neutral.pressed":"uy-text-content-neutral-pressed","content.neutral.focus":"uy-text-content-neutral-focus","content.neutral.active":"uy-text-content-neutral-active","content.neutral.disabled":"uy-text-content-neutral-disabled","content.neutral.low":"uy-text-content-neutral-low","content.neutral.lowest":"uy-text-content-neutral-lowest","content.neutral.lowest.enabled":"uy-text-content-neutral-lowest-enabled","content.neutral.lowest.hover":"uy-text-content-neutral-lowest-hover","content.neutral.lowest.pressed":"uy-text-content-neutral-lowest-pressed","content.neutral.lowest.focus":"uy-text-content-neutral-lowest-focus","content.neutral.lowest.active":"uy-text-content-neutral-lowest-active","content.neutral.lowest.disabled":"uy-text-content-neutral-lowest-disabled","content.danger":"uy-text-content-danger","content.danger.enabled":"uy-text-content-danger-enabled","content.danger.hover":"uy-text-content-danger-hover","content.danger.pressed":"uy-text-content-danger-pressed","content.danger.focus":"uy-text-content-danger-focus","content.danger.active":"uy-text-content-danger-active","content.danger.disabled":"uy-text-content-danger-disabled","content.warning":"uy-text-content-warning","content.warning.enabled":"uy-text-content-warning-enabled","content.warning.hover":"uy-text-content-warning-hover","content.warning.pressed":"uy-text-content-warning-pressed","content.warning.focus":"uy-text-content-warning-focus","content.warning.active":"uy-text-content-warning-active","content.warning.disabled":"uy-text-content-warning-disabled","content.success":"uy-text-content-success","content.success.enabled":"uy-text-content-success-enabled","content.success.hover":"uy-text-content-success-hover","content.success.pressed":"uy-text-content-success-pressed","content.success.focus":"uy-text-content-success-focus","content.success.active":"uy-text-content-success-active","content.success.disabled":"uy-text-content-success-disabled","content.info":"uy-text-content-info","content.info.enabled":"uy-text-content-info-enabled","content.info.hover":"uy-text-content-info-hover","content.info.pressed":"uy-text-content-info-pressed","content.info.focus":"uy-text-content-info-focus","content.info.active":"uy-text-content-info-active","content.info.disabled":"uy-text-content-info-disabled","content.promo":"uy-text-content-promo","content.form.enabled":"uy-text-content-form","content.form.hover":"uy-text-content-form-hover","content.form.pressed":"uy-text-content-form-pressed","content.form.focus":"uy-text-content-form-focus","content.form.active":"uy-text-content-form-active","content.form.disabled":"uy-text-content-form-disabled","content.form.read-only":"uy-text-content-form-read-only","content.form.invalid":"uy-text-content-form-invalid","content.inverted":"uy-text-content-inverted","content.inverted.enabled":"uy-text-content-inverted-enabled","content.inverted.hover":"uy-text-content-inverted-hover","content.inverted.pressed":"uy-text-content-inverted-pressed","content.inverted.focus":"uy-text-content-inverted-focus","content.inverted.active":"uy-text-content-inverted-active","content.inverted.disabled":"uy-text-content-inverted-disabled"},isTruncated:{true:"uy-block uy-truncate"},isLineClamped:{true:"uy-line-clamp-[var(--uy-text-line-clamp)]"}},defaultVariants:{variant:"body",isTruncated:!1}});exports.text=e;