align alter dialog positioning with other modals

.github/workflows/playwright-onpremise.yml

@@ -1,149 +0,0 @@
-name: Playwright Tests - On Premise
-on:
-  push:
-    branches:
-      - main
-      - develop
-      - feature/support_extension_e2e_tests
-    tags:
-      - '*'
-  workflow_dispatch:
-permissions:
-  contents: read
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    timeout-minutes: 60
-    strategy:
-      fail-fast: false
-      matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
-        shardTotal: [8]
-
-    services:
-      mailpit:
-        image: 'axllent/mailpit:latest'
-        ports:
-          - 1025:1025
-          - 8025:8025
-      pgsql_test:
-        image: postgres:15
-        env:
-          PGPASSWORD: 'root'
-          POSTGRES_DB: 'laravel'
-          POSTGRES_USER: 'root'
-          POSTGRES_PASSWORD: 'root'
-        ports:
-          - 5432:5432
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-      # Renders the invoice PDFs.
-      gotenberg:
-        image: gotenberg/gotenberg:8
-        ports:
-          - 3000:3000
-        options: >-
-          --health-cmd "curl --silent --fail http://localhost:3000/health"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-
-    steps:
-      - name: "Checkout code"
-        uses: actions/checkout@v7
-
-      - name: "Setup node"
-        uses: actions/setup-node@v7
-        with:
-          node-version: '20.x'
-
-      - name: "Setup PHP"
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: '8.3'
-          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv
-          coverage: none
-
-      - name: "Run composer install"
-        run: composer install -n --prefer-dist
-
-      - name: "Read extension manifest"
-        id: extension-manifest
-        run: |
-          {
-            echo "invoicing_repository=$(jq -r '.Invoicing.repository' extensions/manifest.json)"
-            echo "invoicing_ref=$(jq -r '.Invoicing.ref' extensions/manifest.json)"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: "Checkout invoicing extension"
-        uses: actions/checkout@v7
-        with:
-          repository: ${{ steps.extension-manifest.outputs.invoicing_repository }}
-          ref: ${{ steps.extension-manifest.outputs.invoicing_ref }}
-          path: extensions/Invoicing
-          ssh-key: ${{ secrets.SSH_PRIVATE_KEY_INVOICING_EXTENSION }}
-
-      - name: "Install composer dependencies in invoicing extension"
-        run: cd extensions/Invoicing && composer install --no-dev --no-ansi --no-interaction --prefer-dist --ignore-platform-reqs --classmap-authoritative
-
-      - name: "Install npm dependencies in invoicing extension"
-        run: cd extensions/Invoicing && npm ci
-
-      - name: "Prepare Laravel Application"
-        run: |
-          cp .env.ci .env
-          php artisan key:generate
-          php artisan passport:keys
-
-      # Must run before `migrate` so the extension's migrations are applied, and
-      # before the frontend build so vite collects the extension's assets.
-      - name: "Activate invoicing extension"
-        run: php artisan module:enable Invoicing
-
-      - name: "Migrate and seed"
-        run: php artisan migrate --seed
-
-      - name: "Install dependencies"
-        run: npm ci
-
-      - name: "Build Frontend"
-        run: npm run build
-
-      - name: "Install FrankenPHP"
-        run: |
-          ARCH="$(uname -m)"
-          curl -fsSL "https://github.com/dunglas/frankenphp/releases/latest/download/frankenphp-linux-${ARCH}" -o /usr/local/bin/frankenphp
-          chmod +x /usr/local/bin/frankenphp
-
-      - name: "Run Laravel Octane Server"
-        run: php artisan octane:start --server=frankenphp --host=127.0.0.1 --port=8000 --workers=4 --max-requests=500 > /dev/null 2>&1 &
-        env:
-          OCTANE_SERVER: frankenphp
-
-      - name: "Install Playwright Browsers"
-        run: npx playwright install --with-deps
-
-      - name: "Run Playwright tests"
-        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
-        env:
-          PLAYWRIGHT_BASE_URL: 'http://127.0.0.1:8000'
-          MAILPIT_BASE_URL: 'http://localhost:8025'
-
-      # No artifacts are uploaded on purpose. This repository is public, so
-      # every artifact is downloadable by anyone - and Playwright's reports
-      # carry the source of the specs that produced them: traces embed whole
-      # source files under resources/src@*, and each error-context.md attachment
-      # embeds a ~200 line window of the spec plus a page snapshot. Those specs
-      # live in the private extension repository, so uploading them would
-      # publish private source on any failing or flaky run.
-      #
-      # Failures are diagnosed from the job log, which still shows the error and
-      # a short code frame. To inspect a trace, reproduce the failure locally
-      # with the extension checked out.
-      #
-      # This is a mitigation, not a fix: the code frame in the log is itself a
-      # handful of lines of private source. Only running this workflow from a
-      # private repository removes that exposure.

app/Service/PermissionStore.php

@@ -80,6 +80,10 @@ class PermissionStore
                 'invoices:update',
                 'invoices:download',
                 'invoices:delete',
+                'invoice-recipients:view',
+                'invoice-recipients:create',
+                'invoice-recipients:update',
+                'invoice-recipients:delete',
                 'invoice-settings:view',
                 'invoice-settings:update',
             ],
