@matta-trade/ui 0.0.0-stage → 0.2.2

package/src/select/SelectSeparator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { SelectSeparatorProps } from "reka-ui";
+import { SelectSeparator } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 bg-muted h-px', props.class)" />
+</template>

package/src/select/SelectTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronDown } from "lucide-vue-next";
+import type { SelectTriggerProps } from "reka-ui";
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectTrigger
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'h-10 px-3 py-2 ring-offset-primary flex w-full items-center justify-between rounded-lg border border-border-primary bg-primary text-start text-sm text-primary shadow-xs focus:border-border-brand focus:ring-2 focus:ring-brand-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-placeholder [&>span]:truncate',
+                props.class,
+            )
+        "
+    >
+        <slot />
+        <SelectIcon as-child>
+            <ChevronDown class="w-4 h-4 shrink-0 opacity-50" />
+        </SelectIcon>
+    </SelectTrigger>
+</template>

package/src/select/SelectValue.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectValueProps } from "reka-ui";
+import { SelectValue } from "reka-ui";
+
+const props = defineProps<SelectValueProps>();
+</script>
+
+<template>
+    <SelectValue v-bind="props">
+        <slot />
+    </SelectValue>
+</template>

package/src/select/index.ts

@@ -0,0 +1,11 @@
+export { default as Select } from "./Select.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectGroup } from "./SelectGroup.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as SelectItemText } from "./SelectItemText.vue";
+export { default as SelectLabel } from "./SelectLabel.vue";
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue";
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue";
+export { default as SelectSeparator } from "./SelectSeparator.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectValue } from "./SelectValue.vue";

package/src/separator/Separator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { SeparatorProps } from "reka-ui";
+import { Separator } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
+    orientation: "horizontal",
+    decorative: true,
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <Separator
+        v-bind="delegatedProps"
+        :class="cn('shrink-0 bg-border-secondary', props.orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', props.class)"
+    />
+</template>

package/src/separator/index.ts

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

package/src/sheet/Sheet.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DialogRoot, useForwardPropsEmits } from "reka-ui";
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DialogRoot v-bind="forwarded">
+        <slot />
+    </DialogRoot>
+</template>

package/src/sheet/SheetClose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from "reka-ui";
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+    <DialogClose v-bind="props">
+        <slot />
+    </DialogClose>
+</template>

