@open-mercato/ui 0.6.1-develop.3278.1.a4d26475e4 → 0.6.1-develop.3287.1.450f4ffb56

package/dist/primitives/website-input.js

@@ -0,0 +1,56 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { inputWrapperVariants, inputElementVariants } from "./input.js";
+const WebsiteInput = React.forwardRef(
+  ({ className, inputClassName, size, prefix = "https://", showPrefix = true, placeholder, disabled, ...props }, ref) => {
+    const t = useT();
+    const resolvedPlaceholder = placeholder ?? t("ui.inputs.websiteInput.placeholder", "www.example.com");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          inputWrapperVariants({ size }),
+          // Override default px so prefix box can sit flush left.
+          "px-0 overflow-hidden",
+          className
+        ),
+        "data-slot": "website-input-wrapper",
+        children: [
+          showPrefix ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "flex shrink-0 items-center self-stretch border-r border-input px-3 text-sm text-muted-foreground select-none",
+              "aria-hidden": "true",
+              children: prefix
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "url",
+              inputMode: "url",
+              autoComplete: "url",
+              placeholder: resolvedPlaceholder,
+              disabled,
+              className: cn(
+                inputElementVariants({ size }),
+                "px-3",
+                inputClassName
+              ),
+              ...props
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+WebsiteInput.displayName = "WebsiteInput";
+export {
+  WebsiteInput
+};
+//# sourceMappingURL=website-input.js.map

package/dist/primitives/website-input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/website-input.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { VariantProps } from 'class-variance-authority'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { inputWrapperVariants, inputElementVariants } from './input'\n\nexport type WebsiteInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'> &\n  VariantProps<typeof inputWrapperVariants> & {\n    /** Protocol shown in the left prefix box. Defaults to `'https://'` per Figma. */\n    prefix?: string\n    /** Hide the prefix box entirely (consumer wants a bare URL input). */\n    showPrefix?: boolean\n    /** Optional className on the wrapper. */\n    className?: string\n    /** Optional className on the inner `<input>`. */\n    inputClassName?: string\n  }\n\n/**\n * Website input matching Figma `Text Input [1.1]` (node `266:5251`) **Website** variant \u2014 a left\n * prefix box with the protocol text (default `'https://'`), a vertical divider, then the URL text\n * input. Built on the shared `inputWrapperVariants` / `inputElementVariants` CVA so the visual\n * contract matches the foundation `Input` primitive.\n *\n * The prefix is **display-only** \u2014 the inner `<input>` value contains ONLY the host/path portion\n * (e.g. `'www.example.com/path'`). Compose the full URL at the consumer boundary if needed.\n */\nexport const WebsiteInput = React.forwardRef<HTMLInputElement, WebsiteInputProps>(\n  ({ className, inputClassName, size, prefix = 'https://', showPrefix = true, placeholder, disabled, ...props }, ref) => {\n    const t = useT()\n    const resolvedPlaceholder = placeholder ?? t('ui.inputs.websiteInput.placeholder', 'www.example.com')\n    return (\n      <div\n        className={cn(\n          inputWrapperVariants({ size }),\n          // Override default px so prefix box can sit flush left.\n          'px-0 overflow-hidden',\n          className,\n        )}\n        data-slot=\"website-input-wrapper\"\n      >\n        {showPrefix ? (\n          <>\n            <span\n              className=\"flex shrink-0 items-center self-stretch border-r border-input px-3 text-sm text-muted-foreground select-none\"\n              aria-hidden=\"true\"\n            >\n              {prefix}\n            </span>\n          </>\n        ) : null}\n        <input\n          ref={ref}\n          type=\"url\"\n          inputMode=\"url\"\n          autoComplete=\"url\"\n          placeholder={resolvedPlaceholder}\n          disabled={disabled}\n          className={cn(\n            inputElementVariants({ size }),\n            'px-3',\n            inputClassName,\n          )}\n          {...props}\n        />\n      </div>\n    )\n  },\n)\nWebsiteInput.displayName = 'WebsiteInput'\n"],
+  "mappings": ";AAkCM,SAUI,UACE,KAXN;AAhCN,YAAY,WAAW;AAEvB,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,sBAAsB,4BAA4B;AAuBpD,MAAM,eAAe,MAAM;AAAA,EAChC,CAAC,EAAE,WAAW,gBAAgB,MAAM,SAAS,YAAY,aAAa,MAAM,aAAa,UAAU,GAAG,MAAM,GAAG,QAAQ;AACrH,UAAM,IAAI,KAAK;AACf,UAAM,sBAAsB,eAAe,EAAE,sCAAsC,iBAAiB;AACpG,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,qBAAqB,EAAE,KAAK,CAAC;AAAA;AAAA,UAE7B;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAU;AAAA,QAET;AAAA,uBACC,gCACE;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cAEX;AAAA;AAAA,UACH,GACF,IACE;AAAA,UACJ;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAa;AAAA,cACb,aAAa;AAAA,cACb;AAAA,cACA,WAAW;AAAA,gBACT,qBAAqB,EAAE,KAAK,CAAC;AAAA,gBAC7B;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA;AAAA,UACN;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.1-develop.3278.1.a4d26475e4",
+  "version": "0.6.1-develop.3287.1.450f4ffb56",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -141,12 +141,12 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.1-develop.3278.1.a4d26475e4",
+    "@open-mercato/shared": "0.6.1-develop.3287.1.450f4ffb56",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.1-develop.3278.1.a4d26475e4",
+    "@open-mercato/shared": "0.6.1-develop.3287.1.450f4ffb56",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/AppShell.tsx

@@ -7,6 +7,7 @@ import { ChevronDown, ChevronLeft, Search, X } from 'lucide-react'
 import { Button } from '../primitives/button'
 import { IconButton } from '../primitives/icon-button'
 import { Input } from '../primitives/input'
+import { SearchInput } from '../primitives/search-input'
 import { Checkbox } from '../primitives/checkbox'
 import { Separator } from '../primitives/separator'
 import { FlashMessages } from './FlashMessages'
@@ -674,24 +675,12 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           </div>
         )}
         {!compact && !hideSearch && (
-          <Input
-            type="text"
+          <SearchInput
             value={navQuery}
-            onChange={(e) => setNavQuery(e.target.value)}
+            onChange={setNavQuery}
             placeholder={t('appShell.searchNavPlaceholder', 'Search...')}
             aria-label={t('appShell.searchNavAria', 'Search navigation')}
-            leftIcon={<Search aria-hidden />}
-            rightIcon={navQueryActive ? (
-              <IconButton
-                type="button"
-                variant="ghost"
-                size="xs"
-                onClick={() => setNavQuery('')}
-                aria-label={t('appShell.searchNavClear', 'Clear search')}
-              >
-                <X className="size-3.5" aria-hidden />
-              </IconButton>
-            ) : undefined}
+            clearLabel={t('appShell.searchNavClear', 'Clear search')}
             className="mb-2"
           />
         )}