@@ -147,6 +151,10 @@ class PermissionStore
                 'invoices:update',
                 'invoices:download',
                 'invoices:delete',
+                'invoice-recipients:view',
+                'invoice-recipients:create',
+                'invoice-recipients:update',
+                'invoice-recipients:delete',
                 'invoice-settings:view',
                 'invoice-settings:update',
             ],
@@ -203,6 +211,10 @@ class PermissionStore
                 'invoices:update',
                 'invoices:download',
                 'invoices:delete',
+                'invoice-recipients:view',
+                'invoice-recipients:create',
+                'invoice-recipients:update',
+                'invoice-recipients:delete',
                 'invoice-settings:view',
                 'invoice-settings:update',
             ],

extensions/manifest.json

@@ -1,7 +1,7 @@
 {
     "Billing": {
         "repository": "solidtime-io/extension-billing",
-        "ref": "v0.0.3"
+        "ref": "v0.0.4"
     },
     "Services": {
         "repository": "solidtime-io/extension-services",
@@ -9,6 +9,6 @@
     },
     "Invoicing": {
         "repository": "solidtime-io/extension-invoicing",
-        "ref": "feature/e2e_tests"
+        "ref": "feature/recipients"
     }
 }

package.json

@@ -57,7 +57,7 @@
         "@floating-ui/core": "^1.7.5",
         "@floating-ui/vue": "^1.1.11",
         "@heroicons/vue": "^2.2.0",
-        "@lucide/vue": "^1.14.0",
+        "@lucide/vue": "^1.28.0",
         "@rushstack/eslint-patch": "^1.16.1",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tanstack/vue-form": "^1.32.0",
@@ -67,7 +67,7 @@
         "@tanstack/vue-virtual": "^3.13.24",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.7.0",
-        "@vueuse/core": "^14.3.0",
+        "@vueuse/core": "^14.4.0",
         "@vueuse/integrations": "^14.3.0",
         "@zodios/core": "^10.9.6",
         "chroma-js": "^3.2.0",
@@ -79,7 +79,7 @@
         "parse-duration": "^2.1.6",
         "pinia": "^3.0.4",
         "radix-vue": "^1.9.17",
-        "reka-ui": "^2.9.7",
+        "reka-ui": "^2.10.1",
         "tailwind-merge": "^2.6.1",
         "tailwindcss-animate": "^1.0.7",
         "vue-draggable-plus": "^0.6.1",

playwright.config.ts

@@ -10,20 +10,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-    testDir: '.',
+    testDir: './e2e',
-    testMatch: ['e2e/**/*.spec.ts', 'extensions/*/tests/e2e/**/*.spec.ts'],
-    testIgnore: [
-        '**/node_modules/**',
-        '**/vendor/**',
-        '.git/**',
-        '.claude/**',
-        'public/**',
-        'storage/**',
-        'test-results/**',
-        'playwright-report/**',
-        'blob-report/**',
-    ],
-    tsconfig: './tsconfig.json',
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */

resources/js/Components/ui/alert-dialog/AlertDialogContent.vue

@@ -25,16 +25,21 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
     <AlertDialogPortal>
         <AlertDialogOverlay
