@slexn/codecenter-ui 1.0.0

package/src/components/ui/textarea/Textarea.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, useAttrs, useId } from "vue"
+import { cn } from "@/lib/utils"
+import TextareaControl from "./TextareaControl.vue"
+import type { TextareaModelValue, TextareaProps } from "./types"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  iconPosition: "start",
+  resize: "vertical",
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: TextareaModelValue]
+  input: [event: Event]
+  change: [event: Event]
+}>()
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const controlId = computed(() => props.id ?? generatedId)
+const hasMessage = computed(() => Boolean(props.message || props.error))
+const hasError = computed(() => Boolean(props.error))
+const shouldRenderField = computed(() =>
+  Boolean(
+    props.field
+      || props.fieldGroup
+      || props.label
+      || props.description
+      || hasMessage.value,
+  ),
+)
+const descriptionId = computed(() =>
+  props.description ? `${controlId.value}-description` : undefined,
+)
+const messageId = computed(() =>
+  hasMessage.value ? `${controlId.value}-message` : undefined,
+)
+const describedBy = computed(() => {
+  const value = [
+    attrs["aria-describedby"],
+    descriptionId.value,
+    messageId.value,
+  ].filter(Boolean).join(" ")
+
+  return value || undefined
+})
+const resolvedMessage = computed(() =>
+  typeof props.error === "string" ? props.error : props.message,
+)
+
+function handleUpdate(value: TextareaModelValue) {
+  emit("update:modelValue", value)
+}
+</script>
+
+<template>
+  <TextareaControl
+    v-if="!shouldRenderField"
+    v-bind="attrs"
+    :id="controlId"
+    :class="props.class"
+    :default-value="props.defaultValue"
+    :disabled="props.disabled"
+    :icon="props.icon"
+    :icon-class="props.iconClass"
+    :icon-position="props.iconPosition"
+    :invalid="props.invalid || hasError"
+    :model-value="props.modelValue"
+    :placeholder="props.placeholder"
+    :readonly="props.readonly"
+    :resize="props.resize"
+    :textarea-class="props.textareaClass"
+    @change="emit('change', $event)"
+    @input="emit('input', $event)"
+    @update:model-value="handleUpdate"
+  />
+
+  <div
+    v-else
+    :data-slot="props.fieldGroup ? 'textarea-field-group' : 'textarea-field'"
+    :class="
+      cn(
+        props.fieldGroup ? 'grid gap-4' : 'grid gap-2',
+        props.groupClass,
+      )
+    "
+  >
+    <div
+      data-slot="textarea-field"
+      :data-disabled="props.disabled ? '' : undefined"
+      :data-invalid="hasError ? '' : undefined"
+      :class="cn('grid gap-2', props.fieldClass)"
+    >
+      <label
+        v-if="props.label"
+        data-slot="textarea-label"
+        :for="controlId"
+        :class="
+          cn(
+            'text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 data-[disabled=true]:opacity-50',
+            props.labelClass,
+          )
+        "
+      >
+        {{ props.label }}
+      </label>
+
+      <TextareaControl
+        v-bind="attrs"
+        :id="controlId"
+        :aria-describedby="describedBy"
+        :class="props.class"
+        :default-value="props.defaultValue"
+        :disabled="props.disabled"
+        :icon="props.icon"
+        :icon-class="props.iconClass"
+        :icon-position="props.iconPosition"
+        :invalid="props.invalid || hasError"
+        :model-value="props.modelValue"
+        :placeholder="props.placeholder"
+        :readonly="props.readonly"
+        :resize="props.resize"
+        :textarea-class="props.textareaClass"
+        @change="emit('change', $event)"
+        @input="emit('input', $event)"
+        @update:model-value="handleUpdate"
+      />
+
+      <p
+        v-if="props.description"
+        :id="descriptionId"
+        data-slot="textarea-description"
+        :class="cn('text-xs leading-relaxed text-muted-foreground', props.descriptionClass)"
+      >
+        {{ props.description }}
+      </p>
+
+      <p
+        v-if="resolvedMessage"
+        :id="messageId"
+        data-slot="textarea-message"
+        :class="
+          cn(
+            'text-xs font-medium leading-relaxed',
+            hasError ? 'text-destructive' : 'text-muted-foreground',
+            props.messageClass,
+          )
+        "
+      >
+        {{ resolvedMessage }}
+      </p>
+    </div>
+  </div>
+</template>

