@xjur-ui/react 1.0.2 → 1.0.3

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
 
-> @xjur-ui/react@1.0.1 build
+> @xjur-ui/react@1.0.2 build
 > tsup
 
-CLI Building entry: src/index.ts, src/components/avatar.tsx, src/components/badge.tsx, src/components/button.tsx, src/components/calendar.tsx, src/components/checkbox.tsx, src/components/chip.tsx, src/components/collapsible.tsx, src/components/date-picker.tsx, src/components/divider.tsx, src/components/dropdown-menu.tsx, src/components/icon.tsx, src/components/input.tsx, src/components/list.tsx, src/components/logo.tsx, src/components/otp-input.tsx, src/components/radio.tsx, src/components/search-input.tsx, src/components/select.tsx, src/components/sheet.tsx, src/components/switch.tsx, src/components/tabs.tsx, src/components/tag.tsx, src/components/typography.tsx
+CLI Building entry: src/index.ts, src/components/avatar-group.tsx, src/components/avatar.tsx, src/components/badge.tsx, src/components/button.tsx, src/components/calendar.tsx, src/components/checkbox.tsx, src/components/chip.tsx, src/components/collapsible.tsx, src/components/date-picker.tsx, src/components/divider.tsx, src/components/dropdown-menu.tsx, src/components/icon.tsx, src/components/input.tsx, src/components/list.tsx, src/components/logo.tsx, src/components/otp-input.tsx, src/components/radio.tsx, src/components/search-input.tsx, src/components/select.tsx, src/components/sheet.tsx, src/components/switch.tsx, src/components/table.tsx, src/components/tabs.tsx, src/components/tag.tsx, src/components/typography.tsx
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
 CLI Using tsup config: /home/vsts/work/1/s/packages/react/tsup.config.ts
@@ -11,13 +11,14 @@ CLI Cleaning output folder
 ESM Build start
 DTS Build start
 ESM dist/index.js                    0 B
-ESM dist/components/avatar.js        1.23 KB
-ESM dist/index.css                   54.65 KB
+ESM dist/components/avatar-group.js  4.98 KB
+ESM dist/index.css                   58.59 KB
+ESM dist/components/avatar.js        1.38 KB
 ESM dist/components/badge.js         3.08 KB
 ESM dist/components/button.js        2.73 KB
 ESM dist/components/calendar.js      19.27 KB
 ESM dist/components/checkbox.js      4.64 KB
-ESM dist/components/chip.js          6.34 KB
+ESM dist/components/chip.js          6.49 KB
 ESM dist/components/collapsible.js   998.00 B
 ESM dist/components/date-picker.js   6.90 KB
 ESM dist/components/divider.js       697.00 B
@@ -32,12 +33,14 @@ ESM dist/components/search-input.js  7.70 KB
 ESM dist/components/select.js        15.44 KB
 ESM dist/components/sheet.js         6.89 KB
 ESM dist/components/switch.js        1.13 KB
+ESM dist/components/table.js         4.35 KB
 ESM dist/components/tabs.js          1.43 KB
 ESM dist/components/tag.js           4.77 KB
 ESM dist/components/typography.js    2.21 KB
-ESM ⚡️ Build success in 1286ms
-DTS ⚡️ Build success in 5617ms
+ESM ⚡️ Build success in 1185ms
+DTS ⚡️ Build success in 5286ms
 DTS dist/index.d.ts                    13.00 B
+DTS dist/components/avatar-group.d.ts  815.00 B
 DTS dist/components/badge.d.ts         607.00 B
 DTS dist/components/calendar.d.ts      448.00 B
 DTS dist/components/checkbox.d.ts      305.00 B
@@ -56,6 +59,7 @@ DTS dist/components/search-input.d.ts  1.10 KB
 DTS dist/components/button.d.ts        872.00 B
 DTS dist/components/sheet.d.ts         1.62 KB
 DTS dist/components/switch.d.ts        300.00 B
+DTS dist/components/table.d.ts         1.28 KB
 DTS dist/components/tabs.d.ts          737.00 B
 DTS dist/components/tag.d.ts           1.07 KB
 DTS dist/components/typography.d.ts    993.00 B

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @xjur-ui/react
 
