@povio/ui 0.0.7 → 0.0.8

package/dist/components/table/Table.js

@@ -1,352 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useSensors, useSensor, MouseSensor, TouchSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { getCoreRowModel, getSortedRowModel, getPaginationRowModel, useReactTable, flexRender } from "@tanstack/react-table";
-import { clsx } from "clsx";
-import i18next from "i18next";
-import { useRef, useCallback, useMemo } from "react";
-import { ChevronDownIcon } from "../../assets/icons/ChevronDown.js";
-import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
-import { DragIcon } from "../../assets/icons/Drag.js";
-import { InlineIconButton } from "../buttons/InlineIconButton/InlineIconButton.js";
-import { CellText } from "./CellText.js";
-import { HeaderText } from "./HeaderText.js";
-import { UIStyle } from "../../config/uiStyle.context.js";
-import { useTableNav } from "../../hooks/useTableNav.js";
-import { tableRow, tableHeadRow, tableData } from "./table.cva.js";
-const CustomCellContext = (context) => {
-  return { ...context, original: context.row.original, data: context.row.original, value: context.getValue() };
-};
-const CellRender = (Comp, props) => {
-  const rendered = typeof Comp === "function" ? Comp(props) : Comp;
-  return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
-};
-const RowDragHandleCell = ({ rowId }) => {
-  const { attributes, listeners } = useSortable({
-    id: rowId
-  });
-  return /* @__PURE__ */ jsx(
-    InlineIconButton,
-    {
-      ...attributes,
-      ...listeners,
-      className: "cursor-move p-1",
-      label: "Drag handle",
-      icon: DragIcon
-    }
-  );
-};
-const AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
-const DraggableRow = ({
-  row,
-  showCellBorder,
-  onRowClick,
-  onDoubleClick,
-  tableRowCva,
-  tableDataCva,
-  hasOnClick,
-  ...props
-}) => {
-  const { transform, transition, setNodeRef, isDragging } = useSortable({
-    id: row.id
-  });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.8 : 1,
-    zIndex: isDragging ? 1 : 0,
-    position: "relative"
-  };
-  return (
-    // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
-    /* @__PURE__ */ jsx(
-      "tr",
-      {
-        ref: setNodeRef,
-        style,
-        "data-clickable": hasOnClick,
-        "data-selected": row.getIsSelected() || void 0,
-        className: clsx(tableRowCva(props)),
-        onClick: () => onRowClick?.(row.original),
-        onDoubleClick: () => onDoubleClick?.(row.original),
-        children: row.getVisibleCells().map((cell, cellIndex, array) => {
-          const columnMeta = cell.column.columnDef.meta ?? {};
-          return /* @__PURE__ */ jsx(
-            "td",
-            {
-              tabIndex: -1,
-              className: clsx(
-                tableDataCva({ isLast: cellIndex === array.length - 1, hasBorder: cellIndex > 0 && showCellBorder }),
-                columnMeta.cellClass,
-                columnMeta.width
-              ),
-              children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
-            },
-            cell.id
-          );
-        })
-      }
-    )
-  );
-};
-const Table = ({
-  items,
-  showCellBorder,
-  columns,
-  onRowClick,
-  onDoubleClick,
-  className,
-  sorting,
-  setSorting,
-  columnOrder,
-  setColumnOrder,
-  columnVisibility,
-  setColumnVisibility,
-  bulkSelectionActions: ActionHeader,
-  enableDragDrop = false,
-  onDragEnd,
-  onReorder,
-  getRowId,
-  enableRowSelection,
-  enableMultiRowSelection,
-  defaultSelectedRows,
-  onRowSelectionChange,
-  ...props
-}) => {
-  const uiStyle = UIStyle.useConfig();
-  const tableRowCva = uiStyle?.table?.rowCva ?? tableRow;
-  const tableHeadRowCva = uiStyle?.table?.headRowCva ?? tableHeadRow;
-  const tableDataCva = uiStyle?.table?.dataCva ?? tableData;
-  const ref = useRef(null);
-  const { listeners } = useTableNav();
-  const getCoreRowModelCallback = useCallback(getCoreRowModel, []);
-  const getSortedRowModelCallback = useCallback(getSortedRowModel, []);
-  const getPaginationRowModelCallback = useCallback(getPaginationRowModel, []);
-  const data = useMemo(() => items ?? [], [items]);
-  const baseColumns = useMemo(() => typeof columns === "function" ? columns(i18next.t) : columns, [columns]);
-  const tableColumns = useMemo(() => {
-    if (enableDragDrop && getRowId) {
-      const dragHandleColumn = {
-        id: "drag-handle",
-        header: "",
-        meta: {
-          width: "w-12"
-        },
-        cell: AutoDragHandleCell,
-        enableSorting: false
-      };
-      return [dragHandleColumn, ...baseColumns];
-    }
-    return baseColumns;
-  }, [baseColumns, enableDragDrop, getRowId]);
-  const table = useReactTable({
-    data,
-    columns: tableColumns,
-    state: {
-      sorting,
-      columnOrder,
-      columnVisibility,
-      rowSelection: defaultSelectedRows ?? {}
-    },
-    rowCount: items.length,
-    getCoreRowModel: getCoreRowModelCallback(),
-    getSortedRowModel: getSortedRowModelCallback(),
-    getPaginationRowModel: getPaginationRowModelCallback(),
-    manualPagination: true,
-    onColumnOrderChange: setColumnOrder,
-    onColumnVisibilityChange: setColumnVisibility,
-    onSortingChange: setSorting,
-    onRowSelectionChange,
-    manualSorting: true,
-    autoResetPageIndex: false,
-    autoResetExpanded: false,
-    enableRowSelection,
-    enableMultiRowSelection,
-    getRowId: getRowId ? (row) => String(getRowId(row)) : void 0
-  });
-  const dataIds = useMemo(() => {
-    if (!enableDragDrop || !getRowId) {
-      return [];
-    }
-    return data.map((item) => getRowId(item));
-  }, [data, enableDragDrop, getRowId]);
-  const handleDragEnd = useCallback(
-    (event) => {
-      const { active, over } = event;
-      if (!active || !over || active.id === over.id) {
-        return;
-      }
-      if (getRowId && (onReorder || onDragEnd)) {
-        if (onReorder) {
-          const oldIndex = items.findIndex((item) => getRowId(item) === active.id);
-          const newIndex = items.findIndex((item) => getRowId(item) === over.id);
-          if (oldIndex !== -1 && newIndex !== -1) {
-            const reorderedItems = arrayMove(items, oldIndex, newIndex);
-            onReorder(reorderedItems);
-          }
-        }
-        onDragEnd?.(event);
-      }
-    },
-    [onDragEnd, onReorder, items, getRowId]
-  );
-  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
-  const selectedRows = table.getSelectedRowModel().rows;
-  const columnCount = table.getHeaderGroups()[0].headers.length;
-  const isAnyRowSelected = selectedRows.length > 0 && !!ActionHeader;
-  const hasOnClick = !!onRowClick || !!onDoubleClick;
-  const tableElement = /* @__PURE__ */ jsxs(
-    "table",
-    {
-      className: clsx("w-full", className),
-      ...listeners,
-      children: [
-        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 border-b border-b-elevation-outline-default-1", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
-          "tr",
-          {
-            className: clsx(tableHeadRowCva({})),
-            children: headerGroup.headers.filter((header) => {
-              if (isAnyRowSelected && header.index > 0) {
-                return false;
-              }
-              return header.column.getIsVisible();
-            }).map((header, index, array) => {
-              const columnMeta = header.column.columnDef.meta ?? {};
-              return /* @__PURE__ */ jsx(
-                "th",
-                {
-                  colSpan: isAnyRowSelected ? columnCount : header.colSpan,
-                  tabIndex: -1,
-                  className: clsx(
-                    "px-2 text-left",
-                    index > 0 && showCellBorder && "border-l border-l-elevation-outline-default-1 border-solid",
-                    index === array.length - 1 && "pr-4",
-                    columnMeta.headerClass,
-                    columnMeta.width
-                  ),
-                  children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": "Sort column",
-                      ...{
-                        className: clsx(
-                          "flex select-none items-center gap-1 text-text-default-1",
-                          header.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default",
-                          columnMeta.sortClass
-                        ),
-                        onClick: header.column.getToggleSortingHandler()
-                      },
-                      children: [
-                        typeof header.column.columnDef.header === "function" ? flexRender(header.column.columnDef.header, header.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header.column.columnDef.header }),
-                        {
-                          asc: /* @__PURE__ */ jsx(
-                            ChevronUpIcon,
-                            {
-                              width: 18,
-                              height: 18
-                            }
-                          ),
-                          desc: /* @__PURE__ */ jsx(
-                            ChevronDownIcon,
-                            {
-                              width: 18,
-                              height: 18
-                            }
-                          )
-                        }[header.column.getIsSorted()] ?? null
-                      ]
-                    }
-                  )
-                },
-                header.id
-              );
-            })
-          },
-          headerGroup.id
-        )) }),
-        /* @__PURE__ */ jsx(
-          "tbody",
-          {
-            ref,
-            className: "relative",
-            children: enableDragDrop ? /* @__PURE__ */ jsx(
-              SortableContext,
-              {
-                items: dataIds,
-                strategy: verticalListSortingStrategy,
-                children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
-                  DraggableRow,
-                  {
-                    row,
-                    showCellBorder,
-                    onRowClick,
-                    onDoubleClick,
-                    tableRowCva,
-                    tableDataCva,
-                    hasOnClick,
-                    ...props
-                  },
-                  row.id
-                ))
-              }
-            ) : table.getRowModel().rows.map((row) => {
-              return (
-                // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
-                /* @__PURE__ */ jsx(
-                  "tr",
-                  {
-                    className: clsx(tableRowCva({ ...props })),
-                    onClick: () => onRowClick?.(row.original),
-                    onDoubleClick: () => onDoubleClick?.(row.original),
-                    "data-clickable": hasOnClick,
-                    "data-selected": row.getIsSelected() || void 0,
-                    children: row.getVisibleCells().map((cell, cellIndex, array) => {
-                      const columnMeta = cell.column.columnDef.meta ?? {};
-                      return /* @__PURE__ */ jsx(
-                        "td",
-                        {
-                          tabIndex: -1,
-                          className: clsx(
-                            tableDataCva({
-                              isLast: cellIndex === array.length - 1,
-                              hasBorder: cellIndex > 0 && showCellBorder
-                            }),
-                            columnMeta.cellClass,
-                            columnMeta.width
-                          ),
-                          children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
-                        },
-                        cell.id
-                      );
-                    })
-                  },
-                  row.id
-                )
-              );
-            })
-          }
-        )
-      ]
-    }
-  );
-  if (enableDragDrop) {
-    return /* @__PURE__ */ jsx(
-      DndContext,
-      {
-        collisionDetection: closestCenter,
-        modifiers: [restrictToVerticalAxis],
-        onDragEnd: handleDragEnd,
-        sensors,
-        children: tableElement
-      }
-    );
-  }
-  return tableElement;
-};
-export {
-  RowDragHandleCell,
-  Table
-};

