open-index/open-npm huggingface dataset:
npm package: @quadrokit/shared
Description: Small **TypeScript** types and helpers for the **4D REST catalog** JSON (e.g. `dataClasses`, `methods`, `__NAME`).
Latest version: 0.3.23

# `@quadrokit/shared`

Small **TypeScript** types and helpers for the **4D REST catalog** JSON (e.g. `dataClasses`, `methods`, `__NAME`).

## Exports

- Catalog shape types (`CatalogJson`, `CatalogDataClass`, …)
- `sessionCookieName(catalog)` — builds `4DSID_${__NAME}` from catalog metadata (verify against your 4D deployment)

Used by `@quadrokit/client` codegen and can be reused in other tooling.
npm package: @quadrokit/ui
Description: Shared **React** UI for QuadroKit templates: Tailwind **preset**, global **CSS variables** (light/dark + theme presets), and a few **shadcn-style** primitives (Radix Slot, CVA, `cn()`).
Latest version: 0.3.23

# `@quadrokit/ui`

Shared **React** UI for QuadroKit templates: Tailwind **preset**, global **CSS variables** (light/dark + theme presets), and a few **shadcn-style** primitives (Radix Slot, CVA, `cn()`).

## Usage

1. Add the dependency and **Tailwind 3.4** in your app.
2. In `tailwind.config.ts`, use the preset:

   ```ts
   import preset from '@quadrokit/ui/tailwind-preset';
   export default { presets: [preset], content: [/* your files */, '../../node_modules/@quadrokit/ui/dist/**/*.{mjs,js,ts,tsx}'] };
   ```

3. Import styles once (e.g. in `main.tsx`):

   ```ts
   import '@quadrokit/ui/styles.css';
   ```

4. Wrap the tree with `ThemeProvider` and use `ThemeToolbar`, `Button`, `Card`, etc.

## Themes

- **Color mode**: `light` | `dark` | `system` (via `ThemeProvider` / `useTheme()`).
- **Presets**: `ocean`, `forest`, `sunset`, `mono` (`data-quadro-theme` on `<html>`).

Adding a preset: extend [`src/styles.css`](src/styles.css) with new `html[data-quadro-theme='…']` blocks and register the id in [`src/theme/themes.ts`](src/theme/themes.ts).

## Peer dependencies

`react` and `react-dom` ^18 or ^19. **`@quadrokit/client`** `^0.3.0` is required for hooks that use the generated REST client (e.g. `useQuadroPagedCollection`). Use a normal semver range in `package.json` — do **not** use `workspace:*` here (that is for the monorepo only and breaks installs from the npm registry).