@askrjs/themes 0.0.13 → 0.0.15
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 +3 -0
- package/THEMING.md +9 -0
- package/dist/components/_internal/pathname.js +13 -1
- package/dist/components/_internal/pathname.js.map +1 -1
- package/dist/components/_internal/style.js +34 -9
- package/dist/components/_internal/style.js.map +1 -1
- package/dist/components/card/card.js +2 -2
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/card/card.types.d.ts +4 -1
- package/dist/components/card/index.d.ts +2 -2
- package/dist/components/nav/nav.js +2 -1
- package/dist/components/nav/nav.js.map +1 -1
- package/dist/components.d.ts +2 -2
- package/dist/surfaces.d.ts +2 -2
- package/package.json +3 -3
- package/src/components/_internal/pathname.ts +11 -0
- package/src/components/_internal/style.ts +37 -12
- package/src/components/card/card.tsx +2 -2
- package/src/components/card/card.types.ts +3 -0
- package/src/components/card/index.ts +1 -0
- package/src/components/nav/nav.tsx +2 -1
- package/src/components/badge/badge.a11y.ts +0 -15
- package/src/components/block/block.a11y.ts +0 -11
- package/src/components/container/container.a11y.ts +0 -11
- package/src/components/header/header.a11y.ts +0 -11
- package/src/components/section/section.a11y.ts +0 -11
- package/src/components/separator/separator.a11y.ts +0 -15
- package/src/components/skeleton/skeleton.a11y.ts +0 -14
package/README.md
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
# @askrjs/themes
|
|
2
2
|
|
|
3
|
+
[](https://github.com/askrjs/askr-themes/actions/workflows/ci.yml)
|
|
4
|
+
[](https://www.npmjs.com/package/@askrjs/themes)
|
|
5
|
+
|
|
3
6
|
CSS tokens and a shadcn-style styled component catalog for Askr apps.
|
|
4
7
|
|
|
5
8
|
`@askrjs/themes` is the visual companion to `@askrjs/ui` and
|
package/THEMING.md
CHANGED
|
@@ -37,6 +37,15 @@ Style override:
|
|
|
37
37
|
}
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
+
Card titles default to `h3`. Choose `titleAs` from the surrounding document
|
|
41
|
+
hierarchy; use `h1` when the card title is the page title, or the next logical
|
|
42
|
+
level beneath an existing heading:
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
<CardTitle titleAs="h1">Sign in</CardTitle>
|
|
46
|
+
<CardTitle titleAs="h2">Live sessions</CardTitle>
|
|
47
|
+
```
|
|
48
|
+
|
|
40
49
|
Icon override:
|
|
41
50
|
|
|
42
51
|
```css
|
|
@@ -5,6 +5,18 @@ function normalizePathname(pathname) {
|
|
|
5
5
|
function getWindowLocation() {
|
|
6
6
|
return typeof window === "undefined" ? null : window.location;
|
|
7
7
|
}
|
|
8
|
+
function assertSafeNavigationHref(href) {
|
|
9
|
+
const trimmed = href.trim();
|
|
10
|
+
if (!trimmed || trimmed !== href) throw new TypeError("Navigation href must be a non-empty canonical URL.");
|
|
11
|
+
const scheme = /^([a-z][a-z\d+.-]*):/iu.exec(trimmed)?.[1]?.toLowerCase();
|
|
12
|
+
if (scheme && ![
|
|
13
|
+
"http",
|
|
14
|
+
"https",
|
|
15
|
+
"mailto",
|
|
16
|
+
"tel"
|
|
17
|
+
].includes(scheme)) throw new TypeError(`Navigation URL scheme is not allowed: ${scheme}`);
|
|
18
|
+
if ([...trimmed].some((character) => character.charCodeAt(0) <= 31)) throw new TypeError("Navigation href must not contain control characters.");
|
|
19
|
+
}
|
|
8
20
|
function resolvePathname(href) {
|
|
9
21
|
if (href.startsWith("#")) return null;
|
|
10
22
|
const location = getWindowLocation();
|
|
@@ -34,4 +46,4 @@ function resolvePathname(href) {
|
|
|
34
46
|
}
|
|
35
47
|
}
|
|
36
48
|
//#endregion
|
|
37
|
-
export { resolvePathname };
|
|
49
|
+
export { assertSafeNavigationHref, resolvePathname };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pathname.js","names":[],"sources":["../../../src/components/_internal/pathname.ts"],"sourcesContent":["function normalizePathname(pathname: string): string {\n return pathname.endsWith(\"/\") && pathname !== \"/\" ? pathname.slice(0, -1) : pathname;\n}\n\nfunction getWindowLocation(): Location | null {\n return typeof window === \"undefined\" ? null : window.location;\n}\n\nexport function resolvePathname(href: string): string | null {\n if (href.startsWith(\"#\")) {\n return null;\n }\n\n const location = getWindowLocation();\n\n if (href.startsWith(\"/\") && !href.startsWith(\"//\")) {\n const queryIndex = href.indexOf(\"?\");\n const hashIndex = href.indexOf(\"#\");\n let pathEnd = href.length;\n\n if (queryIndex !== -1) {\n pathEnd = Math.min(pathEnd, queryIndex);\n }\n\n if (hashIndex !== -1) {\n pathEnd = Math.min(pathEnd, hashIndex);\n }\n\n const pathname = normalizePathname(href.slice(0, pathEnd));\n\n if (location && hashIndex !== -1) {\n const searchEnd = hashIndex === -1 ? href.length : hashIndex;\n const search = queryIndex === -1 ? \"\" : href.slice(queryIndex, searchEnd);\n const locationPathname = normalizePathname(location.pathname || \"/\");\n\n if (pathname === locationPathname && search === location.search) {\n return null;\n }\n }\n\n return pathname;\n }\n\n const baseHref = location?.href ?? \"http://localhost/\";\n const baseOrigin = location?.origin ?? \"http://localhost\";\n\n try {\n const target = new URL(href, baseHref);\n\n if (target.origin !== baseOrigin) {\n return null;\n }\n\n if (\n location &&\n target.hash &&\n normalizePathname(target.pathname) === normalizePathname(location.pathname || \"/\") &&\n target.search === location.search\n ) {\n return null;\n }\n\n return normalizePathname(target.pathname);\n } catch {\n return null;\n }\n}\n"],"mappings":";AAAA,SAAS,kBAAkB,UAA0B;CACnD,OAAO,SAAS,SAAS,GAAG,KAAK,aAAa,MAAM,SAAS,MAAM,GAAG,EAAE,IAAI;AAC9E;AAEA,SAAS,oBAAqC;CAC5C,OAAO,OAAO,WAAW,cAAc,OAAO,OAAO;AACvD;AAEA,SAAgB,gBAAgB,MAA6B;CAC3D,IAAI,KAAK,WAAW,GAAG,GACrB,OAAO;CAGT,MAAM,WAAW,kBAAkB;CAEnC,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,IAAI,GAAG;EAClD,MAAM,aAAa,KAAK,QAAQ,GAAG;EACnC,MAAM,YAAY,KAAK,QAAQ,GAAG;EAClC,IAAI,UAAU,KAAK;EAEnB,IAAI,eAAe,IACjB,UAAU,KAAK,IAAI,SAAS,UAAU;EAGxC,IAAI,cAAc,IAChB,UAAU,KAAK,IAAI,SAAS,SAAS;EAGvC,MAAM,WAAW,kBAAkB,KAAK,MAAM,GAAG,OAAO,CAAC;EAEzD,IAAI,YAAY,cAAc,IAAI;GAChC,MAAM,YAAY,cAAc,KAAK,KAAK,SAAS;GACnD,MAAM,SAAS,eAAe,KAAK,KAAK,KAAK,MAAM,YAAY,SAAS;GAGxE,IAAI,aAFqB,kBAAkB,SAAS,YAAY,GAEhC,KAAK,WAAW,SAAS,QACvD,OAAO;EAEX;EAEA,OAAO;CACT;CAEA,MAAM,WAAW,UAAU,QAAQ;CACnC,MAAM,aAAa,UAAU,UAAU;CAEvC,IAAI;EACF,MAAM,SAAS,IAAI,IAAI,MAAM,QAAQ;EAErC,IAAI,OAAO,WAAW,YACpB,OAAO;EAGT,IACE,YACA,OAAO,QACP,kBAAkB,OAAO,QAAQ,MAAM,kBAAkB,SAAS,YAAY,GAAG,KACjF,OAAO,WAAW,SAAS,QAE3B,OAAO;EAGT,OAAO,kBAAkB,OAAO,QAAQ;CAC1C,QAAQ;EACN,OAAO;CACT;AACF"}
|
|
1
|
+
{"version":3,"file":"pathname.js","names":[],"sources":["../../../src/components/_internal/pathname.ts"],"sourcesContent":["function normalizePathname(pathname: string): string {\n return pathname.endsWith(\"/\") && pathname !== \"/\" ? pathname.slice(0, -1) : pathname;\n}\n\nfunction getWindowLocation(): Location | null {\n return typeof window === \"undefined\" ? null : window.location;\n}\n\nexport function assertSafeNavigationHref(href: string): void {\n const trimmed = href.trim();\n if (!trimmed || trimmed !== href)\n throw new TypeError(\"Navigation href must be a non-empty canonical URL.\");\n const scheme = /^([a-z][a-z\\d+.-]*):/iu.exec(trimmed)?.[1]?.toLowerCase();\n if (scheme && ![\"http\", \"https\", \"mailto\", \"tel\"].includes(scheme))\n throw new TypeError(`Navigation URL scheme is not allowed: ${scheme}`);\n if ([...trimmed].some((character) => character.charCodeAt(0) <= 31))\n throw new TypeError(\"Navigation href must not contain control characters.\");\n}\n\nexport function resolvePathname(href: string): string | null {\n if (href.startsWith(\"#\")) {\n return null;\n }\n\n const location = getWindowLocation();\n\n if (href.startsWith(\"/\") && !href.startsWith(\"//\")) {\n const queryIndex = href.indexOf(\"?\");\n const hashIndex = href.indexOf(\"#\");\n let pathEnd = href.length;\n\n if (queryIndex !== -1) {\n pathEnd = Math.min(pathEnd, queryIndex);\n }\n\n if (hashIndex !== -1) {\n pathEnd = Math.min(pathEnd, hashIndex);\n }\n\n const pathname = normalizePathname(href.slice(0, pathEnd));\n\n if (location && hashIndex !== -1) {\n const searchEnd = hashIndex === -1 ? href.length : hashIndex;\n const search = queryIndex === -1 ? \"\" : href.slice(queryIndex, searchEnd);\n const locationPathname = normalizePathname(location.pathname || \"/\");\n\n if (pathname === locationPathname && search === location.search) {\n return null;\n }\n }\n\n return pathname;\n }\n\n const baseHref = location?.href ?? \"http://localhost/\";\n const baseOrigin = location?.origin ?? \"http://localhost\";\n\n try {\n const target = new URL(href, baseHref);\n\n if (target.origin !== baseOrigin) {\n return null;\n }\n\n if (\n location &&\n target.hash &&\n normalizePathname(target.pathname) === normalizePathname(location.pathname || \"/\") &&\n target.search === location.search\n ) {\n return null;\n }\n\n return normalizePathname(target.pathname);\n } catch {\n return null;\n }\n}\n"],"mappings":";AAAA,SAAS,kBAAkB,UAA0B;CACnD,OAAO,SAAS,SAAS,GAAG,KAAK,aAAa,MAAM,SAAS,MAAM,GAAG,EAAE,IAAI;AAC9E;AAEA,SAAS,oBAAqC;CAC5C,OAAO,OAAO,WAAW,cAAc,OAAO,OAAO;AACvD;AAEA,SAAgB,yBAAyB,MAAoB;CAC3D,MAAM,UAAU,KAAK,KAAK;CAC1B,IAAI,CAAC,WAAW,YAAY,MAC1B,MAAM,IAAI,UAAU,oDAAoD;CAC1E,MAAM,SAAS,yBAAyB,KAAK,OAAO,CAAC,GAAG,EAAE,EAAE,YAAY;CACxE,IAAI,UAAU,CAAC;EAAC;EAAQ;EAAS;EAAU;CAAK,CAAC,CAAC,SAAS,MAAM,GAC/D,MAAM,IAAI,UAAU,yCAAyC,QAAQ;CACvE,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,cAAc,UAAU,WAAW,CAAC,KAAK,EAAE,GAChE,MAAM,IAAI,UAAU,sDAAsD;AAC9E;AAEA,SAAgB,gBAAgB,MAA6B;CAC3D,IAAI,KAAK,WAAW,GAAG,GACrB,OAAO;CAGT,MAAM,WAAW,kBAAkB;CAEnC,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,IAAI,GAAG;EAClD,MAAM,aAAa,KAAK,QAAQ,GAAG;EACnC,MAAM,YAAY,KAAK,QAAQ,GAAG;EAClC,IAAI,UAAU,KAAK;EAEnB,IAAI,eAAe,IACjB,UAAU,KAAK,IAAI,SAAS,UAAU;EAGxC,IAAI,cAAc,IAChB,UAAU,KAAK,IAAI,SAAS,SAAS;EAGvC,MAAM,WAAW,kBAAkB,KAAK,MAAM,GAAG,OAAO,CAAC;EAEzD,IAAI,YAAY,cAAc,IAAI;GAChC,MAAM,YAAY,cAAc,KAAK,KAAK,SAAS;GACnD,MAAM,SAAS,eAAe,KAAK,KAAK,KAAK,MAAM,YAAY,SAAS;GAGxE,IAAI,aAFqB,kBAAkB,SAAS,YAAY,GAEhC,KAAK,WAAW,SAAS,QACvD,OAAO;EAEX;EAEA,OAAO;CACT;CAEA,MAAM,WAAW,UAAU,QAAQ;CACnC,MAAM,aAAa,UAAU,UAAU;CAEvC,IAAI;EACF,MAAM,SAAS,IAAI,IAAI,MAAM,QAAQ;EAErC,IAAI,OAAO,WAAW,YACpB,OAAO;EAGT,IACE,YACA,OAAO,QACP,kBAAkB,OAAO,QAAQ,MAAM,kBAAkB,SAAS,YAAY,GAAG,KACjF,OAAO,WAAW,SAAS,QAE3B,OAAO;EAGT,OAAO,kBAAkB,OAAO,QAAQ;CAC1C,QAAQ;EACN,OAAO;CACT;AACF"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { cspNonce } from "@askrjs/askr";
|
|
1
2
|
//#region src/components/_internal/style.ts
|
|
2
3
|
const cssPropertyNameCache = /* @__PURE__ */ new Map();
|
|
3
4
|
function cssPropertyName(name) {
|
|
@@ -26,16 +27,29 @@ function serializeCssDeclarations(styles) {
|
|
|
26
27
|
const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
|
|
27
28
|
const STYLE_CLASS_PREFIX = "ak-style-";
|
|
28
29
|
const styleClassCache = /* @__PURE__ */ new Map();
|
|
29
|
-
const
|
|
30
|
+
const registries = /* @__PURE__ */ new WeakMap();
|
|
31
|
+
const MAX_STYLE_RULES = 512;
|
|
30
32
|
let nextStyleClassId = 0;
|
|
31
|
-
function
|
|
33
|
+
function ensureStyleRegistry(nonce) {
|
|
32
34
|
if (typeof document === "undefined") return null;
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
+
const key = nonce ?? "";
|
|
36
|
+
let documentRegistries = registries.get(document);
|
|
37
|
+
if (!documentRegistries) {
|
|
38
|
+
documentRegistries = /* @__PURE__ */ new Map();
|
|
39
|
+
registries.set(document, documentRegistries);
|
|
40
|
+
}
|
|
41
|
+
const current = documentRegistries.get(key);
|
|
42
|
+
if (current?.element.isConnected) return current;
|
|
35
43
|
const styleElement = document.createElement("style");
|
|
36
44
|
styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
|
|
45
|
+
if (nonce !== void 0) styleElement.nonce = nonce;
|
|
37
46
|
(document.head ?? document.documentElement).append(styleElement);
|
|
38
|
-
|
|
47
|
+
const registry = {
|
|
48
|
+
element: styleElement,
|
|
49
|
+
rules: /* @__PURE__ */ new Map()
|
|
50
|
+
};
|
|
51
|
+
documentRegistries.set(key, registry);
|
|
52
|
+
return registry;
|
|
39
53
|
}
|
|
40
54
|
function normalizeDeclarations(declarations) {
|
|
41
55
|
return declarations.trim().replace(/;+\s*$/, "");
|
|
@@ -44,17 +58,28 @@ function styleDeclarationsToClass(declarations) {
|
|
|
44
58
|
if (typeof declarations !== "string") return void 0;
|
|
45
59
|
const normalized = normalizeDeclarations(declarations);
|
|
46
60
|
if (!normalized) return void 0;
|
|
61
|
+
const registry = ensureStyleRegistry(cspNonce());
|
|
62
|
+
const registered = registry?.rules.get(normalized);
|
|
63
|
+
if (registered) return registered.className;
|
|
47
64
|
let className = styleClassCache.get(normalized);
|
|
48
65
|
if (className === void 0) {
|
|
49
66
|
className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;
|
|
67
|
+
if (styleClassCache.size >= MAX_STYLE_RULES) {
|
|
68
|
+
const oldest = styleClassCache.keys().next().value;
|
|
69
|
+
if (oldest !== void 0) styleClassCache.delete(oldest);
|
|
70
|
+
}
|
|
50
71
|
styleClassCache.set(normalized, className);
|
|
51
72
|
}
|
|
52
|
-
if (
|
|
53
|
-
const styleElement =
|
|
73
|
+
if (registry) {
|
|
74
|
+
const styleElement = registry.element;
|
|
54
75
|
if (styleElement) {
|
|
76
|
+
if (registry.rules.size >= MAX_STYLE_RULES) throw new RangeError("Theme style registry capacity exceeded.");
|
|
55
77
|
const rule = `.${className}{${normalized}}`;
|
|
56
|
-
|
|
57
|
-
|
|
78
|
+
registry.rules.set(normalized, {
|
|
79
|
+
className,
|
|
80
|
+
rule
|
|
81
|
+
});
|
|
82
|
+
styleElement.textContent = Array.from(registry.rules.values(), (entry) => entry.rule).join("\n");
|
|
58
83
|
}
|
|
59
84
|
}
|
|
60
85
|
return className;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/_internal/style.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/_internal/style.ts"],"sourcesContent":["import { cspNonce } from \"@askrjs/askr\";\n\nconst cssPropertyNameCache = new Map<string, string>();\n\nfunction cssPropertyName(name: string): string {\n let cached = cssPropertyNameCache.get(name);\n if (cached !== undefined) {\n return cached;\n }\n\n let result = \"\";\n\n for (let index = 0; index < name.length; index += 1) {\n const code = name.charCodeAt(index);\n\n if (code >= 65 && code <= 90) {\n result += `-${String.fromCharCode(code + 32)}`;\n } else {\n result += name[index];\n }\n }\n\n cssPropertyNameCache.set(name, result);\n return result;\n}\n\nexport function serializeCssDeclarations(styles: Record<string, unknown>): string {\n const keys = Object.keys(styles);\n let result = \"\";\n\n for (const key of keys) {\n const value = styles[key];\n if (value === undefined || value === null) {\n continue;\n }\n\n const declaration = `${cssPropertyName(key)}:${String(value)}`;\n result = result ? `${result};${declaration}` : declaration;\n }\n\n return result;\n}\n\nexport function mergeCssVar(style: unknown, name: string, value: string): string {\n const decl = `${name}:${value}`;\n\n if (typeof style === \"string\") {\n const trimmed = style.trim();\n return trimmed ? `${trimmed};${decl}` : decl;\n }\n\n if (style && typeof style === \"object\") {\n const entries = serializeCssDeclarations(style as Record<string, unknown>);\n return entries ? `${entries};${decl}` : decl;\n }\n\n return decl;\n}\n\nconst STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\nconst STYLE_CLASS_PREFIX = \"ak-style-\";\n\nconst styleClassCache = new Map<string, string>();\ntype StyleRegistry = {\n element: HTMLStyleElement;\n rules: Map<string, { className: string; rule: string }>;\n};\nconst registries = new WeakMap<Document, Map<string, StyleRegistry>>();\nconst MAX_STYLE_RULES = 512;\n\nlet nextStyleClassId = 0;\n\nfunction ensureStyleRegistry(nonce: string | undefined): StyleRegistry | null {\n if (typeof document === \"undefined\") return null;\n const key = nonce ?? \"\";\n let documentRegistries = registries.get(document);\n if (!documentRegistries) {\n documentRegistries = new Map();\n registries.set(document, documentRegistries);\n }\n const current = documentRegistries.get(key);\n if (current?.element.isConnected) return current;\n\n const styleElement = document.createElement(\"style\");\n styleElement.setAttribute(STYLE_REGISTRY_ATTR, \"true\");\n if (nonce !== undefined) styleElement.nonce = nonce;\n (document.head ?? document.documentElement).append(styleElement);\n const registry: StyleRegistry = { element: styleElement, rules: new Map() };\n documentRegistries.set(key, registry);\n return registry;\n}\n\nfunction normalizeDeclarations(declarations: string): string {\n return declarations.trim().replace(/;+\\s*$/, \"\");\n}\n\nexport function styleDeclarationsToClass(declarations: string | undefined): string | undefined {\n if (typeof declarations !== \"string\") return undefined;\n\n const normalized = normalizeDeclarations(declarations);\n if (!normalized) return undefined;\n\n const nonce = cspNonce();\n const registry = ensureStyleRegistry(nonce);\n const registered = registry?.rules.get(normalized);\n if (registered) return registered.className;\n\n let className = styleClassCache.get(normalized);\n if (className === undefined) {\n className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;\n if (styleClassCache.size >= MAX_STYLE_RULES) {\n const oldest = styleClassCache.keys().next().value as string | undefined;\n if (oldest !== undefined) styleClassCache.delete(oldest);\n }\n styleClassCache.set(normalized, className);\n }\n\n if (registry) {\n const styleElement = registry.element;\n if (styleElement) {\n if (registry.rules.size >= MAX_STYLE_RULES)\n throw new RangeError(\"Theme style registry capacity exceeded.\");\n const rule = `.${className}{${normalized}}`;\n registry.rules.set(normalized, { className, rule });\n styleElement.textContent = Array.from(registry.rules.values(), (entry) => entry.rule).join(\n \"\\n\",\n );\n }\n }\n\n return className;\n}\n"],"mappings":"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"}
|
|
@@ -30,8 +30,8 @@ function CardHeader(props) {
|
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
function CardTitle(props) {
|
|
33
|
-
const { children, class: className, ref, ...rest } = props;
|
|
34
|
-
return /* @__PURE__ */ jsx(
|
|
33
|
+
const { children, class: className, ref, titleAs: TitleTag = "h3", ...rest } = props;
|
|
34
|
+
return /* @__PURE__ */ jsx(TitleTag, {
|
|
35
35
|
...mergeProps(rest, {
|
|
36
36
|
ref,
|
|
37
37
|
class: classes("card-title", className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type {\n CardActionProps,\n CardContentProps,\n CardDescriptionProps,\n CardFooterProps,\n CardHeaderProps,\n CardProps,\n CardTitleProps,\n CardVariant,\n} from \"./card.types\";\n\nfunction normalizeVariant(variant: CardVariant | undefined) {\n return variant && variant !== \"default\" ? variant : undefined;\n}\n\nexport function Card(props: CardProps): JSX.Element {\n const { children, class: className, variant, ref, ...rest } = props;\n const normalizedVariant = normalizeVariant(variant);\n\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card\", normalizedVariant && `card-${normalizedVariant}`, className),\n \"data-slot\": \"card\",\n \"data-variant\": normalizedVariant,\n });\n\n return <div {...finalProps}>{children}</div>;\n}\n\nexport function CardHeader(props: CardHeaderProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card-header\", className),\n \"data-slot\": \"card-header\",\n });\n\n return <div {...finalProps}>{children}</div>;\n}\n\nexport function CardTitle(props: CardTitleProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card-title\", className),\n \"data-slot\": \"card-title\",\n });\n\n return <
|
|
1
|
+
{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type {\n CardActionProps,\n CardContentProps,\n CardDescriptionProps,\n CardFooterProps,\n CardHeaderProps,\n CardProps,\n CardTitleProps,\n CardVariant,\n} from \"./card.types\";\n\nfunction normalizeVariant(variant: CardVariant | undefined) {\n return variant && variant !== \"default\" ? variant : undefined;\n}\n\nexport function Card(props: CardProps): JSX.Element {\n const { children, class: className, variant, ref, ...rest } = props;\n const normalizedVariant = normalizeVariant(variant);\n\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card\", normalizedVariant && `card-${normalizedVariant}`, className),\n \"data-slot\": \"card\",\n \"data-variant\": normalizedVariant,\n });\n\n return <div {...finalProps}>{children}</div>;\n}\n\nexport function CardHeader(props: CardHeaderProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card-header\", className),\n \"data-slot\": \"card-header\",\n });\n\n return <div {...finalProps}>{children}</div>;\n}\n\nexport function CardTitle(props: CardTitleProps): JSX.Element {\n const { children, class: className, ref, titleAs: TitleTag = \"h3\", ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card-title\", className),\n \"data-slot\": \"card-title\",\n });\n\n return <TitleTag {...finalProps}>{children}</TitleTag>;\n}\n\nexport function CardDescription(props: CardDescriptionProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card-description\", className),\n \"data-slot\": \"card-description\",\n });\n\n return <p {...finalProps}>{children}</p>;\n}\n\nexport function CardContent(props: CardContentProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card-content\", className),\n \"data-slot\": \"card-content\",\n });\n\n return <div {...finalProps}>{children}</div>;\n}\n\nexport function CardFooter(props: CardFooterProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card-footer\", className),\n \"data-slot\": \"card-footer\",\n });\n\n return <div {...finalProps}>{children}</div>;\n}\n\nexport function CardAction(props: CardActionProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"card-action\", className),\n \"data-slot\": \"card-action\",\n });\n\n return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;AAaA,SAAS,iBAAiB,SAAkC;CAC1D,OAAO,WAAW,YAAY,YAAY,UAAU,KAAA;AACtD;AAEA,SAAgB,KAAK,OAA+B;CAClD,MAAM,EAAE,UAAU,OAAO,WAAW,SAAS,KAAK,GAAG,SAAS;CAC9D,MAAM,oBAAoB,iBAAiB,OAAO;CASlD,OAAO,oBAAC,OAAD;EAAK,GAPO,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,QAAQ,qBAAqB,QAAQ,qBAAqB,SAAS;GAClF,aAAa;GACb,gBAAgB;EAClB,CAEyB;EAAI;CAAc,CAAA;AAC7C;AAEA,SAAgB,WAAW,OAAqC;CAC9D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,OAAD;EAAK,GANO,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,eAAe,SAAS;GACvC,aAAa;EACf,CAEyB;EAAI;CAAc,CAAA;AAC7C;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,SAAS,WAAW,MAAM,GAAG,SAAS;CAO/E,OAAO,oBAAC,UAAD;EAAU,GANE,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,cAAc,SAAS;GACtC,aAAa;EACf,CAE8B;EAAI;CAAmB,CAAA;AACvD;AAEA,SAAgB,gBAAgB,OAA0C;CACxE,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,KAAD;EAAG,GANS,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,oBAAoB,SAAS;GAC5C,aAAa;EACf,CAEuB;EAAI;CAAY,CAAA;AACzC;AAEA,SAAgB,YAAY,OAAsC;CAChE,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,OAAD;EAAK,GANO,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,gBAAgB,SAAS;GACxC,aAAa;EACf,CAEyB;EAAI;CAAc,CAAA;AAC7C;AAEA,SAAgB,WAAW,OAAqC;CAC9D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,OAAD;EAAK,GANO,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,eAAe,SAAS;GACvC,aAAa;EACf,CAEyB;EAAI;CAAc,CAAA;AAC7C;AAEA,SAAgB,WAAW,OAAqC;CAC9D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,OAAD;EAAK,GANO,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,eAAe,SAAS;GACvC,aAAa;EACf,CAEyB;EAAI;CAAc,CAAA;AAC7C"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Ref } from "@askrjs/askr/foundations/utilities";
|
|
2
2
|
//#region src/components/card/card.types.d.ts
|
|
3
3
|
type CardVariant = "default" | "raised";
|
|
4
|
+
type CardTitleHeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
4
5
|
type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
|
|
5
6
|
type HeadingProps = Omit<JSX.IntrinsicElements["h3"], "children" | "ref">;
|
|
6
7
|
type ParagraphProps = Omit<JSX.IntrinsicElements["p"], "children" | "ref">;
|
|
@@ -15,6 +16,8 @@ type CardHeaderProps = DivProps & {
|
|
|
15
16
|
};
|
|
16
17
|
type CardTitleProps = HeadingProps & {
|
|
17
18
|
children?: unknown;
|
|
19
|
+
/** Choose the level that follows the surrounding document hierarchy. */
|
|
20
|
+
titleAs?: CardTitleHeadingTag;
|
|
18
21
|
ref?: Ref<HTMLHeadingElement>;
|
|
19
22
|
};
|
|
20
23
|
type CardDescriptionProps = ParagraphProps & {
|
|
@@ -34,4 +37,4 @@ type CardActionProps = DivProps & {
|
|
|
34
37
|
ref?: Ref<HTMLDivElement>;
|
|
35
38
|
};
|
|
36
39
|
//#endregion
|
|
37
|
-
export { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, CardVariant };
|
|
40
|
+
export { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleHeadingTag, CardTitleProps, CardVariant };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, CardVariant } from "./card.types.js";
|
|
1
|
+
import { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleHeadingTag, CardTitleProps, CardVariant } from "./card.types.js";
|
|
2
2
|
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
|
|
3
|
-
export { Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type CardVariant };
|
|
3
|
+
export { Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleHeadingTag, type CardTitleProps, type CardVariant };
|
|
@@ -2,7 +2,7 @@ import { classes } from "../_internal/classes.js";
|
|
|
2
2
|
import { mergeProps } from "../_internal/merge-props.js";
|
|
3
3
|
import { intrinsicElement } from "../_internal/jsx.js";
|
|
4
4
|
import { Block } from "../block/block.js";
|
|
5
|
-
import { resolvePathname } from "../_internal/pathname.js";
|
|
5
|
+
import { assertSafeNavigationHref, resolvePathname } from "../_internal/pathname.js";
|
|
6
6
|
import { jsx } from "@askrjs/askr/jsx-runtime";
|
|
7
7
|
import { Slot } from "@askrjs/askr/foundations";
|
|
8
8
|
import { Link, currentRoute, navigate } from "@askrjs/askr/router";
|
|
@@ -50,6 +50,7 @@ function renderRoutedLink(props, slot, options = {}) {
|
|
|
50
50
|
const { active, children, href: suppliedHref, to, onClick, ref, class: className, match = "prefix", target, ...rest } = props;
|
|
51
51
|
const href = to?.href ?? suppliedHref;
|
|
52
52
|
if (!href) throw new Error("Nav link requires href or to.");
|
|
53
|
+
assertSafeNavigationHref(href);
|
|
53
54
|
const resolvedSlot = (options.inheritSlot && typeof rest["data-slot"] === "string" ? String(rest["data-slot"]) : void 0) ?? slot;
|
|
54
55
|
const inheritedNavClass = slot === "nav-item" && resolvedSlot !== "nav-item" ? "nav-item" : void 0;
|
|
55
56
|
const { "data-slot": _dataSlot, ...childRest } = rest;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav.js","names":[],"sources":["../../../src/components/nav/nav.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { currentRoute, Link, navigate } from \"@askrjs/askr/router\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport { resolvePathname } from \"../_internal/pathname\";\nimport type {\n NavItemAsChildProps,\n NavItemProps,\n NavLinkProps,\n PillProps,\n PillsAsChildProps,\n PillsProps,\n TabProps,\n TabsAsChildProps,\n TabsProps,\n} from \"./nav.types\";\n\nconst LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;\n\nfunction normalizePathname(pathname: string): string {\n return pathname.endsWith(\"/\") && pathname !== \"/\" ? pathname.slice(0, -1) : pathname;\n}\n\nfunction getCurrentPathname(): string | null {\n if (typeof window === \"undefined\") {\n return null;\n }\n\n return normalizePathname(window.location.pathname || \"/\");\n}\n\nfunction getReactiveCurrentPathname(): string | null {\n try {\n return normalizePathname(currentRoute().path || \"/\");\n } catch {\n return getCurrentPathname();\n }\n}\n\nfunction isActiveNavLink(\n currentPathname: string,\n targetPathname: string,\n match: NavLinkProps[\"match\"] = \"prefix\",\n): boolean {\n if (targetPathname === \"/\") {\n return currentPathname === \"/\";\n }\n\n if (match === \"exact\") {\n return currentPathname === targetPathname;\n }\n\n return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);\n}\n\nfunction shouldHandleClientNavigation(\n event: MouseEvent,\n target: string | undefined,\n targetPathname: string | null,\n): boolean {\n if (targetPathname === null || target) {\n return false;\n }\n\n return (\n !event.defaultPrevented &&\n (event.button ?? 0) === 0 &&\n !event.altKey &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.shiftKey\n );\n}\n\nfunction renderNavSet(\n props: TabsProps | TabsAsChildProps | PillsProps | PillsAsChildProps,\n slot: \"tabs\" | \"pills\",\n): JSX.Element {\n const className = \"class\" in props ? props.class : undefined;\n const { asChild, children, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(slot, className),\n \"data-slot\": slot,\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n }\n\n return intrinsicElement(\"nav\", finalProps, children);\n}\n\nfunction renderRoutedLink(\n props: NavLinkProps | TabProps | PillProps,\n slot: \"nav-item\" | \"tab\" | \"pill\",\n options: { activeBackground?: boolean; className?: string; inheritSlot?: boolean } = {},\n): JSX.Element {\n const {\n active,\n children,\n href: suppliedHref,\n to,\n onClick,\n ref,\n class: className,\n match = \"prefix\",\n target,\n ...rest\n } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };\n const href = to?.href ?? suppliedHref;\n if (!href) {\n throw new Error(\"Nav link requires href or to.\");\n }\n const inheritedSlot =\n options.inheritSlot && typeof (rest as Record<string, unknown>)[\"data-slot\"] === \"string\"\n ? String((rest as Record<string, unknown>)[\"data-slot\"])\n : undefined;\n const resolvedSlot = (inheritedSlot ?? slot) as \"nav-item\" | \"tab\" | \"pill\";\n const inheritedNavClass =\n slot === \"nav-item\" && resolvedSlot !== \"nav-item\" ? \"nav-item\" : undefined;\n const { \"data-slot\": _dataSlot, ...childRest } = rest as Record<string, unknown>;\n void _dataSlot;\n const currentPathname = getReactiveCurrentPathname();\n const targetPathname = resolvePathname(href);\n const routeActive =\n currentPathname !== null &&\n targetPathname !== null &&\n isActiveNavLink(currentPathname, targetPathname, match);\n const isActive = active ?? routeActive;\n const activeProps = isActive\n ? {\n \"aria-current\": \"page\" as const,\n \"data-active\": \"true\" as const,\n }\n : {\n \"data-active\": undefined,\n };\n const rendersRouterLink = targetPathname !== null && !target && typeof onClick !== \"function\";\n const childProps: NavLinkProps = to\n ? ({ ...childRest, to, target } as NavLinkProps)\n : ({ ...childRest, href, target } as NavLinkProps);\n const handleClick = (event: MouseEvent) => {\n onClick?.(event);\n\n if (!shouldHandleClientNavigation(event, target, targetPathname)) {\n return;\n }\n\n event.preventDefault();\n navigate(href);\n };\n\n return (\n <LayoutBlock\n asChild\n paddingX=\"sm\"\n paddingY=\"xs\"\n radius={resolvedSlot === \"pill\" ? \"round\" : \"md\"}\n background={isActive && options.activeBackground ? \"selected\" : undefined}\n ref={ref}\n className={classes(options.className, inheritedNavClass, className)}\n data-slot={resolvedSlot}\n {...activeProps}\n >\n {rendersRouterLink ? (\n <Link {...childProps}>{children}</Link>\n ) : (\n <a {...childRest} href={href} target={target} onClick={handleClick}>\n {children}\n </a>\n )}\n </LayoutBlock>\n );\n}\n\nexport function Tabs(props: TabsProps): JSX.Element;\nexport function Tabs(props: TabsAsChildProps): JSX.Element;\nexport function Tabs(props: TabsProps | TabsAsChildProps): JSX.Element {\n return renderNavSet(props, \"tabs\");\n}\n\nexport function Pills(props: PillsProps): JSX.Element;\nexport function Pills(props: PillsAsChildProps): JSX.Element;\nexport function Pills(props: PillsProps | PillsAsChildProps): JSX.Element {\n return renderNavSet(props, \"pills\");\n}\n\nexport function Tab(props: TabProps): JSX.Element {\n return renderRoutedLink(props, \"tab\", { className: \"tab\" });\n}\n\nexport function Pill(props: PillProps): JSX.Element {\n return renderRoutedLink(props, \"pill\", { activeBackground: true, className: \"pill\" });\n}\n\nexport function NavItem(props: NavItemProps): JSX.Element;\nexport function NavItem(props: NavItemAsChildProps): JSX.Element;\nexport function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element {\n const {\n asChild,\n active = false,\n children,\n ref,\n class: className,\n match: _match,\n ...rest\n } = props as (NavItemProps | NavItemAsChildProps) & { match?: unknown };\n void _match;\n\n if (asChild) {\n return (\n <LayoutBlock\n asChild\n paddingX=\"sm\"\n paddingY=\"xs\"\n radius=\"md\"\n background={active ? \"selected\" : undefined}\n {...rest}\n ref={ref}\n className={className}\n data-active={active ? \"true\" : undefined}\n data-slot=\"nav-item\"\n >\n {children}\n </LayoutBlock>\n );\n }\n\n return (\n <LayoutBlock\n as=\"a\"\n paddingX=\"sm\"\n paddingY=\"xs\"\n radius=\"md\"\n background={active ? \"selected\" : undefined}\n {...rest}\n ref={ref}\n className={className}\n data-active={active ? \"true\" : undefined}\n data-slot=\"nav-item\"\n >\n {children}\n </LayoutBlock>\n );\n}\n\nexport function NavLink(props: NavLinkProps): JSX.Element {\n return renderRoutedLink(props, \"nav-item\", { activeBackground: true, inheritSlot: true });\n}\n"],"mappings":";;;;;;;;;AAmBA,MAAM,cAAc;AAEpB,SAAS,kBAAkB,UAA0B;CACnD,OAAO,SAAS,SAAS,GAAG,KAAK,aAAa,MAAM,SAAS,MAAM,GAAG,EAAE,IAAI;AAC9E;AAEA,SAAS,qBAAoC;CAC3C,IAAI,OAAO,WAAW,aACpB,OAAO;CAGT,OAAO,kBAAkB,OAAO,SAAS,YAAY,GAAG;AAC1D;AAEA,SAAS,6BAA4C;CACnD,IAAI;EACF,OAAO,kBAAkB,aAAa,CAAC,CAAC,QAAQ,GAAG;CACrD,QAAQ;EACN,OAAO,mBAAmB;CAC5B;AACF;AAEA,SAAS,gBACP,iBACA,gBACA,QAA+B,UACtB;CACT,IAAI,mBAAmB,KACrB,OAAO,oBAAoB;CAG7B,IAAI,UAAU,SACZ,OAAO,oBAAoB;CAG7B,OAAO,oBAAoB,kBAAkB,gBAAgB,WAAW,GAAG,eAAe,EAAE;AAC9F;AAEA,SAAS,6BACP,OACA,QACA,gBACS;CACT,IAAI,mBAAmB,QAAQ,QAC7B,OAAO;CAGT,OACE,CAAC,MAAM,qBACN,MAAM,UAAU,OAAO,KACxB,CAAC,MAAM,UACP,CAAC,MAAM,WACP,CAAC,MAAM,WACP,CAAC,MAAM;AAEX;AAEA,SAAS,aACP,OACA,MACa;CACb,MAAM,YAAY,WAAW,QAAQ,MAAM,QAAQ,KAAA;CACnD,MAAM,EAAE,SAAS,UAAU,KAAK,GAAG,SAAS;CAC5C,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,MAAM,SAAS;EAC9B,aAAa;CACf,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAA0B,CAAA;CAG3E,OAAO,iBAAiB,OAAO,YAAY,QAAQ;AACrD;AAEA,SAAS,iBACP,OACA,MACA,UAAqF,CAAC,GACzE;CACb,MAAM,EACJ,QACA,UACA,MAAM,cACN,IACA,SACA,KACA,OAAO,WACP,QAAQ,UACR,QACA,GAAG,SACD;CACJ,MAAM,OAAO,IAAI,QAAQ;CACzB,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,+BAA+B;CAMjD,MAAM,gBAHJ,QAAQ,eAAe,OAAQ,KAAiC,iBAAiB,WAC7E,OAAQ,KAAiC,YAAY,IACrD,KAAA,MACiC;CACvC,MAAM,oBACJ,SAAS,cAAc,iBAAiB,aAAa,aAAa,KAAA;CACpE,MAAM,EAAE,aAAa,WAAW,GAAG,cAAc;CAEjD,MAAM,kBAAkB,2BAA2B;CACnD,MAAM,iBAAiB,gBAAgB,IAAI;CAC3C,MAAM,cACJ,oBAAoB,QACpB,mBAAmB,QACnB,gBAAgB,iBAAiB,gBAAgB,KAAK;CACxD,MAAM,WAAW,UAAU;CAC3B,MAAM,cAAc,WAChB;EACE,gBAAgB;EAChB,eAAe;CACjB,IACA,EACE,eAAe,KAAA,EACjB;CACJ,MAAM,oBAAoB,mBAAmB,QAAQ,CAAC,UAAU,OAAO,YAAY;CACnF,MAAM,aAA2B,KAC5B;EAAE,GAAG;EAAW;EAAI;CAAO,IAC3B;EAAE,GAAG;EAAW;EAAM;CAAO;CAClC,MAAM,eAAe,UAAsB;EACzC,UAAU,KAAK;EAEf,IAAI,CAAC,6BAA6B,OAAO,QAAQ,cAAc,GAC7D;EAGF,MAAM,eAAe;EACrB,SAAS,IAAI;CACf;CAEA,OACE,oBAAC,aAAD;EACE,SAAA;EACA,UAAS;EACT,UAAS;EACT,QAAQ,iBAAiB,SAAS,UAAU;EAC5C,YAAY,YAAY,QAAQ,mBAAmB,aAAa,KAAA;EAC3D;EACL,WAAW,QAAQ,QAAQ,WAAW,mBAAmB,SAAS;EAClE,aAAW;EACX,GAAI;YAEH,oBACC,oBAAC,MAAD;GAAM,GAAI;GAAa;EAAe,CAAA,IAEtC,oBAAC,KAAD;GAAG,GAAI;GAAiB;GAAc;GAAQ,SAAS;GACpD;EACA,CAAA;CAEM,CAAA;AAEjB;AAIA,SAAgB,KAAK,OAAkD;CACrE,OAAO,aAAa,OAAO,MAAM;AACnC;AAIA,SAAgB,MAAM,OAAoD;CACxE,OAAO,aAAa,OAAO,OAAO;AACpC;AAEA,SAAgB,IAAI,OAA8B;CAChD,OAAO,iBAAiB,OAAO,OAAO,EAAE,WAAW,MAAM,CAAC;AAC5D;AAEA,SAAgB,KAAK,OAA+B;CAClD,OAAO,iBAAiB,OAAO,QAAQ;EAAE,kBAAkB;EAAM,WAAW;CAAO,CAAC;AACtF;AAIA,SAAgB,QAAQ,OAAwD;CAC9E,MAAM,EACJ,SACA,SAAS,OACT,UACA,KACA,OAAO,WACP,OAAO,QACP,GAAG,SACD;CAGJ,IAAI,SACF,OACE,oBAAC,aAAD;EACE,SAAA;EACA,UAAS;EACT,UAAS;EACT,QAAO;EACP,YAAY,SAAS,aAAa,KAAA;EAClC,GAAI;EACC;EACM;EACX,eAAa,SAAS,SAAS,KAAA;EAC/B,aAAU;EAET;CACU,CAAA;CAIjB,OACE,oBAAC,aAAD;EACE,IAAG;EACH,UAAS;EACT,UAAS;EACT,QAAO;EACP,YAAY,SAAS,aAAa,KAAA;EAClC,GAAI;EACC;EACM;EACX,eAAa,SAAS,SAAS,KAAA;EAC/B,aAAU;EAET;CACU,CAAA;AAEjB;AAEA,SAAgB,QAAQ,OAAkC;CACxD,OAAO,iBAAiB,OAAO,YAAY;EAAE,kBAAkB;EAAM,aAAa;CAAK,CAAC;AAC1F"}
|
|
1
|
+
{"version":3,"file":"nav.js","names":[],"sources":["../../../src/components/nav/nav.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { currentRoute, Link, navigate } from \"@askrjs/askr/router\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport { assertSafeNavigationHref, resolvePathname } from \"../_internal/pathname\";\nimport type {\n NavItemAsChildProps,\n NavItemProps,\n NavLinkProps,\n PillProps,\n PillsAsChildProps,\n PillsProps,\n TabProps,\n TabsAsChildProps,\n TabsProps,\n} from \"./nav.types\";\n\nconst LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;\n\nfunction normalizePathname(pathname: string): string {\n return pathname.endsWith(\"/\") && pathname !== \"/\" ? pathname.slice(0, -1) : pathname;\n}\n\nfunction getCurrentPathname(): string | null {\n if (typeof window === \"undefined\") {\n return null;\n }\n\n return normalizePathname(window.location.pathname || \"/\");\n}\n\nfunction getReactiveCurrentPathname(): string | null {\n try {\n return normalizePathname(currentRoute().path || \"/\");\n } catch {\n return getCurrentPathname();\n }\n}\n\nfunction isActiveNavLink(\n currentPathname: string,\n targetPathname: string,\n match: NavLinkProps[\"match\"] = \"prefix\",\n): boolean {\n if (targetPathname === \"/\") {\n return currentPathname === \"/\";\n }\n\n if (match === \"exact\") {\n return currentPathname === targetPathname;\n }\n\n return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);\n}\n\nfunction shouldHandleClientNavigation(\n event: MouseEvent,\n target: string | undefined,\n targetPathname: string | null,\n): boolean {\n if (targetPathname === null || target) {\n return false;\n }\n\n return (\n !event.defaultPrevented &&\n (event.button ?? 0) === 0 &&\n !event.altKey &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.shiftKey\n );\n}\n\nfunction renderNavSet(\n props: TabsProps | TabsAsChildProps | PillsProps | PillsAsChildProps,\n slot: \"tabs\" | \"pills\",\n): JSX.Element {\n const className = \"class\" in props ? props.class : undefined;\n const { asChild, children, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(slot, className),\n \"data-slot\": slot,\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n }\n\n return intrinsicElement(\"nav\", finalProps, children);\n}\n\nfunction renderRoutedLink(\n props: NavLinkProps | TabProps | PillProps,\n slot: \"nav-item\" | \"tab\" | \"pill\",\n options: { activeBackground?: boolean; className?: string; inheritSlot?: boolean } = {},\n): JSX.Element {\n const {\n active,\n children,\n href: suppliedHref,\n to,\n onClick,\n ref,\n class: className,\n match = \"prefix\",\n target,\n ...rest\n } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };\n const href = to?.href ?? suppliedHref;\n if (!href) {\n throw new Error(\"Nav link requires href or to.\");\n }\n assertSafeNavigationHref(href);\n const inheritedSlot =\n options.inheritSlot && typeof (rest as Record<string, unknown>)[\"data-slot\"] === \"string\"\n ? String((rest as Record<string, unknown>)[\"data-slot\"])\n : undefined;\n const resolvedSlot = (inheritedSlot ?? slot) as \"nav-item\" | \"tab\" | \"pill\";\n const inheritedNavClass =\n slot === \"nav-item\" && resolvedSlot !== \"nav-item\" ? \"nav-item\" : undefined;\n const { \"data-slot\": _dataSlot, ...childRest } = rest as Record<string, unknown>;\n void _dataSlot;\n const currentPathname = getReactiveCurrentPathname();\n const targetPathname = resolvePathname(href);\n const routeActive =\n currentPathname !== null &&\n targetPathname !== null &&\n isActiveNavLink(currentPathname, targetPathname, match);\n const isActive = active ?? routeActive;\n const activeProps = isActive\n ? {\n \"aria-current\": \"page\" as const,\n \"data-active\": \"true\" as const,\n }\n : {\n \"data-active\": undefined,\n };\n const rendersRouterLink = targetPathname !== null && !target && typeof onClick !== \"function\";\n const childProps: NavLinkProps = to\n ? ({ ...childRest, to, target } as NavLinkProps)\n : ({ ...childRest, href, target } as NavLinkProps);\n const handleClick = (event: MouseEvent) => {\n onClick?.(event);\n\n if (!shouldHandleClientNavigation(event, target, targetPathname)) {\n return;\n }\n\n event.preventDefault();\n navigate(href);\n };\n\n return (\n <LayoutBlock\n asChild\n paddingX=\"sm\"\n paddingY=\"xs\"\n radius={resolvedSlot === \"pill\" ? \"round\" : \"md\"}\n background={isActive && options.activeBackground ? \"selected\" : undefined}\n ref={ref}\n className={classes(options.className, inheritedNavClass, className)}\n data-slot={resolvedSlot}\n {...activeProps}\n >\n {rendersRouterLink ? (\n <Link {...childProps}>{children}</Link>\n ) : (\n <a {...childRest} href={href} target={target} onClick={handleClick}>\n {children}\n </a>\n )}\n </LayoutBlock>\n );\n}\n\nexport function Tabs(props: TabsProps): JSX.Element;\nexport function Tabs(props: TabsAsChildProps): JSX.Element;\nexport function Tabs(props: TabsProps | TabsAsChildProps): JSX.Element {\n return renderNavSet(props, \"tabs\");\n}\n\nexport function Pills(props: PillsProps): JSX.Element;\nexport function Pills(props: PillsAsChildProps): JSX.Element;\nexport function Pills(props: PillsProps | PillsAsChildProps): JSX.Element {\n return renderNavSet(props, \"pills\");\n}\n\nexport function Tab(props: TabProps): JSX.Element {\n return renderRoutedLink(props, \"tab\", { className: \"tab\" });\n}\n\nexport function Pill(props: PillProps): JSX.Element {\n return renderRoutedLink(props, \"pill\", { activeBackground: true, className: \"pill\" });\n}\n\nexport function NavItem(props: NavItemProps): JSX.Element;\nexport function NavItem(props: NavItemAsChildProps): JSX.Element;\nexport function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element {\n const {\n asChild,\n active = false,\n children,\n ref,\n class: className,\n match: _match,\n ...rest\n } = props as (NavItemProps | NavItemAsChildProps) & { match?: unknown };\n void _match;\n\n if (asChild) {\n return (\n <LayoutBlock\n asChild\n paddingX=\"sm\"\n paddingY=\"xs\"\n radius=\"md\"\n background={active ? \"selected\" : undefined}\n {...rest}\n ref={ref}\n className={className}\n data-active={active ? \"true\" : undefined}\n data-slot=\"nav-item\"\n >\n {children}\n </LayoutBlock>\n );\n }\n\n return (\n <LayoutBlock\n as=\"a\"\n paddingX=\"sm\"\n paddingY=\"xs\"\n radius=\"md\"\n background={active ? \"selected\" : undefined}\n {...rest}\n ref={ref}\n className={className}\n data-active={active ? \"true\" : undefined}\n data-slot=\"nav-item\"\n >\n {children}\n </LayoutBlock>\n );\n}\n\nexport function NavLink(props: NavLinkProps): JSX.Element {\n return renderRoutedLink(props, \"nav-item\", { activeBackground: true, inheritSlot: true });\n}\n"],"mappings":"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"}
|
package/dist/components.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ import "./components/brand/index.js";
|
|
|
16
16
|
import { ButtonGroupOrientation, ButtonGroupProps } from "./components/button-group/button-group.types.js";
|
|
17
17
|
import { ButtonGroup } from "./components/button-group/button-group.js";
|
|
18
18
|
import "./components/button-group/index.js";
|
|
19
|
-
import { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, CardVariant } from "./components/card/card.types.js";
|
|
19
|
+
import { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleHeadingTag, CardTitleProps, CardVariant } from "./components/card/card.types.js";
|
|
20
20
|
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/card/card.js";
|
|
21
21
|
import "./components/card/index.js";
|
|
22
22
|
import { CloseNativeProps, CloseOwnProps } from "./components/close/close.types.js";
|
|
@@ -87,4 +87,4 @@ import { CAT_THEME_NAMES, CAT_THEME_OPTIONS, CatThemeName, DEFAULT_THEME_OPTIONS
|
|
|
87
87
|
import "./components/theme/index.js";
|
|
88
88
|
import { AlertDescription, AlertTitle, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CatalogComponentProps, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DatePickerInput, Direction, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Inline, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ResizableHandle, ResizablePanel, ResizablePanelGroup, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Shell, ShellMain, ShellNav, Sonner, Stack, TabsContent, TabsList, TabsTrigger, Toaster, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP } from "./components/catalog.js";
|
|
89
89
|
import { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Button, ButtonAsChildElement, ButtonAsChildProps, ButtonNativeProps, ButtonProps, ButtonSize, ButtonVariant, ButtonWidth, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DebouncedInput, Dialog, Dialog as Drawer, Dialog as Sheet, DialogClose, DialogClose as DrawerClose, DialogClose as SheetClose, DialogContent, DialogContent as DrawerContent, DialogDescription, DialogDescription as DrawerDescription, DialogOverlay, DialogOverlay as DrawerOverlay, DialogOverlay as SheetOverlay, DialogPortal, DialogPortal as DrawerPortal, DialogPortal as SheetPortal, DialogTitle, DialogTitle as DrawerTitle, DialogTrigger, DialogTrigger as DrawerTrigger, DialogTrigger as SheetTrigger, Dropdown, Dropdown as ContextMenu, Dropdown as DropdownMenu, DropdownGroup, DropdownGroup as ContextMenuGroup, DropdownGroup as DropdownMenuGroup, DropdownItem, DropdownItem as ContextMenuItem, DropdownItem as DropdownMenuItem, DropdownItemVariant, DropdownLabel, DropdownLabel as ContextMenuLabel, DropdownLabel as DropdownMenuLabel, DropdownPortal, DropdownPortal as ContextMenuPortal, DropdownPortal as DropdownMenuPortal, DropdownSeparator, DropdownSeparator as ContextMenuSeparator, DropdownSeparator as DropdownMenuSeparator, DropdownTrigger, DropdownTrigger as ContextMenuTrigger, DropdownTrigger as DropdownMenuTrigger, DropdownTriggerSize, DropdownTriggerVariant, Form, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Input, Label, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Popover, PopoverClose, PopoverContent, PopoverContentWidth, PopoverPortal, PopoverTrigger, Progress, ProgressCircle, ProgressCircleIndicator, ProgressIndicator, RadioGroup, RadioGroupItem, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, SelectTriggerSize, SelectValue, Slider, SliderRange, SliderThumb, SliderTrack, Switch, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger, VirtualList, VirtualListApi, VirtualListAsChildProps, VirtualListProps, VirtualListRowComponent, VirtualListRowComponentProps, VirtualListRowElement, VirtualListState, VirtualListViewport, VirtualTable, VirtualTableApi, VirtualTableAsChildProps, VirtualTableCellComponent, VirtualTableCellComponentProps, VirtualTableCellElement, VirtualTableColumn, VirtualTableProps, VirtualTableState, VirtualTableViewport, VirtualTableWidth, VisuallyHidden } from "@askrjs/ui";
|
|
90
|
-
export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertHeadingTag, type AlertProps, AlertTitle, type AlertVariant, Aside, type AsideProps, AspectRatio, type AspectRatioAsChildProps, type AspectRatioProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeAsChildProps, type BadgeOwnProps, type BadgeProps, Block, type BlockAlign, type BlockAsChildProps, type BlockBackground, type BlockDirection, type BlockDivProps, type BlockElement, type BlockElementProps, type BlockJustify, type BlockMargin, type BlockNativeProps, type BlockOwnProps, type BlockProps, type BlockRadius, type ResponsiveValue as BlockResponsiveValue, type BlockRowFrom, type BlockShadow, type BlockSize, type BlockSpace, type BlockSpanProps, type BlockZIndex, Box, Brand, BrandLabel, BrandMark, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonAsChildElement, type ButtonAsChildProps, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonNativeProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonWidth, CAT_THEME_NAMES, CAT_THEME_OPTIONS, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type CardVariant, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CatThemeName, CatalogComponentProps, Checkbox, Close, type CloseNativeProps, type CloseOwnProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, DropdownContent as ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DEFAULT_THEME_OPTIONS, DataTable, DatePicker, DatePickerInput, DebouncedInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Direction, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, type DropdownItemVariant, DropdownLabel, DropdownMenu, DropdownContent as DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, DropdownPortal, DropdownSeparator, DropdownTrigger, type DropdownTriggerSize, type DropdownTriggerVariant, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateHeadingTag, type EmptyStateProps, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, type FieldErrorProps, FieldGroup, FieldHint, type FieldHintProps, FieldLabel, FieldLegend, type FieldProps, FieldSeparator, FieldSet, FieldTitle, Footer, FooterContent, type FooterContentProps, FooterDescription, type FooterDescriptionProps, FooterLink, type FooterLinkProps, FooterLinks, type FooterLinksProps, type FooterProps, FooterSection, type FooterSectionProps, FooterTitle, type FooterTitleProps, Form, Grid, Header, type HeaderProps, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Inline, Input, InputGroup, type InputGroupOrientation, type InputGroupProps, InputGroupText, type InputGroupTextAsChildProps, type InputGroupTextProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, Label, Main, type MainProps, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, Navbar as Nav, NavBrand, type NavBrandProps, NavDropdown, type NavDropdownProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, NavLink, type NavLinkProps, Navbar, type NavbarCollapseBreakpoint, type NavbarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, type PageHeaderProps, type PageProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Pill, type PillProps, Pills, type PillsAsChildProps, type PillsProps, Popover, PopoverClose, PopoverContent, type PopoverContentWidth, PopoverPortal, PopoverTrigger, Progress, ProgressCircle, ProgressCircleIndicator, ProgressIndicator, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Section, type SectionProps, Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, type SelectTriggerSize, SelectValue, Separator, type SeparatorAsChildProps, type SeparatorNativeProps, type SeparatorOwnProps, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShellMain, ShellNav, Sidebar, type SidebarButtonProps, type SidebarCollapsible, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, type SidebarPartProps, type SidebarProps, SidebarRail, SidebarScope, type SidebarSide, type SidebarTooltipSide, SidebarTrigger, type SidebarVariant, Skeleton, type SkeletonAsChildProps, type SkeletonOwnProps, type SkeletonProps, Slider, SliderRange, SliderThumb, SliderTrack, Sonner, Spinner, type SpinnerOwnProps, type SpinnerProps, type SpinnerSize, Stack, Stat, StatDescription, StatLabel, StatValue, Switch, Tab, type TabProps, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, type TabsAsChildProps, TabsContent, TabsList, type TabsProps, TabsTrigger, Text, Textarea, type ThemeName, type ThemeOption, ThemePicker, type ThemePickerProps, ThemeScope, type ThemeScopeProps, type ThemeScopeValue, ThemeToggle, type ThemeToggleProps, type ThemeToggleRenderContext, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP, VirtualList, type VirtualListApi, type VirtualListAsChildProps, type VirtualListProps, type VirtualListRowComponent, type VirtualListRowComponentProps, type VirtualListRowElement, type VirtualListState, type VirtualListViewport, VirtualTable, type VirtualTableApi, type VirtualTableAsChildProps, type VirtualTableCellComponent, type VirtualTableCellComponentProps, type VirtualTableCellElement, type VirtualTableColumn, type VirtualTableProps, type VirtualTableState, type VirtualTableViewport, type VirtualTableWidth, VisuallyHidden, theme };
|
|
90
|
+
export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertHeadingTag, type AlertProps, AlertTitle, type AlertVariant, Aside, type AsideProps, AspectRatio, type AspectRatioAsChildProps, type AspectRatioProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeAsChildProps, type BadgeOwnProps, type BadgeProps, Block, type BlockAlign, type BlockAsChildProps, type BlockBackground, type BlockDirection, type BlockDivProps, type BlockElement, type BlockElementProps, type BlockJustify, type BlockMargin, type BlockNativeProps, type BlockOwnProps, type BlockProps, type BlockRadius, type ResponsiveValue as BlockResponsiveValue, type BlockRowFrom, type BlockShadow, type BlockSize, type BlockSpace, type BlockSpanProps, type BlockZIndex, Box, Brand, BrandLabel, BrandMark, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonAsChildElement, type ButtonAsChildProps, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonNativeProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonWidth, CAT_THEME_NAMES, CAT_THEME_OPTIONS, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleHeadingTag, type CardTitleProps, type CardVariant, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CatThemeName, CatalogComponentProps, Checkbox, Close, type CloseNativeProps, type CloseOwnProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, DropdownContent as ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DEFAULT_THEME_OPTIONS, DataTable, DatePicker, DatePickerInput, DebouncedInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Direction, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, type DropdownItemVariant, DropdownLabel, DropdownMenu, DropdownContent as DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, DropdownPortal, DropdownSeparator, DropdownTrigger, type DropdownTriggerSize, type DropdownTriggerVariant, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateHeadingTag, type EmptyStateProps, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, type FieldErrorProps, FieldGroup, FieldHint, type FieldHintProps, FieldLabel, FieldLegend, type FieldProps, FieldSeparator, FieldSet, FieldTitle, Footer, FooterContent, type FooterContentProps, FooterDescription, type FooterDescriptionProps, FooterLink, type FooterLinkProps, FooterLinks, type FooterLinksProps, type FooterProps, FooterSection, type FooterSectionProps, FooterTitle, type FooterTitleProps, Form, Grid, Header, type HeaderProps, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Inline, Input, InputGroup, type InputGroupOrientation, type InputGroupProps, InputGroupText, type InputGroupTextAsChildProps, type InputGroupTextProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, Label, Main, type MainProps, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, Navbar as Nav, NavBrand, type NavBrandProps, NavDropdown, type NavDropdownProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, NavLink, type NavLinkProps, Navbar, type NavbarCollapseBreakpoint, type NavbarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, type PageHeaderProps, type PageProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Pill, type PillProps, Pills, type PillsAsChildProps, type PillsProps, Popover, PopoverClose, PopoverContent, type PopoverContentWidth, PopoverPortal, PopoverTrigger, Progress, ProgressCircle, ProgressCircleIndicator, ProgressIndicator, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Section, type SectionProps, Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, type SelectTriggerSize, SelectValue, Separator, type SeparatorAsChildProps, type SeparatorNativeProps, type SeparatorOwnProps, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShellMain, ShellNav, Sidebar, type SidebarButtonProps, type SidebarCollapsible, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, type SidebarPartProps, type SidebarProps, SidebarRail, SidebarScope, type SidebarSide, type SidebarTooltipSide, SidebarTrigger, type SidebarVariant, Skeleton, type SkeletonAsChildProps, type SkeletonOwnProps, type SkeletonProps, Slider, SliderRange, SliderThumb, SliderTrack, Sonner, Spinner, type SpinnerOwnProps, type SpinnerProps, type SpinnerSize, Stack, Stat, StatDescription, StatLabel, StatValue, Switch, Tab, type TabProps, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, type TabsAsChildProps, TabsContent, TabsList, type TabsProps, TabsTrigger, Text, Textarea, type ThemeName, type ThemeOption, ThemePicker, type ThemePickerProps, ThemeScope, type ThemeScopeProps, type ThemeScopeValue, ThemeToggle, type ThemeToggleProps, type ThemeToggleRenderContext, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP, VirtualList, type VirtualListApi, type VirtualListAsChildProps, type VirtualListProps, type VirtualListRowComponent, type VirtualListRowComponentProps, type VirtualListRowElement, type VirtualListState, type VirtualListViewport, VirtualTable, type VirtualTableApi, type VirtualTableAsChildProps, type VirtualTableCellComponent, type VirtualTableCellComponentProps, type VirtualTableCellElement, type VirtualTableColumn, type VirtualTableProps, type VirtualTableState, type VirtualTableViewport, type VirtualTableWidth, VisuallyHidden, theme };
|
package/dist/surfaces.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import "./components/aspect-ratio/index.js";
|
|
|
7
7
|
import { BadgeAsChildProps, BadgeOwnProps, BadgeProps } from "./components/badge/badge.types.js";
|
|
8
8
|
import { Badge } from "./components/badge/badge.js";
|
|
9
9
|
import "./components/badge/index.js";
|
|
10
|
-
import { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, CardVariant } from "./components/card/card.types.js";
|
|
10
|
+
import { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleHeadingTag, CardTitleProps, CardVariant } from "./components/card/card.types.js";
|
|
11
11
|
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/card/card.js";
|
|
12
12
|
import "./components/card/index.js";
|
|
13
13
|
import { SeparatorAsChildProps, SeparatorNativeProps, SeparatorOwnProps, SeparatorProps } from "./components/separator/separator.types.js";
|
|
@@ -23,4 +23,4 @@ import { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from
|
|
|
23
23
|
import { Stat, StatDescription, StatLabel, StatValue } from "./components/stat/stat.js";
|
|
24
24
|
import "./components/stat/index.js";
|
|
25
25
|
import { Avatar, AvatarAsChildProps, AvatarFallback, AvatarFallbackAsChildProps, AvatarFallbackOwnProps, AvatarFallbackProps, AvatarImage, AvatarImageOwnProps, AvatarImageProps, AvatarLoadingStatus, AvatarOwnProps, AvatarProps, Progress, ProgressCircle, ProgressCircleIndicator, ProgressCircleIndicatorAsChildProps, ProgressCircleIndicatorProps, ProgressCircleOwnProps, ProgressCircleProps, ProgressIndicator, ProgressIndicatorAsChildProps, ProgressIndicatorProps, ProgressOwnProps, ProgressProps, Table, TableAsChildProps, TableBody, TableBodyAsChildProps, TableBodyProps, TableCaption, TableCaptionAsChildProps, TableCaptionProps, TableCell, TableCellAsChildProps, TableCellProps, TableFoot, TableFootAsChildProps, TableFootProps, TableHead, TableHeadAsChildProps, TableHeadProps, TableHeaderCell, TableHeaderCellAsChildProps, TableHeaderCellProps, TableProps, TableRow, TableRowAsChildProps, TableRowProps } from "@askrjs/ui";
|
|
26
|
-
export { Alert, type AlertHeadingTag, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioAsChildProps, type AspectRatioProps, Avatar, type AvatarAsChildProps, AvatarFallback, type AvatarFallbackAsChildProps, type AvatarFallbackOwnProps, type AvatarFallbackProps, AvatarImage, type AvatarImageOwnProps, type AvatarImageProps, type AvatarLoadingStatus, type AvatarOwnProps, type AvatarProps, Badge, type BadgeAsChildProps, type BadgeOwnProps, type BadgeProps, Card, type CardAction, type CardActionProps, type CardContent, type CardContentProps, type CardDescription, type CardDescriptionProps, type CardFooter, type CardFooterProps, type CardHeader, type CardHeaderProps, type CardProps, type CardTitle, type CardTitleProps, type CardVariant, Progress, ProgressCircle, ProgressCircleIndicator, type ProgressCircleIndicatorAsChildProps, type ProgressCircleIndicatorProps, type ProgressCircleOwnProps, type ProgressCircleProps, ProgressIndicator, type ProgressIndicatorAsChildProps, type ProgressIndicatorProps, type ProgressOwnProps, type ProgressProps, Separator, type SeparatorAsChildProps, type SeparatorNativeProps, type SeparatorOwnProps, type SeparatorProps, Skeleton, type SkeletonAsChildProps, type SkeletonOwnProps, type SkeletonProps, Spinner, type SpinnerOwnProps, type SpinnerProps, type SpinnerSize, Stat, StatDescription, type StatDescriptionProps, StatLabel, type StatLabelProps, type StatProps, StatValue, type StatValueProps, Table, type TableAsChildProps, TableBody, type TableBodyAsChildProps, type TableBodyProps, TableCaption, type TableCaptionAsChildProps, type TableCaptionProps, TableCell, type TableCellAsChildProps, type TableCellProps, TableFoot, type TableFootAsChildProps, type TableFootProps, TableHead, type TableHeadAsChildProps, type TableHeadProps, TableHeaderCell, type TableHeaderCellAsChildProps, type TableHeaderCellProps, type TableProps, TableRow, type TableRowAsChildProps, type TableRowProps };
|
|
26
|
+
export { Alert, type AlertHeadingTag, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioAsChildProps, type AspectRatioProps, Avatar, type AvatarAsChildProps, AvatarFallback, type AvatarFallbackAsChildProps, type AvatarFallbackOwnProps, type AvatarFallbackProps, AvatarImage, type AvatarImageOwnProps, type AvatarImageProps, type AvatarLoadingStatus, type AvatarOwnProps, type AvatarProps, Badge, type BadgeAsChildProps, type BadgeOwnProps, type BadgeProps, Card, type CardAction, type CardActionProps, type CardContent, type CardContentProps, type CardDescription, type CardDescriptionProps, type CardFooter, type CardFooterProps, type CardHeader, type CardHeaderProps, type CardProps, type CardTitle, type CardTitleHeadingTag, type CardTitleProps, type CardVariant, Progress, ProgressCircle, ProgressCircleIndicator, type ProgressCircleIndicatorAsChildProps, type ProgressCircleIndicatorProps, type ProgressCircleOwnProps, type ProgressCircleProps, ProgressIndicator, type ProgressIndicatorAsChildProps, type ProgressIndicatorProps, type ProgressOwnProps, type ProgressProps, Separator, type SeparatorAsChildProps, type SeparatorNativeProps, type SeparatorOwnProps, type SeparatorProps, Skeleton, type SkeletonAsChildProps, type SkeletonOwnProps, type SkeletonProps, Spinner, type SpinnerOwnProps, type SpinnerProps, type SpinnerSize, Stat, StatDescription, type StatDescriptionProps, StatLabel, type StatLabelProps, type StatProps, StatValue, type StatValueProps, Table, type TableAsChildProps, TableBody, type TableBodyAsChildProps, type TableBodyProps, TableCaption, type TableCaptionAsChildProps, type TableCaptionProps, TableCell, type TableCellAsChildProps, type TableCellProps, TableFoot, type TableFootAsChildProps, type TableFootProps, TableHead, type TableHeadAsChildProps, type TableHeadProps, TableHeaderCell, type TableHeaderCellAsChildProps, type TableHeaderCellProps, type TableProps, TableRow, type TableRowAsChildProps, type TableRowProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@askrjs/themes",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"description": "Default theme tokens, styles, and component presets for Askr apps.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"askr",
|
|
@@ -328,7 +328,7 @@
|
|
|
328
328
|
"test:checks": "vp test run -c vitest.test.checks.config.ts"
|
|
329
329
|
},
|
|
330
330
|
"devDependencies": {
|
|
331
|
-
"@askrjs/askr": ">=0.0.
|
|
331
|
+
"@askrjs/askr": ">=0.0.64 <0.1.0",
|
|
332
332
|
"@askrjs/ui": ">=0.0.12 <0.1.0",
|
|
333
333
|
"@askrjs/vite": ">=0.0.5 <0.1.0",
|
|
334
334
|
"@tsdown/css": "0.22.8",
|
|
@@ -342,7 +342,7 @@
|
|
|
342
342
|
"vite-plus": "^0.2.4"
|
|
343
343
|
},
|
|
344
344
|
"peerDependencies": {
|
|
345
|
-
"@askrjs/askr": ">=0.0.
|
|
345
|
+
"@askrjs/askr": ">=0.0.64 <0.1.0",
|
|
346
346
|
"@askrjs/ui": ">=0.0.12 <0.1.0"
|
|
347
347
|
},
|
|
348
348
|
"engines": {
|
|
@@ -6,6 +6,17 @@ function getWindowLocation(): Location | null {
|
|
|
6
6
|
return typeof window === "undefined" ? null : window.location;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
export function assertSafeNavigationHref(href: string): void {
|
|
10
|
+
const trimmed = href.trim();
|
|
11
|
+
if (!trimmed || trimmed !== href)
|
|
12
|
+
throw new TypeError("Navigation href must be a non-empty canonical URL.");
|
|
13
|
+
const scheme = /^([a-z][a-z\d+.-]*):/iu.exec(trimmed)?.[1]?.toLowerCase();
|
|
14
|
+
if (scheme && !["http", "https", "mailto", "tel"].includes(scheme))
|
|
15
|
+
throw new TypeError(`Navigation URL scheme is not allowed: ${scheme}`);
|
|
16
|
+
if ([...trimmed].some((character) => character.charCodeAt(0) <= 31))
|
|
17
|
+
throw new TypeError("Navigation href must not contain control characters.");
|
|
18
|
+
}
|
|
19
|
+
|
|
9
20
|
export function resolvePathname(href: string): string | null {
|
|
10
21
|
if (href.startsWith("#")) {
|
|
11
22
|
return null;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { cspNonce } from "@askrjs/askr";
|
|
2
|
+
|
|
1
3
|
const cssPropertyNameCache = new Map<string, string>();
|
|
2
4
|
|
|
3
5
|
function cssPropertyName(name: string): string {
|
|
@@ -59,23 +61,33 @@ const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
|
|
|
59
61
|
const STYLE_CLASS_PREFIX = "ak-style-";
|
|
60
62
|
|
|
61
63
|
const styleClassCache = new Map<string, string>();
|
|
62
|
-
|
|
64
|
+
type StyleRegistry = {
|
|
65
|
+
element: HTMLStyleElement;
|
|
66
|
+
rules: Map<string, { className: string; rule: string }>;
|
|
67
|
+
};
|
|
68
|
+
const registries = new WeakMap<Document, Map<string, StyleRegistry>>();
|
|
69
|
+
const MAX_STYLE_RULES = 512;
|
|
63
70
|
|
|
64
71
|
let nextStyleClassId = 0;
|
|
65
72
|
|
|
66
|
-
function
|
|
73
|
+
function ensureStyleRegistry(nonce: string | undefined): StyleRegistry | null {
|
|
67
74
|
if (typeof document === "undefined") return null;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
if (
|
|
71
|
-
|
|
75
|
+
const key = nonce ?? "";
|
|
76
|
+
let documentRegistries = registries.get(document);
|
|
77
|
+
if (!documentRegistries) {
|
|
78
|
+
documentRegistries = new Map();
|
|
79
|
+
registries.set(document, documentRegistries);
|
|
72
80
|
}
|
|
81
|
+
const current = documentRegistries.get(key);
|
|
82
|
+
if (current?.element.isConnected) return current;
|
|
73
83
|
|
|
74
84
|
const styleElement = document.createElement("style");
|
|
75
85
|
styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
|
|
86
|
+
if (nonce !== undefined) styleElement.nonce = nonce;
|
|
76
87
|
(document.head ?? document.documentElement).append(styleElement);
|
|
77
|
-
|
|
78
|
-
|
|
88
|
+
const registry: StyleRegistry = { element: styleElement, rules: new Map() };
|
|
89
|
+
documentRegistries.set(key, registry);
|
|
90
|
+
return registry;
|
|
79
91
|
}
|
|
80
92
|
|
|
81
93
|
function normalizeDeclarations(declarations: string): string {
|
|
@@ -88,18 +100,31 @@ export function styleDeclarationsToClass(declarations: string | undefined): stri
|
|
|
88
100
|
const normalized = normalizeDeclarations(declarations);
|
|
89
101
|
if (!normalized) return undefined;
|
|
90
102
|
|
|
103
|
+
const nonce = cspNonce();
|
|
104
|
+
const registry = ensureStyleRegistry(nonce);
|
|
105
|
+
const registered = registry?.rules.get(normalized);
|
|
106
|
+
if (registered) return registered.className;
|
|
107
|
+
|
|
91
108
|
let className = styleClassCache.get(normalized);
|
|
92
109
|
if (className === undefined) {
|
|
93
110
|
className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;
|
|
111
|
+
if (styleClassCache.size >= MAX_STYLE_RULES) {
|
|
112
|
+
const oldest = styleClassCache.keys().next().value as string | undefined;
|
|
113
|
+
if (oldest !== undefined) styleClassCache.delete(oldest);
|
|
114
|
+
}
|
|
94
115
|
styleClassCache.set(normalized, className);
|
|
95
116
|
}
|
|
96
117
|
|
|
97
|
-
if (
|
|
98
|
-
const styleElement =
|
|
118
|
+
if (registry) {
|
|
119
|
+
const styleElement = registry.element;
|
|
99
120
|
if (styleElement) {
|
|
121
|
+
if (registry.rules.size >= MAX_STYLE_RULES)
|
|
122
|
+
throw new RangeError("Theme style registry capacity exceeded.");
|
|
100
123
|
const rule = `.${className}{${normalized}}`;
|
|
101
|
-
|
|
102
|
-
|
|
124
|
+
registry.rules.set(normalized, { className, rule });
|
|
125
|
+
styleElement.textContent = Array.from(registry.rules.values(), (entry) => entry.rule).join(
|
|
126
|
+
"\n",
|
|
127
|
+
);
|
|
103
128
|
}
|
|
104
129
|
}
|
|
105
130
|
|
|
@@ -41,14 +41,14 @@ export function CardHeader(props: CardHeaderProps): JSX.Element {
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
export function CardTitle(props: CardTitleProps): JSX.Element {
|
|
44
|
-
const { children, class: className, ref, ...rest } = props;
|
|
44
|
+
const { children, class: className, ref, titleAs: TitleTag = "h3", ...rest } = props;
|
|
45
45
|
const finalProps = mergeProps(rest, {
|
|
46
46
|
ref,
|
|
47
47
|
class: classes("card-title", className),
|
|
48
48
|
"data-slot": "card-title",
|
|
49
49
|
});
|
|
50
50
|
|
|
51
|
-
return <
|
|
51
|
+
return <TitleTag {...finalProps}>{children}</TitleTag>;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
export function CardDescription(props: CardDescriptionProps): JSX.Element {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Ref } from "@askrjs/askr/foundations/utilities";
|
|
2
2
|
|
|
3
3
|
export type CardVariant = "default" | "raised";
|
|
4
|
+
export type CardTitleHeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
4
5
|
|
|
5
6
|
type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
|
|
6
7
|
type HeadingProps = Omit<JSX.IntrinsicElements["h3"], "children" | "ref">;
|
|
@@ -19,6 +20,8 @@ export type CardHeaderProps = DivProps & {
|
|
|
19
20
|
|
|
20
21
|
export type CardTitleProps = HeadingProps & {
|
|
21
22
|
children?: unknown;
|
|
23
|
+
/** Choose the level that follows the surrounding document hierarchy. */
|
|
24
|
+
titleAs?: CardTitleHeadingTag;
|
|
22
25
|
ref?: Ref<HTMLHeadingElement>;
|
|
23
26
|
};
|
|
24
27
|
|
|
@@ -4,7 +4,7 @@ import { Block } from "../block";
|
|
|
4
4
|
import { classes } from "../_internal/classes";
|
|
5
5
|
import { mergeProps } from "../_internal/merge-props";
|
|
6
6
|
import { intrinsicElement } from "../_internal/jsx";
|
|
7
|
-
import { resolvePathname } from "../_internal/pathname";
|
|
7
|
+
import { assertSafeNavigationHref, resolvePathname } from "../_internal/pathname";
|
|
8
8
|
import type {
|
|
9
9
|
NavItemAsChildProps,
|
|
10
10
|
NavItemProps,
|
|
@@ -114,6 +114,7 @@ function renderRoutedLink(
|
|
|
114
114
|
if (!href) {
|
|
115
115
|
throw new Error("Nav link requires href or to.");
|
|
116
116
|
}
|
|
117
|
+
assertSafeNavigationHref(href);
|
|
117
118
|
const inheritedSlot =
|
|
118
119
|
options.inheritSlot && typeof (rest as Record<string, unknown>)["data-slot"] === "string"
|
|
119
120
|
? String((rest as Record<string, unknown>)["data-slot"])
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Accessibility contract for Badge.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
export const BADGE_A11Y_CONTRACT = {
|
|
6
|
-
DATA_ATTRIBUTES: {
|
|
7
|
-
slot: "data-slot" as const,
|
|
8
|
-
},
|
|
9
|
-
MARKER: "data-badge" as const,
|
|
10
|
-
CONTENT: {
|
|
11
|
-
textAllowed: true,
|
|
12
|
-
},
|
|
13
|
-
} as const;
|
|
14
|
-
|
|
15
|
-
export type BadgeA11yContract = typeof BADGE_A11Y_CONTRACT;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export const CONTAINER_A11Y_CONTRACT = {
|
|
2
|
-
DATA_ATTRIBUTES: {
|
|
3
|
-
slot: "data-slot" as const,
|
|
4
|
-
layout: "data-ak-layout" as const,
|
|
5
|
-
},
|
|
6
|
-
SLOT_VALUES: {
|
|
7
|
-
root: "container" as const,
|
|
8
|
-
},
|
|
9
|
-
} as const;
|
|
10
|
-
|
|
11
|
-
export type ContainerA11yContract = typeof CONTAINER_A11Y_CONTRACT;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export const HEADER_A11Y_CONTRACT = {
|
|
2
|
-
DATA_ATTRIBUTES: {
|
|
3
|
-
slot: "data-slot" as const,
|
|
4
|
-
position: "data-position" as const,
|
|
5
|
-
},
|
|
6
|
-
SLOT_VALUES: {
|
|
7
|
-
root: "header" as const,
|
|
8
|
-
},
|
|
9
|
-
} as const;
|
|
10
|
-
|
|
11
|
-
export type HeaderA11yContract = typeof HEADER_A11Y_CONTRACT;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export const SECTION_A11Y_CONTRACT = {
|
|
2
|
-
DATA_ATTRIBUTES: {
|
|
3
|
-
slot: "data-slot" as const,
|
|
4
|
-
layout: "data-ak-layout" as const,
|
|
5
|
-
},
|
|
6
|
-
SLOT_VALUES: {
|
|
7
|
-
root: "section" as const,
|
|
8
|
-
},
|
|
9
|
-
} as const;
|
|
10
|
-
|
|
11
|
-
export type SectionA11yContract = typeof SECTION_A11Y_CONTRACT;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WAI-ARIA Separator Pattern.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
export const SEPARATOR_A11Y_CONTRACT = {
|
|
6
|
-
ROLE: "separator" as const,
|
|
7
|
-
DECORATIVE_ROLE: "presentation" as const,
|
|
8
|
-
ORIENTATION_ATTRIBUTE: "aria-orientation" as const,
|
|
9
|
-
DATA_ATTRIBUTES: {
|
|
10
|
-
orientation: "data-orientation" as const,
|
|
11
|
-
},
|
|
12
|
-
DEFAULT_ORIENTATION: "horizontal" as const,
|
|
13
|
-
} as const;
|
|
14
|
-
|
|
15
|
-
export type SeparatorA11yContract = typeof SEPARATOR_A11Y_CONTRACT;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Accessibility contract for Skeleton.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
export const SKELETON_A11Y_CONTRACT = {
|
|
6
|
-
DATA_ATTRIBUTES: {
|
|
7
|
-
slot: "data-slot" as const,
|
|
8
|
-
},
|
|
9
|
-
MARKER: "data-skeleton" as const,
|
|
10
|
-
DECORATIVE_ATTRIBUTE: "aria-hidden" as const,
|
|
11
|
-
DECORATIVE_VALUE: "true" as const,
|
|
12
|
-
} as const;
|
|
13
|
-
|
|
14
|
-
export type SkeletonA11yContract = typeof SKELETON_A11Y_CONTRACT;
|