@boxcustodia/library 2.0.0-alpha.13 → 2.0.0-alpha.14

package/src/components/table-pagination/table-pagination.tsx

@@ -1,108 +0,0 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { ChangeEvent, HTMLProps } from "react";
-import { ClassName } from "@/models";
-import { usePagination, usePaginationProps } from "../../hooks";
-import { cn } from "../../lib";
-import { Button } from "../button";
-import { PageSize, TABLE_PAGE_SIZES } from "./table-pagination.model";
-
-interface TablePaginationExtendedProps {
-  containerClassName?: ClassName;
-  containerProps?: HTMLProps<HTMLDivElement>;
-  selectClassName?: ClassName;
-  selectProps?: HTMLProps<HTMLSelectElement>;
-  sizes?: PageSize[] | false;
-}
-
-type Props = {
-  setPageSize?: (value: PageSize) => void;
-  pageSize?: PageSize;
-} & Omit<usePaginationProps, "pageSize"> &
-  TablePaginationExtendedProps;
-
-export const TablePagination = ({
-  containerClassName,
-  containerProps,
-  selectClassName,
-  selectProps,
-  sizes = TABLE_PAGE_SIZES,
-  ...props
-}: Props) => {
-  const [pageSize = TABLE_PAGE_SIZES[0], setPageSize] =
-    useControllableState<PageSize>({
-      onChange: props?.setPageSize,
-      prop: props?.pageSize,
-      defaultProp: TABLE_PAGE_SIZES[0],
-    });
-
-  const { range, next, prev, isFirstPage, isLastPage, goTo } = usePagination({
-    ...props,
-    pageSize,
-  });
-
-  const changePageSize = (event: ChangeEvent<HTMLSelectElement>) => {
-    const { value } = event.target;
-    const newPageSize = Number(value) as PageSize;
-    setPageSize(newPageSize);
-    goTo(1);
-  };
-
-  return (
-    <div
-      data-slot="table-pagination"
-      {...containerProps}
-      className={cn(
-        "flex justify-center items-center gap-x-4 bg-background border border-[#D9D9D9] rounded-2xl py-2",
-        containerClassName,
-      )}
-    >
-      {sizes && (
-        <select
-          data-slot="table-pagination-size-trigger"
-          {...selectProps}
-          value={pageSize}
-          onChange={changePageSize}
-          className={cn(
-            "border border-input rounded-md w-fit min-w-[3rem] bg-background p-2 ring-offset-background",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            selectClassName,
-          )}
-        >
-          {sizes.map((option: number, index) => (
-            <option
-              key={index}
-              value={option}
-              data-slot="table-pagination-size-option"
-            >
-              {option}
-            </option>
-          ))}
-        </select>
-      )}
-      <span data-slot="table-pagination-range">
-        {range.start} - {range.end} de {props.totalItems}
-      </span>
-      <div className="flex gap-2">
-        <Button
-          data-slot="table-pagination-prev"
-          size="icon"
-          variant="ghost"
-          disabled={isFirstPage}
-          onClick={prev}
-        >
-          <ChevronLeft data-slot="table-pagination-prev-icon" />
-        </Button>
-        <Button
-          data-slot="table-pagination-next"
-          size="icon"
-          variant="ghost"
-          disabled={isLastPage}
-          onClick={next}
-        >
-          <ChevronRight data-slot="table-pagination-next-icon" />
-        </Button>
-      </div>
-    </div>
-  );
-};

package/src/components/tabs/context/tabs-context.tsx

@@ -1,14 +0,0 @@
-import { createSafeContext } from "../../../utils";
-
-interface TabsContextProps {
-  activeTab: string;
-  setActiveTab: (tab: string) => void;
-  targetRef: HTMLButtonElement | null;
-  setTargetRef: (element: HTMLButtonElement | null) => void;
-  variant: "default" | "background";
-}
-
-export const [useTabsContext, TabsContextProvider] =
-  createSafeContext<TabsContextProps>();
-
-export type { TabsContextProps };

