@commercejs/ui 0.1.0

package/dist/runtime/components/cart/CQuantitySelector.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+/**
+ * CQuantitySelector — Increment/decrement quantity input.
+ * Follows Nuxt UI conventions: ui prop, slot-based theming, semantic tokens.
+ */
+
+export interface QuantitySelectorProps {
+  /** Current quantity value */
+  modelValue: number
+  /** Minimum allowed value */
+  min?: number
+  /** Maximum allowed value (null = unlimited) */
+  max?: number | null
+  /** Disable the control */
+  disabled?: boolean
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    button: any
+    input: any
+  }>
+}
+
+const props = withDefaults(defineProps<QuantitySelectorProps>(), {
+  min: 1,
+  max: null,
+  disabled: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+const canDecrement = computed(() => props.modelValue > props.min)
+const canIncrement = computed(() => props.max === null || props.modelValue < props.max)
+
+function decrement() {
+  if (canDecrement.value && !props.disabled) {
+    emit('update:modelValue', props.modelValue - 1)
+  }
+}
+
+function increment() {
+  if (canIncrement.value && !props.disabled) {
+    emit('update:modelValue', props.modelValue + 1)
+  }
+}
+
+// Resolve theme classes from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.quantitySelector ?? {})
+
+const buttonSize = computed(() => {
+  const map = { sm: 'xs', md: 'sm', lg: 'md' } as const
+  return map[props.size] ?? 'sm'
+})
+
+const slotClasses = computed(() => {
+  const t = theme.value
+  const sizeVariant = t?.variants?.size?.[props.size] ?? {}
+  const base = t?.slots ?? {}
+  return {
+    root: [base.root, sizeVariant.root, props.ui?.root],
+    button: [base.button, sizeVariant.button, props.ui?.button],
+    input: [base.input, sizeVariant.input, props.ui?.input],
+  }
+})
+</script>
+
+<template>
+  <div :class="slotClasses.root">
+    <slot name="decrement" :decrement="decrement" :disabled="!canDecrement || disabled">
+      <UButton
+        icon="i-heroicons-minus-20-solid"
+        :size="buttonSize"
+        variant="soft"
+        color="neutral"
+        :disabled="!canDecrement || disabled"
+        :class="slotClasses.button"
+        @click="decrement"
+      />
+    </slot>
+
+    <slot name="value" :value="modelValue">
+      <input
+        type="text"
+        :value="modelValue"
+        readonly
+        :disabled="disabled"
+        :class="slotClasses.input"
+        aria-label="Quantity"
+      />
+    </slot>
+
+    <slot name="increment" :increment="increment" :disabled="!canIncrement || disabled">
+      <UButton
+        icon="i-heroicons-plus-20-solid"
+        :size="buttonSize"
+        variant="soft"
+        color="neutral"
+        :disabled="!canIncrement || disabled"
+        :class="slotClasses.button"
+        @click="increment"
+      />
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/category/CCategoryFilter.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { Facet, FacetValue, LocalizedString } from '@commercejs/types'
+
+/**
+ * CCategoryFilter — Faceted category/attribute sidebar filter.
+ * Displays facet groups with checkable values and counts.
+ */
+
+export interface CategoryFilterProps {
+  /** Available facets from search response */
+  facets: Facet[]
+  /** Currently selected filters: { facetCode: [valueId, ...] } */
+  modelValue: Record<string, string[]>
+  /** Whether to show value counts */
+  showCounts?: boolean
+  /** Max visible values per facet before "Show more" */
+  maxVisible?: number
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    group: any
+    groupTitle: any
+    values: any
+    value: any
+    count: any
+    showMore: any
+  }>
+}
+
+const props = withDefaults(defineProps<CategoryFilterProps>(), {
+  showCounts: true,
+  maxVisible: 5,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Record<string, string[]>]
+}>()
+
+function t(value: LocalizedString | string | null | undefined): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+// Track which facets are expanded
+const expanded = reactive<Record<string, boolean>>({})
+
+function isExpanded(code: string): boolean {
+  return expanded[code] ?? false
+}
+
+function toggleExpanded(code: string) {
+  expanded[code] = !expanded[code]
+}
+
+function getVisibleItems(facet: Facet) {
+  const values = isExpanded(facet.code) || facet.values.length <= props.maxVisible
+    ? facet.values
+    : facet.values.slice(0, props.maxVisible)
+
+  return values.map(val => ({
+    label: t(val.label),
+    value: val.value,
+    count: val.count,
+  }))
+}
+
+function getSelectedValues(facetCode: string): string[] {
+  return props.modelValue[facetCode] ?? []
+}
+
+function updateSelection(facetCode: string, values: string[]) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [facetCode]: values,
+  })
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.categoryFilter ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [
+    base[slot],
+    props.ui?.[slot as keyof typeof props.ui],
+  ]
+  return {
+    root: merge('root'),
+    group: merge('group'),
+    showMore: merge('showMore'),
+  }
+})
+</script>
+
+<template>
+  <div :class="slotClasses.root">
+    <div v-for="facet in facets" :key="facet.code" :class="slotClasses.group">
+      <UCheckboxGroup
+        :legend="t(facet.name)"
+        :items="getVisibleItems(facet)"
+        :model-value="getSelectedValues(facet.code)"
+        @update:model-value="updateSelection(facet.code, $event as string[])"
+      >
+        <template #label="{ item }">
+          {{ item.label }}
+          <UBadge v-if="showCounts && item.count != null" size="xs" color="neutral" variant="subtle" :label="item.count?.toString()" />
+        </template>
+      </UCheckboxGroup>
+
+      <UButton
+        v-if="facet.values.length > maxVisible"
+        :class="slotClasses.showMore"
+        variant="link"
+        size="sm"
+        @click="toggleExpanded(facet.code)"
+      >
+        {{ isExpanded(facet.code) ? 'Show less' : `Show ${facet.values.length - maxVisible} more` }}
+      </UButton>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/checkout/CAddressForm.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { Address } from '@commercejs/types'
+
+/**
+ * CAddressForm — Shipping/billing address form.
+ * Uses Nuxt UI form components (UInput, USelect) with GCC-specific fields.
+ */
+
+export interface AddressFormProps {
+  /** Current address values */
+  modelValue: Partial<Address>
+  /** Available countries for the dropdown */
+  countries?: { label: string; value: string }[]
+  /** Whether to show GCC-specific fields (district, nationalAddress) */
+  showGccFields?: boolean
+  /** Whether the form is in loading/submitting state */
+  loading?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    row: any
+    field: any
+  }>
+}
+
+const props = withDefaults(defineProps<AddressFormProps>(), {
+  countries: () => [],
+  showGccFields: true,
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Partial<Address>]
+  'submit': [value: Partial<Address>]
+}>()
+
+function update(field: keyof Address, value: any) {
+  emit('update:modelValue', { ...props.modelValue, [field]: value })
+}
+
+function handleSubmit() {
+  emit('submit', props.modelValue)
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.addressForm ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  return {
+    root: [base.root, props.ui?.root],
+    row: [base.row, props.ui?.row],
+    field: [base.field, props.ui?.field],
+  }
+})
+</script>
+
+<template>
+  <form :class="slotClasses.root" @submit.prevent="handleSubmit">
+    <!-- Name row -->
+    <div :class="slotClasses.row">
+      <UFormField label="First Name" :class="slotClasses.field">
+        <UInput
+          :model-value="modelValue.firstName || ''"
+          placeholder="First name"
+          required
+          :disabled="loading"
+          @update:model-value="update('firstName', $event)"
+        />
+      </UFormField>
+      <UFormField label="Last Name" :class="slotClasses.field">
+        <UInput
+          :model-value="modelValue.lastName || ''"
+          placeholder="Last name"
+          required
+          :disabled="loading"
+          @update:model-value="update('lastName', $event)"
+        />
+      </UFormField>
+    </div>
+
+    <!-- Phone -->
+    <UFormField label="Phone">
+      <UInput
+        :model-value="modelValue.phone || ''"
+        placeholder="+966 5xx xxx xxxx"
+        type="tel"
+        :disabled="loading"
+        @update:model-value="update('phone', $event)"
+      />
+    </UFormField>
+
+    <!-- Street -->
+    <UFormField label="Street Address">
+      <UInput
+        :model-value="modelValue.street || ''"
+        placeholder="Street address"
+        required
+        :disabled="loading"
+        @update:model-value="update('street', $event)"
+      />
+    </UFormField>
+
+    <!-- Street 2 -->
+    <UFormField label="Apt, Suite, Floor">
+      <UInput
+        :model-value="modelValue.street2 || ''"
+        placeholder="Apartment, suite, etc. (optional)"
+        :disabled="loading"
+        @update:model-value="update('street2', $event)"
+      />
+    </UFormField>
+
+    <!-- City + State -->
+    <div :class="slotClasses.row">
+      <UFormField label="City" :class="slotClasses.field">
+        <UInput
+          :model-value="modelValue.city || ''"
+          placeholder="City"
+          required
+          :disabled="loading"
+          @update:model-value="update('city', $event)"
+        />
+      </UFormField>
+      <UFormField label="State / Province" :class="slotClasses.field">
+        <UInput
+          :model-value="modelValue.state || ''"
+          placeholder="State"
+          :disabled="loading"
+          @update:model-value="update('state', $event)"
+        />
+      </UFormField>
+    </div>
+
+    <!-- Country + Postal -->
+    <div :class="slotClasses.row">
+      <UFormField label="Country" :class="slotClasses.field">
+        <USelect
+          :model-value="modelValue.country || ''"
+          :items="countries"
+          placeholder="Select country"
+          required
+          :disabled="loading"
+          @update:model-value="update('country', $event)"
+        />
+      </UFormField>
+      <UFormField label="Postal Code" :class="slotClasses.field">
+        <UInput
+          :model-value="modelValue.postalCode || ''"
+          placeholder="Postal code"
+          :disabled="loading"
+          @update:model-value="update('postalCode', $event)"
+        />
+      </UFormField>
+    </div>
+
+    <!-- GCC-specific fields -->
+    <template v-if="showGccFields">
+      <slot name="gcc-fields">
+        <UFormField label="District (حي)">
+          <UInput
+            :model-value="modelValue.district || ''"
+            placeholder="District / Neighborhood"
+            :disabled="loading"
+            @update:model-value="update('district', $event)"
+          />
+        </UFormField>
+        <UFormField label="National Address (العنوان الوطني)">
+          <UInput
+            :model-value="modelValue.nationalAddress || ''"
+            placeholder="Saudi National Address"
+            :disabled="loading"
+            @update:model-value="update('nationalAddress', $event)"
+          />
+        </UFormField>
+      </slot>
+    </template>
+
+    <slot name="actions">
+      <UButton type="submit" color="primary" :loading="loading" block>
+        Save Address
+      </UButton>
+    </slot>
+  </form>
+</template>