package/src/sheet/SheetContent.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { type VariantProps, cva } from "class-variance-authority";
+import { X } from "lucide-vue-next";
+import { DialogClose, DialogContent, type DialogContentEmits, type DialogContentProps, DialogOverlay, DialogPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const sheetVariants = cva(
+    "gap-4 p-6 fixed z-50 bg-primary shadow-2xl transition ease-in-out data-[state=closed]:duration-300 data-[state=closed]:animate-out data-[state=open]:duration-400 data-[state=open]:animate-in",
+    {
+        variants: {
+            side: {
+                top: "inset-x-0 top-0 border-b border-border-secondary data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+                bottom: "inset-x-0 bottom-0 border-t border-border-secondary data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                left: "inset-y-0 left-0 sm:max-w-md h-full w-3/4 border-r border-border-secondary data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+                right: "inset-y-0 right-0 sm:max-w-xl h-full w-full border-l border-border-secondary data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    },
+);
+
+interface SheetContentProps extends DialogContentProps {
+    side?: VariantProps<typeof sheetVariants>["side"];
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+    side: "right",
+});
+
+const emits = defineEmits<DialogContentEmits>();
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="inset-0 backdrop-blur-xs fixed z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        />
+        <DialogContent :class="cn(sheetVariants({ side: props.side }), props.class)" v-bind="forwarded">
+            <slot />
+
+            <DialogClose
+                class="right-4 top-4 bg-gray-100 dark:bg-gray-800 p-1.5 hover:bg-gray-200 dark:hover:bg-gray-700 absolute rounded-lg text-tertiary transition-colors hover:text-primary focus:ring-2 focus:ring-brand-500/20 focus:outline-none"
+            >
+                <X class="size-4" />
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

package/src/sheet/SheetDescription.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { DialogDescription, type DialogDescriptionProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <DialogDescription :class="cn('text-sm text-tertiary', props.class)" v-bind="props">
+        <slot />
+    </DialogDescription>
+</template>

package/src/sheet/SheetHeader.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>
+    <div :class="cn('space-y-1.5 pb-4 flex flex-col border-b border-border-secondary text-left', props.class)">
+        <slot />
+    </div>
+</template>

package/src/sheet/SheetTitle.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { DialogTitle, type DialogTitleProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <DialogTitle :class="cn('font-semibold text-lg text-primary', props.class)" v-bind="props">
+        <slot />
+    </DialogTitle>
+</template>

package/src/sheet/SheetTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from "reka-ui";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+    <DialogTrigger v-bind="props">
+        <slot />
+    </DialogTrigger>
+</template>

package/src/sheet/index.ts

@@ -0,0 +1,7 @@
+export { default as Sheet } from "./Sheet.vue";
+export { default as SheetTrigger } from "./SheetTrigger.vue";
+export { default as SheetClose } from "./SheetClose.vue";
+export { default as SheetContent } from "./SheetContent.vue";
+export { default as SheetHeader } from "./SheetHeader.vue";
+export { default as SheetTitle } from "./SheetTitle.vue";
+export { default as SheetDescription } from "./SheetDescription.vue";

package/src/sidebar/Sidebar.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./index";
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { cn } from "../lib/utils";
+import { Sheet, SheetContent } from "../sheet";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+interface Props {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    side: "left",
+    variant: "sidebar",
+    collapsible: "offcanvas",
+});
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+const currentWidth = computed(() => {
+    if (state.value === "collapsed") {
+        return props.collapsible === "icon" ? "var(--sidebar-width-icon)" : "0px";
+    }
+    return "var(--sidebar-width)";
+});
+</script>
+
+<template>
+    <div
+        v-if="collapsible === 'none'"
+        :class="cn('flex h-full w-[var(--sidebar-width)] shrink-0 flex-col border-r border-border-secondary bg-primary text-primary', props.class)"
+        v-bind="$attrs"
+    >
+        <slot />
+    </div>
+
+    <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+        <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            :side="side"
+            class="p-0 w-[var(--sidebar-width)] border-border-secondary bg-primary text-primary [&>button]:hidden"
+            :style="{
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            }"
+        >
+            <div class="flex h-full w-full flex-col">
+                <slot />
+            </div>
+        </SheetContent>
+    </Sheet>
+
+    <div
+        v-else
+        class="group peer md:block hidden shrink-0 text-primary"
+        :data-state="state"
+        :data-collapsible="state === 'collapsed' ? collapsible : ''"
+        :data-variant="variant"
+        :data-side="side"
+    >
+        <!-- Sidebar Gap Spacer on desktop -->
+        <div class="relative h-svh shrink-0 bg-transparent transition-[width] duration-200 ease-linear" :style="{ width: currentWidth }" />
+        <!-- Fixed Sidebar Container -->
+        <div
+            :class="
+                cn(
+                    'inset-y-0 md:flex fixed z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear',
+                    side === 'left'
+                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+                    variant === 'floating' || variant === 'inset'
+                        ? 'p-2'
+                        : 'border-border-secondary group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                    props.class,
+                )
+            "
+            :style="{ width: currentWidth }"
+            v-bind="$attrs"
+        >
+            <div
+                data-sidebar="sidebar"
+                :class="
+                    cn(
+                        'flex h-full w-full flex-col border-border-secondary bg-primary text-primary',
+                        variant === 'floating' && 'rounded-xl border shadow-sm',
+                        variant === 'inset' && 'rounded-xl border shadow-sm',
+                    )
+                "
+            >
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>

package/src/sidebar/SidebarContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+import { ScrollArea } from "../scroll-area";
+
+interface Props {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <div data-sidebar="content" class="min-h-0 flex flex-1 flex-col group-data-[collapsible=icon]:overflow-hidden">
+        <ScrollArea class="min-h-0 flex-1">
+            <div :class="cn('gap-2 p-2 flex flex-col', props.class)">
+                <slot />
+            </div>
+        </ScrollArea>
+    </div>
+</template>

package/src/sidebar/SidebarFooter.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>
+    <div data-sidebar="footer" :class="cn('gap-2 p-3 flex flex-col border-t border-border-secondary', props.class)">
+        <slot />
+    </div>
+</template>

package/src/sidebar/SidebarGroup.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>
+    <div data-sidebar="group" :class="cn('min-w-0 p-2 relative flex w-full flex-col', props.class)">
+        <slot />
+    </div>
+</template>

package/src/sidebar/SidebarGroupAction.vue

@@ -0,0 +1,31 @@
+<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 {
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "button",
+});
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="group-action"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                'right-3 top-3.5 w-5 p-0 [&>svg]:size-4 absolute flex aspect-square cursor-pointer items-center justify-center rounded-md text-tertiary transition-transform outline-none hover:bg-secondary hover:text-primary focus-visible:ring-2 [&>svg]:shrink-0',
+                'group-data-[collapsible=icon]:hidden',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Primitive>
+</template>

package/src/sidebar/SidebarGroupContent.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>
+    <div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
+        <slot />
+    </div>
+</template>

package/src/sidebar/SidebarGroupLabel.vue

@@ -0,0 +1,31 @@
+<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 {
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "div",
+});
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="group-label"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                'h-8 px-2 font-semibold tracking-wider [&>svg]:size-4 flex shrink-0 items-center rounded-md text-xs text-tertiary uppercase transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:shrink-0',
+                'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Primitive>
+</template>

package/src/sidebar/SidebarHeader.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>
+    <div data-sidebar="header" :class="cn('gap-2 p-3 flex flex-col border-b border-border-secondary', props.class)">
+        <slot />
+    </div>
+</template>

package/src/sidebar/SidebarInput.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { Input } from "../input";
+import { cn } from "../lib/utils";
+
+interface Props {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <Input
+        data-sidebar="input"
+        :class="cn('h-8 w-full border-border-secondary bg-primary shadow-none focus-visible:ring-2 focus-visible:ring-brand-500', props.class)"
+    >
+        <slot />
+    </Input>
+</template>

package/src/sidebar/SidebarInset.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>
+    <main
+        data-sidebar="inset"
+        :class="
+            cn(
+                'min-w-0 relative flex min-h-svh flex-1 flex-col bg-primary',
+                'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))]',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </main>
+</template>

package/src/sidebar/SidebarMenu.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>
+    <ul data-sidebar="menu" :class="cn('min-w-0 gap-1 flex w-full flex-col', props.class)">
+        <slot />
+    </ul>
+</template>

package/src/sidebar/SidebarMenuAction.vue

@@ -0,0 +1,37 @@
+<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 {
+    showOnHover?: boolean;
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "button",
+});
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="menu-action"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                'right-1 top-1.5 w-5 p-0 [&>svg]:size-4 absolute flex aspect-square cursor-pointer items-center justify-center rounded-md text-tertiary transition-transform outline-none hover:bg-secondary hover:text-primary focus-visible:ring-2 [&>svg]:shrink-0',
+                'after:-inset-2 md:after:hidden after:absolute',
+                'peer-data-[size=sm]/menu-button:top-1',
+                'peer-data-[size=default]/menu-button:top-1.5',
+                'peer-data-[size=lg]/menu-button:top-2.5',
+                'group-data-[collapsible=icon]:hidden',
+                showOnHover && 'md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Primitive>
+</template>

package/src/sidebar/SidebarMenuBadge.vue

@@ -0,0 +1,29 @@
+<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>
+    <div
+        data-sidebar="menu-badge"
+        :class="
+            cn(
+                'right-2 h-5 min-w-5 px-1 font-medium pointer-events-none absolute flex items-center justify-center rounded-md bg-secondary text-xs text-secondary tabular-nums select-none',
+                'peer-hover/menu-button:text-primary peer-data-[active=true]/menu-button:bg-brand-100 peer-data-[active=true]/menu-button:text-brand-700',
+                'peer-data-[size=sm]/menu-button:top-1.5',
+                'peer-data-[size=default]/menu-button:top-2',
+                'peer-data-[size=lg]/menu-button:top-3.5',
+                'group-data-[collapsible=icon]:hidden',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </div>
+</template>