package/src/components/tag/tag.variants.ts

@@ -1,31 +0,0 @@
-import { cva, VariantProps } from "class-variance-authority";
-
-export const tagVariants = cva(
-  "inline-flex items-center  relative overflow-hidden bg-gray-100 gap-1 px-2.5 py-0.5 text-xs font-normal transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      rounded: {
-        default: "rounded-(--radius-tag)",
-        full: "rounded-full",
-        square: "rounded-sm",
-      },
-      variant: {
-        primary:
-          "bg-primary border-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "bg-secondary border-secondary !text-secondary-foreground hover:bg-secondary/80",
-        error: "bg-error border-error text-error-foreground hover:bg-error/80",
-        success:
-          "bg-success border-success text-success-foreground hover:bg-success/80",
-        outline: "border border-foreground text-foreground",
-        borderless: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      rounded: "default",
-      variant: "primary",
-    },
-  },
-);
-
-export type TagVariant = VariantProps<typeof tagVariants>;

package/src/components/timeline/timeline-status.ts

@@ -1,5 +0,0 @@
-export const TimelineStatus = {
-  done: "var(--color-primary)",
-  pending: "#cdcdcd",
-  error: "var(--color-error)",
-};

package/src/components/tree/hooks/use-controllable-tree-state.ts

@@ -1,80 +0,0 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { useCallback } from "react";
-
-interface UseControllableTreeStateProps {
-  defaultExpandedKeys: string[];
-  defaultSelectedKeys: string[];
-  selectedKeys?: string[];
-  expandedKeys?: string[];
-  multiSelect: boolean;
-  onSelect?: (selectedKeys: string[]) => void;
-  onExpand?: (expandedKeys: string[]) => void;
-}
-
-export function useControllableTreeState({
-  defaultExpandedKeys,
-  defaultSelectedKeys,
-  selectedKeys: selectedKeysProp,
-  expandedKeys: expandedKeysProp,
-  multiSelect,
-  onSelect,
-  onExpand,
-}: UseControllableTreeStateProps) {
-  const [expandedKeys = new Set(), setExpandedKeys] = useControllableState<
-    Set<string>
-  >({
-    prop: expandedKeysProp ? new Set(expandedKeysProp) : undefined,
-    defaultProp: new Set(defaultExpandedKeys),
-    onChange: (keys) => onExpand?.(Array.from(keys)),
-  });
-
-  const [selectedKeys = new Set(), setSelectedKeys] = useControllableState<
-    Set<string>
-  >({
-    prop: selectedKeysProp ? new Set(selectedKeysProp) : undefined,
-    defaultProp: new Set(defaultSelectedKeys),
-    onChange: (keys) => onSelect?.(Array.from(keys)),
-  });
-
-  const handleToggle = useCallback(
-    (nodeId: string) => {
-      setExpandedKeys((prev) => {
-        const next = new Set(prev);
-        if (next.has(nodeId)) {
-          next.delete(nodeId);
-        } else {
-          next.add(nodeId);
-        }
-        return next;
-      });
-    },
-    [setExpandedKeys],
-  );
-
-  const handleSelect = useCallback(
-    (nodeId: string) => {
-      setSelectedKeys((prev) => {
-        const next = new Set(prev);
-        if (multiSelect) {
-          if (next.has(nodeId)) {
-            next.delete(nodeId);
-          } else {
-            next.add(nodeId);
-          }
-        } else {
-          next.clear();
-          next.add(nodeId);
-        }
-        return next;
-      });
-    },
-    [multiSelect, setSelectedKeys],
-  );
-
-  return {
-    expandedKeys,
-    selectedKeys,
-    handleToggle,
-    handleSelect,
-  };
-}

package/src/components/tree/tree-primitives.tsx

