@ternent/core 0.0.1

package/packages/ui/src/primitives/Switch/Switch.props.ts

@@ -0,0 +1,21 @@
+import type { PropType } from "vue";
+import type { SwitchSize } from "./Switch.types";
+
+export const switchProps = {
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<SwitchSize>,
+    default: "md",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  invalid: {
+    type: Boolean,
+    default: false,
+  },
+};

package/packages/ui/src/primitives/Switch/Switch.spec.md

@@ -0,0 +1,49 @@
+# Switch
+
+## Purpose
+
+Binary on/off control primitive built on Ark UI.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `modelValue`: boolean
+- `size`: `sm | md`
+- `disabled`: boolean
+- `invalid`: boolean
+
+Slots:
+
+- default: inline label
+- `description`: supporting text below the label
+
+Events:
+
+- `update:modelValue`
+
+## States
+
+- unchecked
+- checked
+- focus-visible
+- disabled
+- invalid
+
+## Accessibility
+
+- built on Ark `Switch.Root`
+- includes hidden input for form participation
+- focus treatment is applied at the wrapper level with `focus-within`
+
+## Example
+
+```vue
+<Switch v-model="enabled">
+  Email notifications
+</Switch>
+```

package/packages/ui/src/primitives/Switch/Switch.types.ts

@@ -0,0 +1,3 @@
+export const switchSizeValues = ["sm", "md"] as const;
+
+export type SwitchSize = (typeof switchSizeValues)[number];

package/packages/ui/src/primitives/Switch/Switch.variants.ts

@@ -0,0 +1,34 @@
+import type { SwitchSize } from "./Switch.types";
+
+export const switchRootClass =
+  "group inline-flex w-fit items-start gap-3 rounded-[var(--ui-radius-md)] " +
+  "focus-within:ring-2 focus-within:ring-[var(--ui-ring)]";
+
+export const switchControlBaseClass =
+  "relative inline-flex shrink-0 rounded-full border border-[var(--ui-border)] bg-[var(--ui-tonal-secondary)] " +
+  "transition-[background-color,border-color,box-shadow] duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
+  "group-hover:border-[var(--ui-primary-muted)] data-[state=checked]:border-[var(--ui-primary)] data-[state=checked]:bg-[var(--ui-primary)]";
+
+export const switchControlStateClasses = {
+  default: "",
+  invalid:
+    "border-[var(--ui-critical)] data-[state=checked]:border-[var(--ui-critical)] data-[state=checked]:bg-[var(--ui-critical)]",
+  disabled: "opacity-50",
+} as const;
+
+export const switchControlSizeClasses: Record<SwitchSize, string> = {
+  sm: "h-5 w-9",
+  md: "h-6 w-10",
+};
+
+export const switchThumbBaseClass =
+  "absolute left-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--ui-bg)] shadow-[var(--ui-shadow-sm)] " +
+  "transition-transform duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)]";
+
+export const switchThumbSizeClasses: Record<SwitchSize, string> = {
+  sm: "size-4 data-[state=checked]:translate-x-4",
+  md: "size-5 data-[state=checked]:translate-x-4",
+};
+
+export const switchLabelClass = "text-[var(--ui-fg)]";
+export const switchDescriptionClass = "text-sm text-[var(--ui-fg-muted)]";

