@askrjs/themes 0.0.10 → 0.0.12
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 +5 -5
- package/THEMING.md +2 -2
- package/dist/components/_internal/block-layout.d.ts +1 -1
- package/dist/components/_internal/block-layout.js +1 -1
- package/dist/components/_internal/block-layout.js.map +1 -1
- package/dist/components/_internal/jsx.js +9 -1
- package/dist/components/_internal/jsx.js.map +1 -1
- package/dist/components/alert/alert.d.ts +0 -1
- package/dist/components/alert/alert.js.map +1 -1
- package/dist/components/alert/alert.types.d.ts +0 -1
- package/dist/components/alert/index.d.ts +2 -1
- package/dist/components/aside/aside.d.ts +0 -1
- package/dist/components/aside/aside.types.d.ts +1 -0
- package/dist/components/aside/index.d.ts +2 -1
- package/dist/components/aspect-ratio/aspect-ratio.d.ts +0 -1
- package/dist/components/aspect-ratio/aspect-ratio.js +2 -4
- package/dist/components/aspect-ratio/aspect-ratio.js.map +1 -1
- package/dist/components/aspect-ratio/aspect-ratio.types.d.ts +1 -2
- package/dist/components/aspect-ratio/index.d.ts +2 -1
- package/dist/components/badge/badge.d.ts +0 -1
- package/dist/components/badge/badge.js +2 -4
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/badge/badge.types.d.ts +1 -2
- package/dist/components/badge/index.d.ts +2 -1
- package/dist/components/block/block.d.ts +0 -1
- package/dist/components/block/block.js +2 -4
- package/dist/components/block/block.js.map +1 -1
- package/dist/components/block/block.types.d.ts +2 -3
- package/dist/components/block/index.d.ts +2 -1
- package/dist/components/brand/brand.d.ts +0 -1
- package/dist/components/brand/brand.js +4 -5
- package/dist/components/brand/brand.js.map +1 -1
- package/dist/components/brand/brand.types.d.ts +0 -1
- package/dist/components/brand/index.d.ts +2 -1
- package/dist/components/button-group/button-group.d.ts +0 -1
- package/dist/components/button-group/button-group.js.map +1 -1
- package/dist/components/button-group/button-group.types.d.ts +0 -1
- package/dist/components/button-group/index.d.ts +2 -1
- package/dist/components/card/card.d.ts +0 -1
- package/dist/components/card/card.types.d.ts +0 -1
- package/dist/components/card/index.d.ts +2 -1
- package/dist/components/catalog.d.ts +0 -1
- package/dist/components/catalog.js +2 -1
- package/dist/components/catalog.js.map +1 -1
- package/dist/components/close/close.d.ts +0 -1
- package/dist/components/close/close.types.d.ts +0 -1
- package/dist/components/close/index.d.ts +2 -1
- package/dist/components/container/container.d.ts +0 -1
- package/dist/components/container/container.types.d.ts +1 -0
- package/dist/components/container/index.d.ts +2 -1
- package/dist/components/empty-state/empty-state.d.ts +0 -1
- package/dist/components/empty-state/empty-state.types.d.ts +1 -0
- package/dist/components/empty-state/index.d.ts +2 -1
- package/dist/components/field/field.d.ts +0 -1
- package/dist/components/field/field.types.d.ts +0 -1
- package/dist/components/field/index.d.ts +2 -1
- package/dist/components/footer/footer.d.ts +0 -1
- package/dist/components/footer/footer.types.d.ts +1 -1
- package/dist/components/footer/index.d.ts +2 -1
- package/dist/components/grid/grid.d.ts +0 -1
- package/dist/components/grid/grid.js +2 -5
- package/dist/components/grid/grid.js.map +1 -1
- package/dist/components/grid/grid.types.d.ts +0 -1
- package/dist/components/grid/index.d.ts +2 -1
- package/dist/components/header/header.d.ts +0 -1
- package/dist/components/header/header.types.d.ts +1 -0
- package/dist/components/header/index.d.ts +2 -1
- package/dist/components/input-group/index.d.ts +2 -1
- package/dist/components/input-group/input-group.d.ts +0 -1
- package/dist/components/input-group/input-group.js +2 -4
- package/dist/components/input-group/input-group.js.map +1 -1
- package/dist/components/input-group/input-group.types.d.ts +0 -1
- package/dist/components/main/index.d.ts +2 -1
- package/dist/components/main/main.d.ts +0 -1
- package/dist/components/main/main.types.d.ts +1 -0
- package/dist/components/nav/index.d.ts +2 -1
- package/dist/components/nav/nav.d.ts +0 -1
- package/dist/components/nav/nav.js +22 -15
- package/dist/components/nav/nav.js.map +1 -1
- package/dist/components/nav/nav.types.d.ts +1 -2
- package/dist/components/navbar/index.d.ts +3 -1
- package/dist/components/navbar/navbar.d.ts +0 -1
- package/dist/components/navbar/navbar.js +9 -8
- package/dist/components/navbar/navbar.js.map +1 -1
- package/dist/components/navbar/navbar.types.d.ts +1 -1
- package/dist/components/overlays/dropdown-content.d.ts +0 -1
- package/dist/components/page/index.d.ts +2 -1
- package/dist/components/page/page.d.ts +0 -1
- package/dist/components/page/page.types.d.ts +1 -0
- package/dist/components/page-header/index.d.ts +2 -1
- package/dist/components/page-header/page-header.d.ts +0 -1
- package/dist/components/page-header/page-header.types.d.ts +1 -0
- package/dist/components/section/index.d.ts +2 -1
- package/dist/components/section/section.d.ts +0 -1
- package/dist/components/section/section.types.d.ts +1 -0
- package/dist/components/separator/index.d.ts +2 -1
- package/dist/components/separator/separator.d.ts +0 -1
- package/dist/components/separator/separator.js +2 -4
- package/dist/components/separator/separator.js.map +1 -1
- package/dist/components/separator/separator.types.d.ts +0 -1
- package/dist/components/sidebar/index.d.ts +2 -1
- package/dist/components/sidebar/sidebar.d.ts +2 -3
- package/dist/components/sidebar/sidebar.js +5 -8
- package/dist/components/sidebar/sidebar.js.map +1 -1
- package/dist/components/sidebar/sidebar.types.d.ts +1 -0
- package/dist/components/skeleton/index.d.ts +2 -1
- package/dist/components/skeleton/skeleton.d.ts +0 -1
- package/dist/components/skeleton/skeleton.js +8 -8
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/skeleton/skeleton.types.d.ts +0 -1
- package/dist/components/spinner/index.d.ts +2 -1
- package/dist/components/spinner/spinner.d.ts +0 -1
- package/dist/components/spinner/spinner.types.d.ts +0 -1
- package/dist/components/stat/index.d.ts +2 -1
- package/dist/components/stat/stat.d.ts +0 -1
- package/dist/components/stat/stat.types.d.ts +0 -1
- package/dist/components/text/index.d.ts +2 -1
- package/dist/components/text/text.d.ts +0 -1
- package/dist/components/text/text.js +2 -5
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/text/text.types.d.ts +0 -1
- package/dist/components/theme/index.d.ts +2 -1
- package/dist/components/theme/theme.d.ts +5 -6
- package/dist/components/theme/theme.js +102 -70
- package/dist/components/theme/theme.js.map +1 -1
- package/dist/components/toolbar/index.d.ts +2 -1
- package/dist/components/toolbar/toolbar.d.ts +0 -1
- package/dist/components/toolbar/toolbar.types.d.ts +1 -0
- package/dist/components.d.ts +34 -4
- package/dist/components.js +4 -4
- package/dist/controls.d.ts +4 -0
- package/dist/core.d.ts +18 -2
- package/dist/navs.d.ts +1 -0
- package/dist/overlays.d.ts +2 -2
- package/dist/overlays.js +2 -2
- package/dist/surfaces.d.ts +8 -0
- package/dist/theme.d.ts +3 -2
- package/dist/theme.js +2 -2
- package/dist/themes/default/index.css +3 -3
- package/package.json +19 -12
- package/src/components/_internal/jsx.ts +11 -0
- package/src/components/alert/alert.tsx +1 -1
- package/src/components/aspect-ratio/aspect-ratio.tsx +2 -1
- package/src/components/badge/badge.tsx +2 -1
- package/src/components/block/block.tsx +2 -2
- package/src/components/brand/brand.tsx +3 -3
- package/src/components/button-group/button-group.tsx +1 -1
- package/src/components/catalog.tsx +3 -1
- package/src/components/grid/grid.tsx +2 -2
- package/src/components/input-group/input-group.tsx +3 -2
- package/src/components/nav/nav.tsx +25 -19
- package/src/components/navbar/navbar.tsx +22 -14
- package/src/components/separator/separator.tsx +2 -1
- package/src/components/sidebar/index.ts +1 -1
- package/src/components/sidebar/sidebar.tsx +7 -7
- package/src/components/skeleton/skeleton.tsx +8 -10
- package/src/components/text/text.tsx +2 -2
- package/src/components/theme/index.ts +4 -4
- package/src/components/theme/theme.tsx +135 -99
- package/src/components.ts +4 -4
- package/src/overlays.ts +3 -3
- package/src/theme.ts +4 -4
- package/src/themes/default/styles/display/coverage.css +1 -1
- package/src/themes/default/styles/overlays/toast.css +1 -1
- package/src/themes/default/styles/shell/sidebar.css +1 -1
- package/templates/theme/styles/display/coverage.css +1 -1
- package/templates/theme/styles/overlays/toast.css +1 -1
- package/templates/theme/styles/shell/sidebar.css +1 -1
package/README.md
CHANGED
|
@@ -35,12 +35,12 @@ from `@askrjs/themes/theme`.
|
|
|
35
35
|
Then use the theme helpers and component catalog:
|
|
36
36
|
|
|
37
37
|
```tsx
|
|
38
|
-
import {
|
|
38
|
+
import { ThemeScope, ThemeToggle } from "@askrjs/themes/theme";
|
|
39
39
|
import { Button, ButtonGroup, Field, Input, InputGroup, Label } from "@askrjs/themes/components";
|
|
40
40
|
|
|
41
41
|
export function AppShell() {
|
|
42
42
|
return (
|
|
43
|
-
<
|
|
43
|
+
<ThemeScope>
|
|
44
44
|
<ButtonGroup>
|
|
45
45
|
<Button variant="primary">Save</Button>
|
|
46
46
|
<ThemeToggle>{({ nextTheme }) => nextTheme}</ThemeToggle>
|
|
@@ -52,7 +52,7 @@ export function AppShell() {
|
|
|
52
52
|
<Input id="workspace" name="workspace" />
|
|
53
53
|
</InputGroup>
|
|
54
54
|
</Field>
|
|
55
|
-
</
|
|
55
|
+
</ThemeScope>
|
|
56
56
|
);
|
|
57
57
|
}
|
|
58
58
|
```
|
|
@@ -63,8 +63,8 @@ export function AppShell() {
|
|
|
63
63
|
- `@askrjs/themes/<component>` for package subpaths such as
|
|
64
64
|
`@askrjs/themes/button`, `@askrjs/themes/card`, and
|
|
65
65
|
`@askrjs/themes/dialog`.
|
|
66
|
-
- `@askrjs/themes/theme` for `
|
|
67
|
-
and `
|
|
66
|
+
- `@askrjs/themes/theme` for `ThemeScope`, `ThemePicker`, `ThemeToggle`,
|
|
67
|
+
and `theme`.
|
|
68
68
|
- `@askrjs/charts` for charts; chart components are intentionally not exported
|
|
69
69
|
from `@askrjs/themes`.
|
|
70
70
|
|
package/THEMING.md
CHANGED
|
@@ -115,8 +115,8 @@ for styled components such as Button, ButtonGroup, Close, InputGroup, Block,
|
|
|
115
115
|
Container, Header, Main, Sidebar, Navbar, NavBrand, NavDropdown, Alert, Badge,
|
|
116
116
|
Tabs, Tab, Pills, Pill, Skeleton, Separator, and EmptyState.
|
|
117
117
|
|
|
118
|
-
Theme state helpers also live there: `
|
|
119
|
-
`ThemeToggle`, and `
|
|
118
|
+
Theme state helpers also live there: `ThemeScope`, `ThemePicker`,
|
|
119
|
+
`ThemeToggle`, and `theme`. `ThemeToggle` intentionally has no built-in
|
|
120
120
|
icons; applications pass their own icon/content props. The rendered content is
|
|
121
121
|
wrapped in `data-slot="theme-toggle-content"` so icon and text compositions can
|
|
122
122
|
be styled consistently across themes. If you use icon children, the direct child
|
|
@@ -45,5 +45,5 @@ type BlockLayoutProps = {
|
|
|
45
45
|
hide?: ResponsiveValue<boolean>;
|
|
46
46
|
};
|
|
47
47
|
//#endregion
|
|
48
|
-
export { BlockAlign, BlockBackground, BlockDirection, BlockJustify, BlockLayoutProps, BlockMargin, BlockRadius, BlockRowFrom, BlockShadow, BlockSize, BlockSpace, BlockZIndex, ResponsiveValue };
|
|
48
|
+
export { BlockAlign, BlockBackground, BlockDirection, BlockJustify, BlockLayoutProps, BlockMargin, BlockRadius, BlockRowFrom, BlockShadow, BlockSize, BlockSpace, BlockZIndex, LayoutBreakpoint, ResponsiveValue };
|
|
49
49
|
//# sourceMappingURL=block-layout.d.ts.map
|
|
@@ -62,7 +62,7 @@ const Z_INDEX_TOKEN_MAP = {
|
|
|
62
62
|
tooltip: "var(--ak-z-tooltip)"
|
|
63
63
|
};
|
|
64
64
|
const BORDER_VALUE = "1px solid var(--ak-color-border-subtle)";
|
|
65
|
-
const BLOCK_LAYOUT_KEYS = new Set([
|
|
65
|
+
const BLOCK_LAYOUT_KEYS = /* @__PURE__ */ new Set([
|
|
66
66
|
"padding",
|
|
67
67
|
"paddingX",
|
|
68
68
|
"paddingY",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"block-layout.js","names":[],"sources":["../../../src/components/_internal/block-layout.ts"],"sourcesContent":["import { serializeCssDeclarations } from \"./style\";\n\nexport type LayoutBreakpoint = \"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;\n\nexport type BlockSpace = \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"page\";\nexport type BlockMargin = BlockSpace | \"auto\";\nexport type BlockSize =\n | \"auto\"\n | \"full\"\n | \"screen\"\n | \"content\"\n | \"sidebar\"\n | \"page\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\";\nexport type BlockDirection = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\nexport type BlockRowFrom = Exclude<LayoutBreakpoint, \"base\">;\nexport type BlockAlign = \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type BlockJustify = \"start\" | \"end\" | \"center\" | \"between\";\nexport type BlockBackground =\n | \"surface\"\n | \"muted\"\n | \"selected\"\n | \"canvas\"\n | \"raised\"\n | \"overlay\"\n | \"transparent\";\nexport type BlockRadius = true | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"round\";\nexport type BlockShadow = true | \"sm\" | \"md\" | \"lg\";\nexport type BlockZIndex =\n | \"header\"\n | \"sticky\"\n | \"fixed\"\n | \"dropdown\"\n | \"modal\"\n | \"popover\"\n | \"toast\"\n | \"tooltip\";\n\nexport type BlockLayoutProps = {\n padding?: ResponsiveValue<BlockSpace>;\n paddingX?: ResponsiveValue<BlockSpace>;\n paddingY?: ResponsiveValue<BlockSpace>;\n margin?: ResponsiveValue<BlockMargin>;\n marginX?: ResponsiveValue<BlockMargin>;\n marginY?: ResponsiveValue<BlockMargin>;\n width?: ResponsiveValue<BlockSize>;\n minWidth?: ResponsiveValue<BlockSize>;\n maxWidth?: ResponsiveValue<BlockSize>;\n height?: ResponsiveValue<BlockSize>;\n minHeight?: ResponsiveValue<BlockSize>;\n maxHeight?: ResponsiveValue<BlockSize>;\n rowFrom?: BlockRowFrom;\n direction?: ResponsiveValue<BlockDirection>;\n align?: ResponsiveValue<BlockAlign>;\n justify?: ResponsiveValue<BlockJustify>;\n gap?: ResponsiveValue<BlockSpace>;\n grow?: ResponsiveValue<boolean | number>;\n shrink?: ResponsiveValue<boolean | number>;\n center?: ResponsiveValue<boolean>;\n sticky?: boolean;\n top?: ResponsiveValue<BlockSpace>;\n zIndex?: ResponsiveValue<BlockZIndex>;\n background?: ResponsiveValue<BlockBackground>;\n border?: ResponsiveValue<boolean>;\n borderBottom?: ResponsiveValue<boolean>;\n borderRight?: ResponsiveValue<boolean>;\n radius?: ResponsiveValue<BlockRadius>;\n shadow?: ResponsiveValue<BlockShadow>;\n hide?: ResponsiveValue<boolean>;\n};\n\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"base\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst SPACE_TOKEN_MAP: Record<string, string> = {\n \"0\": \"0\",\n xs: \"var(--ak-space-xs)\",\n sm: \"var(--ak-space-sm)\",\n md: \"var(--ak-space-md)\",\n lg: \"var(--ak-space-lg)\",\n xl: \"var(--ak-space-xl)\",\n \"2xl\": \"var(--ak-space-2xl)\",\n \"3xl\": \"var(--ak-space-3xl)\",\n page: \"var(--ak-layout-page-gutter)\",\n};\n\nconst SIZE_TOKEN_MAP: Record<string, string> = {\n auto: \"auto\",\n full: \"100%\",\n screen: \"100dvh\",\n content: \"min(60vh, 36rem)\",\n sidebar: \"var(--ak-layout-sidebar-width)\",\n page: \"var(--ak-layout-content-max-width)\",\n sm: \"var(--ak-container-1)\",\n md: \"var(--ak-container-2)\",\n lg: \"var(--ak-container-3)\",\n xl: \"var(--ak-container-4)\",\n};\n\nconst BACKGROUND_TOKEN_MAP: Record<string, string> = {\n canvas: \"var(--ak-color-bg)\",\n surface: \"var(--ak-color-surface)\",\n muted: \"var(--ak-color-surface-muted)\",\n raised: \"var(--ak-color-surface-raised)\",\n overlay: \"var(--ak-color-surface-overlay)\",\n selected: \"var(--ak-color-selected)\",\n transparent: \"transparent\",\n};\n\nconst RADIUS_TOKEN_MAP: Record<string, string> = {\n sm: \"var(--ak-radius-sm)\",\n md: \"var(--ak-radius-md)\",\n lg: \"var(--ak-radius-lg)\",\n xl: \"var(--ak-radius-xl)\",\n round: \"var(--ak-radius-round)\",\n};\n\nconst SHADOW_TOKEN_MAP: Record<string, string> = {\n sm: \"var(--ak-shadow-sm)\",\n md: \"var(--ak-shadow-md)\",\n lg: \"var(--ak-shadow-lg)\",\n};\n\nconst Z_INDEX_TOKEN_MAP: Record<string, string> = {\n header: \"var(--ak-z-sticky)\",\n sticky: \"var(--ak-z-sticky)\",\n fixed: \"var(--ak-z-fixed)\",\n dropdown: \"var(--ak-z-dropdown)\",\n modal: \"var(--ak-z-modal)\",\n popover: \"var(--ak-z-popover)\",\n toast: \"var(--ak-z-toast)\",\n tooltip: \"var(--ak-z-tooltip)\",\n};\n\nconst BORDER_VALUE = \"1px solid var(--ak-color-border-subtle)\";\n\nconst BLOCK_LAYOUT_KEYS = new Set<keyof BlockLayoutProps>([\n \"padding\",\n \"paddingX\",\n \"paddingY\",\n \"margin\",\n \"marginX\",\n \"marginY\",\n \"width\",\n \"minWidth\",\n \"maxWidth\",\n \"height\",\n \"minHeight\",\n \"maxHeight\",\n \"rowFrom\",\n \"direction\",\n \"align\",\n \"justify\",\n \"gap\",\n \"grow\",\n \"shrink\",\n \"center\",\n \"sticky\",\n \"top\",\n \"zIndex\",\n \"background\",\n \"border\",\n \"borderBottom\",\n \"borderRight\",\n \"radius\",\n \"shadow\",\n \"hide\",\n]);\n\nfunction isResponsiveValue<T>(\n value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n return Boolean(\n value &&\n typeof value === \"object\" &&\n !Array.isArray(value) &&\n BREAKPOINTS.some((breakpoint) => breakpoint in value),\n );\n}\n\nfunction normalizeResponsiveValue<T>(\n value: ResponsiveValue<T> | undefined,\n): Partial<Record<LayoutBreakpoint, T>> | undefined {\n if (value === undefined) return undefined;\n if (isResponsiveValue(value)) return value;\n return { base: value };\n}\n\nfunction resolveTokenValue(\n value: string | number,\n tokens: Record<string, string>,\n): string | number {\n if (typeof value === \"number\") return value;\n const trimmed = value.trim();\n return tokens[trimmed] ?? trimmed;\n}\n\nfunction resolveSpaceValue(value: string | number): string | number {\n return resolveTokenValue(value, SPACE_TOKEN_MAP);\n}\n\nfunction resolveSizeValue(value: string): string {\n return String(resolveTokenValue(value, SIZE_TOKEN_MAP));\n}\n\nfunction resolveAlignValue(value: BlockAlign): string {\n if (value === \"start\") return \"flex-start\";\n if (value === \"end\") return \"flex-end\";\n return value;\n}\n\nfunction resolveJustifyValue(value: BlockJustify): string {\n if (value === \"start\") return \"flex-start\";\n if (value === \"end\") return \"flex-end\";\n if (value === \"between\") return \"space-between\";\n return value;\n}\n\nfunction resolveFlexFlag(value: boolean | number): string | number {\n if (value === true) return 1;\n if (value === false) return 0;\n return value;\n}\n\nfunction resolveBorderValue(value: boolean): string | undefined {\n if (value === false) return \"0\";\n return BORDER_VALUE;\n}\n\nfunction resolveRadiusValue(value: BlockRadius): string | undefined {\n if (value === true) return RADIUS_TOKEN_MAP.md;\n return String(resolveTokenValue(value, RADIUS_TOKEN_MAP));\n}\n\nfunction resolveShadowValue(value: BlockShadow): string | undefined {\n if (value === true) return SHADOW_TOKEN_MAP.sm;\n return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));\n}\n\nfunction setResponsiveVar<T>(\n styles: Record<string, string | number>,\n property: string,\n value: ResponsiveValue<T> | undefined,\n resolve: (value: T) => string | number | undefined,\n) {\n const normalized = normalizeResponsiveValue(value);\n if (!normalized) return;\n\n for (const breakpoint of BREAKPOINTS) {\n const breakpointValue = normalized[breakpoint];\n if (breakpointValue === undefined) continue;\n const resolved = resolve(breakpointValue);\n if (resolved === undefined || resolved === \"\") continue;\n styles[`--ak-${property}-${breakpoint}`] = resolved;\n }\n}\n\nexport function splitBlockLayoutProps<T extends Record<string, unknown>>(\n props: T,\n): {\n blockProps: Partial<BlockLayoutProps>;\n rest: Omit<T, keyof BlockLayoutProps>;\n} {\n const blockProps: Partial<BlockLayoutProps> = {};\n const rest: Record<string, unknown> = {};\n\n for (const [key, value] of Object.entries(props)) {\n if (BLOCK_LAYOUT_KEYS.has(key as keyof BlockLayoutProps)) {\n (blockProps as Record<string, unknown>)[key] = value;\n } else {\n rest[key] = value;\n }\n }\n\n return { blockProps, rest: rest as Omit<T, keyof BlockLayoutProps> };\n}\n\nexport function applyBlockLayoutStyles(\n styles: Record<string, string | number>,\n props: Partial<BlockLayoutProps>,\n) {\n setResponsiveVar(styles, \"p\", props.padding, resolveSpaceValue);\n setResponsiveVar(styles, \"px\", props.paddingX, resolveSpaceValue);\n setResponsiveVar(styles, \"py\", props.paddingY, resolveSpaceValue);\n setResponsiveVar(styles, \"m\", props.margin, resolveSpaceValue);\n setResponsiveVar(styles, \"mx\", props.marginX, resolveSpaceValue);\n setResponsiveVar(styles, \"my\", props.marginY, resolveSpaceValue);\n\n setResponsiveVar(styles, \"width\", props.width, resolveSizeValue);\n setResponsiveVar(styles, \"min-width\", props.minWidth, resolveSizeValue);\n setResponsiveVar(styles, \"max-width\", props.maxWidth, resolveSizeValue);\n setResponsiveVar(styles, \"height\", props.height, resolveSizeValue);\n setResponsiveVar(styles, \"min-height\", props.minHeight, resolveSizeValue);\n setResponsiveVar(styles, \"max-height\", props.maxHeight, resolveSizeValue);\n\n if (props.rowFrom !== undefined) {\n styles[`--ak-flex-direction-${props.rowFrom}`] = \"row\";\n }\n setResponsiveVar(styles, \"flex-direction\", props.direction, (value) => value);\n setResponsiveVar(styles, \"align-items\", props.align, resolveAlignValue);\n setResponsiveVar(styles, \"justify-content\", props.justify, resolveJustifyValue);\n setResponsiveVar(styles, \"gap\", props.gap, resolveSpaceValue);\n setResponsiveVar(styles, \"flex-grow\", props.grow, resolveFlexFlag);\n setResponsiveVar(styles, \"flex-shrink\", props.shrink, resolveFlexFlag);\n\n if (props.center !== undefined) {\n setResponsiveVar(styles, \"align-items\", props.center, (value) =>\n value ? \"center\" : undefined,\n );\n setResponsiveVar(styles, \"justify-content\", props.center, (value) =>\n value ? \"center\" : undefined,\n );\n }\n\n if (props.sticky) {\n styles[\"--ak-position-base\"] = \"sticky\";\n }\n setResponsiveVar(styles, \"top\", props.top, resolveSpaceValue);\n setResponsiveVar(styles, \"z-index\", props.zIndex, (value) =>\n String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)),\n );\n\n setResponsiveVar(styles, \"background\", props.background, (value) =>\n String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)),\n );\n setResponsiveVar(styles, \"border\", props.border, resolveBorderValue);\n setResponsiveVar(styles, \"border-bottom\", props.borderBottom, resolveBorderValue);\n setResponsiveVar(styles, \"border-right\", props.borderRight, resolveBorderValue);\n setResponsiveVar(styles, \"border-radius\", props.radius, resolveRadiusValue);\n setResponsiveVar(styles, \"box-shadow\", props.shadow, resolveShadowValue);\n setResponsiveVar(styles, \"display\", props.hide, (value) => (value ? \"none\" : \"flex\"));\n}\n\nexport function mergeLayoutStyles(\n layout: Record<string, string | number>,\n user: unknown,\n): string | undefined {\n const merged: Record<string, unknown> = { ...layout };\n\n if (user !== null && user !== undefined && typeof user === \"object\") {\n Object.assign(merged, user as Record<string, unknown>);\n }\n\n const mergedString = serializeCssDeclarations(merged);\n\n if (typeof user === \"string\" && user.trim()) {\n return mergedString ? `${mergedString};${user.trim()}` : user.trim();\n }\n\n return mergedString || undefined;\n}\n"],"mappings":";;AA2EA,MAAM,cAA2C;CAAC;CAAQ;CAAM;CAAM;CAAM;AAAI;AAEhF,MAAM,kBAA0C;CAC9C,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AAEA,MAAM,iBAAyC;CAC7C,MAAM;CACN,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;CACT,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,uBAA+C;CACnD,QAAQ;CACR,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;CACT,UAAU;CACV,aAAa;AACf;AAEA,MAAM,mBAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,mBAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,oBAA4C;CAChD,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,UAAU;CACV,OAAO;CACP,SAAS;CACT,OAAO;CACP,SAAS;AACX;AAEA,MAAM,eAAe;AAErB,MAAM,oBAAoB,IAAI,IAA4B;CACxD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,SAAS,kBACP,OAC+C;CAC/C,OAAO,QACL,SACA,OAAO,UAAU,YACjB,CAAC,MAAM,QAAQ,KAAK,KACpB,YAAY,MAAM,eAAe,cAAc,KAAK,CACtD;AACF;AAEA,SAAS,yBACP,OACkD;CAClD,IAAI,UAAU,KAAA,GAAW,OAAO,KAAA;CAChC,IAAI,kBAAkB,KAAK,GAAG,OAAO;CACrC,OAAO,EAAE,MAAM,MAAM;AACvB;AAEA,SAAS,kBACP,OACA,QACiB;CACjB,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,MAAM,UAAU,MAAM,KAAK;CAC3B,OAAO,OAAO,YAAY;AAC5B;AAEA,SAAS,kBAAkB,OAAyC;CAClE,OAAO,kBAAkB,OAAO,eAAe;AACjD;AAEA,SAAS,iBAAiB,OAAuB;CAC/C,OAAO,OAAO,kBAAkB,OAAO,cAAc,CAAC;AACxD;AAEA,SAAS,kBAAkB,OAA2B;CACpD,IAAI,UAAU,SAAS,OAAO;CAC9B,IAAI,UAAU,OAAO,OAAO;CAC5B,OAAO;AACT;AAEA,SAAS,oBAAoB,OAA6B;CACxD,IAAI,UAAU,SAAS,OAAO;CAC9B,IAAI,UAAU,OAAO,OAAO;CAC5B,IAAI,UAAU,WAAW,OAAO;CAChC,OAAO;AACT;AAEA,SAAS,gBAAgB,OAA0C;CACjE,IAAI,UAAU,MAAM,OAAO;CAC3B,IAAI,UAAU,OAAO,OAAO;CAC5B,OAAO;AACT;AAEA,SAAS,mBAAmB,OAAoC;CAC9D,IAAI,UAAU,OAAO,OAAO;CAC5B,OAAO;AACT;AAEA,SAAS,mBAAmB,OAAwC;CAClE,IAAI,UAAU,MAAM,OAAO,iBAAiB;CAC5C,OAAO,OAAO,kBAAkB,OAAO,gBAAgB,CAAC;AAC1D;AAEA,SAAS,mBAAmB,OAAwC;CAClE,IAAI,UAAU,MAAM,OAAO,iBAAiB;CAC5C,OAAO,OAAO,kBAAkB,OAAO,gBAAgB,CAAC;AAC1D;AAEA,SAAS,iBACP,QACA,UACA,OACA,SACA;CACA,MAAM,aAAa,yBAAyB,KAAK;CACjD,IAAI,CAAC,YAAY;CAEjB,KAAK,MAAM,cAAc,aAAa;EACpC,MAAM,kBAAkB,WAAW;EACnC,IAAI,oBAAoB,KAAA,GAAW;EACnC,MAAM,WAAW,QAAQ,eAAe;EACxC,IAAI,aAAa,KAAA,KAAa,aAAa,IAAI;EAC/C,OAAO,QAAQ,SAAS,GAAG,gBAAgB;CAC7C;AACF;AAEA,SAAgB,sBACd,OAIA;CACA,MAAM,aAAwC,CAAC;CAC/C,MAAM,OAAgC,CAAC;CAEvC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,kBAAkB,IAAI,GAA6B,GACrD,WAAwC,OAAO;MAE/C,KAAK,OAAO;CAIhB,OAAO;EAAE;EAAkB;CAAwC;AACrE;AAEA,SAAgB,uBACd,QACA,OACA;CACA,iBAAiB,QAAQ,KAAK,MAAM,SAAS,iBAAiB;CAC9D,iBAAiB,QAAQ,MAAM,MAAM,UAAU,iBAAiB;CAChE,iBAAiB,QAAQ,MAAM,MAAM,UAAU,iBAAiB;CAChE,iBAAiB,QAAQ,KAAK,MAAM,QAAQ,iBAAiB;CAC7D,iBAAiB,QAAQ,MAAM,MAAM,SAAS,iBAAiB;CAC/D,iBAAiB,QAAQ,MAAM,MAAM,SAAS,iBAAiB;CAE/D,iBAAiB,QAAQ,SAAS,MAAM,OAAO,gBAAgB;CAC/D,iBAAiB,QAAQ,aAAa,MAAM,UAAU,gBAAgB;CACtE,iBAAiB,QAAQ,aAAa,MAAM,UAAU,gBAAgB;CACtE,iBAAiB,QAAQ,UAAU,MAAM,QAAQ,gBAAgB;CACjE,iBAAiB,QAAQ,cAAc,MAAM,WAAW,gBAAgB;CACxE,iBAAiB,QAAQ,cAAc,MAAM,WAAW,gBAAgB;CAExE,IAAI,MAAM,YAAY,KAAA,GACpB,OAAO,uBAAuB,MAAM,aAAa;CAEnD,iBAAiB,QAAQ,kBAAkB,MAAM,YAAY,UAAU,KAAK;CAC5E,iBAAiB,QAAQ,eAAe,MAAM,OAAO,iBAAiB;CACtE,iBAAiB,QAAQ,mBAAmB,MAAM,SAAS,mBAAmB;CAC9E,iBAAiB,QAAQ,OAAO,MAAM,KAAK,iBAAiB;CAC5D,iBAAiB,QAAQ,aAAa,MAAM,MAAM,eAAe;CACjE,iBAAiB,QAAQ,eAAe,MAAM,QAAQ,eAAe;CAErE,IAAI,MAAM,WAAW,KAAA,GAAW;EAC9B,iBAAiB,QAAQ,eAAe,MAAM,SAAS,UACrD,QAAQ,WAAW,KAAA,CACrB;EACA,iBAAiB,QAAQ,mBAAmB,MAAM,SAAS,UACzD,QAAQ,WAAW,KAAA,CACrB;CACF;CAEA,IAAI,MAAM,QACR,OAAO,wBAAwB;CAEjC,iBAAiB,QAAQ,OAAO,MAAM,KAAK,iBAAiB;CAC5D,iBAAiB,QAAQ,WAAW,MAAM,SAAS,UACjD,OAAO,kBAAkB,OAAO,iBAAiB,CAAC,CACpD;CAEA,iBAAiB,QAAQ,cAAc,MAAM,aAAa,UACxD,OAAO,kBAAkB,OAAO,oBAAoB,CAAC,CACvD;CACA,iBAAiB,QAAQ,UAAU,MAAM,QAAQ,kBAAkB;CACnE,iBAAiB,QAAQ,iBAAiB,MAAM,cAAc,kBAAkB;CAChF,iBAAiB,QAAQ,gBAAgB,MAAM,aAAa,kBAAkB;CAC9E,iBAAiB,QAAQ,iBAAiB,MAAM,QAAQ,kBAAkB;CAC1E,iBAAiB,QAAQ,cAAc,MAAM,QAAQ,kBAAkB;CACvE,iBAAiB,QAAQ,WAAW,MAAM,OAAO,UAAW,QAAQ,SAAS,MAAO;AACtF;AAEA,SAAgB,kBACd,QACA,MACoB;CACpB,MAAM,SAAkC,EAAE,GAAG,OAAO;CAEpD,IAAI,SAAS,QAAQ,SAAS,KAAA,KAAa,OAAO,SAAS,UACzD,OAAO,OAAO,QAAQ,IAA+B;CAGvD,MAAM,eAAe,yBAAyB,MAAM;CAEpD,IAAI,OAAO,SAAS,YAAY,KAAK,KAAK,GACxC,OAAO,eAAe,GAAG,aAAa,GAAG,KAAK,KAAK,MAAM,KAAK,KAAK;CAGrE,OAAO,gBAAgB,KAAA;AACzB"}
|
|
1
|
+
{"version":3,"file":"block-layout.js","names":[],"sources":["../../../src/components/_internal/block-layout.ts"],"sourcesContent":["import { serializeCssDeclarations } from \"./style\";\n\nexport type LayoutBreakpoint = \"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;\n\nexport type BlockSpace = \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"page\";\nexport type BlockMargin = BlockSpace | \"auto\";\nexport type BlockSize =\n | \"auto\"\n | \"full\"\n | \"screen\"\n | \"content\"\n | \"sidebar\"\n | \"page\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\";\nexport type BlockDirection = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\nexport type BlockRowFrom = Exclude<LayoutBreakpoint, \"base\">;\nexport type BlockAlign = \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type BlockJustify = \"start\" | \"end\" | \"center\" | \"between\";\nexport type BlockBackground =\n | \"surface\"\n | \"muted\"\n | \"selected\"\n | \"canvas\"\n | \"raised\"\n | \"overlay\"\n | \"transparent\";\nexport type BlockRadius = true | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"round\";\nexport type BlockShadow = true | \"sm\" | \"md\" | \"lg\";\nexport type BlockZIndex =\n | \"header\"\n | \"sticky\"\n | \"fixed\"\n | \"dropdown\"\n | \"modal\"\n | \"popover\"\n | \"toast\"\n | \"tooltip\";\n\nexport type BlockLayoutProps = {\n padding?: ResponsiveValue<BlockSpace>;\n paddingX?: ResponsiveValue<BlockSpace>;\n paddingY?: ResponsiveValue<BlockSpace>;\n margin?: ResponsiveValue<BlockMargin>;\n marginX?: ResponsiveValue<BlockMargin>;\n marginY?: ResponsiveValue<BlockMargin>;\n width?: ResponsiveValue<BlockSize>;\n minWidth?: ResponsiveValue<BlockSize>;\n maxWidth?: ResponsiveValue<BlockSize>;\n height?: ResponsiveValue<BlockSize>;\n minHeight?: ResponsiveValue<BlockSize>;\n maxHeight?: ResponsiveValue<BlockSize>;\n rowFrom?: BlockRowFrom;\n direction?: ResponsiveValue<BlockDirection>;\n align?: ResponsiveValue<BlockAlign>;\n justify?: ResponsiveValue<BlockJustify>;\n gap?: ResponsiveValue<BlockSpace>;\n grow?: ResponsiveValue<boolean | number>;\n shrink?: ResponsiveValue<boolean | number>;\n center?: ResponsiveValue<boolean>;\n sticky?: boolean;\n top?: ResponsiveValue<BlockSpace>;\n zIndex?: ResponsiveValue<BlockZIndex>;\n background?: ResponsiveValue<BlockBackground>;\n border?: ResponsiveValue<boolean>;\n borderBottom?: ResponsiveValue<boolean>;\n borderRight?: ResponsiveValue<boolean>;\n radius?: ResponsiveValue<BlockRadius>;\n shadow?: ResponsiveValue<BlockShadow>;\n hide?: ResponsiveValue<boolean>;\n};\n\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"base\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst SPACE_TOKEN_MAP: Record<string, string> = {\n \"0\": \"0\",\n xs: \"var(--ak-space-xs)\",\n sm: \"var(--ak-space-sm)\",\n md: \"var(--ak-space-md)\",\n lg: \"var(--ak-space-lg)\",\n xl: \"var(--ak-space-xl)\",\n \"2xl\": \"var(--ak-space-2xl)\",\n \"3xl\": \"var(--ak-space-3xl)\",\n page: \"var(--ak-layout-page-gutter)\",\n};\n\nconst SIZE_TOKEN_MAP: Record<string, string> = {\n auto: \"auto\",\n full: \"100%\",\n screen: \"100dvh\",\n content: \"min(60vh, 36rem)\",\n sidebar: \"var(--ak-layout-sidebar-width)\",\n page: \"var(--ak-layout-content-max-width)\",\n sm: \"var(--ak-container-1)\",\n md: \"var(--ak-container-2)\",\n lg: \"var(--ak-container-3)\",\n xl: \"var(--ak-container-4)\",\n};\n\nconst BACKGROUND_TOKEN_MAP: Record<string, string> = {\n canvas: \"var(--ak-color-bg)\",\n surface: \"var(--ak-color-surface)\",\n muted: \"var(--ak-color-surface-muted)\",\n raised: \"var(--ak-color-surface-raised)\",\n overlay: \"var(--ak-color-surface-overlay)\",\n selected: \"var(--ak-color-selected)\",\n transparent: \"transparent\",\n};\n\nconst RADIUS_TOKEN_MAP: Record<string, string> = {\n sm: \"var(--ak-radius-sm)\",\n md: \"var(--ak-radius-md)\",\n lg: \"var(--ak-radius-lg)\",\n xl: \"var(--ak-radius-xl)\",\n round: \"var(--ak-radius-round)\",\n};\n\nconst SHADOW_TOKEN_MAP: Record<string, string> = {\n sm: \"var(--ak-shadow-sm)\",\n md: \"var(--ak-shadow-md)\",\n lg: \"var(--ak-shadow-lg)\",\n};\n\nconst Z_INDEX_TOKEN_MAP: Record<string, string> = {\n header: \"var(--ak-z-sticky)\",\n sticky: \"var(--ak-z-sticky)\",\n fixed: \"var(--ak-z-fixed)\",\n dropdown: \"var(--ak-z-dropdown)\",\n modal: \"var(--ak-z-modal)\",\n popover: \"var(--ak-z-popover)\",\n toast: \"var(--ak-z-toast)\",\n tooltip: \"var(--ak-z-tooltip)\",\n};\n\nconst BORDER_VALUE = \"1px solid var(--ak-color-border-subtle)\";\n\nconst BLOCK_LAYOUT_KEYS = new Set<keyof BlockLayoutProps>([\n \"padding\",\n \"paddingX\",\n \"paddingY\",\n \"margin\",\n \"marginX\",\n \"marginY\",\n \"width\",\n \"minWidth\",\n \"maxWidth\",\n \"height\",\n \"minHeight\",\n \"maxHeight\",\n \"rowFrom\",\n \"direction\",\n \"align\",\n \"justify\",\n \"gap\",\n \"grow\",\n \"shrink\",\n \"center\",\n \"sticky\",\n \"top\",\n \"zIndex\",\n \"background\",\n \"border\",\n \"borderBottom\",\n \"borderRight\",\n \"radius\",\n \"shadow\",\n \"hide\",\n]);\n\nfunction isResponsiveValue<T>(\n value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n return Boolean(\n value &&\n typeof value === \"object\" &&\n !Array.isArray(value) &&\n BREAKPOINTS.some((breakpoint) => breakpoint in value),\n );\n}\n\nfunction normalizeResponsiveValue<T>(\n value: ResponsiveValue<T> | undefined,\n): Partial<Record<LayoutBreakpoint, T>> | undefined {\n if (value === undefined) return undefined;\n if (isResponsiveValue(value)) return value;\n return { base: value };\n}\n\nfunction resolveTokenValue(\n value: string | number,\n tokens: Record<string, string>,\n): string | number {\n if (typeof value === \"number\") return value;\n const trimmed = value.trim();\n return tokens[trimmed] ?? trimmed;\n}\n\nfunction resolveSpaceValue(value: string | number): string | number {\n return resolveTokenValue(value, SPACE_TOKEN_MAP);\n}\n\nfunction resolveSizeValue(value: string): string {\n return String(resolveTokenValue(value, SIZE_TOKEN_MAP));\n}\n\nfunction resolveAlignValue(value: BlockAlign): string {\n if (value === \"start\") return \"flex-start\";\n if (value === \"end\") return \"flex-end\";\n return value;\n}\n\nfunction resolveJustifyValue(value: BlockJustify): string {\n if (value === \"start\") return \"flex-start\";\n if (value === \"end\") return \"flex-end\";\n if (value === \"between\") return \"space-between\";\n return value;\n}\n\nfunction resolveFlexFlag(value: boolean | number): string | number {\n if (value === true) return 1;\n if (value === false) return 0;\n return value;\n}\n\nfunction resolveBorderValue(value: boolean): string | undefined {\n if (value === false) return \"0\";\n return BORDER_VALUE;\n}\n\nfunction resolveRadiusValue(value: BlockRadius): string | undefined {\n if (value === true) return RADIUS_TOKEN_MAP.md;\n return String(resolveTokenValue(value, RADIUS_TOKEN_MAP));\n}\n\nfunction resolveShadowValue(value: BlockShadow): string | undefined {\n if (value === true) return SHADOW_TOKEN_MAP.sm;\n return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));\n}\n\nfunction setResponsiveVar<T>(\n styles: Record<string, string | number>,\n property: string,\n value: ResponsiveValue<T> | undefined,\n resolve: (value: T) => string | number | undefined,\n) {\n const normalized = normalizeResponsiveValue(value);\n if (!normalized) return;\n\n for (const breakpoint of BREAKPOINTS) {\n const breakpointValue = normalized[breakpoint];\n if (breakpointValue === undefined) continue;\n const resolved = resolve(breakpointValue);\n if (resolved === undefined || resolved === \"\") continue;\n styles[`--ak-${property}-${breakpoint}`] = resolved;\n }\n}\n\nexport function splitBlockLayoutProps<T extends Record<string, unknown>>(\n props: T,\n): {\n blockProps: Partial<BlockLayoutProps>;\n rest: Omit<T, keyof BlockLayoutProps>;\n} {\n const blockProps: Partial<BlockLayoutProps> = {};\n const rest: Record<string, unknown> = {};\n\n for (const [key, value] of Object.entries(props)) {\n if (BLOCK_LAYOUT_KEYS.has(key as keyof BlockLayoutProps)) {\n (blockProps as Record<string, unknown>)[key] = value;\n } else {\n rest[key] = value;\n }\n }\n\n return { blockProps, rest: rest as Omit<T, keyof BlockLayoutProps> };\n}\n\nexport function applyBlockLayoutStyles(\n styles: Record<string, string | number>,\n props: Partial<BlockLayoutProps>,\n) {\n setResponsiveVar(styles, \"p\", props.padding, resolveSpaceValue);\n setResponsiveVar(styles, \"px\", props.paddingX, resolveSpaceValue);\n setResponsiveVar(styles, \"py\", props.paddingY, resolveSpaceValue);\n setResponsiveVar(styles, \"m\", props.margin, resolveSpaceValue);\n setResponsiveVar(styles, \"mx\", props.marginX, resolveSpaceValue);\n setResponsiveVar(styles, \"my\", props.marginY, resolveSpaceValue);\n\n setResponsiveVar(styles, \"width\", props.width, resolveSizeValue);\n setResponsiveVar(styles, \"min-width\", props.minWidth, resolveSizeValue);\n setResponsiveVar(styles, \"max-width\", props.maxWidth, resolveSizeValue);\n setResponsiveVar(styles, \"height\", props.height, resolveSizeValue);\n setResponsiveVar(styles, \"min-height\", props.minHeight, resolveSizeValue);\n setResponsiveVar(styles, \"max-height\", props.maxHeight, resolveSizeValue);\n\n if (props.rowFrom !== undefined) {\n styles[`--ak-flex-direction-${props.rowFrom}`] = \"row\";\n }\n setResponsiveVar(styles, \"flex-direction\", props.direction, (value) => value);\n setResponsiveVar(styles, \"align-items\", props.align, resolveAlignValue);\n setResponsiveVar(styles, \"justify-content\", props.justify, resolveJustifyValue);\n setResponsiveVar(styles, \"gap\", props.gap, resolveSpaceValue);\n setResponsiveVar(styles, \"flex-grow\", props.grow, resolveFlexFlag);\n setResponsiveVar(styles, \"flex-shrink\", props.shrink, resolveFlexFlag);\n\n if (props.center !== undefined) {\n setResponsiveVar(styles, \"align-items\", props.center, (value) =>\n value ? \"center\" : undefined,\n );\n setResponsiveVar(styles, \"justify-content\", props.center, (value) =>\n value ? \"center\" : undefined,\n );\n }\n\n if (props.sticky) {\n styles[\"--ak-position-base\"] = \"sticky\";\n }\n setResponsiveVar(styles, \"top\", props.top, resolveSpaceValue);\n setResponsiveVar(styles, \"z-index\", props.zIndex, (value) =>\n String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)),\n );\n\n setResponsiveVar(styles, \"background\", props.background, (value) =>\n String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)),\n );\n setResponsiveVar(styles, \"border\", props.border, resolveBorderValue);\n setResponsiveVar(styles, \"border-bottom\", props.borderBottom, resolveBorderValue);\n setResponsiveVar(styles, \"border-right\", props.borderRight, resolveBorderValue);\n setResponsiveVar(styles, \"border-radius\", props.radius, resolveRadiusValue);\n setResponsiveVar(styles, \"box-shadow\", props.shadow, resolveShadowValue);\n setResponsiveVar(styles, \"display\", props.hide, (value) => (value ? \"none\" : \"flex\"));\n}\n\nexport function mergeLayoutStyles(\n layout: Record<string, string | number>,\n user: unknown,\n): string | undefined {\n const merged: Record<string, unknown> = { ...layout };\n\n if (user !== null && user !== undefined && typeof user === \"object\") {\n Object.assign(merged, user as Record<string, unknown>);\n }\n\n const mergedString = serializeCssDeclarations(merged);\n\n if (typeof user === \"string\" && user.trim()) {\n return mergedString ? `${mergedString};${user.trim()}` : user.trim();\n }\n\n return mergedString || undefined;\n}\n"],"mappings":"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"}
|
|
@@ -1,4 +1,12 @@
|
|
|
1
|
+
import { jsx } from "@askrjs/askr/jsx-runtime";
|
|
1
2
|
//#region src/components/_internal/jsx.ts
|
|
3
|
+
const renderIntrinsicElement = jsx;
|
|
4
|
+
function intrinsicElement(type, props, children) {
|
|
5
|
+
return renderIntrinsicElement(type, {
|
|
6
|
+
...props,
|
|
7
|
+
children
|
|
8
|
+
});
|
|
9
|
+
}
|
|
2
10
|
function isJsxElement(value) {
|
|
3
11
|
return typeof value === "object" && value !== null && "$$typeof" in value && "props" in value;
|
|
4
12
|
}
|
|
@@ -7,6 +15,6 @@ function toChildArray(children) {
|
|
|
7
15
|
return children === void 0 || children === null ? [] : [children];
|
|
8
16
|
}
|
|
9
17
|
//#endregion
|
|
10
|
-
export { isJsxElement, toChildArray };
|
|
18
|
+
export { intrinsicElement, isJsxElement, toChildArray };
|
|
11
19
|
|
|
12
20
|
//# sourceMappingURL=jsx.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jsx.js","names":[],"sources":["../../../src/components/_internal/jsx.ts"],"sourcesContent":["import type { JSXElement } from \"@askrjs/askr/foundations\";\n\nexport function isJsxElement(value: unknown): value is JSXElement {\n return typeof value === \"object\" && value !== null && \"$$typeof\" in value && \"props\" in value;\n}\n\nexport function hasJsxIntrinsicType(value: unknown, expectedType: string): value is JSXElement {\n return isJsxElement(value) && value.type === expectedType;\n}\n\nexport function toChildArray(children: unknown): unknown[] {\n if (Array.isArray(children)) {\n return children;\n }\n\n return children === undefined || children === null ? [] : [children];\n}\n\nexport function mapJsxTree(children: unknown, mapper: (element: JSXElement) => unknown): unknown {\n if (Array.isArray(children)) {\n return children.map((child) => mapJsxTree(child, mapper));\n }\n\n if (!isJsxElement(children)) {\n return children;\n }\n\n const mapped = mapper(children);\n\n if (!isJsxElement(mapped)) {\n return mapped;\n }\n\n const currentChildren = mapped.props?.children;\n const nextChildren = mapJsxTree(currentChildren, mapper);\n\n if (nextChildren === currentChildren) {\n return mapped;\n }\n\n return {\n ...mapped,\n props: {\n ...mapped.props,\n children: nextChildren,\n },\n };\n}\n\nexport function collectJsxElements(\n children: unknown,\n predicate?: (element: JSXElement) => boolean,\n): JSXElement[] {\n const result: JSXElement[] = [];\n\n function visit(value: unknown): void {\n if (Array.isArray(value)) {\n for (let index = 0; index < value.length; index += 1) {\n visit(value[index]);\n }\n return;\n }\n\n if (!isJsxElement(value)) {\n return;\n }\n\n if (!predicate || predicate(value)) {\n result.push(value);\n }\n\n visit(value.props?.children);\n }\n\n visit(children);\n\n return result;\n}\n\nfunction isEventHandlerLikeKey(key: string): boolean {\n return key.length >= 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110;\n}\n\nfunction compareKeys(left: string, right: string): number {\n if (left < right) return -1;\n if (left > right) return 1;\n return 0;\n}\n\nfunction serializeArray(value: readonly unknown[]): string {\n if (value.length === 0) {\n return \"\";\n }\n\n if (value.length === 1) {\n return serializeForId(value[0]);\n }\n\n if (value.length === 2) {\n return `${serializeForId(value[0])}|${serializeForId(value[1])}`;\n }\n\n let result = serializeForId(value[0]);\n\n for (let index = 1; index < value.length; index += 1) {\n result += `|${serializeForId(value[index])}`;\n }\n\n return result;\n}\n\nfunction serializeSerializableProps(props: Record<string, unknown>): string {\n const keys: string[] = [];\n\n for (const key of Object.keys(props)) {\n if (key === \"children\" || key === \"ref\" || isEventHandlerLikeKey(key)) {\n continue;\n }\n\n const entryValue = props[key];\n\n if (\n typeof entryValue === \"string\" ||\n typeof entryValue === \"number\" ||\n typeof entryValue === \"boolean\"\n ) {\n keys.push(key);\n }\n }\n\n if (keys.length === 0) {\n return \"\";\n }\n\n if (keys.length === 1) {\n const key = keys[0];\n\n return `${key}:${String(props[key])}`;\n }\n\n if (keys.length === 2) {\n if (keys[1] < keys[0]) {\n [keys[0], keys[1]] = [keys[1], keys[0]];\n }\n\n return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;\n }\n\n keys.sort(compareKeys);\n\n let result = `${keys[0]}:${String(props[keys[0]])}`;\n\n for (let index = 1; index < keys.length; index += 1) {\n const key = keys[index];\n result += `,${key}:${String(props[key])}`;\n }\n\n return result;\n}\n\nfunction hasEmptyJsxChildren(children: unknown): boolean {\n return (\n children === undefined ||\n children === null ||\n typeof children === \"boolean\" ||\n (Array.isArray(children) && children.length === 0)\n );\n}\n\nexport function extractTextContent(value: unknown): string {\n if (Array.isArray(value)) {\n return value.map((entry) => extractTextContent(entry)).join(\"\");\n }\n\n if (\n value === undefined ||\n value === null ||\n typeof value === \"boolean\" ||\n typeof value === \"function\"\n ) {\n return \"\";\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return String(value);\n }\n\n if (isJsxElement(value)) {\n return extractTextContent(value.props?.children);\n }\n\n return \"\";\n}\n\nexport function serializeForId(value: unknown): string {\n if (Array.isArray(value)) {\n return serializeArray(value);\n }\n\n if (value === undefined || value === null || typeof value === \"boolean\") {\n return \"\";\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return String(value);\n }\n\n if (isJsxElement(value)) {\n const typeName =\n typeof value.type === \"string\"\n ? value.type\n : typeof value.type === \"function\"\n ? value.type.name || \"component\"\n : \"component\";\n const props = (value.props ?? {}) as Record<string, unknown>;\n const propEntries = serializeSerializableProps(props);\n const children = props.children;\n const propsPrefix = propEntries === \"\" ? `${typeName}[]` : `${typeName}[${propEntries}]`;\n\n if (hasEmptyJsxChildren(children)) {\n return `${propsPrefix}()`;\n }\n\n return `${propsPrefix}(${serializeForId(children)})`;\n }\n\n return typeof value;\n}\n"],"mappings":";AAEA,SAAgB,aAAa,OAAqC;CAChE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,cAAc,SAAS,WAAW;AAC1F;AAMA,SAAgB,aAAa,UAA8B;CACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO;CAGT,OAAO,aAAa,KAAA,KAAa,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ;AACrE"}
|
|
1
|
+
{"version":3,"file":"jsx.js","names":[],"sources":["../../../src/components/_internal/jsx.ts"],"sourcesContent":["import type { JSXElement } from \"@askrjs/askr/foundations\";\nimport { jsx } from \"@askrjs/askr/jsx-runtime\";\n\nconst renderIntrinsicElement = jsx as (type: string, props: Record<string, unknown>) => JSX.Element;\n\nexport function intrinsicElement(\n type: string,\n props: Record<string, unknown>,\n children: unknown,\n): JSX.Element {\n return renderIntrinsicElement(type, { ...props, children });\n}\n\nexport function isJsxElement(value: unknown): value is JSXElement {\n return typeof value === \"object\" && value !== null && \"$$typeof\" in value && \"props\" in value;\n}\n\nexport function hasJsxIntrinsicType(value: unknown, expectedType: string): value is JSXElement {\n return isJsxElement(value) && value.type === expectedType;\n}\n\nexport function toChildArray(children: unknown): unknown[] {\n if (Array.isArray(children)) {\n return children;\n }\n\n return children === undefined || children === null ? [] : [children];\n}\n\nexport function mapJsxTree(children: unknown, mapper: (element: JSXElement) => unknown): unknown {\n if (Array.isArray(children)) {\n return children.map((child) => mapJsxTree(child, mapper));\n }\n\n if (!isJsxElement(children)) {\n return children;\n }\n\n const mapped = mapper(children);\n\n if (!isJsxElement(mapped)) {\n return mapped;\n }\n\n const currentChildren = mapped.props?.children;\n const nextChildren = mapJsxTree(currentChildren, mapper);\n\n if (nextChildren === currentChildren) {\n return mapped;\n }\n\n return {\n ...mapped,\n props: {\n ...mapped.props,\n children: nextChildren,\n },\n };\n}\n\nexport function collectJsxElements(\n children: unknown,\n predicate?: (element: JSXElement) => boolean,\n): JSXElement[] {\n const result: JSXElement[] = [];\n\n function visit(value: unknown): void {\n if (Array.isArray(value)) {\n for (let index = 0; index < value.length; index += 1) {\n visit(value[index]);\n }\n return;\n }\n\n if (!isJsxElement(value)) {\n return;\n }\n\n if (!predicate || predicate(value)) {\n result.push(value);\n }\n\n visit(value.props?.children);\n }\n\n visit(children);\n\n return result;\n}\n\nfunction isEventHandlerLikeKey(key: string): boolean {\n return key.length >= 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110;\n}\n\nfunction compareKeys(left: string, right: string): number {\n if (left < right) return -1;\n if (left > right) return 1;\n return 0;\n}\n\nfunction serializeArray(value: readonly unknown[]): string {\n if (value.length === 0) {\n return \"\";\n }\n\n if (value.length === 1) {\n return serializeForId(value[0]);\n }\n\n if (value.length === 2) {\n return `${serializeForId(value[0])}|${serializeForId(value[1])}`;\n }\n\n let result = serializeForId(value[0]);\n\n for (let index = 1; index < value.length; index += 1) {\n result += `|${serializeForId(value[index])}`;\n }\n\n return result;\n}\n\nfunction serializeSerializableProps(props: Record<string, unknown>): string {\n const keys: string[] = [];\n\n for (const key of Object.keys(props)) {\n if (key === \"children\" || key === \"ref\" || isEventHandlerLikeKey(key)) {\n continue;\n }\n\n const entryValue = props[key];\n\n if (\n typeof entryValue === \"string\" ||\n typeof entryValue === \"number\" ||\n typeof entryValue === \"boolean\"\n ) {\n keys.push(key);\n }\n }\n\n if (keys.length === 0) {\n return \"\";\n }\n\n if (keys.length === 1) {\n const key = keys[0];\n\n return `${key}:${String(props[key])}`;\n }\n\n if (keys.length === 2) {\n if (keys[1] < keys[0]) {\n [keys[0], keys[1]] = [keys[1], keys[0]];\n }\n\n return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;\n }\n\n keys.sort(compareKeys);\n\n let result = `${keys[0]}:${String(props[keys[0]])}`;\n\n for (let index = 1; index < keys.length; index += 1) {\n const key = keys[index];\n result += `,${key}:${String(props[key])}`;\n }\n\n return result;\n}\n\nfunction hasEmptyJsxChildren(children: unknown): boolean {\n return (\n children === undefined ||\n children === null ||\n typeof children === \"boolean\" ||\n (Array.isArray(children) && children.length === 0)\n );\n}\n\nexport function extractTextContent(value: unknown): string {\n if (Array.isArray(value)) {\n return value.map((entry) => extractTextContent(entry)).join(\"\");\n }\n\n if (\n value === undefined ||\n value === null ||\n typeof value === \"boolean\" ||\n typeof value === \"function\"\n ) {\n return \"\";\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return String(value);\n }\n\n if (isJsxElement(value)) {\n return extractTextContent(value.props?.children);\n }\n\n return \"\";\n}\n\nexport function serializeForId(value: unknown): string {\n if (Array.isArray(value)) {\n return serializeArray(value);\n }\n\n if (value === undefined || value === null || typeof value === \"boolean\") {\n return \"\";\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return String(value);\n }\n\n if (isJsxElement(value)) {\n const typeName =\n typeof value.type === \"string\"\n ? value.type\n : typeof value.type === \"function\"\n ? value.type.name || \"component\"\n : \"component\";\n const props = (value.props ?? {}) as Record<string, unknown>;\n const propEntries = serializeSerializableProps(props);\n const children = props.children;\n const propsPrefix = propEntries === \"\" ? `${typeName}[]` : `${typeName}[${propEntries}]`;\n\n if (hasEmptyJsxChildren(children)) {\n return `${propsPrefix}()`;\n }\n\n return `${propsPrefix}(${serializeForId(children)})`;\n }\n\n return typeof value;\n}\n"],"mappings":";;AAGA,MAAM,yBAAyB;AAE/B,SAAgB,iBACd,MACA,OACA,UACa;CACb,OAAO,uBAAuB,MAAM;EAAE,GAAG;EAAO;CAAS,CAAC;AAC5D;AAEA,SAAgB,aAAa,OAAqC;CAChE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,cAAc,SAAS,WAAW;AAC1F;AAMA,SAAgB,aAAa,UAA8B;CACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO;CAGT,OAAO,aAAa,KAAA,KAAa,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ;AACrE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { Close } from \"../close\";\nimport type { AlertProps } from \"./alert.types\";\n\nfunction resolveAlertRole(variant: AlertProps[\"variant\"] | undefined): \"alert\" | \"status\" {\n if (variant === \"danger\" || variant === \"warning\") {\n return \"alert\";\n }\n\n return \"status\";\n}\n\nexport function Alert(props: AlertProps): JSX.Element {\n const {\n actions,\n children,\n class: className,\n description,\n dismissLabel = \"Dismiss alert\",\n icon,\n onDismiss,\n ref,\n title,\n titleAs: TitleTag = \"h3\",\n variant = \"default\",\n role,\n ...rest\n } = props;\n const shouldRenderDismiss = onDismiss !== undefined;\n const resolvedRole = role ?? resolveAlertRole(variant);\n const hasVariant = variant !== \"default\";\n\n return (\n <div\n {...rest}\n ref={ref}\n class={classes(\n \"alert\",\n hasVariant ? `alert-${variant}` : undefined,\n shouldRenderDismiss ? \"alert-dismissible\" : undefined,\n className,\n )}\n data-dismissible={shouldRenderDismiss ? \"true\" : undefined}\n data-slot=\"alert\"\n data-variant={hasVariant ? variant : undefined}\n role={resolvedRole}\n >\n {icon !== undefined ? (\n <div aria-hidden=\"true\" class=\"alert-icon\" data-slot=\"alert-icon\">\n {icon}\n </div>\n ) : null}\n\n <div class=\"alert-content\" data-slot=\"alert-content\">\n {title !== undefined ? (\n <TitleTag class=\"alert-title\" data-slot=\"alert-title\">\n {title}\n </TitleTag>\n ) : null}\n\n {description !== undefined ? (\n <p class=\"alert-description\" data-slot=\"alert-description\">\n {description}\n </p>\n ) : null}\n\n {children}\n\n {actions !== undefined ? (\n <div class=\"alert-actions\" data-slot=\"alert-actions\">\n {actions}\n </div>\n ) : null}\n </div>\n\n {shouldRenderDismiss ? (\n <div class=\"alert-close\" data-slot=\"alert-close\">\n <Close label={dismissLabel} onPress={onDismiss} />\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;AAIA,SAAS,iBAAiB,SAAgE;CACxF,IAAI,YAAY,YAAY,YAAY,WACtC,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EACJ,SACA,UACA,OAAO,WACP,aACA,eAAe,iBACf,MACA,WACA,KACA,OACA,SAAS,WAAW,MACpB,UAAU,WACV,MACA,GAAG,SACD;CACJ,MAAM,sBAAsB,cAAc,KAAA;CAC1C,MAAM,eAAe,QAAQ,iBAAiB,OAAO;CACrD,MAAM,aAAa,YAAY;CAE/B,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,SACA,aAAa,SAAS,YAAY,KAAA,GAClC,sBAAsB,sBAAsB,KAAA,GAC5C,SACF;EACA,oBAAkB,sBAAsB,SAAS,KAAA;EACjD,aAAU;EACV,gBAAc,aAAa,UAAU,KAAA;EACrC,MAAM;YAZR;GAcG,SAAS,KAAA,IACR,oBAAC,OAAD;IAAK,eAAY;IAAO,OAAM;IAAa,aAAU;cAClD;GACE,CAAA,IACH;GAEJ,qBAAC,OAAD;IAAK,OAAM;IAAgB,aAAU;cAArC;KACG,UAAU,KAAA,IACT,oBAAC,UAAD;MAAU,OAAM;MAAc,aAAU;gBACrC;KACO,CAAA,IACR;KAEH,gBAAgB,KAAA,IACf,oBAAC,KAAD;MAAG,OAAM;MAAoB,aAAU;gBACpC;KACA,CAAA,IACD;KAEH;KAEA,YAAY,KAAA,IACX,oBAAC,OAAD;MAAK,OAAM;MAAgB,aAAU;gBAClC;KACE,CAAA,IACH;IACD;;GAEJ,sBACC,oBAAC,OAAD;IAAK,OAAM;IAAc,aAAU;cACjC,oBAAC,OAAD;KAAO,OAAO;KAAc,SAAS;IAAY,CAAA;GAC9C,CAAA,IACH;EACD;;AAET"}
|
|
1
|
+
{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { Close } from \"../close\";\nimport type { AlertProps } from \"./alert.types\";\n\nfunction resolveAlertRole(variant: AlertProps[\"variant\"] | undefined): \"alert\" | \"status\" {\n if (variant === \"danger\" || variant === \"warning\") {\n return \"alert\";\n }\n\n return \"status\";\n}\n\nexport function Alert(props: AlertProps): JSX.Element {\n const {\n actions,\n children,\n class: className,\n description,\n dismissLabel = \"Dismiss alert\",\n icon,\n onDismiss,\n ref,\n title,\n titleAs: TitleTag = \"h3\",\n variant = \"default\",\n role,\n ...rest\n } = props;\n const shouldRenderDismiss = onDismiss !== undefined;\n const resolvedRole = role ?? resolveAlertRole(variant);\n const hasVariant = variant !== \"default\";\n\n return (\n <div\n {...rest}\n ref={ref}\n class={classes(\n \"alert\",\n hasVariant ? `alert-${variant}` : undefined,\n shouldRenderDismiss ? \"alert-dismissible\" : undefined,\n className,\n )}\n data-dismissible={shouldRenderDismiss ? \"true\" : undefined}\n data-slot=\"alert\"\n data-variant={hasVariant ? variant : undefined}\n role={resolvedRole as string}\n >\n {icon !== undefined ? (\n <div aria-hidden=\"true\" class=\"alert-icon\" data-slot=\"alert-icon\">\n {icon}\n </div>\n ) : null}\n\n <div class=\"alert-content\" data-slot=\"alert-content\">\n {title !== undefined ? (\n <TitleTag class=\"alert-title\" data-slot=\"alert-title\">\n {title}\n </TitleTag>\n ) : null}\n\n {description !== undefined ? (\n <p class=\"alert-description\" data-slot=\"alert-description\">\n {description}\n </p>\n ) : null}\n\n {children}\n\n {actions !== undefined ? (\n <div class=\"alert-actions\" data-slot=\"alert-actions\">\n {actions}\n </div>\n ) : null}\n </div>\n\n {shouldRenderDismiss ? (\n <div class=\"alert-close\" data-slot=\"alert-close\">\n <Close label={dismissLabel} onPress={onDismiss} />\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;AAIA,SAAS,iBAAiB,SAAgE;CACxF,IAAI,YAAY,YAAY,YAAY,WACtC,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EACJ,SACA,UACA,OAAO,WACP,aACA,eAAe,iBACf,MACA,WACA,KACA,OACA,SAAS,WAAW,MACpB,UAAU,WACV,MACA,GAAG,SACD;CACJ,MAAM,sBAAsB,cAAc,KAAA;CAC1C,MAAM,eAAe,QAAQ,iBAAiB,OAAO;CACrD,MAAM,aAAa,YAAY;CAE/B,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,SACA,aAAa,SAAS,YAAY,KAAA,GAClC,sBAAsB,sBAAsB,KAAA,GAC5C,SACF;EACA,oBAAkB,sBAAsB,SAAS,KAAA;EACjD,aAAU;EACV,gBAAc,aAAa,UAAU,KAAA;EACrC,MAAM;YAZR;GAcG,SAAS,KAAA,IACR,oBAAC,OAAD;IAAK,eAAY;IAAO,OAAM;IAAa,aAAU;cAClD;GACE,CAAA,IACH;GAEJ,qBAAC,OAAD;IAAK,OAAM;IAAgB,aAAU;cAArC;KACG,UAAU,KAAA,IACT,oBAAC,UAAD;MAAU,OAAM;MAAc,aAAU;gBACrC;KACO,CAAA,IACR;KAEH,gBAAgB,KAAA,IACf,oBAAC,KAAD;MAAG,OAAM;MAAoB,aAAU;gBACpC;KACA,CAAA,IACD;KAEH;KAEA,YAAY,KAAA,IACX,oBAAC,OAAD;MAAK,OAAM;MAAgB,aAAU;gBAClC;KACE,CAAA,IACH;IACD;;GAEJ,sBACC,oBAAC,OAAD;IAAK,OAAM;IAAc,aAAU;cACjC,oBAAC,OAAD;KAAO,OAAO;KAAc,SAAS;IAAY,CAAA;GAC9C,CAAA,IACH;EACD;;AAET"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio.types.js";
|
|
2
|
-
|
|
3
2
|
//#region src/components/aspect-ratio/aspect-ratio.d.ts
|
|
4
3
|
declare function AspectRatio(props: AspectRatioProps): JSX.Element;
|
|
5
4
|
declare function AspectRatio(props: AspectRatioAsChildProps): JSX.Element;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { mergeProps } from "../_internal/merge-props.js";
|
|
2
2
|
import { styleDeclarationsToClass } from "../_internal/style.js";
|
|
3
3
|
import { mergeLayoutStyles } from "../_internal/block-layout.js";
|
|
4
|
+
import { intrinsicElement } from "../_internal/jsx.js";
|
|
4
5
|
import { jsx } from "@askrjs/askr/jsx-runtime";
|
|
5
6
|
import { Slot } from "@askrjs/askr/foundations";
|
|
6
7
|
//#region src/components/aspect-ratio/aspect-ratio.tsx
|
|
@@ -22,10 +23,7 @@ function AspectRatio(props) {
|
|
|
22
23
|
...finalProps,
|
|
23
24
|
children
|
|
24
25
|
});
|
|
25
|
-
return
|
|
26
|
-
...finalProps,
|
|
27
|
-
children
|
|
28
|
-
});
|
|
26
|
+
return intrinsicElement("div", finalProps, children);
|
|
29
27
|
}
|
|
30
28
|
//#endregion
|
|
31
29
|
export { AspectRatio };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aspect-ratio.js","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { mergeLayoutStyles } from \"../_internal/block-layout\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { AspectRatioAsChildProps, AspectRatioProps } from \"./aspect-ratio.types\";\n\nexport function AspectRatio(props: AspectRatioProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioAsChildProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioProps | AspectRatioAsChildProps) {\n const { asChild, children, ratio = 1, ref, style, ...rest } = props;\n const layoutClass = styleDeclarationsToClass(\n mergeLayoutStyles(\n {\n display: \"block\",\n width: \"100%\",\n aspectRatio: String(ratio),\n overflow: \"hidden\",\n },\n style,\n ),\n );\n\n const finalProps = mergeProps(rest, {\n ref,\n \"data-slot\": \"aspect-ratio\",\n ...(layoutClass ? { class: layoutClass } : {}),\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children} />;\n }\n\n return
|
|
1
|
+
{"version":3,"file":"aspect-ratio.js","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { mergeLayoutStyles } from \"../_internal/block-layout\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport type { AspectRatioAsChildProps, AspectRatioProps } from \"./aspect-ratio.types\";\n\nexport function AspectRatio(props: AspectRatioProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioAsChildProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioProps | AspectRatioAsChildProps) {\n const { asChild, children, ratio = 1, ref, style, ...rest } = props;\n const layoutClass = styleDeclarationsToClass(\n mergeLayoutStyles(\n {\n display: \"block\",\n width: \"100%\",\n aspectRatio: String(ratio),\n overflow: \"hidden\",\n },\n style,\n ),\n );\n\n const finalProps = mergeProps(rest, {\n ref,\n \"data-slot\": \"aspect-ratio\",\n ...(layoutClass ? { class: layoutClass } : {}),\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children} />;\n }\n\n return intrinsicElement(\"div\", finalProps, children);\n}\n"],"mappings":";;;;;;;AASA,SAAgB,YAAY,OAAmD;CAC7E,MAAM,EAAE,SAAS,UAAU,QAAQ,GAAG,KAAK,OAAO,GAAG,SAAS;CAC9D,MAAM,cAAc,yBAClB,kBACE;EACE,SAAS;EACT,OAAO;EACP,aAAa,OAAO,KAAK;EACzB,UAAU;CACZ,GACA,KACF,CACF;CAEA,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,GAAI,cAAc,EAAE,OAAO,YAAY,IAAI,CAAC;CAC9C,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,iBAAiB,OAAO,YAAY,QAAQ;AACrD"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { JSXElement } from "@askrjs/askr/foundations";
|
|
2
2
|
import { Ref } from "@askrjs/askr/foundations/utilities";
|
|
3
|
-
|
|
4
3
|
//#region src/components/aspect-ratio/aspect-ratio.types.d.ts
|
|
5
4
|
type AspectRatioOwnProps = {
|
|
6
5
|
children?: unknown;
|
|
@@ -17,5 +16,5 @@ type AspectRatioAsChildProps = AspectRatioOwnProps & {
|
|
|
17
16
|
ref?: Ref<unknown>;
|
|
18
17
|
};
|
|
19
18
|
//#endregion
|
|
20
|
-
export { AspectRatioAsChildProps, AspectRatioProps };
|
|
19
|
+
export { AspectRatioAsChildProps, AspectRatioOwnProps, AspectRatioProps };
|
|
21
20
|
//# sourceMappingURL=aspect-ratio.types.d.ts.map
|
|
@@ -1,5 +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
4
|
import { jsx } from "@askrjs/askr/jsx-runtime";
|
|
4
5
|
import { Slot } from "@askrjs/askr/foundations";
|
|
5
6
|
//#region src/components/badge/badge.tsx
|
|
@@ -20,10 +21,7 @@ function Badge(props) {
|
|
|
20
21
|
...finalProps,
|
|
21
22
|
children
|
|
22
23
|
});
|
|
23
|
-
return
|
|
24
|
-
...finalProps,
|
|
25
|
-
children
|
|
26
|
-
});
|
|
24
|
+
return intrinsicElement("span", finalProps, children);
|
|
27
25
|
}
|
|
28
26
|
//#endregion
|
|
29
27
|
export { Badge };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { BadgeAsChildProps, BadgeProps } from \"./badge.types\";\n\nfunction normalizeBadgeVariant(variant: BadgeProps[\"variant\"] | undefined) {\n return variant && variant !== \"default\" ? `badge-${variant}` : undefined;\n}\n\nexport function Badge(props: BadgeProps): JSX.Element;\nexport function Badge(props: BadgeAsChildProps): JSX.Element;\nexport function Badge(props: BadgeProps | BadgeAsChildProps) {\n const { asChild, children, variant, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n class: classes(\"badge\", normalizeBadgeVariant(variant)),\n ref,\n \"data-slot\": \"badge\",\n \"data-badge\": \"true\",\n \"data-variant\": variant && variant !== \"default\" ? variant : undefined,\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children} />;\n }\n\n return
|
|
1
|
+
{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport type { BadgeAsChildProps, BadgeProps } from \"./badge.types\";\n\nfunction normalizeBadgeVariant(variant: BadgeProps[\"variant\"] | undefined) {\n return variant && variant !== \"default\" ? `badge-${variant}` : undefined;\n}\n\nexport function Badge(props: BadgeProps): JSX.Element;\nexport function Badge(props: BadgeAsChildProps): JSX.Element;\nexport function Badge(props: BadgeProps | BadgeAsChildProps) {\n const { asChild, children, variant, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n class: classes(\"badge\", normalizeBadgeVariant(variant)),\n ref,\n \"data-slot\": \"badge\",\n \"data-badge\": \"true\",\n \"data-variant\": variant && variant !== \"default\" ? variant : undefined,\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children} />;\n }\n\n return intrinsicElement(\"span\", finalProps, children);\n}\n"],"mappings":";;;;;;AAMA,SAAS,sBAAsB,SAA4C;CACzE,OAAO,WAAW,YAAY,YAAY,SAAS,YAAY,KAAA;AACjE;AAIA,SAAgB,MAAM,OAAuC;CAC3D,MAAM,EAAE,SAAS,UAAU,SAAS,KAAK,GAAG,SAAS;CACrD,MAAM,aAAa,WAAW,MAAM;EAClC,OAAO,QAAQ,SAAS,sBAAsB,OAAO,CAAC;EACtD;EACA,aAAa;EACb,cAAc;EACd,gBAAgB,WAAW,YAAY,YAAY,UAAU,KAAA;CAC/D,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,iBAAiB,QAAQ,YAAY,QAAQ;AACtD"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { JSXElement } from "@askrjs/askr/foundations";
|
|
2
2
|
import { Ref } from "@askrjs/askr/foundations/utilities";
|
|
3
|
-
|
|
4
3
|
//#region src/components/badge/badge.types.d.ts
|
|
5
4
|
type BadgeVariant = "default" | "secondary" | "outline" | "success" | "warning" | "danger" | "info";
|
|
6
5
|
type BadgeOwnProps = {
|
|
@@ -17,5 +16,5 @@ type BadgeAsChildProps = BadgeOwnProps & {
|
|
|
17
16
|
ref?: Ref<unknown>;
|
|
18
17
|
};
|
|
19
18
|
//#endregion
|
|
20
|
-
export { BadgeAsChildProps, BadgeOwnProps, BadgeProps };
|
|
19
|
+
export { BadgeAsChildProps, BadgeOwnProps, BadgeProps, BadgeVariant };
|
|
21
20
|
//# sourceMappingURL=badge.types.d.ts.map
|
|
@@ -2,6 +2,7 @@ import { classes } from "../_internal/classes.js";
|
|
|
2
2
|
import { mergeProps } from "../_internal/merge-props.js";
|
|
3
3
|
import { styleDeclarationsToClass } from "../_internal/style.js";
|
|
4
4
|
import { applyBlockLayoutStyles, mergeLayoutStyles, splitBlockLayoutProps } from "../_internal/block-layout.js";
|
|
5
|
+
import { intrinsicElement } from "../_internal/jsx.js";
|
|
5
6
|
import { jsx } from "@askrjs/askr/jsx-runtime";
|
|
6
7
|
import { Slot } from "@askrjs/askr/foundations";
|
|
7
8
|
//#region src/components/block/block.tsx
|
|
@@ -25,10 +26,7 @@ function Block(props) {
|
|
|
25
26
|
...finalProps,
|
|
26
27
|
children
|
|
27
28
|
});
|
|
28
|
-
return
|
|
29
|
-
...finalProps,
|
|
30
|
-
children
|
|
31
|
-
});
|
|
29
|
+
return intrinsicElement(as ?? DEFAULT_ELEMENT, finalProps, children);
|
|
32
30
|
}
|
|
33
31
|
//#endregion
|
|
34
32
|
export { Block };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"block.js","names":[],"sources":["../../../src/components/block/block.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { classes } from \"../_internal/classes\";\nimport {\n applyBlockLayoutStyles,\n mergeLayoutStyles,\n splitBlockLayoutProps,\n} from \"../_internal/block-layout\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { BlockAsChildProps, BlockNativeProps } from \"./block.types\";\n\nconst DEFAULT_ELEMENT = \"div\";\n\nexport function Block(props: BlockNativeProps): JSX.Element;\nexport function Block(props: BlockAsChildProps): JSX.Element;\nexport function Block(props: BlockNativeProps | BlockAsChildProps) {\n const as = \"as\" in props ? props.as : DEFAULT_ELEMENT;\n const {\n asChild,\n children,\n ref,\n class: classProp,\n className,\n style: userStyle,\n ...rest\n } = props as (BlockNativeProps | BlockAsChildProps) & {\n class?: unknown;\n className?: unknown;\n style?: unknown;\n };\n\n const { blockProps, rest: passthroughProps } = splitBlockLayoutProps(rest);\n const layoutStyle: Record<string, string | number> = {};\n applyBlockLayoutStyles(layoutStyle, blockProps);\n\n const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(layoutStyle, userStyle));\n const slot =\n typeof (passthroughProps as Record<string, unknown>)[\"data-slot\"] === \"string\"\n ? String((passthroughProps as Record<string, unknown>)[\"data-slot\"])\n : \"block\";\n\n const finalProps = mergeProps(passthroughProps, {\n ref,\n class: classes(classProp, className, layoutClass),\n \"data-slot\": slot,\n \"data-ak-layout\": \"true\",\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n }\n\n
|
|
1
|
+
{"version":3,"file":"block.js","names":[],"sources":["../../../src/components/block/block.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { classes } from \"../_internal/classes\";\nimport {\n applyBlockLayoutStyles,\n mergeLayoutStyles,\n splitBlockLayoutProps,\n} from \"../_internal/block-layout\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { BlockAsChildProps, BlockNativeProps } from \"./block.types\";\n\nconst DEFAULT_ELEMENT = \"div\";\n\nexport function Block(props: BlockNativeProps): JSX.Element;\nexport function Block(props: BlockAsChildProps): JSX.Element;\nexport function Block(props: BlockNativeProps | BlockAsChildProps) {\n const as = \"as\" in props ? props.as : DEFAULT_ELEMENT;\n const {\n asChild,\n children,\n ref,\n class: classProp,\n className,\n style: userStyle,\n ...rest\n } = props as (BlockNativeProps | BlockAsChildProps) & {\n class?: unknown;\n className?: unknown;\n style?: unknown;\n };\n\n const { blockProps, rest: passthroughProps } = splitBlockLayoutProps(rest);\n const layoutStyle: Record<string, string | number> = {};\n applyBlockLayoutStyles(layoutStyle, blockProps);\n\n const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(layoutStyle, userStyle));\n const slot =\n typeof (passthroughProps as Record<string, unknown>)[\"data-slot\"] === \"string\"\n ? String((passthroughProps as Record<string, unknown>)[\"data-slot\"])\n : \"block\";\n\n const finalProps = mergeProps(passthroughProps, {\n ref,\n class: classes(classProp, className, layoutClass),\n \"data-slot\": slot,\n \"data-ak-layout\": \"true\",\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n }\n\n return intrinsicElement(as ?? DEFAULT_ELEMENT, finalProps, children);\n}\n"],"mappings":";;;;;;;;AAYA,MAAM,kBAAkB;AAIxB,SAAgB,MAAM,OAA6C;CACjE,MAAM,KAAK,QAAQ,QAAQ,MAAM,KAAK;CACtC,MAAM,EACJ,SACA,UACA,KACA,OAAO,WACP,WACA,OAAO,WACP,GAAG,SACD;CAMJ,MAAM,EAAE,YAAY,MAAM,qBAAqB,sBAAsB,IAAI;CACzE,MAAM,cAA+C,CAAC;CACtD,uBAAuB,aAAa,UAAU;CAE9C,MAAM,cAAc,yBAAyB,kBAAkB,aAAa,SAAS,CAAC;CACtF,MAAM,OACJ,OAAQ,iBAA6C,iBAAiB,WAClE,OAAQ,iBAA6C,YAAY,IACjE;CAEN,MAAM,aAAa,WAAW,kBAAkB;EAC9C;EACA,OAAO,QAAQ,WAAW,WAAW,WAAW;EAChD,aAAa;EACb,kBAAkB;CACpB,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAA0B,CAAA;CAG3E,OAAO,iBAAiB,MAAM,iBAAiB,YAAY,QAAQ;AACrE"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { BlockAlign, BlockBackground, BlockDirection, BlockJustify, BlockLayoutProps, BlockMargin, BlockRadius, BlockRowFrom, BlockShadow, BlockSize, BlockSpace, BlockZIndex, ResponsiveValue } from "../_internal/block-layout.js";
|
|
2
2
|
import { JSXElement } from "@askrjs/askr/foundations";
|
|
3
3
|
import { Ref } from "@askrjs/askr/foundations/utilities";
|
|
4
|
-
|
|
5
4
|
//#region src/components/block/block.types.d.ts
|
|
6
5
|
type BlockElement = "div" | "span" | "main" | "header" | "footer" | "section" | "aside" | "nav" | "a" | "ul" | "ol" | "li" | "form" | "article";
|
|
7
6
|
type BlockOwnProps = BlockLayoutProps & {
|
|
@@ -14,7 +13,7 @@ type BlockElementProps<TElement extends BlockElement> = Omit<JSX.IntrinsicElemen
|
|
|
14
13
|
asChild?: false;
|
|
15
14
|
ref?: Ref<unknown>;
|
|
16
15
|
};
|
|
17
|
-
type BlockNativeProps = { [TElement in BlockElement]: BlockElementProps<TElement
|
|
16
|
+
type BlockNativeProps = { [TElement in BlockElement]: BlockElementProps<TElement>; }[BlockElement];
|
|
18
17
|
type BlockAsChildProps = Omit<BlockOwnProps, "as"> & {
|
|
19
18
|
asChild: true;
|
|
20
19
|
children: JSXElement;
|
|
@@ -24,5 +23,5 @@ type BlockDivProps = BlockElementProps<"div">;
|
|
|
24
23
|
type BlockSpanProps = BlockElementProps<"span">;
|
|
25
24
|
type BlockProps = BlockNativeProps | BlockAsChildProps;
|
|
26
25
|
//#endregion
|
|
27
|
-
export { BlockAsChildProps, BlockDivProps, BlockElement, BlockElementProps, BlockNativeProps, BlockOwnProps, BlockProps, BlockSpanProps };
|
|
26
|
+
export { type BlockAlign, BlockAsChildProps, type BlockBackground, type BlockDirection, BlockDivProps, BlockElement, BlockElementProps, type BlockJustify, type BlockMargin, BlockNativeProps, BlockOwnProps, BlockProps, type BlockRadius, type ResponsiveValue as BlockResponsiveValue, type BlockRowFrom, type BlockShadow, type BlockSize, type BlockSpace, BlockSpanProps, type BlockZIndex };
|
|
28
27
|
//# sourceMappingURL=block.types.d.ts.map
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { BlockAlign, BlockBackground, BlockDirection, BlockJustify, BlockMargin, BlockRadius, BlockRowFrom, BlockShadow, BlockSize, BlockSpace, BlockZIndex, ResponsiveValue } from "../_internal/block-layout.js";
|
|
2
2
|
import { BlockAsChildProps, BlockDivProps, BlockElement, BlockElementProps, BlockNativeProps, BlockOwnProps, BlockProps, BlockSpanProps } from "./block.types.js";
|
|
3
|
-
import { Block } from "./block.js";
|
|
3
|
+
import { Block } from "./block.js";
|
|
4
|
+
export { 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 };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { BrandLabelProps, BrandMarkProps, BrandProps } from "./brand.types.js";
|
|
2
|
-
|
|
3
2
|
//#region src/components/brand/brand.d.ts
|
|
4
3
|
declare function Brand<TElement extends "div" | "a" | "span" = "div">(props: BrandProps<TElement>): JSX.Element;
|
|
5
4
|
declare function BrandMark(props: BrandMarkProps): JSX.Element;
|
|
@@ -1,11 +1,13 @@
|
|
|
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
4
|
import { jsx } from "@askrjs/askr/jsx-runtime";
|
|
4
5
|
import { Slot } from "@askrjs/askr/foundations";
|
|
5
6
|
//#region src/components/brand/brand.tsx
|
|
6
7
|
const DEFAULT_ELEMENT = "div";
|
|
7
8
|
function Brand(props) {
|
|
8
|
-
const {
|
|
9
|
+
const { asChild, children, class: classProp, className, ref, ...rest } = props;
|
|
10
|
+
const as = "as" in props ? props.as : void 0;
|
|
9
11
|
const finalProps = mergeProps(rest, {
|
|
10
12
|
ref,
|
|
11
13
|
class: classes("brand", classProp, className),
|
|
@@ -16,10 +18,7 @@ function Brand(props) {
|
|
|
16
18
|
...finalProps,
|
|
17
19
|
children
|
|
18
20
|
});
|
|
19
|
-
return
|
|
20
|
-
...finalProps,
|
|
21
|
-
children
|
|
22
|
-
});
|
|
21
|
+
return intrinsicElement(as ?? DEFAULT_ELEMENT, finalProps, children);
|
|
23
22
|
}
|
|
24
23
|
function BrandMark(props) {
|
|
25
24
|
const { children, class: className, ref, ...rest } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"brand.js","names":[],"sources":["../../../src/components/brand/brand.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type {\n BrandAsChildProps,\n BrandLabelProps,\n BrandMarkProps,\n BrandNativeProps,\n BrandProps,\n} from \"./brand.types\";\n\nconst DEFAULT_ELEMENT = \"div\";\n\nexport function Brand<TElement extends \"div\" | \"a\" | \"span\" = \"div\">(\n props: BrandProps<TElement>,\n): JSX.Element {\n const {\n
|
|
1
|
+
{"version":3,"file":"brand.js","names":[],"sources":["../../../src/components/brand/brand.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport type {\n BrandAsChildProps,\n BrandLabelProps,\n BrandMarkProps,\n BrandNativeProps,\n BrandProps,\n} from \"./brand.types\";\n\nconst DEFAULT_ELEMENT = \"div\";\n\nexport function Brand<TElement extends \"div\" | \"a\" | \"span\" = \"div\">(\n props: BrandProps<TElement>,\n): JSX.Element {\n const {\n asChild,\n children,\n class: classProp,\n className,\n ref,\n ...rest\n } = props as BrandNativeProps | BrandAsChildProps;\n const as = \"as\" in props ? props.as : undefined;\n\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"brand\", classProp, className),\n \"data-slot\": \"brand\",\n });\n\n if (asChild) {\n return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n }\n\n return intrinsicElement(as ?? DEFAULT_ELEMENT, finalProps, children);\n}\n\nexport function BrandMark(props: BrandMarkProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"brand-mark\", className),\n \"data-slot\": \"brand-mark\",\n });\n\n return <span {...finalProps}>{children}</span>;\n}\n\nexport function BrandLabel(props: BrandLabelProps): JSX.Element {\n const { children, class: className, ref, ...rest } = props;\n const finalProps = mergeProps(rest, {\n ref,\n class: classes(\"brand-label\", className),\n \"data-slot\": \"brand-label\",\n });\n\n return <span {...finalProps}>{children}</span>;\n}\n"],"mappings":";;;;;;AAYA,MAAM,kBAAkB;AAExB,SAAgB,MACd,OACa;CACb,MAAM,EACJ,SACA,UACA,OAAO,WACP,WACA,KACA,GAAG,SACD;CACJ,MAAM,KAAK,QAAQ,QAAQ,MAAM,KAAK,KAAA;CAEtC,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,SAAS,WAAW,SAAS;EAC5C,aAAa;CACf,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAA0B,CAAA;CAG3E,OAAO,iBAAiB,MAAM,iBAAiB,YAAY,QAAQ;AACrE;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,QAAD;EAAM,GANM,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,cAAc,SAAS;GACtC,aAAa;EACf,CAE0B;EAAI;CAAe,CAAA;AAC/C;AAEA,SAAgB,WAAW,OAAqC;CAC9D,MAAM,EAAE,UAAU,OAAO,WAAW,KAAK,GAAG,SAAS;CAOrD,OAAO,oBAAC,QAAD;EAAM,GANM,WAAW,MAAM;GAClC;GACA,OAAO,QAAQ,eAAe,SAAS;GACvC,aAAa;EACf,CAE0B;EAAI;CAAe,CAAA;AAC/C"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Ref } from "@askrjs/askr/foundations/utilities";
|
|
2
|
-
|
|
3
2
|
//#region src/components/brand/brand.types.d.ts
|
|
4
3
|
type BrandElement = "div" | "a" | "span";
|
|
5
4
|
type BrandIntrinsicProps<TElement extends BrandElement> = Omit<JSX.IntrinsicElements[TElement], "children" | "ref">;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
import { BrandAsChildProps, BrandElement, BrandLabelProps, BrandMarkProps, BrandNativeProps, BrandProps } from "./brand.types.js";
|
|
2
|
-
import { Brand, BrandLabel, BrandMark } from "./brand.js";
|
|
2
|
+
import { Brand, BrandLabel, BrandMark } from "./brand.js";
|
|
3
|
+
export { Brand, type BrandAsChildProps, type BrandElement, BrandLabel, type BrandLabelProps, BrandMark, type BrandMarkProps, type BrandNativeProps, type BrandProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-group.js","names":[],"sources":["../../../src/components/button-group/button-group.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { ButtonGroupProps } from \"./button-group.types\";\n\nexport function ButtonGroup(props: ButtonGroupProps): JSX.Element {\n const {\n attached = true,\n children,\n class: className,\n orientation = \"horizontal\",\n ref,\n role,\n ...rest\n } = props;\n\n return (\n <div\n {...rest}\n ref={ref}\n class={classes(\n \"btn-group\",\n orientation === \"vertical\" ? \"btn-group-vertical\" : undefined,\n className,\n )}\n data-attached={attached ? \"true\" : \"false\"}\n data-orientation={orientation}\n data-slot=\"button-group\"\n role={role ?? \"group\"}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;AAGA,SAAgB,YAAY,OAAsC;CAChE,MAAM,EACJ,WAAW,MACX,UACA,OAAO,WACP,cAAc,cACd,KACA,MACA,GAAG,SACD;CAEJ,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,aACA,gBAAgB,aAAa,uBAAuB,KAAA,GACpD,SACF;EACA,iBAAe,WAAW,SAAS;EACnC,oBAAkB;EAClB,aAAU;EACV,
|
|
1
|
+
{"version":3,"file":"button-group.js","names":[],"sources":["../../../src/components/button-group/button-group.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { ButtonGroupProps } from \"./button-group.types\";\n\nexport function ButtonGroup(props: ButtonGroupProps): JSX.Element {\n const {\n attached = true,\n children,\n class: className,\n orientation = \"horizontal\",\n ref,\n role,\n ...rest\n } = props;\n\n return (\n <div\n {...rest}\n ref={ref}\n class={classes(\n \"btn-group\",\n orientation === \"vertical\" ? \"btn-group-vertical\" : undefined,\n className,\n )}\n data-attached={attached ? \"true\" : \"false\"}\n data-orientation={orientation}\n data-slot=\"button-group\"\n role={(role ?? \"group\") as string}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;AAGA,SAAgB,YAAY,OAAsC;CAChE,MAAM,EACJ,WAAW,MACX,UACA,OAAO,WACP,cAAc,cACd,KACA,MACA,GAAG,SACD;CAEJ,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,aACA,gBAAgB,aAAa,uBAAuB,KAAA,GACpD,SACF;EACA,iBAAe,WAAW,SAAS;EACnC,oBAAkB;EAClB,aAAU;EACV,MAAO,QAAQ;EAEd;CACE,CAAA;AAET"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps } from "./card.types.js";
|
|
2
|
-
|
|
3
2
|
//#region src/components/card/card.d.ts
|
|
4
3
|
declare function Card(props: CardProps): JSX.Element;
|
|
5
4
|
declare function CardHeader(props: CardHeaderProps): JSX.Element;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
import { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, CardVariant } from "./card.types.js";
|
|
2
|
-
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
|
|
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 };
|