@slugbase/ui 0.0.0

package/src/icons/lucide-icon.tsx

@@ -0,0 +1,47 @@
+import type { LucideProps } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { FolderIcon } from "lucide-react";
+
+export function kebabToPascalCase(name: string): string {
+  return name
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+}
+
+function isLucideComponent(
+  value: unknown,
+): value is typeof FolderIcon {
+  if (typeof value === "function") return true;
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "render" in value &&
+    typeof (value as { render?: unknown }).render === "function"
+  );
+}
+
+export function resolveLucideIcon(name: string | null | undefined) {
+  if (!name) return FolderIcon;
+  const pascal = kebabToPascalCase(name);
+  const iconKey = `${pascal}Icon` as keyof typeof LucideIcons;
+  const candidate = LucideIcons[iconKey];
+  if (isLucideComponent(candidate)) {
+    return candidate;
+  }
+  const legacyKey = pascal as keyof typeof LucideIcons;
+  const legacy = LucideIcons[legacyKey];
+  if (isLucideComponent(legacy)) {
+    return legacy;
+  }
+  return FolderIcon;
+}
+
+export type LucideIconProps = LucideProps & {
+  name: string | null | undefined;
+};
+
+export function LucideIcon({ name, ...props }: LucideIconProps) {
+  const Icon = resolveLucideIcon(name);
+  return <Icon {...props} />;
+}

package/src/index.ts

@@ -0,0 +1,100 @@
+export { UI_PACKAGE } from "./constants.js";
+export { slugbaseTailwindPreset, resolveTokenColor, slugbaseCssVarColors } from "./tailwind/token-theme.js";
+export type { SlugbaseTokenColor } from "./tailwind/token-theme.js";
+export {
+  DEFAULT_THEME_PREFERENCE,
+  THEME_STORAGE_KEY,
+  type ResolvedTheme,
+  type ThemePreference,
+} from "./theme/theme-types.js";
+export { resolveTheme, readStoredThemePreference, persistThemePreference } from "./theme/resolve-theme.js";
+export { ThemeProvider, useTheme, type ThemeContextValue, type ThemeProviderProps } from "./theme/theme-context.js";
+export { AppShell, type AppShellProps } from "./components/AppShell.js";
+export {
+  AuthShell,
+  AuthInput,
+  AuthButton,
+  AuthHeading,
+  ErrorBanner,
+  SuccessBanner,
+  SsoSection,
+  MailFieldIcon,
+  LockFieldIcon,
+  UserFieldIcon,
+  KeyFieldIcon,
+  type AuthShellProps,
+  type AuthShellBrandLabels,
+  type OidcProviderItem,
+  type SsoSectionProps,
+} from "./components/auth-kit.js";
+export { Kbd, type KbdProps } from "./components/Kbd.js";
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./components/Button.js";
+export { Input, type InputProps, type InputSize } from "./components/Input.js";
+export { Label, type LabelProps } from "./components/Label.js";
+export { FieldError, type FieldErrorProps } from "./components/FieldError.js";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogTrigger,
+  type DialogContentProps,
+} from "./components/Dialog.js";
+export {
+  Skeleton,
+  SkeletonCardGrid,
+  SkeletonList,
+  type SkeletonCardGridProps,
+  type SkeletonListProps,
+  type SkeletonProps,
+} from "./components/Skeleton.js";
+export { EmptyState, type EmptyStateProps } from "./components/EmptyState.js";
+export {
+  ToastProvider,
+  useToast,
+  type ToastContextValue,
+  type ToastInput,
+  type ToastKind,
+  type ToastProviderProps,
+} from "./components/ToastProvider.js";
+export { ConfirmDialog, type ConfirmDialogProps } from "./components/ConfirmDialog.js";
+export { Badge, type BadgeProps, type BadgeVariant } from "./components/Badge.js";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  type TooltipContentProps,
+} from "./components/Tooltip.js";
+export {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+  type PopoverContentProps,
+} from "./components/Popover.js";
+export { Tag, type TagProps } from "./components/Tag.js";
+export { SlugBadge, type SlugBadgeProps } from "./components/SlugBadge.js";
+export { Checkbox, type CheckboxProps } from "./components/Checkbox.js";
+export { IconButton, type IconButtonProps, type IconButtonSize } from "./components/IconButton.js";
+export { ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps } from "./components/ThemeSwitcher.js";
+export { FolderGlyph, type FolderGlyphProps } from "./components/FolderGlyph.js";
+export {
+  IconPicker,
+  filterIconNames,
+  type IconPickerLabels,
+  type IconPickerProps,
+} from "./components/IconPicker.js";
+export {
+  ColorPicker,
+  PRESET_COLORS,
+  type ColorPickerLabels,
+  type ColorPickerProps,
+} from "./components/ColorPicker.js";
+export {
+  LucideIcon,
+  resolveLucideIcon,
+  kebabToPascalCase,
+  type LucideIconProps,
+} from "./icons/lucide-icon.js";
+export { FOLDER_ICON_NAMES, type FolderIconName } from "./icons/folder-icon-names.js";

