@matta-trade/ui 0.0.0-stage → 0.2.1

package/src/tabs/Tabs.vue

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

package/src/tabs/TabsContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { TabsContent, type TabsContentProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <TabsContent
+        :class="cn('mt-4 ring-offset-primary focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-none', props.class)"
+        v-bind="props"
+    >
+        <slot />
+    </TabsContent>
+</template>

package/src/tabs/TabsList.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { TabsList, type TabsListProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <TabsList
+        :class="cn('h-10 p-1 inline-flex items-center justify-center rounded-lg border border-border-secondary bg-secondary text-tertiary', props.class)"
+        v-bind="props"
+    >
+        <slot />
+    </TabsList>
+</template>

package/src/tabs/TabsTrigger.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { TabsTrigger, type TabsTriggerProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <TabsTrigger
+        :class="
+            cn(
+                'px-3 py-1.5 font-medium ring-offset-primary inline-flex cursor-pointer items-center justify-center rounded-md text-sm whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary data-[state=active]:shadow-xs',
+                props.class,
+            )
+        "
+        v-bind="props"
+    >
+        <slot />
+    </TabsTrigger>
+</template>

package/src/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue";
+export { default as TabsList } from "./TabsList.vue";
+export { default as TabsTrigger } from "./TabsTrigger.vue";
+export { default as TabsContent } from "./TabsContent.vue";

package/src/tags-input/TagsInput.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { TagsInputRootEmits, TagsInputRootProps } from "reka-ui";
+import { TagsInputRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<TagsInputRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <TagsInputRoot
+        v-bind="forwarded"
+        :class="cn('gap-2 border-input bg-background px-3 py-2 flex flex-wrap items-center rounded-md border text-sm', props.class)"
+    >
+        <slot />
+    </TagsInputRoot>
+</template>

package/src/tags-input/TagsInputInput.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { TagsInputInputProps } from "reka-ui";
+import { TagsInputInput, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <TagsInputInput v-bind="forwardedProps" :class="cn('min-h-6 px-1 flex-1 bg-transparent text-sm focus:outline-none', props.class)" />
+</template>

package/src/tags-input/TagsInputItem.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { TagsInputItemProps } from "reka-ui";
+import { TagsInputItem, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <TagsInputItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'h-6 rounded data-[state=active]:ring-ring ring-offset-background flex items-center bg-secondary data-[state=active]:ring-2 data-[state=active]:ring-offset-2',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </TagsInputItem>
+</template>

package/src/tags-input/TagsInputItemDelete.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { X } from "lucide-vue-next";
+import type { TagsInputItemDeleteProps } from "reka-ui";
+import { TagsInputItemDelete, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <TagsInputItemDelete v-bind="forwardedProps" :class="cn('rounded mr-1 flex bg-transparent', props.class)">
+        <slot>
+            <X class="w-4 h-4" />
+        </slot>
+    </TagsInputItemDelete>
+</template>

package/src/tags-input/TagsInputItemText.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { TagsInputItemTextProps } from "reka-ui";
+import { TagsInputItemText, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <TagsInputItemText v-bind="forwardedProps" :class="cn('py-1 px-2 rounded bg-transparent text-sm', props.class)" />
+</template>

package/src/tags-input/index.ts

@@ -0,0 +1,5 @@
+export { default as TagsInput } from "./TagsInput.vue";
+export { default as TagsInputInput } from "./TagsInputInput.vue";
+export { default as TagsInputItem } from "./TagsInputItem.vue";
+export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue";
+export { default as TagsInputItemText } from "./TagsInputItemText.vue";

package/src/textarea/Textarea.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { useVModel } from "@vueuse/core";
+import { cn } from "../lib/utils";
+
+interface Props {
+    modelValue?: string;
+    class?: HTMLAttributes["class"];
+    placeholder?: string;
+    rows?: number;
+    maxlength?: number;
+    disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    rows: 4,
+    disabled: false,
+});
+
+const emits = defineEmits<{
+    (e: "update:modelValue", payload: string): void;
+}>();
+
+const modelValue = useVModel(props, "modelValue", emits, { passive: true });
+</script>
+
+<template>
+    <textarea
+        v-model="modelValue"
+        :rows="props.rows"
+        :placeholder="props.placeholder"
+        :maxlength="props.maxlength"
+        :disabled="props.disabled"
+        :class="
+            cn(
+                'px-3 py-2 ring-offset-primary flex w-full resize-none rounded-lg border border-border-primary bg-primary text-sm text-primary shadow-xs transition-colors placeholder:text-placeholder focus-visible:border-border-brand focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+                props.class,
+            )
+        "
+    />
+</template>

package/src/textarea/index.ts

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

package/src/tooltip/Tooltip.vue

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

package/src/tooltip/TooltipContent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui";
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+    sideOffset: 4,
+});
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <TooltipPortal>
+        <TooltipContent
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="
+                cn(
+                    'px-3 py-1.5 z-50 overflow-hidden rounded-md bg-primary-solid text-xs text-white shadow-md animate-in select-none fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+                    props.class,
+                )
+            "
+        >
+            <slot />
+        </TooltipContent>
+    </TooltipPortal>
+</template>

package/src/tooltip/TooltipProvider.vue

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

package/src/tooltip/TooltipRoot.vue

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

package/src/tooltip/TooltipTrigger.vue

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

package/src/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { default as TooltipProvider } from "./TooltipProvider.vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";

package/styles/kit.css

@@ -0,0 +1,100 @@
+@import "./theme.css";
+@import "./typography.css";
+
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:where(.dark-mode, .dark-mode *));
+@custom-variant label (& [data-label]);
+@custom-variant focus-input-within (&:has(input:focus));
+
+@utility scrollbar-hide {
+    /* For Webkit-based browsers (Chrome, Safari and Opera) */
+    &::-webkit-scrollbar {
+        display: none;
+        -webkit-appearance: none;
+    }
+
+    /* For IE, Edge and Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+@utility transition-inherit-all {
+    transition-property: inherit;
+    transition-duration: inherit;
+    transition-timing-function: inherit;
+}
+
+html,
+body {
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-variant-ligatures: contextual;
+    font-variant-ligatures: contextual;
+    -webkit-font-kerning: normal;
+    font-kerning: normal;
+}
+
+/* Hide the default expand arrow on Safari.  */
+details summary::-webkit-details-marker {
+    display: none;
+}
+
+/* Hide default arrows from number inputs. */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+/* Firefox */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+/* Hide the default clear button (X) from search inputs. */
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/* Hide the default outline on chart elements. */
+.recharts-surface,
+.recharts-surface g,
+.recharts-surface path {
+    outline: none;
+}
+
+:root {
+    --sidebar: hsl(0 0% 98%);
+    --sidebar-foreground: hsl(240 5.3% 26.1%);
+    --sidebar-primary: hsl(240 5.9% 10%);
+    --sidebar-primary-foreground: hsl(0 0% 98%);
+    --sidebar-accent: hsl(240 4.8% 95.9%);
+    --sidebar-accent-foreground: hsl(240 5.9% 10%);
+    --sidebar-border: hsl(220 13% 91%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+    --sidebar: hsl(240 5.9% 10%);
+    --sidebar-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-primary: hsl(224.3 76.3% 48%);
+    --sidebar-primary-foreground: hsl(0 0% 100%);
+    --sidebar-accent: hsl(240 3.7% 15.9%);
+    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-border: hsl(240 3.7% 15.9%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}