UNPKG

analytica-frontend-lib

Version:

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

133 lines (131 loc) 3.5 kB
// src/components/Table/Table.tsx import { forwardRef } from "react"; // src/utils/utils.ts import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs) { return twMerge(clsx(inputs)); } // src/components/Table/Table.tsx import { jsx, jsxs } from "react/jsx-runtime"; var Table = forwardRef( ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs( "table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props, children: [ /* @__PURE__ */ jsx("caption", { className: "sr-only", children: "My Table" }), children ] } ) }) ); Table.displayName = "Table"; var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx( "thead", { ref, className: cn("[&_tr:first-child]:border-0", className), ...props } )); TableHeader.displayName = "TableHeader"; var TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx( "tbody", { ref, className: cn( "[&_tr:last-child]:border-0 border-t border-border-200", className ), ...props } )); TableBody.displayName = "TableBody"; var TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx( "tfoot", { ref, className: cn( "border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5", className ), ...props } )); TableFooter.displayName = "TableFooter"; var VARIANT_STATES_ROW = { default: "border-b border-border-200", selected: "border-b-2 border-indicator-primary", invalid: "border-b-2 border-indicator-error", disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed" }; var TableRow = forwardRef( ({ state = "default", className, ...props }, ref) => { return /* @__PURE__ */ jsx( "tr", { ref, className: cn( "transition-colors", state !== "disabled" ? "hover:bg-muted/50" : "", VARIANT_STATES_ROW[state], className ), "aria-disabled": state === "disabled", ...props } ); } ); TableRow.displayName = "TableRow"; var TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx( "th", { ref, className: cn( "h-10 px-6 py-3.5 bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className ), ...props } )); TableHead.displayName = "TableHead"; var TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx( "td", { ref, className: cn( "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5", className ), ...props } )); TableCell.displayName = "TableCell"; var TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx( "caption", { ref, className: cn( "border-t border-border-200 text-sm text-text-800 px-6 py-3.5", className ), ...props } )); TableCaption.displayName = "TableCaption"; var Table_default = Table; export { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Table_default as default }; //# sourceMappingURL=index.mjs.map