package/src/styles/app.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "./colors-and-type.css";

package/src/styles/colors-and-type.css

@@ -0,0 +1,140 @@
+/* ============================================================
+   SlugBase Design System - Color & Type Foundations
+   Source: docs/design-prototype/V1/colors_and_type.css
+   Accent: periwinkle. Dark-first, developer-tool density.
+   ============================================================ */
+
+@import './ibm-plex-fonts.css';
+
+:root,
+[data-theme="dark"] {
+  --accent:            #7782f7;
+  --accent-hover:      #8d96f9;
+  --accent-active:     #6571ec;
+  --accent-fg:         #0b0c14;
+  --accent-subtle:     rgba(119, 130, 247, 0.13);
+  --accent-subtle-hover: rgba(119, 130, 247, 0.20);
+  --accent-border:     rgba(119, 130, 247, 0.40);
+  --accent-text:       #9aa2fa;
+
+  --canvas:    #0a0b10;
+  --base:      #101220;
+  --raised:    #171a2b;
+  --raised-2:  #1e2236;
+  --overlay:   #1b1f31;
+  --overlay-scrim: rgba(6, 7, 12, 0.62);
+
+  --border-subtle: rgba(255, 255, 255, 0.055);
+  --border:        rgba(255, 255, 255, 0.10);
+  --border-strong: rgba(255, 255, 255, 0.16);
+
+  --fg:        #eceef6;
+  --fg-muted:  #a7adc2;
+  --fg-subtle: #6e7489;
+  --fg-faint:  #4b5067;
+
+  --success:        #45c98a;
+  --success-fg:     #07140d;
+  --success-subtle: rgba(69, 201, 138, 0.14);
+  --success-text:   #5fd6a0;
+
+  --warning:        #e6b24e;
+  --warning-fg:     #1a1304;
+  --warning-subtle: rgba(230, 178, 78, 0.14);
+  --warning-text:   #efc878;
+
+  --danger:         #f0686b;
+  --danger-hover:   #f47e80;
+  --danger-fg:      #1a0708;
+  --danger-subtle:  rgba(240, 104, 107, 0.14);
+  --danger-text:    #f48a8c;
+
+  --ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
+  --ring-inset: inset 0 0 0 1px var(--accent-border);
+
+  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.40);
+  --shadow-raised:  0 2px 8px rgba(0, 0, 0, 0.35);
+  --shadow-overlay: 0 18px 50px -12px rgba(0, 0, 0, 0.70), 0 0 0 1px var(--border);
+  --shadow-popover: 0 10px 32px -8px rgba(0, 0, 0, 0.62), 0 0 0 1px var(--border);
+}
+
+[data-theme="light"] {
+  --accent:            #5b66e8;
+  --accent-hover:      #4a55e0;
+  --accent-active:     #3f49d4;
+  --accent-fg:         #ffffff;
+  --accent-subtle:     rgba(91, 102, 232, 0.10);
+  --accent-subtle-hover: rgba(91, 102, 232, 0.16);
+  --accent-border:     rgba(91, 102, 232, 0.32);
+  --accent-text:       #4d58df;
+
+  --canvas:    #f4f5f9;
+  --base:      #ffffff;
+  --raised:    #ffffff;
+  --raised-2:  #f1f2f7;
+  --overlay:   #ffffff;
+  --overlay-scrim: rgba(20, 22, 35, 0.30);
+
+  --border-subtle: rgba(16, 18, 32, 0.06);
+  --border:        rgba(16, 18, 32, 0.11);
+  --border-strong: rgba(16, 18, 32, 0.18);
+
+  --fg:        #14161f;
+  --fg-muted:  #4a4f63;
+  --fg-subtle: #71768a;
+  --fg-faint:  #a2a7ba;
+
+  --success-text: #1f9d68;
+  --warning-text: #b8861f;
+  --danger-text:  #d6494d;
+
+  --shadow-sm:      0 1px 2px rgba(16, 18, 32, 0.08);
+  --shadow-raised:  0 1px 3px rgba(16, 18, 32, 0.10), 0 1px 2px rgba(16,18,32,0.06);
+  --shadow-overlay: 0 24px 56px -16px rgba(16, 18, 32, 0.30), 0 0 0 1px var(--border);
+  --shadow-popover: 0 12px 32px -10px rgba(16, 18, 32, 0.22), 0 0 0 1px var(--border);
+}
+
+:root {
+  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+
+  --text-display: 28px;  --lh-display: 34px;
+  --text-h1:      22px;  --lh-h1:      28px;
+  --text-h2:      18px;  --lh-h2:      24px;
+  --text-h3:      15px;  --lh-h3:      20px;
+  --text-body-lg: 14px;  --lh-body-lg: 20px;
+  --text-body:    13px;  --lh-body:    18px;
+  --text-small:   12px;  --lh-small:   16px;
+  --text-micro:   11px;  --lh-micro:   14px;
+  --text-mono:    12.5px; --lh-mono:   18px;
+
+  --weight-regular: 400;
+  --weight-medium:  500;
+  --weight-semi:    600;
+  --weight-bold:    700;
+
+  --track-tight: -0.01em;
+  --track-wide:  0.06em;
+
+  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;
+  --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px;
+  --sp-9: 32px; --sp-10: 40px; --sp-11: 48px; --sp-12: 64px;
+
+  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 999px;
+
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --dur-micro: 110ms;
+  --dur: 170ms;
+  --dur-overlay: 230ms;
+}
+
+.t-display { font: var(--weight-semi) var(--text-display)/var(--lh-display) var(--font-sans); letter-spacing: var(--track-tight); color: var(--fg); }
+.t-h1 { font: var(--weight-semi) var(--text-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--track-tight); color: var(--fg); }
+.t-h2 { font: var(--weight-semi) var(--text-h2)/var(--lh-h2) var(--font-sans); color: var(--fg); }
+.t-h3 { font: var(--weight-semi) var(--text-h3)/var(--lh-h3) var(--font-sans); color: var(--fg); }
+.t-body-lg { font: var(--weight-regular) var(--text-body-lg)/var(--lh-body-lg) var(--font-sans); color: var(--fg); }
+.t-body { font: var(--weight-regular) var(--text-body)/var(--lh-body) var(--font-sans); color: var(--fg); }
+.t-small { font: var(--weight-regular) var(--text-small)/var(--lh-small) var(--font-sans); color: var(--fg-muted); }
+.t-label { font: var(--weight-medium) var(--text-micro)/var(--lh-micro) var(--font-sans); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg-subtle); }
+.t-mono { font: var(--weight-regular) var(--text-mono)/var(--lh-mono) var(--font-mono); color: var(--fg-muted); }

