@askrjs/themes 0.0.21 → 0.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/capabilities.json +36 -0
- package/dist/components/_internal/jsx.js +7 -2
- package/dist/components/_internal/jsx.js.map +1 -1
- package/dist/components/_internal/style.js.map +1 -1
- package/dist/components/alert/alert.js.map +1 -1
- package/dist/components/brand/brand.js +12 -10
- package/dist/components/brand/brand.js.map +1 -1
- package/dist/components/card/card.js +43 -36
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/catalog.js +18 -14
- package/dist/components/catalog.js.map +1 -1
- package/dist/components/close/close.js.map +1 -1
- package/dist/components/empty-state/empty-state.js.map +1 -1
- package/dist/components/field/field.js +20 -17
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/footer/footer.js +36 -30
- package/dist/components/footer/footer.js.map +1 -1
- package/dist/components/grid/grid.js +2 -1
- package/dist/components/grid/grid.js.map +1 -1
- package/dist/components/nav/nav.js.map +1 -1
- package/dist/components/navbar/navbar.js.map +1 -1
- package/dist/components/overlays/dropdown-content.js.map +1 -1
- package/dist/components/page/page.js.map +1 -1
- package/dist/components/page-header/page-header.js.map +1 -1
- package/dist/components/sidebar/sidebar.js +6 -6
- package/dist/components/sidebar/sidebar.js.map +1 -1
- package/dist/components/skeleton/skeleton.js +2 -1
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/spinner/spinner.js.map +1 -1
- package/dist/components/stat/stat.js +24 -20
- package/dist/components/stat/stat.js.map +1 -1
- package/dist/components/theme/theme.js.map +1 -1
- package/dist/components/toolbar/toolbar.js.map +1 -1
- package/package.json +20 -16
- package/src/components/_internal/jsx.ts +11 -1
- package/src/components/sidebar/sidebar.tsx +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { classes } from "../_internal/classes.js";
|
|
2
2
|
import { mergeProps } from "../_internal/merge-props.js";
|
|
3
|
-
import { intrinsicElement } from "../_internal/jsx.js";
|
|
3
|
+
import { intrinsicElement, normalizeAriaProps } from "../_internal/jsx.js";
|
|
4
4
|
import { Block } from "../block/block.js";
|
|
5
5
|
import { jsx } from "@askrjs/askr/jsx-runtime";
|
|
6
6
|
import { Slot } from "@askrjs/askr/foundations";
|
|
@@ -13,7 +13,7 @@ function sidebarTooltipProps(tooltip, tooltipSide) {
|
|
|
13
13
|
}
|
|
14
14
|
function sidebarPart(props, slot, element = "div") {
|
|
15
15
|
const { as, asChild, children, class: className, ...rest } = props;
|
|
16
|
-
const finalProps = mergeProps(rest, {
|
|
16
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
17
17
|
class: className,
|
|
18
18
|
"data-slot": slot
|
|
19
19
|
});
|
|
@@ -74,7 +74,7 @@ function SidebarMenuItem(props) {
|
|
|
74
74
|
}
|
|
75
75
|
function SidebarMenuButton(props) {
|
|
76
76
|
const { active, asChild, children, class: className, size, tooltip, tooltipSide, type = "button", variant, ...rest } = props;
|
|
77
|
-
const finalProps = mergeProps(rest, {
|
|
77
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
78
78
|
class: classes(className),
|
|
79
79
|
"data-active": active ? "true" : void 0,
|
|
80
80
|
"data-size": size && size !== "default" ? size : void 0,
|
|
@@ -95,7 +95,7 @@ function SidebarMenuButton(props) {
|
|
|
95
95
|
}
|
|
96
96
|
function SidebarMenuAction(props) {
|
|
97
97
|
const { asChild, children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
|
|
98
|
-
const finalProps = mergeProps(rest, {
|
|
98
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
99
99
|
class: classes(className),
|
|
100
100
|
"data-slot": "sidebar-menu-action",
|
|
101
101
|
...sidebarTooltipProps(tooltip, tooltipSide)
|
|
@@ -116,7 +116,7 @@ function SidebarMenuBadge(props) {
|
|
|
116
116
|
}
|
|
117
117
|
function SidebarRail(props) {
|
|
118
118
|
const { asChild, children, class: className, type = "button", ...rest } = props;
|
|
119
|
-
const finalProps = mergeProps(rest, {
|
|
119
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
120
120
|
class: classes(className),
|
|
121
121
|
"data-slot": "sidebar-rail"
|
|
122
122
|
});
|
|
@@ -133,7 +133,7 @@ function SidebarRail(props) {
|
|
|
133
133
|
}
|
|
134
134
|
function SidebarTrigger(props) {
|
|
135
135
|
const { asChild, children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
|
|
136
|
-
const finalProps = mergeProps(rest, {
|
|
136
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
137
137
|
class: classes("btn btn-ghost btn-icon", className),
|
|
138
138
|
"data-slot": "sidebar-trigger",
|
|
139
139
|
...sidebarTooltipProps(tooltip, tooltipSide)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.js","names":[],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { Slot } from \"@askrjs/askr/foundations\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport type {\n SidebarButtonProps,\n SidebarPartProps,\n SidebarProps,\n SidebarTooltipSide,\n} from \"./sidebar.types\";\n\nfunction sidebarTooltipProps(\n tooltip: string | undefined,\n tooltipSide: SidebarTooltipSide | undefined,\n): Record<string, string | undefined> {\n return {\n \"data-tooltip\": tooltip,\n \"data-tooltip-side\": tooltip ? tooltipSide : undefined,\n };\n}\n\nfunction sidebarPart(\n props: SidebarPartProps,\n slot: string,\n element: keyof JSX.IntrinsicElements = \"div\",\n): JSX.Element {\n const { as, asChild, children, class: className, ...rest } = props;\n const finalProps = mergeProps(rest, {\n class: 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(String(as ?? element), finalProps, children);\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n const {\n children,\n collapsible = \"offcanvas\",\n side = \"left\",\n variant = \"sidebar\",\n width = \"sidebar\",\n shrink = false,\n ...rest\n } = props;\n\n return (\n <Block\n as=\"aside\"\n width={width}\n shrink={shrink}\n minHeight=\"screen\"\n padding=\"md\"\n gap=\"lg\"\n borderRight={true}\n {...rest}\n data-collapsible={collapsible}\n data-side={side}\n data-slot=\"sidebar\"\n data-variant={variant}\n >\n {children}\n </Block>\n );\n}\n\nexport function SidebarScope(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-scope\");\n}\n\nexport function SidebarInset(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-inset\", \"main\");\n}\n\nexport function SidebarContent(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-content\");\n}\n\nexport function SidebarHeader(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-header\");\n}\n\nexport function SidebarFooter(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-footer\");\n}\n\nexport function SidebarGroup(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-group\");\n}\n\nexport function SidebarGroupLabel(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-group-label\");\n}\n\nexport function SidebarGroupContent(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-group-content\");\n}\n\nexport function SidebarMenu(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-menu\", \"ul\");\n}\n\nexport function SidebarMenuItem(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-menu-item\", \"li\");\n}\n\nexport function SidebarMenuButton(props: SidebarButtonProps): JSX.Element {\n const {\n active,\n asChild,\n children,\n class: className,\n size,\n tooltip,\n tooltipSide,\n type = \"button\",\n variant,\n ...rest\n } = props;\n const finalProps = mergeProps(rest, {\n class: classes(className),\n \"data-active\": active ? \"true\" : undefined,\n \"data-size\": size && size !== \"default\" ? size : undefined,\n \"data-slot\": \"sidebar-menu-button\",\n ...sidebarTooltipProps(tooltip, tooltipSide),\n \"data-variant\": variant && variant !== \"default\" ? variant : undefined,\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n }\n\n return (\n <button type={type as \"button\" | \"submit\" | \"reset\" | undefined} {...finalProps}>\n {children}\n </button>\n );\n}\n\nexport function SidebarMenuAction(props: SidebarButtonProps): JSX.Element {\n const {\n asChild,\n children,\n class: className,\n tooltip,\n tooltipSide,\n type = \"button\",\n ...rest\n } = props;\n const finalProps = mergeProps(rest, {\n class: classes(className),\n \"data-slot\": \"sidebar-menu-action\",\n ...sidebarTooltipProps(tooltip, tooltipSide),\n });\n if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n return (\n <button type={type as \"button\" | \"submit\" | \"reset\" | undefined} {...finalProps}>\n {children}\n </button>\n );\n}\n\nexport function SidebarMenuBadge(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-menu-badge\", \"span\");\n}\n\nexport function SidebarRail(props: SidebarButtonProps): JSX.Element {\n const { asChild, children, class: className, type = \"button\", ...rest } = props;\n const finalProps = mergeProps(rest, {\n class: classes(className),\n \"data-slot\": \"sidebar-rail\",\n });\n if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n return (\n <button type={type as \"button\" | \"submit\" | \"reset\" | undefined} {...finalProps}>\n {children}\n </button>\n );\n}\n\nexport function SidebarTrigger(props: SidebarButtonProps): JSX.Element {\n const {\n asChild,\n children,\n class: className,\n tooltip,\n tooltipSide,\n type = \"button\",\n ...rest\n } = props;\n const finalProps = mergeProps(rest, {\n class: classes(\"btn btn-ghost btn-icon\", className),\n \"data-slot\": \"sidebar-trigger\",\n ...sidebarTooltipProps(tooltip, tooltipSide),\n });\n if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n return (\n <button type={type as \"button\" | \"submit\" | \"reset\" | undefined} {...finalProps}>\n {children}\n </button>\n );\n}\n"],"mappings":";;;;;;;AAaA,SAAS,oBACP,SACA,aACoC;CACpC,OAAO;EACL,gBAAgB;EAChB,qBAAqB,UAAU,cAAc,KAAA;CAC/C;AACF;AAEA,SAAS,YACP,OACA,MACA,UAAuC,OAC1B;CACb,MAAM,EAAE,IAAI,SAAS,UAAU,OAAO,WAAW,GAAG,SAAS;CAC7D,MAAM,aAAa,WAAW,
|
|
1
|
+
{"version":3,"file":"sidebar.js","names":[],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { Slot } from \"@askrjs/askr/foundations\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement, normalizeAriaProps } from \"../_internal/jsx\";\nimport type {\n SidebarButtonProps,\n SidebarPartProps,\n SidebarProps,\n SidebarTooltipSide,\n} from \"./sidebar.types\";\n\nfunction sidebarTooltipProps(\n tooltip: string | undefined,\n tooltipSide: SidebarTooltipSide | undefined,\n): Record<string, string | undefined> {\n return {\n \"data-tooltip\": tooltip,\n \"data-tooltip-side\": tooltip ? tooltipSide : undefined,\n };\n}\n\nfunction sidebarPart(\n props: SidebarPartProps,\n slot: string,\n element: keyof JSX.IntrinsicElements = \"div\",\n): JSX.Element {\n const { as, asChild, children, class: className, ...rest } = props;\n const finalProps = mergeProps(normalizeAriaProps(rest), {\n class: 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(String(as ?? element), finalProps, children);\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n const {\n children,\n collapsible = \"offcanvas\",\n side = \"left\",\n variant = \"sidebar\",\n width = \"sidebar\",\n shrink = false,\n ...rest\n } = props;\n\n return (\n <Block\n as=\"aside\"\n width={width}\n shrink={shrink}\n minHeight=\"screen\"\n padding=\"md\"\n gap=\"lg\"\n borderRight={true}\n {...rest}\n data-collapsible={collapsible}\n data-side={side}\n data-slot=\"sidebar\"\n data-variant={variant}\n >\n {children}\n </Block>\n );\n}\n\nexport function SidebarScope(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-scope\");\n}\n\nexport function SidebarInset(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-inset\", \"main\");\n}\n\nexport function SidebarContent(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-content\");\n}\n\nexport function SidebarHeader(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-header\");\n}\n\nexport function SidebarFooter(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-footer\");\n}\n\nexport function SidebarGroup(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-group\");\n}\n\nexport function SidebarGroupLabel(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-group-label\");\n}\n\nexport function SidebarGroupContent(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-group-content\");\n}\n\nexport function SidebarMenu(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-menu\", \"ul\");\n}\n\nexport function SidebarMenuItem(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-menu-item\", \"li\");\n}\n\nexport function SidebarMenuButton(props: SidebarButtonProps): JSX.Element {\n const {\n active,\n asChild,\n children,\n class: className,\n size,\n tooltip,\n tooltipSide,\n type = \"button\",\n variant,\n ...rest\n } = props;\n const finalProps = mergeProps(normalizeAriaProps(rest), {\n class: classes(className),\n \"data-active\": active ? \"true\" : undefined,\n \"data-size\": size && size !== \"default\" ? size : undefined,\n \"data-slot\": \"sidebar-menu-button\",\n ...sidebarTooltipProps(tooltip, tooltipSide),\n \"data-variant\": variant && variant !== \"default\" ? variant : undefined,\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n }\n\n return (\n <button type={type as \"button\" | \"submit\" | \"reset\" | undefined} {...finalProps}>\n {children}\n </button>\n );\n}\n\nexport function SidebarMenuAction(props: SidebarButtonProps): JSX.Element {\n const {\n asChild,\n children,\n class: className,\n tooltip,\n tooltipSide,\n type = \"button\",\n ...rest\n } = props;\n const finalProps = mergeProps(normalizeAriaProps(rest), {\n class: classes(className),\n \"data-slot\": \"sidebar-menu-action\",\n ...sidebarTooltipProps(tooltip, tooltipSide),\n });\n if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n return (\n <button type={type as \"button\" | \"submit\" | \"reset\" | undefined} {...finalProps}>\n {children}\n </button>\n );\n}\n\nexport function SidebarMenuBadge(props: SidebarPartProps): JSX.Element {\n return sidebarPart(props, \"sidebar-menu-badge\", \"span\");\n}\n\nexport function SidebarRail(props: SidebarButtonProps): JSX.Element {\n const { asChild, children, class: className, type = \"button\", ...rest } = props;\n const finalProps = mergeProps(normalizeAriaProps(rest), {\n class: classes(className),\n \"data-slot\": \"sidebar-rail\",\n });\n if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n return (\n <button type={type as \"button\" | \"submit\" | \"reset\" | undefined} {...finalProps}>\n {children}\n </button>\n );\n}\n\nexport function SidebarTrigger(props: SidebarButtonProps): JSX.Element {\n const {\n asChild,\n children,\n class: className,\n tooltip,\n tooltipSide,\n type = \"button\",\n ...rest\n } = props;\n const finalProps = mergeProps(normalizeAriaProps(rest), {\n class: classes(\"btn btn-ghost btn-icon\", className),\n \"data-slot\": \"sidebar-trigger\",\n ...sidebarTooltipProps(tooltip, tooltipSide),\n });\n if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n return (\n <button type={type as \"button\" | \"submit\" | \"reset\" | undefined} {...finalProps}>\n {children}\n </button>\n );\n}\n"],"mappings":"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"}
|
|
@@ -17,9 +17,10 @@ function Skeleton(props) {
|
|
|
17
17
|
const inlineSize = resolveSkeletonDimension(width);
|
|
18
18
|
if (blockSize !== void 0) dimensions.blockSize = blockSize;
|
|
19
19
|
if (inlineSize !== void 0) dimensions.inlineSize = inlineSize;
|
|
20
|
+
const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(dimensions, style));
|
|
20
21
|
const finalProps = mergeProps(rest, {
|
|
21
22
|
ref,
|
|
22
|
-
class: classes(classProp, className,
|
|
23
|
+
class: classes(classProp, className, layoutClass),
|
|
23
24
|
"data-slot": "skeleton",
|
|
24
25
|
"data-skeleton": "true",
|
|
25
26
|
"aria-hidden": "true"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeLayoutStyles } from \"../_internal/block-layout\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { SkeletonAsChildProps, SkeletonProps } from \"./skeleton.types\";\n\nfunction resolveSkeletonDimension(value: string | number | undefined): string | undefined {\n if (typeof value === \"number\") return `${value}px`;\n return value;\n}\n\nexport function Skeleton(props: SkeletonProps): JSX.Element;\nexport function Skeleton(props: SkeletonAsChildProps): JSX.Element;\nexport function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {\n const {\n asChild,\n children,\n class: classProp,\n className,\n height,\n ref,\n style,\n width,\n ...rest\n } = props as (SkeletonProps | SkeletonAsChildProps) & {\n class?: unknown;\n className?: unknown;\n style?: unknown;\n };\n const dimensions: Record<string, string | number> = {};\n const blockSize = resolveSkeletonDimension(height);\n const inlineSize = resolveSkeletonDimension(width);\n if (blockSize !== undefined) dimensions.blockSize = blockSize;\n if (inlineSize !== undefined) dimensions.inlineSize = inlineSize;\n const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(dimensions, style));\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(classProp, className, layoutClass),\n \"data-slot\": \"skeleton\",\n \"data-skeleton\": \"true\",\n \"aria-hidden\": \"true\",\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children} />;\n }\n\n return intrinsicElement(\"div\", finalProps, children);\n}\n"],"mappings":";;;;;;;;AASA,SAAS,yBAAyB,OAAwD;CACxF,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,MAAM;CAC/C,OAAO;AACT;AAIA,SAAgB,SAAS,OAA6C;CACpE,MAAM,EACJ,SACA,UACA,OAAO,WACP,WACA,QACA,KACA,OACA,OACA,GAAG,SACD;CAKJ,MAAM,aAA8C,CAAC;CACrD,MAAM,YAAY,yBAAyB,MAAM;CACjD,MAAM,aAAa,yBAAyB,KAAK;CACjD,IAAI,cAAc,KAAA,GAAW,WAAW,YAAY;CACpD,IAAI,eAAe,KAAA,GAAW,WAAW,aAAa;
|
|
1
|
+
{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeLayoutStyles } from \"../_internal/block-layout\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { SkeletonAsChildProps, SkeletonProps } from \"./skeleton.types\";\n\nfunction resolveSkeletonDimension(value: string | number | undefined): string | undefined {\n if (typeof value === \"number\") return `${value}px`;\n return value;\n}\n\nexport function Skeleton(props: SkeletonProps): JSX.Element;\nexport function Skeleton(props: SkeletonAsChildProps): JSX.Element;\nexport function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {\n const {\n asChild,\n children,\n class: classProp,\n className,\n height,\n ref,\n style,\n width,\n ...rest\n } = props as (SkeletonProps | SkeletonAsChildProps) & {\n class?: unknown;\n className?: unknown;\n style?: unknown;\n };\n const dimensions: Record<string, string | number> = {};\n const blockSize = resolveSkeletonDimension(height);\n const inlineSize = resolveSkeletonDimension(width);\n if (blockSize !== undefined) dimensions.blockSize = blockSize;\n if (inlineSize !== undefined) dimensions.inlineSize = inlineSize;\n const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(dimensions, style));\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(classProp, className, layoutClass),\n \"data-slot\": \"skeleton\",\n \"data-skeleton\": \"true\",\n \"aria-hidden\": \"true\",\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children} />;\n }\n\n return intrinsicElement(\"div\", finalProps, children);\n}\n"],"mappings":";;;;;;;;AASA,SAAS,yBAAyB,OAAwD;CACxF,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,MAAM;CAC/C,OAAO;AACT;AAIA,SAAgB,SAAS,OAA6C;CACpE,MAAM,EACJ,SACA,UACA,OAAO,WACP,WACA,QACA,KACA,OACA,OACA,GAAG,SACD;CAKJ,MAAM,aAA8C,CAAC;CACrD,MAAM,YAAY,yBAAyB,MAAM;CACjD,MAAM,aAAa,yBAAyB,KAAK;CACjD,IAAI,cAAc,KAAA,GAAW,WAAW,YAAY;CACpD,IAAI,eAAe,KAAA,GAAW,WAAW,aAAa;CACtD,MAAM,cAAc,yBAAyB,kBAAkB,YAAY,KAAK,CAAC;CACjF,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,WAAW,WAAW,WAAW;EAChD,aAAa;EACb,iBAAiB;EACjB,eAAe;CACjB,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,iBAAiB,OAAO,YAAY,QAAQ;AACrD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { ProgressCircle, ProgressCircleIndicator } from \"@askrjs/ui\";\nimport type { SpinnerProps } from \"./spinner.types\";\n\nexport function Spinner(props: SpinnerProps): JSX.Element {\n const {\n label,\n size,\n \"aria-label\": ariaLabel,\n ...rest\n } = props as SpinnerProps & {\n \"aria-label\"?: string;\n };\n\n return (\n <ProgressCircle\n {...rest}\n aria-label={ariaLabel ?? label ?? \"Loading\"}\n data-spinner=\"true\"\n data-size={size && size !== \"md\" ? size : undefined}\n value={null}\n getValueLabel={() => label ?? \"Loading\"}\n >\n <ProgressCircleIndicator />\n </ProgressCircle>\n );\n}\n"],"mappings":";;;AAIA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EACJ,OACA,MACA,cAAc,WACd,GAAG,SACD;CAIJ,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,cAAY,aAAa,SAAS;EAClC,gBAAa;EACb,aAAW,QAAQ,SAAS,OAAO,OAAO,KAAA;EAC1C,OAAO;EACP,qBAAqB,SAAS;
|
|
1
|
+
{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { ProgressCircle, ProgressCircleIndicator } from \"@askrjs/ui\";\nimport type { SpinnerProps } from \"./spinner.types\";\n\nexport function Spinner(props: SpinnerProps): JSX.Element {\n const {\n label,\n size,\n \"aria-label\": ariaLabel,\n ...rest\n } = props as SpinnerProps & {\n \"aria-label\"?: string;\n };\n\n return (\n <ProgressCircle\n {...rest}\n aria-label={ariaLabel ?? label ?? \"Loading\"}\n data-spinner=\"true\"\n data-size={size && size !== \"md\" ? size : undefined}\n value={null}\n getValueLabel={() => label ?? \"Loading\"}\n >\n <ProgressCircleIndicator />\n </ProgressCircle>\n );\n}\n"],"mappings":";;;AAIA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EACJ,OACA,MACA,cAAc,WACd,GAAG,SACD;CAIJ,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,cAAY,aAAa,SAAS;EAClC,gBAAa;EACb,aAAW,QAAQ,SAAS,OAAO,OAAO,KAAA;EAC1C,OAAO;EACP,qBAAqB,SAAS;EAE9B,UAAA,oBAAC,yBAAD,CAA0B,CAAA;CACZ,CAAA;AAEpB"}
|
|
@@ -4,45 +4,49 @@ import { jsx } from "@askrjs/askr/jsx-runtime";
|
|
|
4
4
|
//#region src/components/stat/stat.tsx
|
|
5
5
|
function Stat(props) {
|
|
6
6
|
const { children, class: className, ref, ...rest } = props;
|
|
7
|
+
const finalProps = mergeProps(rest, {
|
|
8
|
+
ref,
|
|
9
|
+
class: classes("stat", className),
|
|
10
|
+
"data-slot": "stat"
|
|
11
|
+
});
|
|
7
12
|
return /* @__PURE__ */ jsx("div", {
|
|
8
|
-
...
|
|
9
|
-
ref,
|
|
10
|
-
class: classes("stat", className),
|
|
11
|
-
"data-slot": "stat"
|
|
12
|
-
}),
|
|
13
|
+
...finalProps,
|
|
13
14
|
children
|
|
14
15
|
});
|
|
15
16
|
}
|
|
16
17
|
function StatLabel(props) {
|
|
17
18
|
const { children, class: className, ref, ...rest } = props;
|
|
19
|
+
const finalProps = mergeProps(rest, {
|
|
20
|
+
ref,
|
|
21
|
+
class: classes("stat-label", className),
|
|
22
|
+
"data-slot": "stat-label"
|
|
23
|
+
});
|
|
18
24
|
return /* @__PURE__ */ jsx("p", {
|
|
19
|
-
...
|
|
20
|
-
ref,
|
|
21
|
-
class: classes("stat-label", className),
|
|
22
|
-
"data-slot": "stat-label"
|
|
23
|
-
}),
|
|
25
|
+
...finalProps,
|
|
24
26
|
children
|
|
25
27
|
});
|
|
26
28
|
}
|
|
27
29
|
function StatValue(props) {
|
|
28
30
|
const { children, class: className, ref, ...rest } = props;
|
|
31
|
+
const finalProps = mergeProps(rest, {
|
|
32
|
+
ref,
|
|
33
|
+
class: classes("stat-value", className),
|
|
34
|
+
"data-slot": "stat-value"
|
|
35
|
+
});
|
|
29
36
|
return /* @__PURE__ */ jsx("p", {
|
|
30
|
-
...
|
|
31
|
-
ref,
|
|
32
|
-
class: classes("stat-value", className),
|
|
33
|
-
"data-slot": "stat-value"
|
|
34
|
-
}),
|
|
37
|
+
...finalProps,
|
|
35
38
|
children
|
|
36
39
|
});
|
|
37
40
|
}
|
|
38
41
|
function StatDescription(props) {
|
|
39
42
|
const { children, class: className, ref, ...rest } = props;
|
|
43
|
+
const finalProps = mergeProps(rest, {
|
|
44
|
+
ref,
|
|
45
|
+
class: classes("stat-description", className),
|
|
46
|
+
"data-slot": "stat-description"
|
|
47
|
+
});
|
|
40
48
|
return /* @__PURE__ */ jsx("p", {
|
|
41
|
-
...
|
|
42
|
-
ref,
|
|
43
|
-
class: classes("stat-description", className),
|
|
44
|
-
"data-slot": "stat-description"
|
|
45
|
-
}),
|
|
49
|
+
...finalProps,
|
|
46
50
|
children
|
|
47
51
|
});
|
|
48
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat.js","names":[],"sources":["../../../src/components/stat/stat.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from \"./stat.types\";\n\nexport function Stat(props: StatProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"stat\", className),\n \"data-slot\": \"stat\",\n });\n\n return <div {...finalProps}>{children}</div>;\n}\n\nexport function StatLabel(props: StatLabelProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"stat-label\", className),\n \"data-slot\": \"stat-label\",\n });\n\n return <p {...finalProps}>{children}</p>;\n}\n\nexport function StatValue(props: StatValueProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"stat-value\", className),\n \"data-slot\": \"stat-value\",\n });\n\n return <p {...finalProps}>{children}</p>;\n}\n\nexport function StatDescription(props: StatDescriptionProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"stat-description\", className),\n \"data-slot\": \"stat-description\",\n });\n\n return <p {...finalProps}>{children}</p>;\n}\n"],"mappings":";;;;AAKA,SAAgB,KAAK,OAA+B;CAClD,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;
|
|
1
|
+
{"version":3,"file":"stat.js","names":[],"sources":["../../../src/components/stat/stat.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from \"./stat.types\";\n\nexport function Stat(props: StatProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"stat\", className),\n \"data-slot\": \"stat\",\n });\n\n return <div {...finalProps}>{children}</div>;\n}\n\nexport function StatLabel(props: StatLabelProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"stat-label\", className),\n \"data-slot\": \"stat-label\",\n });\n\n return <p {...finalProps}>{children}</p>;\n}\n\nexport function StatValue(props: StatValueProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"stat-value\", className),\n \"data-slot\": \"stat-value\",\n });\n\n return <p {...finalProps}>{children}</p>;\n}\n\nexport function StatDescription(props: StatDescriptionProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"stat-description\", className),\n \"data-slot\": \"stat-description\",\n });\n\n return <p {...finalProps}>{children}</p>;\n}\n"],"mappings":";;;;AAKA,SAAgB,KAAK,OAA+B;CAClD,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CACrD,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,QAAQ,SAAS;EAChC,aAAa;CACf,CAAC;CAED,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;CAAc,CAAA;AAC7C;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CACrD,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,cAAc,SAAS;EACtC,aAAa;CACf,CAAC;CAED,OAAO,oBAAC,KAAD;EAAG,GAAI;EAAa;CAAY,CAAA;AACzC;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CACrD,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,cAAc,SAAS;EACtC,aAAa;CACf,CAAC;CAED,OAAO,oBAAC,KAAD;EAAG,GAAI;EAAa;CAAY,CAAA;AACzC;AAEA,SAAgB,gBAAgB,OAA0C;CACxE,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CACrD,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,oBAAoB,SAAS;EAC5C,aAAa;CACf,CAAC;CAED,OAAO,oBAAC,KAAD;EAAG,GAAI;EAAa;CAAY,CAAA;AACzC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { defineScope, getSignal, readScope, state } from \"@askrjs/askr\";\nimport { cloneElement, isElement, type JSXElement } from \"@askrjs/askr/foundations/structures\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\nexport type ThemeOption = {\n value: ThemeName;\n label: string;\n};\n\nexport type ThemeScopeValue = {\n theme: () => ThemeName;\n resolvedSystemTheme: () => \"light\" | \"dark\";\n setTheme: (theme: ThemeName) => void;\n themes: readonly ThemeOption[];\n storageKey: string;\n};\n\nexport type ThemeScopeProps = {\n children?: unknown;\n defaultTheme?: ThemeName;\n themes?: readonly ThemeOption[];\n storageKey?: string;\n};\n\nexport type ThemePickerProps = Omit<\n JSX.IntrinsicElements[\"select\"],\n \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n themes?: readonly ThemeOption[];\n label?: string;\n};\n\nexport type ThemeToggleRenderContext = {\n theme: ThemeName;\n nextTheme: ThemeName;\n};\n\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n lightIcon?: unknown;\n darkIcon?: unknown;\n systemIcon?: unknown;\n themes?: readonly ThemeName[];\n onPress?: (event: PressEvent) => void;\n};\n\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n { value: \"system\", label: \"System\" },\n { value: \"light\", label: \"Light\" },\n { value: \"dark\", label: \"Dark\" },\n];\n\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n { value: \"tabby\", label: \"Tabby\" },\n { value: \"ginger\", label: \"Ginger\" },\n { value: \"tuxedo\", label: \"Tuxedo\" },\n { value: \"calico\", label: \"Calico\" },\n { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\nconst STATIC_CHILDREN = Symbol.for(\"askr.static-children\");\nconst documentThemeCoordinators = new WeakMap<Document, ThemeCoordinator>();\ntype ThemeCoordinator = ReturnType<typeof createThemeCoordinator>;\ntype InternalThemeScopeValue = ThemeScopeValue & {\n readonly coordinator: ThemeCoordinator | null;\n readonly depth: number;\n};\n\nconst ThemeScopeContext = defineScope<InternalThemeScopeValue>({\n theme: () => \"system\",\n resolvedSystemTheme: () => \"light\",\n setTheme: () => undefined,\n themes: DEFAULT_THEME_OPTIONS,\n storageKey: DEFAULT_STORAGE_KEY,\n coordinator: null,\n depth: -1,\n});\n\nexport function theme(): ThemeScopeValue {\n return readScope(ThemeScopeContext);\n}\n\nexport function ThemeScope(props: ThemeScopeProps): JSX.Element {\n const {\n children,\n defaultTheme = \"system\",\n themes = DEFAULT_THEME_OPTIONS,\n storageKey = DEFAULT_STORAGE_KEY,\n } = props;\n\n const scopeId = state<symbol>(Symbol(\"ThemeScope\"))();\n const scopeSignal = getSignal();\n // The first render must be identical on the server and in the browser.\n // Browser persistence is adopted from the committed root ref, after Askr's\n // hydration verifier has accepted the server markup.\n const themeState = state<ThemeName>(defaultTheme);\n const localResolvedSystemTheme = state<\"light\" | \"dark\">(\"light\");\n const persistenceAdoption = state({ complete: false })();\n const currentTheme = themeState();\n const parentScope = readScope(ThemeScopeContext);\n const ownedCoordinator = state<ThemeCoordinator>(getDefaultThemeCoordinator())();\n const coordinator = parentScope.coordinator ?? ownedCoordinator;\n const scopeDepth = parentScope.depth + 1;\n coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal, (nextTheme) => {\n if (themeState() !== nextTheme) themeState.set(nextTheme);\n });\n\n const setTheme = (nextTheme: ThemeName) => {\n themeState.set(nextTheme);\n writeStoredTheme(storageKey, nextTheme);\n coordinator.activate(scopeId, nextTheme);\n };\n\n const resolvedSystemTheme = parentScope.coordinator\n ? parentScope.resolvedSystemTheme\n : localResolvedSystemTheme;\n const value: InternalThemeScopeValue = {\n theme: themeState,\n resolvedSystemTheme,\n setTheme,\n themes,\n storageKey,\n coordinator,\n depth: scopeDepth,\n };\n\n return (\n <ThemeScopeContext value={value}>\n <div\n data-slot=\"theme-scope\"\n ref={\n parentScope.coordinator === null\n ? (element: HTMLElement | null) => {\n coordinator.attach(\n element,\n (nextTheme) => localResolvedSystemTheme.set(nextTheme),\n scopeSignal,\n );\n if (element && typeof window !== \"undefined\") {\n const onStorage = (event: StorageEvent) => {\n let storageMatches = event.storageArea == null;\n try {\n storageMatches ||= event.storageArea === window.localStorage;\n } catch {\n // Locked-down/private contexts may deny access to localStorage.\n }\n if (!storageMatches || event.key !== storageKey) {\n return;\n }\n const nextTheme = event.newValue as ThemeName | null;\n if (!nextTheme) return;\n themeState.set(nextTheme);\n coordinator.activate(scopeId, nextTheme);\n };\n window.addEventListener(\"storage\", onStorage);\n scopeSignal.addEventListener(\n \"abort\",\n () => window.removeEventListener(\"storage\", onStorage),\n { once: true },\n );\n }\n if (!element || persistenceAdoption.complete) return;\n persistenceAdoption.complete = true;\n const storedTheme = readStoredTheme(storageKey);\n if (storedTheme && storedTheme !== themeState()) {\n themeState.set(storedTheme);\n coordinator.activate(scopeId, storedTheme);\n }\n }\n : undefined\n }\n >\n {children}\n </div>\n </ThemeScopeContext>\n );\n}\n\nfunction getDefaultThemeCoordinator(): ThemeCoordinator {\n if (typeof document === \"undefined\") {\n return createThemeCoordinator();\n }\n\n const existing = documentThemeCoordinators.get(document);\n if (existing) return existing;\n\n const coordinator = createThemeCoordinator();\n documentThemeCoordinators.set(document, coordinator);\n return coordinator;\n}\n\nfunction removeEmptyGeneratedStyleRegistries(root: Node | null): void {\n const ownerDocument =\n root?.nodeType === 9\n ? (root as Document)\n : (root?.ownerDocument ?? (typeof document === \"undefined\" ? null : document));\n if (!ownerDocument) return;\n\n for (const registry of ownerDocument.querySelectorAll<HTMLStyleElement>(\n \"style[data-askr-style-registry]\",\n )) {\n if (!registry.textContent?.trim()) registry.remove();\n }\n}\n\nfunction createThemeCoordinator() {\n const scopes = new Map<\n symbol,\n {\n depth: number;\n sequence: number;\n theme: ThemeName;\n signal: AbortSignal;\n onThemeChange: (themeName: ThemeName) => void;\n }\n >();\n let nextSequence = 0;\n let explicitOwner: symbol | undefined;\n let root: Node | null = null;\n let scheduled = false;\n\n const target = (): HTMLElement | null => {\n if (root?.nodeType === 9) return (root as Document).documentElement;\n if (root && \"host\" in root) return (root as ShadowRoot).host as HTMLElement;\n return typeof document === \"undefined\" ? null : document.documentElement;\n };\n const syncActive = (): void => {\n if (explicitOwner !== undefined) return;\n let candidate: { depth: number; sequence: number; theme: ThemeName } | undefined;\n for (const scope of scopes.values()) {\n if (\n !candidate ||\n scope.depth > candidate.depth ||\n (scope.depth === candidate.depth && scope.sequence > candidate.sequence)\n ) {\n candidate = scope;\n }\n }\n if (candidate) syncThemeTarget(target(), candidate.theme);\n };\n const schedule = (): void => {\n if (typeof document === \"undefined\" || scheduled) return;\n scheduled = true;\n setTimeout(() => {\n scheduled = false;\n syncActive();\n if (scopes.size === 0) removeEmptyGeneratedStyleRegistries(root);\n }, 0);\n };\n\n return Object.freeze({\n attach(\n element: HTMLElement | null,\n onResolvedSystemTheme: (themeName: \"light\" | \"dark\") => void,\n signal: AbortSignal,\n ) {\n if (element) root = element.getRootNode();\n if (element && typeof window !== \"undefined\" && typeof window.matchMedia === \"function\") {\n const media = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const update = () => onResolvedSystemTheme(media.matches ? \"dark\" : \"light\");\n update();\n media.addEventListener?.(\"change\", update);\n signal.addEventListener(\"abort\", () => media.removeEventListener?.(\"change\", update), {\n once: true,\n });\n }\n schedule();\n },\n register(\n id: symbol,\n depth: number,\n themeName: ThemeName,\n signal: AbortSignal,\n onThemeChange: (themeName: ThemeName) => void,\n ) {\n const existing = scopes.get(id);\n scopes.set(id, {\n depth,\n sequence: existing?.sequence ?? nextSequence++,\n theme: themeName,\n signal,\n onThemeChange,\n });\n if (!existing) {\n signal.addEventListener(\n \"abort\",\n () => {\n scopes.delete(id);\n if (explicitOwner === id) explicitOwner = undefined;\n schedule();\n },\n { once: true },\n );\n }\n schedule();\n },\n activate(id: symbol, themeName: ThemeName) {\n const scope = scopes.get(id);\n if (scope) scope.theme = themeName;\n explicitOwner = id;\n const ownerDepth = scope?.depth;\n for (const [scopeId, registered] of scopes) {\n if (scopeId !== id && registered.depth === ownerDepth) {\n registered.theme = themeName;\n registered.onThemeChange(themeName);\n }\n }\n syncThemeTarget(target(), themeName);\n },\n });\n}\n\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n const activeTheme = theme();\n const { themes = activeTheme.themes, label = \"Theme\", ...rest } = props;\n const currentTheme = activeTheme.theme();\n\n return (\n <select\n {...rest}\n aria-label={rest[\"aria-label\"] ?? label}\n data-slot=\"theme-picker\"\n value={currentTheme}\n onChange={(event: Event) => {\n const target = getThemePickerTarget(event);\n if (target) {\n activeTheme.setTheme(target.value as ThemeName);\n }\n }}\n >\n {themes.map((option) => (\n <option key={option.value} value={option.value} selected={option.value === currentTheme}>\n {option.label}\n </option>\n ))}\n </select>\n );\n}\n\nfunction getThemePickerTarget(event: Event): HTMLSelectElement | null {\n if (typeof HTMLSelectElement === \"undefined\") {\n return null;\n }\n\n const path = typeof event.composedPath === \"function\" ? event.composedPath() : [];\n const candidates = [event.target, event.currentTarget, ...path];\n\n for (const candidate of candidates) {\n if (candidate instanceof HTMLSelectElement) {\n return candidate;\n }\n }\n\n return null;\n}\n\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n const activeTheme = theme();\n const {\n children,\n lightIcon,\n darkIcon,\n systemIcon,\n themes = [\"light\", \"dark\"],\n onPress,\n ...rest\n } = props;\n\n const currentTheme = activeTheme.theme();\n const nextTheme = getNextTheme(currentTheme, themes, activeTheme.resolvedSystemTheme());\n const renderContext = { theme: currentTheme, nextTheme };\n const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n lightIcon,\n darkIcon,\n systemIcon,\n });\n const renderedIcon = cloneThemeToggleIcon(themedIcon, currentTheme);\n const renderedIconSlots =\n renderThemeToggleIconSlots(currentTheme, {\n lightIcon,\n darkIcon,\n systemIcon,\n }) ?? renderedIcon;\n const content =\n typeof children === \"function\" ? children(renderContext) : (children ?? renderedIconSlots);\n\n return (\n <Button\n {...(rest as ButtonNativeProps)}\n aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n data-theme-control=\"toggle\"\n data-theme-choice={currentTheme}\n data-next-theme={nextTheme}\n onPress={(event) => {\n onPress?.(event);\n if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {\n activeTheme.setTheme(nextTheme);\n }\n }}\n >\n <span data-slot=\"theme-toggle-content\">{content}</span>\n </Button>\n );\n}\n\nfunction getNextTheme(\n currentTheme: ThemeName,\n themes: readonly ThemeName[],\n resolvedSystemTheme: \"light\" | \"dark\" = \"light\",\n): ThemeName {\n if (themes.length === 0) return currentTheme;\n const index = themes.indexOf(currentTheme);\n if (index < 0 && currentTheme === \"system\") {\n if (themes.includes(\"light\") && themes.includes(\"dark\")) {\n return resolvedSystemTheme === \"dark\" ? \"light\" : \"dark\";\n }\n }\n return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n theme: ThemeName,\n icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n if (theme === \"light\") return icons.lightIcon;\n if (theme === \"dark\") return icons.darkIcon;\n if (theme === \"system\") return icons.systemIcon;\n return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n theme: ThemeName,\n nextTheme: ThemeName,\n icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction renderThemeToggleIconSlots(\n theme: ThemeName,\n icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n if (getThemeIcon(theme, icons) === undefined) {\n return undefined;\n }\n\n const slots = [\n [\"light\", icons.lightIcon],\n [\"dark\", icons.darkIcon],\n [\"system\", icons.systemIcon],\n ] as const;\n const availableSlots = slots.filter(([, icon]) => icon !== undefined && icon !== null);\n\n if (availableSlots.length <= 1) {\n return undefined;\n }\n\n return availableSlots.map(([slotTheme, icon]) => (\n <span\n key={slotTheme}\n data-slot=\"theme-toggle-icon\"\n data-theme-toggle-icon={slotTheme}\n hidden={slotTheme === theme ? undefined : true}\n >\n {cloneThemeToggleIcon(icon, slotTheme)}\n </span>\n ));\n}\n\nfunction cloneThemeToggleIcon(icon: unknown, key?: string): unknown {\n if (Array.isArray(icon)) {\n const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));\n if ((icon as unknown as Record<symbol, unknown>)[STATIC_CHILDREN] === true) {\n Object.defineProperty(clonedChildren, STATIC_CHILDREN, {\n value: true,\n configurable: true,\n });\n }\n return clonedChildren;\n }\n\n if (!isElement(icon)) return icon;\n\n const props = icon.props as Record<string, unknown> | undefined;\n const clonedProps = props ? { ...props } : {};\n\n if (\"children\" in clonedProps) {\n clonedProps.children = cloneThemeToggleIcon(clonedProps.children);\n }\n\n const clonedIcon = cloneElement(icon, clonedProps);\n return {\n ...clonedIcon,\n key: icon.key ?? key ?? null,\n } satisfies JSXElement;\n}\n\nfunction syncThemeTarget(\n html: HTMLElement | null,\n themeChoice: ThemeName | null | undefined,\n): void {\n if (!html) return;\n\n if (themeChoice == null) {\n html.removeAttribute(\"data-theme\");\n html.removeAttribute(\"data-theme-choice\");\n return;\n }\n\n html.setAttribute(\"data-theme-choice\", themeChoice);\n\n if (themeChoice === \"system\") {\n html.removeAttribute(\"data-theme\");\n } else {\n html.setAttribute(\"data-theme\", themeChoice);\n }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n if (typeof window === \"undefined\") return undefined;\n try {\n const storedTheme = window.localStorage.getItem(storageKey);\n return storedTheme ? (storedTheme as ThemeName) : undefined;\n } catch {\n return undefined;\n }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n if (typeof window === \"undefined\") return;\n try {\n window.localStorage.setItem(storageKey, theme);\n } catch {\n // Storage can be unavailable in private or locked-down browser contexts.\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { defineScope, getSignal, readScope, state } from \"@askrjs/askr\";\nimport { cloneElement, isElement, type JSXElement } from \"@askrjs/askr/foundations/structures\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\nexport type ThemeOption = {\n value: ThemeName;\n label: string;\n};\n\nexport type ThemeScopeValue = {\n theme: () => ThemeName;\n resolvedSystemTheme: () => \"light\" | \"dark\";\n setTheme: (theme: ThemeName) => void;\n themes: readonly ThemeOption[];\n storageKey: string;\n};\n\nexport type ThemeScopeProps = {\n children?: unknown;\n defaultTheme?: ThemeName;\n themes?: readonly ThemeOption[];\n storageKey?: string;\n};\n\nexport type ThemePickerProps = Omit<\n JSX.IntrinsicElements[\"select\"],\n \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n themes?: readonly ThemeOption[];\n label?: string;\n};\n\nexport type ThemeToggleRenderContext = {\n theme: ThemeName;\n nextTheme: ThemeName;\n};\n\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n lightIcon?: unknown;\n darkIcon?: unknown;\n systemIcon?: unknown;\n themes?: readonly ThemeName[];\n onPress?: (event: PressEvent) => void;\n};\n\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n { value: \"system\", label: \"System\" },\n { value: \"light\", label: \"Light\" },\n { value: \"dark\", label: \"Dark\" },\n];\n\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n { value: \"tabby\", label: \"Tabby\" },\n { value: \"ginger\", label: \"Ginger\" },\n { value: \"tuxedo\", label: \"Tuxedo\" },\n { value: \"calico\", label: \"Calico\" },\n { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\nconst STATIC_CHILDREN = Symbol.for(\"askr.static-children\");\nconst documentThemeCoordinators = new WeakMap<Document, ThemeCoordinator>();\ntype ThemeCoordinator = ReturnType<typeof createThemeCoordinator>;\ntype InternalThemeScopeValue = ThemeScopeValue & {\n readonly coordinator: ThemeCoordinator | null;\n readonly depth: number;\n};\n\nconst ThemeScopeContext = defineScope<InternalThemeScopeValue>({\n theme: () => \"system\",\n resolvedSystemTheme: () => \"light\",\n setTheme: () => undefined,\n themes: DEFAULT_THEME_OPTIONS,\n storageKey: DEFAULT_STORAGE_KEY,\n coordinator: null,\n depth: -1,\n});\n\nexport function theme(): ThemeScopeValue {\n return readScope(ThemeScopeContext);\n}\n\nexport function ThemeScope(props: ThemeScopeProps): JSX.Element {\n const {\n children,\n defaultTheme = \"system\",\n themes = DEFAULT_THEME_OPTIONS,\n storageKey = DEFAULT_STORAGE_KEY,\n } = props;\n\n const scopeId = state<symbol>(Symbol(\"ThemeScope\"))();\n const scopeSignal = getSignal();\n // The first render must be identical on the server and in the browser.\n // Browser persistence is adopted from the committed root ref, after Askr's\n // hydration verifier has accepted the server markup.\n const themeState = state<ThemeName>(defaultTheme);\n const localResolvedSystemTheme = state<\"light\" | \"dark\">(\"light\");\n const persistenceAdoption = state({ complete: false })();\n const currentTheme = themeState();\n const parentScope = readScope(ThemeScopeContext);\n const ownedCoordinator = state<ThemeCoordinator>(getDefaultThemeCoordinator())();\n const coordinator = parentScope.coordinator ?? ownedCoordinator;\n const scopeDepth = parentScope.depth + 1;\n coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal, (nextTheme) => {\n if (themeState() !== nextTheme) themeState.set(nextTheme);\n });\n\n const setTheme = (nextTheme: ThemeName) => {\n themeState.set(nextTheme);\n writeStoredTheme(storageKey, nextTheme);\n coordinator.activate(scopeId, nextTheme);\n };\n\n const resolvedSystemTheme = parentScope.coordinator\n ? parentScope.resolvedSystemTheme\n : localResolvedSystemTheme;\n const value: InternalThemeScopeValue = {\n theme: themeState,\n resolvedSystemTheme,\n setTheme,\n themes,\n storageKey,\n coordinator,\n depth: scopeDepth,\n };\n\n return (\n <ThemeScopeContext value={value}>\n <div\n data-slot=\"theme-scope\"\n ref={\n parentScope.coordinator === null\n ? (element: HTMLElement | null) => {\n coordinator.attach(\n element,\n (nextTheme) => localResolvedSystemTheme.set(nextTheme),\n scopeSignal,\n );\n if (element && typeof window !== \"undefined\") {\n const onStorage = (event: StorageEvent) => {\n let storageMatches = event.storageArea == null;\n try {\n storageMatches ||= event.storageArea === window.localStorage;\n } catch {\n // Locked-down/private contexts may deny access to localStorage.\n }\n if (!storageMatches || event.key !== storageKey) {\n return;\n }\n const nextTheme = event.newValue as ThemeName | null;\n if (!nextTheme) return;\n themeState.set(nextTheme);\n coordinator.activate(scopeId, nextTheme);\n };\n window.addEventListener(\"storage\", onStorage);\n scopeSignal.addEventListener(\n \"abort\",\n () => window.removeEventListener(\"storage\", onStorage),\n { once: true },\n );\n }\n if (!element || persistenceAdoption.complete) return;\n persistenceAdoption.complete = true;\n const storedTheme = readStoredTheme(storageKey);\n if (storedTheme && storedTheme !== themeState()) {\n themeState.set(storedTheme);\n coordinator.activate(scopeId, storedTheme);\n }\n }\n : undefined\n }\n >\n {children}\n </div>\n </ThemeScopeContext>\n );\n}\n\nfunction getDefaultThemeCoordinator(): ThemeCoordinator {\n if (typeof document === \"undefined\") {\n return createThemeCoordinator();\n }\n\n const existing = documentThemeCoordinators.get(document);\n if (existing) return existing;\n\n const coordinator = createThemeCoordinator();\n documentThemeCoordinators.set(document, coordinator);\n return coordinator;\n}\n\nfunction removeEmptyGeneratedStyleRegistries(root: Node | null): void {\n const ownerDocument =\n root?.nodeType === 9\n ? (root as Document)\n : (root?.ownerDocument ?? (typeof document === \"undefined\" ? null : document));\n if (!ownerDocument) return;\n\n for (const registry of ownerDocument.querySelectorAll<HTMLStyleElement>(\n \"style[data-askr-style-registry]\",\n )) {\n if (!registry.textContent?.trim()) registry.remove();\n }\n}\n\nfunction createThemeCoordinator() {\n const scopes = new Map<\n symbol,\n {\n depth: number;\n sequence: number;\n theme: ThemeName;\n signal: AbortSignal;\n onThemeChange: (themeName: ThemeName) => void;\n }\n >();\n let nextSequence = 0;\n let explicitOwner: symbol | undefined;\n let root: Node | null = null;\n let scheduled = false;\n\n const target = (): HTMLElement | null => {\n if (root?.nodeType === 9) return (root as Document).documentElement;\n if (root && \"host\" in root) return (root as ShadowRoot).host as HTMLElement;\n return typeof document === \"undefined\" ? null : document.documentElement;\n };\n const syncActive = (): void => {\n if (explicitOwner !== undefined) return;\n let candidate: { depth: number; sequence: number; theme: ThemeName } | undefined;\n for (const scope of scopes.values()) {\n if (\n !candidate ||\n scope.depth > candidate.depth ||\n (scope.depth === candidate.depth && scope.sequence > candidate.sequence)\n ) {\n candidate = scope;\n }\n }\n if (candidate) syncThemeTarget(target(), candidate.theme);\n };\n const schedule = (): void => {\n if (typeof document === \"undefined\" || scheduled) return;\n scheduled = true;\n setTimeout(() => {\n scheduled = false;\n syncActive();\n if (scopes.size === 0) removeEmptyGeneratedStyleRegistries(root);\n }, 0);\n };\n\n return Object.freeze({\n attach(\n element: HTMLElement | null,\n onResolvedSystemTheme: (themeName: \"light\" | \"dark\") => void,\n signal: AbortSignal,\n ) {\n if (element) root = element.getRootNode();\n if (element && typeof window !== \"undefined\" && typeof window.matchMedia === \"function\") {\n const media = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const update = () => onResolvedSystemTheme(media.matches ? \"dark\" : \"light\");\n update();\n media.addEventListener?.(\"change\", update);\n signal.addEventListener(\"abort\", () => media.removeEventListener?.(\"change\", update), {\n once: true,\n });\n }\n schedule();\n },\n register(\n id: symbol,\n depth: number,\n themeName: ThemeName,\n signal: AbortSignal,\n onThemeChange: (themeName: ThemeName) => void,\n ) {\n const existing = scopes.get(id);\n scopes.set(id, {\n depth,\n sequence: existing?.sequence ?? nextSequence++,\n theme: themeName,\n signal,\n onThemeChange,\n });\n if (!existing) {\n signal.addEventListener(\n \"abort\",\n () => {\n scopes.delete(id);\n if (explicitOwner === id) explicitOwner = undefined;\n schedule();\n },\n { once: true },\n );\n }\n schedule();\n },\n activate(id: symbol, themeName: ThemeName) {\n const scope = scopes.get(id);\n if (scope) scope.theme = themeName;\n explicitOwner = id;\n const ownerDepth = scope?.depth;\n for (const [scopeId, registered] of scopes) {\n if (scopeId !== id && registered.depth === ownerDepth) {\n registered.theme = themeName;\n registered.onThemeChange(themeName);\n }\n }\n syncThemeTarget(target(), themeName);\n },\n });\n}\n\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n const activeTheme = theme();\n const { themes = activeTheme.themes, label = \"Theme\", ...rest } = props;\n const currentTheme = activeTheme.theme();\n\n return (\n <select\n {...rest}\n aria-label={rest[\"aria-label\"] ?? label}\n data-slot=\"theme-picker\"\n value={currentTheme}\n onChange={(event: Event) => {\n const target = getThemePickerTarget(event);\n if (target) {\n activeTheme.setTheme(target.value as ThemeName);\n }\n }}\n >\n {themes.map((option) => (\n <option key={option.value} value={option.value} selected={option.value === currentTheme}>\n {option.label}\n </option>\n ))}\n </select>\n );\n}\n\nfunction getThemePickerTarget(event: Event): HTMLSelectElement | null {\n if (typeof HTMLSelectElement === \"undefined\") {\n return null;\n }\n\n const path = typeof event.composedPath === \"function\" ? event.composedPath() : [];\n const candidates = [event.target, event.currentTarget, ...path];\n\n for (const candidate of candidates) {\n if (candidate instanceof HTMLSelectElement) {\n return candidate;\n }\n }\n\n return null;\n}\n\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n const activeTheme = theme();\n const {\n children,\n lightIcon,\n darkIcon,\n systemIcon,\n themes = [\"light\", \"dark\"],\n onPress,\n ...rest\n } = props;\n\n const currentTheme = activeTheme.theme();\n const nextTheme = getNextTheme(currentTheme, themes, activeTheme.resolvedSystemTheme());\n const renderContext = { theme: currentTheme, nextTheme };\n const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n lightIcon,\n darkIcon,\n systemIcon,\n });\n const renderedIcon = cloneThemeToggleIcon(themedIcon, currentTheme);\n const renderedIconSlots =\n renderThemeToggleIconSlots(currentTheme, {\n lightIcon,\n darkIcon,\n systemIcon,\n }) ?? renderedIcon;\n const content =\n typeof children === \"function\" ? children(renderContext) : (children ?? renderedIconSlots);\n\n return (\n <Button\n {...(rest as ButtonNativeProps)}\n aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n data-theme-control=\"toggle\"\n data-theme-choice={currentTheme}\n data-next-theme={nextTheme}\n onPress={(event) => {\n onPress?.(event);\n if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {\n activeTheme.setTheme(nextTheme);\n }\n }}\n >\n <span data-slot=\"theme-toggle-content\">{content}</span>\n </Button>\n );\n}\n\nfunction getNextTheme(\n currentTheme: ThemeName,\n themes: readonly ThemeName[],\n resolvedSystemTheme: \"light\" | \"dark\" = \"light\",\n): ThemeName {\n if (themes.length === 0) return currentTheme;\n const index = themes.indexOf(currentTheme);\n if (index < 0 && currentTheme === \"system\") {\n if (themes.includes(\"light\") && themes.includes(\"dark\")) {\n return resolvedSystemTheme === \"dark\" ? \"light\" : \"dark\";\n }\n }\n return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n theme: ThemeName,\n icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n if (theme === \"light\") return icons.lightIcon;\n if (theme === \"dark\") return icons.darkIcon;\n if (theme === \"system\") return icons.systemIcon;\n return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n theme: ThemeName,\n nextTheme: ThemeName,\n icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction renderThemeToggleIconSlots(\n theme: ThemeName,\n icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n if (getThemeIcon(theme, icons) === undefined) {\n return undefined;\n }\n\n const slots = [\n [\"light\", icons.lightIcon],\n [\"dark\", icons.darkIcon],\n [\"system\", icons.systemIcon],\n ] as const;\n const availableSlots = slots.filter(([, icon]) => icon !== undefined && icon !== null);\n\n if (availableSlots.length <= 1) {\n return undefined;\n }\n\n return availableSlots.map(([slotTheme, icon]) => (\n <span\n key={slotTheme}\n data-slot=\"theme-toggle-icon\"\n data-theme-toggle-icon={slotTheme}\n hidden={slotTheme === theme ? undefined : true}\n >\n {cloneThemeToggleIcon(icon, slotTheme)}\n </span>\n ));\n}\n\nfunction cloneThemeToggleIcon(icon: unknown, key?: string): unknown {\n if (Array.isArray(icon)) {\n const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));\n if ((icon as unknown as Record<symbol, unknown>)[STATIC_CHILDREN] === true) {\n Object.defineProperty(clonedChildren, STATIC_CHILDREN, {\n value: true,\n configurable: true,\n });\n }\n return clonedChildren;\n }\n\n if (!isElement(icon)) return icon;\n\n const props = icon.props as Record<string, unknown> | undefined;\n const clonedProps = props ? { ...props } : {};\n\n if (\"children\" in clonedProps) {\n clonedProps.children = cloneThemeToggleIcon(clonedProps.children);\n }\n\n const clonedIcon = cloneElement(icon, clonedProps);\n return {\n ...clonedIcon,\n key: icon.key ?? key ?? null,\n } satisfies JSXElement;\n}\n\nfunction syncThemeTarget(\n html: HTMLElement | null,\n themeChoice: ThemeName | null | undefined,\n): void {\n if (!html) return;\n\n if (themeChoice == null) {\n html.removeAttribute(\"data-theme\");\n html.removeAttribute(\"data-theme-choice\");\n return;\n }\n\n html.setAttribute(\"data-theme-choice\", themeChoice);\n\n if (themeChoice === \"system\") {\n html.removeAttribute(\"data-theme\");\n } else {\n html.setAttribute(\"data-theme\", themeChoice);\n }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n if (typeof window === \"undefined\") return undefined;\n try {\n const storedTheme = window.localStorage.getItem(storageKey);\n return storedTheme ? (storedTheme as ThemeName) : undefined;\n } catch {\n return undefined;\n }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n if (typeof window === \"undefined\") return;\n try {\n window.localStorage.setItem(storageKey, theme);\n } catch {\n // Storage can be unavailable in private or locked-down browser contexts.\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/components/toolbar/toolbar.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { Block } from \"../block\";\nimport type { ToolbarProps } from \"./toolbar.types\";\n\nexport function Toolbar(props: ToolbarProps): JSX.Element {\n const { title, actions, ...rest } = props;\n\n return (\n <Block\n rowFrom=\"md\"\n align={{ base: \"start\", md: \"center\" }}\n justify=\"between\"\n gap=\"md\"\n {...rest}\n data-slot=\"toolbar\"\n >\n <h2 data-slot=\"toolbar-title\">{title}</h2>\n {actions !== undefined ? (\n <Block direction=\"row\" gap=\"sm\" data-slot=\"toolbar-actions\">\n {actions}\n </Block>\n ) : null}\n </Block>\n );\n}\n"],"mappings":";;;AAIA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EAAE,OAAO,SAAS,GAAG,SAAS;CAEpC,OACE,qBAAC,OAAD;EACE,SAAQ;EACR,OAAO;GAAE,MAAM;GAAS,IAAI;EAAS;EACrC,SAAQ;EACR,KAAI;EACJ,GAAI;EACJ,aAAU;
|
|
1
|
+
{"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/components/toolbar/toolbar.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { Block } from \"../block\";\nimport type { ToolbarProps } from \"./toolbar.types\";\n\nexport function Toolbar(props: ToolbarProps): JSX.Element {\n const { title, actions, ...rest } = props;\n\n return (\n <Block\n rowFrom=\"md\"\n align={{ base: \"start\", md: \"center\" }}\n justify=\"between\"\n gap=\"md\"\n {...rest}\n data-slot=\"toolbar\"\n >\n <h2 data-slot=\"toolbar-title\">{title}</h2>\n {actions !== undefined ? (\n <Block direction=\"row\" gap=\"sm\" data-slot=\"toolbar-actions\">\n {actions}\n </Block>\n ) : null}\n </Block>\n );\n}\n"],"mappings":";;;AAIA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EAAE,OAAO,SAAS,GAAG,SAAS;CAEpC,OACE,qBAAC,OAAD;EACE,SAAQ;EACR,OAAO;GAAE,MAAM;GAAS,IAAI;EAAS;EACrC,SAAQ;EACR,KAAI;EACJ,GAAI;EACJ,aAAU;EANZ,UAAA,CAQE,oBAAC,MAAD;GAAI,aAAU;GAAiB,UAAA;EAAU,CAAA,GACxC,YAAY,KAAA,IACX,oBAAC,OAAD;GAAO,WAAU;GAAM,KAAI;GAAK,aAAU;GACvC,UAAA;EACI,CAAA,IACL,IACC;;AAEX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@askrjs/themes",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.23",
|
|
4
4
|
"description": "Default theme tokens, styles, and component presets for Askr apps.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"askr",
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"url": "git+https://github.com/askrjs/askr-themes.git"
|
|
23
23
|
},
|
|
24
24
|
"files": [
|
|
25
|
+
"capabilities.json",
|
|
25
26
|
"dist",
|
|
26
27
|
"src",
|
|
27
28
|
"templates",
|
|
@@ -86,7 +87,8 @@
|
|
|
86
87
|
"types": "./src/css.d.ts",
|
|
87
88
|
"default": "./templates/*"
|
|
88
89
|
},
|
|
89
|
-
"./package.json": "./package.json"
|
|
90
|
+
"./package.json": "./package.json",
|
|
91
|
+
"./capabilities.json": "./capabilities.json"
|
|
90
92
|
},
|
|
91
93
|
"publishConfig": {
|
|
92
94
|
"access": "public"
|
|
@@ -117,25 +119,27 @@
|
|
|
117
119
|
"test:checks": "vp test run -c vitest.test.checks.config.ts"
|
|
118
120
|
},
|
|
119
121
|
"devDependencies": {
|
|
120
|
-
"@askrjs/askr": ">=0.0.
|
|
121
|
-
"@askrjs/ui": ">=0.0.
|
|
122
|
-
"@askrjs/vite": ">=0.0.
|
|
123
|
-
"@tsdown/css": "0.22.
|
|
124
|
-
"@types/node": "^26.
|
|
122
|
+
"@askrjs/askr": ">=0.0.87 <0.1.0",
|
|
123
|
+
"@askrjs/ui": ">=0.0.25 <0.1.0",
|
|
124
|
+
"@askrjs/vite": ">=0.0.12 <0.1.0",
|
|
125
|
+
"@tsdown/css": "0.22.14",
|
|
126
|
+
"@types/node": "^26.1.2",
|
|
127
|
+
"@typescript/native": "npm:typescript@^7.0.2",
|
|
125
128
|
"@vitest/browser-playwright": "4.1.10",
|
|
126
129
|
"cross-env": "^10.1.0",
|
|
127
|
-
"jsdom": "^
|
|
128
|
-
"playwright": "^1.
|
|
129
|
-
"publint": "^0.3.
|
|
130
|
-
"
|
|
131
|
-
"
|
|
130
|
+
"jsdom": "^30.0.1",
|
|
131
|
+
"playwright": "^1.62.1",
|
|
132
|
+
"publint": "^0.3.23",
|
|
133
|
+
"tsdown": "0.22.14",
|
|
134
|
+
"typescript": "npm:@typescript/typescript6@^6.0.2",
|
|
135
|
+
"vite-plus": "^0.2.8"
|
|
132
136
|
},
|
|
133
137
|
"peerDependencies": {
|
|
134
|
-
"@askrjs/askr": ">=0.0.
|
|
135
|
-
"@askrjs/ui": ">=0.0.
|
|
138
|
+
"@askrjs/askr": ">=0.0.87 <0.1.0",
|
|
139
|
+
"@askrjs/ui": ">=0.0.25 <0.1.0"
|
|
136
140
|
},
|
|
137
141
|
"engines": {
|
|
138
|
-
"node": ">=24.
|
|
142
|
+
"node": ">=24.0.0"
|
|
139
143
|
},
|
|
140
|
-
"packageManager": "npm@
|
|
144
|
+
"packageManager": "npm@12.0.1"
|
|
141
145
|
}
|
|
@@ -3,12 +3,22 @@ import { jsx, type JSX } from "@askrjs/askr/jsx-runtime";
|
|
|
3
3
|
|
|
4
4
|
const renderIntrinsicElement = jsx as (type: string, props: Record<string, unknown>) => JSX.Element;
|
|
5
5
|
|
|
6
|
+
export function normalizeAriaProps(props: Record<string, unknown>): Record<string, unknown> {
|
|
7
|
+
const normalized = { ...props };
|
|
8
|
+
for (const key of Object.keys(normalized)) {
|
|
9
|
+
if (key.startsWith("aria-") && typeof normalized[key] === "boolean") {
|
|
10
|
+
normalized[key] = String(normalized[key]);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
return normalized;
|
|
14
|
+
}
|
|
15
|
+
|
|
6
16
|
export function intrinsicElement(
|
|
7
17
|
type: string,
|
|
8
18
|
props: Record<string, unknown>,
|
|
9
19
|
children: unknown,
|
|
10
20
|
): JSX.Element {
|
|
11
|
-
return renderIntrinsicElement(type, { ...props, children });
|
|
21
|
+
return renderIntrinsicElement(type, { ...normalizeAriaProps(props), children });
|
|
12
22
|
}
|
|
13
23
|
|
|
14
24
|
export function isJsxElement(value: unknown): value is JSXElement {
|
|
@@ -3,7 +3,7 @@ import { Slot } from "@askrjs/askr/foundations";
|
|
|
3
3
|
import { Block } from "../block";
|
|
4
4
|
import { classes } from "../_internal/classes";
|
|
5
5
|
import { mergeProps } from "../_internal/merge-props";
|
|
6
|
-
import { intrinsicElement } from "../_internal/jsx";
|
|
6
|
+
import { intrinsicElement, normalizeAriaProps } from "../_internal/jsx";
|
|
7
7
|
import type {
|
|
8
8
|
SidebarButtonProps,
|
|
9
9
|
SidebarPartProps,
|
|
@@ -27,7 +27,7 @@ function sidebarPart(
|
|
|
27
27
|
element: keyof JSX.IntrinsicElements = "div",
|
|
28
28
|
): JSX.Element {
|
|
29
29
|
const { as, asChild, children, class: className, ...rest } = props;
|
|
30
|
-
const finalProps = mergeProps(rest, {
|
|
30
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
31
31
|
class: className,
|
|
32
32
|
"data-slot": slot,
|
|
33
33
|
});
|
|
@@ -123,7 +123,7 @@ export function SidebarMenuButton(props: SidebarButtonProps): JSX.Element {
|
|
|
123
123
|
variant,
|
|
124
124
|
...rest
|
|
125
125
|
} = props;
|
|
126
|
-
const finalProps = mergeProps(rest, {
|
|
126
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
127
127
|
class: classes(className),
|
|
128
128
|
"data-active": active ? "true" : undefined,
|
|
129
129
|
"data-size": size && size !== "default" ? size : undefined,
|
|
@@ -153,7 +153,7 @@ export function SidebarMenuAction(props: SidebarButtonProps): JSX.Element {
|
|
|
153
153
|
type = "button",
|
|
154
154
|
...rest
|
|
155
155
|
} = props;
|
|
156
|
-
const finalProps = mergeProps(rest, {
|
|
156
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
157
157
|
class: classes(className),
|
|
158
158
|
"data-slot": "sidebar-menu-action",
|
|
159
159
|
...sidebarTooltipProps(tooltip, tooltipSide),
|
|
@@ -172,7 +172,7 @@ export function SidebarMenuBadge(props: SidebarPartProps): JSX.Element {
|
|
|
172
172
|
|
|
173
173
|
export function SidebarRail(props: SidebarButtonProps): JSX.Element {
|
|
174
174
|
const { asChild, children, class: className, type = "button", ...rest } = props;
|
|
175
|
-
const finalProps = mergeProps(rest, {
|
|
175
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
176
176
|
class: classes(className),
|
|
177
177
|
"data-slot": "sidebar-rail",
|
|
178
178
|
});
|
|
@@ -194,7 +194,7 @@ export function SidebarTrigger(props: SidebarButtonProps): JSX.Element {
|
|
|
194
194
|
type = "button",
|
|
195
195
|
...rest
|
|
196
196
|
} = props;
|
|
197
|
-
const finalProps = mergeProps(rest, {
|
|
197
|
+
const finalProps = mergeProps(normalizeAriaProps(rest), {
|
|
198
198
|
class: classes("btn btn-ghost btn-icon", className),
|
|
199
199
|
"data-slot": "sidebar-trigger",
|
|
200
200
|
...sidebarTooltipProps(tooltip, tooltipSide),
|