package/dist/runtime/components/checkout/CCheckoutStepper.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * CCheckoutStepper — Multi-step checkout progress indicator.
+ * Wraps Nuxt UI's UStepper with ecommerce-specific defaults.
+ */
+
+export interface CheckoutStep {
+  /** Step key */
+  id: string
+  /** Display label */
+  title: string
+  /** Optional description */
+  description?: string
+  /** Optional icon name */
+  icon?: string
+}
+
+export interface CheckoutStepperProps {
+  /** Steps configuration */
+  steps: CheckoutStep[]
+  /** Current active step (0-indexed) */
+  modelValue?: number
+  /** Orientation */
+  orientation?: 'horizontal' | 'vertical'
+  /** Whether steps must be completed in order */
+  linear?: boolean
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+  /** Color */
+  color?: 'primary' | 'secondary' | 'success' | 'neutral'
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+  }>
+}
+
+const props = withDefaults(defineProps<CheckoutStepperProps>(), {
+  modelValue: 0,
+  orientation: 'horizontal',
+  linear: true,
+  size: 'md',
+  color: 'primary',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [step: number]
+}>()
+
+// Map our steps to UStepper items format
+const stepperItems = computed(() =>
+  props.steps.map(step => ({
+    title: step.title,
+    description: step.description,
+    icon: step.icon,
+  }))
+)
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.checkoutStepper ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  return {
+    root: [base.root, props.ui?.root],
+  }
+})
+</script>
+
+<template>
+  <div :class="slotClasses.root">
+    <slot :steps="steps" :active="modelValue">
+      <UStepper
+        :items="stepperItems"
+        :model-value="modelValue"
+        :orientation="orientation"
+        :linear="linear"
+        :size="size"
+        :color="color"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/common/CEmptyState.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * CEmptyState — Reusable empty state for cart, wishlist, search results, etc.
+ */
+
+export interface EmptyStateProps {
+  /** Icon name */
+  icon?: string
+  /** Title text */
+  title?: string
+  /** Description text */
+  description?: string
+  /** CTA button label */
+  actionLabel?: string
+  /** CTA button link */
+  actionTo?: string
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    icon: any
+    title: any
+    description: any
+  }>
+}
+
+const props = withDefaults(defineProps<EmptyStateProps>(), {
+  icon: 'i-heroicons-inbox',
+  title: 'Nothing here yet',
+})
+
+const emit = defineEmits<{
+  'action': []
+}>()
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.emptyState ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [
+    base[slot],
+    props.ui?.[slot as keyof typeof props.ui],
+  ]
+  return {
+    root: merge('root'),
+    icon: merge('icon'),
+    title: merge('title'),
+    description: merge('description'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['flex flex-col items-center justify-center py-16 px-4', slotClasses.root]">
+    <slot name="icon">
+      <UIcon :name="icon" :class="['text-5xl text-muted mb-4', slotClasses.icon]" />
+    </slot>
+
+    <slot name="title">
+      <h3 :class="['text-lg font-medium text-highlighted mb-1', slotClasses.title]">{{ title }}</h3>
+    </slot>
+
+    <slot name="description">
+      <p v-if="description" :class="['text-sm text-muted max-w-md text-center mb-6', slotClasses.description]">
+        {{ description }}
+      </p>
+    </slot>
+
+    <slot name="action">
+      <UButton
+        v-if="actionLabel"
+        :to="actionTo"
+        color="primary"
+        @click="emit('action')"
+      >
+        {{ actionLabel }}
+      </UButton>
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/common/CProductTypeBadge.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ProductType } from '@commercejs/types'
+
+/**
+ * CProductTypeBadge — Small badge indicating a product's type.
+ * Used on cards, listings, and detail pages.
+ */
+
+export interface ProductTypeBadgeProps {
+  type: ProductType
+  /** Per-instance theme overrides */
+  ui?: Partial<{ root: any }>
+}
+
+const props = defineProps<ProductTypeBadgeProps>()
+
+const config = computed(() => {
+  const map: Record<ProductType, { label: string; icon: string; color: string }> = {
+    physical: { label: 'Physical', icon: 'i-heroicons-cube', color: 'neutral' },
+    digital: { label: 'Digital', icon: 'i-heroicons-arrow-down-tray', color: 'info' },
+    service: { label: 'Service', icon: 'i-heroicons-wrench-screwdriver', color: 'primary' },
+    event: { label: 'Event', icon: 'i-heroicons-ticket', color: 'warning' },
+    subscription: { label: 'Subscription', icon: 'i-heroicons-arrow-path', color: 'success' },
+    auction: { label: 'Auction', icon: 'i-heroicons-bolt', color: 'error' },
+    rental: { label: 'Rental', icon: 'i-heroicons-calendar-days', color: 'info' },
+    gift_card: { label: 'Gift Card', icon: 'i-heroicons-gift', color: 'primary' },
+  }
+  return map[props.type] || map.physical
+})
+</script>
+
+<template>
+  <UBadge :color="config.color as any" size="xs" variant="subtle" :class="props.ui?.root">
+    <UIcon :name="config.icon" class="me-0.5" />
+    {{ config.label }}
+  </UBadge>
+</template>