@ternent/core 0.0.1

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

@@ -0,0 +1,72 @@
+import type { ButtonSize, ButtonVariant } from "./Button.types";
+
+export const buttonBaseClass =
+  "inline-flex items-center justify-center gap-2 border border-transparent " +
+  "font-medium select-none whitespace-nowrap align-middle " +
+  "rounded-[var(--ui-radius-md)] " +
+  "transition-[transform,box-shadow,background-color,opacity,border-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)]";
+
+export const buttonStateClasses = {
+  interactive:
+    "cursor-pointer shadow-[var(--ui-shadow-sm)] " +
+    "hover:shadow-[var(--ui-shadow-md)] hover:translate-y-[var(--ui-lift-hover)] " +
+    "active:translate-y-0 active:scale-[var(--ui-scale-active)]",
+  disabled: "cursor-not-allowed pointer-events-none opacity-40 shadow-none",
+  loading: "cursor-progress pointer-events-none opacity-75 shadow-[var(--ui-shadow-sm)]",
+} as const;
+
+export const buttonVariantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "bg-[var(--ui-primary)] text-[var(--ui-on-primary)] " +
+    "hover:bg-[var(--ui-primary-hover)] active:bg-[var(--ui-primary-active)] " +
+    "hover:shadow-[var(--ui-glow-primary)]",
+
+  accent:
+    "bg-[var(--ui-accent)] text-[var(--ui-on-accent)] " +
+    "hover:bg-[var(--ui-accent-hover)] active:bg-[var(--ui-accent-active)] " +
+    "hover:shadow-[var(--ui-glow-accent)]",
+
+  secondary:
+    "bg-[var(--ui-tonal-secondary)] text-[var(--ui-fg)] " +
+    "hover:bg-[var(--ui-tonal-secondary-hover)]",
+
+  tertiary:
+    "bg-[var(--ui-tonal-tertiary)] text-[var(--ui-fg)] " +
+    "hover:bg-[var(--ui-tonal-tertiary-hover)]",
+
+  critical:
+    "bg-[var(--ui-critical)] text-[var(--ui-on-critical)] " +
+    "hover:bg-[var(--ui-critical-hover)] active:bg-[var(--ui-critical-active)] " +
+    "hover:shadow-[var(--ui-glow-critical)]",
+
+  "plain-primary":
+    "bg-transparent text-[var(--ui-primary)] shadow-none " +
+    "hover:bg-[var(--ui-primary-muted)] active:bg-[var(--ui-primary-hover)] " +
+    "hover:shadow-none",
+
+  "plain-secondary":
+    "bg-transparent text-[var(--ui-fg)] opacity-80 shadow-none " +
+    "hover:bg-[var(--ui-surface-hover)] hover:opacity-100 hover:shadow-none",
+
+  "critical-secondary":
+    "bg-transparent text-[var(--ui-critical)] border-[var(--ui-critical-muted)] shadow-none " +
+    "hover:bg-[var(--ui-critical-muted)] active:bg-[var(--ui-critical-hover)] " +
+    "hover:shadow-none",
+};
+
+export const buttonSizeClasses: Record<ButtonSize, string> = {
+  micro: "h-7 px-2 text-xs",
+  xs: "h-8 px-3 text-xs",
+  sm: "h-9 px-4 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-11 px-5 text-base",
+  xl: "h-12 px-6 text-base",
+  hero: "h-16 px-8 text-base uppercase tracking-[0.14em]",
+};
+
+export const buttonLabelClass = "inline-flex items-center gap-2";
+export const buttonAdornmentClass = "inline-flex shrink-0 items-center justify-center";
+export const buttonSpinnerClass =
+  "inline-block size-4 animate-spin rounded-full border-2 border-current border-r-transparent";

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, normalizeClass, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+import { buttonProps } from "./Button.props";
+import {
+  buttonAdornmentClass,
+  buttonBaseClass,
+  buttonLabelClass,
+  buttonSizeClasses,
+  buttonSpinnerClass,
+  buttonStateClasses,
+  buttonVariantClasses,
+} from "./Button.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+const attrs = useAttrs();
+const props = defineProps(buttonProps);
+
+const isButtonElement = computed(() => props.as === "button");
+const isInactive = computed(() => props.disabled || props.loading);
+
+const stateClass = computed(() => {
+  if (props.loading) {
+    return buttonStateClasses.loading;
+  }
+
+  if (props.disabled) {
+    return buttonStateClasses.disabled;
+  }
+
+  return buttonStateClasses.interactive;
+});
+
+const classes = computed(() =>
+  twMerge(
+    buttonBaseClass,
+    stateClass.value,
+    buttonVariantClasses[props.variant],
+    buttonSizeClasses[props.size],
+    normalizeClass(attrs.class),
+  ),
+);
+
+const forwardedAttrs = computed(() => {
+  const { class: _class, disabled: _disabled, type: _type, ...rest } = attrs;
+
+  return rest;
+});
+
+const componentAttrs = computed(() => ({
+  ...forwardedAttrs.value,
+  type: isButtonElement.value ? props.type : undefined,
+  disabled: isButtonElement.value ? isInactive.value : undefined,
+  "aria-busy": props.loading ? "true" : undefined,
+  "aria-disabled": !isButtonElement.value && isInactive.value ? "true" : undefined,
+  tabindex: !isButtonElement.value && isInactive.value ? -1 : attrs.tabindex,
+  "data-loading": props.loading ? "true" : "false",
+  "data-disabled": isInactive.value ? "true" : "false",
+}));
+
+function handleClick(event: MouseEvent) {
+  if (isInactive.value) {
+    event.preventDefault();
+    event.stopPropagation();
+    return;
+  }
+
+  emit("click", event);
+}
+</script>
+
+<template>
+  <component :is="props.as" :class="classes" v-bind="componentAttrs" @click="handleClick">
+    <span v-if="props.loading" :class="buttonSpinnerClass" aria-hidden="true" />
+    <span v-else-if="$slots.leading" :class="buttonAdornmentClass">
+      <slot name="leading" />
+    </span>
+    <span :class="buttonLabelClass">
+      <slot />
+    </span>
+    <span v-if="$slots.trailing" :class="buttonAdornmentClass">
+      <slot name="trailing" />
+    </span>
+  </component>
+</template>

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