package/src/components/ui/textarea/TextareaControl.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import { cn } from "@/lib/utils"
+import type { TextareaControlProps, TextareaModelValue } from "./types"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TextareaControlProps>(), {
+  iconPosition: "start",
+  resize: "vertical",
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: TextareaModelValue]
+  input: [event: Event]
+  change: [event: Event]
+}>()
+
+const attrs = useAttrs()
+
+const hasIcon = computed(() => Boolean(props.icon))
+const textareaValue = computed(() => props.modelValue ?? props.defaultValue ?? "")
+const controlAttrs = computed(() => ({
+  ...attrs,
+  value: textareaValue.value,
+}))
+const resizeClass = computed(() => {
+  if (props.resize === "none") return "resize-none"
+  if (props.resize === "horizontal") return "resize-x"
+  if (props.resize === "both") return "resize"
+
+  return "resize-y"
+})
+
+const textareaClasses = computed(() =>
+  cn(
+    "border-input bg-background text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-h-20 w-full min-w-0 rounded-md border px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+    resizeClass.value,
+    hasIcon.value
+      && "min-h-16 border-0 bg-transparent px-0 py-0 shadow-none focus-visible:border-transparent focus-visible:ring-0",
+    props.textareaClass,
+    !hasIcon.value && props.class,
+  ),
+)
+
+const wrapperClasses = computed(() =>
+  cn(
+    "border-input bg-background text-foreground focus-within:border-ring focus-within:ring-ring/50 flex min-h-20 w-full min-w-0 items-start gap-2 rounded-md border px-3 py-2 shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20",
+    props.class,
+  ),
+)
+
+function getTextareaModelValue(target: HTMLTextAreaElement) {
+  return target.value
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement
+
+  emit("update:modelValue", getTextareaModelValue(target))
+  emit("input", event)
+}
+
+function handleChange(event: Event) {
+  emit("change", event)
+}
+</script>
+
+<template>
+  <div
+    v-if="hasIcon"
+    data-slot="textarea-wrapper"
+    :class="wrapperClasses"
+  >
+    <component
+      :is="props.icon"
+      v-if="props.iconPosition === 'start'"
+      aria-hidden="true"
+      data-slot="textarea-icon"
+      :class="cn('mt-0.5 size-4 shrink-0 text-muted-foreground', props.iconClass)"
+    />
+
+    <textarea
+      v-bind="controlAttrs"
+      :id="props.id"
+      data-slot="textarea"
+      :aria-invalid="props.invalid ? true : undefined"
+      :class="textareaClasses"
+      :disabled="props.disabled"
+      :placeholder="props.placeholder"
+      :readonly="props.readonly"
+      @change="handleChange"
+      @input="handleInput"
+    />
+
+    <component
+      :is="props.icon"
+      v-if="props.iconPosition === 'end'"
+      aria-hidden="true"
+      data-slot="textarea-icon"
+      :class="cn('mt-0.5 size-4 shrink-0 text-muted-foreground', props.iconClass)"
+    />
+  </div>
+
+  <textarea
+    v-else
+    v-bind="controlAttrs"
+    :id="props.id"
+    data-slot="textarea"
+    :aria-invalid="props.invalid ? true : undefined"
+    :class="textareaClasses"
+    :disabled="props.disabled"
+    :placeholder="props.placeholder"
+    :readonly="props.readonly"
+    @change="handleChange"
+    @input="handleInput"
+  />
+</template>

