@xjur-ui/react 1.0.1 → 1.0.3

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/badge.tsx

@@ -0,0 +1,40 @@
+import { cva, type ClassVariantProps, cx } from '@xjur-ui/util'
+import { Typography } from './typography'
+
+const badgeVariants = cva(
+  [
+    'flex items-center justify-center size-large p-small-2x text-neutral-label rounded-circle'
+  ],
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary-idle',
+        secondary: 'bg-secondary-idle',
+        neutral: 'bg-alt-2-idle',
+        success: 'bg-success-idle',
+        warning: 'bg-warning-idle',
+        danger: 'bg-danger-idle'
+      }
+    },
+    defaultVariants: {
+      variant: 'neutral'
+    }
+  }
+)
+
+export function Badge({
+  variant = 'neutral',
+  children,
+  className
+}: ClassVariantProps<typeof badgeVariants> & {
+  children: string
+  className?: string
+}) {
+  return (
+    <span className={cx(badgeVariants({ variant }), className)}>
+      <Typography className="text-inherit" size="sm-2x" variant="label">
+        {children}
+      </Typography>
+    </span>
+  )
+}

package/src/components/date-picker.tsx

@@ -41,7 +41,7 @@ export function DatePickerContent({
         align={align}
         className={cx(
           className,
-          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)]'
+          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'
         )}
         side={side}
         sideOffset={sideOffset}
