kang-components 0.4.0 → 0.6.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.
- package/dist/back-button.d.ts +51 -0
- package/dist/back-button.d.ts.map +1 -0
- package/dist/back-button.js +70 -0
- package/dist/back-button.js.map +1 -0
- package/dist/banner-button.d.ts +53 -0
- package/dist/banner-button.d.ts.map +1 -0
- package/dist/banner-button.js +69 -0
- package/dist/banner-button.js.map +1 -0
- package/dist/circle-icon-button.d.ts +52 -0
- package/dist/circle-icon-button.d.ts.map +1 -0
- package/dist/circle-icon-button.js +51 -0
- package/dist/circle-icon-button.js.map +1 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -0
- package/dist/index.js.map +1 -1
- package/dist/language.d.ts +23 -0
- package/dist/language.d.ts.map +1 -0
- package/dist/language.js +14 -0
- package/dist/language.js.map +1 -0
- package/dist/palettes.d.ts +87 -0
- package/dist/palettes.d.ts.map +1 -0
- package/dist/palettes.js +185 -0
- package/dist/palettes.js.map +1 -0
- package/dist/theme.d.ts +192 -0
- package/dist/theme.d.ts.map +1 -0
- package/dist/theme.js +118 -0
- package/dist/theme.js.map +1 -0
- package/package.json +12 -3
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BackButton — a domain-free "go back" control.
|
|
3
|
+
*
|
|
4
|
+
* Ported from ymy-components (`./buttons/BackButton`), where it was a bare
|
|
5
|
+
* `<IoChevronBackOutline onClick={...} />` with no semantics, no press feedback
|
|
6
|
+
* and no theming. The kang port keeps the same public surface (`size`, `onClick`)
|
|
7
|
+
* but upgrades it into a real, accessible control following kang conventions:
|
|
8
|
+
*
|
|
9
|
+
* - Renders a semantic `<button type="button">` (was a bare SVG with a click
|
|
10
|
+
* handler) so it is keyboard-focusable and announced as a button.
|
|
11
|
+
* - Press feedback via the shared `pressPrimary()` CSS primitive — the same
|
|
12
|
+
* scale/bounce language every kang action button uses.
|
|
13
|
+
* - A Material `Ripple` overlay on press, themed off `theme.colors.ripple`.
|
|
14
|
+
* - Icon color reads `theme.colors.onSurface` (falls back to `currentColor`),
|
|
15
|
+
* so it adapts to a styled-components `ThemeProvider` but still works without
|
|
16
|
+
* one.
|
|
17
|
+
* - `disabled` support: blocks the click and dims the control.
|
|
18
|
+
*
|
|
19
|
+
* Icon: ymy hard-depended on `react-icons` (IoChevronBackOutline). To keep kang
|
|
20
|
+
* dependency-light and domain-free, the same chevron-back glyph ships as an
|
|
21
|
+
* inline SVG (identical Ionicons path data), and consumers may override it with
|
|
22
|
+
* any node via `icon` — the same pattern as BannerButton.
|
|
23
|
+
*
|
|
24
|
+
* `styled-components` and `react` are the only things this module pulls in;
|
|
25
|
+
* consumers importing the press/string primitives never touch them.
|
|
26
|
+
*/
|
|
27
|
+
import { type ReactElement, type ReactNode } from 'react';
|
|
28
|
+
export type BackButtonProps = {
|
|
29
|
+
/** Icon size (any CSS size value). Defaults to `'1.5rem'` — matching ymy. */
|
|
30
|
+
size?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Optional click handler, invoked on click/activation. If omitted the button
|
|
33
|
+
* is inert (renders, but does nothing on press).
|
|
34
|
+
*/
|
|
35
|
+
onClick?: () => void;
|
|
36
|
+
/** Disable the control: blocks the handler and dims the icon. */
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
/** Accessible label for screen readers. Defaults to `'Back'`. */
|
|
39
|
+
ariaLabel?: string;
|
|
40
|
+
/** Optional class name passthrough for layout/positioning by the consumer. */
|
|
41
|
+
className?: string;
|
|
42
|
+
/**
|
|
43
|
+
* An explicit icon node, overriding the default inline chevron. Lets
|
|
44
|
+
* consumers supply their own glyph (e.g. a react-icons element) without kang
|
|
45
|
+
* depending on an icon library.
|
|
46
|
+
*/
|
|
47
|
+
icon?: ReactNode;
|
|
48
|
+
};
|
|
49
|
+
declare const BackButton: ({ size, onClick, disabled, ariaLabel, className, icon, }: BackButtonProps) => ReactElement;
|
|
50
|
+
export default BackButton;
|
|
51
|
+
//# sourceMappingURL=back-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"back-button.d.ts","sourceRoot":"","sources":["../src/back-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAgC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxF,MAAM,MAAM,eAAe,GAAG;IAC7B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAoDF,QAAA,MAAM,UAAU,6DAOb,eAAe,KAAG,YAyBpB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* BackButton — a domain-free "go back" control.
|
|
4
|
+
*
|
|
5
|
+
* Ported from ymy-components (`./buttons/BackButton`), where it was a bare
|
|
6
|
+
* `<IoChevronBackOutline onClick={...} />` with no semantics, no press feedback
|
|
7
|
+
* and no theming. The kang port keeps the same public surface (`size`, `onClick`)
|
|
8
|
+
* but upgrades it into a real, accessible control following kang conventions:
|
|
9
|
+
*
|
|
10
|
+
* - Renders a semantic `<button type="button">` (was a bare SVG with a click
|
|
11
|
+
* handler) so it is keyboard-focusable and announced as a button.
|
|
12
|
+
* - Press feedback via the shared `pressPrimary()` CSS primitive — the same
|
|
13
|
+
* scale/bounce language every kang action button uses.
|
|
14
|
+
* - A Material `Ripple` overlay on press, themed off `theme.colors.ripple`.
|
|
15
|
+
* - Icon color reads `theme.colors.onSurface` (falls back to `currentColor`),
|
|
16
|
+
* so it adapts to a styled-components `ThemeProvider` but still works without
|
|
17
|
+
* one.
|
|
18
|
+
* - `disabled` support: blocks the click and dims the control.
|
|
19
|
+
*
|
|
20
|
+
* Icon: ymy hard-depended on `react-icons` (IoChevronBackOutline). To keep kang
|
|
21
|
+
* dependency-light and domain-free, the same chevron-back glyph ships as an
|
|
22
|
+
* inline SVG (identical Ionicons path data), and consumers may override it with
|
|
23
|
+
* any node via `icon` — the same pattern as BannerButton.
|
|
24
|
+
*
|
|
25
|
+
* `styled-components` and `react` are the only things this module pulls in;
|
|
26
|
+
* consumers importing the press/string primitives never touch them.
|
|
27
|
+
*/
|
|
28
|
+
import { useCallback } from 'react';
|
|
29
|
+
import { styled } from 'styled-components';
|
|
30
|
+
import { pressPrimary } from './press.js';
|
|
31
|
+
import { Ripple, useRipple } from './ripple.js';
|
|
32
|
+
/**
|
|
33
|
+
* Inline IoChevronBackOutline (react-icons/io5) — identical Ionicons path data
|
|
34
|
+
* (viewBox + stroke-width 48 outline chevron) so the glyph is unchanged.
|
|
35
|
+
*/
|
|
36
|
+
const ChevronBackIcon = ({ size }) => (_jsx("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 512 512", height: size, width: size, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "48", d: "M328 112 184 256l144 144" }) }));
|
|
37
|
+
const StyledBackButton = styled.button `
|
|
38
|
+
position: relative;
|
|
39
|
+
overflow: hidden;
|
|
40
|
+
display: inline-flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
padding: 0;
|
|
44
|
+
margin: 0;
|
|
45
|
+
border: none;
|
|
46
|
+
background: transparent;
|
|
47
|
+
cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
|
|
48
|
+
color: ${({ theme }) => theme?.colors?.onSurface ?? 'currentColor'};
|
|
49
|
+
opacity: ${({ $disabled }) => ($disabled ? 0.4 : 1)};
|
|
50
|
+
line-height: 0;
|
|
51
|
+
-webkit-tap-highlight-color: transparent;
|
|
52
|
+
|
|
53
|
+
${pressPrimary()}
|
|
54
|
+
|
|
55
|
+
&:disabled {
|
|
56
|
+
pointer-events: none;
|
|
57
|
+
}
|
|
58
|
+
`;
|
|
59
|
+
const BackButton = ({ size, onClick, disabled = false, ariaLabel = 'Back', className, icon, }) => {
|
|
60
|
+
const { ripple, trigger, isTarget } = useRipple();
|
|
61
|
+
const handleClick = useCallback((e) => {
|
|
62
|
+
if (disabled)
|
|
63
|
+
return;
|
|
64
|
+
trigger(e, 'back');
|
|
65
|
+
onClick?.();
|
|
66
|
+
}, [disabled, onClick, trigger]);
|
|
67
|
+
return (_jsxs(StyledBackButton, { type: "button", className: className, "$disabled": disabled, disabled: disabled, "aria-label": ariaLabel, onClick: handleClick, children: [icon !== undefined ? icon : _jsx(ChevronBackIcon, { size: size != null ? size : '1.5rem' }), isTarget('back') && ripple && _jsx(Ripple, { "$x": ripple.x, "$y": ripple.y }, ripple.key)] }));
|
|
68
|
+
};
|
|
69
|
+
export default BackButton;
|
|
70
|
+
//# sourceMappingURL=back-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"back-button.js","sourceRoot":"","sources":["../src/back-button.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,WAAW,EAAsD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAwBhD;;;GAGG;AACH,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAgB,EAAE,CAAC,CACrE,cACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,aAAa,EACrB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,YAEjB,eACC,IAAI,EAAC,MAAM,EACX,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,EAChB,CAAC,EAAC,0BAA0B,GAC3B,GACG,CACN,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAwB;;;;;;;;;;WAUnD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;UAC3D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrB,KAA6C,EAAE,MAAM,EAAE,SAAS,IAAI,cAAc;YACzE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;;;;GAIjD,YAAY,EAAE;;;;;CAKhB,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,MAAM,EAClB,SAAS,EACT,IAAI,GACa,EAAgB,EAAE;IACnC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAU,CAAC;IAE1D,MAAM,WAAW,GAAG,WAAW,CAC9B,CAAC,CAAgC,EAAE,EAAE;QACpC,IAAI,QAAQ;YAAE,OAAO;QACrB,OAAO,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACnB,OAAO,EAAE,EAAE,CAAC;IACb,CAAC,EACD,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAC5B,CAAC;IAEF,OAAO,CACN,MAAC,gBAAgB,IAChB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,eACT,QAAQ,EACnB,QAAQ,EAAE,QAAQ,gBACN,SAAS,EACrB,OAAO,EAAE,WAAW,aAEnB,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,GAAI,EACrF,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,IAAI,KAAC,MAAM,UAAsB,MAAM,CAAC,CAAC,QAAM,MAAM,CAAC,CAAC,IAAtC,MAAM,CAAC,GAAG,CAAgC,IACpE,CACnB,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BannerButton — a pill-shaped call-to-action button with a leading icon and
|
|
3
|
+
* cross-fading multilingual label.
|
|
4
|
+
*
|
|
5
|
+
* Ported from ymy-components (`./buttons/BannerButton`). The visual language is
|
|
6
|
+
* preserved (rounded pill, drop shadow, primary/secondary variants, a press
|
|
7
|
+
* "scale-down" feedback) but reconciled onto kang's conventions:
|
|
8
|
+
*
|
|
9
|
+
* - **Theme-driven colors** read off styled-components' `props.theme` (the same
|
|
10
|
+
* tokens {@link buildTheme} produces), with literal fallbacks so the button
|
|
11
|
+
* still renders without a `ThemeProvider`.
|
|
12
|
+
* - **Press feedback** uses kang's CSS-first {@link pressPrimary} primitive
|
|
13
|
+
* instead of a bespoke keyframe, keeping the press language consistent across
|
|
14
|
+
* the library.
|
|
15
|
+
* - **Label** delegates to kang's domain-free {@link AnimatedText}: the
|
|
16
|
+
* multilingual `buttonText` is mapped to `variants` (english ↔ preferred
|
|
17
|
+
* Chinese set) with all three strings reserved as sizers so the box never
|
|
18
|
+
* reflows mid-swap.
|
|
19
|
+
*
|
|
20
|
+
* Icons: ymy hard-depended on `react-icons` (FaPlus / FiSend). To keep kang
|
|
21
|
+
* dependency-light and domain-free, the same two glyphs ship as inline SVGs
|
|
22
|
+
* selectable via `iconComponent`, and consumers may pass any node via `icon`.
|
|
23
|
+
*
|
|
24
|
+
* `styled-components` and `react` are optional peer dependencies, pulled in only
|
|
25
|
+
* by this (and other runtime) modules.
|
|
26
|
+
*/
|
|
27
|
+
import { type ReactNode } from 'react';
|
|
28
|
+
import type { CharacterPreference, DynamicLanguage } from './language.js';
|
|
29
|
+
export type BannerButtonProps = {
|
|
30
|
+
/**
|
|
31
|
+
* Which built-in icon to display. `'plus'` and `'send'` ship as inline SVGs.
|
|
32
|
+
* Ignored when an explicit `icon` node is provided.
|
|
33
|
+
*/
|
|
34
|
+
iconComponent?: 'plus' | 'send';
|
|
35
|
+
/**
|
|
36
|
+
* An explicit icon node, overriding `iconComponent`. Lets consumers supply
|
|
37
|
+
* their own glyph (e.g. a react-icons element) without kang depending on an
|
|
38
|
+
* icon library.
|
|
39
|
+
*/
|
|
40
|
+
icon?: ReactNode;
|
|
41
|
+
/** The button label, available in english / traditional / simplified. */
|
|
42
|
+
buttonText: DynamicLanguage;
|
|
43
|
+
/** Visual variant. Defaults to `'primary'`. */
|
|
44
|
+
buttonType?: 'primary' | 'secondary';
|
|
45
|
+
/** Click handler. */
|
|
46
|
+
onClick?: () => void;
|
|
47
|
+
/** Preferred Chinese character set for the label. Defaults to `'simplified'`. */
|
|
48
|
+
characterPreference?: CharacterPreference;
|
|
49
|
+
/** Whether the label cross-fades between english and Chinese. Defaults to true. */
|
|
50
|
+
animate?: boolean;
|
|
51
|
+
};
|
|
52
|
+
export default function BannerButton({ iconComponent, icon, buttonText, buttonType, onClick, characterPreference, animate, }: BannerButtonProps): import("react").JSX.Element;
|
|
53
|
+
//# sourceMappingURL=banner-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"banner-button.d.ts","sourceRoot":"","sources":["../src/banner-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE1E,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,UAAU,EAAE,eAAe,CAAC;IAC5B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACrC,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA+FF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACpC,aAAa,EACb,IAAI,EACJ,UAAU,EACV,UAAsB,EACtB,OAAO,EACP,mBAAkC,EAClC,OAAc,GACd,EAAE,iBAAiB,+BAwBnB"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// Named imports (not the default) so this resolves consistently across bundler
|
|
3
|
+
// and raw ESM/CJS environments — see the note in ripple.ts.
|
|
4
|
+
import { styled } from 'styled-components';
|
|
5
|
+
import AnimatedText from './animated-text.js';
|
|
6
|
+
import { pressPrimary } from './press.js';
|
|
7
|
+
const BannerButtonContainer = styled.div `
|
|
8
|
+
display: inline-block;
|
|
9
|
+
position: relative;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
border-radius: 2.5rem;
|
|
12
|
+
background: ${({ theme }) => theme?.colors?.primary ?? '#489fb5'};
|
|
13
|
+
box-shadow: 0px 4px 4px 0px
|
|
14
|
+
${({ theme }) => theme?.colors?.shadow ?? 'rgba(0, 0, 0, 0.25)'};
|
|
15
|
+
|
|
16
|
+
${pressPrimary()}
|
|
17
|
+
`;
|
|
18
|
+
const StyledButton = styled.button `
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
position: relative;
|
|
22
|
+
z-index: 10;
|
|
23
|
+
padding: 0.5rem 1rem;
|
|
24
|
+
border: none;
|
|
25
|
+
outline: none;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
transition: background-color 0.3s;
|
|
28
|
+
|
|
29
|
+
&.primary {
|
|
30
|
+
background-color: ${({ theme }) => theme?.colors?.primary ?? '#489fb5'};
|
|
31
|
+
color: ${({ theme }) => theme?.colors?.onPrimary ?? 'white'};
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&.secondary {
|
|
35
|
+
background-color: ${({ theme }) => theme?.colors?.secondaryLight ?? '#ffb652'};
|
|
36
|
+
color: ${({ theme }) => theme?.colors?.onSecondary ?? 'black'};
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
39
|
+
const IconContainer = styled.span `
|
|
40
|
+
display: flex;
|
|
41
|
+
margin-right: 1.25rem;
|
|
42
|
+
|
|
43
|
+
@media (min-width: 640px) {
|
|
44
|
+
margin-right: 0.25rem;
|
|
45
|
+
}
|
|
46
|
+
`;
|
|
47
|
+
/** Inline FaPlus (react-icons/fa) — kept identical so the glyph is unchanged. */
|
|
48
|
+
const PlusIcon = () => (_jsx("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 448 512", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" }) }));
|
|
49
|
+
/** Inline FiSend (react-icons/fi) — kept identical so the glyph is unchanged. */
|
|
50
|
+
const SendIcon = () => (_jsxs("svg", { stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }));
|
|
51
|
+
function resolveIcon(icon, iconComponent) {
|
|
52
|
+
if (icon !== undefined)
|
|
53
|
+
return icon;
|
|
54
|
+
if (iconComponent === 'plus')
|
|
55
|
+
return _jsx(PlusIcon, {});
|
|
56
|
+
if (iconComponent === 'send')
|
|
57
|
+
return _jsx(SendIcon, {});
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
export default function BannerButton({ iconComponent, icon, buttonText, buttonType = 'primary', onClick, characterPreference = 'simplified', animate = true, }) {
|
|
61
|
+
const iconElement = resolveIcon(icon, iconComponent);
|
|
62
|
+
// Map the multilingual label onto AnimatedText's domain-free variant model:
|
|
63
|
+
// cycle english <-> the preferred Chinese set, static index 0 = english
|
|
64
|
+
// (matching ymy's default). All three strings are reserved as sizers so the
|
|
65
|
+
// box is always sized to the widest and never reflows mid-swap.
|
|
66
|
+
const chineseText = characterPreference === 'traditional' ? buttonText.traditional : buttonText.simplified;
|
|
67
|
+
return (_jsx(BannerButtonContainer, { onClick: onClick, children: _jsxs(StyledButton, { type: "button", className: buttonType, children: [iconElement !== null && _jsx(IconContainer, { children: iconElement }), _jsx(AnimatedText, { textStyles: { lineHeight: '0.8rem', minWidth: '3rem' }, variants: [buttonText.english, chineseText], sizers: [buttonText.english, buttonText.simplified, buttonText.traditional], staticIndex: 0, animate: animate })] }) }));
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=banner-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"banner-button.js","sourceRoot":"","sources":["../src/banner-button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CircleIconButton — a round, themed icon button with a spring entry animation.
|
|
3
|
+
*
|
|
4
|
+
* Ported faithfully from ymy-components (`./buttons/CircleIconButton`). It renders
|
|
5
|
+
* one of a small set of built-in icons (`person`, `qr`) inside a circular outlined
|
|
6
|
+
* button that scales/fades in on mount via react-spring, and fires `onClick` when
|
|
7
|
+
* pressed. The two xunzi sites that consume it (HeroBanner, ProfileButton) drive it
|
|
8
|
+
* purely through the `iconComponent` string + `onClick`, so that API is preserved
|
|
9
|
+
* 1:1 to keep the re-point a pure import swap.
|
|
10
|
+
*
|
|
11
|
+
* Theming: the border reads `theme.colors.onPrimary` and the icon reads
|
|
12
|
+
* `theme.colors.onSurface` off styled-components' `props.theme`, with literal
|
|
13
|
+
* fallbacks so it renders sensibly with or without a `ThemeProvider`.
|
|
14
|
+
*
|
|
15
|
+
* Press feedback: layered on top of ymy's behavior using kang's `pressPrimary`
|
|
16
|
+
* (the icon-button tier). The entry animation owns `transform` via react-spring,
|
|
17
|
+
* so press uses the CSS `scale` property (`pressPrimaryScale`) to avoid fighting it.
|
|
18
|
+
*
|
|
19
|
+
* Icons: ymy hard-depended on `react-icons` (BsPerson / BsQrCodeScan). To keep
|
|
20
|
+
* kang dependency-light and domain-free, the same two glyphs ship as inline SVGs
|
|
21
|
+
* (matching Bootstrap-icons path data) selectable via `iconComponent`, and
|
|
22
|
+
* consumers may pass any node via `icon` — the same pattern as BannerButton.
|
|
23
|
+
*
|
|
24
|
+
* `styled-components` and `@react-spring/web` are optional peer dependencies, used
|
|
25
|
+
* only by this module — consumers importing just the string primitives never pull
|
|
26
|
+
* them in.
|
|
27
|
+
*/
|
|
28
|
+
import { type ReactElement, type ReactNode } from 'react';
|
|
29
|
+
/** The built-in icon set this button can render. */
|
|
30
|
+
export type CircleIconName = 'person' | 'qr';
|
|
31
|
+
export type CircleIconButtonProps = {
|
|
32
|
+
/**
|
|
33
|
+
* Which built-in icon to render. Ignored when an explicit `icon` node is
|
|
34
|
+
* provided.
|
|
35
|
+
* - `'person'` — person icon (profile).
|
|
36
|
+
* - `'qr'` — QR-code scan icon (invite/friend).
|
|
37
|
+
*/
|
|
38
|
+
iconComponent: CircleIconName;
|
|
39
|
+
/**
|
|
40
|
+
* An explicit icon node, overriding `iconComponent`. Lets consumers supply
|
|
41
|
+
* their own glyph (e.g. a react-icons element) without kang depending on an
|
|
42
|
+
* icon library — the same override pattern as BannerButton.
|
|
43
|
+
*/
|
|
44
|
+
icon?: ReactNode;
|
|
45
|
+
/**
|
|
46
|
+
* Optional click handler, invoked when the button is pressed. If omitted the
|
|
47
|
+
* button still renders and is interactive but performs no action.
|
|
48
|
+
*/
|
|
49
|
+
onClick?: () => void;
|
|
50
|
+
};
|
|
51
|
+
export default function CircleIconButton({ iconComponent, icon, onClick, }: CircleIconButtonProps): ReactElement;
|
|
52
|
+
//# sourceMappingURL=circle-icon-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"circle-icon-button.d.ts","sourceRoot":"","sources":["../src/circle-icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO1D,oDAAoD;AACpD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAE7C,MAAM,MAAM,qBAAqB,GAAG;IACnC;;;;;OAKG;IACH,aAAa,EAAE,cAAc,CAAC;IAE9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAyEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACxC,aAAa,EACb,IAAI,EACJ,OAAO,GACP,EAAE,qBAAqB,GAAG,YAAY,CAqBtC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { animated, useSpring } from '@react-spring/web';
|
|
3
|
+
// Named import (not the default) so styled-components resolves consistently
|
|
4
|
+
// across bundler and raw ESM/CJS environments — matches ripple.ts.
|
|
5
|
+
import { styled } from 'styled-components';
|
|
6
|
+
import { pressPrimaryScale } from './press.js';
|
|
7
|
+
const StyledCircleButton = styled(animated.button) `
|
|
8
|
+
width: 2.5rem;
|
|
9
|
+
height: 2.5rem;
|
|
10
|
+
padding: 0;
|
|
11
|
+
border-radius: 50%;
|
|
12
|
+
border: 1px solid
|
|
13
|
+
${({ theme }) => theme?.colors?.onPrimary ?? 'white'};
|
|
14
|
+
background: transparent;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
${pressPrimaryScale()}
|
|
20
|
+
`;
|
|
21
|
+
const StyledIcon = styled.span `
|
|
22
|
+
display: flex;
|
|
23
|
+
color: ${({ theme }) => theme?.colors?.onSurface ?? 'black'};
|
|
24
|
+
font-size: 1.125rem;
|
|
25
|
+
`;
|
|
26
|
+
/** Inline BsPerson (react-icons/bs) — Bootstrap-icons path data, glyph unchanged. */
|
|
27
|
+
const PersonIcon = () => (_jsx("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 16 16", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z" }) }));
|
|
28
|
+
/** Inline BsQrCodeScan (react-icons/bs) — Bootstrap-icons path data, glyph unchanged. */
|
|
29
|
+
const QrIcon = () => (_jsxs("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 16 16", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M0 .5A.5.5 0 0 1 .5 0h3a.5.5 0 0 1 0 1H1v2.5a.5.5 0 0 1-1 0zm12 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V1h-2.5a.5.5 0 0 1-.5-.5M.5 12a.5.5 0 0 1 .5.5V15h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H15v-2.5a.5.5 0 0 1 .5-.5M4 4h1v1H4z" }), _jsx("path", { d: "M7 2H2v5h5zM3 3h3v3H3zm2 8H4v1h1z" }), _jsx("path", { d: "M7 9H2v5h5zm-4 1h3v3H3zm8-6h1v1h-1z" }), _jsx("path", { d: "M9 2h5v5H9zm1 1v3h3V3zM8 8v2h1v1H8v1h2v-2h1v2h1v-1h2v-1h-3V8zm2 2H9V9h1zm4 2h-1v1h-2v1h3zm-4 2v-1H8v1z" }), _jsx("path", { d: "M12 9h2V8h-2z" })] }));
|
|
30
|
+
const ICONS = {
|
|
31
|
+
person: _jsx(PersonIcon, {}),
|
|
32
|
+
qr: _jsx(QrIcon, {}),
|
|
33
|
+
};
|
|
34
|
+
function resolveIcon(icon, iconComponent) {
|
|
35
|
+
if (icon !== undefined)
|
|
36
|
+
return icon;
|
|
37
|
+
return ICONS[iconComponent];
|
|
38
|
+
}
|
|
39
|
+
export default function CircleIconButton({ iconComponent, icon, onClick, }) {
|
|
40
|
+
const animatedStyles = useSpring({
|
|
41
|
+
from: { opacity: 0, scale: 0.5 },
|
|
42
|
+
to: { opacity: 1, scale: 1 },
|
|
43
|
+
});
|
|
44
|
+
const handleClick = () => {
|
|
45
|
+
if (onClick) {
|
|
46
|
+
onClick();
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
return (_jsx(StyledCircleButton, { type: "button", style: animatedStyles, onClick: handleClick, children: _jsx(StyledIcon, { children: resolveIcon(icon, iconComponent) }) }));
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=circle-icon-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"circle-icon-button.js","sourceRoot":"","sources":["../src/circle-icon-button.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxD,4EAA4E;AAC5E,mEAAmE;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA8B/C,MAAM,kBAAkB,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;;;;;;IAM9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAqB,EAAE,MAAM,EAAE,SAAS,IAAI,OAAO;;;;;;GAMpE,iBAAiB,EAAE;CACrB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;;UAEpB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAqB,EAAE,MAAM,EAAE,SAAS,IAAI,OAAO;;CAE5E,CAAC;AAEF,qFAAqF;AACrF,MAAM,UAAU,GAAG,GAAiB,EAAE,CAAC,CACtC,cACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,YAEjB,eAAM,CAAC,EAAC,uOAAuO,GAAG,GAC7O,CACN,CAAC;AAEF,yFAAyF;AACzF,MAAM,MAAM,GAAG,GAAiB,EAAE,CAAC,CAClC,eACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,eAAM,CAAC,EAAC,gUAAgU,GAAG,EAC3U,eAAM,CAAC,EAAC,mCAAmC,GAAG,EAC9C,eAAM,CAAC,EAAC,qCAAqC,GAAG,EAChD,eAAM,CAAC,EAAC,wGAAwG,GAAG,EACnH,eAAM,CAAC,EAAC,eAAe,GAAG,IACrB,CACN,CAAC;AAEF,MAAM,KAAK,GAAyC;IACnD,MAAM,EAAE,KAAC,UAAU,KAAG;IACtB,EAAE,EAAE,KAAC,MAAM,KAAG;CACd,CAAC;AAEF,SAAS,WAAW,CAAC,IAAe,EAAE,aAA6B;IAClE,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACpC,OAAO,KAAK,CAAC,aAAa,CAAC,CAAC;AAC7B,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACxC,aAAa,EACb,IAAI,EACJ,OAAO,GACgB;IACvB,MAAM,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;QAChC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;KAC5B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,EAAE,CAAC;QACX,CAAC;IACF,CAAC,CAAC;IAEF,OAAO,CACN,KAAC,kBAAkB,IAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,WAAW,YAEpB,KAAC,UAAU,cAAE,WAAW,CAAC,IAAI,EAAE,aAAa,CAAC,GAAc,GACvC,CACrB,CAAC;AACH,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -7,4 +7,15 @@ export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESP
|
|
|
7
7
|
export type { SpringConfigConstant } from './spring.js';
|
|
8
8
|
export { default as AnimatedText } from './animated-text.js';
|
|
9
9
|
export type { AnimatedTextProps } from './animated-text.js';
|
|
10
|
+
export { default as BackButton } from './back-button.js';
|
|
11
|
+
export type { BackButtonProps } from './back-button.js';
|
|
12
|
+
export { default as CircleIconButton } from './circle-icon-button.js';
|
|
13
|
+
export type { CircleIconButtonProps, CircleIconName } from './circle-icon-button.js';
|
|
14
|
+
export { default as BannerButton } from './banner-button.js';
|
|
15
|
+
export type { BannerButtonProps } from './banner-button.js';
|
|
16
|
+
export { buildTheme, theme, hexToRgb } from './theme.js';
|
|
17
|
+
export type { ThemeType } from './theme.js';
|
|
18
|
+
export { lightPalette, darkPalette } from './palettes.js';
|
|
19
|
+
export type { ModeColorPalette } from './palettes.js';
|
|
20
|
+
export type { DynamicLanguage, CharacterPreference, StaticLanguage, } from './language.js';
|
|
10
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,YAAY,EACX,eAAe,EACf,mBAAmB,EACnB,cAAc,GACd,MAAM,eAAe,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -4,4 +4,9 @@ export { actionSheetContainer, actionSheetList, actionSheetRow, } from './action
|
|
|
4
4
|
export { Ripple, rippleAnimation, useRipple } from './ripple.js';
|
|
5
5
|
export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESPONSIVE, SPRING_STAGGERED, SPRING_INSTANT, SPRING_GENTLE, SPRING_VERY_SLOW, SPRING_LANDING, SPRING_RISING, } from './spring.js';
|
|
6
6
|
export { default as AnimatedText } from './animated-text.js';
|
|
7
|
+
export { default as BackButton } from './back-button.js';
|
|
8
|
+
export { default as CircleIconButton } from './circle-icon-button.js';
|
|
9
|
+
export { default as BannerButton } from './banner-button.js';
|
|
10
|
+
export { buildTheme, theme, hexToRgb } from './theme.js';
|
|
11
|
+
export { lightPalette, darkPalette } from './palettes.js';
|
|
7
12
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared language types — ported from ymy-components.
|
|
3
|
+
*
|
|
4
|
+
* These describe a multilingual content model and the user's display
|
|
5
|
+
* preferences. They are pure types (no runtime), kept domain-light so consumers
|
|
6
|
+
* (e.g. an i18n layer) can map their own language model onto primitives like
|
|
7
|
+
* {@link AnimatedText}.
|
|
8
|
+
*
|
|
9
|
+
* In ymy these lived across `./types/DynamicLanguage` and
|
|
10
|
+
* `./animations/AnimatedText`; kang's `AnimatedText` is intentionally
|
|
11
|
+
* domain-free, so the language vocabulary is consolidated here.
|
|
12
|
+
*/
|
|
13
|
+
/** A single piece of content available in English, traditional, and simplified Chinese. */
|
|
14
|
+
export type DynamicLanguage = {
|
|
15
|
+
english: string;
|
|
16
|
+
traditional: string;
|
|
17
|
+
simplified: string;
|
|
18
|
+
};
|
|
19
|
+
/** Which Chinese character set the user prefers to read. */
|
|
20
|
+
export type CharacterPreference = 'simplified' | 'traditional';
|
|
21
|
+
/** Which static (non-cycling) language to display. */
|
|
22
|
+
export type StaticLanguage = 'english' | 'chinese';
|
|
23
|
+
//# sourceMappingURL=language.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"language.d.ts","sourceRoot":"","sources":["../src/language.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,2FAA2F;AAC3F,MAAM,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC"}
|
package/dist/language.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared language types — ported from ymy-components.
|
|
3
|
+
*
|
|
4
|
+
* These describe a multilingual content model and the user's display
|
|
5
|
+
* preferences. They are pure types (no runtime), kept domain-light so consumers
|
|
6
|
+
* (e.g. an i18n layer) can map their own language model onto primitives like
|
|
7
|
+
* {@link AnimatedText}.
|
|
8
|
+
*
|
|
9
|
+
* In ymy these lived across `./types/DynamicLanguage` and
|
|
10
|
+
* `./animations/AnimatedText`; kang's `AnimatedText` is intentionally
|
|
11
|
+
* domain-free, so the language vocabulary is consolidated here.
|
|
12
|
+
*/
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=language.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"language.js","sourceRoot":"","sources":["../src/language.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Per-mode color palettes for the theme system.
|
|
3
|
+
*
|
|
4
|
+
* Bold minimal color system:
|
|
5
|
+
* - Light mode: refined teal primary, sky-blue background, warm white surfaces.
|
|
6
|
+
* - Dark mode: soft green primary, near-black with green tint.
|
|
7
|
+
*
|
|
8
|
+
* Every design token is a ready-to-use value; the theme builder is a mechanical
|
|
9
|
+
* mapping from a palette to the theme object. Ported from ymy-components.
|
|
10
|
+
*/
|
|
11
|
+
/** Per-mode color palette: every design token as a ready-to-use value */
|
|
12
|
+
export interface ModeColorPalette {
|
|
13
|
+
primary: string;
|
|
14
|
+
onPrimary: string;
|
|
15
|
+
primaryContainer: string;
|
|
16
|
+
onPrimaryContainer: string;
|
|
17
|
+
primaryDark: string;
|
|
18
|
+
primaryDarker: string;
|
|
19
|
+
secondary: string;
|
|
20
|
+
onSecondary: string;
|
|
21
|
+
secondaryContainer: string;
|
|
22
|
+
onSecondaryContainer: string;
|
|
23
|
+
secondaryLight: string;
|
|
24
|
+
success: string;
|
|
25
|
+
onSuccess: string;
|
|
26
|
+
successContainer: string;
|
|
27
|
+
onSuccessContainer: string;
|
|
28
|
+
successSurface: string;
|
|
29
|
+
successDark: string;
|
|
30
|
+
successMuted: string;
|
|
31
|
+
error: string;
|
|
32
|
+
onError: string;
|
|
33
|
+
errorMuted: string;
|
|
34
|
+
surface: string;
|
|
35
|
+
onSurface: string;
|
|
36
|
+
surfaceVariant: string;
|
|
37
|
+
onSurfaceVariant: string;
|
|
38
|
+
surfaceContainer: string;
|
|
39
|
+
surfaceContainerHigh: string;
|
|
40
|
+
background: string;
|
|
41
|
+
onBackground: string;
|
|
42
|
+
outline: string;
|
|
43
|
+
outlineVariant: string;
|
|
44
|
+
shadow: string;
|
|
45
|
+
shadowLight: string;
|
|
46
|
+
shadowLighter: string;
|
|
47
|
+
shadowSubtle: string;
|
|
48
|
+
shadowFaint: string;
|
|
49
|
+
scrim: string;
|
|
50
|
+
scrimLight: string;
|
|
51
|
+
ripple: string;
|
|
52
|
+
whiteHigh: string;
|
|
53
|
+
whiteMedium: string;
|
|
54
|
+
whiteLow: string;
|
|
55
|
+
whiteHover: string;
|
|
56
|
+
keyboardSurface: string;
|
|
57
|
+
keyCharacter: string;
|
|
58
|
+
keyCharacterText: string;
|
|
59
|
+
keyDefault: string;
|
|
60
|
+
keyDefaultText: string;
|
|
61
|
+
keyWrong: string;
|
|
62
|
+
keyWrongMuted: string;
|
|
63
|
+
keyCorrect: string;
|
|
64
|
+
keyCorrectMuted: string;
|
|
65
|
+
keyAccentText: string;
|
|
66
|
+
keyDisabled: string;
|
|
67
|
+
keyDisabledText: string;
|
|
68
|
+
toggleTrackOn: string;
|
|
69
|
+
toggleTrackOff: string;
|
|
70
|
+
toggleThumbOn: string;
|
|
71
|
+
toggleThumbOff: string;
|
|
72
|
+
toggleHoverOn: string;
|
|
73
|
+
toggleHoverOff: string;
|
|
74
|
+
toggleFocusOn: string;
|
|
75
|
+
toggleFocusOff: string;
|
|
76
|
+
textShadowDark: string;
|
|
77
|
+
textShadow1: string;
|
|
78
|
+
textShadow2: string;
|
|
79
|
+
textShadow3: string;
|
|
80
|
+
primaryRgb: string;
|
|
81
|
+
backgroundRgb: string;
|
|
82
|
+
surfaceRgb: string;
|
|
83
|
+
primaryDarkerRgb: string;
|
|
84
|
+
}
|
|
85
|
+
export declare const lightPalette: ModeColorPalette;
|
|
86
|
+
export declare const darkPalette: ModeColorPalette;
|
|
87
|
+
//# sourceMappingURL=palettes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palettes.d.ts","sourceRoot":"","sources":["../src/palettes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,yEAAyE;AACzE,MAAM,WAAW,gBAAgB;IAEhC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IAGtB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IAGvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IAGrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAGnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAG7B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IAGrB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IAGvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IAGpB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IAGf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IAGnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IAGxB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IAGvB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IAGpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,gBAmG1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,gBAmGzB,CAAC"}
|
package/dist/palettes.js
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Per-mode color palettes for the theme system.
|
|
3
|
+
*
|
|
4
|
+
* Bold minimal color system:
|
|
5
|
+
* - Light mode: refined teal primary, sky-blue background, warm white surfaces.
|
|
6
|
+
* - Dark mode: soft green primary, near-black with green tint.
|
|
7
|
+
*
|
|
8
|
+
* Every design token is a ready-to-use value; the theme builder is a mechanical
|
|
9
|
+
* mapping from a palette to the theme object. Ported from ymy-components.
|
|
10
|
+
*/
|
|
11
|
+
export const lightPalette = {
|
|
12
|
+
// Primary — refined teal, calm and grounded
|
|
13
|
+
primary: '#2E7D8C',
|
|
14
|
+
onPrimary: '#ffffff',
|
|
15
|
+
primaryContainer: '#B2EBF2',
|
|
16
|
+
onPrimaryContainer: '#1A5C68',
|
|
17
|
+
primaryDark: '#256A77',
|
|
18
|
+
primaryDarker: '#1C5561',
|
|
19
|
+
// Secondary — bold goldenrod yellow
|
|
20
|
+
secondary: '#E8C840',
|
|
21
|
+
onSecondary: '#1A1A1A',
|
|
22
|
+
secondaryContainer: '#FFF8E0',
|
|
23
|
+
onSecondaryContainer: '#1A1A1A',
|
|
24
|
+
secondaryLight: '#E8C840',
|
|
25
|
+
// Success
|
|
26
|
+
success: '#4ade80',
|
|
27
|
+
onSuccess: '#0D3B70',
|
|
28
|
+
successContainer: '#bbf7d0',
|
|
29
|
+
onSuccessContainer: '#166534',
|
|
30
|
+
successSurface: '#f0fdf4',
|
|
31
|
+
successDark: '#22c55e',
|
|
32
|
+
successMuted: '#3d6b56',
|
|
33
|
+
// Error
|
|
34
|
+
error: '#BF4B3E',
|
|
35
|
+
onError: '#ffffff',
|
|
36
|
+
errorMuted: '#6b4a46',
|
|
37
|
+
// Surface — warm white
|
|
38
|
+
surface: '#ffffff',
|
|
39
|
+
onSurface: '#1A1A1A',
|
|
40
|
+
surfaceVariant: '#FFF9F2',
|
|
41
|
+
onSurfaceVariant: '#5A5550',
|
|
42
|
+
surfaceContainer: '#F8F6F4',
|
|
43
|
+
surfaceContainerHigh: '#F0EEEC',
|
|
44
|
+
// Background — bright sky blue splash
|
|
45
|
+
background: '#64B5F6',
|
|
46
|
+
onBackground: '#0A0A0A',
|
|
47
|
+
// Outline & Dividers
|
|
48
|
+
outline: '#9E9E9E',
|
|
49
|
+
outlineVariant: '#D0D0D0',
|
|
50
|
+
// Shadows
|
|
51
|
+
shadow: 'rgba(0, 0, 0, 0.28)',
|
|
52
|
+
shadowLight: 'rgba(0, 0, 0, 0.15)',
|
|
53
|
+
shadowLighter: 'rgba(0, 0, 0, 0.10)',
|
|
54
|
+
shadowSubtle: 'rgba(0, 0, 0, 0.08)',
|
|
55
|
+
shadowFaint: 'rgba(0, 0, 0, 0.05)',
|
|
56
|
+
// Overlay
|
|
57
|
+
scrim: 'rgba(0, 0, 0, 0.4)',
|
|
58
|
+
scrimLight: 'rgba(0, 0, 0, 0.3)',
|
|
59
|
+
ripple: 'rgba(0, 0, 0, 0.1)',
|
|
60
|
+
// Interactive states (white variants for dark backgrounds)
|
|
61
|
+
whiteHigh: 'rgba(255, 255, 255, 0.9)',
|
|
62
|
+
whiteMedium: 'rgba(255, 255, 255, 0.5)',
|
|
63
|
+
whiteLow: 'rgba(255, 255, 255, 0.4)',
|
|
64
|
+
whiteHover: 'rgba(255, 255, 255, 0.08)',
|
|
65
|
+
// Keyboard chrome — neutral gray (doesn't compete with blue)
|
|
66
|
+
keyboardSurface: '#D5D3D0',
|
|
67
|
+
keyCharacter: '#ffffff',
|
|
68
|
+
keyCharacterText: '#1A1A1A',
|
|
69
|
+
keyDefault: '#B5B2AE',
|
|
70
|
+
keyDefaultText: '#1A1A1A',
|
|
71
|
+
keyWrong: '#B5B2AE',
|
|
72
|
+
keyWrongMuted: '#B5B2AE',
|
|
73
|
+
keyCorrect: '#2E7D8C',
|
|
74
|
+
keyCorrectMuted: '#256A77',
|
|
75
|
+
keyAccentText: '#ffffff',
|
|
76
|
+
keyDisabled: '#6E6E6E',
|
|
77
|
+
keyDisabledText: '#9E9E9E',
|
|
78
|
+
// Toggle/Switch — teal
|
|
79
|
+
toggleTrackOn: 'rgba(46, 125, 140, 0.5)',
|
|
80
|
+
toggleTrackOff: 'rgba(0, 0, 0, 0.38)',
|
|
81
|
+
toggleThumbOn: '#2E7D8C',
|
|
82
|
+
toggleThumbOff: '#FAFAFA',
|
|
83
|
+
toggleHoverOn: 'rgba(46, 125, 140, 0.08)',
|
|
84
|
+
toggleHoverOff: 'rgba(0, 0, 0, 0.04)',
|
|
85
|
+
toggleFocusOn: 'rgba(46, 125, 140, 0.12)',
|
|
86
|
+
toggleFocusOff: 'rgba(0, 0, 0, 0.06)',
|
|
87
|
+
// 3D text shadows
|
|
88
|
+
textShadowDark: '#505050',
|
|
89
|
+
textShadow1: '#E0E0E0',
|
|
90
|
+
textShadow2: '#D0D0D0',
|
|
91
|
+
textShadow3: '#B8B8B8',
|
|
92
|
+
// RGB decompositions
|
|
93
|
+
primaryRgb: '46, 125, 140',
|
|
94
|
+
backgroundRgb: '100, 181, 246',
|
|
95
|
+
surfaceRgb: '255, 255, 255',
|
|
96
|
+
primaryDarkerRgb: '28, 85, 97',
|
|
97
|
+
};
|
|
98
|
+
export const darkPalette = {
|
|
99
|
+
// Primary — soft green for contrast on near-black
|
|
100
|
+
primary: '#81c784',
|
|
101
|
+
onPrimary: '#1a4f2e',
|
|
102
|
+
primaryContainer: '#1b5e20',
|
|
103
|
+
onPrimaryContainer: '#c8e6c9',
|
|
104
|
+
primaryDark: '#4caf50',
|
|
105
|
+
primaryDarker: '#2e7d32',
|
|
106
|
+
// Secondary — lighter orange/gold accents
|
|
107
|
+
secondary: '#E8C840',
|
|
108
|
+
onSecondary: '#161616',
|
|
109
|
+
secondaryContainer: '#2A3A2A',
|
|
110
|
+
onSecondaryContainer: '#FFF5E0',
|
|
111
|
+
secondaryLight: '#D4A520',
|
|
112
|
+
// Success
|
|
113
|
+
success: '#4ade80',
|
|
114
|
+
onSuccess: '#166534',
|
|
115
|
+
successContainer: '#243d2f',
|
|
116
|
+
onSuccessContainer: '#bbf7d0',
|
|
117
|
+
successSurface: '#1a3022',
|
|
118
|
+
successDark: '#4ade80',
|
|
119
|
+
successMuted: '#22c55e',
|
|
120
|
+
// Error — #f28078 gives >=4.5:1 on surface (#282C28)
|
|
121
|
+
error: '#f28078',
|
|
122
|
+
onError: '#161616',
|
|
123
|
+
errorMuted: '#8b5a55',
|
|
124
|
+
// Surface — near-black with subtle green tint
|
|
125
|
+
surface: '#282C28',
|
|
126
|
+
onSurface: '#eeeeee',
|
|
127
|
+
surfaceVariant: '#1C201C',
|
|
128
|
+
onSurfaceVariant: '#d0d0d0',
|
|
129
|
+
surfaceContainer: '#323632',
|
|
130
|
+
surfaceContainerHigh: '#3C403C',
|
|
131
|
+
// Background — near-black hero
|
|
132
|
+
background: '#0E110E',
|
|
133
|
+
onBackground: '#eeeeee',
|
|
134
|
+
// Outline & Dividers — neutral-tinted for green surfaces
|
|
135
|
+
outline: '#858885',
|
|
136
|
+
outlineVariant: '#656865',
|
|
137
|
+
// Shadows — subtler on dark backgrounds
|
|
138
|
+
shadow: 'rgba(0, 0, 0, 0.4)',
|
|
139
|
+
shadowLight: 'rgba(0, 0, 0, 0.25)',
|
|
140
|
+
shadowLighter: 'rgba(0, 0, 0, 0.15)',
|
|
141
|
+
shadowSubtle: 'rgba(0, 0, 0, 0.1)',
|
|
142
|
+
shadowFaint: 'rgba(0, 0, 0, 0.06)',
|
|
143
|
+
// Overlay
|
|
144
|
+
scrim: 'rgba(0, 0, 0, 0.6)',
|
|
145
|
+
scrimLight: 'rgba(0, 0, 0, 0.45)',
|
|
146
|
+
ripple: 'rgba(255, 255, 255, 0.1)',
|
|
147
|
+
// Interactive states (white variants)
|
|
148
|
+
whiteHigh: 'rgba(255, 255, 255, 0.87)',
|
|
149
|
+
whiteMedium: 'rgba(255, 255, 255, 0.5)',
|
|
150
|
+
whiteLow: 'rgba(255, 255, 255, 0.2)',
|
|
151
|
+
whiteHover: 'rgba(255, 255, 255, 0.08)',
|
|
152
|
+
// Keyboard chrome — dark green-tinted
|
|
153
|
+
keyboardSurface: '#1e241e',
|
|
154
|
+
keyCharacter: '#383e38',
|
|
155
|
+
keyCharacterText: '#eeeeee',
|
|
156
|
+
keyDefault: '#2a302a',
|
|
157
|
+
keyDefaultText: '#d0d0d0',
|
|
158
|
+
keyWrong: '#2a302a',
|
|
159
|
+
keyWrongMuted: '#2a302a',
|
|
160
|
+
keyCorrect: '#4caf50',
|
|
161
|
+
keyCorrectMuted: '#2e7d32',
|
|
162
|
+
keyAccentText: '#eeeeee',
|
|
163
|
+
keyDisabled: '#505050',
|
|
164
|
+
keyDisabledText: '#6E6E6E',
|
|
165
|
+
// Toggle/Switch — green teal
|
|
166
|
+
toggleTrackOn: 'rgba(129, 199, 132, 0.5)',
|
|
167
|
+
toggleTrackOff: 'rgba(255, 255, 255, 0.3)',
|
|
168
|
+
toggleThumbOn: '#81c784',
|
|
169
|
+
toggleThumbOff: '#6E6E6E',
|
|
170
|
+
toggleHoverOn: 'rgba(129, 199, 132, 0.08)',
|
|
171
|
+
toggleHoverOff: 'rgba(255, 255, 255, 0.04)',
|
|
172
|
+
toggleFocusOn: 'rgba(129, 199, 132, 0.12)',
|
|
173
|
+
toggleFocusOff: 'rgba(255, 255, 255, 0.06)',
|
|
174
|
+
// 3D text shadows
|
|
175
|
+
textShadowDark: '#000000',
|
|
176
|
+
textShadow1: '#2A2A2A',
|
|
177
|
+
textShadow2: '#161616',
|
|
178
|
+
textShadow3: '#000000',
|
|
179
|
+
// RGB decompositions
|
|
180
|
+
primaryRgb: '129, 199, 132',
|
|
181
|
+
backgroundRgb: '14, 17, 14',
|
|
182
|
+
surfaceRgb: '40, 44, 40',
|
|
183
|
+
primaryDarkerRgb: '46, 125, 50',
|
|
184
|
+
};
|
|
185
|
+
//# sourceMappingURL=palettes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palettes.js","sourceRoot":"","sources":["../src/palettes.ts"],"names":[],"mappings":"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"}
|
package/dist/theme.d.ts
ADDED
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme system — a mechanical mapping from a per-mode {@link ModeColorPalette}
|
|
3
|
+
* to the theme object consumed via styled-components' `props.theme`.
|
|
4
|
+
*
|
|
5
|
+
* Ported from ymy-components. The palettes carry all color values; this builder
|
|
6
|
+
* assembles them (plus spacing/styling tokens) into the shape the app reads.
|
|
7
|
+
*
|
|
8
|
+
* To wire global `DefaultTheme` typing in a consumer, augment styled-components
|
|
9
|
+
* with {@link ThemeType} (see the project's `styled.d.ts`).
|
|
10
|
+
*/
|
|
11
|
+
import type { ModeColorPalette } from './palettes.js';
|
|
12
|
+
/** Convert a hex color (`#rrggbb`) to an `"r, g, b"` string for rgba() usage */
|
|
13
|
+
export declare function hexToRgb(hex: string): string;
|
|
14
|
+
/** Build a theme object for the given mode */
|
|
15
|
+
export declare function buildTheme(mode: 'light' | 'dark'): {
|
|
16
|
+
readonly spacing: {
|
|
17
|
+
readonly appStandardPadding: "1rem";
|
|
18
|
+
};
|
|
19
|
+
readonly colors: {
|
|
20
|
+
readonly primary: string;
|
|
21
|
+
readonly onPrimary: string;
|
|
22
|
+
readonly primaryContainer: string;
|
|
23
|
+
readonly onPrimaryContainer: string;
|
|
24
|
+
readonly primaryDark: string;
|
|
25
|
+
readonly primaryDarker: string;
|
|
26
|
+
readonly secondary: string;
|
|
27
|
+
readonly onSecondary: string;
|
|
28
|
+
readonly secondaryContainer: string;
|
|
29
|
+
readonly onSecondaryContainer: string;
|
|
30
|
+
readonly secondaryLight: string;
|
|
31
|
+
readonly success: string;
|
|
32
|
+
readonly onSuccess: string;
|
|
33
|
+
readonly successContainer: string;
|
|
34
|
+
readonly onSuccessContainer: string;
|
|
35
|
+
readonly successSurface: string;
|
|
36
|
+
readonly successDark: string;
|
|
37
|
+
readonly successMuted: string;
|
|
38
|
+
readonly error: string;
|
|
39
|
+
readonly onError: string;
|
|
40
|
+
readonly errorMuted: string;
|
|
41
|
+
readonly surface: string;
|
|
42
|
+
readonly onSurface: string;
|
|
43
|
+
readonly surfaceVariant: string;
|
|
44
|
+
readonly onSurfaceVariant: string;
|
|
45
|
+
readonly surfaceContainer: string;
|
|
46
|
+
readonly surfaceContainerHigh: string;
|
|
47
|
+
readonly background: string;
|
|
48
|
+
readonly onBackground: string;
|
|
49
|
+
readonly outline: string;
|
|
50
|
+
readonly outlineVariant: string;
|
|
51
|
+
readonly shadow: string;
|
|
52
|
+
readonly shadowLight: string;
|
|
53
|
+
readonly shadowLighter: string;
|
|
54
|
+
readonly shadowSubtle: string;
|
|
55
|
+
readonly shadowFaint: string;
|
|
56
|
+
readonly scrim: string;
|
|
57
|
+
readonly scrimLight: string;
|
|
58
|
+
readonly ripple: string;
|
|
59
|
+
readonly whiteHigh: string;
|
|
60
|
+
readonly whiteMedium: string;
|
|
61
|
+
readonly whiteLow: string;
|
|
62
|
+
readonly whiteHover: string;
|
|
63
|
+
readonly keyboardSurface: string;
|
|
64
|
+
readonly keyCharacter: string;
|
|
65
|
+
readonly keyCharacterText: string;
|
|
66
|
+
readonly keyDefault: string;
|
|
67
|
+
readonly keyDefaultText: string;
|
|
68
|
+
readonly keyWrong: string;
|
|
69
|
+
readonly keyWrongMuted: string;
|
|
70
|
+
readonly keyCorrect: string;
|
|
71
|
+
readonly keyCorrectMuted: string;
|
|
72
|
+
readonly keyAccentText: string;
|
|
73
|
+
readonly keyDisabled: string;
|
|
74
|
+
readonly keyDisabledText: string;
|
|
75
|
+
readonly toggleTrackOn: string;
|
|
76
|
+
readonly toggleTrackOff: string;
|
|
77
|
+
readonly toggleThumbOn: string;
|
|
78
|
+
readonly toggleThumbOff: string;
|
|
79
|
+
readonly toggleHoverOn: string;
|
|
80
|
+
readonly toggleHoverOff: string;
|
|
81
|
+
readonly toggleFocusOn: string;
|
|
82
|
+
readonly toggleFocusOff: string;
|
|
83
|
+
readonly textShadowDark: string;
|
|
84
|
+
readonly textShadow1: string;
|
|
85
|
+
readonly textShadow2: string;
|
|
86
|
+
readonly textShadow3: string;
|
|
87
|
+
readonly primaryRgb: string;
|
|
88
|
+
readonly backgroundRgb: string;
|
|
89
|
+
readonly surfaceRgb: string;
|
|
90
|
+
readonly primaryDarkerRgb: string;
|
|
91
|
+
readonly primaryLight: string;
|
|
92
|
+
readonly backgroundHex: string;
|
|
93
|
+
readonly bottomNavBarBackgroundRgb: string;
|
|
94
|
+
readonly settingsBackgroundRgb: string;
|
|
95
|
+
readonly text: string;
|
|
96
|
+
};
|
|
97
|
+
readonly styling: {
|
|
98
|
+
readonly borderRadiusPixel: number;
|
|
99
|
+
};
|
|
100
|
+
readonly palette: ModeColorPalette;
|
|
101
|
+
};
|
|
102
|
+
/** Default light theme (for backwards compatibility and tests) */
|
|
103
|
+
export declare const theme: {
|
|
104
|
+
readonly spacing: {
|
|
105
|
+
readonly appStandardPadding: "1rem";
|
|
106
|
+
};
|
|
107
|
+
readonly colors: {
|
|
108
|
+
readonly primary: string;
|
|
109
|
+
readonly onPrimary: string;
|
|
110
|
+
readonly primaryContainer: string;
|
|
111
|
+
readonly onPrimaryContainer: string;
|
|
112
|
+
readonly primaryDark: string;
|
|
113
|
+
readonly primaryDarker: string;
|
|
114
|
+
readonly secondary: string;
|
|
115
|
+
readonly onSecondary: string;
|
|
116
|
+
readonly secondaryContainer: string;
|
|
117
|
+
readonly onSecondaryContainer: string;
|
|
118
|
+
readonly secondaryLight: string;
|
|
119
|
+
readonly success: string;
|
|
120
|
+
readonly onSuccess: string;
|
|
121
|
+
readonly successContainer: string;
|
|
122
|
+
readonly onSuccessContainer: string;
|
|
123
|
+
readonly successSurface: string;
|
|
124
|
+
readonly successDark: string;
|
|
125
|
+
readonly successMuted: string;
|
|
126
|
+
readonly error: string;
|
|
127
|
+
readonly onError: string;
|
|
128
|
+
readonly errorMuted: string;
|
|
129
|
+
readonly surface: string;
|
|
130
|
+
readonly onSurface: string;
|
|
131
|
+
readonly surfaceVariant: string;
|
|
132
|
+
readonly onSurfaceVariant: string;
|
|
133
|
+
readonly surfaceContainer: string;
|
|
134
|
+
readonly surfaceContainerHigh: string;
|
|
135
|
+
readonly background: string;
|
|
136
|
+
readonly onBackground: string;
|
|
137
|
+
readonly outline: string;
|
|
138
|
+
readonly outlineVariant: string;
|
|
139
|
+
readonly shadow: string;
|
|
140
|
+
readonly shadowLight: string;
|
|
141
|
+
readonly shadowLighter: string;
|
|
142
|
+
readonly shadowSubtle: string;
|
|
143
|
+
readonly shadowFaint: string;
|
|
144
|
+
readonly scrim: string;
|
|
145
|
+
readonly scrimLight: string;
|
|
146
|
+
readonly ripple: string;
|
|
147
|
+
readonly whiteHigh: string;
|
|
148
|
+
readonly whiteMedium: string;
|
|
149
|
+
readonly whiteLow: string;
|
|
150
|
+
readonly whiteHover: string;
|
|
151
|
+
readonly keyboardSurface: string;
|
|
152
|
+
readonly keyCharacter: string;
|
|
153
|
+
readonly keyCharacterText: string;
|
|
154
|
+
readonly keyDefault: string;
|
|
155
|
+
readonly keyDefaultText: string;
|
|
156
|
+
readonly keyWrong: string;
|
|
157
|
+
readonly keyWrongMuted: string;
|
|
158
|
+
readonly keyCorrect: string;
|
|
159
|
+
readonly keyCorrectMuted: string;
|
|
160
|
+
readonly keyAccentText: string;
|
|
161
|
+
readonly keyDisabled: string;
|
|
162
|
+
readonly keyDisabledText: string;
|
|
163
|
+
readonly toggleTrackOn: string;
|
|
164
|
+
readonly toggleTrackOff: string;
|
|
165
|
+
readonly toggleThumbOn: string;
|
|
166
|
+
readonly toggleThumbOff: string;
|
|
167
|
+
readonly toggleHoverOn: string;
|
|
168
|
+
readonly toggleHoverOff: string;
|
|
169
|
+
readonly toggleFocusOn: string;
|
|
170
|
+
readonly toggleFocusOff: string;
|
|
171
|
+
readonly textShadowDark: string;
|
|
172
|
+
readonly textShadow1: string;
|
|
173
|
+
readonly textShadow2: string;
|
|
174
|
+
readonly textShadow3: string;
|
|
175
|
+
readonly primaryRgb: string;
|
|
176
|
+
readonly backgroundRgb: string;
|
|
177
|
+
readonly surfaceRgb: string;
|
|
178
|
+
readonly primaryDarkerRgb: string;
|
|
179
|
+
readonly primaryLight: string;
|
|
180
|
+
readonly backgroundHex: string;
|
|
181
|
+
readonly bottomNavBarBackgroundRgb: string;
|
|
182
|
+
readonly settingsBackgroundRgb: string;
|
|
183
|
+
readonly text: string;
|
|
184
|
+
};
|
|
185
|
+
readonly styling: {
|
|
186
|
+
readonly borderRadiusPixel: number;
|
|
187
|
+
};
|
|
188
|
+
readonly palette: ModeColorPalette;
|
|
189
|
+
};
|
|
190
|
+
/** Type export for use in styled.d.ts augmentations */
|
|
191
|
+
export type ThemeType = ReturnType<typeof buildTheme>;
|
|
192
|
+
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,gFAAgF;AAChF,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM5C;AA6GD,8CAA8C;AAC9C,wBAAgB,UAAU,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAPrB,MAAM;;;EASjC;AAED,kEAAkE;AAClE,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAZU,MAAM;;;CAYM,CAAC;AAEzC,uDAAuD;AACvD,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}
|
package/dist/theme.js
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme system — a mechanical mapping from a per-mode {@link ModeColorPalette}
|
|
3
|
+
* to the theme object consumed via styled-components' `props.theme`.
|
|
4
|
+
*
|
|
5
|
+
* Ported from ymy-components. The palettes carry all color values; this builder
|
|
6
|
+
* assembles them (plus spacing/styling tokens) into the shape the app reads.
|
|
7
|
+
*
|
|
8
|
+
* To wire global `DefaultTheme` typing in a consumer, augment styled-components
|
|
9
|
+
* with {@link ThemeType} (see the project's `styled.d.ts`).
|
|
10
|
+
*/
|
|
11
|
+
import { lightPalette, darkPalette } from './palettes.js';
|
|
12
|
+
/** Convert a hex color (`#rrggbb`) to an `"r, g, b"` string for rgba() usage */
|
|
13
|
+
export function hexToRgb(hex) {
|
|
14
|
+
const h = hex.replace('#', '');
|
|
15
|
+
const r = parseInt(h.substring(0, 2), 16);
|
|
16
|
+
const g = parseInt(h.substring(2, 4), 16);
|
|
17
|
+
const b = parseInt(h.substring(4, 6), 16);
|
|
18
|
+
return `${r}, ${g}, ${b}`;
|
|
19
|
+
}
|
|
20
|
+
function assembleTheme(palette) {
|
|
21
|
+
return {
|
|
22
|
+
spacing: {
|
|
23
|
+
appStandardPadding: '1rem',
|
|
24
|
+
},
|
|
25
|
+
colors: {
|
|
26
|
+
// Core tokens — 1:1 from palette
|
|
27
|
+
primary: palette.primary,
|
|
28
|
+
onPrimary: palette.onPrimary,
|
|
29
|
+
primaryContainer: palette.primaryContainer,
|
|
30
|
+
onPrimaryContainer: palette.onPrimaryContainer,
|
|
31
|
+
primaryDark: palette.primaryDark,
|
|
32
|
+
primaryDarker: palette.primaryDarker,
|
|
33
|
+
secondary: palette.secondary,
|
|
34
|
+
onSecondary: palette.onSecondary,
|
|
35
|
+
secondaryContainer: palette.secondaryContainer,
|
|
36
|
+
onSecondaryContainer: palette.onSecondaryContainer,
|
|
37
|
+
secondaryLight: palette.secondaryLight,
|
|
38
|
+
success: palette.success,
|
|
39
|
+
onSuccess: palette.onSuccess,
|
|
40
|
+
successContainer: palette.successContainer,
|
|
41
|
+
onSuccessContainer: palette.onSuccessContainer,
|
|
42
|
+
successSurface: palette.successSurface,
|
|
43
|
+
successDark: palette.successDark,
|
|
44
|
+
successMuted: palette.successMuted,
|
|
45
|
+
error: palette.error,
|
|
46
|
+
onError: palette.onError,
|
|
47
|
+
errorMuted: palette.errorMuted,
|
|
48
|
+
surface: palette.surface,
|
|
49
|
+
onSurface: palette.onSurface,
|
|
50
|
+
surfaceVariant: palette.surfaceVariant,
|
|
51
|
+
onSurfaceVariant: palette.onSurfaceVariant,
|
|
52
|
+
surfaceContainer: palette.surfaceContainer,
|
|
53
|
+
surfaceContainerHigh: palette.surfaceContainerHigh,
|
|
54
|
+
background: palette.background,
|
|
55
|
+
onBackground: palette.onBackground,
|
|
56
|
+
outline: palette.outline,
|
|
57
|
+
outlineVariant: palette.outlineVariant,
|
|
58
|
+
shadow: palette.shadow,
|
|
59
|
+
shadowLight: palette.shadowLight,
|
|
60
|
+
shadowLighter: palette.shadowLighter,
|
|
61
|
+
shadowSubtle: palette.shadowSubtle,
|
|
62
|
+
shadowFaint: palette.shadowFaint,
|
|
63
|
+
scrim: palette.scrim,
|
|
64
|
+
scrimLight: palette.scrimLight,
|
|
65
|
+
ripple: palette.ripple,
|
|
66
|
+
whiteHigh: palette.whiteHigh,
|
|
67
|
+
whiteMedium: palette.whiteMedium,
|
|
68
|
+
whiteLow: palette.whiteLow,
|
|
69
|
+
whiteHover: palette.whiteHover,
|
|
70
|
+
keyboardSurface: palette.keyboardSurface,
|
|
71
|
+
keyCharacter: palette.keyCharacter,
|
|
72
|
+
keyCharacterText: palette.keyCharacterText,
|
|
73
|
+
keyDefault: palette.keyDefault,
|
|
74
|
+
keyDefaultText: palette.keyDefaultText,
|
|
75
|
+
keyWrong: palette.keyWrong,
|
|
76
|
+
keyWrongMuted: palette.keyWrongMuted,
|
|
77
|
+
keyCorrect: palette.keyCorrect,
|
|
78
|
+
keyCorrectMuted: palette.keyCorrectMuted,
|
|
79
|
+
keyAccentText: palette.keyAccentText,
|
|
80
|
+
keyDisabled: palette.keyDisabled,
|
|
81
|
+
keyDisabledText: palette.keyDisabledText,
|
|
82
|
+
toggleTrackOn: palette.toggleTrackOn,
|
|
83
|
+
toggleTrackOff: palette.toggleTrackOff,
|
|
84
|
+
toggleThumbOn: palette.toggleThumbOn,
|
|
85
|
+
toggleThumbOff: palette.toggleThumbOff,
|
|
86
|
+
toggleHoverOn: palette.toggleHoverOn,
|
|
87
|
+
toggleHoverOff: palette.toggleHoverOff,
|
|
88
|
+
toggleFocusOn: palette.toggleFocusOn,
|
|
89
|
+
toggleFocusOff: palette.toggleFocusOff,
|
|
90
|
+
textShadowDark: palette.textShadowDark,
|
|
91
|
+
textShadow1: palette.textShadow1,
|
|
92
|
+
textShadow2: palette.textShadow2,
|
|
93
|
+
textShadow3: palette.textShadow3,
|
|
94
|
+
// RGB versions for rgba() usage in styled-components
|
|
95
|
+
primaryRgb: palette.primaryRgb,
|
|
96
|
+
backgroundRgb: palette.backgroundRgb,
|
|
97
|
+
surfaceRgb: palette.surfaceRgb,
|
|
98
|
+
primaryDarkerRgb: palette.primaryDarkerRgb,
|
|
99
|
+
// Legacy mappings (for gradual migration - can be removed later)
|
|
100
|
+
primaryLight: palette.primaryContainer,
|
|
101
|
+
backgroundHex: palette.background,
|
|
102
|
+
bottomNavBarBackgroundRgb: palette.primaryRgb,
|
|
103
|
+
settingsBackgroundRgb: palette.surfaceRgb,
|
|
104
|
+
text: palette.onSurface,
|
|
105
|
+
},
|
|
106
|
+
styling: {
|
|
107
|
+
borderRadiusPixel: 32,
|
|
108
|
+
},
|
|
109
|
+
palette,
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
/** Build a theme object for the given mode */
|
|
113
|
+
export function buildTheme(mode) {
|
|
114
|
+
return assembleTheme(mode === 'dark' ? darkPalette : lightPalette);
|
|
115
|
+
}
|
|
116
|
+
/** Default light theme (for backwards compatibility and tests) */
|
|
117
|
+
export const theme = buildTheme('light');
|
|
118
|
+
//# sourceMappingURL=theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kang-components",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook, spring presets, cross-fading text).",
|
|
3
|
+
"version": "0.6.0",
|
|
4
|
+
"description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook, spring presets, cross-fading text, circle icon button).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"scripts": {
|
|
25
25
|
"build": "tsc -p tsconfig.build.json",
|
|
26
|
+
"test": "vitest run",
|
|
27
|
+
"test:watch": "vitest",
|
|
26
28
|
"prepublishOnly": "npm run build"
|
|
27
29
|
},
|
|
28
30
|
"peerDependencies": {
|
|
@@ -43,9 +45,16 @@
|
|
|
43
45
|
},
|
|
44
46
|
"devDependencies": {
|
|
45
47
|
"@react-spring/web": "^9.7.5",
|
|
48
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
49
|
+
"@testing-library/react": "^16.1.0",
|
|
46
50
|
"@types/react": "^18.3.18",
|
|
51
|
+
"@types/react-dom": "^18.3.5",
|
|
52
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
53
|
+
"jsdom": "^25.0.1",
|
|
47
54
|
"react": "^18.3.1",
|
|
55
|
+
"react-dom": "^18.3.1",
|
|
48
56
|
"styled-components": "^6.1.16",
|
|
49
|
-
"typescript": "~5.6.2"
|
|
57
|
+
"typescript": "~5.6.2",
|
|
58
|
+
"vitest": "^2.1.8"
|
|
50
59
|
}
|
|
51
60
|
}
|