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

package/dist/esm/components/data-table/DataTable.d.ts

@@ -1,94 +0,0 @@
-import { default as React } from 'react';
-import { Row, Table as TableType } from '@tanstack/react-table';
-import { TablePaginationProps } from '../table/parts/TablePagination.js';
-export interface DataTablePaginationLabels {
-    /** Label for the "rows per page" and pagination label dropdown */
-    itemLabel?: string;
-}
-export interface DataTablePaginationOptions {
-    /** Available options in the "rows per page" dropdown */
-    pageSizeOptions?: TablePaginationProps['pageSizeOptions'];
-    /** Custom labels for pagination */
-    labels?: DataTablePaginationLabels;
-}
-export interface DataTableProps<TData> {
-    /** The table instance from @tanstack/react-table */
-    table: TableType<TData>;
-    /** The minimum number of rows to display, affecting the minimum height */
-    minRows?: number;
-    /** The maximum number of rows to display, affecting the maximum height */
-    maxRows?: number;
-    /** Optional loading state */
-    isLoading?: boolean;
-    /** Optional error state */
-    error?: Error | null;
-    /** Custom empty state when there's no data */
-    emptyState?: React.ReactNode;
-    /** Custom loading state */
-    loadingState?: React.ReactNode;
-    /** Custom error state */
-    errorState?: React.ReactNode;
-    /** Pagination customization */
-    pagination?: DataTablePaginationOptions;
-    /** Render function for table rows */
-    children: (row: Row<TData>) => React.ReactNode;
-}
-/**
- * A powerful and flexible data table component that integrates Unity's Table with @tanstack/react-table
- *
- * The DataTable component provides a standardized way to display tabular data with built-in support for
- * pagination, sorting, filtering, and row selection. It handles common table patterns like loading states,
- * empty states, and consistent table heights.
- * @param props - The props for the `DataTable` component
- * @param props.table - The table instance from @tanstack/react-table
- * @param props.minRows - The minimum number of rows to display, affecting the minimum height
- * @param props.maxRows - The maximum number of rows to display, affecting the maximum height
- * @param props.isLoading - Custom loading state to show when isLoading is true
- * @param props.error - Custom error state
- * @param props.emptyState - Custom empty state to show when there's no data
- * @param props.loadingState - Custom loading state to show when `isLoading` is true
- * @param props.errorState - Custom error state to show when `error` is not null
- * @param props.pagination - Optional pagination customization, see {@link DataTablePaginationOptions}
- * @param props.children - Render function that takes care of rendering the table rows
- * @see {@link DataTableProps} for all available props
- * @example
- * ```tsx
- * import { DataTable, TableRow, TableCell } from '@payfit/unity-components'
- * import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'
- * import { useState } from 'react'
- *
- * function EmployeeTable() {
- *   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
- *
- *   const table = useReactTable({
- *     data: employees,
- *     columns: employeeColumns,
- *     state: { pagination },
- *     onPaginationChange: setPagination,
- *     getCoreRowModel: getCoreRowModel(),
- *     getPaginationRowModel: getPaginationRowModel(),
- *   })
- *
- *   return (
- *     <DataTable table={table} minRows={5} maxRows={10}>
- *       {row => (
- *         <TableRow key={row.id}>
- *           {row.getVisibleCells().map(cell => (
- *             <TableCell key={cell.id}>
- *               {flexRender(cell.column.columnDef.cell, cell.getContext())}
- *             </TableCell>
- *           ))}
- *         </TableRow>
- *       )}
- *     </DataTable>
- *   )
- * }
- * ```
- * @remarks
- * [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
- */
-declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, children, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
-declare namespace DataTable {
-    var displayName: string;
-}
-export { DataTable };

package/dist/esm/components/data-table/DataTable.js

