@yca-software/yca-react-core 0.0.1

package/README.md

@@ -0,0 +1,129 @@
+# @yca-software/yca-react-core
+
+Shared React components and helpers for YCA apps.
+
+## Install
+
+```bash
+pnpm add @yca-software/yca-react-core
+```
+
+Import styles once in your app entry:
+
+```tsx
+import '@yca-software/yca-react-core/styles.css';
+```
+
+**Peers:** `react`, `react-dom`, `react-hook-form`, `react-i18next`, `react-router`, `@tanstack/react-query`
+
+## Usage
+
+Prefer subpath imports:
+
+```tsx
+import { Button, Form } from '@yca-software/yca-react-core/ui';
+import { Hero, Navigation, Footer } from '@yca-software/yca-react-core/marketing';
+import { AdminListPage, PageLoader } from '@yca-software/yca-react-core/spa';
+import { EmailField, PermissionsField } from '@yca-software/yca-react-core/forms';
+import { createApiProvider, useAPI } from '@yca-software/yca-react-core/api';
+import { resolveApiError, formatApiError } from '@yca-software/yca-react-core/errors';
+import { createCookieNames } from '@yca-software/yca-react-core/constants';
+import { useAdminListPage, useTranslationNamespace } from '@yca-software/yca-react-core/hooks';
+import { getAdminDetailErrorKind } from '@yca-software/yca-react-core/admin';
+```
+
+| Subpath | Contents |
+|---------|----------|
+| `/ui` | Radix + Tailwind UI primitives (~34 components) |
+| `/marketing` | Landing page blocks (Hero, Navigation, PricingSection, …) |
+| `/spa` | Admin lists, loaders, query shells, entity rows, theme |
+| `/forms` | Generic RHF fields (EmailField, PermissionsField, …) |
+| `/api` | HTTP client, `createApiProvider`, `useAPI`, 401 refresh |
+| `/auth` | Cookie helpers, JWT decode |
+| `/errors` | `resolveApiError`, `formatApiError`, mutation/query toast helpers |
+| `/constants` | `createCookieNames`, pagination flatten helpers |
+| `/admin` | `getAdminDetailErrorKind` |
+| `/types` | Shared form/admin types (`RoleOption`, `PermissionGroup`, …) |
+| `/hooks` | `useAdminListPage`, `useTranslationNamespace` |
+| `/lib` | `cn`, dates, pagination, surfaces, radix overlays |
+| `/styles.css` | Theme tokens + `ds-mkt-*` marketing utilities |
+
+The root export re-exports all subpaths for convenience.
+
+See component READMEs under `src/components/{ui,marketing,spa,forms}/`.
+
+## Consumer wiring
+
+The library provides **generic mechanisms**. Your SPA binds env, stores, and locales in a thin `src/helpers/` layer (same pattern as `templates/react-spa`):
+
+```tsx
+// helpers/error.ts — app owns i18n + toast
+export function formatApiError(error: unknown) {
+  return coreFormatApiError(error, i18n.t.bind(i18n));
+}
+
+// helpers/cookie.ts — app owns env
+export const cookieNames = createCookieNames(APP_NAME, ENV);
+
+// helpers/hooks/useTranslationNamespace.ts
+export function useTranslationNamespace(ns: string | string[]) {
+  return useCoreTranslationNamespace(ns, loadNamespace);
+}
+```
+
+**Keep in the app, not the library:** routes, TanStack Query hooks per resource, zustand stores, `locales/**`, billing/Paddle, permission constants, PostHog.
+
+## Theming
+
+Import styles once, then override CSS variables in your global stylesheet:
+
+```tsx
+import '@yca-software/yca-react-core/styles.css';
+```
+
+```css
+:root {
+  --radius: 0.875rem;
+  --primary: oklch(0.35 0.03 85);
+  --border: oklch(0.88 0.006 85);
+}
+
+.dark {
+  --background: oklch(0.14 0.01 85);
+}
+```
+
+Key variables: `--background`, `--foreground`, `--card`, `--primary`, `--muted`, `--border`, `--border-subtle`, `--radius`, `--shadow-surface`, `--shadow-elevated`, `--font-sans`.
+
+Browse **Foundation → Theme** in Storybook for a full table and live preview.
+
+See [`CHANGELOG.md`](CHANGELOG.md) for visual default changes in the latest release.
+
+## Development
+
+```bash
+pnpm install
+pnpm run build
+pnpm run ci
+pnpm run storybook
+```
+
+## Adding modules
+
+1. Add source under `src/components/`, `src/hooks/`, `src/lib/`, or kit folders (`api/`, `auth/`, …)
+2. UI components: implement in `ui/<name>/index.tsx` (see `src/components/ui/README.md`)
+3. Marketing blocks: implement in `marketing/<name>/index.tsx`
+4. SPA patterns: implement in `spa/<name>/index.tsx`
+5. Form fields: implement in `forms/<name>/index.tsx`
+6. Add a `tsup` entry in `tsup.config.ts` if you add a new subpath
+7. Add a matching `exports` entry in `package.json`
+
+## Release
+
+Publishing is automated when you [create a GitHub Release](https://github.com/yca-software/yca-react-core/releases/new):
+
+1. Bump `version` in `package.json`
+2. Commit and push to `main`
+3. Tag `vX.Y.Z` and publish the release
+
+CI runs build, lint, tests, then publishes to npm with `NPM_TOKEN`.

package/dist/admin/index.d.ts

@@ -0,0 +1,10 @@
+import { A as AdminDetailErrorKind } from '../admin-BVYdWtEy.js';
+
+declare function getAdminDetailErrorKind(options: {
+    isLoading: boolean;
+    isError: boolean;
+    hasData: boolean;
+    status?: number;
+}): AdminDetailErrorKind | undefined;
+
+export { AdminDetailErrorKind, getAdminDetailErrorKind };

package/dist/admin/index.js

@@ -0,0 +1,3 @@
+export { getAdminDetailErrorKind } from '../chunk-3ZLODBRJ.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/admin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/admin-BVYdWtEy.d.ts

@@ -0,0 +1,3 @@
+type AdminDetailErrorKind = 'notFound' | 'forbidden' | 'load';
+
+export type { AdminDetailErrorKind as A };

package/dist/api/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { a as ApiClientProviderConfig, F as FetchFn, A as ApiClientConfig, d as RefreshRequestConfig, e as RequestConfig } from '../types-CN73TWSY.js';
+export { b as ApiErrorBody, R as RefreshBodyContext, c as RefreshConfig, f as RequestError } from '../types-CN73TWSY.js';
+
+declare function ApiClientProvider({ baseURL, config, children, }: {
+    baseURL: string;
+    config: ApiClientProviderConfig;
+    children: ReactNode;
+}): React.JSX.Element;
+declare function useApiClientConfig(): ApiClientConfig;
+declare function useAPI(): FetchFn;
+
+interface CreateApiProviderOptions {
+    baseURL: string;
+    getAccessToken: () => string | null;
+    getRefreshToken: () => string | null;
+    /** When true, refresh uses HttpOnly cookie credentials instead of body token. */
+    cookieCredentialsEnabled: () => boolean;
+    setAccessToken: (token: string) => void;
+    onRefreshFailure: () => void;
+    getAcceptLanguage?: () => string;
+    onRefreshStart?: () => void;
+    onRefreshEnd?: () => void;
+    /** Refresh endpoint path relative to baseURL. Defaults to `auth/refresh`. */
+    refreshEndpoint?: string;
+    /** Paths that must not trigger automatic refresh retry on 401. Defaults to `['auth/']`. */
+    refreshExcludedPrefixes?: string[];
+}
+/**
+ * Factory for app `ApiProvider` components. Pass a hook that returns wiring options
+ * (cookies, i18n, zustand). Memoize that return value with `useMemo` so the API
+ * client context is not rebuilt on every parent render.
+ */
+declare function createApiProvider(useOptions: () => CreateApiProviderOptions): ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+
+declare const DEFAULT_REFRESH_ENDPOINT = "auth/refresh";
+declare const DEFAULT_REFRESH_EXCLUDED_PREFIXES: string[];
+interface DefaultRefreshRequestOptions {
+    endpoint?: string;
+    excludedRetryPrefixes?: string[];
+}
+declare function createDefaultRefreshRequest({ endpoint, excludedRetryPrefixes, }?: DefaultRefreshRequestOptions): RefreshRequestConfig;
+declare function buildRequestUrl(baseURL: string, endpoint: string): string;
+declare function getRequestHeaders(accessToken: string | null, options?: {
+    multipart?: boolean;
+    acceptLanguage?: string;
+}): HeadersInit;
+declare function getRequestOptions(config: RequestConfig, token: string | null, acceptLanguage?: string): RequestInit;
+declare function performAccessTokenRefresh(params: {
+    baseURL: string;
+    getRefreshToken: () => string | null;
+    request: RefreshRequestConfig;
+    useCookieCredentials: boolean;
+    setAccessToken: (token: string) => void;
+    onFailure: () => void;
+    acceptLanguage?: string;
+}): Promise<string>;
+declare function executeConfiguredRefresh(config: ApiClientConfig): Promise<string>;
+
+declare function createResponseHandler(config: ApiClientConfig): (response: Response, options?: {
+    config?: RequestConfig;
+    isRetry?: boolean;
+}) => Promise<unknown>;
+
+export { ApiClientConfig, ApiClientProvider, ApiClientProviderConfig, type CreateApiProviderOptions, DEFAULT_REFRESH_ENDPOINT, DEFAULT_REFRESH_EXCLUDED_PREFIXES, type DefaultRefreshRequestOptions, FetchFn, RefreshRequestConfig, RequestConfig, buildRequestUrl, createApiProvider, createDefaultRefreshRequest, createResponseHandler, executeConfiguredRefresh, getRequestHeaders, getRequestOptions, performAccessTokenRefresh, useAPI, useApiClientConfig };

package/dist/api/index.js

@@ -0,0 +1,3 @@
+export { ApiClientProvider, DEFAULT_REFRESH_ENDPOINT, DEFAULT_REFRESH_EXCLUDED_PREFIXES, buildRequestUrl, createApiProvider, createDefaultRefreshRequest, createResponseHandler, executeConfiguredRefresh, getRequestHeaders, getRequestOptions, performAccessTokenRefresh, useAPI, useApiClientConfig } from '../chunk-6LO5O4G6.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/api/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/auth/index.d.ts

@@ -0,0 +1,49 @@
+import { C as CookieNames } from '../cookies-ZS_QYOR7.js';
+
+interface CookieConsent {
+    analytics: boolean;
+    timestamp: string;
+}
+interface TokenCookieOptions {
+    names: CookieNames;
+    domain?: string;
+    secure?: boolean;
+    sameSite?: 'strict' | 'lax' | 'none';
+}
+declare function getAccessTokenFromCookies(names: CookieNames): string | null;
+declare function getRefreshTokenFromCookies(names: CookieNames): string | null;
+declare function getCookieConsentFromCookies(names: CookieNames): CookieConsent | null;
+declare function removeAccessTokenCookie(options: TokenCookieOptions): void;
+declare function removeRefreshTokenCookie(options: TokenCookieOptions): void;
+declare function removeCookieConsentCookie(names: CookieNames): void;
+declare function setCookieConsentCookie(names: CookieNames, timestamp: string, analytics: boolean, domain?: string): void;
+declare function setAccessTokenCookie(token: string, options: TokenCookieOptions): void;
+declare function setRefreshTokenCookie(token: string, options: TokenCookieOptions): void;
+declare function setTokens(accessToken: string, refreshToken: string, options: TokenCookieOptions): void;
+
+interface JWTAccessTokenPermissionData {
+    organizationId: string;
+    roleId?: string;
+    permissions: string[];
+}
+interface DecodedAccessToken {
+    sub: string;
+    email?: string;
+    permissions?: JWTAccessTokenPermissionData[];
+    isAdmin?: boolean;
+    impersonatedBy?: string | null;
+    impersonatedByEmail?: string | null;
+}
+interface AccessInfo {
+    userId: string;
+    email: string;
+    permissions: JWTAccessTokenPermissionData[];
+    isAdmin: boolean;
+    impersonatedBy: string | null;
+    impersonatedByEmail: string | null;
+}
+
+declare function getAccessInfoFromToken(accessToken: string): AccessInfo | null;
+declare function getInitials(firstName?: string, lastName?: string): string;
+
+export { type AccessInfo, type CookieConsent, type DecodedAccessToken, type JWTAccessTokenPermissionData, type TokenCookieOptions, getAccessInfoFromToken, getAccessTokenFromCookies, getCookieConsentFromCookies, getInitials, getRefreshTokenFromCookies, removeAccessTokenCookie, removeCookieConsentCookie, removeRefreshTokenCookie, setAccessTokenCookie, setCookieConsentCookie, setRefreshTokenCookie, setTokens };

package/dist/auth/index.js

@@ -0,0 +1,3 @@
+export { getAccessInfoFromToken, getAccessTokenFromCookies, getCookieConsentFromCookies, getInitials, getRefreshTokenFromCookies, removeAccessTokenCookie, removeCookieConsentCookie, removeRefreshTokenCookie, setAccessTokenCookie, setCookieConsentCookie, setRefreshTokenCookie, setTokens } from '../chunk-APZVW5SW.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/auth/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/chunk-2HJO2ICF.js

@@ -0,0 +1,339 @@
+import { FormField, FormItem, FormLabel, FormControl, Textarea, FormMessage, Select, Tooltip, Checkbox, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './chunk-PLSNCPEC.js';
+import { Input } from './chunk-3AYG73DK.js';
+import { cn } from './chunk-GXWVFQCK.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Info, ChevronDown } from 'lucide-react';
+
+function DescriptionField({
+  control,
+  name,
+  label,
+  placeholder,
+  className,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className, children: [
+        /* @__PURE__ */ jsx(FormLabel, { children: label }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Textarea, { placeholder, disabled, ...field }) }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+}
+function EmailField({
+  control,
+  name,
+  label,
+  placeholder,
+  description,
+  autoComplete = "email",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className, children: [
+        /* @__PURE__ */ jsx(FormLabel, { children: label }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: description }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { type: "email", placeholder, autoComplete, ...field }) }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+}
+function ExpiresAtField({
+  control,
+  name,
+  label,
+  placeholder,
+  ariaLabel,
+  options
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+        /* @__PURE__ */ jsx(FormLabel, { children: label }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: field.value ?? "",
+            onValueChange: (next) => {
+              field.onChange(next);
+            },
+            options,
+            placeholder,
+            "aria-label": ariaLabel ?? label
+          }
+        ),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+}
+function FirstNameField({
+  control,
+  name,
+  label,
+  placeholder,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className, children: [
+        /* @__PURE__ */ jsx(FormLabel, { children: label }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder, autoComplete: "given-name", ...field }) }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+}
+function LastNameField({
+  control,
+  name,
+  label,
+  placeholder,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className, children: [
+        /* @__PURE__ */ jsx(FormLabel, { children: label }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder, autoComplete: "family-name", ...field }) }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+}
+function NameField({
+  control,
+  name,
+  label,
+  placeholder,
+  className,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className, children: [
+        /* @__PURE__ */ jsx(FormLabel, { children: label }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder, disabled, autoComplete: "off", ...field }) }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+}
+function PasswordField({
+  control,
+  name,
+  label,
+  placeholder,
+  autoComplete = "current-password",
+  rightLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: label }),
+          rightLabel
+        ] }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "password",
+            placeholder,
+            autoComplete,
+            ...field
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+}
+function PermissionsField({
+  control,
+  name,
+  label,
+  groups,
+  t,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => {
+        const selected = field.value ?? [];
+        const togglePermission = (key, group) => {
+          const readKey = getReadKeyForGroup(group);
+          const opt = group.find((p) => p.key === key);
+          if (!opt) return;
+          const next = selected.includes(key) ? selected.filter((k) => k !== key) : [...selected, key];
+          if (opt.action === "write" || opt.action === "delete") {
+            if (next.includes(key) && readKey && !next.includes(readKey)) {
+              next.push(readKey);
+            }
+          }
+          if (opt.action === "delete") {
+            const writeKey = getWriteKeyForGroup(group);
+            if (next.includes(key) && writeKey && !next.includes(writeKey)) {
+              next.push(writeKey);
+            }
+          }
+          field.onChange(next);
+        };
+        return /* @__PURE__ */ jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: label }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: groups.map((group) => {
+            const readKey = getReadKeyForGroup(group.permissions);
+            const writeKey = getWriteKeyForGroup(group.permissions);
+            const readDisabled = readKey ? hasWriteOrDelete(group.permissions, selected) : false;
+            const writeDisabled = writeKey ? hasDelete(group.permissions, selected) : false;
+            const readChecked = readKey !== null && (selected.includes(readKey) || readDisabled);
+            const writeChecked = writeKey !== null && (selected.includes(writeKey) || writeDisabled);
+            return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t(group.labelKey) }),
+                /* @__PURE__ */ jsx(Tooltip, { content: t(group.descriptionKey), side: "top", align: "start", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "text-muted-foreground hover:text-foreground cursor-help inline-flex rounded p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "aria-label": t(group.descriptionKey),
+                    children: /* @__PURE__ */ jsx(Info, { className: "size-3.5", "aria-hidden": true })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4 pl-2", children: group.permissions.map((perm) => {
+                const isRead = perm.action === "read";
+                const isWrite = perm.action === "write";
+                const checked = isRead ? readChecked : isWrite ? writeChecked : selected.includes(perm.key);
+                const permissionDisabled = isRead && readDisabled || isWrite && writeDisabled;
+                const globallyDisabled = disabled || permissionDisabled;
+                return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: perm.key,
+                      checked: isRead ? readChecked : checked,
+                      disabled: globallyDisabled,
+                      onCheckedChange: () => !globallyDisabled && togglePermission(perm.key, group.permissions)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      htmlFor: perm.key,
+                      className: "text-sm font-normal leading-none cursor-pointer peer-disabled:opacity-70",
+                      children: t(perm.labelKey)
+                    }
+                  )
+                ] }, perm.key);
+              }) })
+            ] }, group.contextKey);
+          }) }),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] });
+      }
+    }
+  );
+}
+function getReadKeyForGroup(permissions) {
+  const readOpt = permissions.find((p) => p.action === "read");
+  return readOpt?.key ?? null;
+}
+function getWriteKeyForGroup(permissions) {
+  const writeOpt = permissions.find((p) => p.action === "write");
+  return writeOpt?.key ?? null;
+}
+function hasWriteOrDelete(permissions, selected) {
+  return permissions.some(
+    (p) => (p.action === "write" || p.action === "delete") && selected.includes(p.key)
+  );
+}
+function hasDelete(permissions, selected) {
+  return permissions.some((p) => p.action === "delete" && selected.includes(p.key));
+}
+function RoleSelectField({
+  control,
+  name,
+  label,
+  options,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => {
+        const selectedOption = options.find((opt) => opt.value === field.value);
+        const displayValue = selectedOption?.label ?? label;
+        return /* @__PURE__ */ jsxs(FormItem, { className, children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: label }),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "combobox",
+                "aria-label": label,
+                onBlur: field.onBlur,
+                className: cn(
+                  "flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-colors",
+                  "hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  "disabled:pointer-events-none disabled:opacity-50",
+                  "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+                  !field.value && "text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-left", children: displayValue }),
+                  /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 text-muted-foreground" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              DropdownMenuContent,
+              {
+                align: "start",
+                sideOffset: 0,
+                className: cn("min-w-(--radix-dropdown-menu-trigger-width) z-101"),
+                children: options.map((opt) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => field.onChange(opt.value), children: opt.label }, opt.value))
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] });
+      }
+    }
+  );
+}
+
+export { DescriptionField, EmailField, ExpiresAtField, FirstNameField, LastNameField, NameField, PasswordField, PermissionsField, RoleSelectField };
+//# sourceMappingURL=chunk-2HJO2ICF.js.map
+//# sourceMappingURL=chunk-2HJO2ICF.js.map