package/packages/ui/src/primitives/Switch/Switch.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { Switch } from "@ark-ui/vue/switch";
+import { computed, normalizeClass, useAttrs, useSlots } from "vue";
+import { twMerge } from "tailwind-merge";
+import { switchProps } from "./Switch.props";
+import {
+  switchControlBaseClass,
+  switchControlSizeClasses,
+  switchControlStateClasses,
+  switchDescriptionClass,
+  switchLabelClass,
+  switchRootClass,
+  switchThumbBaseClass,
+  switchThumbSizeClasses,
+} from "./Switch.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const attrs = useAttrs();
+const slots = useSlots();
+const props = defineProps(switchProps);
+
+const rootClass = computed(() => twMerge(switchRootClass, normalizeClass(attrs.class)));
+
+const controlClass = computed(() =>
+  twMerge(
+    switchControlBaseClass,
+    switchControlSizeClasses[props.size],
+    props.invalid ? switchControlStateClasses.invalid : switchControlStateClasses.default,
+    props.disabled ? switchControlStateClasses.disabled : "",
+  ),
+);
+
+const thumbClass = computed(() =>
+  twMerge(switchThumbBaseClass, switchThumbSizeClasses[props.size]),
+);
+
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+</script>
+
+<template>
+  <Switch.Root
+    :checked="props.modelValue"
+    :disabled="props.disabled"
+    :invalid="props.invalid"
+    :class="rootClass"
+    v-bind="rootAttrs"
+    @update:checked="emit('update:modelValue', $event)"
+  >
+    <Switch.HiddenInput />
+    <Switch.Control :class="controlClass">
+      <Switch.Thumb :class="thumbClass" />
+    </Switch.Control>
+
+    <div v-if="slots.default || slots.description" class="flex flex-col gap-1">
+      <Switch.Label v-if="slots.default" :class="switchLabelClass">
+        <slot />
+      </Switch.Label>
+      <div v-if="slots.description" :class="switchDescriptionClass">
+        <slot name="description" />
+      </div>
+    </div>
+  </Switch.Root>
+</template>

package/packages/ui/src/primitives/Tabs/Tabs.props.ts

@@ -0,0 +1,25 @@
+import type { PropType } from "vue";
+import type { TabItem, TabsSize, TabsVariant } from "./Tabs.types";
+
+export const tabsProps = {
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  items: {
+    type: Array as PropType<TabItem[]>,
+    default: () => [],
+  },
+  size: {
+    type: String as PropType<TabsSize>,
+    default: "md",
+  },
+  variant: {
+    type: String as PropType<TabsVariant>,
+    default: "underline",
+  },
+  lazyMount: {
+    type: Boolean,
+    default: true,
+  },
+};

package/packages/ui/src/primitives/Tabs/Tabs.spec.md

@@ -0,0 +1,48 @@
+# Tabs
+
+## Purpose
+
+Single-selection navigation primitive for switching between related panels.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `modelValue`
+- `items`: `{ value, label, disabled? }[]`
+- `size`: `sm | md`
+- `variant`: `underline | pill`
+- `lazyMount`
+
+Slots:
+
+- dynamic panel slots named `panel-{value}`
+
+## Accessibility
+
+- built on Ark tabs semantics
+- keyboard roving focus and active tab semantics come from Ark
+
+## Keyboard behavior
+
+- arrow keys move focus between tabs
+- Enter/Space activate the focused tab
+
+## Example
+
+```vue
+<Tabs
+  v-model="tab"
+  :items="[
+    { value: 'overview', label: 'Overview' },
+    { value: 'activity', label: 'Activity' },
+  ]"
+>
+  <template #panel-overview>Overview content</template>
+  <template #panel-activity>Activity content</template>
+</Tabs>
+```

package/packages/ui/src/primitives/Tabs/Tabs.types.ts

@@ -0,0 +1,11 @@
+export const tabsSizeValues = ["sm", "md"] as const;
+export const tabsVariantValues = ["underline", "pill"] as const;
+
+export type TabsSize = (typeof tabsSizeValues)[number];
+export type TabsVariant = (typeof tabsVariantValues)[number];
+
+export type TabItem = {
+  disabled?: boolean;
+  label: string;
+  value: string;
+};

package/packages/ui/src/primitives/Tabs/Tabs.variants.ts