package/dist/components/table/table.cva.js

@@ -1,37 +0,0 @@
-import { cva } from "class-variance-authority";
-const tableRow = cva(
-  [
-    "h-9 max-h-12 border-b border-b-elevation-outline-default-1 border-solid",
-    "hover:bg-elevation-fill-default-2",
-    "disabled:opacity-50",
-    "selected:bg-elevation-fill-default-2",
-    "hover:selected:bg-interactive-subtle-secondary-hover",
-    "clickable:cursor-pointer"
-  ],
-  {
-    variants: {
-      alternatingBackground: {
-        even: "even:bg-elevation-fill-inverted-4/5",
-        odd: "odd:bg-elevation-fill-inverted-4/5"
-      }
-    }
-  }
-);
-const tableHeadRow = cva(["h-8 w-full"]);
-const tableData = cva(["relative overflow-hidden text-ellipsis whitespace-nowrap px-2"], {
-  variants: {
-    isLast: {
-      true: "pr-4",
-      false: ""
-    },
-    hasBorder: {
-      true: "border-l border-l-elevation-outline-default-1",
-      false: ""
-    }
-  }
-});
-export {
-  tableData,
-  tableHeadRow,
-  tableRow
-};

package/dist/components/text/Link/Link.js

@@ -1,18 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Link as Link$1 } from "react-aria-components";
-import { link } from "./link.cva.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-const Link = ({ variant, ...props }) => {
-  const uiStyle = UIStyle.useConfig();
-  const linkCva = uiStyle?.link?.cva ?? link;
-  return /* @__PURE__ */ jsx(
-    Link$1,
-    {
-      ...props,
-      className: linkCva({ variant, className: props.className })
-    }
-  );
-};
-export {
-  Link
-};

