@xjur-ui/react 2.0.0 → 2.1.1

package/src/components/table/table-cell.tsx

@@ -0,0 +1,14 @@
+import { cx } from '@xjur-ui/util'
+
+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/components/table/table-footer.tsx

@@ -0,0 +1,17 @@
+import { cx } from '@xjur-ui/util'
+
+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}
+    />
+  )
+}

package/src/components/table/table-head.tsx

@@ -0,0 +1,31 @@
+import { cx } from '@xjur-ui/util'
+
+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}
+    />
+  )
+}

package/src/components/table/table-header.tsx

@@ -0,0 +1,17 @@
+import { cx } from '@xjur-ui/util'
+
+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}
+    />
+  )
+}

package/src/components/table/table-row.tsx

@@ -0,0 +1,21 @@
+import { cx } from '@xjur-ui/util'
+
+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}
+    />
+  )
+}

package/src/components/table/table-sort.tsx

@@ -0,0 +1,34 @@
+import { cx } from '@xjur-ui/util'
+import { Icon } from '../icon'
+
+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>
+  )
+}

package/src/components/table/table.tsx

@@ -0,0 +1,16 @@
+import { cx } from '@xjur-ui/util'
+
+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>
+  )
+}