List Group

1import { cva, type VariantProps } from 'class-variance-authority';
2import { ComponentProps } from 'react';
3 
4import { cn } from '@/lib/utils';
5 
6/*
7 * UX4G list-group:
8 * - container: rounded-lg, border 1px neutral-200, overflow-hidden, shared borders between items
9 * - flush variant: no outer borders, no rounding (edge-to-edge)
10 * - item: padding 0.5rem 1rem, border-top 1px neutral-200 (except first)
11 * - hover (on action items): bg neutral-50
12 * - active: bg primary, text neutral-0, border-primary
13 * - disabled: opacity 0.5, pointer-events-none
14 * - contextual themes: tonal backgrounds (primary-50, success-50, etc.)
15 */
16 
17const LIST_GROUP_ITEM_VARIANTS = cva(
18  'relative flex items-center px-4 py-2 text-sm transition-colors border-t border-neutral-200 first:border-t-0',
19  {
20    variants: {
21      theme: {
22        default: 'text-neutral',
23        primary: 'bg-primary-50 text-primary-900',
24        secondary: 'bg-secondary-50 text-secondary-900',
25        success: 'bg-success-50 text-success-900',
26        danger: 'bg-danger-50 text-danger-900',
27        warning: 'bg-warning-50 text-warning-900',
28        info: 'bg-info-50 text-info-900',
29      },
30    },
31    defaultVariants: {
32      theme: 'default',
33    },
34  },
35);
36 
37interface IListGroupProps extends ComponentProps<'ul'> {
38  flush?: boolean;
39  horizontal?: boolean;
40}
41 
42/** List group container. */
43function ListGroup({ className, flush, horizontal, ...props }: IListGroupProps) {
44  return (
45    <ul
46      role='list'
47      className={cn(
48        'flex list-none flex-col',
49        !flush && 'bg-neutral-0 overflow-hidden rounded-lg border border-neutral-200',
50        horizontal && 'flex-row',
51        className,
52      )}
53      {...props}
54    />
55  );
56}
57 
58interface IListGroupItemProps
59  extends ComponentProps<'li'>,
60    VariantProps<typeof LIST_GROUP_ITEM_VARIANTS> {
61  active?: boolean;
62  disabled?: boolean;
63  action?: boolean;
64}
65 
66/** Individual item within a list group. */
67function ListGroupItem({
68  className,
69  theme,
70  active,
71  disabled,
72  action,
73  ...props
74}: IListGroupItemProps) {
75  return (
76    <li
77      aria-current={active ? 'page' : undefined}
78      className={cn(
79        LIST_GROUP_ITEM_VARIANTS({ theme, className }),
80        action && 'cursor-pointer hover:bg-neutral-50 active:bg-neutral-100',
81        active && 'bg-primary text-neutral-0 border-primary',
82        disabled && 'pointer-events-none opacity-50 select-none',
83      )}
84      {...props}
85    />
86  );
87}
88 
89interface IListGroupActionProps
90// … truncated