package/src/components/ui/textarea/TextareaFieldGroup.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 data-slot="textarea-field-group" :class="cn('grid gap-4', props.class)">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,10 @@
+export { default as Textarea } from "./Textarea.vue"
+export { default as TextareaControl } from "./TextareaControl.vue"
+export { default as TextareaFieldGroup } from "./TextareaFieldGroup.vue"
+export type {
+  TextareaControlProps,
+  TextareaIconPosition,
+  TextareaModelValue,
+  TextareaProps,
+  TextareaResize,
+} from "./types"

package/src/components/ui/textarea/types.ts

@@ -0,0 +1,35 @@
+import type { Component, HTMLAttributes } from "vue"
+
+export type TextareaModelValue = string | number
+export type TextareaIconPosition = "start" | "end"
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both"
+
+export interface TextareaControlProps {
+  class?: HTMLAttributes["class"]
+  defaultValue?: TextareaModelValue
+  disabled?: boolean
+  icon?: Component
+  iconClass?: HTMLAttributes["class"]
+  iconPosition?: TextareaIconPosition
+  id?: string
+  invalid?: boolean
+  modelValue?: TextareaModelValue
+  placeholder?: string
+  readonly?: boolean
+  resize?: TextareaResize
+  textareaClass?: HTMLAttributes["class"]
+}
+
+export interface TextareaProps extends TextareaControlProps {
+  description?: string
+  descriptionClass?: HTMLAttributes["class"]
+  error?: string | boolean
+  field?: boolean
+  fieldClass?: HTMLAttributes["class"]
+  fieldGroup?: boolean
+  groupClass?: HTMLAttributes["class"]
+  label?: string
+  labelClass?: HTMLAttributes["class"]
+  message?: string
+  messageClass?: HTMLAttributes["class"]
+}

