@rfdtech/components 1.0.2 → 1.4.0

package/README.md

@@ -4,6 +4,10 @@ Shared React component library for Ghana School of Law (GSL) projects.
 
 Requires React 18+ and a bundler that processes CSS (Vite, Webpack, etc.).
 
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for release history.
+
 ## Styles
 
 Component styles load automatically when you import from `@rfdtech/components` (the JS bundle includes `import './index.css'`). For reliable styling in production, add this once in your app entry (`main.tsx` or `App.tsx`):
@@ -16,10 +20,21 @@ After upgrading the package, clear Vite's dependency cache if styles look stale:
 
 ## Shared theming
 
-All components share design tokens defined in [`src/styles/theme.css`](src/styles/theme.css). Tokens are applied on `:root` when a component is imported.
+Wrap your app in `ThemeProvider` for light, dark, and system themes. Design tokens live in [`src/styles/theme.css`](src/styles/theme.css) and apply to `.gsl-theme`, `document.documentElement`, and all components (including portaled modals and popovers).
+
+```tsx
+import { ThemeProvider } from "@rfdtech/components";
+import "@rfdtech/components/style.css";
 
-| Token | Default | Use |
-|-------|---------|-----|
+<ThemeProvider defaultTheme="system">
+  <App />
+</ThemeProvider>
+```
+
+Use `useTheme()` to read or change the active theme at runtime. See the [Theme](/docs/theme) docs page for token reference and controlled mode.
+
+| Token | Light default | Use |
+|-------|---------------|-----|
 | `--gsl-primary` | `#dc2626` | Buttons, focus rings, accents |
 | `--gsl-primary-light` | `#fef2f2` | Selected rows, hover fills |
 | `--gsl-bg` | `#ffffff` | Surfaces |
