@ternent/core 0.0.1

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Popover as ArkPopover } from "@ark-ui/vue/popover";
+import { computed, useSlots } from "vue";
+import { popoverProps } from "./Popover.props";
+import {
+  popoverArrowClass,
+  popoverBodyClass,
+  popoverCloseClass,
+  popoverContentClass,
+  popoverDescriptionClass,
+  popoverFooterClass,
+  popoverHeaderClass,
+  popoverPositionerClass,
+  popoverTitleClass,
+} from "./Popover.variants";
+
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps(popoverProps);
+const slots = useSlots();
+
+const hasHeader = computed(() =>
+  Boolean(props.title || props.description || slots.header || props.showClose),
+);
+</script>
+
+<template>
+  <ArkPopover.Root v-model:open="open" :positioning="{ placement: props.placement }">
+    <ArkPopover.Trigger v-if="$slots.trigger" as-child>
+      <slot name="trigger" />
+    </ArkPopover.Trigger>
+    <ArkPopover.Positioner :class="popoverPositionerClass">
+      <ArkPopover.Content :class="popoverContentClass">
+        <ArkPopover.Arrow v-if="props.showArrow" :class="popoverArrowClass">
+          <ArkPopover.ArrowTip />
+        </ArkPopover.Arrow>
+
+        <div v-if="hasHeader" :class="popoverHeaderClass">
+          <slot name="header">
+            <div class="min-w-0 flex-1">
+              <ArkPopover.Title v-if="props.title" :class="popoverTitleClass">
+                {{ props.title }}
+              </ArkPopover.Title>
+              <ArkPopover.Description v-if="props.description" :class="popoverDescriptionClass">
+                {{ props.description }}
+              </ArkPopover.Description>
+            </div>
+          </slot>
+          <ArkPopover.CloseTrigger
+            v-if="props.showClose"
+            :class="popoverCloseClass"
+            aria-label="Close popover"
+          >
+            <svg viewBox="0 0 24 24" fill="none" class="size-4" aria-hidden="true">
+              <path
+                d="M6 6l12 12M18 6 6 18"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+              />
+            </svg>
+          </ArkPopover.CloseTrigger>
+        </div>
+
+        <div :class="popoverBodyClass">
+          <slot />
+        </div>
+
+        <div v-if="$slots.footer" :class="popoverFooterClass">
+          <slot name="footer" />
+        </div>
+      </ArkPopover.Content>
+    </ArkPopover.Positioner>
+  </ArkPopover.Root>
+</template>

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