@@ -0,0 +1,28 @@
+import type { TabsSize, TabsVariant } from "./Tabs.types";
+
+export const tabsRootClass = "w-full";
+export const tabsListBaseClass =
+  "relative flex w-full items-center gap-1 border-b border-[color-mix(in_srgb,var(--ui-border)_82%,transparent)]";
+export const tabsListVariantClasses: Record<TabsVariant, string> = {
+  underline: "",
+  pill: "rounded-[var(--ui-radius-md)] border border-[color-mix(in_srgb,var(--ui-border)_82%,transparent)] border-b bg-[var(--ui-tonal-tertiary)] p-1",
+};
+
+export const tabsTriggerBaseClass =
+  "inline-flex items-center justify-center rounded-[var(--ui-radius-sm)] font-medium transition-[background-color,color,box-shadow] " +
+  "duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)] " +
+  "disabled:pointer-events-none disabled:opacity-50";
+
+export const tabsTriggerSizeClasses: Record<TabsSize, string> = {
+  sm: "px-3 py-2 text-sm",
+  md: "px-4 py-2.5 text-sm",
+};
+
+export const tabsTriggerVariantClasses: Record<TabsVariant, string> = {
+  underline:
+    "rounded-none border-b-2 border-transparent text-[var(--ui-fg-muted)] hover:text-[var(--ui-fg)] " +
+    "data-[selected]:border-[var(--ui-primary)] data-[selected]:text-[var(--ui-fg)]",
+  pill: "text-[var(--ui-fg-muted)] hover:text-[var(--ui-fg)] data-[selected]:bg-[var(--ui-surface)] data-[selected]:text-[var(--ui-fg)] data-[selected]:shadow-[var(--ui-shadow-sm)] data-[selected]:border data-[selected]:border-[color-mix(in_srgb,var(--ui-border)_86%,transparent)]",
+};
+
+export const tabsContentClass = "pt-5 text-[var(--ui-fg)]";

package/packages/ui/src/primitives/Tabs/Tabs.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Tabs as ArkTabs } from "@ark-ui/vue/tabs";
+import { computed } from "vue";
+import { tabsProps } from "./Tabs.props";
+import {
+  tabsContentClass,
+  tabsListBaseClass,
+  tabsListVariantClasses,
+  tabsRootClass,
+  tabsTriggerBaseClass,
+  tabsTriggerSizeClasses,
+  tabsTriggerVariantClasses,
+} from "./Tabs.variants";
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const props = defineProps(tabsProps);
+
+const model = computed({
+  get: () => props.modelValue ?? props.items[0]?.value,
+  set: (value: string) => emit("update:modelValue", value),
+});
+</script>
+
+<template>
+  <ArkTabs.Root
+    v-model="model"
+    :lazy-mount="props.lazyMount"
+    unmount-on-exit
+    :class="tabsRootClass"
+  >
+    <ArkTabs.List :class="[tabsListBaseClass, tabsListVariantClasses[props.variant]]">
+      <ArkTabs.Trigger
+        v-for="item in props.items"
+        :key="item.value"
+        :value="item.value"
+        :disabled="item.disabled"
+        :class="[
+          tabsTriggerBaseClass,
+          tabsTriggerSizeClasses[props.size],
+          tabsTriggerVariantClasses[props.variant],
+        ]"
+      >
+        {{ item.label }}
+      </ArkTabs.Trigger>
+    </ArkTabs.List>
+
+    <ArkTabs.Content
+      v-for="item in props.items"
+      :key="`panel-${item.value}`"
+      :value="item.value"
+      :class="tabsContentClass"
+    >
+      <slot :name="`panel-${item.value}`" :item="item" />
+    </ArkTabs.Content>
+  </ArkTabs.Root>
+</template>

package/packages/ui/src/primitives/Textarea/Textarea.props.ts

@@ -0,0 +1,33 @@
+import type { PropType } from "vue";
+import type { TextareaResize, TextareaSize } from "./Textarea.types";
+
+export const textareaProps = {
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: String as PropType<TextareaSize>,
+    default: "md",
+  },
+  rows: {
+    type: Number,
+    default: 4,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  invalid: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  resize: {
+    type: String as PropType<TextareaResize>,
+    default: "vertical",
+  },
+};

package/packages/ui/src/primitives/Textarea/Textarea.spec.md

