@yca-software/yca-react-core 0.0.1

package/dist/theme/tokens.css

@@ -0,0 +1,115 @@
+/**
+ * YCA design tokens — override :root / .dark in your app to theme.
+ * Import via @yca-software/yca-react-core/styles.css
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-border-subtle: var(--border-subtle);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+:root {
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+
+  --radius: 0.75rem;
+
+  /* Soft neutral — warm gray, minimal hue (≈85) */
+  --background: oklch(0.985 0.004 85);
+  --foreground: oklch(0.22 0.012 85);
+  --card: oklch(0.995 0.003 85);
+  --card-foreground: oklch(0.22 0.012 85);
+  --popover: oklch(0.995 0.003 85);
+  --popover-foreground: oklch(0.22 0.012 85);
+  --primary: oklch(0.28 0.02 85);
+  --primary-foreground: oklch(0.98 0.004 85);
+  --secondary: oklch(0.96 0.008 85);
+  --secondary-foreground: oklch(0.32 0.014 85);
+  --muted: oklch(0.965 0.006 85);
+  --muted-foreground: oklch(0.52 0.012 85);
+  --accent: oklch(0.94 0.01 85);
+  --accent-foreground: oklch(0.28 0.014 85);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.99 0.004 85);
+  --border: oklch(0.9 0.008 85);
+  --border-subtle: oklch(0.93 0.006 85);
+  --input: oklch(0.93 0.006 85);
+  --ring: oklch(0.55 0.02 85);
+
+  --shadow-surface: 0 1px 2px color-mix(in oklch, var(--foreground) 4%, transparent);
+  --shadow-elevated:
+    0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) inset,
+    0 8px 24px -8px color-mix(in oklch, var(--foreground) 10%, transparent);
+}
+
+.dark {
+  --background: oklch(0.16 0.01 85);
+  --foreground: oklch(0.96 0.006 85);
+  --card: oklch(0.2 0.012 85);
+  --card-foreground: oklch(0.96 0.006 85);
+  --popover: oklch(0.2 0.012 85);
+  --popover-foreground: oklch(0.96 0.006 85);
+  --primary: oklch(0.92 0.008 85);
+  --primary-foreground: oklch(0.18 0.012 85);
+  --secondary: oklch(0.26 0.012 85);
+  --secondary-foreground: oklch(0.94 0.006 85);
+  --muted: oklch(0.26 0.012 85);
+  --muted-foreground: oklch(0.68 0.01 85);
+  --accent: oklch(0.3 0.014 85);
+  --accent-foreground: oklch(0.94 0.006 85);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.99 0.004 85);
+  --border: oklch(0.32 0.012 85);
+  --border-subtle: oklch(0.28 0.01 85);
+  --input: oklch(0.28 0.01 85);
+  --ring: oklch(0.62 0.02 85);
+
+  --shadow-surface: 0 1px 2px color-mix(in oklch, var(--foreground) 6%, transparent);
+  --shadow-elevated:
+    0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent) inset,
+    0 12px 32px -10px color-mix(in oklch, var(--foreground) 18%, transparent);
+}
+
+@layer base {
+  * {
+    border-color: var(--border-subtle);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { A as AdminDetailErrorKind } from '../admin-BVYdWtEy.js';
+export { P as PermissionAction, a as PermissionGroup, b as PermissionOption, R as RoleOption } from '../forms-VpLvEFob.js';

package/dist/types/index.js

@@ -0,0 +1,3 @@
+import '../chunk-NL4NAHXG.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

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

package/dist/types-BuNHOJ1h.d.ts

@@ -0,0 +1,58 @@
+import * as date_fns from 'date-fns';
+import { DateRange } from 'react-day-picker';
+
+/** Preset id used when using default presets (for translation keys). */
+type DefaultPresetId = 'today' | 'yesterday' | 'last7' | 'last14' | 'last30' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth';
+/** Labels for action buttons, form fields, and accessibility. Pass translated strings for i18n. */
+interface DateRangePickerTranslations {
+    /** Apply/confirm button (e.g. "Apply"). */
+    applyButton?: string;
+    /** Cancel button (e.g. "Cancel"). */
+    cancelButton?: string;
+    /** Start date field label (e.g. "Start"). */
+    startLabel?: string;
+    /** End date field label (e.g. "End"). */
+    endLabel?: string;
+    /** Placeholder when no range selected (e.g. "Pick a date range"). Shown in trigger and inline inputs. */
+    placeholder?: string;
+    /** Accessibility label for the date range trigger input (e.g. "Date range"). */
+    ariaLabel?: string;
+    /** Labels for default presets when presets prop is not provided. Key is DefaultPresetId. */
+    presetLabels?: Partial<Record<DefaultPresetId, string>>;
+    /** Sidebar heading above preset buttons (e.g. "Quick ranges"). */
+    presetsHeading?: string;
+}
+/** A selectable preset range. Use for custom or translated presets. */
+interface DateRangePickerPreset {
+    id: string;
+    label: string;
+    getRange: () => DateRange;
+}
+interface DateRangePickerProps {
+    value: DateRange | undefined;
+    onChange: (value: DateRange | undefined) => void;
+    /** Minimum selectable date (inclusive). Dates before this will be disabled. */
+    minDate?: Date;
+    /** Maximum selectable date (inclusive). Dates after this will be disabled. */
+    maxDate?: Date;
+    /** Optional placeholder text when no range is selected. */
+    placeholder?: string;
+    /**
+     * Show preset range buttons. When true and presets is not provided, default presets are shown (use translations.presetLabels to translate).
+     * When presets is provided, that array is used. Default true.
+     */
+    showPresets?: boolean;
+    /** Optional preset ranges. When provided, these are shown instead of default presets; labels are your translated strings. */
+    presets?: DateRangePickerPreset[];
+    /** Translations for action buttons, labels, and default preset names. Pass translated strings for i18n. */
+    translations?: DateRangePickerTranslations;
+    /** Locale for calendar month names and date formatting (e.g. from date-fns/locale). */
+    locale?: date_fns.Locale;
+    /** Callback when the user applies the selection (clicks Apply). If not set, selection is applied on every calendar change. */
+    onApply?: (range: DateRange | undefined) => void;
+    /** Optional function to disable specific dates (in addition to min/max). */
+    isDateDisabled?: (date: Date) => boolean;
+    className?: string;
+}
+
+export type { DateRangePickerPreset as D, DateRangePickerProps as a, DateRangePickerTranslations as b, DefaultPresetId as c };

package/dist/types-CN73TWSY.d.ts

@@ -0,0 +1,51 @@
+interface RequestConfig {
+    endpoint: string;
+    method: string;
+    body?: unknown;
+    multipart?: boolean;
+    /** When set, forwarded to fetch init (e.g. `include` for HttpOnly auth cookies). */
+    credentials?: RequestCredentials;
+}
+/** API error body: stable code only (no translated message). */
+interface ApiErrorBody {
+    errorCode: string;
+    extra?: unknown;
+}
+interface RequestError {
+    error?: ApiErrorBody | unknown;
+    status: number;
+    retry?: boolean;
+}
+type FetchFn = (config: RequestConfig) => Promise<unknown>;
+interface RefreshBodyContext {
+    refreshToken: string | null;
+    useCookieCredentials: boolean;
+}
+/** Describes the HTTP refresh call. Built by react-core; apps override endpoint via `refreshEndpoint`. */
+interface RefreshRequestConfig {
+    endpoint: string;
+    method: string;
+    buildBody: (ctx: RefreshBodyContext) => unknown;
+    parseAccessToken: (data: unknown) => string | null;
+    /** Endpoint prefixes that must not trigger automatic refresh retry on 401. */
+    excludedRetryPrefixes: string[];
+    credentials?: RequestCredentials;
+}
+interface RefreshConfig {
+    request: RefreshRequestConfig;
+    cookieCredentialsEnabled: () => boolean;
+    setAccessToken: (token: string) => void;
+    onFailure: () => void;
+    onStart?: () => void;
+    onEnd?: () => void;
+}
+interface ApiClientConfig {
+    baseURL: string;
+    getAccessToken: () => string | null;
+    getRefreshToken: () => string | null;
+    getAcceptLanguage?: () => string;
+    refresh?: RefreshConfig;
+}
+type ApiClientProviderConfig = Omit<ApiClientConfig, 'baseURL'>;
+
+export type { ApiClientConfig as A, FetchFn as F, RefreshBodyContext as R, ApiClientProviderConfig as a, ApiErrorBody as b, RefreshConfig as c, RefreshRequestConfig as d, RequestConfig as e, RequestError as f };

package/dist/useAdminListPage-C4ZTTllP.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { KeyboardEvent } from 'react';
+import { UseInfiniteQueryResult, InfiniteData } from '@tanstack/react-query';
+import { P as PaginatedList } from './pagination-CFqoqiAG.js';
+
+type AdminListPageResponse<T> = PaginatedList<T>;
+type AdminListSearchMode = 'instant' | 'submit';
+type UseAdminListPageOptions = {
+    debounceMs?: number;
+    /** `instant` debounces input into the query; `submit` applies search only via submitSearch/clearSearch. */
+    searchMode?: AdminListSearchMode;
+};
+declare function useAdminListPage<T>(useInfiniteQuery: (search: string) => UseInfiniteQueryResult<InfiniteData<AdminListPageResponse<T>>>, options?: UseAdminListPageOptions): {
+    search: string;
+    setSearch: React.Dispatch<React.SetStateAction<string>>;
+    debouncedSearch: string;
+    submitSearch: () => void;
+    clearSearch: () => void;
+    onSearchKeyDown: ((event: KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    searchMode: AdminListSearchMode;
+    items: T[];
+    query: UseInfiniteQueryResult<InfiniteData<AdminListPageResponse<T>, unknown>>;
+    loadMoreRef: React.RefObject<HTMLTableRowElement | null>;
+};
+
+export { type AdminListPageResponse as A, type UseAdminListPageOptions as U, type AdminListSearchMode as a, useAdminListPage as u };

package/package.json

@@ -0,0 +1,152 @@
+{
+  "name": "@yca-software/yca-react-core",
+  "version": "0.0.1",
+  "description": "Shared React components and helpers for YCA apps.",
+  "license": "MIT",
+  "packageManager": "pnpm@11.12.0",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yca-software/yca-react-core.git"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./ui": {
+      "types": "./dist/components/ui/index.d.ts",
+      "import": "./dist/components/ui/index.js"
+    },
+    "./marketing": {
+      "types": "./dist/components/marketing/index.d.ts",
+      "import": "./dist/components/marketing/index.js"
+    },
+    "./spa": {
+      "types": "./dist/components/spa/index.d.ts",
+      "import": "./dist/components/spa/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./api": {
+      "types": "./dist/api/index.d.ts",
+      "import": "./dist/api/index.js"
+    },
+    "./auth": {
+      "types": "./dist/auth/index.d.ts",
+      "import": "./dist/auth/index.js"
+    },
+    "./errors": {
+      "types": "./dist/errors/index.d.ts",
+      "import": "./dist/errors/index.js"
+    },
+    "./constants": {
+      "types": "./dist/constants/index.d.ts",
+      "import": "./dist/constants/index.js"
+    },
+    "./admin": {
+      "types": "./dist/admin/index.d.ts",
+      "import": "./dist/admin/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
+    },
+    "./forms": {
+      "types": "./dist/components/forms/index.d.ts",
+      "import": "./dist/components/forms/index.js"
+    },
+    "./lib": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup && mkdir -p dist/theme && cp src/styles.css dist/styles.css && cp src/theme/*.css dist/theme/",
+    "prepublishOnly": "pnpm run build",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "dev": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "ci": "pnpm run lint && pnpm run test:run && pnpm run check-types",
+    "audit:ci": "pnpm audit --audit-level=high --prod",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.16",
+    "@radix-ui/react-avatar": "^1.1.12",
+    "@radix-ui/react-checkbox": "^1.3.4",
+    "@radix-ui/react-dialog": "^1.1.16",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-label": "^2.1.9",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.11",
+    "@radix-ui/react-separator": "^1.1.9",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-switch": "^1.3.0",
+    "@radix-ui/react-tabs": "^1.1.14",
+    "@radix-ui/react-tooltip": "^1.2.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
+    "js-cookie": "^3.0.8",
+    "jwt-decode": "^4.0.0",
+    "lucide-react": "^1.17.0",
+    "react-day-picker": "^10.0.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.16",
+    "@storybook/addon-a11y": "^10.4.2",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/react": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-query": "^5.90.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^25.9.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.77.0",
+    "react-i18next": "^15.7.4",
+    "react-router": "^7.9.5",
+    "storybook": "^10.4.2",
+    "tailwindcss": "^4.3.0",
+    "tsup": "^8.5.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-hook-form": "^7.71.2",
+    "react-i18next": "^15.0.0",
+    "react-router": "^7.0.0"
+  }
+}