@@ -0,0 +1,29 @@
+import type { PropType } from "vue";
+import type { RadioGroupOption, RadioGroupOrientation, RadioGroupSize } from "./RadioGroup.types";
+
+export const radioGroupProps = {
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  options: {
+    type: Array as PropType<RadioGroupOption[]>,
+    default: () => [],
+  },
+  orientation: {
+    type: String as PropType<RadioGroupOrientation>,
+    default: "vertical",
+  },
+  size: {
+    type: String as PropType<RadioGroupSize>,
+    default: "md",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  invalid: {
+    type: Boolean,
+    default: false,
+  },
+};

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

@@ -0,0 +1,50 @@
+# RadioGroup
+
+## Purpose
+
+Single-selection choice primitive built on Ark UI.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `modelValue`: string
+- `options`: `{ value, label, description?, disabled? }[]`
+- `orientation`: `horizontal | vertical`
+- `size`: `sm | md`
+- `disabled`: boolean
+- `invalid`: boolean
+
+Events:
+
+- `update:modelValue`
+
+## States
+
+- unchecked
+- checked
+- focus-visible
+- disabled
+- invalid
+
+## Accessibility
+
+- built on Ark `RadioGroup.Root`
+- each option includes a hidden input and item control
+- external group labelling can be passed through standard attrs such as `aria-label`
+
+## Example
+
+```vue
+<RadioGroup
+  v-model="plan"
+  :options="[
+    { value: 'starter', label: 'Starter' },
+    { value: 'pro', label: 'Pro', description: 'Best for teams' },
+  ]"
+/>
+```

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

@@ -0,0 +1,12 @@
+export const radioGroupSizeValues = ["sm", "md"] as const;
+export const radioGroupOrientationValues = ["horizontal", "vertical"] as const;
+
+export type RadioGroupSize = (typeof radioGroupSizeValues)[number];
+export type RadioGroupOrientation = (typeof radioGroupOrientationValues)[number];
+
+export type RadioGroupOption = {
+  description?: string;
+  disabled?: boolean;
+  label: string;
+  value: string;
+};

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

@@ -0,0 +1,48 @@
+import type { RadioGroupOrientation, RadioGroupSize } from "./RadioGroup.types";
+
+export const radioGroupRootClass = "flex w-full";
+
+export const radioGroupListOrientationClasses: Record<RadioGroupOrientation, string> = {
+  horizontal: "flex flex-wrap gap-3",
+  vertical: "flex flex-col gap-3",
+};
+
+export const radioGroupItemBaseClass =
+  "group flex items-start gap-3 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] " +
+  "bg-[var(--ui-surface)] px-3 transition-[border-color,background-color,box-shadow] " +
+  "duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
+  "hover:border-[var(--ui-primary-muted)] focus-within:ring-2 focus-within:ring-[var(--ui-ring)] " +
+  "data-[state=checked]:border-[var(--ui-primary)] data-[state=checked]:bg-[var(--ui-primary-muted)]";
+
+export const radioGroupItemStateClasses = {
+  default: "",
+  invalid:
+    "border-[var(--ui-critical)] data-[state=checked]:border-[var(--ui-critical)] data-[state=checked]:bg-[var(--ui-critical-muted)]",
+  disabled: "opacity-50",
+} as const;
+
+export const radioGroupItemSizeClasses: Record<RadioGroupSize, string> = {
+  sm: "py-2",
+  md: "py-3",
+};
+
+export const radioGroupControlBaseClass =
+  "mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full border border-[var(--ui-border)] " +
+  "bg-[var(--ui-bg)] transition-[border-color,box-shadow] duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
+  "group-data-[state=checked]:border-[var(--ui-primary)]";
+
+export const radioGroupControlSizeClasses: Record<RadioGroupSize, string> = {
+  sm: "size-4",
+  md: "size-5",
+};
+
+export const radioGroupIndicatorBaseClass =
+  "rounded-full bg-[var(--ui-primary)] group-data-[state=checked]:bg-[var(--ui-primary)]";
+
+export const radioGroupIndicatorSizeClasses: Record<RadioGroupSize, string> = {
+  sm: "size-2",
+  md: "size-2.5",
+};
+
+export const radioGroupLabelClass = "text-[var(--ui-fg)]";
+export const radioGroupDescriptionClass = "text-sm text-[var(--ui-fg-muted)]";

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { RadioGroup } from "@ark-ui/vue/radio-group";
+import { computed, normalizeClass, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+import { radioGroupProps } from "./RadioGroup.props";
+import {
+  radioGroupControlBaseClass,
+  radioGroupControlSizeClasses,
+  radioGroupDescriptionClass,
+  radioGroupIndicatorBaseClass,
+  radioGroupIndicatorSizeClasses,
+  radioGroupItemBaseClass,
+  radioGroupItemSizeClasses,
+  radioGroupItemStateClasses,
+  radioGroupLabelClass,
+  radioGroupListOrientationClasses,
+  radioGroupRootClass,
+} from "./RadioGroup.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const attrs = useAttrs();
+const props = defineProps(radioGroupProps);
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (value: string) => emit("update:modelValue", value),
+});
+
+const rootClass = computed(() => twMerge(radioGroupRootClass, normalizeClass(attrs.class)));
+
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+function itemClass(disabled?: boolean) {
+  return twMerge(
+    radioGroupItemBaseClass,
+    radioGroupItemSizeClasses[props.size],
+    props.invalid ? radioGroupItemStateClasses.invalid : radioGroupItemStateClasses.default,
+    props.disabled || disabled ? radioGroupItemStateClasses.disabled : "",
+  );
+}
+</script>
+
+<template>
+  <RadioGroup.Root
+    v-model="model"
+    :orientation="props.orientation"
+    :disabled="props.disabled"
+    :invalid="props.invalid"
+    :class="rootClass"
+    v-bind="rootAttrs"
+  >
+    <div :class="radioGroupListOrientationClasses[props.orientation]">
+      <RadioGroup.Item
+        v-for="option in props.options"
+        :key="option.value"
+        :value="option.value"
+        :disabled="option.disabled"
+        :class="itemClass(option.disabled)"
+      >
+        <RadioGroup.ItemHiddenInput />
+        <RadioGroup.ItemControl
+          :class="[radioGroupControlBaseClass, radioGroupControlSizeClasses[props.size]]"
+        >
+          <RadioGroup.Indicator
+            :class="[radioGroupIndicatorBaseClass, radioGroupIndicatorSizeClasses[props.size]]"
+          />
+        </RadioGroup.ItemControl>
+        <div class="flex flex-col gap-1">
+          <RadioGroup.ItemText :class="radioGroupLabelClass">
+            {{ option.label }}
+          </RadioGroup.ItemText>
+          <div v-if="option.description" :class="radioGroupDescriptionClass">
+            {{ option.description }}
+          </div>
+        </div>
+      </RadioGroup.Item>
+    </div>
+  </RadioGroup.Root>
+</template>

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