package/src/styles/ibm-plex-fonts.css

@@ -0,0 +1,8 @@
+/* Self-hosted IBM Plex (SIL OFL) — replaces Google Fonts CDN for CSP font-src 'self'. */
+@import '@fontsource/ibm-plex-sans/400.css';
+@import '@fontsource/ibm-plex-sans/500.css';
+@import '@fontsource/ibm-plex-sans/600.css';
+@import '@fontsource/ibm-plex-sans/700.css';
+@import '@fontsource/ibm-plex-mono/400.css';
+@import '@fontsource/ibm-plex-mono/500.css';
+@import '@fontsource/ibm-plex-mono/600.css';

package/src/tailwind/token-theme.spec.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { resolveTokenColor, slugbaseCssVarColors } from "./token-theme.js";
+
+describe("resolveTokenColor", () => {
+  it("maps accent to the design-token CSS variable", () => {
+    expect(resolveTokenColor("accent")).toBe("var(--accent)");
+  });
+
+  it("exposes canvas and fg tokens bridged from colors-and-type.css", () => {
+    expect(slugbaseCssVarColors.canvas).toBe("var(--canvas)");
+    expect(slugbaseCssVarColors.fg).toBe("var(--fg)");
+  });
+});

package/src/tailwind/token-theme.ts

