@techfides/ui-library-design 0.5.0 → 0.7.0
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/anatomies.d.ts +1586 -0
- package/dist/anatomies.js +107 -0
- package/dist/anatomies.js.map +1 -0
- package/dist/anatomy.d.ts +13 -0
- package/dist/anatomy.js +6 -0
- package/dist/anatomy.js.map +1 -0
- package/dist/control.d.ts +1 -2
- package/dist/control.js +1 -2
- package/dist/control.js.map +1 -1
- package/dist/index.d.ts +55 -52
- package/dist/index.js +59 -56
- package/dist/recipes/accordion.d.ts +28 -1
- package/dist/recipes/accordion.js +29 -1
- package/dist/recipes/accordion.js.map +1 -1
- package/dist/recipes/alert.d.ts +45 -1
- package/dist/recipes/alert.js +45 -1
- package/dist/recipes/alert.js.map +1 -1
- package/dist/recipes/band.d.ts +11 -1
- package/dist/recipes/band.js +7 -1
- package/dist/recipes/band.js.map +1 -1
- package/dist/recipes/bars.d.ts +60 -1
- package/dist/recipes/bars.js +59 -1
- package/dist/recipes/bars.js.map +1 -1
- package/dist/recipes/brandMark.d.ts +8 -1
- package/dist/recipes/brandMark.js +7 -1
- package/dist/recipes/brandMark.js.map +1 -1
- package/dist/recipes/button.d.ts +41 -4
- package/dist/recipes/button.js +31 -2
- package/dist/recipes/button.js.map +1 -1
- package/dist/recipes/cardHeader.d.ts +18 -1
- package/dist/recipes/cardHeader.js +19 -1
- package/dist/recipes/cardHeader.js.map +1 -1
- package/dist/recipes/checkbox.d.ts +16 -1
- package/dist/recipes/checkbox.js +16 -3
- package/dist/recipes/checkbox.js.map +1 -1
- package/dist/recipes/chip.d.ts +41 -2
- package/dist/recipes/chip.js +34 -1
- package/dist/recipes/chip.js.map +1 -1
- package/dist/recipes/codeEditor.d.ts +8 -1
- package/dist/recipes/codeEditor.js +7 -1
- package/dist/recipes/codeEditor.js.map +1 -1
- package/dist/recipes/datePicker.d.ts +62 -1
- package/dist/recipes/datePicker.js +56 -3
- package/dist/recipes/datePicker.js.map +1 -1
- package/dist/recipes/dialog.d.ts +49 -1
- package/dist/recipes/dialog.js +40 -1
- package/dist/recipes/dialog.js.map +1 -1
- package/dist/recipes/feature.d.ts +30 -1
- package/dist/recipes/feature.js +30 -2
- package/dist/recipes/feature.js.map +1 -1
- package/dist/recipes/field.js +1 -1
- package/dist/recipes/findings.d.ts +33 -1
- package/dist/recipes/findings.js +34 -1
- package/dist/recipes/findings.js.map +1 -1
- package/dist/recipes/heading.d.ts +12 -2
- package/dist/recipes/heading.js +7 -1
- package/dist/recipes/heading.js.map +1 -1
- package/dist/recipes/heartbeat.d.ts +52 -2
- package/dist/recipes/heartbeat.js +51 -4
- package/dist/recipes/heartbeat.js.map +1 -1
- package/dist/recipes/ink.d.ts +11 -0
- package/dist/recipes/ink.js +13 -0
- package/dist/recipes/ink.js.map +1 -0
- package/dist/recipes/input.d.ts +55 -1
- package/dist/recipes/input.js +52 -2
- package/dist/recipes/input.js.map +1 -1
- package/dist/recipes/listItem.d.ts +18 -1
- package/dist/recipes/listItem.js +20 -1
- package/dist/recipes/listItem.js.map +1 -1
- package/dist/recipes/listbox.d.ts +22 -2
- package/dist/recipes/listbox.js +19 -1
- package/dist/recipes/listbox.js.map +1 -1
- package/dist/recipes/marquee.d.ts +26 -2
- package/dist/recipes/marquee.js +24 -1
- package/dist/recipes/marquee.js.map +1 -1
- package/dist/recipes/menu.d.ts +33 -1
- package/dist/recipes/menu.js +29 -1
- package/dist/recipes/menu.js.map +1 -1
- package/dist/recipes/metaRow.d.ts +11 -2
- package/dist/recipes/metaRow.js +7 -1
- package/dist/recipes/metaRow.js.map +1 -1
- package/dist/recipes/meter.d.ts +36 -2
- package/dist/recipes/meter.js +34 -1
- package/dist/recipes/meter.js.map +1 -1
- package/dist/recipes/motion.d.ts +9 -1
- package/dist/recipes/nebula.js +1 -1
- package/dist/recipes/numberRange.d.ts +44 -1
- package/dist/recipes/numberRange.js +36 -1
- package/dist/recipes/numberRange.js.map +1 -1
- package/dist/recipes/paper.d.ts +55 -2
- package/dist/recipes/paper.js +47 -4
- package/dist/recipes/paper.js.map +1 -1
- package/dist/recipes/progressBar.d.ts +8 -1
- package/dist/recipes/progressBar.js +7 -1
- package/dist/recipes/progressBar.js.map +1 -1
- package/dist/recipes/queue.d.ts +33 -1
- package/dist/recipes/queue.js +35 -1
- package/dist/recipes/queue.js.map +1 -1
- package/dist/recipes/radioGroup.d.ts +18 -1
- package/dist/recipes/radioGroup.js +21 -3
- package/dist/recipes/radioGroup.js.map +1 -1
- package/dist/recipes/scopeSwitcher.d.ts +38 -1
- package/dist/recipes/scopeSwitcher.js +40 -1
- package/dist/recipes/scopeSwitcher.js.map +1 -1
- package/dist/recipes/scrollArea.d.ts +12 -3
- package/dist/recipes/scrollArea.js +7 -1
- package/dist/recipes/scrollArea.js.map +1 -1
- package/dist/recipes/searchPalette.d.ts +48 -1
- package/dist/recipes/searchPalette.js +49 -1
- package/dist/recipes/searchPalette.js.map +1 -1
- package/dist/recipes/sectionHeader.d.ts +20 -2
- package/dist/recipes/sectionHeader.js +20 -3
- package/dist/recipes/sectionHeader.js.map +1 -1
- package/dist/recipes/segmentedControl.d.ts +8 -1
- package/dist/recipes/segmentedControl.js +7 -1
- package/dist/recipes/segmentedControl.js.map +1 -1
- package/dist/recipes/select.d.ts +57 -1
- package/dist/recipes/select.js +51 -1
- package/dist/recipes/select.js.map +1 -1
- package/dist/recipes/separator.d.ts +13 -2
- package/dist/recipes/separator.js +8 -2
- package/dist/recipes/separator.js.map +1 -1
- package/dist/recipes/sidebar.d.ts +128 -2
- package/dist/recipes/sidebar.js +125 -2
- package/dist/recipes/sidebar.js.map +1 -1
- package/dist/recipes/sky.d.ts +31 -1
- package/dist/recipes/sky.js +30 -1
- package/dist/recipes/sky.js.map +1 -1
- package/dist/recipes/slider.d.ts +15 -1
- package/dist/recipes/slider.js +14 -1
- package/dist/recipes/slider.js.map +1 -1
- package/dist/recipes/stat.d.ts +71 -1
- package/dist/recipes/stat.js +73 -3
- package/dist/recipes/stat.js.map +1 -1
- package/dist/recipes/switch.d.ts +10 -1
- package/dist/recipes/switch.js +9 -3
- package/dist/recipes/switch.js.map +1 -1
- package/dist/recipes/table.d.ts +63 -3
- package/dist/recipes/table.js +56 -2
- package/dist/recipes/table.js.map +1 -1
- package/dist/recipes/tail.d.ts +40 -5
- package/dist/recipes/tail.js +37 -5
- package/dist/recipes/tail.js.map +1 -1
- package/dist/recipes/text.d.ts +16 -3
- package/dist/recipes/text.js +8 -3
- package/dist/recipes/text.js.map +1 -1
- package/dist/recipes/textarea.d.ts +46 -1
- package/dist/recipes/textarea.js +41 -1
- package/dist/recipes/textarea.js.map +1 -1
- package/dist/recipes/tile.d.ts +23 -1
- package/dist/recipes/tile.js +19 -1
- package/dist/recipes/tile.js.map +1 -1
- package/dist/recipes/tooltip.d.ts +8 -1
- package/dist/recipes/tooltip.js +7 -1
- package/dist/recipes/tooltip.js.map +1 -1
- package/dist/recipes/topBar.d.ts +43 -1
- package/dist/recipes/topBar.js +44 -1
- package/dist/recipes/topBar.js.map +1 -1
- package/dist/recipes/trail.d.ts +55 -5
- package/dist/recipes/trail.js +47 -5
- package/dist/recipes/trail.js.map +1 -1
- package/dist/recipes/userMenu.d.ts +23 -1
- package/dist/recipes/userMenu.js +24 -1
- package/dist/recipes/userMenu.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { anatomy } from "../anatomy.js";
|
|
1
2
|
import { toneBlend } from "../tone.js";
|
|
2
3
|
import { cva } from "class-variance-authority";
|
|
3
4
|
//#region src/recipes/heartbeat.ts
|
|
@@ -6,11 +7,10 @@ const heartbeatStates = [
|
|
|
6
7
|
"late",
|
|
7
8
|
"silent"
|
|
8
9
|
];
|
|
9
|
-
const defaultHeartbeatState = "beating";
|
|
10
10
|
const heartbeatRecipe = cva(["flex flex-col gap-4 rounded-tf-block bg-tf-sunken p-6", "font-tf-body text-tf-fg"]);
|
|
11
11
|
const heartbeatRowRecipe = cva("flex items-center gap-3");
|
|
12
12
|
const heartbeatMarkRecipe = cva("relative flex size-tf-mark-dot flex-none", {
|
|
13
|
-
defaultVariants: { state:
|
|
13
|
+
defaultVariants: { state: "beating" },
|
|
14
14
|
variants: { state: {
|
|
15
15
|
beating: toneBlend.success,
|
|
16
16
|
late: toneBlend.warning,
|
|
@@ -18,7 +18,7 @@ const heartbeatMarkRecipe = cva("relative flex size-tf-mark-dot flex-none", {
|
|
|
18
18
|
} }
|
|
19
19
|
});
|
|
20
20
|
const heartbeatRingRecipe = cva(["absolute inset-0 rounded-tf-pill bg-tf-blend"], {
|
|
21
|
-
defaultVariants: { state:
|
|
21
|
+
defaultVariants: { state: "beating" },
|
|
22
22
|
variants: { state: {
|
|
23
23
|
beating: "tf-pinging",
|
|
24
24
|
late: "tf-pinging",
|
|
@@ -37,7 +37,54 @@ const heartbeatBeatRecipe = cva("flex-1 rounded-tf-inline", {
|
|
|
37
37
|
true: "bg-tf-warning-hi"
|
|
38
38
|
} }
|
|
39
39
|
});
|
|
40
|
+
const heartbeatAnatomy = anatomy({
|
|
41
|
+
beats: {
|
|
42
|
+
part: "beats",
|
|
43
|
+
recipe: heartbeatBeatsRecipe,
|
|
44
|
+
required: false
|
|
45
|
+
},
|
|
46
|
+
dot: {
|
|
47
|
+
part: "dot",
|
|
48
|
+
recipe: heartbeatDotRecipe,
|
|
49
|
+
required: true
|
|
50
|
+
},
|
|
51
|
+
hint: {
|
|
52
|
+
part: "hint",
|
|
53
|
+
recipe: heartbeatHintRecipe,
|
|
54
|
+
required: false
|
|
55
|
+
},
|
|
56
|
+
label: {
|
|
57
|
+
part: "label",
|
|
58
|
+
recipe: heartbeatLabelRecipe,
|
|
59
|
+
required: true
|
|
60
|
+
},
|
|
61
|
+
mark: {
|
|
62
|
+
part: "mark",
|
|
63
|
+
recipe: heartbeatMarkRecipe,
|
|
64
|
+
required: true
|
|
65
|
+
},
|
|
66
|
+
ring: {
|
|
67
|
+
part: "ring",
|
|
68
|
+
recipe: heartbeatRingRecipe,
|
|
69
|
+
required: true
|
|
70
|
+
},
|
|
71
|
+
root: {
|
|
72
|
+
part: "heartbeat",
|
|
73
|
+
recipe: heartbeatRecipe,
|
|
74
|
+
required: true
|
|
75
|
+
},
|
|
76
|
+
row: {
|
|
77
|
+
part: "row",
|
|
78
|
+
recipe: heartbeatRowRecipe,
|
|
79
|
+
required: true
|
|
80
|
+
},
|
|
81
|
+
text: {
|
|
82
|
+
part: "text",
|
|
83
|
+
recipe: heartbeatTextRecipe,
|
|
84
|
+
required: true
|
|
85
|
+
}
|
|
86
|
+
});
|
|
40
87
|
//#endregion
|
|
41
|
-
export {
|
|
88
|
+
export { heartbeatAnatomy, heartbeatBeatRecipe, heartbeatBeatsRecipe, heartbeatDotRecipe, heartbeatHintRecipe, heartbeatLabelRecipe, heartbeatMarkRecipe, heartbeatRecipe, heartbeatRingRecipe, heartbeatRowRecipe, heartbeatStates, heartbeatTextRecipe };
|
|
42
89
|
|
|
43
90
|
//# sourceMappingURL=heartbeat.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"heartbeat.js","names":[],"sources":["../../src/recipes/heartbeat.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { toneBlend } from '#tone'\n\nconst heartbeatStates = ['beating', 'late', 'silent'] as const\n\ntype HeartbeatState = (typeof heartbeatStates)[number]\n\nconst
|
|
1
|
+
{"version":3,"file":"heartbeat.js","names":[],"sources":["../../src/recipes/heartbeat.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { toneBlend } from '#tone'\n\nconst heartbeatStates = ['beating', 'late', 'silent'] as const\n\ntype HeartbeatState = (typeof heartbeatStates)[number]\n\nconst heartbeatRecipe = cva([\n 'flex flex-col gap-4 rounded-tf-block bg-tf-sunken p-6',\n 'font-tf-body text-tf-fg',\n])\n\nconst heartbeatRowRecipe = cva('flex items-center gap-3')\n\nconst heartbeatMarkRecipe = cva('relative flex size-tf-mark-dot flex-none', {\n defaultVariants: { state: 'beating' },\n variants: {\n state: {\n beating: toneBlend.success,\n late: toneBlend.warning,\n silent: toneBlend.danger,\n },\n },\n})\n\nconst heartbeatRingRecipe = cva(['absolute inset-0 rounded-tf-pill bg-tf-blend'], {\n defaultVariants: { state: 'beating' },\n variants: {\n state: {\n beating: 'tf-pinging',\n late: 'tf-pinging',\n silent: '',\n } satisfies Record<HeartbeatState, string>,\n },\n})\n\nconst heartbeatDotRecipe = cva(['relative size-tf-mark-dot rounded-tf-pill bg-tf-blend'])\n\nconst heartbeatTextRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst heartbeatLabelRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst heartbeatHintRecipe = cva('text-tf-caption-sm text-tf-muted')\n\nconst heartbeatBeatsRecipe = cva('flex h-9 items-end gap-0.5')\n\nconst heartbeatBeatRecipe = cva('flex-1 rounded-tf-inline', {\n defaultVariants: { flagged: false },\n variants: {\n flagged: {\n false: 'bg-tf-accent-surface',\n true: 'bg-tf-warning-hi',\n },\n },\n})\n\nconst heartbeatAnatomy = anatomy({\n beats: { part: 'beats', recipe: heartbeatBeatsRecipe, required: false },\n dot: { part: 'dot', recipe: heartbeatDotRecipe, required: true },\n hint: { part: 'hint', recipe: heartbeatHintRecipe, required: false },\n label: { part: 'label', recipe: heartbeatLabelRecipe, required: true },\n mark: { part: 'mark', recipe: heartbeatMarkRecipe, required: true },\n ring: { part: 'ring', recipe: heartbeatRingRecipe, required: true },\n root: { part: 'heartbeat', recipe: heartbeatRecipe, required: true },\n row: { part: 'row', recipe: heartbeatRowRecipe, required: true },\n text: { part: 'text', recipe: heartbeatTextRecipe, required: true },\n})\n\nexport {\n type HeartbeatState,\n heartbeatAnatomy,\n heartbeatBeatRecipe,\n heartbeatBeatsRecipe,\n heartbeatDotRecipe,\n heartbeatHintRecipe,\n heartbeatLabelRecipe,\n heartbeatMarkRecipe,\n heartbeatRecipe,\n heartbeatRingRecipe,\n heartbeatRowRecipe,\n heartbeatStates,\n heartbeatTextRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,kBAAkB;CAAC;CAAW;CAAQ;AAAQ;AAIpD,MAAM,kBAAkB,IAAI,CAC1B,yDACA,yBACF,CAAC;AAED,MAAM,qBAAqB,IAAI,yBAAyB;AAExD,MAAM,sBAAsB,IAAI,4CAA4C;CAC1E,iBAAiB,EAAE,OAAO,UAAU;CACpC,UAAU,EACR,OAAO;EACL,SAAS,UAAU;EACnB,MAAM,UAAU;EAChB,QAAQ,UAAU;CACpB,EACF;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,CAAC,8CAA8C,GAAG;CAChF,iBAAiB,EAAE,OAAO,UAAU;CACpC,UAAU,EACR,OAAO;EACL,SAAS;EACT,MAAM;EACN,QAAQ;CACV,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAAC,uDAAuD,CAAC;AAExF,MAAM,sBAAsB,IAAI,oCAAoC;AAEpE,MAAM,uBAAuB,IAAI,wCAAwC;AAEzE,MAAM,sBAAsB,IAAI,kCAAkC;AAElE,MAAM,uBAAuB,IAAI,4BAA4B;AAE7D,MAAM,sBAAsB,IAAI,4BAA4B;CAC1D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EACP,OAAO;EACP,MAAM;CACR,EACF;AACF,CAAC;AAED,MAAM,mBAAmB,QAAQ;CAC/B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAsB,UAAU;CAAM;CACtE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAoB,UAAU;CAAK;CAC/D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAqB,UAAU;CAAM;CACnE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAsB,UAAU;CAAK;CACrE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAqB,UAAU;CAAK;CAClE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAqB,UAAU;CAAK;CAClE,MAAM;EAAE,MAAM;EAAa,QAAQ;EAAiB,UAAU;CAAK;CACnE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAoB,UAAU;CAAK;CAC/D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAqB,UAAU;CAAK;AACpE,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//#region src/recipes/ink.d.ts
|
|
2
|
+
declare const inkAnatomy: {
|
|
3
|
+
readonly root: {
|
|
4
|
+
readonly part: "ink";
|
|
5
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
6
|
+
readonly required: true;
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
//#endregion
|
|
10
|
+
export { inkAnatomy };
|
|
11
|
+
//# sourceMappingURL=ink.d.ts.map
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { anatomy } from "../anatomy.js";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
//#region src/recipes/ink.ts
|
|
4
|
+
const inkRecipe = cva("tf-ink-well");
|
|
5
|
+
const inkAnatomy = anatomy({ root: {
|
|
6
|
+
part: "ink",
|
|
7
|
+
recipe: inkRecipe,
|
|
8
|
+
required: true
|
|
9
|
+
} });
|
|
10
|
+
//#endregion
|
|
11
|
+
export { inkAnatomy };
|
|
12
|
+
|
|
13
|
+
//# sourceMappingURL=ink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ink.js","names":[],"sources":["../../src/recipes/ink.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst inkRecipe = cva('tf-ink-well')\n\nconst inkAnatomy = anatomy({\n root: { part: 'ink', recipe: inkRecipe, required: true },\n})\n\nexport { inkAnatomy }\n"],"mappings":";;;AAIA,MAAM,YAAY,IAAI,aAAa;AAEnC,MAAM,aAAa,QAAQ,EACzB,MAAM;CAAE,MAAM;CAAO,QAAQ;CAAW,UAAU;AAAK,EACzD,CAAC"}
|
package/dist/recipes/input.d.ts
CHANGED
|
@@ -12,6 +12,60 @@ declare const inputRecipe: (props?: ({
|
|
|
12
12
|
size?: "md" | "lg" | null | undefined;
|
|
13
13
|
trailing?: boolean | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
|
+
declare const inputAnatomy: {
|
|
16
|
+
readonly cloud: {
|
|
17
|
+
readonly part: "cloud";
|
|
18
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
19
|
+
readonly required: true;
|
|
20
|
+
};
|
|
21
|
+
readonly foot: {
|
|
22
|
+
readonly part: "foot";
|
|
23
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
24
|
+
readonly required: true;
|
|
25
|
+
};
|
|
26
|
+
readonly leading: {
|
|
27
|
+
readonly part: "leading";
|
|
28
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
29
|
+
readonly required: false;
|
|
30
|
+
};
|
|
31
|
+
readonly nebula: {
|
|
32
|
+
readonly part: "nebula";
|
|
33
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
34
|
+
readonly required: true;
|
|
35
|
+
};
|
|
36
|
+
readonly root: {
|
|
37
|
+
readonly part: "input";
|
|
38
|
+
readonly recipe: (props?: ({
|
|
39
|
+
fullWidth?: boolean | null | undefined;
|
|
40
|
+
message?: boolean | null | undefined;
|
|
41
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
42
|
+
readonly required: true;
|
|
43
|
+
};
|
|
44
|
+
readonly row: {
|
|
45
|
+
readonly part: "row";
|
|
46
|
+
readonly recipe: (props?: ({
|
|
47
|
+
invalid?: boolean | null | undefined;
|
|
48
|
+
loading?: boolean | null | undefined;
|
|
49
|
+
size?: "md" | "lg" | null | undefined;
|
|
50
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
51
|
+
readonly required: true;
|
|
52
|
+
};
|
|
53
|
+
readonly spinner: {
|
|
54
|
+
readonly part: "spinner";
|
|
55
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
56
|
+
readonly required: false;
|
|
57
|
+
};
|
|
58
|
+
readonly trailing: {
|
|
59
|
+
readonly part: "trailing";
|
|
60
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
61
|
+
readonly required: false;
|
|
62
|
+
};
|
|
63
|
+
readonly unit: {
|
|
64
|
+
readonly part: "unit";
|
|
65
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
66
|
+
readonly required: false;
|
|
67
|
+
};
|
|
68
|
+
};
|
|
15
69
|
//#endregion
|
|
16
|
-
export { type InputType, TRAILING_INSET, inputRecipe, inputTypes, labelRoom };
|
|
70
|
+
export { type InputType, TRAILING_INSET, inputAnatomy, inputRecipe, inputTypes, labelRoom };
|
|
17
71
|
//# sourceMappingURL=input.d.ts.map
|
package/dist/recipes/input.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import "../
|
|
1
|
+
import { anatomy } from "../anatomy.js";
|
|
2
2
|
import { controlFocus, controlInert } from "../parts/control.js";
|
|
3
|
+
import { nebulaCloudLowRecipe, nebulaVeilRecipe } from "./nebula.js";
|
|
4
|
+
import "../control.js";
|
|
5
|
+
import { fieldFootRecipe, fieldRecipe, fieldRowRecipe, fieldUnitRecipe, leadingRecipe, trailingRecipe } from "./field.js";
|
|
3
6
|
import { cva } from "class-variance-authority";
|
|
4
7
|
//#region src/recipes/input.ts
|
|
5
8
|
const inputTypes = [
|
|
@@ -84,7 +87,54 @@ const inputRecipe = cva([
|
|
|
84
87
|
}
|
|
85
88
|
}
|
|
86
89
|
});
|
|
90
|
+
const inputAnatomy = anatomy({
|
|
91
|
+
cloud: {
|
|
92
|
+
part: "cloud",
|
|
93
|
+
recipe: nebulaCloudLowRecipe,
|
|
94
|
+
required: true
|
|
95
|
+
},
|
|
96
|
+
foot: {
|
|
97
|
+
part: "foot",
|
|
98
|
+
recipe: fieldFootRecipe,
|
|
99
|
+
required: true
|
|
100
|
+
},
|
|
101
|
+
leading: {
|
|
102
|
+
part: "leading",
|
|
103
|
+
recipe: leadingRecipe,
|
|
104
|
+
required: false
|
|
105
|
+
},
|
|
106
|
+
nebula: {
|
|
107
|
+
part: "nebula",
|
|
108
|
+
recipe: nebulaVeilRecipe,
|
|
109
|
+
required: true
|
|
110
|
+
},
|
|
111
|
+
root: {
|
|
112
|
+
part: "input",
|
|
113
|
+
recipe: fieldRecipe,
|
|
114
|
+
required: true
|
|
115
|
+
},
|
|
116
|
+
row: {
|
|
117
|
+
part: "row",
|
|
118
|
+
recipe: fieldRowRecipe,
|
|
119
|
+
required: true
|
|
120
|
+
},
|
|
121
|
+
spinner: {
|
|
122
|
+
part: "spinner",
|
|
123
|
+
recipe: trailingRecipe,
|
|
124
|
+
required: false
|
|
125
|
+
},
|
|
126
|
+
trailing: {
|
|
127
|
+
part: "trailing",
|
|
128
|
+
recipe: trailingRecipe,
|
|
129
|
+
required: false
|
|
130
|
+
},
|
|
131
|
+
unit: {
|
|
132
|
+
part: "unit",
|
|
133
|
+
recipe: fieldUnitRecipe,
|
|
134
|
+
required: false
|
|
135
|
+
}
|
|
136
|
+
});
|
|
87
137
|
//#endregion
|
|
88
|
-
export { TRAILING_INSET, inputRecipe, inputTypes, labelRoom };
|
|
138
|
+
export { TRAILING_INSET, inputAnatomy, inputRecipe, inputTypes, labelRoom };
|
|
89
139
|
|
|
90
140
|
//# sourceMappingURL=input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","names":[],"sources":["../../src/recipes/input.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport { controlFocus, controlInert } from '#parts/control'\n\nconst inputTypes = ['text', 'email', 'tel', 'url', 'search', 'password'] as const\n\ntype InputType = (typeof inputTypes)[number]\n\nconst INPUT_INSET = 'px-4'\nconst LEADING_INSET = 'pl-13'\nconst TRAILING_INSET = 'pr-13'\n\nconst labelRoom = {\n lg: 'pt-6 pb-2',\n md: 'pt-5 pb-1',\n} satisfies Record<FieldSize, string>\n\nconst inputSurface = [\n 'size-full bg-transparent text-tf-fg tf-writes',\n 'placeholder:text-tf-muted placeholder:opacity-0',\n 'data-readonly:text-tf-muted',\n 'disabled:cursor-not-allowed',\n]\n\nconst inputRecipe = cva([...inputSurface, ...controlFocus, ...controlInert], {\n compoundVariants: [\n { class: labelRoom.lg, labelled: true, size: 'lg' },\n { class: labelRoom.md, labelled: true, size: 'md' },\n { class: INPUT_INSET, leading: false, trailing: false },\n { class: `${LEADING_INSET} pr-3`, leading: true, trailing: false },\n { class: `${TRAILING_INSET} pl-4`, leading: false, trailing: true },\n { class: `${LEADING_INSET} ${TRAILING_INSET}`, leading: true, trailing: true },\n ],\n defaultVariants: {\n labelled: true,\n leading: false,\n size: defaultFieldSize,\n trailing: false,\n },\n variants: {\n labelled: { false: 'placeholder:opacity-100', true: '' },\n leading: { false: '', true: '' },\n size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n trailing: { false: '', true: '' },\n },\n})\n\nexport { type InputType, inputRecipe, inputTypes, labelRoom, TRAILING_INSET }\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.js","names":[],"sources":["../../src/recipes/input.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport { controlFocus, controlInert } from '#parts/control'\n\nimport {\n fieldFootRecipe,\n fieldRecipe,\n fieldRowRecipe,\n fieldUnitRecipe,\n leadingRecipe,\n trailingRecipe,\n} from './field'\nimport { nebulaCloudLowRecipe, nebulaVeilRecipe } from './nebula'\n\nconst inputTypes = ['text', 'email', 'tel', 'url', 'search', 'password'] as const\n\ntype InputType = (typeof inputTypes)[number]\n\nconst INPUT_INSET = 'px-4'\nconst LEADING_INSET = 'pl-13'\nconst TRAILING_INSET = 'pr-13'\n\nconst labelRoom = {\n lg: 'pt-6 pb-2',\n md: 'pt-5 pb-1',\n} satisfies Record<FieldSize, string>\n\nconst inputSurface = [\n 'size-full bg-transparent text-tf-fg tf-writes',\n 'placeholder:text-tf-muted placeholder:opacity-0',\n 'data-readonly:text-tf-muted',\n 'disabled:cursor-not-allowed',\n]\n\nconst inputRecipe = cva([...inputSurface, ...controlFocus, ...controlInert], {\n compoundVariants: [\n { class: labelRoom.lg, labelled: true, size: 'lg' },\n { class: labelRoom.md, labelled: true, size: 'md' },\n { class: INPUT_INSET, leading: false, trailing: false },\n { class: `${LEADING_INSET} pr-3`, leading: true, trailing: false },\n { class: `${TRAILING_INSET} pl-4`, leading: false, trailing: true },\n { class: `${LEADING_INSET} ${TRAILING_INSET}`, leading: true, trailing: true },\n ],\n defaultVariants: {\n labelled: true,\n leading: false,\n size: defaultFieldSize,\n trailing: false,\n },\n variants: {\n labelled: { false: 'placeholder:opacity-100', true: '' },\n leading: { false: '', true: '' },\n size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n trailing: { false: '', true: '' },\n },\n})\n\nconst inputAnatomy = anatomy({\n cloud: { part: 'cloud', recipe: nebulaCloudLowRecipe, required: true },\n foot: { part: 'foot', recipe: fieldFootRecipe, required: true },\n leading: { part: 'leading', recipe: leadingRecipe, required: false },\n nebula: { part: 'nebula', recipe: nebulaVeilRecipe, required: true },\n root: { part: 'input', recipe: fieldRecipe, required: true },\n row: { part: 'row', recipe: fieldRowRecipe, required: true },\n spinner: { part: 'spinner', recipe: trailingRecipe, required: false },\n trailing: { part: 'trailing', recipe: trailingRecipe, required: false },\n unit: { part: 'unit', recipe: fieldUnitRecipe, required: false },\n})\n\nexport { type InputType, inputAnatomy, inputRecipe, inputTypes, labelRoom, TRAILING_INSET }\n"],"mappings":";;;;;;;AAiBA,MAAM,aAAa;CAAC;CAAQ;CAAS;CAAO;CAAO;CAAU;AAAU;AAIvE,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AAEvB,MAAM,YAAY;CAChB,IAAI;CACJ,IAAI;AACN;AASA,MAAM,cAAc,IAAI;CAAC,GAAG;EAN1B;EACA;EACA;EACA;CAGqC;CAAG,GAAG;CAAc,GAAG;AAAY,GAAG;CAC3E,kBAAkB;EAChB;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO;GAAa,SAAS;GAAO,UAAU;EAAM;EACtD;GAAE,OAAO,GAAG,cAAc;GAAQ,SAAS;GAAM,UAAU;EAAM;EACjE;GAAE,OAAO,GAAG,eAAe;GAAQ,SAAS;GAAO,UAAU;EAAK;EAClE;GAAE,OAAO,GAAG,cAAc,GAAG;GAAkB,SAAS;GAAM,UAAU;EAAK;CAC/E;CACA,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,MAAA;EACA,UAAU;CACZ;CACA,UAAU;EACR,UAAU;GAAE,OAAO;GAA2B,MAAM;EAAG;EACvD,SAAS;GAAE,OAAO;GAAI,MAAM;EAAG;EAC/B,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;EACvB,UAAU;GAAE,OAAO;GAAI,MAAM;EAAG;CAClC;AACF,CAAC;AAED,MAAM,eAAe,QAAQ;CAC3B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAsB,UAAU;CAAK;CACrE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAK;CAC9D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAe,UAAU;CAAM;CACnE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAK;CACnE,MAAM;EAAE,MAAM;EAAS,QAAQ;EAAa,UAAU;CAAK;CAC3D,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAgB,UAAU;CAAK;CAC3D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAgB,UAAU;CAAM;CACpE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAgB,UAAU;CAAM;CACtE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAM;AACjE,CAAC"}
|
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
//#region src/recipes/listItem.d.ts
|
|
2
2
|
declare const listItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
3
3
|
declare const listItemStackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
4
|
+
declare const listItemAnatomy: {
|
|
5
|
+
readonly root: {
|
|
6
|
+
readonly part: "list-item";
|
|
7
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
8
|
+
readonly required: true;
|
|
9
|
+
};
|
|
10
|
+
readonly stack: {
|
|
11
|
+
readonly part: "stack";
|
|
12
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
13
|
+
readonly required: true;
|
|
14
|
+
};
|
|
15
|
+
readonly trailing: {
|
|
16
|
+
readonly part: "trailing";
|
|
17
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
18
|
+
readonly required: false;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
4
21
|
//#endregion
|
|
5
|
-
export { listItemRecipe, listItemStackRecipe };
|
|
22
|
+
export { listItemAnatomy, listItemRecipe, listItemStackRecipe };
|
|
6
23
|
//# sourceMappingURL=listItem.d.ts.map
|
package/dist/recipes/listItem.js
CHANGED
|
@@ -1,8 +1,27 @@
|
|
|
1
|
+
import { anatomy } from "../anatomy.js";
|
|
1
2
|
import { cva } from "class-variance-authority";
|
|
2
3
|
//#region src/recipes/listItem.ts
|
|
3
4
|
const listItemRecipe = cva("flex min-w-0 items-center gap-4");
|
|
4
5
|
const listItemStackRecipe = cva("flex min-w-0 flex-1 flex-col gap-0");
|
|
6
|
+
const listItemTrailingRecipe = cva("flex-none");
|
|
7
|
+
const listItemAnatomy = anatomy({
|
|
8
|
+
root: {
|
|
9
|
+
part: "list-item",
|
|
10
|
+
recipe: listItemRecipe,
|
|
11
|
+
required: true
|
|
12
|
+
},
|
|
13
|
+
stack: {
|
|
14
|
+
part: "stack",
|
|
15
|
+
recipe: listItemStackRecipe,
|
|
16
|
+
required: true
|
|
17
|
+
},
|
|
18
|
+
trailing: {
|
|
19
|
+
part: "trailing",
|
|
20
|
+
recipe: listItemTrailingRecipe,
|
|
21
|
+
required: false
|
|
22
|
+
}
|
|
23
|
+
});
|
|
5
24
|
//#endregion
|
|
6
|
-
export { listItemRecipe, listItemStackRecipe };
|
|
25
|
+
export { listItemAnatomy, listItemRecipe, listItemStackRecipe };
|
|
7
26
|
|
|
8
27
|
//# sourceMappingURL=listItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listItem.js","names":[],"sources":["../../src/recipes/listItem.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst listItemRecipe = cva('flex min-w-0 items-center gap-4')\n\nconst listItemStackRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nexport { listItemRecipe, listItemStackRecipe }\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"listItem.js","names":[],"sources":["../../src/recipes/listItem.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst listItemRecipe = cva('flex min-w-0 items-center gap-4')\n\nconst listItemStackRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst listItemTrailingRecipe = cva('flex-none')\n\nconst listItemAnatomy = anatomy({\n root: { part: 'list-item', recipe: listItemRecipe, required: true },\n stack: { part: 'stack', recipe: listItemStackRecipe, required: true },\n trailing: { part: 'trailing', recipe: listItemTrailingRecipe, required: false },\n})\n\nexport { listItemAnatomy, listItemRecipe, listItemStackRecipe }\n"],"mappings":";;;AAIA,MAAM,iBAAiB,IAAI,iCAAiC;AAE5D,MAAM,sBAAsB,IAAI,oCAAoC;AAEpE,MAAM,yBAAyB,IAAI,WAAW;AAE9C,MAAM,kBAAkB,QAAQ;CAC9B,MAAM;EAAE,MAAM;EAAa,QAAQ;EAAgB,UAAU;CAAK;CAClE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAqB,UAAU;CAAK;CACpE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAwB,UAAU;CAAM;AAChF,CAAC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
//#region src/recipes/listbox.d.ts
|
|
2
|
-
type ListboxMark = 'lit' | 'chosen';
|
|
3
2
|
declare const listboxRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
4
3
|
declare const listboxLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
5
4
|
declare const listboxItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
@@ -7,6 +6,27 @@ declare const listboxMarkRecipe: (props?: ({
|
|
|
7
6
|
mark?: "lit" | "chosen" | null | undefined;
|
|
8
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
8
|
declare const listboxEmptyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
9
|
+
declare const listboxAnatomy: {
|
|
10
|
+
readonly held: {
|
|
11
|
+
readonly part: "held";
|
|
12
|
+
readonly recipe: (props?: ({
|
|
13
|
+
mark?: "lit" | "chosen" | null | undefined;
|
|
14
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
|
+
readonly required: true;
|
|
16
|
+
};
|
|
17
|
+
readonly mark: {
|
|
18
|
+
readonly part: "mark";
|
|
19
|
+
readonly recipe: (props?: ({
|
|
20
|
+
mark?: "lit" | "chosen" | null | undefined;
|
|
21
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
22
|
+
readonly required: true;
|
|
23
|
+
};
|
|
24
|
+
readonly root: {
|
|
25
|
+
readonly part: "listbox";
|
|
26
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
27
|
+
readonly required: true;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
10
30
|
//#endregion
|
|
11
|
-
export {
|
|
31
|
+
export { listboxAnatomy, listboxEmptyRecipe, listboxItemRecipe, listboxLabelRecipe, listboxMarkRecipe, listboxRecipe };
|
|
12
32
|
//# sourceMappingURL=listbox.d.ts.map
|
package/dist/recipes/listbox.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { anatomy } from "../anatomy.js";
|
|
1
2
|
import { controlInert } from "../parts/control.js";
|
|
2
3
|
import { travelMarkBase } from "../parts/travel.js";
|
|
3
4
|
import { cva } from "class-variance-authority";
|
|
@@ -23,7 +24,24 @@ const listboxMarkRecipe = cva([...travelMarkBase, "inset-x-0 h-(--tf-travel-heig
|
|
|
23
24
|
} }
|
|
24
25
|
});
|
|
25
26
|
const listboxEmptyRecipe = cva(["flex h-tf-control-lg flex-none items-center justify-center px-4", "text-tf-caption font-medium text-tf-muted"]);
|
|
27
|
+
const listboxAnatomy = anatomy({
|
|
28
|
+
held: {
|
|
29
|
+
part: "held",
|
|
30
|
+
recipe: listboxMarkRecipe,
|
|
31
|
+
required: true
|
|
32
|
+
},
|
|
33
|
+
mark: {
|
|
34
|
+
part: "mark",
|
|
35
|
+
recipe: listboxMarkRecipe,
|
|
36
|
+
required: true
|
|
37
|
+
},
|
|
38
|
+
root: {
|
|
39
|
+
part: "listbox",
|
|
40
|
+
recipe: listboxRecipe,
|
|
41
|
+
required: true
|
|
42
|
+
}
|
|
43
|
+
});
|
|
26
44
|
//#endregion
|
|
27
|
-
export { listboxEmptyRecipe, listboxItemRecipe, listboxLabelRecipe, listboxMarkRecipe, listboxRecipe };
|
|
45
|
+
export { listboxAnatomy, listboxEmptyRecipe, listboxItemRecipe, listboxLabelRecipe, listboxMarkRecipe, listboxRecipe };
|
|
28
46
|
|
|
29
47
|
//# sourceMappingURL=listbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listbox.js","names":[],"sources":["../../src/recipes/listbox.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert } from '#parts/control'\nimport { travelMarkBase } from '#parts/travel'\n\ntype ListboxMark = 'lit' | 'chosen'\n\nconst RAIL = [\n 'before:absolute before:inset-y-3 before:left-0 before:w-0.5',\n 'before:rounded-tf-pill before:bg-tf-accent-hi',\n \"before:content-['']\",\n].join(' ')\n\nconst listboxRecipe = cva([\n 'relative isolate flex min-w-0 flex-col gap-1',\n 'font-tf-body outline-hidden',\n])\n\nconst listboxLabelRecipe = cva('sr-only')\n\nconst listboxItemRecipe = cva([\n 'relative rounded-tf-control px-4 py-3',\n 'cursor-pointer select-none tf-transition motion-reduce:transition-none',\n 'data-selected:text-tf-fg',\n ...controlInert,\n])\n\nconst listboxMarkRecipe = cva([...travelMarkBase, 'inset-x-0 h-(--tf-travel-height) tf-rails'], {\n defaultVariants: { mark: 'lit' },\n variants: {\n mark: {\n chosen: `rounded-tf-control bg-tf-accent-tint ${RAIL}`,\n lit: 'rounded-tf-control bg-tf-panel-hi',\n } satisfies Record<ListboxMark, string>,\n },\n})\n\nconst listboxEmptyRecipe = cva([\n 'flex h-tf-control-lg flex-none items-center justify-center px-4',\n 'text-tf-caption font-medium text-tf-muted',\n])\n\
|
|
1
|
+
{"version":3,"file":"listbox.js","names":[],"sources":["../../src/recipes/listbox.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlInert } from '#parts/control'\nimport { travelMarkBase } from '#parts/travel'\n\ntype ListboxMark = 'lit' | 'chosen'\n\nconst RAIL = [\n 'before:absolute before:inset-y-3 before:left-0 before:w-0.5',\n 'before:rounded-tf-pill before:bg-tf-accent-hi',\n \"before:content-['']\",\n].join(' ')\n\nconst listboxRecipe = cva([\n 'relative isolate flex min-w-0 flex-col gap-1',\n 'font-tf-body outline-hidden',\n])\n\nconst listboxLabelRecipe = cva('sr-only')\n\nconst listboxItemRecipe = cva([\n 'relative rounded-tf-control px-4 py-3',\n 'cursor-pointer select-none tf-transition motion-reduce:transition-none',\n 'data-selected:text-tf-fg',\n ...controlInert,\n])\n\nconst listboxMarkRecipe = cva([...travelMarkBase, 'inset-x-0 h-(--tf-travel-height) tf-rails'], {\n defaultVariants: { mark: 'lit' },\n variants: {\n mark: {\n chosen: `rounded-tf-control bg-tf-accent-tint ${RAIL}`,\n lit: 'rounded-tf-control bg-tf-panel-hi',\n } satisfies Record<ListboxMark, string>,\n },\n})\n\nconst listboxEmptyRecipe = cva([\n 'flex h-tf-control-lg flex-none items-center justify-center px-4',\n 'text-tf-caption font-medium text-tf-muted',\n])\n\nconst listboxAnatomy = anatomy({\n held: { part: 'held', recipe: listboxMarkRecipe, required: true },\n mark: { part: 'mark', recipe: listboxMarkRecipe, required: true },\n root: { part: 'listbox', recipe: listboxRecipe, required: true },\n})\n\nexport {\n listboxAnatomy,\n listboxEmptyRecipe,\n listboxItemRecipe,\n listboxLabelRecipe,\n listboxMarkRecipe,\n listboxRecipe,\n}\n"],"mappings":";;;;;AAQA,MAAM,OAAO;CACX;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,gBAAgB,IAAI,CACxB,gDACA,6BACF,CAAC;AAED,MAAM,qBAAqB,IAAI,SAAS;AAExC,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,oBAAoB,IAAI,CAAC,GAAG,gBAAgB,2CAA2C,GAAG;CAC9F,iBAAiB,EAAE,MAAM,MAAM;CAC/B,UAAU,EACR,MAAM;EACJ,QAAQ,wCAAwC;EAChD,KAAK;CACP,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAC7B,mEACA,2CACF,CAAC;AAED,MAAM,iBAAiB,QAAQ;CAC7B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAW,QAAQ;EAAe,UAAU;CAAK;AACjE,CAAC"}
|
|
@@ -5,7 +5,7 @@ interface MarqueeItem {
|
|
|
5
5
|
}
|
|
6
6
|
declare const marqueeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
7
7
|
declare const marqueeRuleRecipe: (props?: ({
|
|
8
|
-
edge?: "
|
|
8
|
+
edge?: "foot" | "head" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
10
|
declare const marqueeStageRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
11
11
|
declare const marqueeViewportRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
@@ -14,6 +14,30 @@ declare const marqueeItemRecipe: (props?: import("class-variance-authority/types
|
|
|
14
14
|
declare const marqueeMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
15
15
|
declare const marqueeNameRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
16
16
|
declare const marqueeSpacing = "3rem";
|
|
17
|
+
declare const marqueeAnatomy: {
|
|
18
|
+
readonly mark: {
|
|
19
|
+
readonly part: "mark";
|
|
20
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
21
|
+
readonly required: true;
|
|
22
|
+
};
|
|
23
|
+
readonly name: {
|
|
24
|
+
readonly part: "name";
|
|
25
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
26
|
+
readonly required: true;
|
|
27
|
+
};
|
|
28
|
+
readonly root: {
|
|
29
|
+
readonly part: "marquee";
|
|
30
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
31
|
+
readonly required: true;
|
|
32
|
+
};
|
|
33
|
+
readonly rule: {
|
|
34
|
+
readonly part: "rule";
|
|
35
|
+
readonly recipe: (props?: ({
|
|
36
|
+
edge?: "foot" | "head" | null | undefined;
|
|
37
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
38
|
+
readonly required: true;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
17
41
|
//#endregion
|
|
18
|
-
export { type MarqueeItem, marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
|
|
42
|
+
export { type MarqueeItem, marqueeAnatomy, marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
|
|
19
43
|
//# sourceMappingURL=marquee.d.ts.map
|
package/dist/recipes/marquee.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { anatomy } from "../anatomy.js";
|
|
1
2
|
import { ruleFading } from "../parts/rule.js";
|
|
2
3
|
import { cva } from "class-variance-authority";
|
|
3
4
|
//#region src/recipes/marquee.ts
|
|
@@ -30,7 +31,29 @@ const marqueeItemRecipe = cva([
|
|
|
30
31
|
const marqueeMarkRecipe = cva("block size-tf-icon-solo-lg bg-contain bg-center bg-no-repeat");
|
|
31
32
|
const marqueeNameRecipe = cva("font-tf-display text-tf-h4 font-bold whitespace-nowrap");
|
|
32
33
|
const marqueeSpacing = "3rem";
|
|
34
|
+
const marqueeAnatomy = anatomy({
|
|
35
|
+
mark: {
|
|
36
|
+
part: "mark",
|
|
37
|
+
recipe: marqueeMarkRecipe,
|
|
38
|
+
required: true
|
|
39
|
+
},
|
|
40
|
+
name: {
|
|
41
|
+
part: "name",
|
|
42
|
+
recipe: marqueeNameRecipe,
|
|
43
|
+
required: true
|
|
44
|
+
},
|
|
45
|
+
root: {
|
|
46
|
+
part: "marquee",
|
|
47
|
+
recipe: marqueeRecipe,
|
|
48
|
+
required: true
|
|
49
|
+
},
|
|
50
|
+
rule: {
|
|
51
|
+
part: "rule",
|
|
52
|
+
recipe: marqueeRuleRecipe,
|
|
53
|
+
required: true
|
|
54
|
+
}
|
|
55
|
+
});
|
|
33
56
|
//#endregion
|
|
34
|
-
export { marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
|
|
57
|
+
export { marqueeAnatomy, marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
|
|
35
58
|
|
|
36
59
|
//# sourceMappingURL=marquee.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marquee.js","names":[],"sources":["../../src/recipes/marquee.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { ruleFading } from '#parts/rule'\n\ninterface MarqueeItem {\n name: string\n src: string\n}\n\nconst WRAPS = 'motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center'\n\nconst marqueeRecipe = cva([\n 'relative isolate py-8',\n 'font-tf-body',\n 'tf-slows hovered:[--tf-marquee-rate:0]',\n])\n\nconst marqueeRuleRecipe = cva(`absolute inset-x-0 ${ruleFading}`, {\n defaultVariants: { edge: 'head' },\n variants: { edge: { foot: 'bottom-0', head: 'top-0' } },\n})\n\nconst marqueeStageRecipe = cva('w-full')\n\nconst marqueeViewportRecipe = cva([\n 'relative overflow-hidden',\n 'tf-faded-x motion-reduce:mask-none',\n])\n\nconst marqueeCopyRecipe = cva([\n 'tf-looping items-center',\n 'motion-reduce:gap-y-4 motion-reduce:data-clone:hidden',\n WRAPS,\n])\n\nconst marqueeItemRecipe = cva([\n 'flex flex-none items-center gap-3',\n 'cursor-default select-none',\n 'text-tf-muted hovered:text-tf-fg',\n 'tf-ink-glide tf-transition',\n])\n\nconst marqueeMarkRecipe = cva('block size-tf-icon-solo-lg bg-contain bg-center bg-no-repeat')\n\nconst marqueeNameRecipe = cva('font-tf-display text-tf-h4 font-bold whitespace-nowrap')\n\nconst marqueeSpacing = '3rem'\n\nexport {\n type MarqueeItem,\n marqueeCopyRecipe,\n marqueeItemRecipe,\n marqueeMarkRecipe,\n marqueeNameRecipe,\n marqueeRecipe,\n marqueeRuleRecipe,\n marqueeSpacing,\n marqueeStageRecipe,\n marqueeViewportRecipe,\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"marquee.js","names":[],"sources":["../../src/recipes/marquee.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { ruleFading } from '#parts/rule'\n\ninterface MarqueeItem {\n name: string\n src: string\n}\n\nconst WRAPS = 'motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center'\n\nconst marqueeRecipe = cva([\n 'relative isolate py-8',\n 'font-tf-body',\n 'tf-slows hovered:[--tf-marquee-rate:0]',\n])\n\nconst marqueeRuleRecipe = cva(`absolute inset-x-0 ${ruleFading}`, {\n defaultVariants: { edge: 'head' },\n variants: { edge: { foot: 'bottom-0', head: 'top-0' } },\n})\n\nconst marqueeStageRecipe = cva('w-full')\n\nconst marqueeViewportRecipe = cva([\n 'relative overflow-hidden',\n 'tf-faded-x motion-reduce:mask-none',\n])\n\nconst marqueeCopyRecipe = cva([\n 'tf-looping items-center',\n 'motion-reduce:gap-y-4 motion-reduce:data-clone:hidden',\n WRAPS,\n])\n\nconst marqueeItemRecipe = cva([\n 'flex flex-none items-center gap-3',\n 'cursor-default select-none',\n 'text-tf-muted hovered:text-tf-fg',\n 'tf-ink-glide tf-transition',\n])\n\nconst marqueeMarkRecipe = cva('block size-tf-icon-solo-lg bg-contain bg-center bg-no-repeat')\n\nconst marqueeNameRecipe = cva('font-tf-display text-tf-h4 font-bold whitespace-nowrap')\n\nconst marqueeSpacing = '3rem'\n\nconst marqueeAnatomy = anatomy({\n mark: { part: 'mark', recipe: marqueeMarkRecipe, required: true },\n name: { part: 'name', recipe: marqueeNameRecipe, required: true },\n root: { part: 'marquee', recipe: marqueeRecipe, required: true },\n rule: { part: 'rule', recipe: marqueeRuleRecipe, required: true },\n})\n\nexport {\n type MarqueeItem,\n marqueeAnatomy,\n marqueeCopyRecipe,\n marqueeItemRecipe,\n marqueeMarkRecipe,\n marqueeNameRecipe,\n marqueeRecipe,\n marqueeRuleRecipe,\n marqueeSpacing,\n marqueeStageRecipe,\n marqueeViewportRecipe,\n}\n"],"mappings":";;;;AAUA,MAAM,QAAQ;AAEd,MAAM,gBAAgB,IAAI;CACxB;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,sBAAsB,cAAc;CAChE,iBAAiB,EAAE,MAAM,OAAO;CAChC,UAAU,EAAE,MAAM;EAAE,MAAM;EAAY,MAAM;CAAQ,EAAE;AACxD,CAAC;AAED,MAAM,qBAAqB,IAAI,QAAQ;AAEvC,MAAM,wBAAwB,IAAI,CAChC,4BACA,oCACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,8DAA8D;AAE5F,MAAM,oBAAoB,IAAI,wDAAwD;AAEtF,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB,QAAQ;CAC7B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAW,QAAQ;EAAe,UAAU;CAAK;CAC/D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;AAClE,CAAC"}
|
package/dist/recipes/menu.d.ts
CHANGED
|
@@ -21,6 +21,38 @@ declare const menuShortcutRecipe: (props?: import("class-variance-authority/type
|
|
|
21
21
|
declare const menuSeparatorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
22
22
|
declare const menuArrowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
23
23
|
declare const menuArrowTipRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
24
|
+
declare const menuAnatomy: {
|
|
25
|
+
readonly item: {
|
|
26
|
+
readonly part: "item";
|
|
27
|
+
readonly recipe: (props?: ({
|
|
28
|
+
tone?: "danger" | "neutral" | null | undefined;
|
|
29
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
30
|
+
readonly required: false;
|
|
31
|
+
};
|
|
32
|
+
readonly list: {
|
|
33
|
+
readonly part: "list";
|
|
34
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
35
|
+
readonly required: true;
|
|
36
|
+
};
|
|
37
|
+
readonly mark: {
|
|
38
|
+
readonly part: "mark";
|
|
39
|
+
readonly recipe: (props?: ({
|
|
40
|
+
tone?: "danger" | "neutral" | "chosen" | null | undefined;
|
|
41
|
+
within?: "surface" | "list" | null | undefined;
|
|
42
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
43
|
+
readonly required: false;
|
|
44
|
+
};
|
|
45
|
+
readonly root: {
|
|
46
|
+
readonly part: "menu";
|
|
47
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
48
|
+
readonly required: false;
|
|
49
|
+
};
|
|
50
|
+
readonly shortcut: {
|
|
51
|
+
readonly part: "shortcut";
|
|
52
|
+
readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
53
|
+
readonly required: false;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
24
56
|
//#endregion
|
|
25
|
-
export { type MenuPlacement, type MenuTone, defaultMenuPlacement, defaultMenuTone, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
|
|
57
|
+
export { type MenuPlacement, type MenuTone, defaultMenuPlacement, defaultMenuTone, menuAnatomy, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
|
|
26
58
|
//# sourceMappingURL=menu.d.ts.map
|
package/dist/recipes/menu.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { anatomy } from "../anatomy.js";
|
|
1
2
|
import { controlInert, controlPress, hitArea } from "../parts/control.js";
|
|
2
3
|
import { overlayMotion } from "./motion.js";
|
|
3
4
|
import { eyebrowQuiet } from "../parts/eyebrow.js";
|
|
@@ -80,7 +81,34 @@ const menuShortcutRecipe = cva("flex-none text-tf-caption-sm text-tf-muted tabul
|
|
|
80
81
|
const menuSeparatorRecipe = cva("my-2 flex-none border-0");
|
|
81
82
|
const menuArrowRecipe = cva(["[--arrow-size:0.5rem]", "[--arrow-background:var(--tf-glass-flat)]"]);
|
|
82
83
|
const menuArrowTipRecipe = cva("border-t border-l border-tf-line");
|
|
84
|
+
const menuAnatomy = anatomy({
|
|
85
|
+
item: {
|
|
86
|
+
part: "item",
|
|
87
|
+
recipe: menuItemRecipe,
|
|
88
|
+
required: false
|
|
89
|
+
},
|
|
90
|
+
list: {
|
|
91
|
+
part: "list",
|
|
92
|
+
recipe: menuListRecipe,
|
|
93
|
+
required: true
|
|
94
|
+
},
|
|
95
|
+
mark: {
|
|
96
|
+
part: "mark",
|
|
97
|
+
recipe: menuMarkRecipe,
|
|
98
|
+
required: false
|
|
99
|
+
},
|
|
100
|
+
root: {
|
|
101
|
+
part: "menu",
|
|
102
|
+
recipe: menuSurfaceRecipe,
|
|
103
|
+
required: false
|
|
104
|
+
},
|
|
105
|
+
shortcut: {
|
|
106
|
+
part: "shortcut",
|
|
107
|
+
recipe: menuShortcutRecipe,
|
|
108
|
+
required: false
|
|
109
|
+
}
|
|
110
|
+
});
|
|
83
111
|
//#endregion
|
|
84
|
-
export { defaultMenuPlacement, defaultMenuTone, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
|
|
112
|
+
export { defaultMenuPlacement, defaultMenuTone, menuAnatomy, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
|
|
85
113
|
|
|
86
114
|
//# sourceMappingURL=menu.js.map
|
package/dist/recipes/menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","names":[],"sources":["../../src/recipes/menu.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, hitArea } from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { overlayMotion } from './motion'\n\ntype MenuTone = 'neutral' | 'danger'\n\nconst defaultMenuTone = 'neutral' satisfies MenuTone\n\nconst menuTones = ['neutral', 'danger'] as const satisfies readonly MenuTone[]\n\ntype MenuPlacement =\n | 'bottom-start'\n | 'bottom-end'\n | 'top-start'\n | 'top-end'\n | 'right-start'\n | 'right-end'\n | 'left-start'\n | 'left-end'\n\nconst defaultMenuPlacement = 'bottom-start' satisfies MenuPlacement\n\nconst menuPlacements = [\n 'bottom-start',\n 'bottom-end',\n 'top-start',\n 'top-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n] as const satisfies readonly MenuPlacement[]\n\nconst ROOM_FOR_A_FINGER = hitArea('after:h-[calc(var(--spacing-tf-row)+var(--spacing))]')\n\nconst GROWS_FROM_ITS_TRIGGER = [\n 'data-[placement^=bottom]:origin-top',\n 'data-[placement^=top]:origin-bottom',\n 'data-[placement^=left]:origin-right',\n 'data-[placement^=right]:origin-left',\n].join(' ')\n\ntype MenuMark = MenuTone | 'chosen'\n\nconst MARK = {\n chosen: 'bg-tf-accent-tint',\n danger: 'bg-tf-danger-wash',\n neutral: 'bg-tf-panel-hi',\n} satisfies Record<MenuMark, string>\n\nconst CHOSEN = 'data-[state=checked]:text-tf-accent-hi'\n\nconst menuSurfaceRecipe = cva([\n 'relative flex flex-col',\n 'tf-menu-width rounded-tf-card bg-tf-glass px-2 backdrop-blur-tf-glass',\n 'tf-edge-sweep font-tf-body text-tf-body-sm font-medium shadow-tf-float tf-edge-plain',\n 'z-tf-dropdown outline-hidden',\n GROWS_FROM_ITS_TRIGGER,\n ...overlayMotion,\n])\n\nconst menuListRecipe = cva([\n 'relative flex tf-scroll-thin min-h-0 flex-col gap-1 py-2 outline-hidden',\n 'max-h-[min(var(--available-height),var(--container-tf-list))] overflow-y-auto',\n 'font-tf-body text-tf-body-sm font-medium',\n])\n\nconst menuMarkRecipe = cva([...travelMarkBase, 'h-tf-row rounded-tf-inline'], {\n defaultVariants: { tone: defaultMenuTone, within: 'list' },\n variants: {\n tone: MARK,\n within: { list: 'inset-x-0', surface: 'inset-x-2' },\n },\n})\n\nconst menuGroupRecipe = cva('flex flex-col gap-1')\n\nconst menuItemRecipe = cva(\n [\n 'flex h-tf-row min-h-tf-row flex-none items-center gap-3',\n 'relative rounded-tf-inline px-3 text-left',\n ROOM_FOR_A_FINGER,\n CHOSEN,\n 'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n 'tf-transition motion-reduce:transition-none',\n 'cursor-pointer select-none',\n ...controlPress,\n ...controlInert,\n ],\n {\n defaultVariants: { tone: defaultMenuTone },\n variants: {\n tone: { danger: 'text-tf-danger-hi', neutral: 'text-tf-fg' } satisfies Record<\n MenuTone,\n string\n >,\n },\n },\n)\n\nconst menuLabelRecipe = cva(['flex-none px-3 pt-3 pb-0', `text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst menuTextRecipe = cva('min-w-0 flex-1 truncate')\n\nconst menuShortcutRecipe = cva('flex-none text-tf-caption-sm text-tf-muted tabular-nums')\n\nconst menuSeparatorRecipe = cva('my-2 flex-none border-0')\n\nconst menuArrowRecipe = cva(['[--arrow-size:0.5rem]', '[--arrow-background:var(--tf-glass-flat)]'])\n\nconst menuArrowTipRecipe = cva('border-t border-l border-tf-line')\n\nexport {\n type MenuPlacement,\n type MenuTone,\n defaultMenuPlacement,\n defaultMenuTone,\n menuArrowRecipe,\n menuArrowTipRecipe,\n menuItemRecipe,\n menuLabelRecipe,\n menuGroupRecipe,\n menuListRecipe,\n menuMarkRecipe,\n menuPlacements,\n menuSeparatorRecipe,\n menuShortcutRecipe,\n menuSurfaceRecipe,\n menuTextRecipe,\n menuTones,\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"menu.js","names":[],"sources":["../../src/recipes/menu.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlInert, controlPress, hitArea } from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { overlayMotion } from './motion'\n\ntype MenuTone = 'neutral' | 'danger'\n\nconst defaultMenuTone = 'neutral' satisfies MenuTone\n\nconst menuTones = ['neutral', 'danger'] as const satisfies readonly MenuTone[]\n\ntype MenuPlacement =\n | 'bottom-start'\n | 'bottom-end'\n | 'top-start'\n | 'top-end'\n | 'right-start'\n | 'right-end'\n | 'left-start'\n | 'left-end'\n\nconst defaultMenuPlacement = 'bottom-start' satisfies MenuPlacement\n\nconst menuPlacements = [\n 'bottom-start',\n 'bottom-end',\n 'top-start',\n 'top-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n] as const satisfies readonly MenuPlacement[]\n\nconst ROOM_FOR_A_FINGER = hitArea('after:h-[calc(var(--spacing-tf-row)+var(--spacing))]')\n\nconst GROWS_FROM_ITS_TRIGGER = [\n 'data-[placement^=bottom]:origin-top',\n 'data-[placement^=top]:origin-bottom',\n 'data-[placement^=left]:origin-right',\n 'data-[placement^=right]:origin-left',\n].join(' ')\n\ntype MenuMark = MenuTone | 'chosen'\n\nconst MARK = {\n chosen: 'bg-tf-accent-tint',\n danger: 'bg-tf-danger-wash',\n neutral: 'bg-tf-panel-hi',\n} satisfies Record<MenuMark, string>\n\nconst CHOSEN = 'data-[state=checked]:text-tf-accent-hi'\n\nconst menuSurfaceRecipe = cva([\n 'relative flex flex-col',\n 'tf-menu-width rounded-tf-card bg-tf-glass px-2 backdrop-blur-tf-glass',\n 'tf-edge-sweep font-tf-body text-tf-body-sm font-medium shadow-tf-float tf-edge-plain',\n 'z-tf-dropdown outline-hidden',\n GROWS_FROM_ITS_TRIGGER,\n ...overlayMotion,\n])\n\nconst menuListRecipe = cva([\n 'relative flex tf-scroll-thin min-h-0 flex-col gap-1 py-2 outline-hidden',\n 'max-h-[min(var(--available-height),var(--container-tf-list))] overflow-y-auto',\n 'font-tf-body text-tf-body-sm font-medium',\n])\n\nconst menuMarkRecipe = cva([...travelMarkBase, 'h-tf-row rounded-tf-inline'], {\n defaultVariants: { tone: defaultMenuTone, within: 'list' },\n variants: {\n tone: MARK,\n within: { list: 'inset-x-0', surface: 'inset-x-2' },\n },\n})\n\nconst menuGroupRecipe = cva('flex flex-col gap-1')\n\nconst menuItemRecipe = cva(\n [\n 'flex h-tf-row min-h-tf-row flex-none items-center gap-3',\n 'relative rounded-tf-inline px-3 text-left',\n ROOM_FOR_A_FINGER,\n CHOSEN,\n 'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n 'tf-transition motion-reduce:transition-none',\n 'cursor-pointer select-none',\n ...controlPress,\n ...controlInert,\n ],\n {\n defaultVariants: { tone: defaultMenuTone },\n variants: {\n tone: { danger: 'text-tf-danger-hi', neutral: 'text-tf-fg' } satisfies Record<\n MenuTone,\n string\n >,\n },\n },\n)\n\nconst menuLabelRecipe = cva(['flex-none px-3 pt-3 pb-0', `text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst menuTextRecipe = cva('min-w-0 flex-1 truncate')\n\nconst menuShortcutRecipe = cva('flex-none text-tf-caption-sm text-tf-muted tabular-nums')\n\nconst menuSeparatorRecipe = cva('my-2 flex-none border-0')\n\nconst menuArrowRecipe = cva(['[--arrow-size:0.5rem]', '[--arrow-background:var(--tf-glass-flat)]'])\n\nconst menuArrowTipRecipe = cva('border-t border-l border-tf-line')\n\nconst menuAnatomy = anatomy({\n item: { part: 'item', recipe: menuItemRecipe, required: false },\n list: { part: 'list', recipe: menuListRecipe, required: true },\n mark: { part: 'mark', recipe: menuMarkRecipe, required: false },\n root: { part: 'menu', recipe: menuSurfaceRecipe, required: false },\n shortcut: { part: 'shortcut', recipe: menuShortcutRecipe, required: false },\n})\n\nexport {\n type MenuPlacement,\n type MenuTone,\n defaultMenuPlacement,\n defaultMenuTone,\n menuAnatomy,\n menuArrowRecipe,\n menuArrowTipRecipe,\n menuItemRecipe,\n menuLabelRecipe,\n menuGroupRecipe,\n menuListRecipe,\n menuMarkRecipe,\n menuPlacements,\n menuSeparatorRecipe,\n menuShortcutRecipe,\n menuSurfaceRecipe,\n menuTextRecipe,\n menuTones,\n}\n"],"mappings":";;;;;;;AAWA,MAAM,kBAAkB;AAExB,MAAM,YAAY,CAAC,WAAW,QAAQ;AAYtC,MAAM,uBAAuB;AAE7B,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,oBAAoB,QAAQ,sDAAsD;AAExF,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAIV,MAAM,OAAO;CACX,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,SAAS;AAEf,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,iBAAiB,IAAI;CACzB;CACA;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,CAAC,GAAG,gBAAgB,4BAA4B,GAAG;CAC5E,iBAAiB;EAAE,MAAM;EAAiB,QAAQ;CAAO;CACzD,UAAU;EACR,MAAM;EACN,QAAQ;GAAE,MAAM;GAAa,SAAS;EAAY;CACpD;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,qBAAqB;AAEjD,MAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,MAAM,gBAAgB;CACzC,UAAU,EACR,MAAM;EAAE,QAAQ;EAAqB,SAAS;CAAa,EAI7D;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,CAAC,4BAA4B,sBAAsB,cAAc,CAAC;AAE9F,MAAM,iBAAiB,IAAI,yBAAyB;AAEpD,MAAM,qBAAqB,IAAI,yDAAyD;AAExF,MAAM,sBAAsB,IAAI,yBAAyB;AAEzD,MAAM,kBAAkB,IAAI,CAAC,yBAAyB,2CAA2C,CAAC;AAElG,MAAM,qBAAqB,IAAI,kCAAkC;AAEjE,MAAM,cAAc,QAAQ;CAC1B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;CAC7D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAM;CACjE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAoB,UAAU;CAAM;AAC5E,CAAC"}
|