@ugurdemirel/landcraft 0.1.22 → 0.1.23
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/cjs/components/Stats/parts.cjs +1 -1
- package/dist/cjs/components/Stats/parts.cjs.map +1 -1
- package/dist/cjs/components/Stats/variants/Cells.cjs +1 -1
- package/dist/cjs/components/Stats/variants/Cells.cjs.map +1 -1
- package/dist/cjs/components/Stats/variants/Editorial.cjs +1 -1
- package/dist/cjs/components/Stats/variants/Editorial.cjs.map +1 -1
- package/dist/cjs/components/Stats/variants/Hairline.cjs +1 -1
- package/dist/cjs/components/Stats/variants/Hairline.cjs.map +1 -1
- package/dist/cjs/components/Stats/variants/Ticker.cjs +1 -1
- package/dist/cjs/components/Stats/variants/Ticker.cjs.map +1 -1
- package/dist/es/components/Stats/parts.js +37 -17
- package/dist/es/components/Stats/parts.js.map +1 -1
- package/dist/es/components/Stats/variants/Cells.js +46 -18
- package/dist/es/components/Stats/variants/Cells.js.map +1 -1
- package/dist/es/components/Stats/variants/Editorial.js +33 -25
- package/dist/es/components/Stats/variants/Editorial.js.map +1 -1
- package/dist/es/components/Stats/variants/Hairline.js +40 -20
- package/dist/es/components/Stats/variants/Hairline.js.map +1 -1
- package/dist/es/components/Stats/variants/Ticker.js +44 -23
- package/dist/es/components/Stats/variants/Ticker.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/styles.css +91 -17
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("../../utils/cn.cjs"),s=require("../../icons.cjs"),o="font-display font-semibold leading-none tracking-[-0.03em] tabular-nums text-foreground",i="ml-1.5 font-sans text-[0.42em] font-medium tracking-normal text-muted-foreground",d={2:"sm:grid-cols-2",3:"sm:grid-cols-2 lg:grid-cols-3",4:"sm:grid-cols-2 lg:grid-cols-4"},a={2:"sm:[&>*:nth-child(2n)]:border-l",3:"sm:max-lg:[&>*:nth-child(2n)]:border-l lg:[&>*:nth-child(3n+2)]:border-l lg:[&>*:nth-child(3n)]:border-l",4:"sm:max-lg:[&>*:nth-child(2n)]:border-l lg:[&>*:nth-child(4n+2)]:border-l lg:[&>*:nth-child(4n+3)]:border-l lg:[&>*:nth-child(4n)]:border-l"};function c({delta:r,className:l}){const e=r>0?"up":r<0?"down":"flat";return n.jsxs("span",{"data-direction":e,className:t.cn("inline-flex items-center gap-1 text-[0.8125rem] font-semibold leading-none tabular-nums",l),children:[n.jsx("span",{"aria-hidden":!0,className:t.cn("inline-flex",e==="up"&&"text-accent",e==="down"&&"text-danger",e==="flat"&&"text-muted-foreground"),children:e==="up"?n.jsx(s.ArrowUp,{className:"h-3.5 w-3.5",strokeWidth:2.25}):e==="down"?n.jsx(s.ArrowDown,{className:"h-3.5 w-3.5",strokeWidth:2.25}):n.jsx("span",{className:"h-px w-2.5 bg-current"})}),n.jsxs("span",{className:e==="flat"?"text-muted-foreground":"text-foreground",children:[Math.abs(r),"%"]})]})}exports.DeltaMark=c;exports.gridCols=d;exports.gridDivider=a;exports.suffixBase=i;exports.valueBase=o;
|
|
2
2
|
//# sourceMappingURL=parts.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parts.cjs","sources":["../../../../src/components/Stats/parts.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {
|
|
1
|
+
{"version":3,"file":"parts.cjs","sources":["../../../../src/components/Stats/parts.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport { ArrowDown, ArrowUp } from \"../../icons\";\n\n/**\n * Shared Stats primitives.\n *\n * One voice across every layout: Space Grotesk numerals on a fixed baseline,\n * quiet sentence-case labels, hairline rules instead of card chrome, and a\n * typographic delta mark instead of a pill badge.\n */\n\nexport const valueBase =\n \"font-display font-semibold leading-none tracking-[-0.03em] tabular-nums text-foreground\";\n\n/** Unit scales with the numeral it sits beside, so it reads at every size. */\nexport const suffixBase =\n \"ml-1.5 font-sans text-[0.42em] font-medium tracking-normal text-muted-foreground\";\n\nexport const gridCols: Record<2 | 3 | 4, string> = {\n 2: \"sm:grid-cols-2\",\n 3: \"sm:grid-cols-2 lg:grid-cols-3\",\n 4: \"sm:grid-cols-2 lg:grid-cols-4\",\n};\n\n/**\n * Vertical hairlines between grid columns. Each breakpoint owns the columns it\n * actually draws (and `max-lg` removes the 2-up rule once 3/4-up takes over),\n * so wrapped rows never inherit a stray edge rule.\n */\nexport const gridDivider: Record<2 | 3 | 4, string> = {\n 2: \"sm:[&>*:nth-child(2n)]:border-l\",\n 3: \"sm:max-lg:[&>*:nth-child(2n)]:border-l lg:[&>*:nth-child(3n+2)]:border-l lg:[&>*:nth-child(3n)]:border-l\",\n 4: \"sm:max-lg:[&>*:nth-child(2n)]:border-l lg:[&>*:nth-child(4n+2)]:border-l lg:[&>*:nth-child(4n+3)]:border-l lg:[&>*:nth-child(4n)]:border-l\",\n};\n\n/**\n * delta — a change, set in type: a direction-colored arrow beside the signed\n * magnitude in high-contrast foreground. No background, no pill, no border.\n * Zero reads neutral.\n *\n * Direction lives on the arrow, not the figure: `--color-accent` is emerald-600\n * and only clears 3:1 as a graphic, so tinting 13px text with it would miss the\n * 4.5:1 text floor. Danger (4.8:1) could tint text, but the mark stays one\n * consistent treatment instead of two.\n */\nexport function DeltaMark({ delta, className }: { delta: number; className?: string }) {\n const direction = delta > 0 ? \"up\" : delta < 0 ? \"down\" : \"flat\";\n\n return (\n <span\n data-direction={direction}\n className={cn(\n \"inline-flex items-center gap-1 text-[0.8125rem] font-semibold leading-none tabular-nums\",\n className,\n )}\n >\n <span\n aria-hidden\n className={cn(\n \"inline-flex\",\n direction === \"up\" && \"text-accent\",\n direction === \"down\" && \"text-danger\",\n direction === \"flat\" && \"text-muted-foreground\",\n )}\n >\n {direction === \"up\" ? (\n <ArrowUp className=\"h-3.5 w-3.5\" strokeWidth={2.25} />\n ) : direction === \"down\" ? (\n <ArrowDown className=\"h-3.5 w-3.5\" strokeWidth={2.25} />\n ) : (\n <span className=\"h-px w-2.5 bg-current\" />\n )}\n </span>\n <span className={direction === \"flat\" ? \"text-muted-foreground\" : \"text-foreground\"}>\n {Math.abs(delta)}%\n </span>\n </span>\n );\n}\n"],"names":["valueBase","suffixBase","gridCols","gridDivider","DeltaMark","delta","className","direction","jsxs","cn","jsx","ArrowUp","ArrowDown"],"mappings":"kLAWaA,EACX,0FAGWC,EACX,mFAEWC,EAAsC,CACjD,EAAG,iBACH,EAAG,gCACH,EAAG,+BACL,EAOaC,EAAyC,CACpD,EAAG,kCACH,EAAG,2GACH,EAAG,4IACL,EAYO,SAASC,EAAU,CAAE,MAAAC,EAAO,UAAAC,GAAoD,CACrF,MAAMC,EAAYF,EAAQ,EAAI,KAAOA,EAAQ,EAAI,OAAS,OAE1D,OACEG,EAAAA,KAAC,OAAA,CACC,iBAAgBD,EAChB,UAAWE,EAAAA,GACT,0FACAH,CAAA,EAGF,SAAA,CAAAI,EAAAA,IAAC,OAAA,CACC,cAAW,GACX,UAAWD,EAAAA,GACT,cACAF,IAAc,MAAQ,cACtBA,IAAc,QAAU,cACxBA,IAAc,QAAU,uBAAA,EAGzB,SAAAA,IAAc,KACbG,EAAAA,IAACC,EAAAA,QAAA,CAAQ,UAAU,cAAc,YAAa,KAAM,EAClDJ,IAAc,OAChBG,EAAAA,IAACE,YAAA,CAAU,UAAU,cAAc,YAAa,KAAM,EAEtDF,MAAC,OAAA,CAAK,UAAU,uBAAA,CAAwB,CAAA,CAAA,SAG3C,OAAA,CAAK,UAAWH,IAAc,OAAS,wBAA0B,kBAC/D,SAAA,CAAA,KAAK,IAAIF,CAAK,EAAE,GAAA,CAAA,CACnB,CAAA,CAAA,CAAA,CAGN"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),x=require("react"),r=require("../../../utils/cn.cjs"),s=require("../parts.cjs"),d=x.forwardRef(({className:n,stats:a,columns:i=4,...c},u)=>l.jsx("dl",{ref:u,className:r.cn("grid grid-cols-1 gap-px overflow-hidden rounded-xl border border-border bg-border",s.gridCols[i],n),...c,children:a.map(e=>l.jsxs("div",{className:"flex min-h-[8rem] flex-col justify-between gap-8 bg-surface p-5 sm:p-6",children:[l.jsxs("div",{className:"flex items-start justify-between gap-3",children:[l.jsx("dt",{className:"text-sm leading-5 text-muted-foreground",children:e.label}),e.icon?l.jsx("span",{className:"shrink-0 text-foreground/45",children:e.icon}):null]}),l.jsxs("div",{children:[l.jsxs("dd",{className:r.cn(s.valueBase,"text-4xl",e.accent?"text-primary":void 0),children:[e.value,e.suffix?l.jsx("span",{className:s.suffixBase,children:e.suffix}):null]}),typeof e.delta=="number"||e.sub?l.jsxs("div",{className:"mt-3 flex flex-wrap items-baseline gap-x-3 gap-y-1",children:[typeof e.delta=="number"?l.jsx(s.DeltaMark,{delta:e.delta}):null,e.sub?l.jsx("p",{className:"text-[13px] leading-5 text-muted-foreground",children:e.sub}):null]}):null]})]},e.label))}));d.displayName="StatsCells";exports.StatsCells=d;
|
|
2
2
|
//# sourceMappingURL=Cells.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cells.cjs","sources":["../../../../../src/components/Stats/variants/Cells.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface CellsProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\nexport const StatsCells = forwardRef<HTMLDListElement, CellsProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl
|
|
1
|
+
{"version":3,"file":"Cells.cjs","sources":["../../../../../src/components/Stats/variants/Cells.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface CellsProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\n/**\n * cells — one framed spec matrix. Cells are divided by real hairlines (the grid\n * gaps show the shared border color), so the group reads as a single panel\n * instead of a row of detached cards.\n */\nexport const StatsCells = forwardRef<HTMLDListElement, CellsProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl\n ref={ref}\n className={cn(\n \"grid grid-cols-1 gap-px overflow-hidden rounded-xl border border-border bg-border\",\n gridCols[columns],\n className,\n )}\n {...props}\n >\n {stats.map((stat) => (\n <div\n key={stat.label}\n className=\"flex min-h-[8rem] flex-col justify-between gap-8 bg-surface p-5 sm:p-6\"\n >\n <div className=\"flex items-start justify-between gap-3\">\n <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n {stat.icon ? <span className=\"shrink-0 text-foreground/45\">{stat.icon}</span> : null}\n </div>\n <div>\n <dd\n className={cn(\n valueBase,\n \"text-4xl\",\n stat.accent ? \"text-primary\" : undefined,\n )}\n >\n {stat.value}\n {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n </dd>\n {typeof stat.delta === \"number\" || stat.sub ? (\n <div className=\"mt-3 flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n {typeof stat.delta === \"number\" ? <DeltaMark delta={stat.delta} /> : null}\n {stat.sub ? (\n <p className=\"text-[13px] leading-5 text-muted-foreground\">{stat.sub}</p>\n ) : null}\n </div>\n ) : null}\n </div>\n </div>\n ))}\n </dl>\n ),\n);\nStatsCells.displayName = \"StatsCells\";\n"],"names":["StatsCells","forwardRef","className","stats","columns","props","ref","jsx","cn","gridCols","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":"qMAeaA,EAAaC,EAAAA,WACxB,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAU,EAAG,GAAGC,CAAA,EAASC,IAC5CC,EAAAA,IAAC,KAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,oFACAC,EAAAA,SAASL,CAAO,EAChBF,CAAA,EAED,GAAGG,EAEH,SAAAF,EAAM,IAAKO,GACVC,EAAAA,KAAC,MAAA,CAEC,UAAU,yEAEV,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,yCACb,SAAA,CAAAJ,EAAAA,IAAC,KAAA,CAAG,UAAU,0CAA2C,SAAAG,EAAK,MAAM,EACnEA,EAAK,KAAOH,MAAC,OAAA,CAAK,UAAU,8BAA+B,SAAAG,EAAK,KAAK,EAAU,IAAA,EAClF,SACC,MAAA,CACC,SAAA,CAAAC,EAAAA,KAAC,KAAA,CACC,UAAWH,EAAAA,GACTI,EAAAA,UACA,WACAF,EAAK,OAAS,eAAiB,MAAA,EAGhC,SAAA,CAAAA,EAAK,MACLA,EAAK,OAASH,MAAC,OAAA,CAAK,UAAWM,EAAAA,WAAa,SAAAH,EAAK,OAAO,EAAU,IAAA,CAAA,CAAA,EAEpE,OAAOA,EAAK,OAAU,UAAYA,EAAK,IACtCC,EAAAA,KAAC,MAAA,CAAI,UAAU,qDACZ,SAAA,CAAA,OAAOD,EAAK,OAAU,SAAWH,MAACO,EAAAA,WAAU,MAAOJ,EAAK,MAAO,EAAK,KACpEA,EAAK,IACJH,MAAC,IAAA,CAAE,UAAU,8CAA+C,SAAAG,EAAK,IAAI,EACnE,IAAA,CAAA,CACN,EACE,IAAA,CAAA,CACN,CAAA,CAAA,EA1BKA,EAAK,KAAA,CA4Bb,CAAA,CAAA,CAGP,EACAV,EAAW,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("react"),s=require("../../../utils/cn.cjs"),r=require("../parts.cjs"),a=u.forwardRef(({className:d,stats:i,columns:n=4,...t},c)=>l.jsx("dl",{ref:c,className:s.cn("grid grid-cols-1 gap-x-10 gap-y-10",r.gridCols[n],d),...t,children:i.map(e=>l.jsxs("div",{className:"border-t border-border pt-5",children:[l.jsx("dt",{className:"text-sm leading-5 text-muted-foreground",children:e.label}),l.jsxs("dd",{className:s.cn(r.valueBase,"mt-3 text-5xl sm:text-6xl",e.accent?"text-primary":void 0),children:[e.value,e.suffix?l.jsx("span",{className:r.suffixBase,children:e.suffix}):null]}),typeof e.delta=="number"||e.sub?l.jsxs("div",{className:"mt-4 flex flex-wrap items-baseline gap-x-3 gap-y-1",children:[typeof e.delta=="number"?l.jsx(r.DeltaMark,{delta:e.delta}):null,e.sub?l.jsx("p",{className:"text-[13px] leading-5 text-muted-foreground",children:e.sub}):null]}):null]},e.label))}));a.displayName="StatsEditorial";exports.StatsEditorial=a;
|
|
2
2
|
//# sourceMappingURL=Editorial.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editorial.cjs","sources":["../../../../../src/components/Stats/variants/Editorial.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols,
|
|
1
|
+
{"version":3,"file":"Editorial.cjs","sources":["../../../../../src/components/Stats/variants/Editorial.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface EditorialProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\n/** editorial — a ruled ledger: label on the rule, oversized numeral, typed meta. */\nexport const StatsEditorial = forwardRef<HTMLDListElement, EditorialProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl\n ref={ref}\n className={cn(\"grid grid-cols-1 gap-x-10 gap-y-10\", gridCols[columns], className)}\n {...props}\n >\n {stats.map((stat) => (\n <div key={stat.label} className=\"border-t border-border pt-5\">\n <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n <dd\n className={cn(\n valueBase,\n \"mt-3 text-5xl sm:text-6xl\",\n stat.accent ? \"text-primary\" : undefined,\n )}\n >\n {stat.value}\n {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n </dd>\n {typeof stat.delta === \"number\" || stat.sub ? (\n <div className=\"mt-4 flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n {typeof stat.delta === \"number\" ? <DeltaMark delta={stat.delta} /> : null}\n {stat.sub ? (\n <p className=\"text-[13px] leading-5 text-muted-foreground\">{stat.sub}</p>\n ) : null}\n </div>\n ) : null}\n </div>\n ))}\n </dl>\n ),\n);\nStatsEditorial.displayName = \"StatsEditorial\";\n"],"names":["StatsEditorial","forwardRef","className","stats","columns","props","ref","jsx","cn","gridCols","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":"qMAWaA,EAAiBC,EAAAA,WAC5B,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAU,EAAG,GAAGC,CAAA,EAASC,IAC5CC,EAAAA,IAAC,KAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,qCAAsCC,EAAAA,SAASL,CAAO,EAAGF,CAAS,EAC/E,GAAGG,EAEH,WAAM,IAAKK,GACVC,OAAC,MAAA,CAAqB,UAAU,8BAC9B,SAAA,CAAAJ,EAAAA,IAAC,KAAA,CAAG,UAAU,0CAA2C,SAAAG,EAAK,MAAM,EACpEC,EAAAA,KAAC,KAAA,CACC,UAAWH,EAAAA,GACTI,EAAAA,UACA,4BACAF,EAAK,OAAS,eAAiB,MAAA,EAGhC,SAAA,CAAAA,EAAK,MACLA,EAAK,OAASH,MAAC,OAAA,CAAK,UAAWM,EAAAA,WAAa,SAAAH,EAAK,OAAO,EAAU,IAAA,CAAA,CAAA,EAEpE,OAAOA,EAAK,OAAU,UAAYA,EAAK,IACtCC,EAAAA,KAAC,MAAA,CAAI,UAAU,qDACZ,SAAA,CAAA,OAAOD,EAAK,OAAU,SAAWH,MAACO,EAAAA,WAAU,MAAOJ,EAAK,MAAO,EAAK,KACpEA,EAAK,IACJH,MAAC,IAAA,CAAE,UAAU,8CAA+C,SAAAG,EAAK,IAAI,EACnE,IAAA,CAAA,CACN,EACE,IAAA,CAAA,EAnBIA,EAAK,KAoBf,CACD,CAAA,CAAA,CAGP,EACAV,EAAe,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),x=require("react"),a=require("../../../utils/cn.cjs"),r=require("../parts.cjs"),i=x.forwardRef(({className:d,stats:t,columns:s=4,...n},c)=>l.jsx("dl",{ref:c,className:a.cn("grid grid-cols-1 gap-y-10",r.gridCols[s],r.gridDivider[s],d),...n,children:t.map(e=>l.jsxs("div",{className:"flex flex-col items-center gap-2.5 border-border text-center sm:px-6",children:[l.jsxs("dd",{className:a.cn(r.valueBase,"text-4xl sm:text-5xl",e.accent?"text-primary":void 0),children:[e.value,e.suffix?l.jsx("span",{className:r.suffixBase,children:e.suffix}):null]}),l.jsx("dt",{className:"text-sm leading-5 text-muted-foreground",children:e.label}),typeof e.delta=="number"?l.jsx(r.DeltaMark,{delta:e.delta,className:"mt-0.5"}):null,e.sub?l.jsx("p",{className:"mt-1 max-w-[22ch] text-[13px] leading-5 text-muted-foreground",children:e.sub}):null]},e.label))}));i.displayName="StatsHairline";exports.StatsHairline=i;
|
|
2
2
|
//# sourceMappingURL=Hairline.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hairline.cjs","sources":["../../../../../src/components/Stats/variants/Hairline.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface HairlineProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\nexport const StatsHairline = forwardRef<HTMLDListElement, HairlineProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl
|
|
1
|
+
{"version":3,"file":"Hairline.cjs","sources":["../../../../../src/components/Stats/variants/Hairline.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols, gridDivider, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface HairlineProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\n/** hairline — centered numerals in a symmetric run, divided by true vertical hairlines. */\nexport const StatsHairline = forwardRef<HTMLDListElement, HairlineProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl\n ref={ref}\n className={cn(\"grid grid-cols-1 gap-y-10\", gridCols[columns], gridDivider[columns], className)}\n {...props}\n >\n {stats.map((stat) => (\n <div\n key={stat.label}\n className=\"flex flex-col items-center gap-2.5 border-border text-center sm:px-6\"\n >\n <dd\n className={cn(\n valueBase,\n \"text-4xl sm:text-5xl\",\n stat.accent ? \"text-primary\" : undefined,\n )}\n >\n {stat.value}\n {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n </dd>\n <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n {typeof stat.delta === \"number\" ? (\n <DeltaMark delta={stat.delta} className=\"mt-0.5\" />\n ) : null}\n {stat.sub ? (\n <p className=\"mt-1 max-w-[22ch] text-[13px] leading-5 text-muted-foreground\">\n {stat.sub}\n </p>\n ) : null}\n </div>\n ))}\n </dl>\n ),\n);\nStatsHairline.displayName = \"StatsHairline\";\n"],"names":["StatsHairline","forwardRef","className","stats","columns","props","ref","jsx","cn","gridCols","gridDivider","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":"qMAWaA,EAAgBC,EAAAA,WAC3B,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAU,EAAG,GAAGC,CAAA,EAASC,IAC5CC,EAAAA,IAAC,KAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,4BAA6BC,EAAAA,SAASL,CAAO,EAAGM,EAAAA,YAAYN,CAAO,EAAGF,CAAS,EAC5F,GAAGG,EAEH,SAAAF,EAAM,IAAKQ,GACVC,EAAAA,KAAC,MAAA,CAEC,UAAU,uEAEV,SAAA,CAAAA,EAAAA,KAAC,KAAA,CACC,UAAWJ,EAAAA,GACTK,EAAAA,UACA,uBACAF,EAAK,OAAS,eAAiB,MAAA,EAGhC,SAAA,CAAAA,EAAK,MACLA,EAAK,OAASJ,MAAC,OAAA,CAAK,UAAWO,EAAAA,WAAa,SAAAH,EAAK,OAAO,EAAU,IAAA,CAAA,CAAA,EAErEJ,EAAAA,IAAC,KAAA,CAAG,UAAU,0CAA2C,WAAK,MAAM,EACnE,OAAOI,EAAK,OAAU,SACrBJ,EAAAA,IAACQ,EAAAA,UAAA,CAAU,MAAOJ,EAAK,MAAO,UAAU,QAAA,CAAS,EAC/C,KACHA,EAAK,IACJJ,MAAC,IAAA,CAAE,UAAU,gEACV,SAAAI,EAAK,IACR,EACE,IAAA,CAAA,EArBCA,EAAK,KAAA,CAuBb,CAAA,CAAA,CAGP,EACAX,EAAc,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),r=require("../../../utils/cn.cjs"),s=require("../parts.cjs"),i=n.forwardRef(({className:a,stats:d,...c},x)=>l.jsx("dl",{ref:x,className:r.cn("flex flex-col divide-y divide-border border-y border-border sm:flex-row sm:divide-x sm:divide-y-0",a),...c,children:d.map(e=>l.jsxs("div",{className:"flex min-w-0 flex-1 flex-col gap-2.5 py-5 sm:px-6 sm:first:pl-0 sm:last:pr-0",children:[l.jsx("dt",{className:"text-sm leading-5 text-muted-foreground",children:e.label}),l.jsxs("div",{className:"flex flex-wrap items-baseline gap-x-3 gap-y-1",children:[l.jsxs("dd",{className:r.cn(s.valueBase,"text-3xl",e.accent?"text-primary":void 0),children:[e.value,e.suffix?l.jsx("span",{className:s.suffixBase,children:e.suffix}):null]}),typeof e.delta=="number"?l.jsx(s.DeltaMark,{delta:e.delta}):null]}),e.sub?l.jsx("p",{className:"max-w-[32ch] text-[13px] leading-5 text-muted-foreground",children:e.sub}):null]},e.label))}));i.displayName="StatsTicker";exports.StatsTicker=i;
|
|
2
2
|
//# sourceMappingURL=Ticker.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ticker.cjs","sources":["../../../../../src/components/Stats/variants/Ticker.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase,
|
|
1
|
+
{"version":3,"file":"Ticker.cjs","sources":["../../../../../src/components/Stats/variants/Ticker.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface TickerProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n}\n\n/**\n * ticker — one horizontal readout band. Edge-to-edge top and bottom rules with\n * hairline dividers between entries; stacks into a ruled list on small screens.\n */\nexport const StatsTicker = forwardRef<HTMLDListElement, TickerProps>(\n ({ className, stats, ...props }, ref) => (\n <dl\n ref={ref}\n className={cn(\n \"flex flex-col divide-y divide-border border-y border-border sm:flex-row sm:divide-x sm:divide-y-0\",\n className,\n )}\n {...props}\n >\n {stats.map((stat) => (\n <div\n key={stat.label}\n className=\"flex min-w-0 flex-1 flex-col gap-2.5 py-5 sm:px-6 sm:first:pl-0 sm:last:pr-0\"\n >\n <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n <dd\n className={cn(\n valueBase,\n \"text-3xl\",\n stat.accent ? \"text-primary\" : undefined,\n )}\n >\n {stat.value}\n {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n </dd>\n {typeof stat.delta === \"number\" ? <DeltaMark delta={stat.delta} /> : null}\n </div>\n {stat.sub ? (\n <p className=\"max-w-[32ch] text-[13px] leading-5 text-muted-foreground\">{stat.sub}</p>\n ) : null}\n </div>\n ))}\n </dl>\n ),\n);\nStatsTicker.displayName = \"StatsTicker\";\n"],"names":["StatsTicker","forwardRef","className","stats","props","ref","jsx","cn","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":"qMAaaA,EAAcC,EAAAA,WACzB,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAA,EAASC,IAC/BC,EAAAA,IAAC,KAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,oGACAL,CAAA,EAED,GAAGE,EAEH,SAAAD,EAAM,IAAKK,GACVC,EAAAA,KAAC,MAAA,CAEC,UAAU,+EAEV,SAAA,CAAAH,EAAAA,IAAC,KAAA,CAAG,UAAU,0CAA2C,SAAAE,EAAK,MAAM,EACpEC,EAAAA,KAAC,MAAA,CAAI,UAAU,gDACb,SAAA,CAAAA,EAAAA,KAAC,KAAA,CACC,UAAWF,EAAAA,GACTG,EAAAA,UACA,WACAF,EAAK,OAAS,eAAiB,MAAA,EAGhC,SAAA,CAAAA,EAAK,MACLA,EAAK,OAASF,MAAC,OAAA,CAAK,UAAWK,EAAAA,WAAa,SAAAH,EAAK,OAAO,EAAU,IAAA,CAAA,CAAA,EAEpE,OAAOA,EAAK,OAAU,eAAYI,YAAA,CAAU,MAAOJ,EAAK,KAAA,CAAO,EAAK,IAAA,EACvE,EACCA,EAAK,IACJF,MAAC,IAAA,CAAE,UAAU,2DAA4D,SAAAE,EAAK,IAAI,EAChF,IAAA,CAAA,EAnBCA,EAAK,KAAA,CAqBb,CAAA,CAAA,CAGP,EACAR,EAAY,YAAc"}
|
|
@@ -1,32 +1,52 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { cn as
|
|
3
|
-
import { ArrowUp as
|
|
4
|
-
const
|
|
1
|
+
import { jsxs as t, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { cn as o } from "../../utils/cn.js";
|
|
3
|
+
import { ArrowUp as d, ArrowDown as s } from "../../icons.js";
|
|
4
|
+
const m = "font-display font-semibold leading-none tracking-[-0.03em] tabular-nums text-foreground", g = "ml-1.5 font-sans text-[0.42em] font-medium tracking-normal text-muted-foreground", h = {
|
|
5
5
|
2: "sm:grid-cols-2",
|
|
6
6
|
3: "sm:grid-cols-2 lg:grid-cols-3",
|
|
7
7
|
4: "sm:grid-cols-2 lg:grid-cols-4"
|
|
8
|
+
}, u = {
|
|
9
|
+
2: "sm:[&>*:nth-child(2n)]:border-l",
|
|
10
|
+
3: "sm:max-lg:[&>*:nth-child(2n)]:border-l lg:[&>*:nth-child(3n+2)]:border-l lg:[&>*:nth-child(3n)]:border-l",
|
|
11
|
+
4: "sm:max-lg:[&>*:nth-child(2n)]:border-l lg:[&>*:nth-child(4n+2)]:border-l lg:[&>*:nth-child(4n+3)]:border-l lg:[&>*:nth-child(4n)]:border-l"
|
|
8
12
|
};
|
|
9
|
-
function
|
|
10
|
-
const
|
|
11
|
-
return /* @__PURE__ */
|
|
13
|
+
function f({ delta: e, className: l }) {
|
|
14
|
+
const n = e > 0 ? "up" : e < 0 ? "down" : "flat";
|
|
15
|
+
return /* @__PURE__ */ t(
|
|
12
16
|
"span",
|
|
13
17
|
{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
18
|
+
"data-direction": n,
|
|
19
|
+
className: o(
|
|
20
|
+
"inline-flex items-center gap-1 text-[0.8125rem] font-semibold leading-none tabular-nums",
|
|
21
|
+
l
|
|
17
22
|
),
|
|
18
23
|
children: [
|
|
19
|
-
/* @__PURE__ */ r(
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
/* @__PURE__ */ r(
|
|
25
|
+
"span",
|
|
26
|
+
{
|
|
27
|
+
"aria-hidden": !0,
|
|
28
|
+
className: o(
|
|
29
|
+
"inline-flex",
|
|
30
|
+
n === "up" && "text-accent",
|
|
31
|
+
n === "down" && "text-danger",
|
|
32
|
+
n === "flat" && "text-muted-foreground"
|
|
33
|
+
),
|
|
34
|
+
children: n === "up" ? /* @__PURE__ */ r(d, { className: "h-3.5 w-3.5", strokeWidth: 2.25 }) : n === "down" ? /* @__PURE__ */ r(s, { className: "h-3.5 w-3.5", strokeWidth: 2.25 }) : /* @__PURE__ */ r("span", { className: "h-px w-2.5 bg-current" })
|
|
35
|
+
}
|
|
36
|
+
),
|
|
37
|
+
/* @__PURE__ */ t("span", { className: n === "flat" ? "text-muted-foreground" : "text-foreground", children: [
|
|
38
|
+
Math.abs(e),
|
|
39
|
+
"%"
|
|
40
|
+
] })
|
|
22
41
|
]
|
|
23
42
|
}
|
|
24
43
|
);
|
|
25
44
|
}
|
|
26
45
|
export {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
g as
|
|
46
|
+
f as DeltaMark,
|
|
47
|
+
h as gridCols,
|
|
48
|
+
u as gridDivider,
|
|
49
|
+
g as suffixBase,
|
|
50
|
+
m as valueBase
|
|
31
51
|
};
|
|
32
52
|
//# sourceMappingURL=parts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parts.js","sources":["../../../../src/components/Stats/parts.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {
|
|
1
|
+
{"version":3,"file":"parts.js","sources":["../../../../src/components/Stats/parts.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport { ArrowDown, ArrowUp } from \"../../icons\";\n\n/**\n * Shared Stats primitives.\n *\n * One voice across every layout: Space Grotesk numerals on a fixed baseline,\n * quiet sentence-case labels, hairline rules instead of card chrome, and a\n * typographic delta mark instead of a pill badge.\n */\n\nexport const valueBase =\n \"font-display font-semibold leading-none tracking-[-0.03em] tabular-nums text-foreground\";\n\n/** Unit scales with the numeral it sits beside, so it reads at every size. */\nexport const suffixBase =\n \"ml-1.5 font-sans text-[0.42em] font-medium tracking-normal text-muted-foreground\";\n\nexport const gridCols: Record<2 | 3 | 4, string> = {\n 2: \"sm:grid-cols-2\",\n 3: \"sm:grid-cols-2 lg:grid-cols-3\",\n 4: \"sm:grid-cols-2 lg:grid-cols-4\",\n};\n\n/**\n * Vertical hairlines between grid columns. Each breakpoint owns the columns it\n * actually draws (and `max-lg` removes the 2-up rule once 3/4-up takes over),\n * so wrapped rows never inherit a stray edge rule.\n */\nexport const gridDivider: Record<2 | 3 | 4, string> = {\n 2: \"sm:[&>*:nth-child(2n)]:border-l\",\n 3: \"sm:max-lg:[&>*:nth-child(2n)]:border-l lg:[&>*:nth-child(3n+2)]:border-l lg:[&>*:nth-child(3n)]:border-l\",\n 4: \"sm:max-lg:[&>*:nth-child(2n)]:border-l lg:[&>*:nth-child(4n+2)]:border-l lg:[&>*:nth-child(4n+3)]:border-l lg:[&>*:nth-child(4n)]:border-l\",\n};\n\n/**\n * delta — a change, set in type: a direction-colored arrow beside the signed\n * magnitude in high-contrast foreground. No background, no pill, no border.\n * Zero reads neutral.\n *\n * Direction lives on the arrow, not the figure: `--color-accent` is emerald-600\n * and only clears 3:1 as a graphic, so tinting 13px text with it would miss the\n * 4.5:1 text floor. Danger (4.8:1) could tint text, but the mark stays one\n * consistent treatment instead of two.\n */\nexport function DeltaMark({ delta, className }: { delta: number; className?: string }) {\n const direction = delta > 0 ? \"up\" : delta < 0 ? \"down\" : \"flat\";\n\n return (\n <span\n data-direction={direction}\n className={cn(\n \"inline-flex items-center gap-1 text-[0.8125rem] font-semibold leading-none tabular-nums\",\n className,\n )}\n >\n <span\n aria-hidden\n className={cn(\n \"inline-flex\",\n direction === \"up\" && \"text-accent\",\n direction === \"down\" && \"text-danger\",\n direction === \"flat\" && \"text-muted-foreground\",\n )}\n >\n {direction === \"up\" ? (\n <ArrowUp className=\"h-3.5 w-3.5\" strokeWidth={2.25} />\n ) : direction === \"down\" ? (\n <ArrowDown className=\"h-3.5 w-3.5\" strokeWidth={2.25} />\n ) : (\n <span className=\"h-px w-2.5 bg-current\" />\n )}\n </span>\n <span className={direction === \"flat\" ? \"text-muted-foreground\" : \"text-foreground\"}>\n {Math.abs(delta)}%\n </span>\n </span>\n );\n}\n"],"names":["valueBase","suffixBase","gridCols","gridDivider","DeltaMark","delta","className","direction","jsxs","cn","jsx","ArrowUp","ArrowDown"],"mappings":";;;AAWO,MAAMA,IACX,2FAGWC,IACX,oFAEWC,IAAsC;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL,GAOaC,IAAyC;AAAA,EACpD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAYO,SAASC,EAAU,EAAE,OAAAC,GAAO,WAAAC,KAAoD;AACrF,QAAMC,IAAYF,IAAQ,IAAI,OAAOA,IAAQ,IAAI,SAAS;AAE1D,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBD;AAAA,MAChB,WAAWE;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAWD;AAAA,cACT;AAAA,cACAF,MAAc,QAAQ;AAAA,cACtBA,MAAc,UAAU;AAAA,cACxBA,MAAc,UAAU;AAAA,YAAA;AAAA,YAGzB,UAAAA,MAAc,OACb,gBAAAG,EAACC,GAAA,EAAQ,WAAU,eAAc,aAAa,MAAM,IAClDJ,MAAc,SAChB,gBAAAG,EAACE,GAAA,EAAU,WAAU,eAAc,aAAa,MAAM,IAEtD,gBAAAF,EAAC,QAAA,EAAK,WAAU,wBAAA,CAAwB;AAAA,UAAA;AAAA,QAAA;AAAA,0BAG3C,QAAA,EAAK,WAAWH,MAAc,SAAS,0BAA0B,mBAC/D,UAAA;AAAA,UAAA,KAAK,IAAIF,CAAK;AAAA,UAAE;AAAA,QAAA,EAAA,CACnB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,25 +1,53 @@
|
|
|
1
1
|
import { jsx as l, jsxs as r } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as m } from "react";
|
|
3
|
-
import { cn as
|
|
4
|
-
import { suffixBase as
|
|
3
|
+
import { cn as d } from "../../../utils/cn.js";
|
|
4
|
+
import { suffixBase as c, valueBase as f, DeltaMark as u, gridCols as p } from "../parts.js";
|
|
5
5
|
const x = m(
|
|
6
|
-
({ className: i, stats:
|
|
7
|
-
"
|
|
6
|
+
({ className: i, stats: a, columns: n = 4, ...s }, o) => /* @__PURE__ */ l(
|
|
7
|
+
"dl",
|
|
8
8
|
{
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
9
|
+
ref: o,
|
|
10
|
+
className: d(
|
|
11
|
+
"grid grid-cols-1 gap-px overflow-hidden rounded-xl border border-border bg-border",
|
|
12
|
+
p[n],
|
|
13
|
+
i
|
|
14
|
+
),
|
|
15
|
+
...s,
|
|
16
|
+
children: a.map((e) => /* @__PURE__ */ r(
|
|
17
|
+
"div",
|
|
18
|
+
{
|
|
19
|
+
className: "flex min-h-[8rem] flex-col justify-between gap-8 bg-surface p-5 sm:p-6",
|
|
20
|
+
children: [
|
|
21
|
+
/* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-3", children: [
|
|
22
|
+
/* @__PURE__ */ l("dt", { className: "text-sm leading-5 text-muted-foreground", children: e.label }),
|
|
23
|
+
e.icon ? /* @__PURE__ */ l("span", { className: "shrink-0 text-foreground/45", children: e.icon }) : null
|
|
24
|
+
] }),
|
|
25
|
+
/* @__PURE__ */ r("div", { children: [
|
|
26
|
+
/* @__PURE__ */ r(
|
|
27
|
+
"dd",
|
|
28
|
+
{
|
|
29
|
+
className: d(
|
|
30
|
+
f,
|
|
31
|
+
"text-4xl",
|
|
32
|
+
e.accent ? "text-primary" : void 0
|
|
33
|
+
),
|
|
34
|
+
children: [
|
|
35
|
+
e.value,
|
|
36
|
+
e.suffix ? /* @__PURE__ */ l("span", { className: c, children: e.suffix }) : null
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
),
|
|
40
|
+
typeof e.delta == "number" || e.sub ? /* @__PURE__ */ r("div", { className: "mt-3 flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [
|
|
41
|
+
typeof e.delta == "number" ? /* @__PURE__ */ l(u, { delta: e.delta }) : null,
|
|
42
|
+
e.sub ? /* @__PURE__ */ l("p", { className: "text-[13px] leading-5 text-muted-foreground", children: e.sub }) : null
|
|
43
|
+
] }) : null
|
|
44
|
+
] })
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
e.label
|
|
48
|
+
))
|
|
49
|
+
}
|
|
50
|
+
)
|
|
23
51
|
);
|
|
24
52
|
x.displayName = "StatsCells";
|
|
25
53
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cells.js","sources":["../../../../../src/components/Stats/variants/Cells.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface CellsProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\nexport const StatsCells = forwardRef<HTMLDListElement, CellsProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl
|
|
1
|
+
{"version":3,"file":"Cells.js","sources":["../../../../../src/components/Stats/variants/Cells.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface CellsProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\n/**\n * cells — one framed spec matrix. Cells are divided by real hairlines (the grid\n * gaps show the shared border color), so the group reads as a single panel\n * instead of a row of detached cards.\n */\nexport const StatsCells = forwardRef<HTMLDListElement, CellsProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl\n ref={ref}\n className={cn(\n \"grid grid-cols-1 gap-px overflow-hidden rounded-xl border border-border bg-border\",\n gridCols[columns],\n className,\n )}\n {...props}\n >\n {stats.map((stat) => (\n <div\n key={stat.label}\n className=\"flex min-h-[8rem] flex-col justify-between gap-8 bg-surface p-5 sm:p-6\"\n >\n <div className=\"flex items-start justify-between gap-3\">\n <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n {stat.icon ? <span className=\"shrink-0 text-foreground/45\">{stat.icon}</span> : null}\n </div>\n <div>\n <dd\n className={cn(\n valueBase,\n \"text-4xl\",\n stat.accent ? \"text-primary\" : undefined,\n )}\n >\n {stat.value}\n {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n </dd>\n {typeof stat.delta === \"number\" || stat.sub ? (\n <div className=\"mt-3 flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n {typeof stat.delta === \"number\" ? <DeltaMark delta={stat.delta} /> : null}\n {stat.sub ? (\n <p className=\"text-[13px] leading-5 text-muted-foreground\">{stat.sub}</p>\n ) : null}\n </div>\n ) : null}\n </div>\n </div>\n ))}\n </dl>\n ),\n);\nStatsCells.displayName = \"StatsCells\";\n"],"names":["StatsCells","forwardRef","className","stats","columns","props","ref","jsx","cn","gridCols","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":";;;;AAeO,MAAMA,IAAaC;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,IAAU,GAAG,GAAGC,EAAA,GAASC,MAC5C,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAC,EAASL,CAAO;AAAA,QAChBF;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MAEH,UAAAF,EAAM,IAAI,CAACO,MACV,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,cAAA,gBAAAJ,EAAC,MAAA,EAAG,WAAU,2CAA2C,UAAAG,EAAK,OAAM;AAAA,cACnEA,EAAK,OAAO,gBAAAH,EAAC,QAAA,EAAK,WAAU,+BAA+B,UAAAG,EAAK,MAAK,IAAU;AAAA,YAAA,GAClF;AAAA,8BACC,OAAA,EACC,UAAA;AAAA,cAAA,gBAAAC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACTI;AAAA,oBACA;AAAA,oBACAF,EAAK,SAAS,iBAAiB;AAAA,kBAAA;AAAA,kBAGhC,UAAA;AAAA,oBAAAA,EAAK;AAAA,oBACLA,EAAK,SAAS,gBAAAH,EAAC,QAAA,EAAK,WAAWM,GAAa,UAAAH,EAAK,QAAO,IAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEpE,OAAOA,EAAK,SAAU,YAAYA,EAAK,MACtC,gBAAAC,EAAC,OAAA,EAAI,WAAU,sDACZ,UAAA;AAAA,gBAAA,OAAOD,EAAK,SAAU,WAAW,gBAAAH,EAACO,KAAU,OAAOJ,EAAK,OAAO,IAAK;AAAA,gBACpEA,EAAK,MACJ,gBAAAH,EAAC,KAAA,EAAE,WAAU,+CAA+C,UAAAG,EAAK,KAAI,IACnE;AAAA,cAAA,EAAA,CACN,IACE;AAAA,YAAA,EAAA,CACN;AAAA,UAAA;AAAA,QAAA;AAAA,QA1BKA,EAAK;AAAA,MAAA,CA4Bb;AAAA,IAAA;AAAA,EAAA;AAGP;AACAV,EAAW,cAAc;"}
|
|
@@ -1,32 +1,40 @@
|
|
|
1
1
|
import { jsx as l, jsxs as r } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
2
|
+
import { forwardRef as n } from "react";
|
|
3
3
|
import { cn as a } from "../../../utils/cn.js";
|
|
4
|
-
import {
|
|
5
|
-
const
|
|
6
|
-
({ className: d, stats: i, columns:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
4
|
+
import { suffixBase as t, valueBase as x, DeltaMark as c, gridCols as p } from "../parts.js";
|
|
5
|
+
const f = n(
|
|
6
|
+
({ className: d, stats: i, columns: m = 4, ...o }, s) => /* @__PURE__ */ l(
|
|
7
|
+
"dl",
|
|
8
|
+
{
|
|
9
|
+
ref: s,
|
|
10
|
+
className: a("grid grid-cols-1 gap-x-10 gap-y-10", p[m], d),
|
|
11
|
+
...o,
|
|
12
|
+
children: i.map((e) => /* @__PURE__ */ r("div", { className: "border-t border-border pt-5", children: [
|
|
13
|
+
/* @__PURE__ */ l("dt", { className: "text-sm leading-5 text-muted-foreground", children: e.label }),
|
|
14
|
+
/* @__PURE__ */ r(
|
|
15
|
+
"dd",
|
|
16
|
+
{
|
|
17
|
+
className: a(
|
|
18
|
+
x,
|
|
19
|
+
"mt-3 text-5xl sm:text-6xl",
|
|
20
|
+
e.accent ? "text-primary" : void 0
|
|
21
|
+
),
|
|
22
|
+
children: [
|
|
23
|
+
e.value,
|
|
24
|
+
e.suffix ? /* @__PURE__ */ l("span", { className: t, children: e.suffix }) : null
|
|
25
|
+
]
|
|
26
|
+
}
|
|
18
27
|
),
|
|
19
|
-
children: [
|
|
20
|
-
e.
|
|
21
|
-
e.
|
|
22
|
-
]
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
] }, e.label)) })
|
|
28
|
+
typeof e.delta == "number" || e.sub ? /* @__PURE__ */ r("div", { className: "mt-4 flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [
|
|
29
|
+
typeof e.delta == "number" ? /* @__PURE__ */ l(c, { delta: e.delta }) : null,
|
|
30
|
+
e.sub ? /* @__PURE__ */ l("p", { className: "text-[13px] leading-5 text-muted-foreground", children: e.sub }) : null
|
|
31
|
+
] }) : null
|
|
32
|
+
] }, e.label))
|
|
33
|
+
}
|
|
34
|
+
)
|
|
27
35
|
);
|
|
28
|
-
|
|
36
|
+
f.displayName = "StatsEditorial";
|
|
29
37
|
export {
|
|
30
|
-
|
|
38
|
+
f as StatsEditorial
|
|
31
39
|
};
|
|
32
40
|
//# sourceMappingURL=Editorial.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editorial.js","sources":["../../../../../src/components/Stats/variants/Editorial.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols,
|
|
1
|
+
{"version":3,"file":"Editorial.js","sources":["../../../../../src/components/Stats/variants/Editorial.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface EditorialProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\n/** editorial — a ruled ledger: label on the rule, oversized numeral, typed meta. */\nexport const StatsEditorial = forwardRef<HTMLDListElement, EditorialProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl\n ref={ref}\n className={cn(\"grid grid-cols-1 gap-x-10 gap-y-10\", gridCols[columns], className)}\n {...props}\n >\n {stats.map((stat) => (\n <div key={stat.label} className=\"border-t border-border pt-5\">\n <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n <dd\n className={cn(\n valueBase,\n \"mt-3 text-5xl sm:text-6xl\",\n stat.accent ? \"text-primary\" : undefined,\n )}\n >\n {stat.value}\n {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n </dd>\n {typeof stat.delta === \"number\" || stat.sub ? (\n <div className=\"mt-4 flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n {typeof stat.delta === \"number\" ? <DeltaMark delta={stat.delta} /> : null}\n {stat.sub ? (\n <p className=\"text-[13px] leading-5 text-muted-foreground\">{stat.sub}</p>\n ) : null}\n </div>\n ) : null}\n </div>\n ))}\n </dl>\n ),\n);\nStatsEditorial.displayName = \"StatsEditorial\";\n"],"names":["StatsEditorial","forwardRef","className","stats","columns","props","ref","jsx","cn","gridCols","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":";;;;AAWO,MAAMA,IAAiBC;AAAA,EAC5B,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,IAAU,GAAG,GAAGC,EAAA,GAASC,MAC5C,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAG,sCAAsCC,EAASL,CAAO,GAAGF,CAAS;AAAA,MAC/E,GAAGG;AAAA,MAEH,YAAM,IAAI,CAACK,MACV,gBAAAC,EAAC,OAAA,EAAqB,WAAU,+BAC9B,UAAA;AAAA,QAAA,gBAAAJ,EAAC,MAAA,EAAG,WAAU,2CAA2C,UAAAG,EAAK,OAAM;AAAA,QACpE,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWH;AAAA,cACTI;AAAA,cACA;AAAA,cACAF,EAAK,SAAS,iBAAiB;AAAA,YAAA;AAAA,YAGhC,UAAA;AAAA,cAAAA,EAAK;AAAA,cACLA,EAAK,SAAS,gBAAAH,EAAC,QAAA,EAAK,WAAWM,GAAa,UAAAH,EAAK,QAAO,IAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpE,OAAOA,EAAK,SAAU,YAAYA,EAAK,MACtC,gBAAAC,EAAC,OAAA,EAAI,WAAU,sDACZ,UAAA;AAAA,UAAA,OAAOD,EAAK,SAAU,WAAW,gBAAAH,EAACO,KAAU,OAAOJ,EAAK,OAAO,IAAK;AAAA,UACpEA,EAAK,MACJ,gBAAAH,EAAC,KAAA,EAAE,WAAU,+CAA+C,UAAAG,EAAK,KAAI,IACnE;AAAA,QAAA,EAAA,CACN,IACE;AAAA,MAAA,EAAA,GAnBIA,EAAK,KAoBf,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;AACAV,EAAe,cAAc;"}
|
|
@@ -1,25 +1,45 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { cn as
|
|
4
|
-
import { suffixBase as n, valueBase as f, gridCols as
|
|
5
|
-
const
|
|
6
|
-
({ className:
|
|
7
|
-
"
|
|
1
|
+
import { jsx as l, jsxs as a } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as c } from "react";
|
|
3
|
+
import { cn as d } from "../../../utils/cn.js";
|
|
4
|
+
import { suffixBase as n, valueBase as o, DeltaMark as x, gridDivider as f, gridCols as p } from "../parts.js";
|
|
5
|
+
const u = c(
|
|
6
|
+
({ className: i, stats: m, columns: r = 4, ...s }, t) => /* @__PURE__ */ l(
|
|
7
|
+
"dl",
|
|
8
8
|
{
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
9
|
+
ref: t,
|
|
10
|
+
className: d("grid grid-cols-1 gap-y-10", p[r], f[r], i),
|
|
11
|
+
...s,
|
|
12
|
+
children: m.map((e) => /* @__PURE__ */ a(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
className: "flex flex-col items-center gap-2.5 border-border text-center sm:px-6",
|
|
16
|
+
children: [
|
|
17
|
+
/* @__PURE__ */ a(
|
|
18
|
+
"dd",
|
|
19
|
+
{
|
|
20
|
+
className: d(
|
|
21
|
+
o,
|
|
22
|
+
"text-4xl sm:text-5xl",
|
|
23
|
+
e.accent ? "text-primary" : void 0
|
|
24
|
+
),
|
|
25
|
+
children: [
|
|
26
|
+
e.value,
|
|
27
|
+
e.suffix ? /* @__PURE__ */ l("span", { className: n, children: e.suffix }) : null
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
),
|
|
31
|
+
/* @__PURE__ */ l("dt", { className: "text-sm leading-5 text-muted-foreground", children: e.label }),
|
|
32
|
+
typeof e.delta == "number" ? /* @__PURE__ */ l(x, { delta: e.delta, className: "mt-0.5" }) : null,
|
|
33
|
+
e.sub ? /* @__PURE__ */ l("p", { className: "mt-1 max-w-[22ch] text-[13px] leading-5 text-muted-foreground", children: e.sub }) : null
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
e.label
|
|
37
|
+
))
|
|
38
|
+
}
|
|
39
|
+
)
|
|
20
40
|
);
|
|
21
|
-
|
|
41
|
+
u.displayName = "StatsHairline";
|
|
22
42
|
export {
|
|
23
|
-
|
|
43
|
+
u as StatsHairline
|
|
24
44
|
};
|
|
25
45
|
//# sourceMappingURL=Hairline.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hairline.js","sources":["../../../../../src/components/Stats/variants/Hairline.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface HairlineProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\nexport const StatsHairline = forwardRef<HTMLDListElement, HairlineProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl
|
|
1
|
+
{"version":3,"file":"Hairline.js","sources":["../../../../../src/components/Stats/variants/Hairline.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols, gridDivider, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface HairlineProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n columns?: 2 | 3 | 4;\n}\n\n/** hairline — centered numerals in a symmetric run, divided by true vertical hairlines. */\nexport const StatsHairline = forwardRef<HTMLDListElement, HairlineProps>(\n ({ className, stats, columns = 4, ...props }, ref) => (\n <dl\n ref={ref}\n className={cn(\"grid grid-cols-1 gap-y-10\", gridCols[columns], gridDivider[columns], className)}\n {...props}\n >\n {stats.map((stat) => (\n <div\n key={stat.label}\n className=\"flex flex-col items-center gap-2.5 border-border text-center sm:px-6\"\n >\n <dd\n className={cn(\n valueBase,\n \"text-4xl sm:text-5xl\",\n stat.accent ? \"text-primary\" : undefined,\n )}\n >\n {stat.value}\n {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n </dd>\n <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n {typeof stat.delta === \"number\" ? (\n <DeltaMark delta={stat.delta} className=\"mt-0.5\" />\n ) : null}\n {stat.sub ? (\n <p className=\"mt-1 max-w-[22ch] text-[13px] leading-5 text-muted-foreground\">\n {stat.sub}\n </p>\n ) : null}\n </div>\n ))}\n </dl>\n ),\n);\nStatsHairline.displayName = \"StatsHairline\";\n"],"names":["StatsHairline","forwardRef","className","stats","columns","props","ref","jsx","cn","gridCols","gridDivider","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":";;;;AAWO,MAAMA,IAAgBC;AAAA,EAC3B,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,IAAU,GAAG,GAAGC,EAAA,GAASC,MAC5C,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAG,6BAA6BC,EAASL,CAAO,GAAGM,EAAYN,CAAO,GAAGF,CAAS;AAAA,MAC5F,GAAGG;AAAA,MAEH,UAAAF,EAAM,IAAI,CAACQ,MACV,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWJ;AAAA,kBACTK;AAAA,kBACA;AAAA,kBACAF,EAAK,SAAS,iBAAiB;AAAA,gBAAA;AAAA,gBAGhC,UAAA;AAAA,kBAAAA,EAAK;AAAA,kBACLA,EAAK,SAAS,gBAAAJ,EAAC,QAAA,EAAK,WAAWO,GAAa,UAAAH,EAAK,QAAO,IAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAErE,gBAAAJ,EAAC,MAAA,EAAG,WAAU,2CAA2C,YAAK,OAAM;AAAA,YACnE,OAAOI,EAAK,SAAU,WACrB,gBAAAJ,EAACQ,GAAA,EAAU,OAAOJ,EAAK,OAAO,WAAU,SAAA,CAAS,IAC/C;AAAA,YACHA,EAAK,MACJ,gBAAAJ,EAAC,KAAA,EAAE,WAAU,iEACV,UAAAI,EAAK,KACR,IACE;AAAA,UAAA;AAAA,QAAA;AAAA,QArBCA,EAAK;AAAA,MAAA,CAuBb;AAAA,IAAA;AAAA,EAAA;AAGP;AACAX,EAAc,cAAc;"}
|
|
@@ -1,29 +1,50 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
1
|
+
import { jsx as l, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as x } from "react";
|
|
3
3
|
import { cn as d } from "../../../utils/cn.js";
|
|
4
|
-
import {
|
|
5
|
-
const
|
|
6
|
-
({ className:
|
|
7
|
-
"
|
|
4
|
+
import { suffixBase as f, valueBase as o, DeltaMark as c } from "../parts.js";
|
|
5
|
+
const n = x(
|
|
6
|
+
({ className: i, stats: a, ...m }, s) => /* @__PURE__ */ l(
|
|
7
|
+
"dl",
|
|
8
8
|
{
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
9
|
+
ref: s,
|
|
10
|
+
className: d(
|
|
11
|
+
"flex flex-col divide-y divide-border border-y border-border sm:flex-row sm:divide-x sm:divide-y-0",
|
|
12
|
+
i
|
|
13
|
+
),
|
|
14
|
+
...m,
|
|
15
|
+
children: a.map((e) => /* @__PURE__ */ r(
|
|
16
|
+
"div",
|
|
17
|
+
{
|
|
18
|
+
className: "flex min-w-0 flex-1 flex-col gap-2.5 py-5 sm:px-6 sm:first:pl-0 sm:last:pr-0",
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ l("dt", { className: "text-sm leading-5 text-muted-foreground", children: e.label }),
|
|
21
|
+
/* @__PURE__ */ r("div", { className: "flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [
|
|
22
|
+
/* @__PURE__ */ r(
|
|
23
|
+
"dd",
|
|
24
|
+
{
|
|
25
|
+
className: d(
|
|
26
|
+
o,
|
|
27
|
+
"text-3xl",
|
|
28
|
+
e.accent ? "text-primary" : void 0
|
|
29
|
+
),
|
|
30
|
+
children: [
|
|
31
|
+
e.value,
|
|
32
|
+
e.suffix ? /* @__PURE__ */ l("span", { className: f, children: e.suffix }) : null
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
typeof e.delta == "number" ? /* @__PURE__ */ l(c, { delta: e.delta }) : null
|
|
37
|
+
] }),
|
|
38
|
+
e.sub ? /* @__PURE__ */ l("p", { className: "max-w-[32ch] text-[13px] leading-5 text-muted-foreground", children: e.sub }) : null
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
e.label
|
|
42
|
+
))
|
|
43
|
+
}
|
|
44
|
+
)
|
|
24
45
|
);
|
|
25
|
-
|
|
46
|
+
n.displayName = "StatsTicker";
|
|
26
47
|
export {
|
|
27
|
-
|
|
48
|
+
n as StatsTicker
|
|
28
49
|
};
|
|
29
50
|
//# sourceMappingURL=Ticker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ticker.js","sources":["../../../../../src/components/Stats/variants/Ticker.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase,
|
|
1
|
+
{"version":3,"file":"Ticker.js","sources":["../../../../../src/components/Stats/variants/Ticker.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface TickerProps extends HTMLAttributes<HTMLDListElement> {\n stats: Stat[];\n}\n\n/**\n * ticker — one horizontal readout band. Edge-to-edge top and bottom rules with\n * hairline dividers between entries; stacks into a ruled list on small screens.\n */\nexport const StatsTicker = forwardRef<HTMLDListElement, TickerProps>(\n ({ className, stats, ...props }, ref) => (\n <dl\n ref={ref}\n className={cn(\n \"flex flex-col divide-y divide-border border-y border-border sm:flex-row sm:divide-x sm:divide-y-0\",\n className,\n )}\n {...props}\n >\n {stats.map((stat) => (\n <div\n key={stat.label}\n className=\"flex min-w-0 flex-1 flex-col gap-2.5 py-5 sm:px-6 sm:first:pl-0 sm:last:pr-0\"\n >\n <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n <dd\n className={cn(\n valueBase,\n \"text-3xl\",\n stat.accent ? \"text-primary\" : undefined,\n )}\n >\n {stat.value}\n {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n </dd>\n {typeof stat.delta === \"number\" ? <DeltaMark delta={stat.delta} /> : null}\n </div>\n {stat.sub ? (\n <p className=\"max-w-[32ch] text-[13px] leading-5 text-muted-foreground\">{stat.sub}</p>\n ) : null}\n </div>\n ))}\n </dl>\n ),\n);\nStatsTicker.displayName = \"StatsTicker\";\n"],"names":["StatsTicker","forwardRef","className","stats","props","ref","jsx","cn","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":";;;;AAaO,MAAMA,IAAcC;AAAA,EACzB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAC/B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAAD,EAAM,IAAI,CAACK,MACV,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAH,EAAC,MAAA,EAAG,WAAU,2CAA2C,UAAAE,EAAK,OAAM;AAAA,YACpE,gBAAAC,EAAC,OAAA,EAAI,WAAU,iDACb,UAAA;AAAA,cAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWF;AAAA,oBACTG;AAAA,oBACA;AAAA,oBACAF,EAAK,SAAS,iBAAiB;AAAA,kBAAA;AAAA,kBAGhC,UAAA;AAAA,oBAAAA,EAAK;AAAA,oBACLA,EAAK,SAAS,gBAAAF,EAAC,QAAA,EAAK,WAAWK,GAAa,UAAAH,EAAK,QAAO,IAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEpE,OAAOA,EAAK,SAAU,6BAAYI,GAAA,EAAU,OAAOJ,EAAK,MAAA,CAAO,IAAK;AAAA,YAAA,GACvE;AAAA,YACCA,EAAK,MACJ,gBAAAF,EAAC,KAAA,EAAE,WAAU,4DAA4D,UAAAE,EAAK,KAAI,IAChF;AAAA,UAAA;AAAA,QAAA;AAAA,QAnBCA,EAAK;AAAA,MAAA,CAqBb;AAAA,IAAA;AAAA,EAAA;AAGP;AACAR,EAAY,cAAc;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -765,7 +765,7 @@ export declare interface Stat {
|
|
|
765
765
|
label: string;
|
|
766
766
|
/** Small unit rendered inline with the value, e.g. "ms" or "₺". */
|
|
767
767
|
suffix?: string;
|
|
768
|
-
/** Trend change in percent — renders
|
|
768
|
+
/** Trend change in percent — renders a directional delta mark. */
|
|
769
769
|
delta?: number;
|
|
770
770
|
/** Optional supporting copy. */
|
|
771
771
|
sub?: string;
|
package/dist/styles.css
CHANGED
|
@@ -1662,8 +1662,8 @@
|
|
|
1662
1662
|
.ml-0\.5 {
|
|
1663
1663
|
margin-left: calc(var(--spacing) * 0.5);
|
|
1664
1664
|
}
|
|
1665
|
-
.ml-1 {
|
|
1666
|
-
margin-left: var(--spacing);
|
|
1665
|
+
.ml-1\.5 {
|
|
1666
|
+
margin-left: calc(var(--spacing) * 1.5);
|
|
1667
1667
|
}
|
|
1668
1668
|
.ml-auto {
|
|
1669
1669
|
margin-left: auto;
|
|
@@ -1773,8 +1773,8 @@
|
|
|
1773
1773
|
.min-h-0 {
|
|
1774
1774
|
min-height: 0px;
|
|
1775
1775
|
}
|
|
1776
|
-
.min-h-\[
|
|
1777
|
-
min-height:
|
|
1776
|
+
.min-h-\[8rem\] {
|
|
1777
|
+
min-height: 8rem;
|
|
1778
1778
|
}
|
|
1779
1779
|
.w-1\.5 {
|
|
1780
1780
|
width: calc(var(--spacing) * 1.5);
|
|
@@ -1857,6 +1857,12 @@
|
|
|
1857
1857
|
.max-w-6xl {
|
|
1858
1858
|
max-width: var(--container-6xl);
|
|
1859
1859
|
}
|
|
1860
|
+
.max-w-\[22ch\] {
|
|
1861
|
+
max-width: 22ch;
|
|
1862
|
+
}
|
|
1863
|
+
.max-w-\[32ch\] {
|
|
1864
|
+
max-width: 32ch;
|
|
1865
|
+
}
|
|
1860
1866
|
.max-w-\[85\%\] {
|
|
1861
1867
|
max-width: 85%;
|
|
1862
1868
|
}
|
|
@@ -1887,9 +1893,6 @@
|
|
|
1887
1893
|
.min-w-\[10rem\] {
|
|
1888
1894
|
min-width: 10rem;
|
|
1889
1895
|
}
|
|
1890
|
-
.min-w-\[11rem\] {
|
|
1891
|
-
min-width: 11rem;
|
|
1892
|
-
}
|
|
1893
1896
|
.min-w-\[19rem\] {
|
|
1894
1897
|
min-width: 19rem;
|
|
1895
1898
|
}
|
|
@@ -1988,9 +1991,6 @@
|
|
|
1988
1991
|
.items-start {
|
|
1989
1992
|
align-items: flex-start;
|
|
1990
1993
|
}
|
|
1991
|
-
.items-stretch {
|
|
1992
|
-
align-items: stretch;
|
|
1993
|
-
}
|
|
1994
1994
|
.justify-between {
|
|
1995
1995
|
justify-content: space-between;
|
|
1996
1996
|
}
|
|
@@ -2057,6 +2057,9 @@
|
|
|
2057
2057
|
.gap-20 {
|
|
2058
2058
|
gap: calc(var(--spacing) * 20);
|
|
2059
2059
|
}
|
|
2060
|
+
.gap-px {
|
|
2061
|
+
gap: 1px;
|
|
2062
|
+
}
|
|
2060
2063
|
:where(.space-y-0\.5 > :not(:last-child)) {
|
|
2061
2064
|
--tw-space-y-reverse: 0;
|
|
2062
2065
|
margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
|
|
@@ -2072,6 +2075,9 @@
|
|
|
2072
2075
|
margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
|
|
2073
2076
|
margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
|
|
2074
2077
|
}
|
|
2078
|
+
.gap-x-3 {
|
|
2079
|
+
column-gap: calc(var(--spacing) * 3);
|
|
2080
|
+
}
|
|
2075
2081
|
.gap-x-8 {
|
|
2076
2082
|
column-gap: calc(var(--spacing) * 8);
|
|
2077
2083
|
}
|
|
@@ -2087,6 +2093,9 @@
|
|
|
2087
2093
|
.gap-x-16 {
|
|
2088
2094
|
column-gap: calc(var(--spacing) * 16);
|
|
2089
2095
|
}
|
|
2096
|
+
.gap-y-1 {
|
|
2097
|
+
row-gap: var(--spacing);
|
|
2098
|
+
}
|
|
2090
2099
|
.gap-y-2\.5 {
|
|
2091
2100
|
row-gap: calc(var(--spacing) * 2.5);
|
|
2092
2101
|
}
|
|
@@ -2177,6 +2186,10 @@
|
|
|
2177
2186
|
border-style: var(--tw-border-style);
|
|
2178
2187
|
border-width: 1.5px;
|
|
2179
2188
|
}
|
|
2189
|
+
.border-y {
|
|
2190
|
+
border-block-style: var(--tw-border-style);
|
|
2191
|
+
border-block-width: 1px;
|
|
2192
|
+
}
|
|
2180
2193
|
.border-t {
|
|
2181
2194
|
border-top-style: var(--tw-border-style);
|
|
2182
2195
|
border-top-width: 1px;
|
|
@@ -2185,10 +2198,6 @@
|
|
|
2185
2198
|
border-bottom-style: var(--tw-border-style);
|
|
2186
2199
|
border-bottom-width: 1px;
|
|
2187
2200
|
}
|
|
2188
|
-
.border-l {
|
|
2189
|
-
border-left-style: var(--tw-border-style);
|
|
2190
|
-
border-left-width: 1px;
|
|
2191
|
-
}
|
|
2192
2201
|
.border-accent\/40 {
|
|
2193
2202
|
border-color: color-mix(in srgb, rgb(rgb(var(--color-accent))) 40%, transparent);
|
|
2194
2203
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -2282,9 +2291,6 @@
|
|
|
2282
2291
|
.bg-current {
|
|
2283
2292
|
background-color: currentcolor;
|
|
2284
2293
|
}
|
|
2285
|
-
.bg-danger-soft {
|
|
2286
|
-
background-color: rgb(var(--color-danger-soft));
|
|
2287
|
-
}
|
|
2288
2294
|
.bg-foreground {
|
|
2289
2295
|
background-color: rgb(var(--color-foreground));
|
|
2290
2296
|
}
|
|
@@ -2609,6 +2615,12 @@
|
|
|
2609
2615
|
font-size: var(--text-xs);
|
|
2610
2616
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
2611
2617
|
}
|
|
2618
|
+
.text-\[0\.42em\] {
|
|
2619
|
+
font-size: 0.42em;
|
|
2620
|
+
}
|
|
2621
|
+
.text-\[0\.8125rem\] {
|
|
2622
|
+
font-size: 0.8125rem;
|
|
2623
|
+
}
|
|
2612
2624
|
.text-\[1\.05rem\] {
|
|
2613
2625
|
font-size: 1.05rem;
|
|
2614
2626
|
}
|
|
@@ -3364,6 +3376,19 @@
|
|
|
3364
3376
|
.sm\:gap-x-14 {
|
|
3365
3377
|
column-gap: calc(var(--spacing) * 14);
|
|
3366
3378
|
}
|
|
3379
|
+
:where(.sm\:divide-x > :not(:last-child)) {
|
|
3380
|
+
--tw-divide-x-reverse: 0;
|
|
3381
|
+
border-inline-style: var(--tw-border-style);
|
|
3382
|
+
border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
|
|
3383
|
+
border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
|
|
3384
|
+
}
|
|
3385
|
+
:where(.sm\:divide-y-0 > :not(:last-child)) {
|
|
3386
|
+
--tw-divide-y-reverse: 0;
|
|
3387
|
+
border-bottom-style: var(--tw-border-style);
|
|
3388
|
+
border-top-style: var(--tw-border-style);
|
|
3389
|
+
border-top-width: calc(0px * var(--tw-divide-y-reverse));
|
|
3390
|
+
border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
|
|
3391
|
+
}
|
|
3367
3392
|
.sm\:border-l {
|
|
3368
3393
|
border-left-style: var(--tw-border-style);
|
|
3369
3394
|
border-left-width: 1px;
|
|
@@ -3371,6 +3396,9 @@
|
|
|
3371
3396
|
.sm\:border-border {
|
|
3372
3397
|
border-color: rgb(var(--color-border));
|
|
3373
3398
|
}
|
|
3399
|
+
.sm\:p-6 {
|
|
3400
|
+
padding: calc(var(--spacing) * 6);
|
|
3401
|
+
}
|
|
3374
3402
|
.sm\:p-14 {
|
|
3375
3403
|
padding: calc(var(--spacing) * 14);
|
|
3376
3404
|
}
|
|
@@ -3459,6 +3487,12 @@
|
|
|
3459
3487
|
.sm\:text-\[15px\] {
|
|
3460
3488
|
font-size: 15px;
|
|
3461
3489
|
}
|
|
3490
|
+
.sm\:first\:pl-0:first-child {
|
|
3491
|
+
padding-left: 0px;
|
|
3492
|
+
}
|
|
3493
|
+
.sm\:last\:pr-0:last-child {
|
|
3494
|
+
padding-right: 0px;
|
|
3495
|
+
}
|
|
3462
3496
|
}
|
|
3463
3497
|
@media (width >= 48rem) {
|
|
3464
3498
|
.md\:block {
|
|
@@ -3585,6 +3619,40 @@
|
|
|
3585
3619
|
color: var(--color-emerald-400);
|
|
3586
3620
|
}
|
|
3587
3621
|
}
|
|
3622
|
+
@media (width >= 40rem) {
|
|
3623
|
+
.sm\:\[\&\>\*\:nth-child\(2n\)\]\:border-l > :nth-child(2n) {
|
|
3624
|
+
border-left-style: var(--tw-border-style);
|
|
3625
|
+
border-left-width: 1px;
|
|
3626
|
+
}
|
|
3627
|
+
@media (width < 64rem) {
|
|
3628
|
+
.sm\:max-lg\:\[\&\>\*\:nth-child\(2n\)\]\:border-l > :nth-child(2n) {
|
|
3629
|
+
border-left-style: var(--tw-border-style);
|
|
3630
|
+
border-left-width: 1px;
|
|
3631
|
+
}
|
|
3632
|
+
}
|
|
3633
|
+
}
|
|
3634
|
+
@media (width >= 64rem) {
|
|
3635
|
+
.lg\:\[\&\>\*\:nth-child\(3n\)\]\:border-l > :nth-child(3n) {
|
|
3636
|
+
border-left-style: var(--tw-border-style);
|
|
3637
|
+
border-left-width: 1px;
|
|
3638
|
+
}
|
|
3639
|
+
.lg\:\[\&\>\*\:nth-child\(3n\+2\)\]\:border-l > :nth-child(3n+2) {
|
|
3640
|
+
border-left-style: var(--tw-border-style);
|
|
3641
|
+
border-left-width: 1px;
|
|
3642
|
+
}
|
|
3643
|
+
.lg\:\[\&\>\*\:nth-child\(4n\)\]\:border-l > :nth-child(4n) {
|
|
3644
|
+
border-left-style: var(--tw-border-style);
|
|
3645
|
+
border-left-width: 1px;
|
|
3646
|
+
}
|
|
3647
|
+
.lg\:\[\&\>\*\:nth-child\(4n\+2\)\]\:border-l > :nth-child(4n+2) {
|
|
3648
|
+
border-left-style: var(--tw-border-style);
|
|
3649
|
+
border-left-width: 1px;
|
|
3650
|
+
}
|
|
3651
|
+
.lg\:\[\&\>\*\:nth-child\(4n\+3\)\]\:border-l > :nth-child(4n+3) {
|
|
3652
|
+
border-left-style: var(--tw-border-style);
|
|
3653
|
+
border-left-width: 1px;
|
|
3654
|
+
}
|
|
3655
|
+
}
|
|
3588
3656
|
}
|
|
3589
3657
|
@layer base {
|
|
3590
3658
|
:root {
|
|
@@ -3981,6 +4049,11 @@
|
|
|
3981
4049
|
syntax: "*";
|
|
3982
4050
|
inherits: false;
|
|
3983
4051
|
}
|
|
4052
|
+
@property --tw-divide-x-reverse {
|
|
4053
|
+
syntax: "*";
|
|
4054
|
+
inherits: false;
|
|
4055
|
+
initial-value: 0;
|
|
4056
|
+
}
|
|
3984
4057
|
@keyframes spin {
|
|
3985
4058
|
to {
|
|
3986
4059
|
transform: rotate(360deg);
|
|
@@ -4062,6 +4135,7 @@
|
|
|
4062
4135
|
--tw-backdrop-sepia: initial;
|
|
4063
4136
|
--tw-duration: initial;
|
|
4064
4137
|
--tw-ease: initial;
|
|
4138
|
+
--tw-divide-x-reverse: 0;
|
|
4065
4139
|
}
|
|
4066
4140
|
}
|
|
4067
4141
|
}
|