@kollegioai/ui 0.1.0

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 (8) hide show
  1. package/README.md +62 -0
  2. package/dist/index.d.mts +94 -0
  3. package/dist/index.d.ts +94 -0
  4. package/dist/index.js +522 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +487 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +49 -0
package/README.md ADDED
@@ -0,0 +1,62 @@
1
+ # @kollegioai/ui
2
+
3
+ Kollegio's shared React component library, built on **Chakra UI v3**. Published to [npmjs.com](https://www.npmjs.com/package/@kollegioai/ui).
4
+
5
+ > Companion to [`@kollegioai/tokens`](../tokens) (colors + typography). This package is the component layer.
6
+
7
+ ---
8
+
9
+ ## Requirement: Chakra v3 + kollegio tokens
10
+
11
+ These components are authored in Chakra v3 and reference kollegio token **names** (e.g. `bg="backgroundPrimary"`, `color="contentPrimaryStrong"`). The consuming app's Chakra `createSystem` **must** include the `@kollegioai/tokens` colors, or these names won't resolve.
12
+
13
+ - `client/client-src` already does this via `src/theme.ts`.
14
+ - An app must be on **Chakra UI v3** to consume this package. Chakra v2 apps must migrate first.
15
+
16
+ ### Peer dependencies
17
+
18
+ ```
19
+ @chakra-ui/react ^3
20
+ @emotion/react ^11
21
+ react >=18
22
+ react-dom >=18
23
+ ```
24
+
25
+ ---
26
+
27
+ ## Components
28
+
29
+ | Export | Description |
30
+ |---|---|
31
+ | `Button` (alias `KollegioButton`) | Brand button. Variants: `primary`, `primaryStrong`, `accent`, `outline`, `secondary`, `tertiary`, `light`, `ghost`, `oauth`, `logOut`. Sizes via `buttonSize` (`sm`/`md`/`lg`). |
32
+ | `Tooltip` | Brand tooltip — renders markdown `label`, tap-to-open on touch devices. |
33
+ | `TooltipPrimitive` | Low-level Chakra v3 tooltip (use `Tooltip` for app usage). |
34
+ | `EllipsisMenu` + `EllipsisMenuOption` | Three-dot overflow menu. |
35
+
36
+ ```tsx
37
+ import { Button, Tooltip, EllipsisMenu, EllipsisMenuOption } from '@kollegioai/ui';
38
+
39
+ <Button variant="primary" buttonSize="lg" onClick={...}>Save</Button>
40
+
41
+ <Tooltip label="**Tip:** this supports _markdown_">
42
+ <InfoIcon />
43
+ </Tooltip>
44
+
45
+ <EllipsisMenu>
46
+ <EllipsisMenuOption text="Edit" onClick={...} />
47
+ <EllipsisMenuOption text="Delete" color="contentDangerStrong" onClick={...} />
48
+ </EllipsisMenu>
49
+ ```
50
+
51
+ ---
52
+
53
+ ## Build, version & publish
54
+
55
+ Same pipeline as `@kollegioai/tokens`:
56
+
57
+ - **Build**: `pnpm --filter @kollegioai/ui build` (tsup → dual ESM `.mjs` + CJS `.js` + `.d.ts`).
58
+ - **Version**: bump `version` in `package.json` (semver — patch for fixes, minor for new components, major for breaking prop changes).
59
+ - **Publish**: push to `main`; `.github/workflows/publish-ui.yml` publishes on changes under `packages/ui/**`. Manual: `npm publish --access public`.
60
+ - **Consume**: `npm install @kollegioai/ui@latest` in each app.
61
+
62
+ See the root tokens README for npm token setup.
package/dist/index.d.mts ADDED
@@ -0,0 +1,94 @@
1
+ import * as React from 'react';
2
+ import { ReactNode } from 'react';
3
+ import { ButtonProps, Tooltip as Tooltip$1 } from '@chakra-ui/react';
4
+ import * as react_jsx_runtime from 'react/jsx-runtime';
5
+
6
+ /**
7
+ * Variant set merged from both product apps:
8
+ * - client-src: primary, primaryStrong, accent, outline, secondary, ghost, oauth, logOut
9
+ * - counsellor: tertiary, light (its "secondary" mapped to `outline`)
10
+ *
11
+ * Components reference kollegio token NAMES (e.g. `backgroundPrimary`). The consuming
12
+ * app's Chakra `createSystem` must include the @kollegioai/tokens colors.
13
+ */
14
+ type KollegioButtonVariant = 'primary' | 'primaryStrong' | 'accent' | 'outline' | 'secondary' | 'tertiary' | 'light' | 'ghost' | 'oauth' | 'logOut';
15
+ type KollegioButtonSize = 'sm' | 'md' | 'lg';
16
+ type KollegioButtonProps = Omit<ButtonProps, 'variant'> & {
17
+ variant?: KollegioButtonVariant;
18
+ /** Kollegio sizing preset — not Chakra's `size` prop. */
19
+ buttonSize?: KollegioButtonSize;
20
+ fullWidth?: boolean;
21
+ isLoading?: boolean;
22
+ leftIcon?: ReactNode;
23
+ rightIcon?: ReactNode;
24
+ /** iOS Safari: fire on touchend so fixed/mobile CTAs respond reliably. */
25
+ enableTouchEndClickFix?: boolean;
26
+ };
27
+ declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant"> & {
28
+ variant?: KollegioButtonVariant;
29
+ /** Kollegio sizing preset — not Chakra's `size` prop. */
30
+ buttonSize?: KollegioButtonSize;
31
+ fullWidth?: boolean;
32
+ isLoading?: boolean;
33
+ leftIcon?: ReactNode;
34
+ rightIcon?: ReactNode;
35
+ /** iOS Safari: fire on touchend so fixed/mobile CTAs respond reliably. */
36
+ enableTouchEndClickFix?: boolean;
37
+ } & React.RefAttributes<HTMLButtonElement>>;
38
+
39
+ type TooltipPositioning = NonNullable<Tooltip$1.RootProps['positioning']>;
40
+ type TooltipPlacement = TooltipPositioning['placement'];
41
+ type TooltipOffset = TooltipPositioning['offset'];
42
+ interface TooltipProps extends Omit<Tooltip$1.RootProps, 'children' | 'open'> {
43
+ children: React.ReactNode;
44
+ showArrow?: boolean;
45
+ hasArrow?: boolean;
46
+ portalled?: boolean;
47
+ portalRef?: React.RefObject<HTMLElement | null>;
48
+ content?: React.ReactNode;
49
+ label?: React.ReactNode;
50
+ contentProps?: Tooltip$1.ContentProps;
51
+ disabled?: boolean;
52
+ isDisabled?: boolean;
53
+ open?: boolean;
54
+ isOpen?: boolean;
55
+ placement?: TooltipPlacement;
56
+ offset?: TooltipOffset;
57
+ closeOnClick?: boolean;
58
+ fontSize?: Tooltip$1.ContentProps['fontSize'];
59
+ width?: Tooltip$1.ContentProps['width'];
60
+ w?: Tooltip$1.ContentProps['w'];
61
+ bg?: Tooltip$1.ContentProps['bg'];
62
+ color?: Tooltip$1.ContentProps['color'];
63
+ px?: Tooltip$1.ContentProps['px'];
64
+ py?: Tooltip$1.ContentProps['py'];
65
+ borderRadius?: Tooltip$1.ContentProps['borderRadius'];
66
+ boxShadow?: Tooltip$1.ContentProps['boxShadow'];
67
+ zIndex?: Tooltip$1.ContentProps['zIndex'];
68
+ alignSelf?: Tooltip$1.ContentProps['alignSelf'];
69
+ openOnClick?: boolean;
70
+ clickOpenDurationMs?: number;
71
+ fullWidthTrigger?: boolean;
72
+ }
73
+ /** Low-level Chakra v3 tooltip primitive. Prefer `Tooltip` (the markdown wrapper) for app usage. */
74
+ declare const TooltipPrimitive: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
75
+ interface KollegioTooltipProps extends Omit<TooltipProps, 'content' | 'children'> {
76
+ label?: string;
77
+ children: React.ReactNode;
78
+ }
79
+ /** Brand tooltip: renders markdown `label`, tap-to-open on touch devices. */
80
+ declare const Tooltip: ({ label, children, ...props }: KollegioTooltipProps) => react_jsx_runtime.JSX.Element;
81
+
82
+ interface EllipsisMenuProps {
83
+ children: ReactNode;
84
+ }
85
+ interface EllipsisMenuOptionProps {
86
+ text: string;
87
+ onClick: () => void;
88
+ color?: string;
89
+ loading?: boolean;
90
+ }
91
+ declare const EllipsisMenu: ({ children }: EllipsisMenuProps) => react_jsx_runtime.JSX.Element;
92
+ declare const EllipsisMenuOption: ({ text, onClick, color, loading, }: EllipsisMenuOptionProps) => react_jsx_runtime.JSX.Element;
93
+
94
+ export { Button, EllipsisMenu, EllipsisMenuOption, Button as KollegioButton, type KollegioButtonProps, type KollegioButtonSize, type KollegioButtonVariant, Tooltip, TooltipPrimitive, type TooltipProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,94 @@
1
+ import * as React from 'react';
2
+ import { ReactNode } from 'react';
3
+ import { ButtonProps, Tooltip as Tooltip$1 } from '@chakra-ui/react';
4
+ import * as react_jsx_runtime from 'react/jsx-runtime';
5
+
6
+ /**
7
+ * Variant set merged from both product apps:
8
+ * - client-src: primary, primaryStrong, accent, outline, secondary, ghost, oauth, logOut
9
+ * - counsellor: tertiary, light (its "secondary" mapped to `outline`)
10
+ *
11
+ * Components reference kollegio token NAMES (e.g. `backgroundPrimary`). The consuming
12
+ * app's Chakra `createSystem` must include the @kollegioai/tokens colors.
13
+ */
14
+ type KollegioButtonVariant = 'primary' | 'primaryStrong' | 'accent' | 'outline' | 'secondary' | 'tertiary' | 'light' | 'ghost' | 'oauth' | 'logOut';
15
+ type KollegioButtonSize = 'sm' | 'md' | 'lg';
16
+ type KollegioButtonProps = Omit<ButtonProps, 'variant'> & {
17
+ variant?: KollegioButtonVariant;
18
+ /** Kollegio sizing preset — not Chakra's `size` prop. */
19
+ buttonSize?: KollegioButtonSize;
20
+ fullWidth?: boolean;
21
+ isLoading?: boolean;
22
+ leftIcon?: ReactNode;
23
+ rightIcon?: ReactNode;
24
+ /** iOS Safari: fire on touchend so fixed/mobile CTAs respond reliably. */
25
+ enableTouchEndClickFix?: boolean;
26
+ };
27
+ declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant"> & {
28
+ variant?: KollegioButtonVariant;
29
+ /** Kollegio sizing preset — not Chakra's `size` prop. */
30
+ buttonSize?: KollegioButtonSize;
31
+ fullWidth?: boolean;
32
+ isLoading?: boolean;
33
+ leftIcon?: ReactNode;
34
+ rightIcon?: ReactNode;
35
+ /** iOS Safari: fire on touchend so fixed/mobile CTAs respond reliably. */
36
+ enableTouchEndClickFix?: boolean;
37
+ } & React.RefAttributes<HTMLButtonElement>>;
38
+
39
+ type TooltipPositioning = NonNullable<Tooltip$1.RootProps['positioning']>;
40
+ type TooltipPlacement = TooltipPositioning['placement'];
41
+ type TooltipOffset = TooltipPositioning['offset'];
42
+ interface TooltipProps extends Omit<Tooltip$1.RootProps, 'children' | 'open'> {
43
+ children: React.ReactNode;
44
+ showArrow?: boolean;
45
+ hasArrow?: boolean;
46
+ portalled?: boolean;
47
+ portalRef?: React.RefObject<HTMLElement | null>;
48
+ content?: React.ReactNode;
49
+ label?: React.ReactNode;
50
+ contentProps?: Tooltip$1.ContentProps;
51
+ disabled?: boolean;
52
+ isDisabled?: boolean;
53
+ open?: boolean;
54
+ isOpen?: boolean;
55
+ placement?: TooltipPlacement;
56
+ offset?: TooltipOffset;
57
+ closeOnClick?: boolean;
58
+ fontSize?: Tooltip$1.ContentProps['fontSize'];
59
+ width?: Tooltip$1.ContentProps['width'];
60
+ w?: Tooltip$1.ContentProps['w'];
61
+ bg?: Tooltip$1.ContentProps['bg'];
62
+ color?: Tooltip$1.ContentProps['color'];
63
+ px?: Tooltip$1.ContentProps['px'];
64
+ py?: Tooltip$1.ContentProps['py'];
65
+ borderRadius?: Tooltip$1.ContentProps['borderRadius'];
66
+ boxShadow?: Tooltip$1.ContentProps['boxShadow'];
67
+ zIndex?: Tooltip$1.ContentProps['zIndex'];
68
+ alignSelf?: Tooltip$1.ContentProps['alignSelf'];
69
+ openOnClick?: boolean;
70
+ clickOpenDurationMs?: number;
71
+ fullWidthTrigger?: boolean;
72
+ }
73
+ /** Low-level Chakra v3 tooltip primitive. Prefer `Tooltip` (the markdown wrapper) for app usage. */
74
+ declare const TooltipPrimitive: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
75
+ interface KollegioTooltipProps extends Omit<TooltipProps, 'content' | 'children'> {
76
+ label?: string;
77
+ children: React.ReactNode;
78
+ }
79
+ /** Brand tooltip: renders markdown `label`, tap-to-open on touch devices. */
80
+ declare const Tooltip: ({ label, children, ...props }: KollegioTooltipProps) => react_jsx_runtime.JSX.Element;
81
+
82
+ interface EllipsisMenuProps {
83
+ children: ReactNode;
84
+ }
85
+ interface EllipsisMenuOptionProps {
86
+ text: string;
87
+ onClick: () => void;
88
+ color?: string;
89
+ loading?: boolean;
90
+ }
91
+ declare const EllipsisMenu: ({ children }: EllipsisMenuProps) => react_jsx_runtime.JSX.Element;
92
+ declare const EllipsisMenuOption: ({ text, onClick, color, loading, }: EllipsisMenuOptionProps) => react_jsx_runtime.JSX.Element;
93
+
94
+ export { Button, EllipsisMenu, EllipsisMenuOption, Button as KollegioButton, type KollegioButtonProps, type KollegioButtonSize, type KollegioButtonVariant, Tooltip, TooltipPrimitive, type TooltipProps };