@hanzo/ui 8.23.6 → 8.24.1
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/step-indicator.cjs +2 -1
- package/dist/backends/gui/step-indicator.d.ts.map +1 -1
- package/dist/backends/gui/step-indicator.js +2 -1
- package/dist/backends/gui/step-indicator.js.map +1 -1
- package/dist/blocks/carte-blanche.cjs +2 -2
- package/dist/blocks/carte-blanche.d.ts.map +1 -1
- package/dist/blocks/carte-blanche.js +2 -2
- package/dist/blocks/carte-blanche.js.map +1 -1
- package/dist/blocks/image.cjs +3 -2
- package/dist/blocks/image.d.ts.map +1 -1
- package/dist/blocks/image.js +3 -2
- package/dist/blocks/image.js.map +1 -1
- package/dist/core/cn.cjs +16 -0
- package/dist/core/cn.d.ts +28 -0
- package/dist/core/cn.d.ts.map +1 -1
- package/dist/core/cn.js +15 -0
- package/dist/core/cn.js.map +1 -1
- package/dist/gallery.cjs +8 -7
- package/dist/gallery.d.ts.map +1 -1
- package/dist/gallery.html +2 -2
- package/dist/gallery.js +2 -1
- package/dist/gallery.js.map +1 -1
- package/dist/index.cjs +4 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/index.node.js +2 -1
- package/dist/slot.cjs +76 -0
- package/dist/slot.d.ts +35 -0
- package/dist/slot.d.ts.map +1 -0
- package/dist/slot.js +74 -0
- package/dist/slot.js.map +1 -0
- package/dist/tw.cjs +37 -1
- package/dist/tw.d.ts.map +1 -1
- package/dist/tw.js +37 -1
- package/dist/tw.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.StepIndicator = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const gui_1 = require("@hanzo/gui");
|
|
6
7
|
const box_1 = require("../../box.cjs");
|
|
7
8
|
const cn_1 = require("../../core/cn.cjs");
|
|
8
9
|
const StepIndicator = ({ steps, currentStep, dotSizeRem = 1, className, ...props }) => {
|
|
@@ -12,7 +13,7 @@ const StepIndicator = ({ steps, currentStep, dotSizeRem = 1, className, ...props
|
|
|
12
13
|
// cannot be a class name.
|
|
13
14
|
style: { gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))` }, ...props, children: steps.map((name, i) => {
|
|
14
15
|
const done = i <= currentStep;
|
|
15
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.View, { display: "grid", justifyItems: "center", gap: 4, position: "relative", children: [i < steps.length - 1 && ((0, jsx_runtime_1.jsx)(box_1.Box, { "aria-hidden": "true", className: (0, cn_1.cn)('absolute', i < currentStep ? 'bg-foreground' : 'bg-muted'), style: {
|
|
16
17
|
height: 2,
|
|
17
18
|
top: `calc(${dot} / 2 - 1px)`,
|
|
18
19
|
left: '50%',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step-indicator.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/step-indicator.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"step-indicator.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/step-indicator.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAG/B,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAA;IACnB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,aAAa,4DAMvB,kBAAkB,4CA8CpB,CAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { View } from '@hanzo/gui';
|
|
3
4
|
import { Box } from '../../box.js';
|
|
4
5
|
import { cn } from '../../core/cn.js';
|
|
5
6
|
export const StepIndicator = ({ steps, currentStep, dotSizeRem = 1, className, ...props }) => {
|
|
@@ -9,7 +10,7 @@ export const StepIndicator = ({ steps, currentStep, dotSizeRem = 1, className, .
|
|
|
9
10
|
// cannot be a class name.
|
|
10
11
|
style: { gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))` }, ...props, children: steps.map((name, i) => {
|
|
11
12
|
const done = i <= currentStep;
|
|
12
|
-
return (_jsxs(
|
|
13
|
+
return (_jsxs(View, { display: "grid", justifyItems: "center", gap: 4, position: "relative", children: [i < steps.length - 1 && (_jsx(Box, { "aria-hidden": "true", className: cn('absolute', i < currentStep ? 'bg-foreground' : 'bg-muted'), style: {
|
|
13
14
|
height: 2,
|
|
14
15
|
top: `calc(${dot} / 2 - 1px)`,
|
|
15
16
|
left: '50%',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step-indicator.js","sourceRoot":"","sources":["../../../src/backends/gui/step-indicator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;
|
|
1
|
+
{"version":3,"file":"step-indicator.js","sourceRoot":"","sources":["../../../src/backends/gui/step-indicator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAcjC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAUlC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,UAAU,GAAG,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,GAAG,GAAG,GAAG,UAAU,KAAK,CAAA;IAC9B,OAAO,CACL,KAAC,GAAG,IACF,IAAI,EAAC,aAAa,mBACH,CAAC,mBACD,KAAK,CAAC,MAAM,GAAG,CAAC,mBAChB,WAAW,oBACV,KAAK,CAAC,WAAW,CAAC,EAClC,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC;QAC5C,sEAAsE;QACtE,0BAA0B;QAC1B,KAAK,EAAE,EAAE,mBAAmB,EAAE,UAAU,KAAK,CAAC,MAAM,mBAAmB,EAAE,KACrE,KAAK,YAER,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACrB,MAAM,IAAI,GAAG,CAAC,IAAI,WAAW,CAAA;YAC7B,OAAO,CACL,MAAC,IAAI,IAAY,OAAO,EAAC,MAAM,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAC,UAAU,aAG9E,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACvB,KAAC,GAAG,mBACU,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,EACzE,KAAK,EAAE;4BACL,MAAM,EAAE,CAAC;4BACT,GAAG,EAAE,QAAQ,GAAG,aAAa;4BAC7B,IAAI,EAAE,KAAK;4BACX,KAAK,EAAE,MAAM;yBACd,GACD,CACH,EACD,KAAC,GAAG,mBACU,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,EAC3E,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAClC,EACF,KAAC,GAAG,IAAC,GAAG,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,uBAAuB,YAC1E,IAAI,GACD,KAtBG,IAAI,CAuBR,CACR,CAAA;QACH,CAAC,CAAC,GACE,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.CarteBlancheBlockComponent = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const gui_1 = require("@hanzo/gui");
|
|
5
6
|
const card_1 = require("../backends/gui/card.cjs");
|
|
6
|
-
const box_1 = require("../box.cjs");
|
|
7
7
|
const cn_1 = require("../core/cn.cjs");
|
|
8
8
|
const content_1 = require("./content.cjs");
|
|
9
9
|
const cta_1 = require("./cta.cjs");
|
|
@@ -32,7 +32,7 @@ const CarteBlancheBlockComponent = ({ block, className, agent, }) => {
|
|
|
32
32
|
const Body = () => b.content ? ((0, jsx_runtime_1.jsx)(card_1.CardContent, { ...(0, spec_1.sx)((0, cn_1.cn)('flex flex-col justify-center', body, className)), children: (0, jsx_runtime_1.jsx)(content_1.Content, { blocks: b.content, agent: agent }) })) : null;
|
|
33
33
|
const Foot = ({ className: cls }) => b.cta ? ((0, jsx_runtime_1.jsx)(card_1.CardFooter, { ...(0, spec_1.sx)((0, cn_1.cn)('grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center', foot, cls)), children: (0, jsx_runtime_1.jsx)(cta_1.CTABlockComponent, { block: b.cta, agent: agent }) })) : null;
|
|
34
34
|
const sideways = spec('variant-content-left') || (spec('variant-mobile-content-left') && agent === 'phone');
|
|
35
|
-
return ((0, jsx_runtime_1.jsx)(card_1.Card, { ...(0, spec_1.sx)((0, cn_1.cn)('flex flex-col', className, spec('no-outer-borders') && 'border-none')), children: sideways ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(
|
|
35
|
+
return ((0, jsx_runtime_1.jsx)(card_1.Card, { ...(0, spec_1.sx)((0, cn_1.cn)('flex flex-col', className, spec('no-outer-borders') && 'border-none')), children: sideways ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: 8, children: [b.topContent && ((0, jsx_runtime_1.jsx)(content_1.Content, { blocks: b.topContent, agent: agent, className: "self-center ml-6 mt-6" })), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { children: [(0, jsx_runtime_1.jsx)(Heading, {}), b.content && ((0, jsx_runtime_1.jsx)(card_1.CardContent, { ...(0, spec_1.sx)((0, cn_1.cn)('flex flex-col justify-start', body, className)), children: (0, jsx_runtime_1.jsx)(content_1.Content, { blocks: b.content, agent: agent }) }))] })] }), (0, jsx_runtime_1.jsx)(Foot, { className: "mx-auto" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(b.heading || b.topContent) && ((0, jsx_runtime_1.jsxs)(card_1.CardHeader, { ...(0, spec_1.sx)(head), children: [b.topContent && (0, jsx_runtime_1.jsx)(content_1.Content, { blocks: b.topContent, agent: agent }), b.heading && ((0, jsx_runtime_1.jsx)(enh_heading_1.EnhHeadingBlockComponent, { block: b.heading, className: "text-accent", agent: agent }))] })), (0, jsx_runtime_1.jsx)(Body, {}), (0, jsx_runtime_1.jsx)(Foot, {})] })) }));
|
|
36
36
|
};
|
|
37
37
|
exports.CarteBlancheBlockComponent = CarteBlancheBlockComponent;
|
|
38
38
|
exports.default = exports.CarteBlancheBlockComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carte-blanche.d.ts","sourceRoot":"","sources":["../../src/blocks/carte-blanche.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"carte-blanche.d.ts","sourceRoot":"","sources":["../../src/blocks/carte-blanche.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,mBAAmB,EAAW,MAAM,QAAQ,CAAA;AAK1D;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,iCAIpC,mBAAmB,4CAqErB,CAAA;eAEc,0BAA0B"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { XStack, YStack } from '@hanzo/gui';
|
|
2
3
|
import { Card, CardContent, CardFooter, CardHeader } from '../backends/gui/card.js';
|
|
3
|
-
import { Box } from '../box.js';
|
|
4
4
|
import { cn } from '../core/cn.js';
|
|
5
5
|
import { Content } from './content.js';
|
|
6
6
|
import { CTABlockComponent } from './cta.js';
|
|
@@ -29,7 +29,7 @@ export const CarteBlancheBlockComponent = ({ block, className, agent, }) => {
|
|
|
29
29
|
const Body = () => b.content ? (_jsx(CardContent, { ...sx(cn('flex flex-col justify-center', body, className)), children: _jsx(Content, { blocks: b.content, agent: agent }) })) : null;
|
|
30
30
|
const Foot = ({ className: cls }) => b.cta ? (_jsx(CardFooter, { ...sx(cn('grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center', foot, cls)), children: _jsx(CTABlockComponent, { block: b.cta, agent: agent }) })) : null;
|
|
31
31
|
const sideways = spec('variant-content-left') || (spec('variant-mobile-content-left') && agent === 'phone');
|
|
32
|
-
return (_jsx(Card, { ...sx(cn('flex flex-col', className, spec('no-outer-borders') && 'border-none')), children: sideways ? (_jsxs(_Fragment, { children: [_jsxs(
|
|
32
|
+
return (_jsx(Card, { ...sx(cn('flex flex-col', className, spec('no-outer-borders') && 'border-none')), children: sideways ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { gap: 8, children: [b.topContent && (_jsx(Content, { blocks: b.topContent, agent: agent, className: "self-center ml-6 mt-6" })), _jsxs(YStack, { children: [_jsx(Heading, {}), b.content && (_jsx(CardContent, { ...sx(cn('flex flex-col justify-start', body, className)), children: _jsx(Content, { blocks: b.content, agent: agent }) }))] })] }), _jsx(Foot, { className: "mx-auto" })] })) : (_jsxs(_Fragment, { children: [(b.heading || b.topContent) && (_jsxs(CardHeader, { ...sx(head), children: [b.topContent && _jsx(Content, { blocks: b.topContent, agent: agent }), b.heading && (_jsx(EnhHeadingBlockComponent, { block: b.heading, className: "text-accent", agent: agent }))] })), _jsx(Body, {}), _jsx(Foot, {})] })) }));
|
|
33
33
|
};
|
|
34
34
|
export default CarteBlancheBlockComponent;
|
|
35
35
|
//# sourceMappingURL=carte-blanche.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carte-blanche.js","sourceRoot":"","sources":["../../src/blocks/carte-blanche.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"carte-blanche.js","sourceRoot":"","sources":["../../src/blocks/carte-blanche.tsx"],"names":[],"mappings":"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"}
|
package/dist/blocks/image.cjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ImageBlockComponent = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const gui_1 = require("@hanzo/gui");
|
|
5
6
|
const box_1 = require("../box.cjs");
|
|
6
7
|
const cn_1 = require("../core/cn.cjs");
|
|
7
8
|
const spec_1 = require("./spec.cjs");
|
|
@@ -37,7 +38,7 @@ const ImageBlockComponent = ({ block, className, agent, constrainTo, }) => {
|
|
|
37
38
|
if (sizes)
|
|
38
39
|
size.sizes = sizes;
|
|
39
40
|
if (phone && (spec('mobile-full-width') || fullWidthOnMobile)) {
|
|
40
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
41
|
+
return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { items: "center", width: "100%", children: (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "img", src: src, alt: label, width: dim.w, height: dim.h, sizes: "100vw", style: { width: '100%', height: 'auto', maxWidth: 420 }, className: (0, cn_1.cn)(svgFillClass, className) }) }));
|
|
41
42
|
}
|
|
42
43
|
if (phone && !spec('mobile-no-scale') && props?.fill === undefined) {
|
|
43
44
|
const box = constrainTo ? (0, spec_1.fit)(dim, constrainTo) : dim;
|
|
@@ -46,7 +47,7 @@ const ImageBlockComponent = ({ block, className, agent, constrainTo, }) => {
|
|
|
46
47
|
}
|
|
47
48
|
const align = spec('right') ? 'self-end' : spec('center') ? 'self-center' : 'self-start';
|
|
48
49
|
if (props?.fill) {
|
|
49
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
50
|
+
return ((0, jsx_runtime_1.jsx)(gui_1.View, { position: "relative", width: "100%", height: "100%", children: (0, jsx_runtime_1.jsx)(box_1.Box, { tag: "img", src: src, alt: label, ...size, ...props, className: (0, cn_1.cn)(svgFillClass, 'max-w-[70vw] mx-auto', className) }) }));
|
|
50
51
|
}
|
|
51
52
|
return ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "img", src: src, alt: label, ...size, ...props, className: (0, cn_1.cn)(align, svgFillClass, 'max-w-[70vw] mx-auto', className) }));
|
|
52
53
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/blocks/image.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/blocks/image.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,OAAO,EAAE,KAAK,mBAAmB,EAAkB,MAAM,QAAQ,CAAA;AAKjE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,8CAK7B,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,UAAU,CAAA;CAAE,4CAqEpD,CAAA;eAEc,mBAAmB"}
|
package/dist/blocks/image.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
'use client';import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { View, YStack } from '@hanzo/gui';
|
|
2
3
|
import { Box } from '../box.js';
|
|
3
4
|
import { cn } from '../core/cn.js';
|
|
4
5
|
import { fit, has, name } from './spec.js';
|
|
@@ -34,7 +35,7 @@ export const ImageBlockComponent = ({ block, className, agent, constrainTo, }) =
|
|
|
34
35
|
if (sizes)
|
|
35
36
|
size.sizes = sizes;
|
|
36
37
|
if (phone && (spec('mobile-full-width') || fullWidthOnMobile)) {
|
|
37
|
-
return (_jsx(
|
|
38
|
+
return (_jsx(YStack, { items: "center", width: "100%", children: _jsx(Box, { tag: "img", src: src, alt: label, width: dim.w, height: dim.h, sizes: "100vw", style: { width: '100%', height: 'auto', maxWidth: 420 }, className: cn(svgFillClass, className) }) }));
|
|
38
39
|
}
|
|
39
40
|
if (phone && !spec('mobile-no-scale') && props?.fill === undefined) {
|
|
40
41
|
const box = constrainTo ? fit(dim, constrainTo) : dim;
|
|
@@ -43,7 +44,7 @@ export const ImageBlockComponent = ({ block, className, agent, constrainTo, }) =
|
|
|
43
44
|
}
|
|
44
45
|
const align = spec('right') ? 'self-end' : spec('center') ? 'self-center' : 'self-start';
|
|
45
46
|
if (props?.fill) {
|
|
46
|
-
return (_jsx(
|
|
47
|
+
return (_jsx(View, { position: "relative", width: "100%", height: "100%", children: _jsx(Box, { tag: "img", src: src, alt: label, ...size, ...props, className: cn(svgFillClass, 'max-w-[70vw] mx-auto', className) }) }));
|
|
47
48
|
}
|
|
48
49
|
return (_jsx(Box, { tag: "img", src: src, alt: label, ...size, ...props, className: cn(align, svgFillClass, 'max-w-[70vw] mx-auto', className) }));
|
|
49
50
|
};
|
package/dist/blocks/image.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.js","sourceRoot":"","sources":["../../src/blocks/image.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"image.js","sourceRoot":"","sources":["../../src/blocks/image.tsx"],"names":[],"mappings":"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"}
|
package/dist/core/cn.cjs
CHANGED
|
@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
16
16
|
exports.flatten = flatten;
|
|
17
17
|
exports.cn = cn;
|
|
18
18
|
exports.capitalize = capitalize;
|
|
19
|
+
exports.variants = variants;
|
|
19
20
|
/**
|
|
20
21
|
* Every class in the input, in order, as individual tokens.
|
|
21
22
|
*
|
|
@@ -57,3 +58,18 @@ function cn(...inputs) {
|
|
|
57
58
|
function capitalize(s) {
|
|
58
59
|
return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
|
|
59
60
|
}
|
|
61
|
+
function variants(base, config) {
|
|
62
|
+
const table = config?.variants ?? {};
|
|
63
|
+
const fallback = config?.defaultVariants ?? {};
|
|
64
|
+
return (choice) => {
|
|
65
|
+
const picked = [base];
|
|
66
|
+
for (const axis in table) {
|
|
67
|
+
// An explicit `undefined` means "not chosen" and falls back, which is what
|
|
68
|
+
// `<Button size={undefined}>` means at a call site.
|
|
69
|
+
const key = choice?.[axis] ?? fallback[axis];
|
|
70
|
+
if (key != null)
|
|
71
|
+
picked.push(table[axis][key]);
|
|
72
|
+
}
|
|
73
|
+
return cn(...picked, choice?.class, choice?.className);
|
|
74
|
+
};
|
|
75
|
+
}
|
package/dist/core/cn.d.ts
CHANGED
|
@@ -30,4 +30,32 @@ export declare function flatten(v: ClassValue, out?: string[]): string[];
|
|
|
30
30
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
31
31
|
/** First letter up, rest untouched — a label from a machine-readable name. */
|
|
32
32
|
export declare function capitalize(s: string): string;
|
|
33
|
+
/**
|
|
34
|
+
* A variant table, as a function from a selection to its classes.
|
|
35
|
+
*
|
|
36
|
+
* const chip = variants('inline-flex rounded', {
|
|
37
|
+
* variants: { tone: { warn: 'bg-amber-500', calm: 'bg-slate-500' } },
|
|
38
|
+
* defaultVariants: { tone: 'calm' },
|
|
39
|
+
* })
|
|
40
|
+
* chip({ tone: 'warn' }) // 'inline-flex rounded bg-amber-500'
|
|
41
|
+
*
|
|
42
|
+
* A lookup and a join. It reads exactly like `cva`, whose shape every component
|
|
43
|
+
* in this estate is already written against, so adopting it is a rename — but it
|
|
44
|
+
* is fifteen lines beside `cn` rather than a dependency, and one of the two
|
|
45
|
+
* class-name libraries this package used to carry to do what it already did.
|
|
46
|
+
*/
|
|
47
|
+
export type Variants = Record<string, Record<string, ClassValue>>;
|
|
48
|
+
/** The selection: for each axis, one of the keys that axis offers. */
|
|
49
|
+
export type Choice<V extends Variants> = {
|
|
50
|
+
[K in keyof V]?: keyof V[K];
|
|
51
|
+
};
|
|
52
|
+
/** The props a component accepts, read back off its own table. */
|
|
53
|
+
export type VariantProps<F> = F extends (choice?: infer C) => string ? Omit<NonNullable<C>, 'class' | 'className'> : never;
|
|
54
|
+
export declare function variants<V extends Variants>(base?: ClassValue, config?: {
|
|
55
|
+
variants?: V;
|
|
56
|
+
defaultVariants?: Choice<V>;
|
|
57
|
+
}): (choice?: Choice<V> & {
|
|
58
|
+
class?: ClassValue;
|
|
59
|
+
className?: ClassValue;
|
|
60
|
+
}) => string;
|
|
33
61
|
//# sourceMappingURL=cn.d.ts.map
|
package/dist/core/cn.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/core/cn.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GACrD,UAAU,EAAE,GACZ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE3B;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,GAAE,MAAM,EAAO,GAAG,MAAM,EAAE,CAWnE;AAED,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD;AAED,8EAA8E;AAC9E,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAE5C"}
|
|
1
|
+
{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/core/cn.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GACrD,UAAU,EAAE,GACZ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE3B;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,GAAE,MAAM,EAAO,GAAG,MAAM,EAAE,CAWnE;AAED,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD;AAED,8EAA8E;AAC9E,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAA;AAEjE,sEAAsE;AACtE,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,QAAQ,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAAE,CAAA;AAExE,kEAAkE;AAClE,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,KAAK,MAAM,GAChE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,GAC3C,KAAK,CAAA;AAET,wBAAgB,QAAQ,CAAC,CAAC,SAAS,QAAQ,EACzC,IAAI,CAAC,EAAE,UAAU,EACjB,MAAM,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;CAAE,aAIrC,MAAM,CAAC,CAAC,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAAC,SAAS,CAAC,EAAE,UAAU,CAAA;CAAE,KAAG,MAAM,CAUrF"}
|
package/dist/core/cn.js
CHANGED
|
@@ -52,4 +52,19 @@ export function cn(...inputs) {
|
|
|
52
52
|
export function capitalize(s) {
|
|
53
53
|
return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
|
|
54
54
|
}
|
|
55
|
+
export function variants(base, config) {
|
|
56
|
+
const table = config?.variants ?? {};
|
|
57
|
+
const fallback = config?.defaultVariants ?? {};
|
|
58
|
+
return (choice) => {
|
|
59
|
+
const picked = [base];
|
|
60
|
+
for (const axis in table) {
|
|
61
|
+
// An explicit `undefined` means "not chosen" and falls back, which is what
|
|
62
|
+
// `<Button size={undefined}>` means at a call site.
|
|
63
|
+
const key = choice?.[axis] ?? fallback[axis];
|
|
64
|
+
if (key != null)
|
|
65
|
+
picked.push(table[axis][key]);
|
|
66
|
+
}
|
|
67
|
+
return cn(...picked, choice?.class, choice?.className);
|
|
68
|
+
};
|
|
69
|
+
}
|
|
55
70
|
//# sourceMappingURL=cn.js.map
|
package/dist/core/cn.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/core/cn.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAeH;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,CAAa,EAAE,GAAG,GAAa,EAAE;IACvD,IAAI,CAAC,CAAC;QAAE,OAAO,GAAG,CAAA;IAClB,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;QAAC,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC;gBAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAAC,OAAO,GAAG,CAAA;IAAC,CAAC;IAC7F,4EAA4E;IAC5E,2EAA2E;IAC3E,8DAA8D;IAC9D,IAAI,OAAO,CAAC,KAAK,SAAS;QAAE,OAAO,GAAG,CAAA;IACtC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;QAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,OAAO,GAAG,CAAA;IAAC,CAAC;IACvF,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QAAC,KAAK,MAAM,CAAC,IAAI,CAAC;YAAE,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAAC,OAAO,GAAG,CAAA;IAAC,CAAC;IACxE,KAAK,MAAM,CAAC,IAAI,CAAC;QAAE,IAAK,CAA6B,CAAC,CAAC,CAAC;YAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACrE,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAClC,CAAC;AAED,8EAA8E;AAC9E,MAAM,UAAU,UAAU,CAAC,CAAS;IAClC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACvD,CAAC"}
|
|
1
|
+
{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/core/cn.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAeH;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,CAAa,EAAE,GAAG,GAAa,EAAE;IACvD,IAAI,CAAC,CAAC;QAAE,OAAO,GAAG,CAAA;IAClB,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;QAAC,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC;gBAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAAC,OAAO,GAAG,CAAA;IAAC,CAAC;IAC7F,4EAA4E;IAC5E,2EAA2E;IAC3E,8DAA8D;IAC9D,IAAI,OAAO,CAAC,KAAK,SAAS;QAAE,OAAO,GAAG,CAAA;IACtC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;QAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,OAAO,GAAG,CAAA;IAAC,CAAC;IACvF,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QAAC,KAAK,MAAM,CAAC,IAAI,CAAC;YAAE,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAAC,OAAO,GAAG,CAAA;IAAC,CAAC;IACxE,KAAK,MAAM,CAAC,IAAI,CAAC;QAAE,IAAK,CAA6B,CAAC,CAAC,CAAC;YAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACrE,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAClC,CAAC;AAED,8EAA8E;AAC9E,MAAM,UAAU,UAAU,CAAC,CAAS;IAClC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACvD,CAAC;AA0BD,MAAM,UAAU,QAAQ,CACtB,IAAiB,EACjB,MAAsD;IAEtD,MAAM,KAAK,GAAG,MAAM,EAAE,QAAQ,IAAK,EAAQ,CAAA;IAC3C,MAAM,QAAQ,GAAG,MAAM,EAAE,eAAe,IAAK,EAAgB,CAAA;IAC7D,OAAO,CAAC,MAAmE,EAAU,EAAE;QACrF,MAAM,MAAM,GAAiB,CAAC,IAAI,CAAC,CAAA;QACnC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,2EAA2E;YAC3E,oDAAoD;YACpD,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC5C,IAAI,GAAG,IAAI,IAAI;gBAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAa,CAAC,CAAC,CAAA;QAC1D,CAAC;QACD,OAAO,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,CAAA;IACxD,CAAC,CAAA;AACH,CAAC"}
|
package/dist/gallery.cjs
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.Gallery = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const gui_1 = require("@hanzo/gui");
|
|
6
7
|
const box_1 = require("./box.cjs");
|
|
7
8
|
const Workbench_1 = require("./product/Workbench.cjs");
|
|
8
9
|
const Skeleton_1 = require("./product/Skeleton.cjs");
|
|
@@ -12,7 +13,7 @@ const Split_1 = require("./product/Split.cjs");
|
|
|
12
13
|
const TooltipAnchor_1 = require("./product/TooltipAnchor.cjs");
|
|
13
14
|
const DialogTemplate_1 = require("./product/DialogTemplate.cjs");
|
|
14
15
|
const chat_1 = require("./chat/index.cjs");
|
|
15
|
-
const
|
|
16
|
+
const gui_2 = require("./backends/gui/index.cjs");
|
|
16
17
|
// Off the barrel — web-only, so it is imported the way a consumer imports it.
|
|
17
18
|
const grid_1 = require("./grid.cjs");
|
|
18
19
|
/** A real <img> with real intrinsic pixels, inline so nothing hits the network.
|
|
@@ -74,19 +75,19 @@ const Section = ({ name, children }) => ((0, jsx_runtime_1.jsx)("section", { "da
|
|
|
74
75
|
* Every component, once. `data-gallery` names each section so a browser test can
|
|
75
76
|
* scope its assertions without depending on document order.
|
|
76
77
|
*/
|
|
77
|
-
const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, padding: 24, maxWidth: 928 }, children: [(0, jsx_runtime_1.jsx)(Section, { name: "type", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }, children: [11, 10, 9, 7, 6, 4, 3, 2, 1].map((rung) => ((0, jsx_runtime_1.jsx)(
|
|
78
|
+
const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, padding: 24, maxWidth: 928 }, children: [(0, jsx_runtime_1.jsx)(Section, { name: "type", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }, children: [11, 10, 9, 7, 6, 4, 3, 2, 1].map((rung) => ((0, jsx_runtime_1.jsx)(gui_2.Text, { fontSize: `$${rung}`, lineHeight: `$${rung}`, letterSpacing: `$${rung}`, children: "Hanzo \u2014 the Open AI Cloud" }, rung))) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "button", children: [BUTTON_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_2.Button, { variant: variant, children: variant }, variant))), BUTTON_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(gui_2.Button, { size: size, children: size }, size))), (0, jsx_runtime_1.jsx)(gui_2.Button, { disabled: true, children: "disabled" }), (0, jsx_runtime_1.jsx)(gui_2.Button, { isLoading: true, children: "loading" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "badge", children: BADGE_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_2.Badge, { variant: variant, children: variant }, variant))) }), (0, jsx_runtime_1.jsx)(Section, { name: "card", children: (0, jsx_runtime_1.jsxs)(gui_2.Card, { children: [(0, jsx_runtime_1.jsxs)(gui_2.CardHeader, { children: [(0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Card title" }), (0, jsx_runtime_1.jsx)(gui_2.CardDescription, { children: "Card description" }), (0, jsx_runtime_1.jsx)(gui_2.CardAction, { children: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", variant: "ghost", children: "action" }) })] }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "Card content" }), (0, jsx_runtime_1.jsx)(gui_2.CardFooter, { children: "Card footer" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "form", children: [(0, jsx_runtime_1.jsx)(gui_2.Label, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "Input" }), (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "Password", type: "password" }), (0, jsx_runtime_1.jsx)(gui_2.Textarea, { placeholder: "Textarea" }), (0, jsx_runtime_1.jsx)(gui_2.Checkbox, {}), (0, jsx_runtime_1.jsx)(gui_2.Checkbox, { checked: true }), (0, jsx_runtime_1.jsx)(gui_2.Switch, {}), (0, jsx_runtime_1.jsx)(gui_2.Switch, { checked: true }), (0, jsx_runtime_1.jsx)(gui_2.Slider, { defaultValue: [40] }), (0, jsx_runtime_1.jsx)(gui_2.Progress, { value: 40 }), (0, jsx_runtime_1.jsxs)(gui_2.RadioGroup, { defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "a" }), (0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "b" }), (0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "c", disabled: true })] }), (0, jsx_runtime_1.jsxs)(gui_2.RadioGroup, { orientation: "horizontal", defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "a" }), (0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "b" })] })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "toggle-group", children: [['default', 'outline'].map((variant) => ['default', 'sm', 'lg'].map((size) => ((0, jsx_runtime_1.jsxs)(gui_2.ToggleGroup, { type: "single", defaultValue: "a", variant: variant, size: size, children: [(0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "b", children: "B" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "c", disabled: true, children: "C" })] }, `${variant}-${size}`)))), (0, jsx_runtime_1.jsxs)(gui_2.ToggleGroup, { type: "multiple", defaultValue: ['a'], children: [(0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "b", children: "B" })] }), (0, jsx_runtime_1.jsxs)(gui_2.ToggleGroup, { type: "single", orientation: "vertical", defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "b", children: "B" })] })] }), (0, jsx_runtime_1.jsx)(Section, { name: "accordion", children: (0, jsx_runtime_1.jsxs)(gui_2.Accordion, { type: "single", collapsible: true, defaultValue: "one", children: [(0, jsx_runtime_1.jsxs)(gui_2.AccordionItem, { value: "one", children: [(0, jsx_runtime_1.jsx)(gui_2.AccordionTrigger, { children: "Accordion trigger" }), (0, jsx_runtime_1.jsx)(gui_2.AccordionContent, { children: "Accordion content" })] }), (0, jsx_runtime_1.jsxs)(gui_2.AccordionItem, { value: "two", children: [(0, jsx_runtime_1.jsx)(gui_2.AccordionTrigger, { children: "Second trigger" }), (0, jsx_runtime_1.jsx)(gui_2.AccordionContent, { children: "Second content" })] })] }) }), (0, jsx_runtime_1.jsx)(Section, { name: "tabs", children: (0, jsx_runtime_1.jsxs)(gui_2.Tabs, { defaultValue: "one", children: [(0, jsx_runtime_1.jsxs)(gui_2.TabsList, { children: [(0, jsx_runtime_1.jsx)(gui_2.TabsTrigger, { value: "one", children: "One" }), (0, jsx_runtime_1.jsx)(gui_2.TabsTrigger, { value: "two", children: "Two" })] }), (0, jsx_runtime_1.jsx)(gui_2.TabsContent, { value: "one", children: "Panel one" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "surface", children: [(0, jsx_runtime_1.jsx)(gui_2.Separator, {}), (0, jsx_runtime_1.jsx)(gui_2.AspectRatio, { ratio: 16 / 9 }), (0, jsx_runtime_1.jsx)(gui_2.Avatar, { children: (0, jsx_runtime_1.jsx)(gui_2.AvatarFallback, { children: "HZ" }) }), (0, jsx_runtime_1.jsx)(gui_2.ScrollArea, { height: 80, children: "Scroll area" }), (0, jsx_runtime_1.jsxs)(gui_2.ResizablePanelGroup, { direction: "horizontal", children: [(0, jsx_runtime_1.jsx)(gui_2.ResizablePanel, {}), (0, jsx_runtime_1.jsx)(gui_2.ResizableHandle, {}), (0, jsx_runtime_1.jsx)(gui_2.ResizablePanel, {})] })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "connection-badge", children: [(0, jsx_runtime_1.jsx)(ConnectionBadge_1.ConnectionBadge, { method: "OAuth", extra: "acme/site", onDisconnect: () => { } }), (0, jsx_runtime_1.jsx)(ConnectionBadge_1.ConnectionBadge, { method: "API key", onDisconnect: () => { }, disconnecting: true })] }), (0, jsx_runtime_1.jsx)(Section, { name: "project-thumb", children: (0, jsx_runtime_1.jsx)("div", { style: { width: 240 }, children: (0, jsx_runtime_1.jsx)(ProjectThumb_1.ProjectThumb, { name: "Acme" }) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "split", children: (0, jsx_runtime_1.jsx)("div", { style: { width: 360, height: 120 }, children: (0, jsx_runtime_1.jsx)(Split_1.Split, { left: (0, jsx_runtime_1.jsx)(box_1.Box, { children: "left" }), right: (0, jsx_runtime_1.jsx)(box_1.Box, { children: "right" }) }) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "spinner", children: [12, 16, 20, 32].map((size) => ((0, jsx_runtime_1.jsx)(gui_2.Spinner, { size: size }, size))) }), (0, jsx_runtime_1.jsx)(Section, { name: "collapsible", children: (0, jsx_runtime_1.jsxs)(gui_2.Collapsible, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.CollapsibleTrigger, { children: "Collapsible trigger" }), (0, jsx_runtime_1.jsx)(gui_2.CollapsibleContent, { children: "Collapsible content" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "command", children: [(0, jsx_runtime_1.jsxs)(gui_2.Command, { children: [(0, jsx_runtime_1.jsx)(gui_2.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_2.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_2.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsx)(gui_2.CommandGroup, { heading: "Group", children: (0, jsx_runtime_1.jsxs)(gui_2.CommandItem, { value: "a", children: ["Item", (0, jsx_runtime_1.jsx)(gui_2.CommandShortcut, { children: "\u2318A" })] }) }), (0, jsx_runtime_1.jsx)(gui_2.CommandSeparator, {})] })] }), (0, jsx_runtime_1.jsxs)(gui_2.CommandDialog, { open: true, defaultValue: "alpha", onValueChange: (v) => {
|
|
78
79
|
const el = document.querySelector('[data-palette-selected]');
|
|
79
80
|
if (el)
|
|
80
81
|
el.setAttribute('data-palette-selected', v);
|
|
81
|
-
}, children: [(0, jsx_runtime_1.jsx)(
|
|
82
|
+
}, children: [(0, jsx_runtime_1.jsx)(gui_2.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_2.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_2.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsxs)(gui_2.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_2.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_2.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_2.CommandItem, { value: "gamma", children: "gamma" })] })] })] }), (0, jsx_runtime_1.jsx)("span", { "data-palette-selected": "" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_2.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_2.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_2.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_2.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_2.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_2.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_2.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_2.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_2.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_2.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_2.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_2.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_2.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_2.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_2.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_2.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_2.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_2.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_2.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_2.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_2.AlertDialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_2.AlertDialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_2.AlertDialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_2.AlertDialogTitle, { children: "Alert title" }), (0, jsx_runtime_1.jsx)(gui_2.AlertDialogDescription, { children: "Alert description" })] }), (0, jsx_runtime_1.jsxs)(gui_2.AlertDialogFooter, { children: [(0, jsx_runtime_1.jsx)(gui_2.AlertDialogCancel, { children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_2.AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), (0, jsx_runtime_1.jsxs)(gui_2.HoverCard, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.HoverCardTrigger, { children: "Hover card" }), (0, jsx_runtime_1.jsx)(gui_2.HoverCardContent, { children: "Hover card content" })] }), (0, jsx_runtime_1.jsxs)(gui_2.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(gui_2.ContextMenuTrigger, { children: "Context menu" }), (0, jsx_runtime_1.jsxs)(gui_2.ContextMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_2.ContextMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_2.ContextMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_2.ContextMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsx)(gui_2.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 240 }, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => ((0, jsx_runtime_1.jsxs)(gui_2.Card, { children: [(0, jsx_runtime_1.jsx)(gui_2.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_2.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_2.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_2.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 160, max: 4 }, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => ((0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsxs)(gui_2.CardContent, { children: ["cap ", i] }) }, i))) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: { min: 900 }, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: ['2fr', '1fr'], gap: "$3", style: { width: '100%' }, "data-grid": "list", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "2fr" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "1fr" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: "repeat(3, 1fr)", gap: "$3", style: { width: '100%' }, "data-grid": "written", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "a" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "b" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "c" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "short" }) })] }) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, rows: 2, gap: "$3", style: { width: '100%' }, "data-grid": "cells", children: [(0, jsx_runtime_1.jsx)(grid_1.Cell, { col: 2, "data-cell": "span2", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "spans two" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: 2, "data-cell": "rows2", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "spans two rows" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { "data-cell": "plain", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "one" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: "2 / 4", "data-cell": "rowplaced", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "placed down" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { col: "1 / -1", "data-cell": "full", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "the whole row" }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_2.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_2.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_2.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_2.Band, { measure: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_2.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "workbench", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', height: 220, width: '100%', maxWidth: 880, overflowX: 'auto' }, children: (0, jsx_runtime_1.jsx)(Workbench_1.Workbench, { left: { tabs: [{ id: 'files', title: 'Files', content: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "left" }) }] }, right: {
|
|
82
83
|
tabs: [
|
|
83
|
-
{ id: 'chat', title: 'Side chat', content: (0, jsx_runtime_1.jsx)(
|
|
84
|
-
{ id: 'browser', title: 'Browser', content: (0, jsx_runtime_1.jsx)(
|
|
84
|
+
{ id: 'chat', title: 'Side chat', content: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "chat" }) },
|
|
85
|
+
{ id: 'browser', title: 'Browser', content: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "browser" }) },
|
|
85
86
|
],
|
|
86
87
|
}, bottom: {
|
|
87
88
|
tabs: [
|
|
88
|
-
{ id: 'console', title: 'Console', closable: false, content: (0, jsx_runtime_1.jsx)(
|
|
89
|
+
{ id: 'console', title: 'Console', closable: false, content: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "console" }) },
|
|
89
90
|
],
|
|
90
|
-
}, children: (0, jsx_runtime_1.jsx)(
|
|
91
|
+
}, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "center" }) }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "product-arrangements", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%', maxWidth: 320 }, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: 120 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: "100%", height: 72, rounded: "$4" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton.Text, { lines: 3 })] }), (0, jsx_runtime_1.jsx)(TooltipAnchor_1.TooltipAnchor, { description: "Delete this agent", children: (0, jsx_runtime_1.jsx)(gui_2.Button, { children: "hinted" }) }), (0, jsx_runtime_1.jsx)(gui_2.Dialog, { open: true, children: (0, jsx_runtime_1.jsx)(DialogTemplate_1.DialogTemplate, { title: "Delete agent", description: "This removes every run recorded against it.", confirm: { label: 'Delete', tone: 'danger' }, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "body" }) }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "chat", children: [(0, jsx_runtime_1.jsxs)(gui_2.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: [(0, jsx_runtime_1.jsxs)(chat_1.Header, { title: "A conversation with a long enough name to clamp", leading: (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {}), onOpenMenu: NOOP, children: [(0, jsx_runtime_1.jsx)(chat_1.ShareButton, {}), (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {})] }), (0, jsx_runtime_1.jsx)(gui_2.Fill, { children: (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "plain Fill \u2014 the middle, without a Thread" }) }), (0, jsx_runtime_1.jsxs)(chat_1.Thread, { children: [(0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "ask" }), (0, jsx_runtime_1.jsxs)(chat_1.Message, { role: "assistant", icon: (0, jsx_runtime_1.jsx)(gui_2.Spinner, {}), actions: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "copy" }), children: [(0, jsx_runtime_1.jsx)(chat_1.Step, { name: "shell", status: "running", detail: "git status --porcelain" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "write", status: "done", detail: "src/index.ts", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "json", value: "{}", children: '{}' }) }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "fetch", status: "error", detail: "timed out", children: "plain body" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "plan", status: "cancelled" }), (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "typescript", value: "const x = 1", children: "const x = 1" }), (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES })] }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", busy: true, children: "answering" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { onRetry: NOOP, children: "The model stopped before finishing." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { children: "Rate limited." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", body: { bg: '$color5', rounded: '$3' }, children: "restyled bubble" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "system", children: "note" })] }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "a draft", onChange: NOOP, onSend: NOOP, hint: "Enter to send", children: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "tool" }) }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "", onChange: NOOP, onSend: NOOP, onStop: NOOP, busy: true })] }), (0, jsx_runtime_1.jsx)(gui_2.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { messages: TURNS, streaming: true, send: NOOP, stop: NOOP, composer: { placeholder: 'Ask anything' } }) }), (0, jsx_runtime_1.jsx)(gui_2.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { messages: [], send: NOOP, empty: (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "system", children: "nothing yet" }) }) }), (0, jsx_runtime_1.jsx)(chat_1.Aside, { children: (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: '100%', maxWidth: 260, height: 320 }, children: (0, jsx_runtime_1.jsxs)(chat_1.Sidebar, { children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarHeader, { title: "Hanzo", onOpenSwitcher: NOOP, onSearch: NOOP, onCollapse: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.SidebarNewChat, { onPress: NOOP }), (0, jsx_runtime_1.jsxs)(chat_1.SidebarScroll, { children: [(0, jsx_runtime_1.jsxs)(chat_1.SidebarSection, { label: "Today", children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { active: true, onPress: NOOP, children: "Selected thread" }), (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Another thread" })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarFolder, { name: "Archive", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Nested thread" }) })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarUser, { name: "z", secondary: "z@hanzo.ai", onPress: NOOP, onHelp: NOOP })] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "box", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", gap: 16, px: 24, py: 12, rounded: "var(--radius-lg, 0.75rem)", borderWidth: 1, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "utility classes" }) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: 8, maxW: 768, ml: "auto", mr: "auto", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "column" }) })] })] }));
|
|
91
92
|
exports.Gallery = Gallery;
|
|
92
93
|
exports.default = exports.Gallery;
|
package/dist/gallery.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAsJA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CA+lBnB,CAAA;eAEc,OAAO"}
|