@hanzo/ui 8.4.12 → 8.4.13
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/dist/backends/gui/band.cjs +46 -0
- package/dist/backends/gui/band.d.ts +43 -0
- package/dist/backends/gui/band.d.ts.map +1 -0
- package/dist/backends/gui/band.js +44 -0
- package/dist/backends/gui/band.js.map +1 -0
- package/dist/backends/gui/index.cjs +4 -5
- package/dist/backends/gui/index.d.ts +2 -3
- package/dist/backends/gui/index.d.ts.map +1 -1
- package/dist/backends/gui/index.js +2 -3
- package/dist/backends/gui/index.js.map +1 -1
- package/dist/backends/gui/layout.cjs +12 -2
- package/dist/backends/gui/layout.d.ts +1 -1
- package/dist/backends/gui/layout.d.ts.map +1 -1
- package/dist/backends/gui/layout.js +11 -2
- package/dist/backends/gui/layout.js.map +1 -1
- package/dist/gallery.cjs +1 -1
- package/dist/gallery.html +3 -7
- package/dist/gallery.js +2 -2
- package/dist/gallery.js.map +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.node.js +2 -2
- package/dist/primitives/{Section.cjs → Band.cjs} +3 -3
- package/dist/primitives/Band.d.ts +2 -0
- package/dist/primitives/Band.d.ts.map +1 -0
- package/dist/primitives/{Section.js → Band.js} +2 -2
- package/dist/primitives/Band.js.map +1 -0
- package/dist/primitives/Fill.cjs +8 -0
- package/dist/primitives/Fill.d.ts +2 -0
- package/dist/primitives/Fill.d.ts.map +1 -0
- package/dist/primitives/Fill.js +5 -0
- package/dist/primitives/Fill.js.map +1 -0
- package/dist/primitives/Screen.cjs +8 -0
- package/dist/primitives/Screen.d.ts +2 -0
- package/dist/primitives/Screen.d.ts.map +1 -0
- package/dist/primitives/Screen.js +5 -0
- package/dist/primitives/Screen.js.map +1 -0
- package/dist/primitives/Separator.cjs +2 -2
- package/dist/primitives/Separator.d.ts +1 -1
- package/dist/primitives/Separator.d.ts.map +1 -1
- package/dist/primitives/Separator.js +1 -1
- package/dist/primitives/Separator.js.map +1 -1
- package/dist/styles.css +0 -4
- package/package.json +17 -17
- package/dist/backends/gui/section.cjs +0 -39
- package/dist/backends/gui/section.d.ts +0 -29
- package/dist/backends/gui/section.d.ts.map +0 -1
- package/dist/backends/gui/section.js +0 -37
- package/dist/backends/gui/section.js.map +0 -1
- package/dist/backends/gui/separator.cjs +0 -10
- package/dist/backends/gui/separator.d.ts +0 -11
- package/dist/backends/gui/separator.d.ts.map +0 -1
- package/dist/backends/gui/separator.js +0 -8
- package/dist/backends/gui/separator.js.map +0 -1
- package/dist/primitives/Section.d.ts +0 -2
- package/dist/primitives/Section.d.ts.map +0 -1
- package/dist/primitives/Section.js.map +0 -1
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
/**
|
|
4
|
-
* Section — the page's vertical rhythm, in one place.
|
|
5
|
-
*
|
|
6
|
-
* Components kept inventing their own vertical story: a margin here, a padding
|
|
7
|
-
* there, a `<div style={{marginTop: 64}}>` somewhere else. The result is a page
|
|
8
|
-
* whose spacing is the sum of everyone's guesses, and which is never the same
|
|
9
|
-
* twice on a phone.
|
|
10
|
-
*
|
|
11
|
-
* So the page-level spacing decision is made once, from the space scale, and it
|
|
12
|
-
* is mobile-first: phone values by default, stepping up past `$gtSm`. A caller
|
|
13
|
-
* that writes nothing gets the right answer at every width, which is the point —
|
|
14
|
-
* the failure mode being designed out is "had to remember something".
|
|
15
|
-
*
|
|
16
|
-
* Two boxes, because they do two different jobs and merging them is what breaks:
|
|
17
|
-
* the OUTER runs full-bleed and owns the vertical rhythm and the side gutter, so
|
|
18
|
-
* a background set on it reaches both edges; the INNER is the centred measure and
|
|
19
|
-
* owns `maxWidth`. Put `maxWidth` on the outer box instead and a section can
|
|
20
|
-
* never have a full-width background.
|
|
21
|
-
*/
|
|
22
|
-
import { YStack } from '@hanzo/gui';
|
|
23
|
-
import { slot } from './slot.js';
|
|
24
|
-
const Section = ({ maxWidth = 1200, children, innerProps, ...props }) => (_jsx(YStack, { ...slot('section'), width: "100%",
|
|
25
|
-
// Values come from the space scale, never literals — a section spaced in
|
|
26
|
-
// raw px drifts from everything else on the page. `$md` is a MAX-width
|
|
27
|
-
// query in this config, so the base is the roomy value and the phone steps
|
|
28
|
-
// it down; that is the direction every other responsive prop in this
|
|
29
|
-
// package is written in ($md/$sm in Field, PageHeader, SiteNav) and mixing
|
|
30
|
-
// both directions in one codebase is how a breakpoint ends up applying
|
|
31
|
-
// twice.
|
|
32
|
-
py: "$11", px: "$6", $md: { py: '$8', px: '$4' }, ...props, children: _jsx(YStack, { ...slot('section-inner'), width: "100%", ...(maxWidth === false ? {} : { maxWidth }),
|
|
33
|
-
// The centring. `self: center` is the cross-axis rule a YStack understands
|
|
34
|
-
// on web AND native, where `margin: auto` is web-only.
|
|
35
|
-
self: "center", ...innerProps, children: children }) }));
|
|
36
|
-
export { Section };
|
|
37
|
-
//# sourceMappingURL=section.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"section.js","sourceRoot":"","sources":["../../../src/backends/gui/section.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAS7B,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE,CAAC,CACrF,KAAC,MAAM,OACD,IAAI,CAAC,SAAS,CAAC,EACnB,KAAK,EAAC,MAAM;IACZ,yEAAyE;IACzE,uEAAuE;IACvE,2EAA2E;IAC3E,qEAAqE;IACrE,2EAA2E;IAC3E,uEAAuE;IACvE,SAAS;IACT,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KACvB,KAAK,YAET,KAAC,MAAM,OACD,IAAI,CAAC,eAAe,CAAC,EACzB,KAAK,EAAC,MAAM,KACR,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC;QAC5C,2EAA2E;QAC3E,uDAAuD;QACvD,IAAI,EAAC,QAAQ,KACT,UAAU,YAEb,QAAQ,GACF,GACF,CACV,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
'use client';"use strict";
|
|
2
|
-
'use client';
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.Separator = void 0;
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
/** Separator — a 1px rule on either axis. */
|
|
7
|
-
const gui_1 = require("@hanzo/gui");
|
|
8
|
-
const slot_1 = require("./slot.cjs");
|
|
9
|
-
const Separator = ({ orientation = 'horizontal', decorative: _decorative, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Separator, { ...(0, slot_1.slot)('separator'), "data-orientation": orientation, vertical: orientation === 'vertical', borderColor: "$borderColor", ...props }));
|
|
10
|
-
exports.Separator = Separator;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/** Separator — a 1px rule on either axis. */
|
|
2
|
-
import { Separator as GuiSeparator } from '@hanzo/gui';
|
|
3
|
-
import type { ComponentProps } from 'react';
|
|
4
|
-
export type SeparatorProps = Omit<ComponentProps<typeof GuiSeparator>, 'vertical'> & {
|
|
5
|
-
orientation?: 'horizontal' | 'vertical';
|
|
6
|
-
/** Radix parity — gui separators are always presentational. */
|
|
7
|
-
decorative?: boolean;
|
|
8
|
-
};
|
|
9
|
-
declare const Separator: ({ orientation, decorative: _decorative, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export { Separator };
|
|
11
|
-
//# sourceMappingURL=separator.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/separator.tsx"],"names":[],"mappings":"AAEA,6CAA6C;AAC7C,OAAO,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,SAAS,uDAAuE,cAAc,4CAQnG,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
/** Separator — a 1px rule on either axis. */
|
|
4
|
-
import { Separator as GuiSeparator } from '@hanzo/gui';
|
|
5
|
-
import { slot } from './slot.js';
|
|
6
|
-
const Separator = ({ orientation = 'horizontal', decorative: _decorative, ...props }) => (_jsx(GuiSeparator, { ...slot('separator'), "data-orientation": orientation, vertical: orientation === 'vertical', borderColor: "$borderColor", ...props }));
|
|
7
|
-
export { Separator };
|
|
8
|
-
//# sourceMappingURL=separator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"separator.js","sourceRoot":"","sources":["../../../src/backends/gui/separator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,6CAA6C;AAC7C,OAAO,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAQ7B,MAAM,SAAS,GAAG,CAAC,EAAE,WAAW,GAAG,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE,CAAC,CACvG,KAAC,YAAY,OACP,IAAI,CAAC,WAAW,CAAC,sBACH,WAAW,EAC7B,QAAQ,EAAE,WAAW,KAAK,UAAU,EACpC,WAAW,EAAC,cAAc,KACtB,KAAK,GACT,CACH,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/primitives/Section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../src/primitives/Section.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA"}
|