package/src/components/ui/tool/Tool.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import type { HTMLAttributes } from "vue"
+import {
+  ChevronDownIcon,
+  CircleCheckIcon,
+  CircleXIcon,
+  ClockIcon,
+  LoaderCircleIcon,
+  WrenchIcon,
+} from "@lucide/vue"
+import { createCodeLines } from "@/lib/code-highlight"
+import { cn } from "@/lib/utils"
+
+export type ToolSize = "sm" | "default" | "lg"
+export type ToolStatus =
+  | "pending"
+  | "awaiting-approval"
+  | "responded"
+  | "running"
+  | "completed"
+  | "error"
+  | "denied"
+
+export type ToolParameters =
+  | string
+  | number
+  | boolean
+  | Record<string, unknown>
+  | unknown[]
+  | null
+
+export interface ToolTogglePayload {
+  open: boolean
+}
+
+interface ToolProps {
+  class?: HTMLAttributes["class"]
+  collapsible?: boolean
+  defaultOpen?: boolean
+  highlight?: boolean
+  name?: string
+  open?: boolean
+  parameters?: ToolParameters
+  parametersLabel?: string
+  parametersLanguage?: string
+  showParameters?: boolean
+  showToggle?: boolean
+  size?: ToolSize
+  status?: ToolStatus
+  statusLabel?: string
+}
+
+const props = withDefaults(defineProps<ToolProps>(), {
+  collapsible: true,
+  defaultOpen: true,
+  highlight: true,
+  name: "tool",
+  parametersLabel: "Parameters",
+  parametersLanguage: "json",
+  showParameters: true,
+  showToggle: true,
+  size: "default",
+  status: "pending",
+})
+
+const emit = defineEmits<{
+  "toggle": [payload: ToolTogglePayload]
+  "update:open": [value: boolean]
+}>()
+
+const localOpen = ref(props.defaultOpen)
+const isOpen = computed(() => {
+  if (!props.collapsible) return true
+
+  return props.open ?? localOpen.value
+})
+const statusLabel = computed(() => props.statusLabel ?? defaultStatusLabel(props.status))
+const statusIcon = computed(() => {
+  if (props.status === "pending") return LoaderCircleIcon
+  if (props.status === "awaiting-approval") return ClockIcon
+  if (props.status === "responded") return CircleCheckIcon
+  if (props.status === "running") return ClockIcon
+  if (props.status === "completed") return CircleCheckIcon
+
+  return CircleXIcon
+})
+const parameterText = computed(() => formatParameters(props.parameters))
+const parameterLines = computed(() => createCodeLines(
+  parameterText.value,
+  props.parametersLanguage,
+  props.highlight,
+))
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      badge: "h-5 gap-1.5 px-2 text-xs",
+      badgeIcon: "size-3",
+      content: "px-3 pb-3 pt-2.5",
+      header: "gap-2.5 px-3 py-2.5",
+      icon: "size-3.5",
+      innerGap: "gap-2.5",
+      label: "text-xs",
+      name: "text-xs",
+      panel: "mt-2 min-h-12 rounded-lg px-3 py-2 text-xs leading-5",
+      toggleButton: "size-7",
+      toggleIcon: "size-3.5",
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      badge: "h-7 gap-2 px-3 text-sm",
+      badgeIcon: "size-4",
+      content: "px-5 pb-5 pt-4",
+      header: "gap-3 px-5 py-4",
+      icon: "size-5",
+      innerGap: "gap-3",
+      label: "text-xs",
+      name: "text-sm",
+      panel: "mt-3 min-h-20 rounded-xl px-4 py-3 text-xs leading-6",
+      toggleButton: "size-9",
+      toggleIcon: "size-4",
+    }
+  }
+
+  return {
+    badge: "h-6 gap-1.5 px-2.5 text-xs",
+    badgeIcon: "size-3.5",
+    content: "px-4 pb-4 pt-3",
+    header: "gap-2.5 px-4 py-3",
+    icon: "size-4",
+    innerGap: "gap-2.5",
+    label: "text-xs",
+    name: "text-[13px]",
+    panel: "mt-3 min-h-16 rounded-xl px-4 py-3 text-xs leading-6",
+    toggleButton: "size-8",
+    toggleIcon: "size-4",
+  }
+})
+
+function defaultStatusLabel(status: ToolStatus) {
+  if (status === "awaiting-approval") return "Awaiting Approval"
+  if (status === "responded") return "Responded"
+  if (status === "running") return "Running"
+  if (status === "completed") return "Completed"
+  if (status === "error") return "Error"
+  if (status === "denied") return "Denied"
+
+  return "Pending"
+}
+
+function statusClass(status: ToolStatus) {
+  if (status === "pending") return "text-foreground"
+  if (status === "awaiting-approval") return "text-amber-600"
+  if (status === "responded") return "text-blue-600"
+  if (status === "completed") return "text-emerald-600"
+  if (status === "error") return "text-destructive"
+  if (status === "denied") return "text-orange-600"
+
+  return "text-muted-foreground"
+}
+
+function formatParameters(value?: ToolParameters) {
+  if (value === undefined || value === null) return "{}"
+  if (typeof value === "string") return value
+
+  try {
+    return JSON.stringify(value, null, 2)
+  } catch {
+    return String(value)
+  }
+}
+
+function setOpen(nextOpen: boolean) {
+  if (!props.collapsible) return
+
+  const previousOpen = isOpen.value
+
+  if (props.open === undefined) {
+    localOpen.value = nextOpen
+  }
+
+  emit("update:open", nextOpen)
+
+  if (previousOpen !== nextOpen) {
+    emit("toggle", { open: nextOpen })
+  }
+}
+
+function toggleOpen() {
+  setOpen(!isOpen.value)
+}
+</script>
+
+<template>
+  <article
+    data-slot="tool"
+    :data-open="isOpen"
+    :data-size="props.size"
+    :data-status="props.status"
+    :class="cn('overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs', props.class)"
+  >
+    <header
+      data-slot="tool-header"
+      :class="cn('flex items-center transition-colors', sizeClasses.header)"
+    >
+      <component
+        :is="props.collapsible ? 'button' : 'div'"
+        data-slot="tool-toggle"
+        :type="props.collapsible ? 'button' : undefined"
+        :aria-expanded="props.collapsible ? isOpen : undefined"
+        :class="cn('flex min-w-0 flex-1 items-center text-left outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50', sizeClasses.innerGap)"
+        @click="toggleOpen"
+      >
+        <WrenchIcon
+          data-slot="tool-icon"
+          aria-hidden="true"
+          :class="cn('shrink-0 text-muted-foreground', sizeClasses.icon)"
+        />
+
+        <span
+          data-slot="tool-name"
+          :class="cn('min-w-0 truncate font-semibold leading-tight tracking-normal', sizeClasses.name)"
+        >
+          {{ props.name }}
+        </span>
+
+        <span
+          data-slot="tool-status"
+          :class="cn('inline-flex shrink-0 items-center rounded-full bg-muted font-medium leading-none text-foreground', sizeClasses.badge)"
+        >
+          <component
+            :is="statusIcon"
+            data-slot="tool-status-icon"
+            aria-hidden="true"
+            :class="cn(sizeClasses.badgeIcon, statusClass(props.status), props.status === 'pending' && 'animate-spin')"
+          />
+          <span>{{ statusLabel }}</span>
+        </span>
+      </component>
+
+      <button
+        v-if="props.collapsible && props.showToggle"
+        data-slot="tool-toggle-icon"
+        type="button"
+        :aria-label="isOpen ? 'Collapse tool' : 'Expand tool'"
+        :aria-expanded="isOpen"
+        :class="
+          cn(
+            'inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+            sizeClasses.toggleButton,
+          )
+        "
+        @click="toggleOpen"
+      >
+        <ChevronDownIcon
+          aria-hidden="true"
+          :class="cn('transition-transform', sizeClasses.toggleIcon, isOpen && 'rotate-180')"
+        />
+      </button>
+    </header>
+
+    <section
+      v-if="isOpen && props.showParameters"
+      data-slot="tool-content"
+      :class="sizeClasses.content"
+    >
+      <div
+        data-slot="tool-parameters-label"
+        :class="cn('font-semibold uppercase leading-none text-muted-foreground', sizeClasses.label)"
+      >
+        {{ props.parametersLabel }}
+      </div>
+
+      <pre
+        data-slot="tool-parameters"
+        :class="cn('overflow-auto border bg-background font-mono text-foreground whitespace-pre-wrap break-words', sizeClasses.panel)"
+      ><slot
+        name="parameters"
+        :parameters="props.parameters"
+        :text="parameterText"
+        :lines="parameterLines"
+      ><code
+        data-slot="tool-parameters-code"
+        :data-language="props.parametersLanguage"
+        class="block min-w-0 whitespace-pre-wrap break-words"
+      ><span
+        v-for="line in parameterLines"
+        :key="line.number"
+        data-slot="tool-parameters-line"
+        :data-line="line.number"
+        class="block min-h-[1lh]"
+      ><span
+        v-if="line.isEmpty"
+        aria-hidden="true"
+      >&nbsp;</span><span
+        v-else
+        data-slot="tool-parameters-token"
+        v-html="line.html"
+      /></span></code></slot></pre>
+    </section>
+  </article>
+</template>

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

@@ -0,0 +1,7 @@
+export { default as Tool } from "./Tool.vue"
+export type {
+  ToolParameters,
+  ToolSize,
+  ToolStatus,
+  ToolTogglePayload,
+} from "./Tool.vue"

package/src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,19 @@
+<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-slot="slotProps"
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>