@@ -0,0 +1,17 @@
+import type { PropType } from "vue";
+import type { CardPadding, CardVariant } from "./Card.types";
+
+export const cardProps = {
+  variant: {
+    type: String as PropType<CardVariant>,
+    default: "default",
+  },
+  padding: {
+    type: String as PropType<CardPadding>,
+    default: "md",
+  },
+  interactive: {
+    type: Boolean,
+    default: false,
+  },
+};

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

@@ -0,0 +1,29 @@
+# Card
+
+## Purpose
+
+Generic surface primitive for grouped content.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `variant`: `default | subtle | outline | elevated | panel`
+- `padding`: `sm | md | lg`
+- `interactive`: boolean
+
+## Variants
+
+- `default`: standard raised surface
+- `subtle`: quieter tonal surface
+- `outline`: transparent structural container
+- `elevated`: stronger separation for high-emphasis grouped content
+- `panel`: denser tonal panel for previews, examples, and technical callouts
+
+## Notes
+
+- Visual finish is token-driven and intended to support both application and marketing-style compositions without route-local styling.

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

@@ -0,0 +1,12 @@
+export const cardVariantValues = [
+  "default",
+  "subtle",
+  "outline",
+  "elevated",
+  "panel",
+  "showcase",
+] as const;
+export const cardPaddingValues = ["sm", "md", "lg"] as const;
+
+export type CardVariant = (typeof cardVariantValues)[number];
+export type CardPadding = (typeof cardPaddingValues)[number];

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