@@ -88,25 +88,27 @@ export function DatePickerLabel({
     <Typography
       asChild={true}
       className={cx(
-        'bg-layer-2-idle w-fit font-normal',
-        'pointer-events-none absolute top-[50%] left-auto -translate-y-1/2',
-        'ease pointer-events-none transition-all duration-150',
+        'inline-block max-w-full truncate text-left font-normal',
+        'left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2',
+        'ease transition-all duration-250',
         // Content Open
         'group-data-[state=open]:text-primary-idle',
-        'group-data-[state=open]:bg-layer-2-idle',
         'group-data-[state=open]:-top-[3px]',
         'group-data-[state=open]:text-size-label-sm-1x',
         'group-data-[state=open]:font-medium',
         // Filled
         'group-has-[input:not(:placeholder-shown)]:text-primary-idle',
-        'group-has-[input:not(:placeholder-shown)]:bg-layer-2-idle',
         'group-has-[input:not(:placeholder-shown)]:-top-[3px]',
         'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',
         'group-has-[input:not(:placeholder-shown)]:font-medium',
         // If has left slot
         'group-has-[div[data-slot=date-picker-left-slot]]:left-large-4x',
-        'group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-auto',
-        'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto',
+        'group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small',
+        'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
+        // If has right slot
+        'group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x',
+        'group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small',
+        'group-has-[div[data-slot=date-picker-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
         // Animate
         'group-data-[state=open]:animate-in',
         'group-data-[state=closed]:animate-out',
@@ -116,7 +118,11 @@ export function DatePickerLabel({
       weight="medium"
       {...props}
     >
-      <label htmlFor={htmlFor}>{children}</label>
+      <label htmlFor={htmlFor}>
+        <span className="bg-layer-2-idle rounded-small-1x max-w-full">
+          {children}
+        </span>
+      </label>
     </Typography>
   )
 }

package/src/components/input.tsx

@@ -52,7 +52,7 @@ export function InputContent({ className, ...props }: ComponentProps<'div'>) {
         variant: {
           default: '',
           outlined:
-            'bg-layer-2-idle border-border-layer-2 border hover:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle',
+            'bg-layer-2-idle border-border-layer-2 border hover:group-has-[input:not(:focus-within)]:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle',
           filled:
             'bg-layer-2-hover group-hover:border-border-layer-1 group-hover:border-1'
         }
@@ -74,6 +74,7 @@ export function InputContent({ className, ...props }: ComponentProps<'div'>) {
 export function InputLabel({
   htmlFor,
   className,
+  children,
   ...props
 }: ComponentProps<'label'> & { htmlFor: string }) {
   return (
@@ -82,10 +83,10 @@ export function InputLabel({
         return (
           <label
             className={cx(
-              'rounded-small-1x text-size-body-md text-neutral-dark data-[variant=outlined]:bg-layer-2-idle bg-layer-2-hover w-fit font-normal',
-              'ease animate-in pointer-events-none absolute top-1/2 left-auto -translate-y-1/2 transition-all duration-250',
+              'group text-size-body-md text-neutral-dark inline-block max-w-full truncate text-left',
+              'ease animate-in left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2 transition-all duration-250',
               // Filled
-              'group-focus-within:text-primary-idle group-focus-within:bg-layer-2-hover data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-focus-within:-top-[3px]',
+              'group-focus-within:text-primary-idle group-focus-within:-top-[3px]',
               'group-focus-within:text-size-label-sm-1x group-focus-within:font-medium',
               'group-has-[input:not(:placeholder-shown)]:-top-[3px]',
               'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',
@@ -93,8 +94,12 @@ export function InputLabel({
               'data-[variant=outlined]:group-has-[input:not(:placeholder-shown)]:text-primary-idle',
               // If has left slot
               'group-has-[div[data-slot=input-left-slot]]:left-large-4x',
-              'group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-auto',
-              'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto',
+              'group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-small',
+              'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
+              // If has right slot
+              'group-has-[div[data-slot=input-right-slot]]:right-large-4x',
+              'group-has-[div[data-slot=input-right-slot]]:group-focus-within:right-small',
+              'group-has-[div[data-slot=input-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
               // Animate
               'group-focus-within:animate-in',
               'group-has-[input:not(:placeholder-shown)]:animate-out',
@@ -103,7 +108,17 @@ export function InputLabel({
             data-variant={variant}
             htmlFor={htmlFor}
             {...props}
-          />
+          >
+            <span
+              className={cx(
+                'rounded-small-1x max-w-full',
+                'group-data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-data-[variant=filled]:group-focus-within:bg-layer-2-hover',
+                'group-data-[variant=outlined]:bg-layer-2-idle group-data-[variant=filled]:bg-layer-2-hover'
+              )}
+            >
+              {children}
+            </span>
+          </label>
         )
       }}
     </FieldContext.Consumer>

package/src/components/select.tsx

@@ -54,7 +54,7 @@ export function SelectContent({
         align={align}
         className={cx(
           className,
-          'group z-10 max-h-[var(--radix-popover-content-available-height)] w-[var(--radix-popover-trigger-width)]'
+          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'
         )}
         side={side}
         sideOffset={sideOffset}
@@ -101,7 +101,7 @@ export function SelectMultiValue({
     <div
       className={cx(
         className,
-        'gap-small-1x scrollbar-hide group-has-[div[data-slot=select-left-slot]]:pl-large-1x flex overflow-x-auto'
+        'gap-small-1x scrollbar-hide group-has-[div[data-slot=select-left-slot]]:pl-large-1x overflow-x-small flex'
       )}
       {...props}
     >
@@ -129,25 +129,27 @@ export function SelectLabel({
     <Typography
       asChild={true}
       className={cx(
-        'bg-layer-2-idle w-fit font-normal',
-        'pointer-events-none absolute top-1/2 left-auto -translate-y-1/2',
+        'inline-block max-w-full truncate text-left font-normal',
+        'left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2',
         'ease transition-all duration-250',
         // Content Open
         'group-data-[state=open]:text-primary-idle',
-        'group-data-[state=open]:bg-layer-2-idle',
         'group-data-[state=open]:-top-[3px]',
         'group-data-[state=open]:text-size-label-sm-1x',
         'group-data-[state=open]:font-medium',
         // Filled
         'group-has-[input:not(:placeholder-shown)]:text-primary-idle',
-        'group-has-[input:not(:placeholder-shown)]:bg-layer-2-idle',
         'group-has-[input:not(:placeholder-shown)]:-top-[3px]',
         'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',
         'group-has-[input:not(:placeholder-shown)]:font-medium',
         // If has left slot
         'group-has-[div[data-slot=select-left-slot]]:left-large-4x',
-        'group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-auto',
-        'group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto',
+        'group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-small',
+        'group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
+        // If has right slot
+        'group-has-[div[data-slot=select-right-slot]]:right-large-4x',
+        'group-has-[div[data-slot=select-right-slot]]:group-data-[state=open]:right-small',
+        'group-has-[div[data-slot=select-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
         // Animate
         'group-data-[state=open]:animate-in',
         'group-data-[state=closed]:animate-out',
@@ -157,7 +159,11 @@ export function SelectLabel({
       weight="medium"
       {...props}
     >
-      <label htmlFor={htmlFor}>{children}</label>
+      <label htmlFor={htmlFor}>
+        <span className="bg-layer-2-idle rounded-small-1x max-w-full">
+          {children}
+        </span>
+      </label>
     </Typography>
   )
 }

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}
+    />
+  )
+}

package/src/resources/icons.ts

@@ -138,7 +138,9 @@ export const icons = [
   'event',
   'account_circle',
   'history',
-  'security'
+  'security',
+  'bar_chart',
+  'category'
 ] as const
 
 export type IconType = (typeof icons)[number]