@matta-trade/ui 0.0.0-stage → 0.2.2

package/src/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants, useSidebar } from "./index";
+import type { HTMLAttributes } from "vue";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
+import { cn } from "../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+interface Props extends PrimitiveProps {
+    variant?: SidebarMenuButtonVariants["variant"];
+    size?: SidebarMenuButtonVariants["size"];
+    isActive?: boolean;
+    class?: HTMLAttributes["class"];
+    tooltip?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "button",
+    variant: "default",
+    size: "default",
+});
+
+const { isMobile, state } = useSidebar();
+</script>
+
+<template>
+    <Primitive
+        v-if="!tooltip"
+        data-sidebar="menu-button"
+        :data-size="size"
+        :data-active="isActive"
+        :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+        :as="as"
+        :as-child="asChild"
+        v-bind="$attrs"
+    >
+        <slot />
+    </Primitive>
+
+    <TooltipProvider v-else>
+        <Tooltip>
+            <TooltipTrigger as-child>
+                <Primitive
+                    data-sidebar="menu-button"
+                    :data-size="size"
+                    :data-active="isActive"
+                    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+                    :as="as"
+                    :as-child="asChild"
+                    v-bind="$attrs"
+                >
+                    <slot />
+                </Primitive>
+            </TooltipTrigger>
+            <TooltipContent v-if="state === 'collapsed' && !isMobile" side="right" align="center">
+                {{ tooltip }}
+            </TooltipContent>
+        </Tooltip>
+    </TooltipProvider>
+</template>

