@financedistrict/apps-ui 0.1.0

package/package.json

@@ -0,0 +1,200 @@
+{
+  "name": "@financedistrict/apps-ui",
+  "version": "0.1.0",
+  "description": "Shared base-component library (Button, Input, Modal, DataTable, ...) — React + Tailwind v4, styled from @financedistrict/apps-tokens.",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/financedistrict-platform/fd-apps-design-system.git",
+    "directory": "packages/components"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/apps-ui.umd.js",
+  "jsdelivr": "./dist/apps-ui.umd.js",
+  "files": [
+    "dist",
+    "src/fonts.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./fonts.css": "./src/fonts.css",
+    "./accordion": {
+      "types": "./dist/accordion.d.ts",
+      "import": "./dist/accordion.js",
+      "require": "./dist/accordion.cjs"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js",
+      "require": "./dist/button.cjs"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox.d.ts",
+      "import": "./dist/checkbox.js",
+      "require": "./dist/checkbox.cjs"
+    },
+    "./dialog": {
+      "types": "./dist/dialog.d.ts",
+      "import": "./dist/dialog.js",
+      "require": "./dist/dialog.cjs"
+    },
+    "./feature-card": {
+      "types": "./dist/feature-card.d.ts",
+      "import": "./dist/feature-card.js",
+      "require": "./dist/feature-card.cjs"
+    },
+    "./filter": {
+      "types": "./dist/filter.d.ts",
+      "import": "./dist/filter.js",
+      "require": "./dist/filter.cjs"
+    },
+    "./inline-select": {
+      "types": "./dist/inline-select.d.ts",
+      "import": "./dist/inline-select.js",
+      "require": "./dist/inline-select.cjs"
+    },
+    "./input": {
+      "types": "./dist/input.d.ts",
+      "import": "./dist/input.js",
+      "require": "./dist/input.cjs"
+    },
+    "./panel": {
+      "types": "./dist/panel.d.ts",
+      "import": "./dist/panel.js",
+      "require": "./dist/panel.cjs"
+    },
+    "./property-grid": {
+      "types": "./dist/property-grid.d.ts",
+      "import": "./dist/property-grid.js",
+      "require": "./dist/property-grid.cjs"
+    },
+    "./radio": {
+      "types": "./dist/radio.d.ts",
+      "import": "./dist/radio.js",
+      "require": "./dist/radio.cjs"
+    },
+    "./search-bar": {
+      "types": "./dist/search-bar.d.ts",
+      "import": "./dist/search-bar.js",
+      "require": "./dist/search-bar.cjs"
+    },
+    "./sidebar-item": {
+      "types": "./dist/sidebar-item.d.ts",
+      "import": "./dist/sidebar-item.js",
+      "require": "./dist/sidebar-item.cjs"
+    },
+    "./select": {
+      "types": "./dist/select.d.ts",
+      "import": "./dist/select.js",
+      "require": "./dist/select.cjs"
+    },
+    "./selectable-feature-card": {
+      "types": "./dist/selectable-feature-card.d.ts",
+      "import": "./dist/selectable-feature-card.js",
+      "require": "./dist/selectable-feature-card.cjs"
+    },
+    "./switch": {
+      "types": "./dist/switch.d.ts",
+      "import": "./dist/switch.js",
+      "require": "./dist/switch.cjs"
+    },
+    "./table-cell": {
+      "types": "./dist/table-cell.d.ts",
+      "import": "./dist/table-cell.js",
+      "require": "./dist/table-cell.cjs"
+    },
+    "./table-title": {
+      "types": "./dist/table-title.d.ts",
+      "import": "./dist/table-title.js",
+      "require": "./dist/table-title.cjs"
+    },
+    "./tabs": {
+      "types": "./dist/tabs.d.ts",
+      "import": "./dist/tabs.js",
+      "require": "./dist/tabs.cjs"
+    },
+    "./toast": {
+      "types": "./dist/toast.d.ts",
+      "import": "./dist/toast.js",
+      "require": "./dist/toast.cjs"
+    },
+    "./token-input": {
+      "types": "./dist/token-input.d.ts",
+      "import": "./dist/token-input.js",
+      "require": "./dist/token-input.cjs"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip.d.ts",
+      "import": "./dist/tooltip.js",
+      "require": "./dist/tooltip.cjs"
+    },
+    "./cut-corner": {
+      "types": "./dist/cut-corner.d.ts",
+      "import": "./dist/cut-corner.js",
+      "require": "./dist/cut-corner.cjs"
+    },
+    "./scrollbar": {
+      "types": "./dist/scrollbar.d.ts",
+      "import": "./dist/scrollbar.js",
+      "require": "./dist/scrollbar.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup && vite build --config vite.umd.config.ts",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p ${PORT:-6006}",
+    "storybook:build": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@fontsource-variable/archivo": "^5.2.8",
+    "@fontsource/chakra-petch": "^5.2.7",
+    "@phosphor-icons/react": "^2.1.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@storybook/addon-designs": "^11.1.3",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-themes": "^10.4.6",
+    "@storybook/nextjs-vite": "^10.4.6",
+    "@tailwindcss/vite": "^4.3.2",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "axe-core": "^4.12.1",
+    "jsdom": "^29.1.1",
+    "next": "^16.2.10",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "storybook": "^10.4.6",
+    "storybook-addon-pseudo-states": "^10.4.6",
+    "tailwindcss": "^4.3.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.7.0",
+    "vite": "^8.1.3",
+    "vitest": "^4.1.9"
+  }
+}

package/src/fonts.css

@@ -0,0 +1,33 @@
+/**
+ * Portable font loading — see ADR-0008.
+ *
+ * This package does not own font *loading*, only the CSS variable *contract*
+ * `@financedistrict/apps-tokens` `theme.css` reads: `--font-archivo` and
+ * `--font-chakra-petch`. This file is one *optional* way to satisfy that contract,
+ * using @fontsource (self-hosted `@font-face` rules, no compiler-specific transform
+ * — works identically under Vite, Next, a UMD build, or plain static HTML with no
+ * build step at all). Any consumer is free to define the same two variables a
+ * different way instead (a Google Fonts <link> tag, next/font/google in a Next app's
+ * own root layout, etc.) — see the standalone-prototype-consumption guide for the
+ * <link>-tag version used by zero-build prototypes.
+ *
+ * Usage (an app that wants this default):
+ *
+ *   @import "@financedistrict/apps-ui/fonts.css";
+ *   @import "@financedistrict/apps-tokens/theme.css";
+ */
+
+/* Archivo — sans/display. Variable font: every weight in one file. */
+@import "@fontsource-variable/archivo";
+
+/* Chakra Petch — mono/caption. Not variable; load the weights actually used. */
+@import "@fontsource/chakra-petch/300.css";
+@import "@fontsource/chakra-petch/400.css";
+@import "@fontsource/chakra-petch/500.css";
+@import "@fontsource/chakra-petch/600.css";
+@import "@fontsource/chakra-petch/700.css";
+
+:root {
+  --font-archivo: "Archivo Variable", sans-serif;
+  --font-chakra-petch: "Chakra Petch", monospace;
+}