chordia-ui 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +92 -92
  2. package/dist/Timeline.cjs.js.map +1 -1
  3. package/dist/Timeline.es.js.map +1 -1
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/pages/interactionDetails.cjs.js +2 -2
  7. package/dist/pages/interactionDetails.cjs.js.map +1 -1
  8. package/dist/pages/interactionDetails.es.js +906 -811
  9. package/dist/pages/interactionDetails.es.js.map +1 -1
  10. package/package.json +71 -71
  11. package/src/tokens/colors.css +150 -150
  12. package/src/tokens/fonts.css +145 -145
  13. package/src/tokens/index.css +4 -4
  14. package/src/tokens/spacing.css +54 -54
  15. package/src/tokens/typography.css +38 -38
  16. package/src/utils/cn.js +11 -11
  17. package/src/utils/index.js +1 -1
  18. package/tailwind.preset.js +204 -204
package/README.md CHANGED
@@ -1,92 +1,92 @@
1
- # chordia-ui
2
-
3
- Chordia Design System — UI components, design tokens, and Tailwind CSS preset for the Chordia conversation intelligence platform. Published to npm as **`chordia-ui`**.
4
-
5
- ## Philosophy
6
-
7
- - Evidence-based, explainable interfaces
8
- - "No Judgment" principle: colors categorize, never indicate good/bad
9
- - Clarity over cleverness
10
- - Calm interfaces that build trust through transparency
11
-
12
- ## Installation
13
-
14
- ```bash
15
- npm install chordia-ui
16
- ```
17
-
18
- ### Peer Dependencies
19
-
20
- Make sure your app has these installed (they are peer deps of `chordia-ui`):
21
-
22
- ```bash
23
- npm install react react-dom lucide-react recharts
24
- ```
25
-
26
- ## Usage
27
-
28
- ### 1. Import the Tailwind Preset (optional)
29
-
30
- In your `tailwind.config.js`:
31
-
32
- ```js
33
- module.exports = {
34
- presets: [require('chordia-ui/tailwind-preset')],
35
- content: [
36
- './src/**/*.{js,jsx,ts,tsx}',
37
- // If you want Tailwind to see chordia-ui classNames:
38
- './node_modules/chordia-ui/dist/**/*.{js,jsx}',
39
- ],
40
- // your overrides...
41
- };
42
- ```
43
-
44
- ### 2. Import Design Tokens
45
-
46
- In your global CSS (e.g. `globals.css`):
47
-
48
- ```css
49
- @import 'chordia-ui/tokens';
50
- ```
51
-
52
- Or import individual token files:
53
-
54
- ```css
55
- @import 'chordia-ui/tokens/colors.css';
56
- @import 'chordia-ui/tokens/typography.css';
57
- @import 'chordia-ui/tokens/spacing.css';
58
- ```
59
-
60
- ### 3. Use Components
61
-
62
- ```jsx
63
- import { Card, SmallButton, SignalCard, ScoreDriverCard, DeviationIndicator } from 'chordia-ui';
64
- ```
65
-
66
- ## Component Categories
67
-
68
- | Category | Components |
69
- |---|---|
70
- | **Primitives** | Card, DetailCard, SmallButton, Tag, Badge, SectionLabel, Checkbox, TextInput, TextArea, Select, FormLabel, InlineConfirm, Tabs, Tooltip, DeviationIndicator, ColorPalette |
71
- | **Data** | DataTable, DataTableFilters, SummaryStatsPanel |
72
- | **Interaction Details / Compass** | SignalCard, ObservationCard, SmallObservationCard, ScoreDriverCard, ScoreDriverCardVariant, ConditionCard, ModelScoreCard, SummarySection, ExpandPatternComparison |
73
- | **Media** | TranscriptCard, Timeline, ConversationTurn, InteractionSummaryCard |
74
- | **Chat** | ChatInterface, ChatMessage, ChatHistoryPanel, MessageThread |
75
- | **Navigation** | Sidebar, NavigationBar |
76
- | **Layout** | FirstCallScreen, OnboardingChecklist, DemoProjectBanner, IntegrationCard |
77
- | **Notifications** | NotificationPanel, NotificationItem |
78
-
79
- ## Utilities
80
-
81
- ```js
82
- import { cn } from 'chordia-ui/utils';
83
- // Tailwind class merging utility (clsx + tailwind-merge)
84
- ```
85
-
86
- ## Development
87
-
88
- This package now ships a built library in `dist/`. Consuming apps import from the npm package (`chordia-ui`) and do **not** need special transpile configuration in most bundlers. Tailwind-specific configuration is only needed if you want Tailwind to scan chordia-ui’s class names.
89
-
90
- ## Docs
91
-
92
- See `docs/UIComponentsPage.jsx` for a comprehensive component showcase with sample data.
1
+ # chordia-ui
2
+
3
+ Chordia Design System — UI components, design tokens, and Tailwind CSS preset for the Chordia conversation intelligence platform. Published to npm as **`chordia-ui`**.
4
+
5
+ ## Philosophy
6
+
7
+ - Evidence-based, explainable interfaces
8
+ - "No Judgment" principle: colors categorize, never indicate good/bad
9
+ - Clarity over cleverness
10
+ - Calm interfaces that build trust through transparency
11
+
12
+ ## Installation
13
+
14
+ ```bash
15
+ npm install chordia-ui
16
+ ```
17
+
18
+ ### Peer Dependencies
19
+
20
+ Make sure your app has these installed (they are peer deps of `chordia-ui`):
21
+
22
+ ```bash
23
+ npm install react react-dom lucide-react recharts
24
+ ```
25
+
26
+ ## Usage
27
+
28
+ ### 1. Import the Tailwind Preset (optional)
29
+
30
+ In your `tailwind.config.js`:
31
+
32
+ ```js
33
+ module.exports = {
34
+ presets: [require('chordia-ui/tailwind-preset')],
35
+ content: [
36
+ './src/**/*.{js,jsx,ts,tsx}',
37
+ // If you want Tailwind to see chordia-ui classNames:
38
+ './node_modules/chordia-ui/dist/**/*.{js,jsx}',
39
+ ],
40
+ // your overrides...
41
+ };
42
+ ```
43
+
44
+ ### 2. Import Design Tokens
45
+
46
+ In your global CSS (e.g. `globals.css`):
47
+
48
+ ```css
49
+ @import 'chordia-ui/tokens';
50
+ ```
51
+
52
+ Or import individual token files:
53
+
54
+ ```css
55
+ @import 'chordia-ui/tokens/colors.css';
56
+ @import 'chordia-ui/tokens/typography.css';
57
+ @import 'chordia-ui/tokens/spacing.css';
58
+ ```
59
+
60
+ ### 3. Use Components
61
+
62
+ ```jsx
63
+ import { Card, SmallButton, SignalCard, ScoreDriverCard, DeviationIndicator } from 'chordia-ui';
64
+ ```
65
+
66
+ ## Component Categories
67
+
68
+ | Category | Components |
69
+ |---|---|
70
+ | **Primitives** | Card, DetailCard, SmallButton, Tag, Badge, SectionLabel, Checkbox, TextInput, TextArea, Select, FormLabel, InlineConfirm, Tabs, Tooltip, DeviationIndicator, ColorPalette |
71
+ | **Data** | DataTable, DataTableFilters, SummaryStatsPanel |
72
+ | **Interaction Details / Compass** | SignalCard, ObservationCard, SmallObservationCard, ScoreDriverCard, ScoreDriverCardVariant, ConditionCard, ModelScoreCard, SummarySection, ExpandPatternComparison |
73
+ | **Media** | TranscriptCard, Timeline, ConversationTurn, InteractionSummaryCard |
74
+ | **Chat** | ChatInterface, ChatMessage, ChatHistoryPanel, MessageThread |
75
+ | **Navigation** | Sidebar, NavigationBar |
76
+ | **Layout** | FirstCallScreen, OnboardingChecklist, DemoProjectBanner, IntegrationCard |
77
+ | **Notifications** | NotificationPanel, NotificationItem |
78
+
79
+ ## Utilities
80
+
81
+ ```js
82
+ import { cn } from 'chordia-ui/utils';
83
+ // Tailwind class merging utility (clsx + tailwind-merge)
84
+ ```
85
+
86
+ ## Development
87
+
88
+ This package now ships a built library in `dist/`. Consuming apps import from the npm package (`chordia-ui`) and do **not** need special transpile configuration in most bundlers. Tailwind-specific configuration is only needed if you want Tailwind to scan chordia-ui’s class names.
89
+
90
+ ## Docs
91
+
92
+ See `docs/UIComponentsPage.jsx` for a comprehensive component showcase with sample data.