@@ -31,7 +46,7 @@ All components share design tokens defined in [`src/styles/theme.css`](src/style
 | `--gsl-success` | `#16a34a` | Success states |
 | `--gsl-warning` | `#eab308` | Warnings |
 
-Override on a component root or any ancestor:
+You can still override tokens on any ancestor without `ThemeProvider`:
 
 ```css
 .my-app {
@@ -45,9 +60,11 @@ Override on a component root or any ancestor:
 ## Install
 
 ```bash
-npm install @rfdtech/components react react-dom
+npm install @rfdtech/components
 ```
 
+Requires React 18+. npm 7+ auto-installs `react` and `react-dom` as peer dependencies. Radix UI and other runtime packages are included as dependencies of `@rfdtech/components`.
+
 ## AppSwitcher
 
 Google Apps–style 9-dot launcher for switching between GSL systems. Drop it into your header to let users jump between products.
@@ -389,7 +406,7 @@ To change the gutter size, override `--gsl-bulk-import-gutter` on `.gsl-bulk-imp
 
 ```bash
 npm install
-npm run demo        # Start demo at http://localhost:5173
+npm run demo        # Start demo at http://localhost:5173 — interactive examples at / and MDX docs at /docs
 npm run test        # Run unit and component tests
 npm run test:watch  # Run tests in watch mode
 npm run build       # Build library to dist/

package/dist/components/app-switcher/AppSwitcher.d.ts

@@ -1,5 +1,4 @@
 import type { AppSwitcherProps } from "../../types/app-switcher";
-import "../../styles/theme.css";
 import "./styles/app-switcher.css";
 export declare function AppSwitcher({ apps: appsProp, baseUrl, accessToken, open: controlledOpen, onOpenChange, onAppSelect, columns, triggerLabel, trigger, title, footer, className, style, placement, closeOnSelect, }: AppSwitcherProps): import("react").JSX.Element;
 //# sourceMappingURL=AppSwitcher.d.ts.map

package/dist/components/app-switcher/AppSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/app-switcher/AppSwitcher.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAW,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG1E,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAEnC,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,WAAW,EACX,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAW,EACX,OAAW,EACX,YAAkC,EAClC,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAwB,EACxB,aAAoB,GACrB,EAAE,gBAAgB,+BA6GlB"}
+{"version":3,"file":"AppSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/app-switcher/AppSwitcher.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAW,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG1E,OAAO,2BAA2B,CAAC;AAcnC,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,WAAW,EACX,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAW,EACX,OAAW,EACX,YAAkC,EAClC,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAwB,EACxB,aAAoB,GACrB,EAAE,gBAAgB,+BAwGlB"}

package/dist/components/app-switcher/AppSwitcherItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcherItem.d.ts","sourceRoot":"","sources":["../../../src/components/app-switcher/AppSwitcherItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAExD,UAAU,oBAAoB;IAC5B,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAYD,wBAAgB,eAAe,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BA8DtE"}
+{"version":3,"file":"AppSwitcherItem.d.ts","sourceRoot":"","sources":["../../../src/components/app-switcher/AppSwitcherItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAExD,UAAU,oBAAoB;IAC5B,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAYD,wBAAgB,eAAe,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BA0DtE"}

package/dist/components/app-switcher/hooks/useAppSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAppSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/app-switcher/hooks/useAppSwitcher.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,6BAA6B,CAAC;AAErC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,CA8DtB"}
+{"version":3,"file":"useAppSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/app-switcher/hooks/useAppSwitcher.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,6BAA6B,CAAC;AAErC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,CA+BtB"}

package/dist/components/bulk-import-modal/BulkImportModal.d.ts

@@ -1,5 +1,4 @@
 import type { BulkImportModalProps } from "../../types/bulk-import-modal";
-import "../../styles/theme.css";
 import "./styles/bulk-import-modal.css";
-export declare function BulkImportModal({ open, onOpenChange, fields, onComplete, title, maxFileSizeBytes, allowImportWithWarnings, className, }: BulkImportModalProps): import("react").ReactPortal | null;
+export declare function BulkImportModal({ open, onOpenChange, fields, onComplete, title, maxFileSizeBytes, allowImportWithWarnings, className, }: BulkImportModalProps): import("react").JSX.Element;
 //# sourceMappingURL=BulkImportModal.d.ts.map

package/dist/components/bulk-import-modal/BulkImportModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BulkImportModal.d.ts","sourceRoot":"","sources":["../../../src/components/bulk-import-modal/BulkImportModal.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAO1E,OAAO,wBAAwB,CAAC;AAChC,OAAO,gCAAgC,CAAC;AAyCxC,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,UAAU,EACV,KAAqB,EACrB,gBAAwC,EACxC,uBAA+B,EAC/B,SAAS,GACV,EAAE,oBAAoB,sCA8WtB"}
+{"version":3,"file":"BulkImportModal.d.ts","sourceRoot":"","sources":["../../../src/components/bulk-import-modal/BulkImportModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAO1E,OAAO,gCAAgC,CAAC;AAgCxC,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,UAAU,EACV,KAAqB,EACrB,gBAAwC,EACxC,uBAA+B,EAC/B,SAAS,GACV,EAAE,oBAAoB,+BA6RtB"}

package/dist/components/bulk-import-modal/{components → internal}/FieldMappingSelect.d.ts

@@ -1,15 +1,15 @@
+import "./field-mapping-select.css";
 export interface FieldMappingSelectOption {
     value: string;
     label: string;
 }
 export interface FieldMappingSelectProps {
     ariaLabel: string;
-    placeholder?: string;
     value: string | null;
-    options: FieldMappingSelectOption[];
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
     onChange: (value: string | null) => void;
+    options: FieldMappingSelectOption[];
+    placeholder?: string;
+    clearable?: boolean;
 }
-export declare function FieldMappingSelect({ ariaLabel, placeholder, value, options, open, onOpenChange, onChange, }: FieldMappingSelectProps): import("react").JSX.Element;
+export declare function FieldMappingSelect({ ariaLabel, value, onChange, options, placeholder, clearable, }: FieldMappingSelectProps): import("react").JSX.Element;
 //# sourceMappingURL=FieldMappingSelect.d.ts.map

package/dist/components/bulk-import-modal/internal/FieldMappingSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMappingSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/bulk-import-modal/internal/FieldMappingSelect.tsx"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAC;AAIpC,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,wBAAwB,EAAE,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAyB,EACzB,SAAiB,GAClB,EAAE,uBAAuB,+BA2DzB"}

package/dist/components/bulk-import-modal/steps/MatchColumnsStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MatchColumnsStep.d.ts","sourceRoot":"","sources":["../../../../src/components/bulk-import-modal/steps/MatchColumnsStep.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACZ,mBAAmB,EACpB,MAAM,kCAAkC,CAAC;AAG1C,UAAU,qBAAqB;IAC7B,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,WAAW,EAAE,MAAM,EAAE,EAAE,CAAC;IACxB,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,qBAAqB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9E,sBAAsB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAwCD,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,qBAAqB,EACrB,sBAAsB,GACvB,EAAE,qBAAqB,+BA4FvB"}
+{"version":3,"file":"MatchColumnsStep.d.ts","sourceRoot":"","sources":["../../../../src/components/bulk-import-modal/steps/MatchColumnsStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACZ,mBAAmB,EACpB,MAAM,kCAAkC,CAAC;AAG1C,UAAU,qBAAqB;IAC7B,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,WAAW,EAAE,MAAM,EAAE,EAAE,CAAC;IACxB,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,qBAAqB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9E,sBAAsB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAwCD,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,qBAAqB,EACrB,sBAAsB,GACvB,EAAE,qBAAqB,+BAwFvB"}

package/dist/components/bulk-import-modal/steps/SelectHeaderRowStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectHeaderRowStep.d.ts","sourceRoot":"","sources":["../../../../src/components/bulk-import-modal/steps/SelectHeaderRowStep.tsx"],"names":[],"mappings":"AAAA,UAAU,wBAAwB;IAChC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,cAAc,EACd,iBAAiB,GAClB,EAAE,wBAAwB,+BAkD1B"}
+{"version":3,"file":"SelectHeaderRowStep.d.ts","sourceRoot":"","sources":["../../../../src/components/bulk-import-modal/steps/SelectHeaderRowStep.tsx"],"names":[],"mappings":"AAEA,UAAU,wBAAwB;IAChC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,cAAc,EACd,iBAAiB,GAClB,EAAE,wBAAwB,+BAyD1B"}

package/dist/components/theme/ThemeContext.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeContextValue } from "../../types/theme";
+export declare const ThemeContext: import("react").Context<ThemeContextValue | null>;
+//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/components/theme/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../src/components/theme/ThemeContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,eAAO,MAAM,YAAY,mDAAgD,CAAC"}

package/dist/components/theme/ThemeProvider.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeProviderProps } from "../../types/theme";
+export declare function ThemeProvider({ theme: controlledTheme, defaultTheme, onThemeChange, className, style, children, }: ThemeProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/components/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/theme/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAY,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAItE,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,eAAe,EACtB,YAAuB,EACvB,aAAa,EACb,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE,kBAAkB,+BAwEpB"}

package/dist/components/theme/ThemeProvider.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ThemeProvider.test.d.ts.map

package/dist/components/theme/ThemeProvider.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.test.d.ts","sourceRoot":"","sources":["../../../src/components/theme/ThemeProvider.test.tsx"],"names":[],"mappings":""}

package/dist/components/theme/index.d.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from "./ThemeProvider";
+export { useTheme } from "./useTheme";
+export type { GslTheme, ResolvedGslTheme, ThemeProviderProps, UseThemeReturn, } from "../../types/theme";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,GACf,MAAM,mBAAmB,CAAC"}

package/dist/components/theme/resolveTheme.d.ts

@@ -0,0 +1,3 @@
+export declare function getSystemTheme(): "light" | "dark";
+export declare function resolveTheme(theme: "light" | "dark" | "system"): "light" | "dark";
+//# sourceMappingURL=resolveTheme.d.ts.map

package/dist/components/theme/resolveTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveTheme.d.ts","sourceRoot":"","sources":["../../../src/components/theme/resolveTheme.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,IAAI,OAAO,GAAG,MAAM,CAQjD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAMjF"}

package/dist/components/theme/useTheme.d.ts

@@ -0,0 +1,3 @@
+import type { UseThemeReturn } from "../../types/theme";
+export declare function useTheme(): UseThemeReturn;
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/components/theme/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/components/theme/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,wBAAgB,QAAQ,IAAI,cAAc,CAQzC"}