-            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+            class="fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
-        <AlertDialogContent
+            <div class="absolute inset-0 bg-default-background opacity-30" />
-            v-bind="forwarded"
+        </AlertDialogOverlay>
-            :class="
+        <div
-                cn(
+            class="fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start px-2 pt-3 md:pt-14 xl:pt-24 justify-center overflow-auto">
-                    'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+            <AlertDialogContent
-                    props.class
+                v-bind="forwarded"
-                )
+                :class="
-            ">
+                    cn(
-            <slot />
+                        'pointer-events-auto bg-default-background grid w-full max-w-lg gap-4 border border-border-tertiary p-6 shadow-lg duration-200 rounded-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-        </AlertDialogContent>
+                        props.class
+                    )
+                ">
+                <slot />
+            </AlertDialogContent>
+        </div>
     </AlertDialogPortal>
 </template>

resources/js/Layouts/AppLayout.vue

@@ -253,7 +253,9 @@ const page = usePage<{
                                 v-if="isInvoicingActivated() && canViewInvoices()"
                                 title="Invoices"
                                 :icon="DocumentTextIcon"
-                                :current="route().current('invoices')"
+                                :current="
+                                    route().current('invoices') || route().current('invoices.*')
+                                "
                                 href="/invoices"></NavigationSidebarItem>
                         </ul>
                     </nav>

resources/js/packages/api/src/index.ts

@@ -117,6 +117,8 @@ export type DetailedInvoiceResponse = ZodiosResponseByAlias<SolidTimeApi, 'getIn
 export type DetailedInvoice = DetailedInvoiceResponse['data'];
 
 export type InvoiceIndexEntry = ZodiosResponseByAlias<SolidTimeApi, 'getInvoices'>['data'][0];
+export type InvoiceRecipient = ZodiosResponseByAlias<SolidTimeApi, 'getInvoiceRecipients'>['data'][0];
+export type InvoiceRecipientBody = ZodiosBodyByAlias<SolidTimeApi, 'createInvoiceRecipient'>;
 
 export type UpdateInvoiceSettings = ZodiosBodyByAlias<SolidTimeApi, 'updateInvoiceSettings'>;
 

resources/js/packages/api/src/openapi.json.client.ts

@@ -45,14 +45,54 @@ const InvitationResource = z
 const InvitationStoreRequest = z
     .object({ email: z.string().email(), role: z.enum(['admin', 'manager', 'employee']) })
     .passthrough();
+const InvoiceRecipientResource = z
+    .object({
+        id: z.string(),
+        organization_id: z.string(),
+        name: z.string(),
+        vatin: z.union([z.string(), z.null()]),
+        address_line_1: z.union([z.string(), z.null()]),
+        address_line_2: z.union([z.string(), z.null()]),
+        address_line_3: z.union([z.string(), z.null()]),
+        address_post_code: z.union([z.string(), z.null()]),
+        address_city: z.union([z.string(), z.null()]),
+        address_country: z.union([z.string(), z.null()]),
+        phone: z.union([z.string(), z.null()]),
+        email: z.union([z.string(), z.null()]),
+        is_archived: z.boolean(),
+        archived_at: z.union([z.string(), z.null()]),
+        invoices_count: z.number().int(),
+        has_non_draft_invoices: z.boolean(),
+        created_at: z.union([z.string(), z.null()]),
+        updated_at: z.union([z.string(), z.null()]),
+    })
+    .passthrough();
+const InvoiceRecipientCollection = z.array(InvoiceRecipientResource);
+const InvoiceRecipientRequest = z
+    .object({
+        name: z.string(),
+        vatin: z.union([z.string(), z.null()]).optional(),
+        address_line_1: z.union([z.string(), z.null()]).optional(),
+        address_line_2: z.union([z.string(), z.null()]).optional(),
+        address_line_3: z.union([z.string(), z.null()]).optional(),
+        address_post_code: z.union([z.string(), z.null()]).optional(),
+        address_city: z.union([z.string(), z.null()]).optional(),
+        address_country: z.union([z.string(), z.null()]).optional(),
+        phone: z.union([z.string(), z.null()]).optional(),
+        email: z.union([z.string(), z.null()]).optional(),
+        is_archived: z.boolean().optional(),
+    })
+    .passthrough();
 const InvoiceResource = z
     .object({
         id: z.string(),
         organization_id: z.string(),
+        invoice_recipient_id: z.string(),
         reference: z.string(),
         seller_name: z.string(),
-        buyer_name: z.string(),
+        recipient: z.string(),
         status: z.string(),
+        status_label: z.string(),
         date: z.string(),
         due_at: z.string(),
         paid_date: z.string(),
@@ -76,16 +116,7 @@ const InvoiceStoreRequest = z
         seller_address_country: z.union([z.string(), z.null()]).optional(),
         seller_phone: z.union([z.string(), z.null()]).optional(),
         seller_email: z.union([z.string(), z.null()]).optional(),
-        buyer_name: z.string(),
+        invoice_recipient_id: z.string(),
-        buyer_vatin: z.union([z.string(), z.null()]).optional(),
-        buyer_address_line_1: z.union([z.string(), z.null()]).optional(),
-        buyer_address_line_2: z.union([z.string(), z.null()]).optional(),
-        buyer_address_line_3: z.union([z.string(), z.null()]).optional(),
-        buyer_address_post_code: z.union([z.string(), z.null()]).optional(),
-        buyer_address_city: z.union([z.string(), z.null()]).optional(),
-        buyer_address_country: z.union([z.string(), z.null()]).optional(),
-        buyer_phone: z.union([z.string(), z.null()]).optional(),
-        buyer_email: z.union([z.string(), z.null()]).optional(),
         date: z.string(),
         billing_period_start: z.union([z.string(), z.null()]).optional(),
         billing_period_end: z.union([z.string(), z.null()]).optional(),
@@ -130,6 +161,7 @@ const DetailedInvoiceResource = z
     .object({
         id: z.string(),
         organization_id: z.string(),
+        invoice_recipient_id: z.string(),
         reference: z.string(),
         seller_name: z.string(),
         seller_vatin: z.string(),
@@ -141,16 +173,7 @@ const DetailedInvoiceResource = z
         seller_address_country: z.string(),
         seller_phone: z.string(),
         seller_email: z.string(),
-        buyer_name: z.string(),
+        recipient: InvoiceRecipientResource,
-        buyer_vatin: z.string(),
-        buyer_address_line_1: z.string(),
-        buyer_address_line_2: z.string(),
-        buyer_address_line_3: z.string(),
-        buyer_address_post_code: z.string(),
-        buyer_address_city: z.string(),
-        buyer_address_country: z.string(),
-        buyer_phone: z.string(),
-        buyer_email: z.string(),
         paid_date: z.string(),
         due_at: z.string(),
         discount_type: z.string(),
@@ -171,7 +194,7 @@ const DetailedInvoiceResource = z
         entries: z.array(InvoiceEntryResource),
     })
     .passthrough();
-const InvoiceStatus = z.enum(['draft', 'sent', 'cancelled']);
+const InvoiceStatus = z.enum(['draft', 'sent', 'paid', 'cancelled']);
 const InvoiceUpdateRequest = z
     .object({
         status: InvoiceStatus,
@@ -187,16 +210,7 @@ const InvoiceUpdateRequest = z
         seller_address_country: z.union([z.string(), z.null()]),
         seller_phone: z.union([z.string(), z.null()]),
         seller_email: z.union([z.string(), z.null()]),
-        buyer_name: z.string(),
+        invoice_recipient_id: z.string(),
-        buyer_vatin: z.union([z.string(), z.null()]),
-        buyer_address_line_1: z.union([z.string(), z.null()]),
-        buyer_address_line_2: z.union([z.string(), z.null()]),
-        buyer_address_line_3: z.union([z.string(), z.null()]),
-        buyer_address_post_code: z.union([z.string(), z.null()]),
-        buyer_address_city: z.union([z.string(), z.null()]),
-        buyer_address_country: z.union([z.string(), z.null()]),
-        buyer_phone: z.union([z.string(), z.null()]),
-        buyer_email: z.union([z.string(), z.null()]),
         date: z.string(),
         billing_period_start: z.union([z.string(), z.null()]),
         billing_period_end: z.union([z.string(), z.null()]),
@@ -1885,6 +1899,125 @@ const endpoints = makeApi([
             },
         ],
     },
+    {
+        method: 'get',
+        path: '/v1/organizations/:organization/invoice-recipients',
+        alias: 'getInvoiceRecipients',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.object({ data: InvoiceRecipientCollection }).passthrough(),
+    },
+    {
+        method: 'post',
+        path: '/v1/organizations/:organization/invoice-recipients',
+        alias: 'createInvoiceRecipient',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'body',
+                type: 'Body',
+                schema: InvoiceRecipientRequest,
+            },
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.object({ data: InvoiceRecipientResource }).passthrough(),
+    },
+    {
+        method: 'get',
+        path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient',
+        alias: 'getInvoiceRecipient',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+            {
+                name: 'invoiceRecipient',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.object({ data: InvoiceRecipientResource }).passthrough(),
+    },
+    {
+        method: 'put',
+        path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient',
+        alias: 'updateInvoiceRecipient',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'body',
+                type: 'Body',
+                schema: InvoiceRecipientRequest,
+            },
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+            {
+                name: 'invoiceRecipient',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.object({ data: InvoiceRecipientResource }).passthrough(),
+    },
+    {
+        method: 'post',
+        path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient/duplicate',
+        alias: 'duplicateInvoiceRecipient',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'body',
+                type: 'Body',
+                schema: InvoiceRecipientRequest,
+            },
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+            {
+                name: 'invoiceRecipient',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.object({ data: InvoiceRecipientResource }).passthrough(),
+    },
+    {
+        method: 'delete',
+        path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient',
+        alias: 'deleteInvoiceRecipient',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+            {
+                name: 'invoiceRecipient',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.void(),
+    },
     {
         method: 'get',
         path: '/v1/organizations/:organization/invoices',
@@ -1901,6 +2034,11 @@ const endpoints = makeApi([
                 type: 'Query',
                 schema: z.number().int().gte(1).lte(2147483647).optional(),
             },
+            {
+                name: 'status',
+                type: 'Query',
+                schema: InvoiceStatus.optional(),
+            },
         ],
         response: z.object({ data: InvoiceCollection }).passthrough(),
         errors: [

resources/js/packages/ui/src/combobox/Combobox.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../utils/cn';
+
+const props = defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ComboboxRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <!-- Keep the trigger inside this root. Reka treats anything within the root
+         element as "not outside", so it suppresses its own dismissal for trigger
+         clicks and ComboboxInput's blur-close ignores them. Putting the trigger
+         in a separate Popover instead gives two competing open states, and the
+         popover then closes on mousedown and reopens on the following click. -->
+    <ComboboxRoot v-slot="slotProps" v-bind="forwarded" :class="cn('min-w-0', props.class)">
+        <slot v-bind="slotProps" />
+    </ComboboxRoot>
+</template>

resources/js/packages/ui/src/combobox/ComboboxAnchor.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ComboboxAnchorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxAnchor, useForwardProps } from 'reka-ui';
+import { cn } from '../utils/cn';
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <ComboboxAnchor v-bind="forwarded" :class="cn('w-full', props.class)">
+        <slot />
+    </ComboboxAnchor>
+</template>

resources/js/packages/ui/src/combobox/ComboboxInput.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ComboboxInputEmits, ComboboxInputProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Search } from '@lucide/vue';
+import { ComboboxInput, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../utils/cn';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = defineProps<ComboboxInputProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ComboboxInputEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <div class="relative items-center border-b border-card-background-separator">
+        <ComboboxInput
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'h-10 w-full border-0 rounded-none bg-transparent pl-9 pr-3 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:ring-0',
+                    props.class
+                )
+            " />
+        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
+            <Search class="size-4 text-text-tertiary" />
+        </span>
+    </div>
+</template>

resources/js/packages/ui/src/combobox/ComboboxItem.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../utils/cn';
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ComboboxItem
+        v-bind="forwarded"
+        :class="
+            cn(
+                'flex w-full cursor-default items-center rounded-md px-2 py-1.5 text-sm text-text-primary data-[highlighted]:bg-card-background-active',
+                props.class
+            )
+        ">
+        <slot />
+    </ComboboxItem>
+</template>

resources/js/packages/ui/src/combobox/ComboboxList.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../utils/cn';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+        position: 'popper',
+        align: 'start',
+        sideOffset: 4,
+        class: undefined,
+    }
+);
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ComboboxPortal>
+        <ComboboxContent
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'z-50 w-[--reka-popper-anchor-width] min-w-60 overflow-hidden rounded-lg border border-popover-border bg-popover text-popover-foreground shadow-dropdown outline-none origin-[var(--reka-combobox-content-transform-origin)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                    props.class
+                )
+            ">
+            <slot />
+        </ComboboxContent>
+    </ComboboxPortal>
+</template>

resources/js/packages/ui/src/combobox/ComboboxSeparator.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxSeparator, useForwardProps } from 'reka-ui';
+import { cn } from '../utils/cn';
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <ComboboxSeparator
+        v-bind="forwarded"
+        :class="cn('my-1 h-px bg-card-background-separator', props.class)" />
+</template>

resources/js/packages/ui/src/combobox/ComboboxTrigger.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '../utils/cn';
+
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <!-- Reka hardcodes tabindex="-1" here because it expects a ComboboxInput
+         next to the trigger in the anchor to be the focusable control. Our input
+         lives inside ComboboxList, so this trigger is the control and has to be
+         tabbable. tabindex is a fallthrough attr, which Vue applies after Reka's
+         own props and therefore wins.
+
+         Reka also hardcodes aria-label="Show popup", which would otherwise be
+         the accessible name. Pass :aria-label on the child element (it wins
+         again, because Slot merges child props over attrs) to name the trigger
+         after its current value. -->
+    <ComboboxTrigger v-bind="forwarded" :class="cn(props.class)" tabindex="0">
+        <slot />
+    </ComboboxTrigger>
+</template>

resources/js/packages/ui/src/combobox/ComboboxViewport.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ComboboxViewportProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxViewport, useForwardProps } from 'reka-ui';
+import { cn } from '../utils/cn';
+
+const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <ComboboxViewport
+        v-bind="forwarded"
+        :class="cn('ui-combobox-viewport max-h-60 overflow-y-auto p-2', props.class)">
+        <slot />
+    </ComboboxViewport>
+</template>
+
+<style>
+/* Reka's ComboboxViewport injects a global style that hides scrollbars; the
+   attribute+class selector below is more specific and restores them. */
+[data-reka-combobox-viewport].ui-combobox-viewport {
+    scrollbar-width: thin;
+    -ms-overflow-style: auto;
+}
+[data-reka-combobox-viewport].ui-combobox-viewport::-webkit-scrollbar {
+    display: block;
+    width: 8px;
+}
+[data-reka-combobox-viewport].ui-combobox-viewport::-webkit-scrollbar-thumb {
+    background-color: rgb(127 127 127 / 0.4);
+    border-radius: 4px;
+}
+</style>