package/dist/components/text/Link/link.cva.js

@@ -1,18 +0,0 @@
-import { cva } from "class-variance-authority";
-import { uiOutlineClass } from "../../outline.clsx.js";
-const link = cva(["underline", uiOutlineClass], {
-  variants: {
-    variant: {
-      default: [
-        "text-interactive-text-primary-idle focus-visible:outline-interactive-text-primary-focus",
-        "hover:text-interactive-text-primary-hover focus-visible:text-interactive-text-primary-focus active:text-interactive-text-primary-pressed"
-      ]
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-export {
-  link
-};

package/dist/components/text/Tag/Tag.js

@@ -1,49 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { Button } from "react-aria-components";
-import { useTranslation } from "react-i18next";
-import { CloseIcon } from "../../../assets/icons/Close.js";
-import { TooltipEllipsis } from "../../overlays/Tooltip/TooltipEllipsis.js";
-import { tag } from "./tag.cva.js";
-import { Typography } from "../Typography/Typography.js";
-import { ns } from "../../../config/i18n.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-const Tag = ({ color, className, children, dismissable, isDisabled, onDismiss, ...props }) => {
-  const uiStyle = UIStyle.useConfig();
-  const tagCva = uiStyle?.tag?.cva ?? tag;
-  const { t } = useTranslation(ns);
-  const buttonProps = { isDisabled, onPress: onDismiss, label: t(($) => $.ui.tag.dismiss), ...props };
-  return /* @__PURE__ */ jsx(TooltipEllipsis, { text: children, children: (onContentRef) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: tagCva({
-        color,
-        className: clsx("pointer-events-none", className)
-      }),
-      children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            ref: onContentRef,
-            variant: "default",
-            size: "label-2",
-            as: "span",
-            className: "truncate",
-            children
-          }
-        ),
-        dismissable && /* @__PURE__ */ jsx(
-          Button,
-          {
-            ...buttonProps,
-            className: "pointer-events-auto shrink-0",
-            children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  Tag
-};

package/dist/components/text/Tag/tag.cva.js

@@ -1,59 +0,0 @@
-import { cva } from "class-variance-authority";
-import { uiOutlineClass } from "../../outline.clsx.js";
-const tag = cva(
-  [
-    uiOutlineClass,
-    "inline-flex items-center gap-list-gap-icon-to-label",
-    "p-pill-height-default px-1-5",
-    "rounded-pill-rounding-default",
-    "overflow-hidden",
-    "disabled:cursor-default"
-  ],
-  {
-    variants: {
-      color: {
-        primary: [
-          "bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
-          "hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
-          "pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
-          "disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus"
-        ],
-        secondary: [
-          "bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
-          "hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
-          "pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
-          "disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus"
-        ],
-        success: [
-          "bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
-          "hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
-          "pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
-          "disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus"
-        ],
-        warning: [
-          "bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
-          "hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
-          "pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
-          "disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus"
-        ],
-        error: [
-          "bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
-          "hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
-          "pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
-          "disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus"
-        ]
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-    }
-  }
-);
-export {
-  tag
-};

package/dist/components/text/Typography/Typography.js

@@ -1,22 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { typography } from "./typography.cva.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-const Typography = ({ as = "p", className, ...props }) => {
-  const uiStyle = UIStyle.useConfig();
-  const typographyCva = uiStyle?.typography?.cva ?? typography;
-  const Tag = as;
-  return /* @__PURE__ */ jsx(
-    Tag,
-    {
-      className: typographyCva({
-        ...props,
-        sizeMobile: props.sizeMobile ?? props.size,
-        className
-      }),
-      ...props
-    }
-  );
-};
-export {
-  Typography
-};

package/dist/components/text/Typography/typography.cva.js

@@ -1,100 +0,0 @@
-import { cva } from "class-variance-authority";
-const typography = cva("", {
-  variants: {
-    size: {
-      "headline-1": "md:text-desktop-headline-1",
-      "title-1": "md:text-desktop-title-1",
-      "title-2": "md:text-desktop-title-2",
-      "title-3": "md:text-desktop-title-3",
-      "title-4": "md:text-desktop-title-4",
-      "title-5": "md:text-desktop-title-5",
-      "title-6": "md:text-desktop-title-6",
-      "body-1": "md:text-desktop-body-1",
-      "body-2": "md:text-desktop-body-2",
-      "body-3": "md:text-desktop-body-3",
-      "body-4": "md:text-desktop-body-4",
-      "label-1": "md:text-label-1",
-      "label-2": "md:text-label-2",
-      "label-3": "md:text-label-3"
-    },
-    sizeMobile: {
-      "headline-1": "text-mobile-headline-1",
-      "title-1": "text-mobile-title-1",
-      "title-2": "text-mobile-title-2",
-      "title-3": "text-mobile-title-3",
-      "title-4": "text-mobile-title-4",
-      "title-5": "text-mobile-title-5",
-      "title-6": "text-mobile-title-6",
-      "body-1": "text-mobile-body-1",
-      "body-2": "text-mobile-body-2",
-      "body-3": "text-mobile-body-3",
-      "body-4": "text-mobile-body-4",
-      "label-1": "text-label-1",
-      "label-2": "text-label-2",
-      "label-3": "text-label-3"
-    },
-    variant: {
-      default: "",
-      "prominent-1": "",
-      "default-italic": "italic",
-      "prominent-1-italic": "italic",
-      "prominent-2": "",
-      "prominent-2-italic": "italic"
-    }
-  },
-  compoundVariants: [
-    {
-      size: ["headline-1", "title-1", "title-2", "title-3", "title-4", "title-5", "title-6"],
-      className: "font-geist"
-    },
-    {
-      size: ["body-1", "body-2", "body-3", "body-4", "label-1", "label-2", "label-3"],
-      className: "font-inter"
-    },
-    {
-      size: [
-        "headline-1",
-        "title-1",
-        "title-2",
-        "title-3",
-        "title-4",
-        "title-5",
-        "title-6",
-        "label-1",
-        "label-2",
-        "label-3"
-      ],
-      variant: ["default", "default-italic"],
-      className: "font-medium"
-    },
-    {
-      size: [
-        "headline-1",
-        "title-1",
-        "title-2",
-        "title-3",
-        "title-4",
-        "title-5",
-        "title-6",
-        "label-1",
-        "label-2",
-        "label-3"
-      ],
-      variant: ["prominent-1", "prominent-1-italic"],
-      className: "font-semibold"
-    },
-    {
-      size: ["body-1", "body-2", "body-3", "body-4"],
-      variant: ["prominent-1", "prominent-1-italic"],
-      className: "font-medium"
-    },
-    {
-      size: ["body-1", "body-2", "body-3", "body-4"],
-      variant: ["prominent-2", "prominent-2-italic"],
-      className: "font-semibold"
-    }
-  ]
-});
-export {
-  typography
-};