analytica-frontend-lib 1.0.10 → 1.0.11

package/dist/index.css

@@ -48,6 +48,8 @@
     --font-weight-extrabold: 800;
     --font-weight-black: 900;
     --radius-xl: 0.75rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-primary-400: #525252;
@@ -59,6 +61,7 @@
     --color-text: #fefeff;
     --color-text-600: #737373;
     --color-text-700: #525252;
+    --color-text-800: #404040;
     --color-text-900: #262627;
     --color-text-950: #171717;
     --color-background: #ffffff;
@@ -66,6 +69,8 @@
     --color-background-100: #f2f1f1;
     --color-background-200: #dcdbdb;
     --color-border-50: #f3f3f3;
+    --color-border-100: #e6e6e6;
+    --color-border-200: #dddcdb;
     --color-success-300: #66b584;
     --color-success-400: #489766;
     --color-success-500: #348352;
@@ -76,7 +81,9 @@
     --color-error-500: #e63535;
     --color-error-600: #dc2626;
     --color-error-700: #b91c1c;
+    --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
+    --color-indicator-error: #b91c1c;
     --font-weight-hairline: 100;
     --text-2xs: 0.625rem;
     --text-2xs--line-height: calc(1 / 0.625);
@@ -284,6 +291,20 @@
   }
 }
 @layer utilities {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .relative {
+    position: relative;
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -323,6 +344,9 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -332,9 +356,18 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
+  .w-full {
+    width: 100%;
+  }
+  .caption-bottom {
+    caption-side: bottom;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -368,6 +401,9 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .overflow-hidden {
+    overflow: hidden;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -378,18 +414,42 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-background-200 {
     border-color: var(--color-background-200);
   }
   .border-border-50 {
     border-color: var(--color-border-50);
   }
+  .border-border-100 {
+    border-color: var(--color-border-100);
+  }
+  .border-border-200 {
+    border-color: var(--color-border-200);
+  }
   .border-error-300 {
     border-color: var(--color-error-300);
   }
   .border-error-500 {
     border-color: var(--color-error-500);
   }
+  .border-indicator-error {
+    border-color: var(--color-indicator-error);
+  }
+  .border-indicator-primary {
+    border-color: var(--color-indicator-primary);
+  }
   .border-primary-950 {
     border-color: var(--color-primary-950);
   }
@@ -402,6 +462,9 @@
   .bg-background {
     background-color: var(--color-background);
   }
+  .bg-background-50 {
+    background-color: var(--color-background-50);
+  }
   .bg-error-500 {
     background-color: var(--color-error-500);
   }
@@ -414,6 +477,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -447,6 +513,15 @@
   .py-3\.5 {
     padding-block: calc(var(--spacing) * 3.5);
   }
+  .text-left {
+    text-align: left;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .align-middle {
+    vertical-align: middle;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -541,12 +616,21 @@
   .text-text-700 {
     color: var(--color-text-700);
   }
+  .text-text-800 {
+    color: var(--color-text-800);
+  }
   .text-text-900 {
     color: var(--color-text-900);
   }
   .text-text-950 {
     color: var(--color-text-950);
   }
+  .capitalize {
+    text-transform: capitalize;
+  }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow:
@@ -585,6 +669,21 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .transition-colors {
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      --tw-gradient-from,
+      --tw-gradient-via,
+      --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .hover\:border-error-400 {
     &:hover {
       @media (hover: hover) {
@@ -905,6 +1004,37 @@
       opacity: 50%;
     }
   }
+  .\[\&_tr\:first-child\]\:border-0 {
+    & tr:first-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .\[\&_tr\:last-child\]\:border-0 {
+    & tr:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
+    &:has([role=checkbox]) {
+      padding-right: calc(var(--spacing) * 0);
+    }
+  }
+  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] {
+    & > [role=checkbox] {
+      --tw-translate-y: 2px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .\[\&\>tr\]\:last\:border-b-0 {
+    & > tr {
+      &:last-child {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0px;
+      }
+    }
+  }
 }
 @layer base {
   [data-theme=dark] {
@@ -1248,6 +1378,9 @@
 @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *,
@@ -1276,6 +1409,9 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
     }
   }
 }

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, TdHTMLAttributes } from 'react';
 
 /**
  * Button component props interface
@@ -184,4 +184,17 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
-export { Button, IconRoundedButton, SelectionButton, Text };
+type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    state?: TableRowState;
+}
+declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
+
+export { Button, IconRoundedButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, TdHTMLAttributes } from 'react';
 
 /**
  * Button component props interface
@@ -184,4 +184,17 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
-export { Button, IconRoundedButton, SelectionButton, Text };
+type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    state?: TableRowState;
+}
+declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
+
+export { Button, IconRoundedButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };

package/dist/index.js

@@ -23,6 +23,14 @@ __export(index_exports, {
   Button: () => Button,
   IconRoundedButton: () => IconRoundedButton,
   SelectionButton: () => SelectionButton,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
   Text: () => Text
 });
 module.exports = __toCommonJS(index_exports);
@@ -234,10 +242,116 @@ var Text = ({
     }
   );
 };
+
+// src/components/Table/Table.tsx
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Table = (0, import_react2.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "table",
+    {
+      ref,
+      className: `w-full caption-bottom text-sm ${className ?? ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("caption", { className: "sr-only", children: "My Table" }),
+        children
+      ]
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "thead",
+  {
+    ref,
+    className: `[&_tr:first-child]:border-0 ${className}`,
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "tbody",
+  {
+    ref,
+    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "tfoot",
+  {
+    ref,
+    className: `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 = (0, import_react2.forwardRef)(
+  ({ state = "default", className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "tr",
+      {
+        ref,
+        className: `
+        transition-colors
+        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
+        ${VARIANT_STATES_ROW[state]}
+        ${className}
+      `,
+        "aria-disabled": state === "disabled",
+        ...props
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableHead = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "th",
+  {
+    ref,
+    className: `h-10 px-6 py-3.5 bg-bg-secondary 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 = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "td",
+  {
+    ref,
+    className: `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 = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "caption",
+  {
+    ref,
+    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   IconRoundedButton,
   SelectionButton,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
   Text
 });

package/dist/index.mjs

@@ -205,9 +205,115 @@ var Text = ({
     }
   );
 };
+
+// src/components/Table/Table.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Table = forwardRef2(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx5("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs3(
+    "table",
+    {
+      ref,
+      className: `w-full caption-bottom text-sm ${className ?? ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5("caption", { className: "sr-only", children: "My Table" }),
+        children
+      ]
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "thead",
+  {
+    ref,
+    className: `[&_tr:first-child]:border-0 ${className}`,
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "tbody",
+  {
+    ref,
+    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "tfoot",
+  {
+    ref,
+    className: `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 = forwardRef2(
+  ({ state = "default", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx5(
+      "tr",
+      {
+        ref,
+        className: `
+        transition-colors
+        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
+        ${VARIANT_STATES_ROW[state]}
+        ${className}
+      `,
+        "aria-disabled": state === "disabled",
+        ...props
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "th",
+  {
+    ref,
+    className: `h-10 px-6 py-3.5 bg-bg-secondary 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 = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "td",
+  {
+    ref,
+    className: `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 = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  "caption",
+  {
+    ref,
+    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
 export {
   Button,
   IconRoundedButton,
   SelectionButton,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
   Text
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
   "main": "dist/index.cjs",
   "module": "./dist/index.js",