resources/js/packages/ui/src/combobox/index.ts

@@ -0,0 +1,9 @@
+export { default as Combobox } from './Combobox.vue';
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue';
+export { default as ComboboxInput } from './ComboboxInput.vue';
+export { default as ComboboxItem } from './ComboboxItem.vue';
+export { default as ComboboxList } from './ComboboxList.vue';
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue';
+export { default as ComboboxTrigger } from './ComboboxTrigger.vue';
+export { default as ComboboxViewport } from './ComboboxViewport.vue';
+export { ComboboxVirtualizer } from 'reka-ui';

resources/js/packages/ui/src/index.ts

@@ -57,6 +57,16 @@ import {
     CalendarNextButton,
     CalendarPrevButton,
 } from './calendar/index';
+import {
+    Combobox,
+    ComboboxAnchor,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxList,
+    ComboboxSeparator,
+    ComboboxTrigger,
+    ComboboxViewport,
+} from './combobox/index';
 import { CommandPalette } from './CommandPalette/index';
 import {
     ContextMenu,
@@ -176,6 +186,14 @@ export {
     CardTitle,
     Checkbox,
     color,
+    Combobox,
+    ComboboxAnchor,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxList,
+    ComboboxSeparator,
+    ComboboxTrigger,
+    ComboboxViewport,
     CommandPalette,
     ContextMenu,
     ContextMenuCheckboxItem,

tsconfig.json

@@ -6,9 +6,7 @@
   "compilerOptions": {
     "paths": {
       "@/*": ["./resources/js/*"],
-      "@solidtime/ui": ["./resources/js/packages/ui/src/index.ts"],
+      "@solidtime/ui": ["./resources/js/packages/ui/src/index.ts"]
-      "@e2e/*": ["./e2e/*"],
-      "@e2e-support/*": ["./playwright/*"]
     }
   },
   "skipLibCheck": true,