@@ -1,77 +0,0 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useRef as w, useEffect as x } from "react";
-import { flexRender as g } from "@tanstack/react-table";
-import { TableBody as b } from "../table/parts/TableBody.js";
-import { TableColumnHeader as R } from "../table/parts/TableColumnHeader.js";
-import { TableEmptyStateLoading as D, TableEmptyStateError as E, TableEmptyStateNoData as y } from "../table/parts/TableEmptyState.js";
-import { TableHeader as z } from "../table/parts/TableHeader.js";
-import { TablePagination as H } from "../table/parts/TablePagination.js";
-import { TableRoot as M, Table as j } from "../table/Table.js";
-import { ColumnSortHeader as I } from "./parts/ColumnSortHeader.js";
-function N({
-  table: r,
-  isLoading: m,
-  error: l,
-  emptyState: a,
-  loadingState: i,
-  errorState: T,
-  pagination: n,
-  minRows: S,
-  maxRows: C,
-  children: P
-}) {
-  var p;
-  const u = w(null), { pageIndex: f, pageSize: c } = r.getState().pagination;
-  x(() => {
-    var t;
-    (t = u.current) == null || t.scrollToTop();
-  }, [f, c]);
-  const s = () => {
-    if (m)
-      return i ?? /* @__PURE__ */ e(D, {});
-    if (l)
-      return T ?? /* @__PURE__ */ e(E, {});
-  }, h = () => m || l ? s() : r.getRowModel().rows.length === 0 ? a ?? /* @__PURE__ */ e(y, {}) : a;
-  return /* @__PURE__ */ d(M, { minRows: S, maxRows: C, children: [
-    /* @__PURE__ */ d(j, { ref: u, children: [
-      /* @__PURE__ */ e(z, { children: r.getHeaderGroups().map(
-        (t) => t.headers.map((o) => /* @__PURE__ */ e(R, { children: o.column.getCanSort() ? /* @__PURE__ */ e(I, { header: o, children: /* @__PURE__ */ e("span", { children: g(
-          o.column.columnDef.header,
-          o.getContext()
-        ) }) }) : /* @__PURE__ */ e("span", { children: g(
-          o.column.columnDef.header,
-          o.getContext()
-        ) }) }, o.id))
-      ) }),
-      /* @__PURE__ */ e(
-        b,
-        {
-          renderEmptyState: h,
-          renderDataState: s,
-          children: !m && !l && r.getRowModel().rows.map(P)
-        }
-      )
-    ] }),
-    r.getPageCount() > 1 && /* @__PURE__ */ e(
-      H,
-      {
-        pageCount: r.getPageCount(),
-        rowCount: r.getPaginationRowModel().rows.length,
-        currentPage: f + 1,
-        rowsPerPage: c,
-        pageSizeOptions: n == null ? void 0 : n.pageSizeOptions,
-        onPageChange: (t) => {
-          r.setPageIndex(t - 1);
-        },
-        onPageSizeChange: (t) => {
-          r.setPageSize(t);
-        },
-        itemLabel: (p = n == null ? void 0 : n.labels) == null ? void 0 : p.itemLabel
-      }
-    )
-  ] });
-}
-N.displayName = "DataTable";
-export {
-  N as DataTable
-};

package/dist/esm/components/data-table/mocks/employee-columns.d.ts

@@ -1,3 +0,0 @@
-import { Employee } from './employee-data.js';
-export declare const employeeColumns: (import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>)[];
-export declare const employeeColumnsWithCheckbox: ((import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>) | import('@tanstack/table-core').DisplayColumnDef<Employee, unknown>)[];

package/dist/esm/components/data-table/mocks/employee-data.d.ts

@@ -1,17 +0,0 @@
-export type Employee = {
-    id: string;
-    name: string;
-    position: string;
-    avatarUrl: string;
-    team: string;
-    workingAgreement: 'Full-time' | 'Part-time' | 'Freelance' | 'Contractor';
-    startWorkingDate: string;
-    endWorkingDate: string;
-    status: 'active' | 'onboarding' | 'offboarding' | 'inactive' | 'retired';
-    manager: {
-        name: string;
-        position: string;
-        team: string;
-    } | null;
-};
-export declare const employees: Employee[];

package/dist/esm/components/data-table/parts/ColumnSortHeader.d.ts