@@ -0,0 +1,9 @@
+import type { PropType } from "vue";
+import type { SeparatorOrientation } from "./Separator.types";
+
+export const separatorProps = {
+  orientation: {
+    type: String as PropType<SeparatorOrientation>,
+    default: "horizontal",
+  },
+};

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

@@ -0,0 +1,15 @@
+# Separator
+
+## Purpose
+
+Low-emphasis structural divider primitive.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `orientation`

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

@@ -0,0 +1,3 @@
+export const separatorOrientationValues = ["horizontal", "vertical"] as const;
+
+export type SeparatorOrientation = (typeof separatorOrientationValues)[number];

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

@@ -0,0 +1,8 @@
+import type { SeparatorOrientation } from "./Separator.types";
+
+export const separatorBaseClass = "shrink-0 bg-[var(--ui-border)]";
+
+export const separatorOrientationClasses: Record<SeparatorOrientation, string> = {
+  horizontal: "h-px w-full",
+  vertical: "h-full min-h-4 w-px",
+};

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, normalizeClass, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+import { separatorProps } from "./Separator.props";
+import { separatorBaseClass, separatorOrientationClasses } from "./Separator.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const props = defineProps(separatorProps);
+
+const classes = computed(() =>
+  twMerge(
+    separatorBaseClass,
+    separatorOrientationClasses[props.orientation],
+    normalizeClass(attrs.class),
+  ),
+);
+</script>
+
+<template>
+  <div :class="classes" :aria-orientation="props.orientation" role="separator" />
+</template>

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

@@ -0,0 +1,21 @@
+import type { PropType } from "vue";
+import type { SkeletonShape, SkeletonSize } from "./Skeleton.types";
+
+export const skeletonProps = {
+  shape: {
+    type: String as PropType<SkeletonShape>,
+    default: "line",
+  },
+  size: {
+    type: String as PropType<SkeletonSize>,
+    default: "md",
+  },
+  lines: {
+    type: Number,
+    default: 1,
+  },
+  animated: {
+    type: Boolean,
+    default: true,
+  },
+};

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

@@ -0,0 +1,18 @@
+# Skeleton
+
+## Purpose
+
+Loading placeholder primitive.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `shape`
+- `size`
+- `lines`
+- `animated`

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

@@ -0,0 +1,5 @@
+export const skeletonShapeValues = ["line", "block", "circle"] as const;
+export const skeletonSizeValues = ["sm", "md", "lg"] as const;
+
+export type SkeletonShape = (typeof skeletonShapeValues)[number];
+export type SkeletonSize = (typeof skeletonSizeValues)[number];

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

@@ -0,0 +1,18 @@
+import type { SkeletonShape, SkeletonSize } from "./Skeleton.types";
+
+export const skeletonBaseClass =
+  "bg-[linear-gradient(90deg,var(--ui-tonal-secondary),var(--ui-surface-hover),var(--ui-tonal-secondary))] bg-[length:200%_100%]";
+
+export const skeletonShapeClasses: Record<SkeletonShape, string> = {
+  line: "w-full rounded-[var(--ui-radius-sm)]",
+  block: "w-full rounded-[var(--ui-radius-md)]",
+  circle: "aspect-square rounded-full",
+};
+
+export const skeletonSizeClasses: Record<SkeletonSize, string> = {
+  sm: "h-4",
+  md: "h-5",
+  lg: "h-6",
+};
+
+export const skeletonAnimatedClass = "animate-[skeleton-shimmer_1.6s_linear_infinite]";

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { skeletonProps } from "./Skeleton.props";
+import {
+  skeletonAnimatedClass,
+  skeletonBaseClass,
+  skeletonShapeClasses,
+  skeletonSizeClasses,
+} from "./Skeleton.variants";
+
+const props = defineProps(skeletonProps);
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div
+      v-for="line in Math.max(props.lines, 1)"
+      :key="line"
+      :class="[
+        skeletonBaseClass,
+        skeletonShapeClasses[props.shape],
+        skeletonSizeClasses[props.size],
+        props.animated ? skeletonAnimatedClass : '',
+      ]"
+    />
+  </div>
+</template>
+
+<style scoped>
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>

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

@@ -0,0 +1,13 @@
+import type { PropType } from "vue";
+import type { SpinnerSize, SpinnerTone } from "./Spinner.types";
+
+export const spinnerProps = {
+  size: {
+    type: String as PropType<SpinnerSize>,
+    default: "md",
+  },
+  tone: {
+    type: String as PropType<SpinnerTone>,
+    default: "primary",
+  },
+};

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