@@ -0,0 +1,114 @@
+import type { Config } from "tailwindcss";
+
+/** CSS custom properties bridged from colors-and-type.css - no hard-coded hex in Tailwind theme. */
+export const slugbaseCssVarColors = {
+  accent: "var(--accent)",
+  "accent-hover": "var(--accent-hover)",
+  "accent-active": "var(--accent-active)",
+  "accent-fg": "var(--accent-fg)",
+  "accent-subtle": "var(--accent-subtle)",
+  "accent-subtle-hover": "var(--accent-subtle-hover)",
+  "accent-border": "var(--accent-border)",
+  "accent-text": "var(--accent-text)",
+  canvas: "var(--canvas)",
+  base: "var(--base)",
+  raised: "var(--raised)",
+  "raised-2": "var(--raised-2)",
+  overlay: "var(--overlay)",
+  fg: "var(--fg)",
+  "fg-muted": "var(--fg-muted)",
+  "fg-subtle": "var(--fg-subtle)",
+  "fg-faint": "var(--fg-faint)",
+  success: "var(--success)",
+  "success-fg": "var(--success-fg)",
+  "success-subtle": "var(--success-subtle)",
+  "success-text": "var(--success-text)",
+  warning: "var(--warning)",
+  "warning-fg": "var(--warning-fg)",
+  "warning-subtle": "var(--warning-subtle)",
+  "warning-text": "var(--warning-text)",
+  danger: "var(--danger)",
+  "danger-hover": "var(--danger-hover)",
+  "danger-fg": "var(--danger-fg)",
+  "danger-subtle": "var(--danger-subtle)",
+  "danger-text": "var(--danger-text)",
+} as const;
+
+export type SlugbaseTokenColor = keyof typeof slugbaseCssVarColors;
+
+/** Resolves a design-token color name to its CSS variable reference. */
+export function resolveTokenColor(token: SlugbaseTokenColor): string {
+  return slugbaseCssVarColors[token];
+}
+
+export const slugbaseTailwindPreset = {
+  theme: {
+    extend: {
+      colors: slugbaseCssVarColors,
+      fontFamily: {
+        sans: ["var(--font-sans)"],
+        mono: ["var(--font-mono)"],
+      },
+      fontSize: {
+        display: ["var(--text-display)", { lineHeight: "var(--lh-display)" }],
+        h1: ["var(--text-h1)", { lineHeight: "var(--lh-h1)" }],
+        h2: ["var(--text-h2)", { lineHeight: "var(--lh-h2)" }],
+        h3: ["var(--text-h3)", { lineHeight: "var(--lh-h3)" }],
+        "body-lg": ["var(--text-body-lg)", { lineHeight: "var(--lh-body-lg)" }],
+        body: ["var(--text-body)", { lineHeight: "var(--lh-body)" }],
+        small: ["var(--text-small)", { lineHeight: "var(--lh-small)" }],
+        micro: ["var(--text-micro)", { lineHeight: "var(--lh-micro)" }],
+        mono: ["var(--text-mono)", { lineHeight: "var(--lh-mono)" }],
+      },
+      borderRadius: {
+        sm: "var(--r-sm)",
+        md: "var(--r-md)",
+        lg: "var(--r-lg)",
+        xl: "var(--r-xl)",
+        full: "var(--r-full)",
+      },
+      spacing: {
+        "sp-1": "var(--sp-1)",
+        "sp-2": "var(--sp-2)",
+        "sp-3": "var(--sp-3)",
+        "sp-4": "var(--sp-4)",
+        "sp-5": "var(--sp-5)",
+        "sp-6": "var(--sp-6)",
+        "sp-7": "var(--sp-7)",
+        "sp-8": "var(--sp-8)",
+        "sp-9": "var(--sp-9)",
+        "sp-10": "var(--sp-10)",
+        "sp-11": "var(--sp-11)",
+        "sp-12": "var(--sp-12)",
+      },
+      boxShadow: {
+        raised: "var(--shadow-raised)",
+        overlay: "var(--shadow-overlay)",
+        popover: "var(--shadow-popover)",
+      },
+      transitionDuration: {
+        micro: "var(--dur-micro)",
+        DEFAULT: "var(--dur)",
+        overlay: "var(--dur-overlay)",
+      },
+      transitionTimingFunction: {
+        DEFAULT: "var(--ease)",
+        "in-out": "var(--ease-in-out)",
+      },
+      keyframes: {
+        shimmer: {
+          from: { backgroundPosition: "200% 0" },
+          to: { backgroundPosition: "-200% 0" },
+        },
+        "toast-in": {
+          from: { opacity: "0", transform: "translateX(16px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
+      },
+      animation: {
+        shimmer: "shimmer 1.3s ease-in-out infinite",
+        "toast-in": "toast-in var(--dur) var(--ease)",
+      },
+    },
+  },
+} satisfies Pick<Config, "theme">;

package/src/theme/resolve-theme.spec.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { resolveTheme } from "./resolve-theme.js";
+
+describe("resolveTheme", () => {
+  it("returns dark when preference is dark regardless of system", () => {
+    expect(resolveTheme("dark", false)).toBe("dark");
+  });
+
+  it("returns light when preference is light regardless of system", () => {
+    expect(resolveTheme("light", true)).toBe("light");
+  });
+
+  it("follows system preference when auto", () => {
+    expect(resolveTheme("auto", true)).toBe("dark");
+    expect(resolveTheme("auto", false)).toBe("light");
+  });
+});

package/src/theme/resolve-theme.ts

@@ -0,0 +1,30 @@
+import type { ResolvedTheme, ThemePreference } from "./theme-types.js";
+
+/** Maps user preference + system dark mode to an applied `data-theme` value. */
+export function resolveTheme(
+  preference: ThemePreference,
+  prefersDark: boolean,
+): ResolvedTheme {
+  if (preference === "auto") {
+    return prefersDark ? "dark" : "light";
+  }
+  return preference;
+}
+
+export function readStoredThemePreference(): ThemePreference | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const stored = window.localStorage.getItem("slugbase-theme-preference");
+  if (stored === "light" || stored === "dark" || stored === "auto") {
+    return stored;
+  }
+  return null;
+}
+
+export function persistThemePreference(preference: ThemePreference): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.localStorage.setItem("slugbase-theme-preference", preference);
+}

