@slexn/codecenter-ui 1.0.0

package/src/components/ui/stepper/StepperTitle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { StepperTitleProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperTitle as StepperPrimitiveTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperPrimitiveTitle
+    data-slot="stepper-title"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none text-foreground transition-colors group-data-[state=inactive]:text-muted-foreground group-data-[disabled]:text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </StepperPrimitiveTitle>
+</template>

package/src/components/ui/stepper/StepperTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { StepperTriggerProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperTrigger as StepperPrimitiveTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperPrimitiveTrigger
+    data-slot="stepper-trigger"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus-visible:border-ring focus-visible:ring-ring/50 relative z-10 inline-flex min-w-0 items-center gap-3 rounded-md text-left outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </StepperPrimitiveTrigger>
+</template>

package/src/components/ui/stepper/index.ts

@@ -0,0 +1,7 @@
+export { default as Stepper } from "./Stepper.vue"
+export { default as StepperDescription } from "./StepperDescription.vue"
+export { default as StepperIndicator } from "./StepperIndicator.vue"
+export { default as StepperItem } from "./StepperItem.vue"
+export { default as StepperSeparator } from "./StepperSeparator.vue"
+export { default as StepperTitle } from "./StepperTitle.vue"
+export { default as StepperTrigger } from "./StepperTrigger.vue"

package/src/components/ui/switch/Switch.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<
+  SwitchRootProps & {
+    class?: HTMLAttributes["class"]
+    thumbClass?: HTMLAttributes["class"]
+  }
+>()
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "thumbClass")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    data-slot="switch"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-[background-color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      :class="
+        cn(
+          'bg-background pointer-events-none block size-4 rounded-full shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+          props.thumbClass,
+        )
+      "
+    />
+  </SwitchRoot>
+</template>

package/src/components/ui/switch/index.ts

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

package/src/components/ui/table/Table.vue

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

package/src/components/ui/table/TableBody.vue

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

package/src/components/ui/table/TableCaption.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
+  >
+    <slot />
+  </caption>
+</template>

package/src/components/ui/table/TableCell.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  colspan?: number | string
+}>()
+</script>
+
+<template>
+  <td
+    data-slot="table-cell"
+    :colspan="props.colspan"
+    :class="
+      cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>

package/src/components/ui/table/TableEmpty.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import TableCell from "./TableCell.vue"
+import TableRow from "./TableRow.vue"
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  colspan?: number | string
+}>(), {
+  colspan: 1,
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :colspan="props.colspan"
+      :class="
+        cn(
+          'p-4 text-sm text-foreground',
+          props.class,
+        )
+      "
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>

package/src/components/ui/table/TableFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tfoot
+    data-slot="table-footer"
+    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
+  >
+    <slot />
+  </tfoot>
+</template>

package/src/components/ui/table/TableHead.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <th
+    data-slot="table-head"
+    :class="
+      cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </th>
+</template>

package/src/components/ui/table/TableHeader.vue

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

package/src/components/ui/table/TableRow.vue

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

package/src/components/ui/table/index.ts

@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue"
+export { default as TableBody } from "./TableBody.vue"
+export { default as TableCaption } from "./TableCaption.vue"
+export { default as TableCell } from "./TableCell.vue"
+export { default as TableEmpty } from "./TableEmpty.vue"
+export { default as TableFooter } from "./TableFooter.vue"
+export { default as TableHead } from "./TableHead.vue"
+export { default as TableHeader } from "./TableHeader.vue"
+export { default as TableRow } from "./TableRow.vue"

package/src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { TabsRootEmits, TabsRootProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsRoot as TabsPrimitiveRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TabsRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TabsPrimitiveRoot
+    v-slot="slotProps"
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="cn('flex flex-col', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TabsPrimitiveRoot>
+</template>

package/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { TabsContentProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsContent as TabsPrimitiveContent, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsPrimitiveContent
+    data-slot="tabs-content"
+    v-bind="forwardedProps"
+    :class="cn('flex-1 outline-none', props.class)"
+  >
+    <slot />
+  </TabsPrimitiveContent>
+</template>

package/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { TabsListProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsList as TabsPrimitiveList, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsPrimitiveList
+    data-slot="tabs-list"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-border text-muted-foreground inline-flex h-10 w-full max-w-full items-center justify-start gap-5 overflow-x-auto border-b',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsPrimitiveList>
+</template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { TabsTriggerProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsTrigger as TabsPrimitiveTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsPrimitiveTrigger
+    data-slot="tabs-trigger"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus-visible:border-ring focus-visible:ring-ring/50 data-[state=active]:border-foreground data-[state=active]:text-foreground relative -mb-px inline-flex h-10 flex-none items-center justify-center gap-1.5 border-b-2 border-transparent px-0 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-[border-color,color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsPrimitiveTrigger>
+</template>

package/src/components/ui/tabs/index.ts

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

package/src/components/ui/tag/Tag.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { Component, HTMLAttributes } from "vue"
+import { XIcon } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+import { tagVariants, type TagVariants } from "./variants"
+
+interface TagProps {
+  class?: HTMLAttributes["class"]
+  icon?: Component
+  iconClass?: HTMLAttributes["class"]
+  labelClass?: HTMLAttributes["class"]
+  removable?: boolean
+  removeLabel?: string
+  size?: TagVariants["size"]
+  variant?: TagVariants["variant"]
+}
+
+const props = withDefaults(defineProps<TagProps>(), {
+  removeLabel: "Remove tag",
+})
+
+const emit = defineEmits<{
+  (event: "remove"): void
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="tag"
+    :class="cn(tagVariants({ size: props.size, variant: props.variant }), props.class)"
+  >
+    <component
+      :is="props.icon"
+      v-if="props.icon"
+      data-slot="tag-icon"
+      aria-hidden="true"
+      :class="props.iconClass"
+    />
+
+    <span data-slot="tag-label" :class="cn('min-w-0 truncate', props.labelClass)">
+      <slot />
+    </span>
+
+    <button
+      v-if="props.removable"
+      data-slot="tag-remove"
+      type="button"
+      :aria-label="props.removeLabel"
+      class="-mr-1 inline-flex shrink-0 items-center justify-center rounded-full p-0.5 text-current opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+      @click.stop="emit('remove')"
+    >
+      <XIcon data-slot="tag-remove-icon" aria-hidden="true" />
+    </button>
+  </span>
+</template>

package/src/components/ui/tag/index.ts

@@ -0,0 +1,2 @@
+export { default as Tag } from "./Tag.vue"
+export { tagVariants, type TagVariants } from "./variants"

package/src/components/ui/tag/variants.ts

@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const tagVariants = cva(
+  "inline-flex max-w-full shrink-0 items-center gap-1 rounded-full border font-medium whitespace-nowrap outline-none transition-[background-color,border-color,color,box-shadow] focus-within:ring-[3px] focus-within:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground focus-within:ring-destructive/30",
+        muted: "border-transparent bg-muted text-muted-foreground",
+        outline: "border-border bg-background text-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+      },
+      size: {
+        default:
+          "h-7 px-2.5 text-xs [&_[data-slot=tag-icon]]:size-3.5 [&_[data-slot=tag-remove-icon]]:size-3.5",
+        lg: "h-8 px-3 text-sm [&_[data-slot=tag-icon]]:size-4 [&_[data-slot=tag-remove-icon]]:size-4",
+        sm: "h-6 px-2 text-xs [&_[data-slot=tag-icon]]:size-3 [&_[data-slot=tag-remove-icon]]:size-3",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+  },
+)
+
+export type TagVariants = VariantProps<typeof tagVariants>