@@ -0,0 +1,16 @@
+# Spinner
+
+## Purpose
+
+Loading indicator primitive.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `size`
+- `tone`

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

@@ -0,0 +1,5 @@
+export const spinnerSizeValues = ["sm", "md", "lg"] as const;
+export const spinnerToneValues = ["primary", "muted", "critical"] as const;
+
+export type SpinnerSize = (typeof spinnerSizeValues)[number];
+export type SpinnerTone = (typeof spinnerToneValues)[number];

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

@@ -0,0 +1,15 @@
+import type { SpinnerSize, SpinnerTone } from "./Spinner.types";
+
+export const spinnerBaseClass = "animate-spin";
+
+export const spinnerSizeClasses: Record<SpinnerSize, string> = {
+  sm: "size-4",
+  md: "size-6",
+  lg: "size-8",
+};
+
+export const spinnerToneClasses: Record<SpinnerTone, string> = {
+  primary: "text-[var(--ui-primary)]",
+  muted: "text-[var(--ui-fg-muted)]",
+  critical: "text-[var(--ui-critical)]",
+};

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, normalizeClass, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+import { spinnerProps } from "./Spinner.props";
+import { spinnerBaseClass, spinnerSizeClasses, spinnerToneClasses } from "./Spinner.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const props = defineProps(spinnerProps);
+
+const classes = computed(() =>
+  twMerge(
+    spinnerBaseClass,
+    spinnerSizeClasses[props.size],
+    spinnerToneClasses[props.tone],
+    normalizeClass(attrs.class),
+  ),
+);
+</script>
+
+<template>
+  <svg viewBox="0 0 24 24" fill="none" :class="classes" aria-hidden="true">
+    <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" class="opacity-25" />
+    <path
+      d="M21 12a9 9 0 0 0-9-9"
+      stroke="currentColor"
+      stroke-width="3"
+      stroke-linecap="round"
+      class="opacity-90"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, shallowRef } from "vue";
+import { onClickOutside } from "@vueuse/core";
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  menuWidth: {
+    type: String,
+    default: "w-48",
+  },
+  menuAlign: {
+    type: String,
+    default: "right", // right, left
+  },
+  menuOffset: {
+    type: String,
+    default: "mt-2",
+  },
+  menuClass: {
+    type: String,
+    default: "",
+  },
+  containerClass: {
+    type: String,
+    default: "",
+  },
+  toggleClass: {
+    type: String,
+    default: "",
+  },
+});
+
+const wrapperRef = shallowRef<HTMLElement | null>(null);
+const isOpen = shallowRef(false);
+
+const alignClass = computed(() => (props.menuAlign === "left" ? "left-0" : "right-0"));
+
+function toggleMenu() {
+  if (props.disabled) return;
+  isOpen.value = !isOpen.value;
+}
+
+function closeMenu() {
+  isOpen.value = false;
+}
+
+onClickOutside(wrapperRef, () => {
+  isOpen.value = false;
+});
+</script>
+
+<template>
+  <div ref="wrapperRef" class="relative w-full" :class="containerClass">
+    <div
+      class="flex w-full items-center overflow-hidden rounded-full border border-[var(--ui-border)] bg-[var(--ui-bg)]/30"
+    >
+      <slot name="primary" :closeMenu="closeMenu" :isOpen="isOpen" />
+      <button
+        type="button"
+        class="border-l border-[var(--ui-border)] px-3 py-2 transition-colors hover:bg-[var(--ui-fg)]/5"
+        :class="toggleClass"
+        :disabled="disabled"
+        :aria-expanded="isOpen"
+        aria-haspopup="menu"
+        @click="toggleMenu"
+      >
+        <slot name="toggle" :isOpen="isOpen">
+          <svg
+            class="h-4 w-4 transition-transform"
+            :class="{ 'rotate-180': isOpen }"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.25 8.29a.75.75 0 0 1-.02-1.08Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </slot>
+      </button>
+    </div>
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0 scale-95 -translate-y-1"
+      enter-to-class="opacity-100 scale-100 translate-y-0"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100 scale-100 translate-y-0"
+      leave-to-class="opacity-0 scale-95 -translate-y-1"
+    >
+      <div
+        v-if="isOpen"
+        :class="[
+          'absolute z-50 rounded-xl border border-[var(--ui-border)] bg-[var(--ui-bg)] p-1 shadow-lg',
+          alignClass,
+          menuOffset,
+          menuWidth,
+          menuClass,
+        ]"
+      >
+        <slot name="menu" :closeMenu="closeMenu" :isOpen="isOpen" />
+      </div>
+    </Transition>
+  </div>
+</template>