@nous-research/ui 0.13.0 → 0.13.2
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/README.md
CHANGED
|
@@ -53,9 +53,12 @@ pnpm dev # next dev on http://localhost:3000 → redirects to /ds
|
|
|
53
53
|
|
|
54
54
|
```
|
|
55
55
|
pnpm build # tsc → dist/ + copies css / fonts / assets
|
|
56
|
-
pnpm release # runs scripts/release.sh (must be on main, clean tree)
|
|
57
56
|
```
|
|
58
57
|
|
|
58
|
+
releases are published automatically when PRs merge to `main`. the github
|
|
59
|
+
workflow bumps the package version from the merged PR labels (`major`, `minor`,
|
|
60
|
+
or `patch`), pushes the tag, and publishes to npm via trusted publishing.
|
|
61
|
+
|
|
59
62
|
the published tarball only ships `dist/` and `README.md` (see `files` in
|
|
60
63
|
`package.json`). `.d.ts.map` + inline sources are emitted so consumers can
|
|
61
64
|
"go to definition" straight into the TypeScript source.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tier-card.d.ts","sourceRoot":"","sources":["../../../src/ui/components/tier-card.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,YAAY,EACZ,KAAK,EACN,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"tier-card.d.ts","sourceRoot":"","sources":["../../../src/ui/components/tier-card.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,YAAY,EACZ,KAAK,EACN,EAAE,aAAa,2CAqHf;AAED,MAAM,WAAW,aAAa;IAC5B,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,6CAA6C;IAC7C,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,aAAa,CAAA;IACpB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,YAAY,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAA;IACnD,4BAA4B;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB"}
|
|
@@ -3,7 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import { cn } from '../../utils';
|
|
4
4
|
import { ImageDistortion } from './image-distortion';
|
|
5
5
|
import { Typography } from './typography';
|
|
6
|
-
import { Small } from './typography/small';
|
|
7
6
|
/**
|
|
8
7
|
* Selectable tier / pricing card. Full-bleed distorted image background,
|
|
9
8
|
* readable overlay text, and an animated `.arc-border` shimmer on the
|
|
@@ -21,6 +20,6 @@ import { Small } from './typography/small';
|
|
|
21
20
|
* base tint.
|
|
22
21
|
*/
|
|
23
22
|
export function TierCard({ badge, bullets, className, image, isCurrent = false, onSelect, overlay, price, selected = false, tint, tintStrength, title }) {
|
|
24
|
-
return (_jsxs("button", { className: cn('group relative flex w-full cursor-pointer flex-col border border-current/20', 'text-left transition-colors duration-300', selected && 'border-midground/60', isCurrent && !selected && 'border-midground/30', className), onClick: onSelect, type: "button", children: [_jsx("span", { "aria-hidden": true, className: cn('arc-border transition-opacity duration-200', selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100') }), _jsxs("div", { className: "relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden", style: { backgroundColor: 'var(--background)' }, children: [_jsx(ImageDistortion, { active: selected, src: image, tint: tint, tintStrength: tintStrength }), overlay && (_jsx("div", { className: "pointer-events-none absolute inset-0", style: { backgroundColor: overlay, mixBlendMode: 'color' } })), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsxs(
|
|
23
|
+
return (_jsxs("button", { className: cn('group relative flex w-full cursor-pointer flex-col border border-current/20', 'text-left transition-colors duration-300', selected && 'border-midground/60', isCurrent && !selected && 'border-midground/30', className), onClick: onSelect, type: "button", children: [_jsx("span", { "aria-hidden": true, className: cn('arc-border transition-opacity duration-200', selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100') }), _jsxs("div", { className: "relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden", style: { backgroundColor: 'var(--background)' }, children: [_jsx(ImageDistortion, { active: selected, src: image, tint: tint, tintStrength: tintStrength }), overlay && (_jsx("div", { className: "pointer-events-none absolute inset-0", style: { backgroundColor: overlay, mixBlendMode: 'color' } })), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsxs(Typography, { variant: "sm", className: cn('block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] text-[1.2rem]', 'transition-colors', selected && 'text-midground'), style: selected ? { mixBlendMode: 'plus-lighter' } : undefined, children: [title, badge && _jsx("span", { className: "ml-1 opacity-50", children: badge })] }), price.secondary ? (_jsxs(_Fragment, { children: [_jsxs(Typography, { className: "block text-md line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.secondary, price.secondarySuffix && (_jsx("span", { className: "text-[1rem]", children: price.secondarySuffix }))] }), _jsxs(Typography, { className: "block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.primary, price.primarySuffix && (_jsxs("span", { className: "text-[1rem] opacity-60", children: [' ', price.primarySuffix] }))] })] })) : (_jsxs(Typography, { className: "block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.primary, price.primarySuffix && (_jsx("span", { className: "text-[1rem] opacity-60", children: price.primarySuffix }))] }))] }), bullets.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1", children: bullets.map((bullet, i) => (_jsxs("li", { className: cn('font-courier text-[1rem] leading-tight tracking-tight uppercase', 'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]'), children: ["\u00B7 ", bullet] }, typeof bullet === 'string' ? bullet : i))) }))] })] })] }));
|
|
25
24
|
}
|
|
26
25
|
//# sourceMappingURL=tier-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tier-card.js","sourceRoot":"","sources":["../../../src/ui/components/tier-card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAEhC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"tier-card.js","sourceRoot":"","sources":["../../../src/ui/components/tier-card.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { cn } from '../../utils'\n\nimport { ImageDistortion } from './image-distortion'\nimport { Typography } from './typography'\nimport { Small } from './typography/small'\n\n/**\n * Selectable tier / pricing card. Full-bleed distorted image background,\n * readable overlay text, and an animated `.arc-border` shimmer on the\n * selected state. Fully presentational — the consumer owns the data\n * (tier schema, price formatting, tier imagery / tints).\n *\n * Visual states:\n * - `selected`: brightens the distortion, activates `.arc-border`, and\n * composites the headline / price with `mix-blend-mode: plus-lighter`\n * so the text lifts off the image regardless of tint.\n * - `isCurrent`: subtle midground-tinted border hint (suppressed when\n * `selected` wins).\n * - `overlay`: optional top-layer color blended with `mix-blend-mode:\n * color` — used for the \"highest tier\" red treatment on top of any\n * base tint.\n */\nexport function TierCard({\n badge,\n bullets,\n className,\n image,\n isCurrent = false,\n onSelect,\n overlay,\n price,\n selected = false,\n tint,\n tintStrength,\n title\n}: TierCardProps) {\n return (\n <button\n className={cn(\n 'group relative flex w-full cursor-pointer flex-col border border-current/20',\n 'text-left transition-colors duration-300',\n selected && 'border-midground/60',\n isCurrent && !selected && 'border-midground/30',\n className\n )}\n onClick={onSelect}\n type=\"button\"\n >\n <span\n aria-hidden\n className={cn(\n 'arc-border transition-opacity duration-200',\n selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'\n )}\n />\n\n <div\n className=\"relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden\"\n style={{ backgroundColor: 'var(--background)' }}\n >\n <ImageDistortion\n active={selected}\n src={image}\n tint={tint}\n tintStrength={tintStrength}\n />\n\n {overlay && (\n <div\n className=\"pointer-events-none absolute inset-0\"\n style={{ backgroundColor: overlay, mixBlendMode: 'color' }}\n />\n )}\n\n <div className=\"pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3\">\n <div className=\"flex flex-col gap-0.5\">\n <Typography variant=\"sm\" \n className={cn(\n 'block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] text-[1.2rem]',\n 'transition-colors',\n selected && 'text-midground'\n )}\n style={selected ? { mixBlendMode: 'plus-lighter' } : undefined}\n >\n {title}\n {badge && <span className=\"ml-1 opacity-50\">{badge}</span>}\n </Typography>\n\n {price.secondary ? (\n <>\n <Typography\n className=\"block text-md line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]\"\n expanded\n style={{ mixBlendMode: 'plus-lighter' }}\n >\n {price.secondary}\n {price.secondarySuffix && (\n <span className=\"text-[1rem]\">\n {price.secondarySuffix}\n </span>\n )}\n </Typography>\n\n <Typography\n className=\"block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]\"\n expanded\n style={{ mixBlendMode: 'plus-lighter' }}\n >\n {price.primary}\n {price.primarySuffix && (\n <span className=\"text-[1rem] opacity-60\">\n {' '}\n {price.primarySuffix}\n </span>\n )}\n </Typography>\n </>\n ) : (\n <Typography\n className=\"block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]\"\n expanded\n style={{ mixBlendMode: 'plus-lighter' }}\n >\n {price.primary}\n {price.primarySuffix && (\n <span className=\"text-[1rem] opacity-60\">\n {price.primarySuffix}\n </span>\n )}\n </Typography>\n )}\n </div>\n\n {bullets.length > 0 && (\n <ul className=\"flex flex-col gap-1\">\n {bullets.map((bullet, i) => (\n <li\n className={cn(\n 'font-courier text-[1rem] leading-tight tracking-tight uppercase',\n 'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]',\n )}\n key={typeof bullet === 'string' ? bullet : i}\n >\n · {bullet}\n </li>\n ))}\n </ul>\n )}\n </div>\n </div>\n </button>\n )\n}\n\nexport interface TierCardPrice {\n /** Headline price, e.g. `\"$20\"` or `\"Free\"`. */\n primary: string\n /** Small suffix rendered after `primary`, e.g. `\"/mo\"` or `\"first payment\"`. */\n primarySuffix?: string\n /** Optional struck-through comparison price rendered above `primary`, e.g. `\"$30\"`. */\n secondary?: string\n /** Small suffix rendered after `secondary`. */\n secondarySuffix?: string\n}\n\nexport interface TierCardProps {\n /** Small annotation after the title, e.g. `\"(current)\"`. */\n badge?: React.ReactNode\n /** Feature list rendered under the price. */\n bullets: React.ReactNode[]\n className?: string\n /** Background image URL. */\n image: string\n /** Applies the \"current plan\" border hint when not `selected`. */\n isCurrent?: boolean\n onSelect?: () => void\n /** Color blended with `mix-blend-mode: color` over the image (used for the highest-tier red treatment). */\n overlay?: string\n price: TierCardPrice\n /** Applies selected chrome (arc-border shimmer, active distortion, plus-lighter text blend). */\n selected?: boolean\n /** Shader tint passed through to `ImageDistortion`. */\n tint?: string\n /** Active / inactive tint strength passed through to `ImageDistortion`. */\n tintStrength?: { active: number; inactive: number }\n /** Tier name / headline. */\n title: React.ReactNode\n}\n"]}
|
package/dist/ui/globals.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nous-research/ui",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"sideEffects": [
|
|
@@ -36,6 +36,15 @@
|
|
|
36
36
|
"./assets/*": "./dist/assets/*",
|
|
37
37
|
"./styles/globals.css": "./dist/ui/globals.css"
|
|
38
38
|
},
|
|
39
|
+
"scripts": {
|
|
40
|
+
"dev": "storybook dev -p 6006",
|
|
41
|
+
"prepublishOnly": "pnpm build",
|
|
42
|
+
"build": "rm -rf dist && tsc -p tsconfig.build.json && cp -r src/assets dist/assets && cp -r src/fonts dist/fonts && cd src && find . -name '*.css' -exec sh -c 'mkdir -p \"../dist/$(dirname \"$1\")\" && cp \"$1\" \"../dist/$1\"' _ {} \\;",
|
|
43
|
+
"build:watch": "pnpm build && tsc -p tsconfig.build.json --watch --preserveWatchOutput",
|
|
44
|
+
"build-storybook": "storybook build -o storybook-static",
|
|
45
|
+
"test": "pnpm type-check",
|
|
46
|
+
"type-check": "tsc -p tsconfig.build.json --noEmit"
|
|
47
|
+
},
|
|
39
48
|
"dependencies": {
|
|
40
49
|
"@nanostores/react": "^1.0.0",
|
|
41
50
|
"class-variance-authority": "^0.7.1",
|
|
@@ -95,12 +104,5 @@
|
|
|
95
104
|
"gsap": {
|
|
96
105
|
"optional": true
|
|
97
106
|
}
|
|
98
|
-
},
|
|
99
|
-
"scripts": {
|
|
100
|
-
"dev": "storybook dev -p 6006",
|
|
101
|
-
"build": "rm -rf dist && tsc -p tsconfig.build.json && cp -r src/assets dist/assets && cp -r src/fonts dist/fonts && cd src && find . -name '*.css' -exec sh -c 'mkdir -p \"../dist/$(dirname \"$1\")\" && cp \"$1\" \"../dist/$1\"' _ {} \\;",
|
|
102
|
-
"build:watch": "pnpm build && tsc -p tsconfig.build.json --watch --preserveWatchOutput",
|
|
103
|
-
"build-storybook": "storybook build -o storybook-static",
|
|
104
|
-
"release": "./scripts/release.sh"
|
|
105
107
|
}
|
|
106
|
-
}
|
|
108
|
+
}
|