@@ -0,0 +1,59 @@
+# Textarea
+
+## Purpose
+
+Multiline text entry primitive for the v2 form system.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `modelValue`: string
+- `size`: `sm | md | lg`
+- `rows`: number
+- `disabled`: boolean
+- `invalid`: boolean
+- `readonly`: boolean
+- `resize`: `vertical | none`
+
+Events:
+
+- `update:modelValue`
+- `focus`
+- `blur`
+
+## States
+
+- default
+- hover
+- focus-visible
+- disabled
+- invalid
+- readonly
+
+## Accessibility
+
+- uses native `<textarea>` semantics
+- supports `aria-invalid` when invalid
+- relies on external labels and descriptions through attrs such as `id` and `aria-describedby`
+
+## Token usage
+
+- `--ui-surface`
+- `--ui-fg`
+- `--ui-fg-muted`
+- `--ui-border`
+- `--ui-primary`
+- `--ui-critical`
+- `--ui-ring`
+- `--ui-radius-md`
+
+## Examples
+
+```vue
+<Textarea v-model="notes" rows="6" />
+```

package/packages/ui/src/primitives/Textarea/Textarea.types.ts

@@ -0,0 +1,5 @@
+export const textareaSizeValues = ["sm", "md", "lg"] as const;
+export const textareaResizeValues = ["vertical", "none"] as const;
+
+export type TextareaSize = (typeof textareaSizeValues)[number];
+export type TextareaResize = (typeof textareaResizeValues)[number];

package/packages/ui/src/primitives/Textarea/Textarea.variants.ts

@@ -0,0 +1,27 @@
+import type { TextareaResize, TextareaSize } from "./Textarea.types";
+
+export const textareaBaseClass =
+  "flex w-full appearance-none border bg-[var(--ui-surface)] text-[var(--ui-fg)] " +
+  "placeholder:text-[var(--ui-fg-muted)] rounded-[var(--ui-radius-md)] border-[var(--ui-border)] " +
+  "transition-[box-shadow,border-color,background-color,color] duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)] focus-visible:border-[var(--ui-primary)] " +
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " +
+  "read-only:cursor-default read-only:bg-[var(--ui-tonal-tertiary)]";
+
+export const textareaStateClasses = {
+  default: "hover:border-[var(--ui-primary-muted)]",
+  invalid:
+    "border-[var(--ui-critical)] text-[var(--ui-fg)] " +
+    "focus-visible:border-[var(--ui-critical)] focus-visible:ring-[var(--ui-critical-muted)]",
+} as const;
+
+export const textareaSizeClasses: Record<TextareaSize, string> = {
+  sm: "px-3 py-2 text-sm",
+  md: "px-4 py-3 text-sm",
+  lg: "px-4 py-3 text-base",
+};
+
+export const textareaResizeClasses: Record<TextareaResize, string> = {
+  vertical: "resize-y",
+  none: "resize-none",
+};

package/packages/ui/src/primitives/Textarea/Textarea.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, normalizeClass, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+import { textareaProps } from "./Textarea.props";
+import {
+  textareaBaseClass,
+  textareaResizeClasses,
+  textareaSizeClasses,
+  textareaStateClasses,
+} from "./Textarea.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  blur: [event: FocusEvent];
+  focus: [event: FocusEvent];
+}>();
+
+const attrs = useAttrs();
+const props = defineProps(textareaProps);
+
+const classes = computed(() =>
+  twMerge(
+    textareaBaseClass,
+    textareaSizeClasses[props.size],
+    textareaResizeClasses[props.resize],
+    props.invalid ? textareaStateClasses.invalid : textareaStateClasses.default,
+    normalizeClass(attrs.class),
+  ),
+);
+
+const textareaAttrs = computed(() => {
+  const {
+    class: _class,
+    value: _value,
+    modelValue: _modelValue,
+    disabled: _disabled,
+    readonly: _readonly,
+    rows: _rows,
+    ...rest
+  } = attrs;
+
+  return rest;
+});
+
+function handleInput(event: Event) {
+  emit("update:modelValue", (event.target as HTMLTextAreaElement).value);
+}
+
+function handleFocus(event: FocusEvent) {
+  emit("focus", event);
+}
+
+function handleBlur(event: FocusEvent) {
+  emit("blur", event);
+}
+</script>
+
+<template>
+  <textarea
+    :value="props.modelValue"
+    :rows="props.rows"
+    :class="classes"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :aria-invalid="props.invalid ? 'true' : undefined"
+    :data-invalid="props.invalid ? 'true' : 'false'"
+    v-bind="textareaAttrs"
+    @input="handleInput"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  />
+</template>