package/src/sidebar/SidebarMenuItem.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+interface Props {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <li data-sidebar="menu-item" :class="cn('group/menu-item relative list-none', props.class)">
+        <slot />
+    </li>
+</template>

package/src/sidebar/SidebarMenuSub.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+interface Props {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <ul
+        data-sidebar="menu-sub"
+        :class="
+            cn(
+                'mx-3.5 min-w-0 gap-1 px-2.5 py-0.5 flex translate-x-px flex-col border-l border-border-secondary',
+                'group-data-[collapsible=icon]:hidden',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </ul>
+</template>

package/src/sidebar/SidebarMenuSubButton.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
+import { cn } from "../lib/utils";
+
+interface Props extends PrimitiveProps {
+    size?: "sm" | "md";
+    isActive?: boolean;
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "a",
+    size: "md",
+});
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="menu-sub-button"
+        :as="as"
+        :as-child="asChild"
+        :data-size="size"
+        :data-active="isActive"
+        :class="
+            cn(
+                'h-7 min-w-0 gap-2 px-2 [&>svg]:size-4 flex -translate-x-px cursor-pointer items-center overflow-hidden rounded-md text-secondary ring-sidebar-ring outline-none hover:bg-secondary hover:text-primary focus-visible:ring-2 active:bg-secondary active:text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
+                'data-[active=true]:font-medium data-[active=true]:bg-brand-50 data-[active=true]:text-brand-700',
+                size === 'sm' && 'text-xs',
+                size === 'md' && 'text-sm',
+                'group-data-[collapsible=icon]:hidden',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Primitive>
+</template>

package/src/sidebar/SidebarMenuSubItem.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+interface Props {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <li :class="cn('list-none', props.class)">
+        <slot />
+    </li>
+</template>

package/src/sidebar/SidebarProvider.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, provideSidebarContext } from "./index";
+import { type HTMLAttributes, type Ref, computed, ref } from "vue";
+import { useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
+import { cn } from "../lib/utils";
+
+interface Props {
+    defaultOpen?: boolean;
+    open?: boolean;
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    defaultOpen: true,
+    open: undefined,
+});
+
+const emits = defineEmits<{
+    (e: "update:open", value: boolean): void;
+}>();
+
+const isMobile = useMediaQuery("(max-width: 768px)");
+const openMobile = ref(false);
+
+const openState = useVModel(props, "open", emits, {
+    defaultValue: props.defaultOpen,
+    passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+function setOpen(value: boolean) {
+    openState.value = value;
+    // Set cookie for persistence
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
+
+function setOpenMobile(value: boolean) {
+    openMobile.value = value;
+}
+
+function toggleSidebar() {
+    return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!openState.value);
+}
+
+useEventListener("keydown", (event: KeyboardEvent) => {
+    if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+    }
+});
+
+const state = computed(() => (openState.value ? "expanded" : "collapsed"));
+
+provideSidebarContext({
+    state,
+    open: openState,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar,
+});
+</script>
+
+<template>
+    <div
+        :style="{
+            '--sidebar-width': SIDEBAR_WIDTH,
+            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+        }"
+        :class="cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', props.class)"
+    >
+        <slot />
+    </div>
+</template>

package/src/sidebar/SidebarRail.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useSidebar } from "./index";
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+interface Props {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+    <button
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        :tabindex="-1"
+        title="Toggle Sidebar"
+        :class="
+            cn(
+                'inset-y-0 w-4 after:inset-y-0 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex absolute z-20 hidden -translate-x-1/2 cursor-pointer transition-all ease-linear after:absolute after:left-1/2 after:w-[2px] hover:after:bg-border-secondary',
+                '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+                '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+                '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+                '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+                props.class,
+            )
+        "
+        @click="toggleSidebar"
+    />
+</template>

package/src/sidebar/SidebarSeparator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+import { Separator } from "../separator";
+
+interface Props {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <Separator data-sidebar="separator" :class="cn('mx-2 w-auto bg-border-secondary', props.class)" />
+</template>

package/src/sidebar/SidebarTrigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useSidebar } from "./index";
+import type { HTMLAttributes } from "vue";
+import { PanelLeft } from "lucide-vue-next";
+import { Button } from "../button";
+import { cn } from "../lib/utils";
+
+interface Props {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+    <Button
+        data-sidebar="trigger"
+        variant="ghost"
+        size="icon-sm"
+        :class="cn('h-8 w-8 cursor-pointer text-secondary hover:bg-secondary hover:text-primary', props.class)"
+        @click="toggleSidebar"
+    >
+        <PanelLeft class="h-4 w-4" />
+        <span class="sr-only">Toggle Sidebar</span>
+    </Button>
+</template>

package/src/sidebar/index.ts

@@ -0,0 +1,70 @@
+import type { ComputedRef, Ref } from "vue";
+import { type VariantProps, cva } from "class-variance-authority";
+import { createContext } from "reka-ui";
+
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "4.5rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+export interface SidebarContext {
+    state: ComputedRef<"expanded" | "collapsed">;
+    open: Ref<boolean>;
+    setOpen: (open: boolean) => void;
+    openMobile: Ref<boolean>;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: Ref<boolean>;
+    toggleSidebar: () => void;
+}
+
+export const [useSidebar, provideSidebarContext] = createContext<SidebarContext>("Sidebar");
+
+export const sidebarMenuButtonVariants = cva(
+    "peer/menu-button gap-2 p-2 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 group-data-[collapsible=icon]:gap-0 [&>svg]:size-4 flex w-full cursor-pointer items-center overflow-hidden rounded-lg text-left text-sm ring-sidebar-ring transition-[width,height,padding] outline-none select-none group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:justify-center hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate group-data-[collapsible=icon]:[&>span:last-child]:hidden [&>svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default:
+                    "hover:bg-secondary hover:text-primary data-[active=true]:bg-brand-50 data-[active=true]:text-brand-700 data-[active=true]:dark:bg-brand-950/50 data-[active=true]:dark:text-brand-300",
+                outline:
+                    "border border-border-secondary bg-primary shadow-xs hover:bg-secondary hover:text-primary data-[active=true]:border-brand-500 data-[active=true]:text-brand-700",
+            },
+            size: {
+                default: "h-9 text-sm",
+                sm: "h-8 text-xs",
+                lg: "h-12 group-data-[collapsible=icon]:!size-8 text-sm",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>;
+
+export { default as Sidebar } from "./Sidebar.vue";
+export { default as SidebarContent } from "./SidebarContent.vue";
+export { default as SidebarFooter } from "./SidebarFooter.vue";
+export { default as SidebarGroup } from "./SidebarGroup.vue";
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue";
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue";
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue";
+export { default as SidebarHeader } from "./SidebarHeader.vue";
+export { default as SidebarInput } from "./SidebarInput.vue";
+export { default as SidebarInset } from "./SidebarInset.vue";
+export { default as SidebarMenu } from "./SidebarMenu.vue";
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue";
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue";
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue";
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue";
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue";
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue";
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue";
+export { default as SidebarProvider } from "./SidebarProvider.vue";
+export { default as SidebarRail } from "./SidebarRail.vue";
+export { default as SidebarSeparator } from "./SidebarSeparator.vue";
+export { default as SidebarTrigger } from "./SidebarTrigger.vue";

package/src/sonner/Sonner.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { reactiveOmit } from "@vueuse/core";
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next";
+import type { ToasterProps } from "vue-sonner";
+import { Toaster as Sonner } from "vue-sonner";
+import "vue-sonner/style.css";
+
+const props = defineProps<ToasterProps>();
+const delegatedProps = reactiveOmit(props, "toastOptions");
+</script>
+
+<template>
+    <Sonner
+        class="toaster group"
+        :toast-options="{
+            classes: {
+                toast: 'group toast group-[.toaster]:bg-white dark:group-[.toaster]:bg-gray-900 group-[.toaster]:text-gray-900 dark:group-[.toaster]:text-white group-[.toaster]:border-gray-200 dark:group-[.toaster]:border-gray-800 group-[.toaster]:shadow-xl group-[.toaster]:rounded-xl group-[.toaster]:p-4 group-[.toaster]:border',
+                description: 'group-[.toast]:text-gray-500 dark:group-[.toast]:text-gray-400 group-[.toast]:text-xs',
+                actionButton:
+                    'group-[.toast]:bg-brand-600 group-[.toast]:text-white group-[.toast]:rounded-lg group-[.toast]:px-3 group-[.toast]:py-1.5 group-[.toast]:text-xs group-[.toast]:font-medium hover:group-[.toast]:bg-brand-700',
+                cancelButton:
+                    'group-[.toast]:bg-gray-100 dark:group-[.toast]:bg-gray-800 group-[.toast]:text-gray-700 dark:group-[.toast]:text-gray-200 group-[.toast]:rounded-lg group-[.toast]:px-3 group-[.toast]:py-1.5 group-[.toast]:text-xs',
+                success:
+                    'group-[.toaster]:!bg-utility-green-50 dark:group-[.toaster]:!bg-utility-green-950 group-[.toaster]:!text-utility-green-700 dark:group-[.toaster]:!text-utility-green-300 group-[.toaster]:!border-utility-green-200 dark:group-[.toaster]:!border-utility-green-800',
+                error: 'group-[.toaster]:!bg-utility-red-50 dark:group-[.toaster]:!bg-utility-red-950 group-[.toaster]:!text-utility-red-700 dark:group-[.toaster]:!text-utility-red-300 group-[.toaster]:!border-utility-red-200 dark:group-[.toaster]:!border-utility-red-800',
+                warning:
+                    'group-[.toaster]:!bg-utility-orange-50 dark:group-[.toaster]:!bg-utility-orange-950 group-[.toaster]:!text-utility-orange-700 dark:group-[.toaster]:!text-utility-orange-300 group-[.toaster]:!border-utility-orange-200 dark:group-[.toaster]:!border-utility-orange-800',
+                info: 'group-[.toaster]:!bg-utility-blue-50 group-[.toaster]:!text-utility-blue-700 group-[.toaster]:!border-utility-blue-200',
+            },
+        }"
+        v-bind="delegatedProps"
+    >
+        <template #success-icon>
+            <CircleCheckIcon class="size-4 text-emerald-500" />
+        </template>
+        <template #info-icon>
+            <InfoIcon class="size-4 text-blue-500" />
+        </template>
+        <template #warning-icon>
+            <TriangleAlertIcon class="size-4 text-amber-500" />
+        </template>
+        <template #error-icon>
+            <OctagonXIcon class="size-4 text-rose-500" />
+        </template>
+        <template #loading-icon>
+            <div>
+                <Loader2Icon class="size-4 animate-spin text-brand-600" />
+            </div>
+        </template>
+        <template #close-icon>
+            <XIcon class="size-4 text-gray-400 hover:text-gray-600" />
+        </template>
+    </Sonner>
+</template>

package/src/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue";

package/src/stepper/Stepper.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { Check } from "lucide-vue-next";
+import { cn } from "../lib/utils";
+
+/**
+ * Horizontal step indicator for multi-step forms. `current` is 0-based; steps
+ * before it show a check and can be clicked to jump back.
+ */
+const props = defineProps<{
+    steps: readonly string[];
+    current: number;
+    class?: HTMLAttributes["class"];
+}>();
+
+const emit = defineEmits<{
+    (e: "select", index: number): void;
+}>();
+</script>
+
+<template>
+    <ol :class="cn('flex w-full items-start', props.class)" aria-label="Progress">
+        <li
+            v-for="(label, index) in steps"
+            :key="label"
+            class="gap-2 relative flex flex-1 flex-col items-center text-center"
+            :aria-current="index === current ? 'step' : undefined"
+        >
+            <!-- Connector to the previous step -->
+            <span
+                v-if="index > 0"
+                class="h-0.5 absolute top-[13px] right-1/2 w-full transition duration-100 ease-linear"
+                :class="index <= current ? 'bg-brand-600' : 'bg-gray-200 dark:bg-gray-800'"
+                aria-hidden="true"
+            />
+
+            <button
+                type="button"
+                class="size-7 font-semibold relative z-10 flex items-center justify-center rounded-full border-2 text-xs transition duration-100 ease-linear focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-default"
+                :class="[
+                    index < current && 'cursor-pointer border-brand-600 bg-brand-600 text-white',
+                    index === current && 'dark:bg-gray-900 border-brand-600 bg-white text-brand-700 dark:text-brand-300',
+                    index > current && 'border-gray-200 text-gray-400 dark:border-gray-700 dark:bg-gray-900 bg-white',
+                ]"
+                :disabled="index >= current"
+                :aria-label="`${label}${index < current ? ' (completed)' : ''}`"
+                @click="emit('select', index)"
+            >
+                <Check v-if="index < current" class="size-3.5" />
+                <span v-else>{{ index + 1 }}</span>
+            </button>
+
+            <span class="font-medium text-xs" :class="index <= current ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500'">
+                {{ label }}
+            </span>
+        </li>
+    </ol>
+</template>

package/src/stepper/index.ts

@@ -0,0 +1 @@
+export { default as Stepper } from "./Stepper.vue";

package/src/switch/Switch.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { reactiveOmit, useVModel } from "@vueuse/core";
+import { SwitchRoot, type SwitchRootEmits, type SwitchRootProps, SwitchThumb } from "reka-ui";
+import { cn } from "../lib/utils";
+
+interface Props extends SwitchRootProps {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+const emits = defineEmits<SwitchRootEmits>();
+
+const modelValue = useVModel(props, "modelValue", emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+});
+
+const delegatedProps = reactiveOmit(props, "modelValue", "class");
+</script>
+
+<template>
+    <SwitchRoot
+        v-model="modelValue"
+        :class="
+            cn(
+                'peer h-5 w-9 inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand-solid data-[state=unchecked]:bg-tertiary',
+                props.class,
+            )
+        "
+        v-bind="delegatedProps"
+    >
+        <SwitchThumb
+            :class="
+                cn(
+                    'size-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 pointer-events-none block rounded-full bg-white shadow-xs ring-0 transition-transform',
+                )
+            "
+        />
+    </SwitchRoot>
+</template>

package/src/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue";

package/src/table/Table.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div class="relative w-full">
+        <table :class="cn('w-full caption-bottom border-collapse text-left text-sm', props.class)">
+            <slot />
+        </table>
+    </div>
+</template>

package/src/table/TableBody.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <tbody :class="cn('divide-y divide-border-secondary/60 [&_tr:last-child]:border-0', props.class)">
+        <slot />
+    </tbody>
+</template>

package/src/table/TableCell.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <td :class="cn('p-4 [&:has([role=checkbox])]:pr-0 align-middle text-sm text-secondary', props.class)">
+        <slot />
+    </td>
+</template>

package/src/table/TableHead.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <th :class="cn('h-10 px-4 font-semibold text-left align-middle text-xs text-quaternary select-none', props.class)">
+        <slot />
+    </th>
+</template>

package/src/table/TableHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <thead :class="cn('border-border-secondary bg-secondary/50 [&_tr]:border-b', props.class)">
+        <slot />
+    </thead>
+</template>

package/src/table/TableRow.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <tr :class="cn('border-b border-border-secondary/70 transition-colors hover:bg-secondary/40 data-[state=selected]:bg-secondary', props.class)">
+        <slot />
+    </tr>
+</template>

package/src/table/index.ts

@@ -0,0 +1,6 @@
+export { default as Table } from "./Table.vue";
+export { default as TableHeader } from "./TableHeader.vue";
+export { default as TableBody } from "./TableBody.vue";
+export { default as TableRow } from "./TableRow.vue";
+export { default as TableHead } from "./TableHead.vue";
+export { default as TableCell } from "./TableCell.vue";