@@ -1,126 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import * as React from "react";
-import type {
-  TreeItemProps as TreeItemPrimitiveProps,
-  TreeProps,
-} from "react-aria-components";
-import {
-  Button,
-  Collection,
-  composeRenderProps as cr,
-  TreeItemContent as TreeItemContentPrimitive,
-  TreeItem as TreeItemPrimitive,
-  Tree as TreePrimitive,
-} from "react-aria-components";
-import { tv } from "tailwind-variants";
-import { OverrideProps } from "../../models";
-
-const treeStyles = tv({
-  base: "flex py-2 rounded-lg bg-bg cursor-default lg:text-sm flex-col overflow-auto outline-none",
-  variants: {
-    isFocusVisible: {
-      true: "outline-offset-[-1px] outline-2 outline-primary",
-    },
-  },
-});
-
-const TreeRoot = <T extends object>({ className, ...props }: TreeProps<T>) => {
-  return (
-    <TreePrimitive
-      data-slot="tree"
-      className={cr(className, (className, renderProps) =>
-        treeStyles({
-          ...renderProps,
-          className,
-        }),
-      )}
-      {...props}
-    >
-      {props.children}
-    </TreePrimitive>
-  );
-};
-
-const itemStyles = tv({
-  base: [
-    "[&_[data-expanded]_[slot=chevron]_[data-slot=icon]]:rotate-90 outline-none [--padding:20px] p-[0.286rem_0.286rem_0.286rem_0.571rem] pl-[calc((var(--tree-item-level)-1)*20px+0.571rem+var(--padding))]",
-    "[&_[slot=chevron]]:outline-none [&_[slot=chevron]_[data-slot=icon]]:text-muted-fg",
-    "data-[has-child-rows]:[--padding:0px]",
-  ],
-  variants: {
-    isExpanded: {
-      true: "[&_[slot=chevron]_[data-slot=icon]]:text-fg [&_[slot=chevron]_[data-slot=icon]]:rotate-90 [&_[slot=chevron]_[data-slot=icon]]:transition [&_[slot=chevron]_[data-slot=icon]]:duration-200",
-    },
-    isFocusVisible: {
-      true: "[&_[slot=chevron]_[data-slot=icon]]:text-fg focus:outline-none focus-visible:ring-1 focus-visible:ring-primary",
-    },
-    isDisabled: {
-      true: "opacity-50 forced-colors:text-[GrayText]",
-    },
-    isSelected: {
-      true: "bg-accent text-accent-foreground",
-    },
-  },
-});
-
-const TreeItem = <T extends object>({
-  className,
-  ...props
-}: OverrideProps<TreeItemPrimitiveProps<T>, { id: string | number }>) => {
-  return (
-    <TreeItemPrimitive
-      data-slot="tree-item"
-      data-key={props.id}
-      className={cr(className, (className, renderProps) =>
-        itemStyles({
-          ...renderProps,
-          className,
-        }),
-      )}
-      {...props}
-    >
-      {props.children}
-    </TreeItemPrimitive>
-  );
-};
-
-const TreeItemContent = (
-  props: React.ComponentProps<typeof TreeItemContentPrimitive>,
-) => {
-  return (
-    <TreeItemContentPrimitive
-      data-slot="tree-item-content"
-      {...props}
-      data-key={props.key}
-    >
-      <div className="flex items-center gap-x-1">
-        {props.children as React.ReactNode}
-      </div>
-    </TreeItemContentPrimitive>
-  );
-};
-
-const TreeItemIndicator = () => {
-  return (
-    <Button
-      data-slot="tree-item-chevron"
-      className="shrink-0 relative"
-      slot="chevron"
-    >
-      <ChevronRight className="size-5" data-slot="icon" />
-    </Button>
-  );
-};
-
-const TreeItemLabel = (props: React.HtmlHTMLAttributes<HTMLSpanElement>) => {
-  return <span data-slot="tree-item-label" {...props} />;
-};
-
-export {
-  Collection,
-  TreeItem,
-  TreeItemContent,
-  TreeItemIndicator,
-  TreeItemLabel,
-  TreeRoot,
-};