package/packages/ui/src/primitives/Tooltip/Tooltip.props.ts

@@ -0,0 +1,21 @@
+import type { PropType } from "vue";
+import type { TooltipPlacement } from "./Tooltip.types";
+
+export const tooltipProps = {
+  placement: {
+    type: String as PropType<TooltipPlacement>,
+    default: "top",
+  },
+  openDelay: {
+    type: Number,
+    default: 200,
+  },
+  closeDelay: {
+    type: Number,
+    default: 100,
+  },
+  showArrow: {
+    type: Boolean,
+    default: true,
+  },
+};

package/packages/ui/src/primitives/Tooltip/Tooltip.spec.md

@@ -0,0 +1,45 @@
+# Tooltip
+
+## Purpose
+
+Lightweight non-interactive hint overlay for short explanatory text.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `open` via `v-model:open`
+- `placement`: `top | bottom | left | right`
+- `openDelay`
+- `closeDelay`
+- `showArrow`
+
+Slots:
+
+- `trigger`
+- default tooltip content
+
+## Accessibility
+
+- built on Ark tooltip semantics
+- intended for short supplemental text, not complex interactive content
+
+## Keyboard behavior
+
+- opens on focus and hover via Ark behavior
+- closes on blur, pointer leave, or Escape
+
+## Example
+
+```vue
+<Tooltip>
+  <template #trigger>
+    <Button variant="plain-secondary">?</Button>
+  </template>
+  Helpful context
+</Tooltip>
+```

package/packages/ui/src/primitives/Tooltip/Tooltip.types.ts

@@ -0,0 +1,3 @@
+export const tooltipPlacementValues = ["top", "bottom", "left", "right"] as const;
+
+export type TooltipPlacement = (typeof tooltipPlacementValues)[number];

package/packages/ui/src/primitives/Tooltip/Tooltip.variants.ts

@@ -0,0 +1,4 @@
+export const tooltipPositionerClass = "z-50 px-2";
+export const tooltipContentClass =
+  "max-w-xs rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] bg-[var(--ui-fg)] px-3 py-2 text-sm text-[var(--ui-bg)] shadow-[var(--ui-shadow-md)]";
+export const tooltipArrowClass = "fill-[var(--ui-fg)] stroke-[var(--ui-fg)]";

package/packages/ui/src/primitives/Tooltip/Tooltip.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Tooltip as ArkTooltip } from "@ark-ui/vue/tooltip";
+import { tooltipProps } from "./Tooltip.props";
+import { tooltipArrowClass, tooltipContentClass, tooltipPositionerClass } from "./Tooltip.variants";
+
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps(tooltipProps);
+</script>
+
+<template>
+  <ArkTooltip.Root
+    v-model:open="open"
+    :open-delay="props.openDelay"
+    :close-delay="props.closeDelay"
+    :positioning="{ placement: props.placement }"
+    lazy-mount
+    unmount-on-exit
+  >
+    <ArkTooltip.Trigger v-if="$slots.trigger" as-child>
+      <slot name="trigger" />
+    </ArkTooltip.Trigger>
+    <ArkTooltip.Positioner :class="tooltipPositionerClass">
+      <ArkTooltip.Content :class="tooltipContentClass">
+        <slot />
+        <ArkTooltip.Arrow v-if="props.showArrow" :class="tooltipArrowClass">
+          <ArkTooltip.ArrowTip />
+        </ArkTooltip.Arrow>
+      </ArkTooltip.Content>
+    </ArkTooltip.Positioner>
+  </ArkTooltip.Root>
+</template>

package/packages/ui/src/primitives/TreeView/TreeView.types.ts

@@ -0,0 +1,10 @@
+export type TreeNode = {
+  id: string;
+  label: string;
+  meta?: string;
+  value?: string;
+  rawValue?: unknown;
+  tone?: "default" | "critical";
+  badge?: string;
+  children?: TreeNode[];
+};