package/src/theme/theme-context.tsx

@@ -0,0 +1,99 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  DEFAULT_THEME_PREFERENCE,
+  type ResolvedTheme,
+  type ThemePreference,
+} from "./theme-types.js";
+import {
+  persistThemePreference,
+  readStoredThemePreference,
+  resolveTheme,
+} from "./resolve-theme.js";
+
+export type ThemeContextValue = {
+  preference: ThemePreference;
+  resolved: ResolvedTheme;
+  setPreference: (next: ThemePreference) => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+function getSystemPrefersDark(): boolean {
+  if (typeof window === "undefined") {
+    return true;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function applyDocumentTheme(resolved: ResolvedTheme): void {
+  if (typeof document === "undefined") {
+    return;
+  }
+  document.documentElement.dataset.theme = resolved;
+}
+
+export type ThemeProviderProps = {
+  children: ReactNode;
+  /** SSR hint before client hydration. */
+  initialPreference?: ThemePreference;
+};
+
+export function ThemeProvider({
+  children,
+  initialPreference = DEFAULT_THEME_PREFERENCE,
+}: ThemeProviderProps) {
+  const [preference, setPreferenceState] = useState<ThemePreference>(() => {
+    return readStoredThemePreference() ?? initialPreference;
+  });
+  const [prefersDark, setPrefersDark] = useState(getSystemPrefersDark);
+
+  const resolved = useMemo(
+    () => resolveTheme(preference, prefersDark),
+    [preference, prefersDark],
+  );
+
+  useEffect(() => {
+    applyDocumentTheme(resolved);
+  }, [resolved]);
+
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      setPrefersDark(media.matches);
+    };
+    media.addEventListener("change", onChange);
+    return () => {
+      media.removeEventListener("change", onChange);
+    };
+  }, []);
+
+  const setPreference = useCallback((next: ThemePreference) => {
+    setPreferenceState(next);
+    persistThemePreference(next);
+  }, []);
+
+  const value = useMemo(
+    () => ({ preference, resolved, setPreference }),
+    [preference, resolved, setPreference],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return ctx;
+}

package/src/theme/theme-types.ts

@@ -0,0 +1,7 @@
+export type ThemePreference = "light" | "dark" | "auto";
+
+export type ResolvedTheme = "light" | "dark";
+
+export const THEME_STORAGE_KEY = "slugbase-theme-preference" as const;
+
+export const DEFAULT_THEME_PREFERENCE: ThemePreference = "dark";

package/tailwind.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from "tailwindcss";
+import { slugbaseTailwindPreset } from "./src/tailwind/token-theme.js";
+
+/** Shared Tailwind preset - consume via `presets` in app packages. */
+const config: Config = {
+  content: ["./src/**/*.{ts,tsx}"],
+  presets: [slugbaseTailwindPreset],
+};
+
+export default config;
+export { slugbaseTailwindPreset, resolveTokenColor, slugbaseCssVarColors } from "./src/tailwind/token-theme.js";

package/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx"]
+}