@openrails/contentkit-ui 0.97.0 → 0.97.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,49 +1,54 @@
1
1
  import { useMessages as e } from "../../i18n/context.js";
2
2
  import { ContentKitUiRoot as t } from "../../scope.js";
3
- import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../ui/select.js";
4
- import { popularQuery as s } from "../../client/discovery.js";
5
- import { ContentGrid as c } from "./grid.js";
6
- import { useMemo as l, useState as u } from "react";
7
- import { jsx as d, jsxs as f } from "react/jsx-runtime";
8
- import { cn as p } from "cn";
3
+ import { popularQuery as n } from "../../client/discovery.js";
4
+ import { Tabs as r, TabsContent as i, TabsList as a, TabsTrigger as o } from "../../ui/tabs.js";
5
+ import { ContentGrid as s } from "./grid.js";
6
+ import { useMemo as c, useState as l } from "react";
7
+ import { jsx as u, jsxs as d } from "react/jsx-runtime";
8
+ import { cn as f } from "cn";
9
9
  //#region src/components/content/popular.tsx
10
- var m = [
10
+ var p = [
11
11
  "7d",
12
12
  "90d",
13
13
  "365d",
14
14
  "all"
15
15
  ];
16
- function h({ query: h, period: g, onPeriodChange: _, locked: v, ...y }) {
17
- let b = e(), [x, S] = u("7d"), C = g ?? x, w = l(() => s(C, h), [C, h]), T = (e) => e === "all" ? b.t("listing.period_all") : b.plural("listing.pastDays", Number(e.slice(0, -1)));
18
- return /* @__PURE__ */ f(t, {
19
- appearance: y.appearance,
20
- className: p("grid gap-4 text-sm", y.className),
16
+ function m({ query: m, period: h, onPeriodChange: g, locked: _, ...v }) {
17
+ let y = e(), [b, x] = l("7d"), S = h ?? b, C = c(() => n(S, m), [S, m]), w = (e) => e === "all" ? y.t("listing.period_all") : y.plural("listing.pastDays", Number(e.slice(0, -1)));
18
+ return /* @__PURE__ */ u(t, {
19
+ appearance: v.appearance,
20
+ className: f("grid gap-4 text-sm", v.className),
21
21
  "data-ckui": "popular-grid",
22
- children: [/* @__PURE__ */ f(n, {
23
- value: C,
22
+ children: /* @__PURE__ */ d(r, {
23
+ value: S,
24
24
  onValueChange: (e) => {
25
- if (!e || !m.includes(e)) return;
25
+ if (!e || !p.includes(e)) return;
26
26
  let t = e;
27
- g === void 0 && S(t), _?.(t);
27
+ h === void 0 && x(t), g?.(t);
28
28
  },
29
- children: [/* @__PURE__ */ d(a, {
30
- className: "w-fit min-w-40",
31
- "aria-label": b.t("listing.popularPeriod"),
32
- children: /* @__PURE__ */ d(o, { children: T(C) })
33
- }), /* @__PURE__ */ d(r, { children: m.map((e) => /* @__PURE__ */ d(i, {
34
- value: e,
35
- children: T(e)
36
- }, e)) })]
37
- }), /* @__PURE__ */ d(c, {
38
- ...y,
39
- surface: y.surface ?? "popular",
40
- query: w,
41
- locked: v,
42
- infinite: !0
43
- })]
29
+ className: "gap-4",
30
+ children: [/* @__PURE__ */ u(a, {
31
+ "aria-label": y.t("listing.popularPeriod"),
32
+ className: "grid w-full grid-cols-4 group-data-horizontal/tabs:h-auto sm:w-fit",
33
+ children: p.map((e) => /* @__PURE__ */ u(o, {
34
+ value: e,
35
+ className: "min-h-10 whitespace-normal px-3 py-2 text-center",
36
+ children: w(e)
37
+ }, e))
38
+ }), /* @__PURE__ */ u(i, {
39
+ value: S,
40
+ children: /* @__PURE__ */ u(s, {
41
+ ...v,
42
+ surface: v.surface ?? "popular",
43
+ query: C,
44
+ locked: _,
45
+ infinite: !0
46
+ })
47
+ })]
48
+ })
44
49
  });
45
50
  }
46
51
  //#endregion
47
- export { h as PopularContentGrid };
52
+ export { m as PopularContentGrid };
48
53
 
49
54
  //# sourceMappingURL=popular.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"popular.js","names":[],"sources":["../../../src/components/content/popular.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useMemo, useState } from \"react\";\nimport { popularQuery, type PopularPeriod, type PopularQuery } from \"../../client/discovery.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { ContentGrid, type CardListProps, type LockedCards } from \"./grid.js\";\n\nexport interface PopularContentGridProps extends Omit<CardListProps, \"infinite\"> {\n query?: PopularQuery;\n /** Controlled period; otherwise the selector starts at 7d. */\n period?: PopularPeriod;\n onPeriodChange?: (period: PopularPeriod) => void;\n locked?: LockedCards;\n}\n\nconst PERIODS: readonly PopularPeriod[] = [\"7d\", \"90d\", \"365d\", \"all\"];\n\n/** A popularity listing with matched score/age windows and infinite paging. */\nexport function PopularContentGrid({ query, period, onPeriodChange, locked, ...p }: PopularContentGridProps) {\n const m = useMessages();\n const [ownPeriod, setOwnPeriod] = useState<PopularPeriod>(\"7d\");\n const current = period ?? ownPeriod;\n const list = useMemo(() => popularQuery(current, query), [current, query]);\n const label = (value: PopularPeriod) => value === \"all\" ? m.t(\"listing.period_all\") : m.plural(\"listing.pastDays\", Number(value.slice(0, -1)));\n return (\n <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"popular-grid\">\n <Select value={current} onValueChange={(value) => {\n if (!value || !PERIODS.includes(value as PopularPeriod)) return;\n const next = value as PopularPeriod;\n if (period === undefined) setOwnPeriod(next);\n onPeriodChange?.(next);\n }}>\n <SelectTrigger className=\"w-fit min-w-40\" aria-label={m.t(\"listing.popularPeriod\")}><SelectValue>{label(current)}</SelectValue></SelectTrigger>\n <SelectContent>{PERIODS.map((value) => <SelectItem key={value} value={value}>{label(value)}</SelectItem>)}</SelectContent>\n </Select>\n <ContentGrid {...p} surface={p.surface ?? \"popular\"} query={list} locked={locked} infinite />\n </ContentKitUiRoot>\n );\n}\n"],"mappings":";;;;;;;;;AAgBA,IAAM,IAAoC;CAAC;CAAM;CAAO;CAAQ;AAAK;AAGrE,SAAgB,EAAmB,EAAE,UAAO,WAAQ,mBAAgB,WAAQ,GAAG,KAA8B;CAC3G,IAAM,IAAI,EAAY,GAChB,CAAC,GAAW,KAAgB,EAAwB,IAAI,GACxD,IAAU,KAAU,GACpB,IAAO,QAAc,EAAa,GAAS,CAAK,GAAG,CAAC,GAAS,CAAK,CAAC,GACnE,KAAS,MAAyB,MAAU,QAAQ,EAAE,EAAE,oBAAoB,IAAI,EAAE,OAAO,oBAAoB,OAAO,EAAM,MAAM,GAAG,EAAE,CAAC,CAAC;CAC7I,OACE,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EAAxG,UAAA,CACE,kBAAC,GAAD;GAAQ,OAAO;GAAS,gBAAgB,MAAU;IAChD,IAAI,CAAC,KAAS,CAAC,EAAQ,SAAS,CAAsB,GAAG;IACzD,IAAM,IAAO;IAEb,AADI,MAAW,KAAA,KAAW,EAAa,CAAI,GAC3C,IAAiB,CAAI;GACvB;GALA,UAAA,CAME,kBAAC,GAAD;IAAe,WAAU;IAAiB,cAAY,EAAE,EAAE,uBAAuB;IAAG,UAAA,kBAAC,GAAD,EAAA,UAAc,EAAM,CAAO,EAAe,CAAA;GAAgB,CAAA,GAC9I,kBAAC,GAAD,EAAA,UAAgB,EAAQ,KAAK,MAAU,kBAAC,GAAD;IAA+B;IAAQ,UAAA,EAAM,CAAK;GAAc,GAA/C,CAA+C,CAAC,EAAiB,CAAA,CACnH;EACR,CAAA,GAAA,kBAAC,GAAD;GAAa,GAAI;GAAG,SAAS,EAAE,WAAW;GAAW,OAAO;GAAc;GAAQ,UAAA;EAAU,CAAA,CAC5E;;AAEtB"}
1
+ {"version":3,"file":"popular.js","names":[],"sources":["../../../src/components/content/popular.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useMemo, useState } from \"react\";\nimport { popularQuery, type PopularPeriod, type PopularQuery } from \"../../client/discovery.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"#ckui/ui/tabs\";\nimport { ContentGrid, type CardListProps, type LockedCards } from \"./grid.js\";\n\nexport interface PopularContentGridProps extends Omit<CardListProps, \"infinite\"> {\n query?: PopularQuery;\n /** Controlled period; otherwise the selector starts at 7d. */\n period?: PopularPeriod;\n onPeriodChange?: (period: PopularPeriod) => void;\n locked?: LockedCards;\n}\n\nconst PERIODS: readonly PopularPeriod[] = [\"7d\", \"90d\", \"365d\", \"all\"];\n\n/** A popularity listing with matched score/age windows and infinite paging. */\nexport function PopularContentGrid({ query, period, onPeriodChange, locked, ...p }: PopularContentGridProps) {\n const m = useMessages();\n const [ownPeriod, setOwnPeriod] = useState<PopularPeriod>(\"7d\");\n const current = period ?? ownPeriod;\n const list = useMemo(() => popularQuery(current, query), [current, query]);\n const label = (value: PopularPeriod) => value === \"all\" ? m.t(\"listing.period_all\") : m.plural(\"listing.pastDays\", Number(value.slice(0, -1)));\n return (\n <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"popular-grid\">\n <Tabs value={current} onValueChange={(value) => {\n if (!value || !PERIODS.includes(value as PopularPeriod)) return;\n const next = value as PopularPeriod;\n if (period === undefined) setOwnPeriod(next);\n onPeriodChange?.(next);\n }} className=\"gap-4\">\n <TabsList aria-label={m.t(\"listing.popularPeriod\")} className=\"grid w-full grid-cols-4 group-data-horizontal/tabs:h-auto sm:w-fit\">\n {PERIODS.map((value) => (\n <TabsTrigger key={value} value={value} className=\"min-h-10 whitespace-normal px-3 py-2 text-center\">\n {label(value)}\n </TabsTrigger>\n ))}\n </TabsList>\n <TabsContent value={current}>\n <ContentGrid {...p} surface={p.surface ?? \"popular\"} query={list} locked={locked} infinite />\n </TabsContent>\n </Tabs>\n </ContentKitUiRoot>\n );\n}\n"],"mappings":";;;;;;;;;AAgBA,IAAM,IAAoC;CAAC;CAAM;CAAO;CAAQ;AAAK;AAGrE,SAAgB,EAAmB,EAAE,UAAO,WAAQ,mBAAgB,WAAQ,GAAG,KAA8B;CAC3G,IAAM,IAAI,EAAY,GAChB,CAAC,GAAW,KAAgB,EAAwB,IAAI,GACxD,IAAU,KAAU,GACpB,IAAO,QAAc,EAAa,GAAS,CAAK,GAAG,CAAC,GAAS,CAAK,CAAC,GACnE,KAAS,MAAyB,MAAU,QAAQ,EAAE,EAAE,oBAAoB,IAAI,EAAE,OAAO,oBAAoB,OAAO,EAAM,MAAM,GAAG,EAAE,CAAC,CAAC;CAC7I,OACE,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EACtG,UAAA,kBAAC,GAAD;GAAM,OAAO;GAAS,gBAAgB,MAAU;IAC9C,IAAI,CAAC,KAAS,CAAC,EAAQ,SAAS,CAAsB,GAAG;IACzD,IAAM,IAAO;IAEb,AADI,MAAW,KAAA,KAAW,EAAa,CAAI,GAC3C,IAAiB,CAAI;GACvB;GAAG,WAAU;GALb,UAAA,CAME,kBAAC,GAAD;IAAU,cAAY,EAAE,EAAE,uBAAuB;IAAG,WAAU;IAC3D,UAAA,EAAQ,KAAK,MACZ,kBAAC,GAAD;KAAgC;KAAO,WAAU;KAC9C,UAAA,EAAM,CAAK;IACD,GAFK,CAEL,CACd;GACO,CAAA,GACV,kBAAC,GAAD;IAAa,OAAO;IAClB,UAAA,kBAAC,GAAD;KAAa,GAAI;KAAG,SAAS,EAAE,WAAW;KAAW,OAAO;KAAc;KAAQ,UAAA;IAAU,CAAA;GACjF,CAAA,CACT;;CACU,CAAA;AAEtB"}