@kerfjs/ui 5.0.0-beta.42 → 5.0.0-beta.45
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 +2 -0
- package/ai/component-catalog.json +2 -2
- package/ai/public-api-signatures-v1.md +6 -5
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/catalog.js +1 -1
- package/dist/{chunk-R3EBGEAW.js → chunk-AYUHMAI6.js} +3 -1
- package/dist/chunk-AYUHMAI6.js.map +1 -0
- package/dist/{chunk-X5GRDQ7V.js → chunk-OGNE3OFT.js} +2 -2
- package/dist/{chunk-X5GRDQ7V.js.map → chunk-OGNE3OFT.js.map} +1 -1
- package/dist/{chunk-C34NZOLJ.js → chunk-WVLMZ5SG.js} +2 -2
- package/dist/chunk-WVLMZ5SG.js.map +1 -0
- package/dist/{flex-alignment-CF8NLj7i.d.ts → flex-alignment-4ms8ZbV8.d.ts} +3 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/list.d.ts +4 -3
- package/dist/list.js +1 -1
- package/dist/row.d.ts +1 -1
- package/dist/row.js +1 -1
- package/dist/styles/catalog.css +5 -2
- package/dist/styles/list-header.css +7 -0
- package/dist/styles/row.css +5 -0
- package/docs/layout.md +9 -5
- package/package.json +1 -1
- package/dist/chunk-C34NZOLJ.js.map +0 -1
- package/dist/chunk-R3EBGEAW.js.map +0 -1
package/README.md
CHANGED
|
@@ -137,6 +137,8 @@ mistakes but are not sanitizers.
|
|
|
137
137
|
Use `Row` for horizontal flex composition and `List` for vertical composition.
|
|
138
138
|
Both accept `hAlign` (`left`, `center`, `right`, `full`) and `vAlign` (`top`,
|
|
139
139
|
`middle`, `bottom`, `full`), plus their documented short/CSS aliases. `Row`
|
|
140
|
+
also accepts `vAlign="baseline"` for cross-axis text alignment; baseline is not
|
|
141
|
+
available on `List`, whose vertical axis uses `justify-content`. `Row`
|
|
140
142
|
defaults to left/full alignment, the `xs` gap, and `wrap={false}`; List keeps
|
|
141
143
|
its existing full/top alignment and zero-gap defaults. Set `textInsets` or
|
|
142
144
|
`controlInsets` with canonical physical sides in `t`/`r`/`b`/`l` order (for
|
|
@@ -1699,7 +1699,7 @@
|
|
|
1699
1699
|
"source": "kerf",
|
|
1700
1700
|
"description": "A horizontal flex row with physical-axis alignment, side-selectable text/control insets, a typed xs gap by default, flex participation, and opt-in wrapping.",
|
|
1701
1701
|
"uses": [],
|
|
1702
|
-
"purpose": "Arrange related content horizontally with consistent spacing, optional physical-side text/control insets, and explicit left/center/right/full plus top/middle/bottom/full alignment instead of application-owned flex wrappers.",
|
|
1702
|
+
"purpose": "Arrange related content horizontally with consistent spacing, optional physical-side text/control insets, and explicit left/center/right/full plus top/middle/bottom/full/baseline alignment instead of application-owned flex wrappers.",
|
|
1703
1703
|
"publicExports": ["Row"],
|
|
1704
1704
|
"cssValueProps": [
|
|
1705
1705
|
{
|
|
@@ -1755,7 +1755,7 @@
|
|
|
1755
1755
|
],
|
|
1756
1756
|
"variants": [
|
|
1757
1757
|
"left/center/right/full horizontal alignment with l/c/r/f and flex aliases",
|
|
1758
|
-
"top/middle/bottom/full vertical alignment with t/m/c/b/f and flex aliases",
|
|
1758
|
+
"top/middle/bottom/full vertical alignment with t/m/c/b/f and flex aliases, plus baseline alignment",
|
|
1759
1759
|
"named none/2xs/xs/s/m/l/xl token gap",
|
|
1760
1760
|
"typed CssLength gap",
|
|
1761
1761
|
"boolean, finite-keyword, or typed CssFlex flex",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Public API signatures for the UI authoring corpus
|
|
2
2
|
|
|
3
|
-
Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.
|
|
3
|
+
Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.45` and `kerfjs@5.0.0-beta.45`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
|
|
4
4
|
|
|
5
5
|
## `@kerfjs/ui/css-values`
|
|
6
6
|
|
|
@@ -336,7 +336,8 @@ export { ListHeader, type ListHeaderProps };
|
|
|
336
336
|
import * as kerfjs from 'kerfjs';
|
|
337
337
|
import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
|
|
338
338
|
import { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
|
|
339
|
-
import { H as HorizontalAlignment,
|
|
339
|
+
import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
340
|
+
export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
340
341
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
341
342
|
|
|
342
343
|
interface ListProps {
|
|
@@ -348,7 +349,7 @@ interface ListProps {
|
|
|
348
349
|
/** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */
|
|
349
350
|
hAlign?: HorizontalAlignment;
|
|
350
351
|
/** Vertical distribution. Defaults to top. */
|
|
351
|
-
vAlign?:
|
|
352
|
+
vAlign?: ListVerticalAlignment;
|
|
352
353
|
/** Own vertical scrolling and overscroll containment. */
|
|
353
354
|
scrollable?: boolean;
|
|
354
355
|
/** Physical divider edges in canonical top/right/bottom/left order. */
|
|
@@ -362,7 +363,7 @@ interface ListProps {
|
|
|
362
363
|
/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
|
|
363
364
|
declare function List({ children, gap, flex, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, }: ListProps): kerfjs.SafeHtml;
|
|
364
365
|
|
|
365
|
-
export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, Sides, UiSpaceName
|
|
366
|
+
export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };
|
|
366
367
|
```
|
|
367
368
|
|
|
368
369
|
## `@kerfjs/ui/list-action-row`
|
|
@@ -2035,7 +2036,7 @@ export { Text, type TextContent, type TextProps, type TextVariant };
|
|
|
2035
2036
|
import * as kerfjs from 'kerfjs';
|
|
2036
2037
|
import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
|
|
2037
2038
|
import { S as Sides } from './divider-sides-BzB6rphT.js';
|
|
2038
|
-
import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-
|
|
2039
|
+
import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
2039
2040
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
2040
2041
|
|
|
2041
2042
|
interface RowProps {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Web Awesome JSX signatures for the UI authoring corpus
|
|
2
2
|
|
|
3
|
-
Generated from the emitted `@kerfjs/ui@5.0.0-beta.
|
|
3
|
+
Generated from the emitted `@kerfjs/ui@5.0.0-beta.45` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
|
|
4
4
|
|
|
5
5
|
```ts
|
|
6
6
|
import { KerfCustomElement } from 'kerfjs/jsx-runtime';
|
package/dist/catalog.js
CHANGED
|
@@ -4,7 +4,7 @@ import { Pane } from './chunk-I4V3UDSA.js';
|
|
|
4
4
|
import { ListHeader } from './chunk-SE7MQMW7.js';
|
|
5
5
|
import { Text } from './chunk-QM4GQ7W3.js';
|
|
6
6
|
import { ListItem } from './chunk-I45QO2IZ.js';
|
|
7
|
-
import { List } from './chunk-
|
|
7
|
+
import { List } from './chunk-WVLMZ5SG.js';
|
|
8
8
|
|
|
9
9
|
import { filterDataAttributes } from './chunk-SRSJO5QE.js';
|
|
10
10
|
|
|
@@ -38,9 +38,11 @@ function verticalAlignment(value) {
|
|
|
38
38
|
case "f":
|
|
39
39
|
case "space-between":
|
|
40
40
|
return "full";
|
|
41
|
+
case "baseline":
|
|
42
|
+
return "baseline";
|
|
41
43
|
}
|
|
42
44
|
}
|
|
43
45
|
|
|
44
46
|
export { horizontalAlignment, verticalAlignment };
|
|
45
47
|
|
|
46
|
-
//# sourceMappingURL=chunk-
|
|
48
|
+
//# sourceMappingURL=chunk-AYUHMAI6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/flex-alignment.ts"],"names":[],"mappings":";AAoCO,SAAS,oBACd,KAAA,EAC8B;AAC9B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,OAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,OAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb;AAEO,SAAS,kBACd,KAAA,EAC4B;AAC5B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,KAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,KAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,UAAA;AACH,MAAA,OAAO,UAAA;AAAA;AAEb","file":"chunk-AYUHMAI6.js","sourcesContent":["export type HorizontalAlignment =\n | 'left'\n | 'l'\n | 'flex-start'\n | 'center'\n | 'c'\n | 'space-around'\n | 'right'\n | 'r'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between';\n\nexport type VerticalAlignment =\n | 'top'\n | 't'\n | 'flex-start'\n | 'middle'\n | 'm'\n | 'c'\n | 'space-around'\n | 'bottom'\n | 'b'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between'\n | 'baseline';\n\nexport type ListVerticalAlignment = Exclude<VerticalAlignment, 'baseline'>;\n\nexport type CanonicalHorizontalAlignment = 'left' | 'center' | 'right' | 'full';\nexport type CanonicalVerticalAlignment =\n 'top' | 'middle' | 'bottom' | 'full' | 'baseline';\n\nexport function horizontalAlignment(\n value: HorizontalAlignment,\n): CanonicalHorizontalAlignment {\n switch (value) {\n case 'left':\n case 'l':\n case 'flex-start':\n return 'left';\n case 'center':\n case 'c':\n case 'space-around':\n return 'center';\n case 'right':\n case 'r':\n case 'flex-end':\n return 'right';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n }\n}\n\nexport function verticalAlignment(\n value: VerticalAlignment,\n): CanonicalVerticalAlignment {\n switch (value) {\n case 'top':\n case 't':\n case 'flex-start':\n return 'top';\n case 'middle':\n case 'm':\n case 'c':\n case 'space-around':\n return 'middle';\n case 'bottom':\n case 'b':\n case 'flex-end':\n return 'bottom';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n case 'baseline':\n return 'baseline';\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { verticalAlignment, horizontalAlignment } from './chunk-
|
|
1
|
+
import { verticalAlignment, horizontalAlignment } from './chunk-AYUHMAI6.js';
|
|
2
2
|
import { space } from './chunk-OL4TC3U2.js';
|
|
3
3
|
import { jsx } from 'kerfjs/jsx-runtime';
|
|
4
4
|
|
|
@@ -47,4 +47,4 @@ function Row({
|
|
|
47
47
|
|
|
48
48
|
export { Row };
|
|
49
49
|
|
|
50
|
-
//# sourceMappingURL=chunk-
|
|
50
|
+
//# sourceMappingURL=chunk-OGNE3OFT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAsBO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY;AACd,CAAA,EAAa;AACX,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAsBO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY;AACd,CAAA,EAAa;AACX,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-OGNE3OFT.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { Sides } from './divider-sides.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type VerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface RowProps {\n children?: KerfUiContent;\n /** Horizontal distribution. Defaults to left. */\n hAlign?: HorizontalAlignment;\n /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n vAlign?: VerticalAlignment;\n /** A named UI spacing token or typed CSS length. Defaults to xs. */\n gap?: UiSpaceName | CssLength;\n /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Allow children to wrap onto additional lines. */\n wrap?: boolean;\n /** Physical sides that receive the standard 17px text inset. */\n textInsets?: Sides;\n /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n controlInsets?: Sides;\n className?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n children,\n hAlign = 'left',\n vAlign = 'full',\n gap = 'xs',\n flex = false,\n wrap = false,\n textInsets = '',\n controlInsets = '',\n className = '',\n}: RowProps) {\n const gapValue = spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n `--_kui-row-gap:${gapValue}`,\n flexValue ? `--_kui-row-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n class={`kui-row ${className}`.trim()}\n data-component=\"row\"\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-flex={String(Boolean(flex))}\n data-wrap={String(wrap)}\n data-text-insets={textInsets || undefined}\n data-control-insets={controlInsets || undefined}\n style={style}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { Sides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { verticalAlignment, horizontalAlignment } from './chunk-
|
|
1
|
+
import { verticalAlignment, horizontalAlignment } from './chunk-AYUHMAI6.js';
|
|
2
2
|
import { space } from './chunk-OL4TC3U2.js';
|
|
3
3
|
import { jsx } from 'kerfjs/jsx-runtime';
|
|
4
4
|
|
|
@@ -50,4 +50,4 @@ function List({
|
|
|
50
50
|
|
|
51
51
|
export { List };
|
|
52
52
|
|
|
53
|
-
//# sourceMappingURL=chunk-
|
|
53
|
+
//# sourceMappingURL=chunk-WVLMZ5SG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAwBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,GAAA,GAAM,KAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,KAAA;AAAA,EACb,YAAA,GAAe,EAAA;AAAA,EACf,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY;AACd,CAAA,EAAc;AACZ,EAAA,MAAM,QAAA,GACJ,GAAA,KAAQ,IAAA,GACJ,qBAAA,GACA,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACpC,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA,IAAO,MAAA;AACf,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,QAAA,GAAW,CAAA,gBAAA,EAAmB,QAAQ,CAAA,CAAA,GAAK,EAAA;AAAA,IAC3C,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,UAAA,EAAU,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,MAC7B,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,iBAAA,EAAiB,OAAO,UAAU,CAAA;AAAA,MAClC,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,OAAO,KAAA,IAAS,MAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ","file":"chunk-WVLMZ5SG.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { DividerSides, Sides } from './divider-sides.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type ListVerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface ListProps {\n children?: KerfUiContent;\n /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */\n gap?: boolean | UiSpaceName | CssLength;\n /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n hAlign?: HorizontalAlignment;\n /** Vertical distribution. Defaults to top. */\n vAlign?: ListVerticalAlignment;\n /** Own vertical scrolling and overscroll containment. */\n scrollable?: boolean;\n /** Physical divider edges in canonical top/right/bottom/left order. */\n dividerSides?: DividerSides;\n /** Physical sides that receive the standard 17px text inset. */\n textInsets?: Sides;\n /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n controlInsets?: Sides;\n className?: string;\n}\n\n/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */\nexport function List({\n children,\n gap = false,\n flex = false,\n hAlign = 'full',\n vAlign = 'top',\n scrollable = false,\n dividerSides = '',\n textInsets = '',\n controlInsets = '',\n className = '',\n}: ListProps) {\n const gapValue =\n gap === true\n ? 'var(--kui-list-gap)'\n : spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap || undefined;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n gapValue ? `--_kui-list-gap:${gapValue}` : '',\n flexValue ? `--_kui-list-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n class={`kui-list ${className}`.trim()}\n data-component=\"list\"\n data-gap={String(Boolean(gap))}\n data-flex={String(Boolean(flex))}\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-scrollable={String(scrollable)}\n divider-sides={dividerSides || undefined}\n data-text-insets={textInsets || undefined}\n data-control-insets={controlInsets || undefined}\n style={style || undefined}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { DividerSides, Sides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n ListVerticalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
type HorizontalAlignment = 'left' | 'l' | 'flex-start' | 'center' | 'c' | 'space-around' | 'right' | 'r' | 'flex-end' | 'full' | 'f' | 'space-between';
|
|
2
|
-
type VerticalAlignment = 'top' | 't' | 'flex-start' | 'middle' | 'm' | 'c' | 'space-around' | 'bottom' | 'b' | 'flex-end' | 'full' | 'f' | 'space-between';
|
|
2
|
+
type VerticalAlignment = 'top' | 't' | 'flex-start' | 'middle' | 'm' | 'c' | 'space-around' | 'bottom' | 'b' | 'flex-end' | 'full' | 'f' | 'space-between' | 'baseline';
|
|
3
|
+
type ListVerticalAlignment = Exclude<VerticalAlignment, 'baseline'>;
|
|
3
4
|
|
|
4
|
-
export type { HorizontalAlignment as H, VerticalAlignment as V };
|
|
5
|
+
export type { HorizontalAlignment as H, ListVerticalAlignment as L, VerticalAlignment as V };
|
package/dist/index.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from
|
|
|
33
33
|
export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
|
|
34
34
|
export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
|
|
35
35
|
export { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
|
|
36
|
-
export { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-
|
|
36
|
+
export { H as HorizontalAlignment, L as ListVerticalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
37
37
|
import 'kerfjs';
|
|
38
38
|
import 'lucide';
|
|
39
39
|
import 'kerfjs/jsx-runtime';
|
package/dist/index.js
CHANGED
|
@@ -11,7 +11,7 @@ export { DialogSurface, PopupSurface } from './chunk-WSXUPSID.js';
|
|
|
11
11
|
export { TabBar } from './chunk-ZPWZIVI6.js';
|
|
12
12
|
export { ToolbarText } from './chunk-V6GQKOX2.js';
|
|
13
13
|
export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-CAB6NQ2T.js';
|
|
14
|
-
export { Row } from './chunk-
|
|
14
|
+
export { Row } from './chunk-OGNE3OFT.js';
|
|
15
15
|
export { SegmentedControl } from './chunk-E34TE2ZI.js';
|
|
16
16
|
export { FloatingToolbar } from './chunk-DYBPI5O2.js';
|
|
17
17
|
export { ListActionRow } from './chunk-DAO2VFTT.js';
|
|
@@ -24,7 +24,7 @@ export { Pane } from './chunk-I4V3UDSA.js';
|
|
|
24
24
|
export { ListHeader } from './chunk-SE7MQMW7.js';
|
|
25
25
|
export { Text } from './chunk-QM4GQ7W3.js';
|
|
26
26
|
export { ListItem } from './chunk-I45QO2IZ.js';
|
|
27
|
-
export { List } from './chunk-
|
|
27
|
+
export { List } from './chunk-WVLMZ5SG.js';
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
export { Skeleton } from './chunk-T7DOWS6T.js';
|
package/dist/list.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as kerfjs from 'kerfjs';
|
|
2
2
|
import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
|
|
3
3
|
import { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
|
|
4
|
-
import { H as HorizontalAlignment,
|
|
4
|
+
import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
5
|
+
export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
5
6
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
6
7
|
|
|
7
8
|
interface ListProps {
|
|
@@ -13,7 +14,7 @@ interface ListProps {
|
|
|
13
14
|
/** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */
|
|
14
15
|
hAlign?: HorizontalAlignment;
|
|
15
16
|
/** Vertical distribution. Defaults to top. */
|
|
16
|
-
vAlign?:
|
|
17
|
+
vAlign?: ListVerticalAlignment;
|
|
17
18
|
/** Own vertical scrolling and overscroll containment. */
|
|
18
19
|
scrollable?: boolean;
|
|
19
20
|
/** Physical divider edges in canonical top/right/bottom/left order. */
|
|
@@ -27,4 +28,4 @@ interface ListProps {
|
|
|
27
28
|
/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
|
|
28
29
|
declare function List({ children, gap, flex, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, }: ListProps): kerfjs.SafeHtml;
|
|
29
30
|
|
|
30
|
-
export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, Sides, UiSpaceName
|
|
31
|
+
export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };
|
package/dist/list.js
CHANGED
package/dist/row.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as kerfjs from 'kerfjs';
|
|
2
2
|
import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
|
|
3
3
|
import { S as Sides } from './divider-sides-BzB6rphT.js';
|
|
4
|
-
import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-
|
|
4
|
+
import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
5
5
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
6
6
|
|
|
7
7
|
interface RowProps {
|
package/dist/row.js
CHANGED
package/dist/styles/catalog.css
CHANGED
|
@@ -53,11 +53,13 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.kui-catalog__identity h1,
|
|
56
|
-
.kui-catalog__subtitle {
|
|
56
|
+
.kui-catalog__subtitle.kui-text {
|
|
57
57
|
margin: 0;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
.kui-catalog__identity h1 {
|
|
61
|
+
padding: 0;
|
|
62
|
+
border: 0;
|
|
61
63
|
overflow: hidden;
|
|
62
64
|
font-size: var(--kui-font-m);
|
|
63
65
|
letter-spacing: 0.07em;
|
|
@@ -67,8 +69,9 @@
|
|
|
67
69
|
white-space: nowrap;
|
|
68
70
|
}
|
|
69
71
|
|
|
70
|
-
.kui-catalog__subtitle {
|
|
72
|
+
.kui-catalog__subtitle.kui-text {
|
|
71
73
|
overflow: hidden;
|
|
74
|
+
border: 0;
|
|
72
75
|
margin-block-start: calc(-1 * var(--kui-space-xs));
|
|
73
76
|
padding-block-end: var(--kui-space-xs);
|
|
74
77
|
padding-inline: calc(
|
|
@@ -96,6 +96,13 @@
|
|
|
96
96
|
white-space: nowrap;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
+
/* Passive labels use Text for semantic heading markup. The title wrapper
|
|
100
|
+
already owns the transparent alignment border, so avoid counting a second
|
|
101
|
+
border before Text's standard content padding. */
|
|
102
|
+
.kui-list-header__label.kui-text {
|
|
103
|
+
border: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
99
106
|
.kui-list-header__badge {
|
|
100
107
|
display: inline-flex;
|
|
101
108
|
min-height: 1.5rem;
|
package/dist/styles/row.css
CHANGED
package/docs/layout.md
CHANGED
|
@@ -166,18 +166,22 @@ insets.
|
|
|
166
166
|
Use `Row` for a horizontal flex layout and `List` for a vertical one. `Row`
|
|
167
167
|
defaults to `hAlign="left"`, `vAlign="full"`, `gap="xs"`, and no wrapping;
|
|
168
168
|
`List` retains its existing full-width, top-aligned defaults and zero gap.
|
|
169
|
-
Both components accept the same physical-axis vocabulary
|
|
169
|
+
Both components accept the same physical-axis vocabulary, with baseline
|
|
170
|
+
alignment additionally available on the horizontal `Row` cross axis:
|
|
170
171
|
|
|
171
|
-
| Axis | Values and aliases
|
|
172
|
-
| ---------- |
|
|
173
|
-
| Horizontal | `left` / `l` / `flex-start`; `center` / `c` / `space-around`; `right` / `r` / `flex-end`; `full` / `f` / `space-between`
|
|
174
|
-
| Vertical | `top` / `t` / `flex-start`; `middle` / `m` / `c` / `space-around`; `bottom` / `b` / `flex-end`; `full` / `f` / `space-between` | Aligns a Row's children across its height; distributes a List's children. |
|
|
172
|
+
| Axis | Values and aliases | Flex behavior |
|
|
173
|
+
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
|
|
174
|
+
| Horizontal | `left` / `l` / `flex-start`; `center` / `c` / `space-around`; `right` / `r` / `flex-end`; `full` / `f` / `space-between` | Distributes a Row's children; aligns a List's children across its width. |
|
|
175
|
+
| Vertical | `top` / `t` / `flex-start`; `middle` / `m` / `c` / `space-around`; `bottom` / `b` / `flex-end`; `full` / `f` / `space-between`; Row-only `baseline` | Aligns a Row's children across its height; distributes a List's children. |
|
|
175
176
|
|
|
176
177
|
Cross-axis `space-around` and `space-between` are not valid `align-items`
|
|
177
178
|
values. Kerf therefore maps `middle` to centered items and `full` to stretched
|
|
178
179
|
items, while applying the requested distribution to `align-content` when a
|
|
179
180
|
Row wraps. Prefer the descriptive values in application code; the short and
|
|
180
181
|
CSS-shaped aliases are provided for compact or migrated call sites.
|
|
182
|
+
`baseline` is Row-only because CSS baseline alignment applies to a flex
|
|
183
|
+
container's cross axis; a vertical List's `vAlign` controls main-axis
|
|
184
|
+
distribution through `justify-content`, which has no baseline value.
|
|
181
185
|
|
|
182
186
|
`Row.flex` and `List.flex` share one typed participation contract. Omit the prop
|
|
183
187
|
for the CSS initial value, pass `true` for `1 1 auto`, select the finite
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAwBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,GAAA,GAAM,KAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,KAAA;AAAA,EACb,YAAA,GAAe,EAAA;AAAA,EACf,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY;AACd,CAAA,EAAc;AACZ,EAAA,MAAM,QAAA,GACJ,GAAA,KAAQ,IAAA,GACJ,qBAAA,GACA,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACpC,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA,IAAO,MAAA;AACf,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,QAAA,GAAW,CAAA,gBAAA,EAAmB,QAAQ,CAAA,CAAA,GAAK,EAAA;AAAA,IAC3C,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,UAAA,EAAU,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,MAC7B,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,iBAAA,EAAiB,OAAO,UAAU,CAAA;AAAA,MAClC,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,OAAO,KAAA,IAAS,MAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ","file":"chunk-C34NZOLJ.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { DividerSides, Sides } from './divider-sides.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type VerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface ListProps {\n children?: KerfUiContent;\n /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */\n gap?: boolean | UiSpaceName | CssLength;\n /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n hAlign?: HorizontalAlignment;\n /** Vertical distribution. Defaults to top. */\n vAlign?: VerticalAlignment;\n /** Own vertical scrolling and overscroll containment. */\n scrollable?: boolean;\n /** Physical divider edges in canonical top/right/bottom/left order. */\n dividerSides?: DividerSides;\n /** Physical sides that receive the standard 17px text inset. */\n textInsets?: Sides;\n /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n controlInsets?: Sides;\n className?: string;\n}\n\n/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */\nexport function List({\n children,\n gap = false,\n flex = false,\n hAlign = 'full',\n vAlign = 'top',\n scrollable = false,\n dividerSides = '',\n textInsets = '',\n controlInsets = '',\n className = '',\n}: ListProps) {\n const gapValue =\n gap === true\n ? 'var(--kui-list-gap)'\n : spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap || undefined;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n gapValue ? `--_kui-list-gap:${gapValue}` : '',\n flexValue ? `--_kui-list-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n class={`kui-list ${className}`.trim()}\n data-component=\"list\"\n data-gap={String(Boolean(gap))}\n data-flex={String(Boolean(flex))}\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-scrollable={String(scrollable)}\n divider-sides={dividerSides || undefined}\n data-text-insets={textInsets || undefined}\n data-control-insets={controlInsets || undefined}\n style={style || undefined}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { DividerSides, Sides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/flex-alignment.ts"],"names":[],"mappings":";AAgCO,SAAS,oBACd,KAAA,EAC8B;AAC9B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,OAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,OAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb;AAEO,SAAS,kBACd,KAAA,EAC4B;AAC5B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,KAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,KAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb","file":"chunk-R3EBGEAW.js","sourcesContent":["export type HorizontalAlignment =\n | 'left'\n | 'l'\n | 'flex-start'\n | 'center'\n | 'c'\n | 'space-around'\n | 'right'\n | 'r'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between';\n\nexport type VerticalAlignment =\n | 'top'\n | 't'\n | 'flex-start'\n | 'middle'\n | 'm'\n | 'c'\n | 'space-around'\n | 'bottom'\n | 'b'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between';\n\nexport type CanonicalHorizontalAlignment = 'left' | 'center' | 'right' | 'full';\nexport type CanonicalVerticalAlignment = 'top' | 'middle' | 'bottom' | 'full';\n\nexport function horizontalAlignment(\n value: HorizontalAlignment,\n): CanonicalHorizontalAlignment {\n switch (value) {\n case 'left':\n case 'l':\n case 'flex-start':\n return 'left';\n case 'center':\n case 'c':\n case 'space-around':\n return 'center';\n case 'right':\n case 'r':\n case 'flex-end':\n return 'right';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n }\n}\n\nexport function verticalAlignment(\n value: VerticalAlignment,\n): CanonicalVerticalAlignment {\n switch (value) {\n case 'top':\n case 't':\n case 'flex-start':\n return 'top';\n case 'middle':\n case 'm':\n case 'c':\n case 'space-around':\n return 'middle';\n case 'bottom':\n case 'b':\n case 'flex-end':\n return 'bottom';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n }\n}\n"]}
|