@@ -0,0 +1,27 @@
+import type { CardPadding, CardVariant } from "./Card.types";
+
+export const cardBaseClass =
+  "rounded-[var(--ui-radius-lg)] border text-[var(--ui-fg)] transition-[border-color,box-shadow,transform,background-color] " +
+  "duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)]";
+
+export const cardVariantClasses: Record<CardVariant, string> = {
+  default: "border-[var(--ui-border)] bg-[var(--ui-surface)] shadow-[var(--ui-shadow-sm)]",
+  subtle: "border-[var(--ui-border)] bg-[var(--ui-tonal-tertiary)] shadow-none",
+  outline: "border-[var(--ui-border)] bg-transparent shadow-none",
+  elevated: "border-[var(--ui-border)] bg-[var(--ui-surface)] shadow-[var(--ui-shadow-md)]",
+  panel: "border-[var(--ui-border)] bg-[var(--ui-tonal-secondary)] shadow-[var(--ui-shadow-md)]",
+  showcase:
+    "border-[color-mix(in_srgb,var(--ui-border)_74%,var(--ui-primary-muted))] " +
+    "bg-[linear-gradient(180deg,color-mix(in_srgb,var(--ui-primary)_12%,var(--ui-tonal-secondary))_0%,color-mix(in_srgb,var(--ui-bg)_84%,var(--ui-tonal-secondary))_100%)] " +
+    "shadow-[0_18px_48px_color-mix(in_srgb,var(--ui-primary)_14%,transparent),inset_0_1px_0_color-mix(in_srgb,var(--ui-fg)_8%,transparent)] " +
+    "backdrop-blur-sm",
+};
+
+export const cardPaddingClasses: Record<CardPadding, string> = {
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8",
+};
+
+export const cardInteractiveClass =
+  "cursor-pointer hover:-translate-y-[var(--ui-lift-hover)] hover:border-[var(--ui-primary-muted)] hover:shadow-[var(--ui-shadow-md)] focus-within:ring-2 focus-within:ring-[var(--ui-ring)]";

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, normalizeClass, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+import { cardProps } from "./Card.props";
+import {
+  cardBaseClass,
+  cardInteractiveClass,
+  cardPaddingClasses,
+  cardVariantClasses,
+} from "./Card.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const props = defineProps(cardProps);
+
+const classes = computed(() =>
+  twMerge(
+    cardBaseClass,
+    cardVariantClasses[props.variant],
+    cardPaddingClasses[props.padding],
+    props.interactive ? cardInteractiveClass : "",
+    normalizeClass(attrs.class),
+  ),
+);
+
+const cardAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+</script>
+
+<template>
+  <div :class="classes" v-bind="cardAttrs">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+import type { PropType } from "vue";
+import type { CheckboxCheckedValue, CheckboxSize } from "./Checkbox.types";
+
+export const checkboxProps = {
+  modelValue: {
+    type: [Boolean, String] as PropType<CheckboxCheckedValue>,
+    default: false,
+  },
+  size: {
+    type: String as PropType<CheckboxSize>,
+    default: "md",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  invalid: {
+    type: Boolean,
+    default: false,
+  },
+};

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

@@ -0,0 +1,51 @@
+# Checkbox
+
+## Purpose
+
+Binary or indeterminate choice primitive built on Ark UI.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `modelValue`: `boolean | "indeterminate"`
+- `size`: `sm | md`
+- `disabled`: boolean
+- `invalid`: boolean
+
+Slots:
+
+- default: inline label
+- `description`: supporting text below the label
+
+Events:
+
+- `update:modelValue`
+
+## States
+
+- unchecked
+- checked
+- indeterminate
+- focus-visible
+- disabled
+- invalid
+
+## Accessibility
+
+- built on Ark `Checkbox.Root`
+- includes hidden input for form participation
+- supports keyboard interaction through Ark
+- focus treatment is applied at the wrapper level with `focus-within`
+
+## Examples
+
+```vue
+<Checkbox v-model="agreed">
+  Accept terms
+</Checkbox>
+```

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

@@ -0,0 +1,4 @@
+export const checkboxSizeValues = ["sm", "md"] as const;
+
+export type CheckboxSize = (typeof checkboxSizeValues)[number];
+export type CheckboxCheckedValue = boolean | "indeterminate";

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

@@ -0,0 +1,34 @@
+import type { CheckboxSize } from "./Checkbox.types";
+
+export const checkboxRootClass =
+  "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 checkboxControlBaseClass =
+  "inline-flex shrink-0 items-center justify-center rounded-[var(--ui-radius-sm)] border " +
+  "border-[var(--ui-border)] bg-[var(--ui-surface)] text-[var(--ui-on-primary)] " +
+  "transition-[background-color,border-color,box-shadow,color] 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)] " +
+  "data-[state=indeterminate]:border-[var(--ui-primary)] data-[state=indeterminate]:bg-[var(--ui-primary)]";
+
+export const checkboxControlStateClasses = {
+  default: "",
+  invalid:
+    "border-[var(--ui-critical)] data-[state=checked]:border-[var(--ui-critical)] data-[state=checked]:bg-[var(--ui-critical)] " +
+    "data-[state=indeterminate]:border-[var(--ui-critical)] data-[state=indeterminate]:bg-[var(--ui-critical)]",
+  disabled: "opacity-50",
+} as const;
+
+export const checkboxControlSizeClasses: Record<CheckboxSize, string> = {
+  sm: "mt-0.5 size-4",
+  md: "mt-0.5 size-5",
+};
+
+export const checkboxIndicatorSizeClasses: Record<CheckboxSize, string> = {
+  sm: "size-3",
+  md: "size-3.5",
+};
+
+export const checkboxLabelClass = "text-[var(--ui-fg)]";
+export const checkboxDescriptionClass = "text-sm text-[var(--ui-fg-muted)]";

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { Checkbox } from "@ark-ui/vue/checkbox";
+import { computed, normalizeClass, useAttrs, useSlots } from "vue";
+import { twMerge } from "tailwind-merge";
+import { checkboxProps } from "./Checkbox.props";
+import {
+  checkboxControlBaseClass,
+  checkboxControlSizeClasses,
+  checkboxControlStateClasses,
+  checkboxDescriptionClass,
+  checkboxIndicatorSizeClasses,
+  checkboxLabelClass,
+  checkboxRootClass,
+} from "./Checkbox.variants";
+import type { CheckboxCheckedValue } from "./Checkbox.types";
+
+defineOptions({ inheritAttrs: false });
+
+const emit = defineEmits<{
+  "update:modelValue": [value: CheckboxCheckedValue];
+}>();
+
+const attrs = useAttrs();
+const slots = useSlots();
+const props = defineProps(checkboxProps);
+
+const rootClass = computed(() => twMerge(checkboxRootClass, normalizeClass(attrs.class)));
+
+const controlClass = computed(() =>
+  twMerge(
+    checkboxControlBaseClass,
+    checkboxControlSizeClasses[props.size],
+    props.invalid ? checkboxControlStateClasses.invalid : checkboxControlStateClasses.default,
+    props.disabled ? checkboxControlStateClasses.disabled : "",
+  ),
+);
+
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+function handleCheckedChange(value: CheckboxCheckedValue) {
+  emit("update:modelValue", value);
+}
+</script>
+
+<template>
+  <Checkbox.Root
+    :checked="props.modelValue"
+    :disabled="props.disabled"
+    :invalid="props.invalid"
+    :class="rootClass"
+    v-bind="rootAttrs"
+    @update:checked="handleCheckedChange"
+  >
+    <Checkbox.HiddenInput />
+    <Checkbox.Control :class="controlClass">
+      <Checkbox.Context v-slot="checkboxApi">
+        <Checkbox.Indicator :class="checkboxIndicatorSizeClasses[props.size]">
+          <svg
+            v-if="checkboxApi.checked === 'indeterminate'"
+            viewBox="0 0 16 16"
+            fill="none"
+            class="size-full"
+            aria-hidden="true"
+          >
+            <path d="M3.5 8h9" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+          <svg v-else viewBox="0 0 16 16" fill="none" class="size-full" aria-hidden="true">
+            <path
+              d="M3.5 8.5 6.5 11.5 12.5 4.5"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </Checkbox.Indicator>
+      </Checkbox.Context>
+    </Checkbox.Control>
+
+    <div v-if="slots.default || slots.description" class="flex flex-col gap-1">
+      <Checkbox.Label v-if="slots.default" :class="checkboxLabelClass">
+        <slot />
+      </Checkbox.Label>
+      <div v-if="slots.description" :class="checkboxDescriptionClass">
+        <slot name="description" />
+      </div>
+    </div>
+  </Checkbox.Root>
+</template>

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

@@ -0,0 +1,29 @@
+import type { PropType } from "vue";
+import type { DialogSize } from "./Dialog.types";
+
+export const dialogProps = {
+  title: {
+    type: String,
+    default: undefined,
+  },
+  description: {
+    type: String,
+    default: undefined,
+  },
+  size: {
+    type: String as PropType<DialogSize>,
+    default: "md",
+  },
+  showClose: {
+    type: Boolean,
+    default: true,
+  },
+  closeOnEscape: {
+    type: Boolean,
+    default: true,
+  },
+  closeOnInteractOutside: {
+    type: Boolean,
+    default: true,
+  },
+};

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

@@ -0,0 +1,52 @@
+# Dialog
+
+## Purpose
+
+Modal overlay primitive for focused tasks and confirmation flows.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `open` via `v-model:open`
+- `title`
+- `description`
+- `size`: `sm | md | lg | xl`
+- `showClose`
+- `closeOnEscape`
+- `closeOnInteractOutside`
+
+Slots:
+
+- `trigger`
+- `header`
+- default content
+- `footer`
+
+## Accessibility
+
+- built on Ark dialog semantics
+- traps focus while open
+- supports Escape and outside-interaction closing when enabled
+- uses `Dialog.Title` and `Dialog.Description` when provided
+
+## Keyboard behavior
+
+- focus moves into the dialog on open
+- Escape closes when `closeOnEscape` is true
+- close trigger is keyboard reachable
+
+## Example
+
+```vue
+<Dialog v-model:open="open" title="Delete record" description="This cannot be undone.">
+  <template #trigger>
+    <Button variant="critical">Delete</Button>
+  </template>
+  Are you sure?
+</Dialog>
+```

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

@@ -0,0 +1,3 @@
+export const dialogSizeValues = ["sm", "md", "lg", "xl"] as const;
+
+export type DialogSize = (typeof dialogSizeValues)[number];

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

@@ -0,0 +1,27 @@
+import type { DialogSize } from "./Dialog.types";
+
+export const dialogBackdropClass = "fixed inset-0 z-40 bg-[var(--ui-fg)]/40 backdrop-blur-sm";
+export const dialogPositionerClass = "fixed inset-0 z-50 grid place-items-center p-4";
+export const dialogContentBaseClass =
+  "w-full overflow-hidden rounded-[var(--ui-radius-lg)] border border-[var(--ui-border)] " +
+  "bg-[var(--ui-surface)] text-[var(--ui-fg)] shadow-[var(--ui-shadow-md)]";
+
+export const dialogContentSizeClasses: Record<DialogSize, string> = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+};
+
+export const dialogHeaderClass =
+  "flex items-start justify-between gap-4 border-b border-[var(--ui-border)] px-4 py-3";
+export const dialogTitleClass = "text-base font-semibold text-[var(--ui-fg)]";
+export const dialogDescriptionClass = "mt-1 text-sm text-[var(--ui-fg-muted)]";
+export const dialogBodyClass = "px-4 py-4";
+export const dialogFooterClass =
+  "flex items-center justify-end gap-3 border-t border-[var(--ui-border)] px-4 py-3";
+export const dialogCloseClass =
+  "inline-flex size-9 items-center justify-center rounded-[var(--ui-radius-sm)] border border-[var(--ui-border)] " +
+  "text-[var(--ui-fg-muted)] transition-[border-color,background-color,color] duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
+  "hover:border-[var(--ui-primary-muted)] hover:bg-[var(--ui-tonal-secondary)] hover:text-[var(--ui-fg)] " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)]";