+## 1.0.3
+
+### Patch Changes
+
+- fb1a2db: Create avatar group component
+- 31a7409: Adiciona componente de tabela
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/components/avatar-group.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AvatarGroupProps {
+    /**
+     * Lista de avatares para exibir
+     */
+    avatars: Array<{
+        src?: string;
+        alt?: string;
+        fallback?: string;
+    }>;
+    /**
+     * Número máximo de avatares a exibir antes de mostrar o indicador de overflow
+     * @default 3
+     */
+    max?: number;
+    /**
+     * Tamanho dos avatares
+     * @default 'md'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+    /**
+     * Espaçamento entre os avatares (em pixels)
+     * @default -8
+     */
+    spacing?: number;
+}
+declare function AvatarGroup({ avatars, max, size, className }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+export { AvatarGroup, type AvatarGroupProps };

package/dist/components/avatar-group.js

@@ -0,0 +1,179 @@
+// src/components/avatar-group.tsx
+import { cx as cx2 } from "@xjur-ui/util";
+
+// src/components/avatar.tsx
+import "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function AvatarRoot({
+  className,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Root,
+    {
+      className: cx(
+        "rounded-circle relative flex shrink-0 overflow-hidden",
+        "data-[size=lg]:size-large-8x data-[size=md]:size-large-4x data-[size=sm]:size-large-2x data-[size=xs]:size-large-1x",
+        "data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm",
+        className
+      ),
+      "data-size": size,
+      "data-slot": "avatar",
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Image,
+    {
+      className: cx("aspect-square size-full", className),
+      "data-slot": "avatar-image",
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Fallback,
+    {
+      className: cx(
+        "bg-alt-1 rounded-circle flex size-full items-center justify-center font-medium text-white",
+        className
+      ),
+      "data-slot": "avatar-fallback",
+      ...props
+    }
+  );
+}
+
+// src/components/typography.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "@xjur-ui/util";
+import { memo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var typographyVariants = cva("", {
+  variants: {
+    variant: {
+      body: "",
+      label: "",
+      title: "",
+      headline: ""
+    },
+    size: {
+      "sm-2x": "",
+      "sm-1x": "",
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    weight: {
+      thin: "font-thin",
+      extraLight: "font-extralight",
+      light: "font-light",
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extraBold: "font-extrabold",
+      black: "font-black"
+    }
+  },
+  compoundVariants: [
+    { variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
+    { variant: "body", size: "sm", class: "text-size-body-sm" },
+    { variant: "body", size: "md", class: "text-size-body-md" },
+    { variant: "body", size: "lg", class: "text-size-body-lg" },
+    { variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
+    { variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
+    { variant: "label", size: "sm", class: "text-size-label-sm" },
+    { variant: "label", size: "md", class: "text-size-label-md" },
+    { variant: "label", size: "lg", class: "text-size-label-lg" },
+    { variant: "title", size: "sm", class: "text-size-title-sm" },
+    { variant: "title", size: "md", class: "text-size-title-md" },
+    { variant: "title", size: "lg", class: "text-size-title-lg" },
+    { variant: "headline", size: "sm", class: "text-size-headline-sm" },
+    { variant: "headline", size: "md", class: "text-size-headline-md" },
+    { variant: "headline", size: "lg", class: "text-size-headline-lg" }
+  ],
+  defaultVariants: {
+    variant: "body",
+    size: "md",
+    weight: "normal"
+  }
+});
+var Typography = memo(
+  ({
+    variant,
+    size,
+    weight,
+    asChild,
+    className,
+    ...props
+  }) => {
+    const Component = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx2(
+      Component,
+      {
+        className: typographyVariants({ variant, size, weight, className }),
+        ...props
+      }
+    );
+  }
+);
+Typography.displayName = "Typography";
+
+// src/components/avatar-group.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function AvatarGroup({
+  avatars,
+  max = 3,
+  size = "md",
+  className
+}) {
+  const visibleAvatars = avatars.slice(0, max);
+  const remainingCount = avatars.length - max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx2("-space-x-small-1x flex items-center", className),
+      "data-slot": "avatar-group",
+      children: [
+        visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsxs(
+          AvatarRoot,
+          {
+            className: "border-icon-neutral-5 border-2",
+            size,
+            children: [
+              avatar.src && /* @__PURE__ */ jsx3(
+                AvatarImage,
+                {
+                  alt: avatar.alt || `Avatar ${index + 1}`,
+                  src: avatar.src
+                }
+              ),
+              /* @__PURE__ */ jsx3(AvatarFallback, { children: avatar.fallback || `A${index + 1}` })
+            ]
+          },
+          index
+        )),
+        remainingCount > 0 && /* @__PURE__ */ jsx3(AvatarRoot, { className: "bg-layer-1-hover", size, children: /* @__PURE__ */ jsx3(AvatarFallback, { className: "bg-layer-1-hover font-medium", children: /* @__PURE__ */ jsxs(Typography, { className: "text-neutral-dark", weight: "medium", children: [
+          "+",
+          remainingCount
+        ] }) }) })
+      ]
+    }
+  );
+}
+export {
+  AvatarGroup
+};

package/dist/components/avatar.js

@@ -14,6 +14,7 @@ function AvatarRoot({
       className: cx(
         "rounded-circle relative flex shrink-0 overflow-hidden",
         "data-[size=lg]:size-large-8x data-[size=md]:size-large-4x data-[size=sm]:size-large-2x data-[size=xs]:size-large-1x",
+        "data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm",
         className
       ),
       "data-size": size,

package/dist/components/chip.js

@@ -116,6 +116,7 @@ function AvatarRoot({
       className: cx2(
         "rounded-circle relative flex shrink-0 overflow-hidden",
         "data-[size=lg]:size-large-8x data-[size=md]:size-large-4x data-[size=sm]:size-large-2x data-[size=xs]:size-large-1x",
+        "data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm",
         className
       ),
       "data-size": size,

package/dist/components/table.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Table({ className, ...props }: React.ComponentProps<'table'>): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): react_jsx_runtime.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): react_jsx_runtime.JSX.Element;
+declare function TableRow({ className, isSelected, ...props }: React.ComponentProps<'tr'> & {
+    isSelected?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): react_jsx_runtime.JSX.Element;
+declare function TableHeadContent({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function TableSort({ className, sortedDirection, ...props }: React.ComponentProps<'button'> & {
+    sortedDirection?: 'asc' | 'desc';
+}): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): react_jsx_runtime.JSX.Element;
+
+export { Table, TableBody, TableCell, TableFooter, TableHead, TableHeadContent, TableHeader, TableRow, TableSort };

package/dist/components/table.js

@@ -0,0 +1,196 @@
+// src/components/table.tsx
+import { cx as cx2 } from "@xjur-ui/util";
+
+// src/components/icon.tsx
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function Icon({ className, filled = false, name, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: cx(
+        "material-symbols-outlined",
+        "text-size-body-lg",
+        className
+      ),
+      style: {
+        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,
+        ...props.style
+      },
+      children: name
+    }
+  );
+}
+
+// src/components/table.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "text-size-body-md scrollbar-thin relative w-full overflow-hidden transition-all hover:overflow-x-auto",
+      "data-slot": "table-container",
+      children: /* @__PURE__ */ jsx2(
+        "table",
+        {
+          className: cx2("w-full caption-bottom", className),
+          "data-slot": "table",
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "thead",
+    {
+      className: cx2(
+        "group/table-header [&_tr]:border-border-layer-2 hover:bg-layer-2-hover [&_tr]:border-b",
+        className
+      ),
+      "data-slot": "table-header",
+      ...props
+    }
+  );
+}
+function TableBody({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "tbody",
+    {
+      className: cx2(
+        "[&_tr]:border-border-layer-2 [&_tr]:border-b [&_tr:last-child]:border-0",
+        className
+      ),
+      "data-slot": "table-body",
+      ...props
+    }
+  );
+}
+function TableFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "tfoot",
+    {
+      className: cx2(
+        "border-border-layer-2 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      "data-slot": "table-footer",
+      ...props
+    }
+  );
+}
+function TableRow({
+  className,
+  isSelected = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "tr",
+    {
+      className: cx2(
+        "bg-layer-2-idle hover:bg-layer-2-hover ease border-b transition-colors duration-100",
+        "active:bg-layer-2-pressed",
+        "data-[selected=true]:bg-primary-alt-active",
+        className
+      ),
+      "data-selected": isSelected,
+      "data-slot": "table-row",
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "th",
+    {
+      className: cx2(
+        "group/th text-neutral-placeholder text-size-label-sm h-large-4x py-small-1x px-small text-left align-middle font-medium whitespace-nowrap",
+        "pr-large-2x relative",
+        "animate-in fade-in duration-200 ease-in",
+        className
+      ),
+      "data-slot": "table-head",
+      ...props
+    }
+  );
+}
+function TableHeadContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cx2(
+        "gap-small pr-large-3x relative flex w-fit items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableSort({
+  className,
+  sortedDirection,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      className: cx2(
+        "size-large-1x rounded-small-1x",
+        "flex cursor-pointer items-center justify-center",
+        "hidden group-hover/th:flex",
+        "data-[sorted=true]:flex",
+        "transition-all duration-200 ease-out",
+        "data-[sorted=true]:bg-primary-alt-active data-[sorted=true]:text-primary-label-active",
+        "absolute top-1/2 right-0 -translate-y-1/2",
+        className
+      ),
+      "data-sorted": sortedDirection !== void 0,
+      type: "button",
+      ...props,
+      children: sortedDirection !== void 0 ? /* @__PURE__ */ jsx2(
+        Icon,
+        {
+          name: sortedDirection === "asc" ? "arrow_downward" : "arrow_upward"
+        }
+      ) : /* @__PURE__ */ jsx2(Icon, { name: "swap_vert" })
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "td",
+    {
+      className: cx2(
+        "px-small py-none h-large-8x text-left align-middle whitespace-nowrap",
+        className
+      ),
+      "data-slot": "table-cell",
+      ...props
+    }
+  );
+}
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeadContent,
+  TableHeader,
+  TableRow,
+  TableSort
+};

package/dist/components/typography.d.ts

@@ -5,7 +5,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { ClassVariantProps } from '@xjur-ui/util';
 
 declare const typographyVariants: (props?: ({
-    variant?: "body" | "label" | "title" | "headline" | null | undefined;
+    variant?: "label" | "body" | "title" | "headline" | null | undefined;
     size?: "sm" | "md" | "lg" | "sm-2x" | "sm-1x" | null | undefined;
     weight?: "bold" | "thin" | "extraLight" | "light" | "normal" | "medium" | "semibold" | "extraBold" | "black" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/index.css

@@ -34,6 +34,7 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --font-weight-black: 900;
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
@@ -78,6 +79,7 @@
     --color-neutral-placeholder: #9C9CAD;
     --color-neutral-label: #FFFFFF;
     --color-icon-neutral-3: #69697A;
+    --color-icon-neutral-5: #FFFFFF;
     --color-layer-1-idle: #F7F7FA;
     --color-layer-1-hover: #F0F0F2;
     --color-layer-1-pressed: #E7E7EB;
@@ -392,6 +394,27 @@
   .ml-small-1x {
     margin-left: var(--spacing-small-1x);
   }
+  .scrollbar-thin {
+    &::-webkit-scrollbar-track {
+      background-color: var(--scrollbar-track);
+      border-radius: var(--scrollbar-track-radius);
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-thumb);
+      border-radius: var(--scrollbar-thumb-radius);
+    }
+    &::-webkit-scrollbar-corner {
+      background-color: var(--scrollbar-corner);
+      border-radius: var(--scrollbar-corner-radius);
+    }
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
+    &::-webkit-scrollbar {
+      display: block;
+      width: 8px;
+      height: 8px;
+    }
+  }
   .scrollbar-hide {
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -411,6 +434,15 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-row {
+    display: table-row;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -422,6 +454,10 @@
     width: var(--spacing-large);
     height: var(--spacing-large);
   }
+  .size-large-1x {
+    width: var(--spacing-large-1x);
+    height: var(--spacing-large-1x);
+  }
   .size-large-alt {
     width: var(--spacing-large-alt);
     height: var(--spacing-large-alt);
@@ -451,6 +487,9 @@
   .h-large-7x {
     height: var(--spacing-large-7x);
   }
+  .h-large-8x {
+    height: var(--spacing-large-8x);
+  }
   .max-h-\[400px\] {
     max-height: 400px;
   }
@@ -496,6 +535,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .caption-bottom {
+    caption-side: bottom;
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -533,6 +575,13 @@
   .gap-small_1x-alt {
     gap: var(--spacing-small_1x-alt);
   }
+  .-space-x-small-1x {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing-small-1x) * -1) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing-small-1x) * -1) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -632,6 +681,9 @@
   .border-border-layer-2 {
     border-color: var(--color-border-layer-2);
   }
+  .border-icon-neutral-5 {
+    border-color: var(--color-icon-neutral-5);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -740,12 +792,21 @@
   .pt-small-1x {
     padding-top: var(--spacing-small-1x);
   }
+  .pr-large-2x {
+    padding-right: var(--spacing-large-2x);
+  }
+  .pr-large-3x {
+    padding-right: var(--spacing-large-3x);
+  }
   .text-center {
     text-align: center;
   }
   .text-left {
     text-align: left;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-inter {
     font-family: var(--font-inter);
   }
@@ -845,6 +906,9 @@
     --tw-font-weight: var(--font-weight-thin);
     font-weight: var(--font-weight-thin);
   }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .\!text-primary-label-active {
     color: var(--color-primary-label-active) !important;
   }
@@ -998,6 +1062,10 @@
     --tw-duration: 250ms;
     transition-duration: 250ms;
   }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -1010,6 +1078,9 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .fade-in {
+    --tw-enter-opacity: 0;
+  }
   .group-focus-within\:-top-\[3px\] {
     &:is(:where(.group):focus-within *) {
       top: calc(3px * -1);
@@ -1073,6 +1144,13 @@
       }
     }
   }
+  .group-hover\/th\:flex {
+    &:is(:where(.group\/th):hover *) {
+      @media (hover: hover) {
+        display: flex;
+      }
+    }
+  }
   .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:left-large-4x {
     &:is(:where(.group):has(*:is(div[data-slot=date-picker-left-slot])) *) {
       left: var(--spacing-large-4x);
@@ -1353,6 +1431,13 @@
         var(--tw-shadow);
     }
   }
+  .hover\:overflow-x-auto {
+    &:hover {
+      @media (hover: hover) {
+        overflow-x: auto;
+      }
+    }
+  }
   .hover\:border-border-layer-3 {
     &:hover {
       @media (hover: hover) {
@@ -1606,30 +1691,74 @@
       flex-direction: column;
     }
   }
+  .data-\[selected\=true\]\:bg-primary-alt-active {
+    &[data-selected=true] {
+      background-color: var(--color-primary-alt-active);
+    }
+  }
   .data-\[size\=lg\]\:size-large-8x {
     &[data-size=lg] {
       width: var(--spacing-large-8x);
       height: var(--spacing-large-8x);
     }
   }
+  .data-\[size\=lg\]\:text-size-headline-md {
+    &[data-size=lg] {
+      font-size: var(--text-size-headline-md);
+      line-height: var(--tw-leading, var(--text-size-headline-md--line-height));
+    }
+  }
   .data-\[size\=md\]\:size-large-4x {
     &[data-size=md] {
       width: var(--spacing-large-4x);
       height: var(--spacing-large-4x);
     }
   }
+  .data-\[size\=md\]\:text-size-label-lg {
+    &[data-size=md] {
+      font-size: var(--text-size-label-lg);
+      line-height: var(--tw-leading, var(--text-size-label-lg--line-height));
+    }
+  }
   .data-\[size\=sm\]\:size-large-2x {
     &[data-size=sm] {
       width: var(--spacing-large-2x);
       height: var(--spacing-large-2x);
     }
   }
+  .data-\[size\=sm\]\:text-size-label-sm {
+    &[data-size=sm] {
+      font-size: var(--text-size-label-sm);
+      line-height: var(--tw-leading, var(--text-size-label-sm--line-height));
+    }
+  }
   .data-\[size\=xs\]\:size-large-1x {
     &[data-size=xs] {
       width: var(--spacing-large-1x);
       height: var(--spacing-large-1x);
     }
   }
+  .data-\[size\=xs\]\:text-size-label-sm {
+    &[data-size=xs] {
+      font-size: var(--text-size-label-sm);
+      line-height: var(--tw-leading, var(--text-size-label-sm--line-height));
+    }
+  }
+  .data-\[sorted\=true\]\:flex {
+    &[data-sorted=true] {
+      display: flex;
+    }
+  }
+  .data-\[sorted\=true\]\:bg-primary-alt-active {
+    &[data-sorted=true] {
+      background-color: var(--color-primary-alt-active);
+    }
+  }
+  .data-\[sorted\=true\]\:text-primary-label-active {
+    &[data-sorted=true] {
+      color: var(--color-primary-label-active);
+    }
+  }
   .data-\[state\=active\]\:rounded-none {
     &[data-state=active] {
       border-radius: 0;
@@ -1814,6 +1943,31 @@
       max-width: var(--container-sm);
     }
   }
+  .\[\&_tr\]\:border-b {
+    & tr {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .\[\&_tr\]\:border-border-layer-2 {
+    & tr {
+      border-color: var(--color-border-layer-2);
+    }
+  }
+  .\[\&_tr\:last-child\]\:border-0 {
+    & tr:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .\[\&\>tr\]\:last\:border-b-0 {
+    & > tr {
+      &:last-child {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0px;
+      }
+    }
+  }
 }
 @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; }
 @property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; }
@@ -1841,6 +1995,7 @@
 @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; }
+@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@@ -1899,6 +2054,7 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xjur-ui/react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "description": "React components for XJur Design System",
   "main": "dist/index.js",
@@ -30,7 +30,9 @@
     "./dropdown-menu": "./dist/components/dropdown-menu.js",
     "./divider": "./dist/components/divider.js",
     "./sheet": "./dist/components/sheet.js",
-    "./badge": "./dist/components/badge.js"
+    "./badge": "./dist/components/badge.js",
+    "./table": "./dist/components/table.js",
+    "./avatar-group": "./dist/components/avatar-group.js"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.10",

package/src/components/avatar-group.tsx

@@ -0,0 +1,76 @@
+import { cx } from '@xjur-ui/util'
+import { AvatarRoot, AvatarImage, AvatarFallback } from './avatar'
+import { Typography } from './typography'
+
+export interface AvatarGroupProps {
+  /**
+   * Lista de avatares para exibir
+   */
+  avatars: Array<{
+    src?: string
+    alt?: string
+    fallback?: string
+  }>
+  /**
+   * Número máximo de avatares a exibir antes de mostrar o indicador de overflow
+   * @default 3
+   */
+  max?: number
+  /**
+   * Tamanho dos avatares
+   * @default 'md'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  /**
+   * Classe CSS adicional
+   */
+  className?: string
+  /**
+   * Espaçamento entre os avatares (em pixels)
+   * @default -8
+   */
+  spacing?: number
+}
+
+export function AvatarGroup({
+  avatars,
+  max = 3,
+  size = 'md',
+  className
+}: AvatarGroupProps) {
+  const visibleAvatars = avatars.slice(0, max)
+  const remainingCount = avatars.length - max
+
+  return (
+    <div
+      className={cx('-space-x-small-1x flex items-center', className)}
+      data-slot="avatar-group"
+    >
+      {visibleAvatars.map((avatar, index) => (
+        <AvatarRoot
+          className="border-icon-neutral-5 border-2"
+          key={index}
+          size={size}
+        >
+          {avatar.src && (
+            <AvatarImage
+              alt={avatar.alt || `Avatar ${index + 1}`}
+              src={avatar.src}
+            />
+          )}
+          <AvatarFallback>{avatar.fallback || `A${index + 1}`}</AvatarFallback>
+        </AvatarRoot>
+      ))}
+
+      {remainingCount > 0 && (
+        <AvatarRoot className="bg-layer-1-hover" size={size}>
+          <AvatarFallback className="bg-layer-1-hover font-medium">
+            <Typography className="text-neutral-dark" weight="medium">
+              +{remainingCount}
+            </Typography>
+          </AvatarFallback>
+        </AvatarRoot>
+      )}
+    </div>
+  )
+}

package/src/components/avatar.tsx

@@ -14,6 +14,7 @@ export function AvatarRoot({
       className={cx(
         'rounded-circle relative flex shrink-0 overflow-hidden',
         'data-[size=lg]:size-large-8x data-[size=md]:size-large-4x data-[size=sm]:size-large-2x data-[size=xs]:size-large-1x',
+        'data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm',
         className
       )}
       data-size={size}

package/src/components/table.tsx

@@ -0,0 +1,160 @@
+import { cx } from '@xjur-ui/util'
+import { Icon } from './icon'
+
+export function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      className="text-size-body-md scrollbar-thin relative w-full overflow-hidden transition-all hover:overflow-x-auto"
+      data-slot="table-container"
+    >
+      <table
+        className={cx('w-full caption-bottom', className)}
+        data-slot="table"
+        {...props}
+      />
+    </div>
+  )
+}
+
+export function TableHeader({
+  className,
+  ...props
+}: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      className={cx(
+        'group/table-header [&_tr]:border-border-layer-2 hover:bg-layer-2-hover [&_tr]:border-b',
+        className
+      )}
+      data-slot="table-header"
+      {...props}
+    />
+  )
+}
+
+export function TableBody({
+  className,
+  ...props
+}: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      className={cx(
+        '[&_tr]:border-border-layer-2 [&_tr]:border-b [&_tr:last-child]:border-0',
+        className
+      )}
+      data-slot="table-body"
+      {...props}
+    />
+  )
+}
+
+export function TableFooter({
+  className,
+  ...props
+}: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      className={cx(
+        'border-border-layer-2 border-t font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      data-slot="table-footer"
+      {...props}
+    />
+  )
+}
+
+export function TableRow({
+  className,
+  isSelected = false,
+  ...props
+}: React.ComponentProps<'tr'> & { isSelected?: boolean }) {
+  return (
+    <tr
+      className={cx(
+        'bg-layer-2-idle hover:bg-layer-2-hover ease border-b transition-colors duration-100',
+        'active:bg-layer-2-pressed',
+        'data-[selected=true]:bg-primary-alt-active',
+        className
+      )}
+      data-selected={isSelected}
+      data-slot="table-row"
+      {...props}
+    />
+  )
+}
+
+export function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      className={cx(
+        'group/th text-neutral-placeholder text-size-label-sm h-large-4x py-small-1x px-small text-left align-middle font-medium whitespace-nowrap',
+        'pr-large-2x relative',
+        'animate-in fade-in duration-200 ease-in',
+        className
+      )}
+      data-slot="table-head"
+      {...props}
+    />
+  )
+}
+
+export function TableHeadContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(
+        'gap-small pr-large-3x relative flex w-fit items-center',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function TableSort({
+  className,
+  sortedDirection,
+  ...props
+}: React.ComponentProps<'button'> & { sortedDirection?: 'asc' | 'desc' }) {
+  return (
+    <button
+      className={cx(
+        'size-large-1x rounded-small-1x',
+        'flex cursor-pointer items-center justify-center',
+        'hidden group-hover/th:flex',
+        'data-[sorted=true]:flex',
+        'transition-all duration-200 ease-out',
+        'data-[sorted=true]:bg-primary-alt-active data-[sorted=true]:text-primary-label-active',
+        'absolute top-1/2 right-0 -translate-y-1/2',
+        className
+      )}
+      data-sorted={sortedDirection !== undefined}
+      type="button"
+      {...props}
+    >
+      {sortedDirection !== undefined ? (
+        <Icon
+          name={sortedDirection === 'asc' ? 'arrow_downward' : 'arrow_upward'}
+        />
+      ) : (
+        <Icon name="swap_vert" />
+      )}
+    </button>
+  )
+}
+
+export function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      className={cx(
+        'px-small py-none h-large-8x text-left align-middle whitespace-nowrap',
+        className
+      )}
+      data-slot="table-cell"
+      {...props}
+    />
+  )
+}