@@ -891,24 +880,12 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           />
         ) : null}
         {!compact && (
-          <Input
-            type="text"
+          <SearchInput
             value={navQuery}
-            onChange={(e) => setNavQuery(e.target.value)}
+            onChange={setNavQuery}
             placeholder={t('appShell.searchNavPlaceholder', 'Search...')}
             aria-label={t('appShell.searchNavAria', 'Search navigation')}
-            leftIcon={<Search aria-hidden />}
-            rightIcon={navQueryActive ? (
-              <IconButton
-                type="button"
-                variant="ghost"
-                size="xs"
-                onClick={() => setNavQuery('')}
-                aria-label={t('appShell.searchNavClear', 'Clear search')}
-              >
-                <X className="size-3.5" aria-hidden />
-              </IconButton>
-            ) : undefined}
+            clearLabel={t('appShell.searchNavClear', 'Clear search')}
             className="mb-2"
           />
         )}

package/src/backend/CrudForm.tsx

@@ -19,6 +19,7 @@ import { CSS } from '@dnd-kit/utilities'
 import { DataLoader } from '../primitives/DataLoader'
 import { Checkbox } from '../primitives/checkbox'
 import { Input } from '../primitives/input'
+import { PasswordInput } from '../primitives/password-input'
 import { Textarea } from '../primitives/textarea'
 import {
   Select,
@@ -3401,6 +3402,22 @@ function TextInput({
     commitIfChanged()
   }, [commitIfChanged])
 
+  if (inputType === 'password') {
+    return (
+      <PasswordInput
+        placeholder={placeholder}
+        value={local}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        spellCheck={false}
+        autoFocus={autoFocus}
+        data-crud-focus-target=""
+        disabled={disabled}
+      />
+    )
+  }
   return (
     <>
       <Input

package/src/backend/FilterBar.tsx

@@ -1,7 +1,8 @@
 "use client"
 import * as React from 'react'
-import { ListFilter, Search } from 'lucide-react'
+import { ListFilter } from 'lucide-react'
 import { Button } from '../primitives/button'
+import { SearchInput } from '../primitives/search-input'
 import { FilterDef, FilterOverlay, FilterValues } from './FilterOverlay'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 
@@ -82,15 +83,13 @@ export function FilterBar({
   const containerClass = `flex flex-col ${layout === 'inline' ? 'gap-1 sm:gap-2' : 'gap-2'} w-full`
   const searchBlock = onSearchChange ? (
     <div className={`flex items-center gap-2 ${searchAlign === 'right' ? 'sm:ml-auto' : ''}`}>
-      <div className="relative w-full sm:w-72 lg:w-80">
-        <input
+      <div className="w-full sm:w-72 lg:w-80">
+        <SearchInput
           value={searchDraft}
-          onChange={(e) => setSearchDraft(e.target.value)}
+          onChange={setSearchDraft}
           placeholder={resolvedSearchPlaceholder}
-          className="h-9 w-full rounded-md border border-input bg-background pl-8 pr-2 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50"
           suppressHydrationWarning
         />
-        <Search aria-hidden="true" className="absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
       </div>
       {searchTrailing ? (
         <div className="flex items-center gap-1">{searchTrailing}</div>

package/src/backend/__tests__/serverErrors.test.ts

@@ -1,4 +1,9 @@
-import { mapCrudServerErrorToFormErrors, raiseCrudError, readJsonSafe } from '../utils/serverErrors'
+import {
+  mapCrudServerErrorToFormErrors,
+  normalizeCrudServerError,
+  raiseCrudError,
+  readJsonSafe,
+} from '../utils/serverErrors'
 
 describe('serverErrors helpers', () => {
   it('maps details array into field errors and message', () => {
@@ -59,6 +64,79 @@ describe('serverErrors helpers', () => {
     }
   })
 
+  it('raiseCrudError extracts message from structured { error: { code, message } } envelope', async () => {
+    expect.assertions(4)
+    const response = new Response(
+      JSON.stringify({
+        ok: false,
+        error: {
+          code: 'invite_cooldown_active',
+          message: 'A recent invite for this email is still pending — please wait before re-inviting.',
+          details: { retryAfterSeconds: 60 },
+        },
+      }),
+      { status: 429, headers: { 'content-type': 'application/json' } },
+    )
+
+    try {
+      await raiseCrudError(response, 'Fallback message')
+    } catch (err) {
+      expect(err).toMatchObject({
+        status: 429,
+        message:
+          'A recent invite for this email is still pending — please wait before re-inviting.',
+      })
+      const errorField = (err as { error?: unknown }).error as
+        | { code?: unknown; details?: unknown }
+        | undefined
+      expect(errorField?.code).toBe('invite_cooldown_active')
+      expect(errorField?.details).toEqual({ retryAfterSeconds: 60 })
+      expect((err as { ok?: unknown }).ok).toBe(false)
+    }
+  })
+
+  it('normalizeCrudServerError reads message from nested { error: { message } } envelope', () => {
+    const normalized = normalizeCrudServerError({
+      ok: false,
+      error: {
+        code: 'invite_cooldown_active',
+        message: 'A recent invite for this email is still pending — please wait before re-inviting.',
+      },
+    })
+    expect(normalized.message).toBe(
+      'A recent invite for this email is still pending — please wait before re-inviting.',
+    )
+  })
+
+  it('raiseCrudError prefers top-level string error over nested error.message', async () => {
+    expect.assertions(1)
+    const response = new Response(
+      JSON.stringify({
+        error: 'Top-level message',
+        message: 'Top-level message',
+      }),
+      { status: 400, headers: { 'content-type': 'application/json' } },
+    )
+
+    await expect(raiseCrudError(response, 'Fallback message')).rejects.toMatchObject({
+      status: 400,
+      message: 'Top-level message',
+    })
+  })
+
+  it('raiseCrudError falls back when structured envelope has empty nested message', async () => {
+    expect.assertions(1)
+    const response = new Response(
+      JSON.stringify({ ok: false, error: { code: 'oops', message: '   ' } }),
+      { status: 500, headers: { 'content-type': 'application/json' } },
+    )
+
+    await expect(raiseCrudError(response, 'Fallback message')).rejects.toMatchObject({
+      status: 500,
+      message: 'Fallback message',
+    })
+  })
+
   it('raiseCrudError falls back to message when body is plain text', async () => {
     expect.assertions(1)
     const response = new Response('Something went wrong', { status: 500 })

package/src/backend/columns/ColumnChooserPanel.tsx

@@ -1,10 +1,11 @@
 "use client"
 import * as React from 'react'
-import { Search, GripVertical, X, ChevronRight } from 'lucide-react'
+import { GripVertical, X, ChevronRight } from 'lucide-react'
 import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
 import { Switch } from '../../primitives/switch'
 import { Input } from '../../primitives/input'
+import { SearchInput } from '../../primitives/search-input'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import {
   DndContext,
@@ -168,13 +169,11 @@ export function ColumnChooserSection({
   return (
     <div className="flex flex-col">
       <div className="px-4 py-3 border-t">
-        <Input
-          type="text"
+        <SearchInput
           size="sm"
-          leftIcon={<Search />}
           placeholder={t('ui.columnChooser.search', 'Search columns...')}
           value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          onChange={setSearchQuery}
         />
       </div>
 

package/src/backend/inputs/ComboboxInput.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '../../primitives/button'
 
 export type ComboboxOption = {
@@ -62,6 +63,9 @@ export function ComboboxInput({
   disabled = false,
   allowCustomValues = true,
 }: ComboboxInputProps) {
+  const t = useT()
+  const resolvedPlaceholder = placeholder ?? t('ui.inputs.comboboxInput.placeholder', 'Type to search...')
+  const loadingLabel = t('ui.inputs.comboboxInput.loading', 'Loading suggestions…')
   const [input, setInput] = React.useState('')
   const [asyncOptions, setAsyncOptions] = React.useState<ComboboxOption[]>([])
   const [resolvedOptions, setResolvedOptions] = React.useState<ComboboxOption[]>([])
@@ -288,9 +292,9 @@ export function ComboboxInput({
       <input
         ref={inputRef}
         type="text"
-        className="w-full h-9 rounded border px-2 text-sm disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed"
+        className="w-full h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:shadow-focus focus-visible:border-foreground disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed"
         value={input}
-        placeholder={placeholder || 'Type to search...'}
+        placeholder={resolvedPlaceholder}
         autoFocus={autoFocus}
         data-crud-focus-target=""
         disabled={disabled}
@@ -319,32 +323,34 @@ export function ComboboxInput({
       />
 
       {showSuggestions && !disabled && (loading || filteredSuggestions.length > 0) && (
-        <div className="absolute z-popover w-full mt-1 rounded border bg-popover shadow-lg max-h-48 sm:max-h-60 overflow-auto">
+        <div className="absolute z-popover w-full mt-1 rounded-md border border-input bg-popover p-2 shadow-md max-h-48 sm:max-h-60 overflow-auto">
           {loading && touched ? (
-            <div className="px-3 py-2 text-xs text-muted-foreground">Loading suggestions…</div>
+            <div className="px-2 py-1.5 text-xs text-muted-foreground">{loadingLabel}</div>
           ) : (
-            filteredSuggestions.map((option, index) => (
-              <Button
-                key={option.value}
-                type="button"
-                variant="ghost"
-                size="sm"
-                className={[
-                  'w-full h-auto justify-start font-normal text-left flex flex-col items-start px-3 py-2',
-                  index === selectedIndex ? 'bg-accent' : '',
-                ]
-                  .filter(Boolean)
-                  .join(' ')}
-                onMouseDown={(event) => event.preventDefault()}
-                onClick={() => selectValue(option.value)}
-                onMouseEnter={() => setSelectedIndex(index)}
-              >
-                <span className="font-medium">{option.label}</span>
-                {option.description ? (
-                  <span className="text-xs text-muted-foreground">{option.description}</span>
-                ) : null}
-              </Button>
-            ))
+            <div className="flex flex-col gap-1">
+              {filteredSuggestions.map((option, index) => (
+                <Button
+                  key={option.value}
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className={[
+                    'w-full h-auto justify-start font-normal text-left flex flex-col items-start rounded-lg p-2',
+                    index === selectedIndex ? 'bg-muted' : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => selectValue(option.value)}
+                  onMouseEnter={() => setSelectedIndex(index)}
+                >
+                  <span className="font-medium text-foreground">{option.label}</span>
+                  {option.description ? (
+                    <span className="text-xs text-muted-foreground">{option.description}</span>
+                  ) : null}
+                </Button>
+              ))}
+            </div>
           )}
         </div>
       )}

package/src/backend/inputs/EventPatternInput.tsx

@@ -1,12 +1,19 @@
 "use client"
 
 import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { ComboboxInput, type ComboboxOption } from './ComboboxInput'
 import { useAvailableEvents } from './EventSelect'
 
 export interface EventPatternInputProps {
   value: string
   onChange: (pattern: string) => void
+  /**
+   * Placeholder hint shown when the field is empty. Defaults to a translated
+   * `ui.inputs.eventPatternInput.placeholder` key (English fallback
+   * `'sales.orders.created'`) — an example of a valid event id with wildcards.
+   * Pass a custom string to override per-surface.
+   */
   placeholder?: string
   disabled?: boolean
   categories?: Array<'crud' | 'lifecycle' | 'system' | 'custom'>
@@ -16,11 +23,13 @@ export interface EventPatternInputProps {
 export function EventPatternInput({
   value,
   onChange,
-  placeholder = 'sales.orders.created',
+  placeholder,
   disabled,
   categories,
   modules,
 }: EventPatternInputProps) {
+  const t = useT()
+  const resolvedPlaceholder = placeholder ?? t('ui.inputs.eventPatternInput.placeholder', 'sales.orders.created')
   const { events } = useAvailableEvents({ categories, modules })
 
   const suggestions = React.useMemo<ComboboxOption[]>(
@@ -37,7 +46,7 @@ export function EventPatternInput({
     <ComboboxInput
       value={value}
       onChange={onChange}
-      placeholder={placeholder}
+      placeholder={resolvedPlaceholder}
       suggestions={suggestions}
       allowCustomValues={true}
       disabled={disabled}

package/src/backend/inputs/EventSelect.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { apiCall } from '../utils/apiCall'
 import {
   Select,
@@ -32,7 +33,7 @@ export interface EventSelectProps {
   value: string
   /** Called when event is selected */
   onChange: (eventId: string) => void
-  /** Placeholder text when no event selected */
+  /** Placeholder text when no event selected. Defaults to a translated string. */
   placeholder?: string
   /** Additional CSS classes */
   className?: string
@@ -44,6 +45,8 @@ export interface EventSelectProps {
   modules?: string[]
   /** Whether to exclude events marked as excludeFromTriggers (default: true) */
   excludeTriggerExcluded?: boolean
+  /** Trigger size — defaults to `'default'` (DS row-height contract). */
+  size?: 'sm' | 'default' | 'lg'
 }
 
 /**
@@ -54,13 +57,19 @@ export interface EventSelectProps {
 export function EventSelect({
   value,
   onChange,
-  placeholder = 'Select an event...',
+  placeholder,
   className,
   disabled,
   categories,
   modules,
   excludeTriggerExcluded = true,
+  size = 'default',
 }: EventSelectProps) {
+  const t = useT()
+  const resolvedPlaceholder = placeholder ?? t('ui.inputs.eventSelect.placeholder', 'Select an event...')
+  const loadingPlaceholder = t('ui.inputs.eventSelect.loading', 'Loading...')
+  const emptyPlaceholder = t('ui.inputs.eventSelect.empty', 'No events available')
+
   // Fetch events from the API
   const { data: allEvents = [], isLoading } = useQuery({
     queryKey: ['declared-events', excludeTriggerExcluded],
@@ -115,9 +124,9 @@ export function EventSelect({
       onValueChange={(next) => onChange(next ?? '')}
       disabled={disabled || isLoading}
     >
-      <SelectTrigger size="lg" className={className}>
+      <SelectTrigger size={size} className={className}>
         <SelectValue
-          placeholder={isLoading ? 'Loading...' : isEmpty ? 'No events available' : placeholder}
+          placeholder={isLoading ? loadingPlaceholder : isEmpty ? emptyPlaceholder : resolvedPlaceholder}
         />
       </SelectTrigger>
       <SelectContent>