@@ -1,10 +0,0 @@
-import { Header } from '@tanstack/react-table';
-import { ActionableProps } from '../../actionable/Actionable.js';
-export interface ColumnSortHeaderProps<TData, TValue> extends ActionableProps {
-    header: Header<TData, TValue>;
-}
-declare function ColumnSortHeader<TData, TValue>({ children, header, ...props }: ColumnSortHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-declare namespace ColumnSortHeader {
-    var displayName: string;
-}
-export { ColumnSortHeader };

package/dist/esm/components/data-table/parts/ColumnSortHeader.js

@@ -1,37 +0,0 @@
-import { jsx as r, jsxs as m, Fragment as s } from "react/jsx-runtime";
-import { Actionable as c } from "../../actionable/Actionable.js";
-import { Icon as i } from "../../icon/Icon.js";
-function u({
-  children: t,
-  header: o,
-  ...n
-}) {
-  return /* @__PURE__ */ r(
-    c,
-    {
-      ...n,
-      className: "uy-flex uy-items-center uy-gap-50",
-      onPress: () => {
-        o.column.getCanSort() && o.column.toggleSorting();
-      },
-      children: ({ isHovered: e }) => {
-        const l = o.column.getCanSort() && (o.column.getIsSorted() || e);
-        return /* @__PURE__ */ m(s, { children: [
-          t,
-          l && /* @__PURE__ */ r(
-            i,
-            {
-              src: o.column.getIsSorted() === "asc" ? "ArrowUpOutlined" : "ArrowDownOutlined",
-              role: "presentation",
-              size: 20
-            }
-          )
-        ] });
-      }
-    }
-  );
-}
-u.displayName = "ColumnSortHeader";
-export {
-  u as ColumnSortHeader
-};

package/dist/esm/components/date-picker/DatePicker.d.ts

@@ -1,67 +0,0 @@
-import { CalendarDate } from '@internationalized/date';
-import { DatePickerProps as AriaDatePickerProps } from 'react-aria-components';
-export interface DatePickerProps extends Pick<AriaDatePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek'> {
-    /** The currently selected date */
-    value?: CalendarDate;
-    /** The default selected date (uncontrolled) */
-    defaultValue?: CalendarDate;
-    /** The minimum allowed date */
-    minValue?: CalendarDate;
-    /** The maximum allowed date */
-    maxValue?: CalendarDate;
-    /** Callback fired when the date value changes */
-    onChange?: (value: CalendarDate | undefined) => void;
-    /** Callback fired when the clear button is clicked */
-    onClearButtonPress?: () => void;
-    /** Callback fired when the picker loses focus */
-    onBlur?: () => void;
-    /** Callback fired when the picker gains focus */
-    onFocus?: () => void;
-    /** Callback fired when the calendar overlay's open state changes */
-    onOpenChange?: (isOpen: boolean) => void;
-    /** Whether the picker is in an invalid state */
-    isInvalid?: boolean;
-    /** Whether the picker is in a loading state */
-    isLoading?: boolean;
-    /** Whether the picker is disabled */
-    isDisabled?: boolean;
-    /** Whether the picker is read-only */
-    isReadOnly?: boolean;
-    /** Function to determine if a date should be disabled */
-    isDateUnavailable?: (date: CalendarDate) => boolean;
-    /** Whether to force leading zeros for days and months */
-    shouldForceLeadingZeros?: boolean;
-    /** Whether to close the calendar after a date is selected */
-    shouldCloseOnSelect?: boolean;
-    /** Whether to open the calendar by default */
-    defaultOpen?: boolean;
-}
-/**
- * The DatePicker component allows users to select a date either by typing it in directly or choosing from a calendar overlay, providing a standardized way to handle date selection across the application.
- * @param {DatePickerProps} props - Props for configuring the DatePicker's behavior and appearance
- * @see {@link DatePickerProps} for all available props
- * @example
- * ```tsx
- * import { DatePicker } from '@payfit/unity-components'
- * import { parseDate } from '@internationalized/date'
- *
- * function Example() {
- *   const [selectedDate, setSelectedDate] = useState<CalendarDate>()
- *
- *   return (
- *     <DatePicker
- *       value={selectedDate}
- *       onChange={setSelectedDate}
- *       minValue={parseDate('2024-01-01')}  // Restrict dates before Jan 1, 2024
- *       isDateUnavailable={(date) => date.dayOfWeek === 0}  // Disable Sundays
- *     />
- *   )
- * }
- * ```
- * @remarks
- * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/inputs-datepicker--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/719ac2-date-picker)
- * @note
- * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
- */
-declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
-export { DatePicker };

package/dist/esm/components/date-picker/DatePicker.js

@@ -1,164 +0,0 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { forwardRef as W } from "react";
-import { DatePicker as I, Group as P, Button as U, Popover as j } from "react-aria-components";
-import { useIntl as E } from "react-intl";
-import { tv as c } from "tailwind-variants";
-import { Icon as M } from "../icon/Icon.js";
-import { DateCalendar as O } from "./parts/DateCalendar.js";
-import { DateInput as R } from "./parts/DateInput.js";
-const G = c({
-  slots: {
-    base: [
-      "uy-group uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100",
-      "active:uy-border-border-form-active data-[focus-visible]:uy-border-border-form-active"
-    ],
-    inputWrapper: [
-      "uy-flex uy-grow uy-rounded-75 uy-outline-none",
-      // Show focus styles when input wrapper is focused AND button is not focused
-      "focus-within:uy-outline-2 focus-within:uy-outline-utility-focus-ring focus-within:uy-outline-offset-2",
-      // Hide focus styles when button is focused
-      "group-[:has(button:focus)]:data-[focus-within]:uy-outline-none group-[:has(button:focus)]:data-[focus-within]:uy-outline-offset-0 group-[:has(button:focus)]:data-[focus-within]:uy-outline-transparent"
-    ],
-    suffix: [
-      "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100",
-      "hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-pressed active:uy-border-border-form-active data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-border-border-form-active",
-      "focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[3px]"
-    ]
-  },
-  variants: {
-    isInvalid: {
-      true: {
-        base: "uy-border-border-form-error uy-bg-surface-form-error",
-        suffix: "uy-bg-surface-form-error uy-border-border-form-error"
-      }
-    },
-    isReadOnly: {
-      true: {
-        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
-        inputWrapper: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
-        suffix: "uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"
-      }
-    },
-    isDisabled: {
-      true: {
-        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
-        inputWrapper: "uy-bg-surface-form-disabled uy-text-content-form-disabled",
-        suffix: "uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      isInvalid: !1,
-      isDisabled: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy-border-border-form-enabled uy-bg-surface-form-enabled",
-        suffix: "uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"
-      }
-    }
-  ]
-}), $ = c({
-  base: "uy-overflow-auto uy-shadow-floating uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-75",
-  variants: {
-    isEntering: {
-      true: "uy-animate-in uy-fade-in data-[placement-bottom]:uy-slide-in-from-top-1 data-[placement-top]:uy-slide-in-from-bottom-1 uy-duration-200 uy-ease-out"
-    },
-    isExiting: {
-      true: "uy-animate-out uy-fade-out data-[placement-bottom]:uy-slide-out-to-top-1 data-[placement-top]:uy-slide-out-to-bottom-1 uy-duration-150 uy-ease-in"
-    }
-  }
-}), q = W(
-  ({
-    value: l,
-    defaultValue: n,
-    isInvalid: b,
-    isLoading: p,
-    isDisabled: t,
-    isReadOnly: u,
-    onClearButtonPress: d,
-    onBlur: o,
-    onFocus: i,
-    onChange: s,
-    onOpenChange: f,
-    id: v,
-    ...e
-  }, z) => {
-    const g = E(), { base: x, inputWrapper: h, suffix: D } = G({
-      isInvalid: !!b,
-      isReadOnly: !!u,
-      isDisabled: !!t
-    }), y = (r) => {
-      s == null || s(r ?? void 0);
-    }, w = (r) => {
-      f == null || f(r), r ? i == null || i() : o == null || o();
-    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, V = () => {
-      d == null || d();
-    };
-    return /* @__PURE__ */ m(
-      I,
-      {
-        "data-dd-privacy": "mask",
-        ...e,
-        className: x(),
-        value: l,
-        defaultValue: n,
-        minValue: e.minValue,
-        maxValue: e.maxValue,
-        isReadOnly: !!u,
-        isDisabled: !!t,
-        onChange: y,
-        onFocus: i,
-        onBlur: o,
-        onOpenChange: w,
-        isDateUnavailable: k,
-        children: [
-          /* @__PURE__ */ m(P, { className: h(), id: v, children: [
-            /* @__PURE__ */ a(
-              R,
-              {
-                isLoading: p,
-                isDisabled: t,
-                isReadOnly: u,
-                isInvalid: b,
-                onClearButtonPress: V
-              }
-            ),
-            /* @__PURE__ */ a(U, { className: D(), isDisabled: u || t, children: /* @__PURE__ */ a(
-              M,
-              {
-                src: "CalendarBlankOutlined",
-                color: "inherit",
-                alt: g.formatMessage({
-                  id: "unity:component:form-field:date-picker:calendar-button",
-                  defaultMessage: "Open Calendar"
-                })
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ a(
-            j,
-            {
-              className: ({ isEntering: r, isExiting: N }) => $({ isEntering: r, isExiting: N }),
-              children: /* @__PURE__ */ a(
-                O,
-                {
-                  value: l,
-                  defaultValue: n,
-                  minValue: e.minValue,
-                  maxValue: e.maxValue,
-                  onChange: y,
-                  firstDayOfWeek: e.firstDayOfWeek
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-q.displayName = "DatePicker";
-export {
-  q as DatePicker
-};

package/dist/esm/components/date-picker/hooks/useMonthsList.d.ts

@@ -1,4 +0,0 @@
-export declare function useMonthsList(): {
-    id: string;
-    name: string;
-}[];

package/dist/esm/components/date-picker/hooks/useMonthsList.js

@@ -1,26 +0,0 @@
-import { useMemo as l } from "react";
-import { createCalendar as d, today as i, getLocalTimeZone as a, CalendarDate as m } from "@internationalized/date";
-import { useLocale as u } from "react-aria-components";
-function f() {
-  const { locale: o } = u(), c = new Intl.DateTimeFormat().resolvedOptions().calendar, e = d(c);
-  return l(() => {
-    const t = i(a()), n = new m(
-      e,
-      t.year,
-      t.month,
-      t.day
-    );
-    return Array.from({ length: e.getMonthsInYear(n) }).map(
-      (g, s) => {
-        const r = new m(e, n.year, s + 1, 1);
-        return {
-          id: r.month.toString(),
-          name: r.toDate(a()).toLocaleString(o, { month: "long" })
-        };
-      }
-    );
-  }, [o, e]);
-}
-export {
-  f as useMonthsList
-};

package/dist/esm/components/date-picker/hooks/useYearsList.d.ts

@@ -1,10 +0,0 @@
-export interface UseYearsListOptions {
-    yearsBefore?: number;
-    yearsAfter?: number;
-    startYear?: number;
-    endYear?: number;
-}
-export declare function useYearsList({ yearsBefore, yearsAfter, startYear, endYear, }?: UseYearsListOptions): {
-    id: string;
-    name: string;
-}[];

package/dist/esm/components/date-picker/hooks/useYearsList.js

@@ -1,33 +0,0 @@
-import { useMemo as g } from "react";
-import { today as D, getLocalTimeZone as c, createCalendar as L, CalendarDate as d } from "@internationalized/date";
-import { useLocale as v } from "react-aria-components";
-function S({
-  yearsBefore: l = 100,
-  yearsAfter: s = 30,
-  startYear: m,
-  endYear: u
-} = {}) {
-  const { locale: o } = v(), a = D(c()), y = new Intl.DateTimeFormat().resolvedOptions().calendar, t = L(y), n = new d(
-    t,
-    a.year,
-    a.month,
-    a.day
-  );
-  let e = m, r = u;
-  return e === void 0 && (e = n.year - l), r === void 0 && (r = n.year + s), g(
-    () => Array.from({ length: r - e + 1 }).map((w, f) => {
-      const i = e + f, p = new d(t, i, 1, 1);
-      return {
-        id: i.toString(),
-        name: p.toDate(c()).toLocaleString(o, {
-          year: "numeric",
-          calendar: t.identifier
-        })
-      };
-    }),
-    [o, t, r, e]
-  );
-}
-export {
-  S as useYearsList
-};

package/dist/esm/components/date-picker/parts/DateCalendar.d.ts

@@ -1,9 +0,0 @@
-import { DateValue } from '@internationalized/date';
-import { CalendarProps as AriaDateCalendarProps } from 'react-aria-components';
-type PropsFromAriaCalendar<TDate extends DateValue> = AriaDateCalendarProps<TDate>;
-export type DateCalendarProps<TDate extends DateValue> = PropsFromAriaCalendar<TDate>;
-declare function DateCalendar<TDate extends DateValue>({ value, defaultValue, minValue, maxValue, ...props }: DateCalendarProps<TDate>): import("react/jsx-runtime").JSX.Element;
-declare namespace DateCalendar {
-    var displayName: string;
-}
-export { DateCalendar };