@adea-ai/ui 0.135.1 → 0.136.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/components/ui/callout/callout.d.ts +72 -0
- package/dist/components/ui/callout/callout.d.ts.map +1 -0
- package/dist/components/ui/callout/callout.js +123 -0
- package/dist/components/ui/callout/callout.js.map +1 -0
- package/dist/components/ui/callout/index.d.ts +2 -0
- package/dist/components/ui/callout/index.d.ts.map +1 -0
- package/dist/components/ui/callout/index.js +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/r/callout.json +22 -0
- package/dist/r/registry.json +22 -0
- package/dist/r/src/components/ui/callout/callout.tsx +115 -0
- package/dist/r/src/components/ui/callout/index.ts +1 -0
- package/package.json +1 -1
- package/registry.json +22 -0
- package/src/components/ui/callout/callout.tsx +115 -0
- package/src/components/ui/callout/index.ts +1 -0
- package/src/index.ts +1 -0
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import type { ComponentProps } from 'solid-js';
|
|
2
|
+
import { type VariantProps } from '#lib/variants';
|
|
3
|
+
/**
|
|
4
|
+
* Callout.
|
|
5
|
+
*
|
|
6
|
+
* A quiet aside that belongs to the content around it: the summary at the top of
|
|
7
|
+
* an answer, a note in documentation, a remembered fact beside the reply that
|
|
8
|
+
* used it. It is a card-coloured block with one rule on its start edge, and
|
|
9
|
+
* nothing about it interrupts the reader.
|
|
10
|
+
*
|
|
11
|
+
* That is the difference from `Alert`. An `Alert` is a message about the state of
|
|
12
|
+
* the surface it sits in — a failed sync, a validation summary — so it is always
|
|
13
|
+
* `role="alert"`, a live announcement, with a tone glyph and a tinted status
|
|
14
|
+
* surface. A callout is static page content: a plain `div` with `role="note"`, no
|
|
15
|
+
* live region, no icon, and no tint. A caller whose note really is a status
|
|
16
|
+
* message uses `Alert`; one whose note needs a different landmark role passes
|
|
17
|
+
* `role`. Reach for `Card` when the block is a self-contained object with its own
|
|
18
|
+
* header, content and footer; a callout has no parts beyond an optional
|
|
19
|
+
* `CalloutTitle`.
|
|
20
|
+
*
|
|
21
|
+
* The rule is the only thing that varies by `variant`: `default` is the accent
|
|
22
|
+
* (`--primary`), and the four status hues use the same tokens `Alert` does. The
|
|
23
|
+
* rule is a logical `border-s-*`, so it moves to the right in RTL. The corners
|
|
24
|
+
* stay square because a rounded box would curve the rule into a crescent.
|
|
25
|
+
*
|
|
26
|
+
* `size` is the padding rung and the rule's weight together, so a caller never
|
|
27
|
+
* sets `p-*` or a border width to make one denser. The rungs are Cortana's three
|
|
28
|
+
* answer-view callouts, expressed in the Tailwind spacing scale:
|
|
29
|
+
*
|
|
30
|
+
* - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.
|
|
31
|
+
* - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.
|
|
32
|
+
* - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.
|
|
33
|
+
*
|
|
34
|
+
* Type size and colour are inherited rather than set (only the card foreground is
|
|
35
|
+
* applied), so a callout in a dense panel and one in an article both read at the
|
|
36
|
+
* size of the text around them.
|
|
37
|
+
*
|
|
38
|
+
* Text that has no break opportunity (a 200-character token, a URL, a file path)
|
|
39
|
+
* wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`
|
|
40
|
+
* and not `break-word`, because only `anywhere` lowers the box's min-content width:
|
|
41
|
+
* a callout that is a flex or grid item (auto minimum size) then shrinks to its
|
|
42
|
+
* track instead of stretching it. The callout's own padding, rule and width are
|
|
43
|
+
* untouched, so none of its sizing differs from Cortana's.
|
|
44
|
+
*
|
|
45
|
+
* The block is deliberately not a flex or grid container: its children are inline
|
|
46
|
+
* text, links and code, and a flex root would turn each of those into a separate
|
|
47
|
+
* item and break the line.
|
|
48
|
+
*/
|
|
49
|
+
export declare const calloutVariants: (props?: ({
|
|
50
|
+
variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
|
|
51
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
52
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
53
|
+
export type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>;
|
|
54
|
+
export declare function Callout(props: CalloutProps): import("solid-js").JSX.Element;
|
|
55
|
+
/**
|
|
56
|
+
* An optional heading line for the callout. It is a styled `div`, not a heading
|
|
57
|
+
* element: a callout sits inside someone else's outline, and a fixed heading
|
|
58
|
+
* level would break it. Pass `role="heading"` with `aria-level` where the
|
|
59
|
+
* content does belong in the outline.
|
|
60
|
+
*
|
|
61
|
+
* The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
|
|
62
|
+
* paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
|
|
63
|
+
* as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
|
|
64
|
+
* from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
|
|
65
|
+
* bare text, the most common body. The unconditional margin is the less
|
|
66
|
+
* surprising failure: it is never missing where text follows. The price is the
|
|
67
|
+
* title-only callout, which would end 4px taller than its padding says. Pass
|
|
68
|
+
* `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
|
|
69
|
+
* shows it.
|
|
70
|
+
*/
|
|
71
|
+
export declare function CalloutTitle(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
|
|
72
|
+
//# sourceMappingURL=callout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/callout/callout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,eAAe;;;8EAsB3B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAEvF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,kCAU1C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASxD"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { cn } from "../../../lib/utils.js";
|
|
2
|
+
import { cva } from "../../../lib/variants.js";
|
|
3
|
+
import { mergeProps, spread, template } from "solid-js/web";
|
|
4
|
+
import { splitProps } from "solid-js";
|
|
5
|
+
//#region src/components/ui/callout/callout.tsx
|
|
6
|
+
var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=callout role=note>`);
|
|
7
|
+
var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=callout-title>`);
|
|
8
|
+
/**
|
|
9
|
+
* Callout.
|
|
10
|
+
*
|
|
11
|
+
* A quiet aside that belongs to the content around it: the summary at the top of
|
|
12
|
+
* an answer, a note in documentation, a remembered fact beside the reply that
|
|
13
|
+
* used it. It is a card-coloured block with one rule on its start edge, and
|
|
14
|
+
* nothing about it interrupts the reader.
|
|
15
|
+
*
|
|
16
|
+
* That is the difference from `Alert`. An `Alert` is a message about the state of
|
|
17
|
+
* the surface it sits in — a failed sync, a validation summary — so it is always
|
|
18
|
+
* `role="alert"`, a live announcement, with a tone glyph and a tinted status
|
|
19
|
+
* surface. A callout is static page content: a plain `div` with `role="note"`, no
|
|
20
|
+
* live region, no icon, and no tint. A caller whose note really is a status
|
|
21
|
+
* message uses `Alert`; one whose note needs a different landmark role passes
|
|
22
|
+
* `role`. Reach for `Card` when the block is a self-contained object with its own
|
|
23
|
+
* header, content and footer; a callout has no parts beyond an optional
|
|
24
|
+
* `CalloutTitle`.
|
|
25
|
+
*
|
|
26
|
+
* The rule is the only thing that varies by `variant`: `default` is the accent
|
|
27
|
+
* (`--primary`), and the four status hues use the same tokens `Alert` does. The
|
|
28
|
+
* rule is a logical `border-s-*`, so it moves to the right in RTL. The corners
|
|
29
|
+
* stay square because a rounded box would curve the rule into a crescent.
|
|
30
|
+
*
|
|
31
|
+
* `size` is the padding rung and the rule's weight together, so a caller never
|
|
32
|
+
* sets `p-*` or a border width to make one denser. The rungs are Cortana's three
|
|
33
|
+
* answer-view callouts, expressed in the Tailwind spacing scale:
|
|
34
|
+
*
|
|
35
|
+
* - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.
|
|
36
|
+
* - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.
|
|
37
|
+
* - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.
|
|
38
|
+
*
|
|
39
|
+
* Type size and colour are inherited rather than set (only the card foreground is
|
|
40
|
+
* applied), so a callout in a dense panel and one in an article both read at the
|
|
41
|
+
* size of the text around them.
|
|
42
|
+
*
|
|
43
|
+
* Text that has no break opportunity (a 200-character token, a URL, a file path)
|
|
44
|
+
* wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`
|
|
45
|
+
* and not `break-word`, because only `anywhere` lowers the box's min-content width:
|
|
46
|
+
* a callout that is a flex or grid item (auto minimum size) then shrinks to its
|
|
47
|
+
* track instead of stretching it. The callout's own padding, rule and width are
|
|
48
|
+
* untouched, so none of its sizing differs from Cortana's.
|
|
49
|
+
*
|
|
50
|
+
* The block is deliberately not a flex or grid container: its children are inline
|
|
51
|
+
* text, links and code, and a flex root would turn each of those into a separate
|
|
52
|
+
* item and break the line.
|
|
53
|
+
*/
|
|
54
|
+
var calloutVariants = cva("bg-card text-card-foreground block rounded-none wrap-anywhere", {
|
|
55
|
+
variants: {
|
|
56
|
+
variant: {
|
|
57
|
+
default: "border-s-primary",
|
|
58
|
+
destructive: "border-s-destructive",
|
|
59
|
+
success: "border-s-success",
|
|
60
|
+
warning: "border-s-warning",
|
|
61
|
+
info: "border-s-info"
|
|
62
|
+
},
|
|
63
|
+
size: {
|
|
64
|
+
/** 12px block / 14px inline padding, 2px rule: a short inline note. */
|
|
65
|
+
sm: "border-s-2 px-3.5 py-3",
|
|
66
|
+
/** 18px block / 20px inline padding, 3px rule: a supporting aside. */
|
|
67
|
+
md: "border-s-3 px-5 py-4.5",
|
|
68
|
+
/** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */
|
|
69
|
+
lg: "border-s-3 px-6 py-5.5"
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
defaultVariants: {
|
|
73
|
+
variant: "default",
|
|
74
|
+
size: "md"
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
function Callout(props) {
|
|
78
|
+
const [local, rest] = splitProps(props, [
|
|
79
|
+
"class",
|
|
80
|
+
"variant",
|
|
81
|
+
"size"
|
|
82
|
+
]);
|
|
83
|
+
return (() => {
|
|
84
|
+
var _el$ = _tmpl$();
|
|
85
|
+
spread(_el$, mergeProps({ get ["class"]() {
|
|
86
|
+
return cn(calloutVariants({
|
|
87
|
+
variant: local.variant,
|
|
88
|
+
size: local.size
|
|
89
|
+
}), local.class);
|
|
90
|
+
} }, rest), false, false);
|
|
91
|
+
return _el$;
|
|
92
|
+
})();
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* An optional heading line for the callout. It is a styled `div`, not a heading
|
|
96
|
+
* element: a callout sits inside someone else's outline, and a fixed heading
|
|
97
|
+
* level would break it. Pass `role="heading"` with `aria-level` where the
|
|
98
|
+
* content does belong in the outline.
|
|
99
|
+
*
|
|
100
|
+
* The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
|
|
101
|
+
* paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
|
|
102
|
+
* as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
|
|
103
|
+
* from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
|
|
104
|
+
* bare text, the most common body. The unconditional margin is the less
|
|
105
|
+
* surprising failure: it is never missing where text follows. The price is the
|
|
106
|
+
* title-only callout, which would end 4px taller than its padding says. Pass
|
|
107
|
+
* `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
|
|
108
|
+
* shows it.
|
|
109
|
+
*/
|
|
110
|
+
function CalloutTitle(props) {
|
|
111
|
+
const [local, rest] = splitProps(props, ["class"]);
|
|
112
|
+
return (() => {
|
|
113
|
+
var _el$2 = _tmpl$2();
|
|
114
|
+
spread(_el$2, mergeProps({ get ["class"]() {
|
|
115
|
+
return cn("mb-1 font-medium tracking-tight", local.class);
|
|
116
|
+
} }, rest), false, false);
|
|
117
|
+
return _el$2;
|
|
118
|
+
})();
|
|
119
|
+
}
|
|
120
|
+
//#endregion
|
|
121
|
+
export { Callout, CalloutTitle, calloutVariants };
|
|
122
|
+
|
|
123
|
+
//# sourceMappingURL=callout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"callout.js","names":["ComponentProps","splitProps","cva","VariantProps","cn","calloutVariants","variants","variant","default","destructive","success","warning","info","size","sm","md","lg","defaultVariants","CalloutProps","Callout","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","CalloutTitle","_el$2","_tmpl$2","_$mergeProps"],"sources":["../../../../src/components/ui/callout/callout.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Callout.\n *\n * A quiet aside that belongs to the content around it: the summary at the top of\n * an answer, a note in documentation, a remembered fact beside the reply that\n * used it. It is a card-coloured block with one rule on its start edge, and\n * nothing about it interrupts the reader.\n *\n * That is the difference from `Alert`. An `Alert` is a message about the state of\n * the surface it sits in — a failed sync, a validation summary — so it is always\n * `role=\"alert\"`, a live announcement, with a tone glyph and a tinted status\n * surface. A callout is static page content: a plain `div` with `role=\"note\"`, no\n * live region, no icon, and no tint. A caller whose note really is a status\n * message uses `Alert`; one whose note needs a different landmark role passes\n * `role`. Reach for `Card` when the block is a self-contained object with its own\n * header, content and footer; a callout has no parts beyond an optional\n * `CalloutTitle`.\n *\n * The rule is the only thing that varies by `variant`: `default` is the accent\n * (`--primary`), and the four status hues use the same tokens `Alert` does. The\n * rule is a logical `border-s-*`, so it moves to the right in RTL. The corners\n * stay square because a rounded box would curve the rule into a crescent.\n *\n * `size` is the padding rung and the rule's weight together, so a caller never\n * sets `p-*` or a border width to make one denser. The rungs are Cortana's three\n * answer-view callouts, expressed in the Tailwind spacing scale:\n *\n * - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.\n * - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.\n * - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.\n *\n * Type size and colour are inherited rather than set (only the card foreground is\n * applied), so a callout in a dense panel and one in an article both read at the\n * size of the text around them.\n *\n * Text that has no break opportunity (a 200-character token, a URL, a file path)\n * wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`\n * and not `break-word`, because only `anywhere` lowers the box's min-content width:\n * a callout that is a flex or grid item (auto minimum size) then shrinks to its\n * track instead of stretching it. The callout's own padding, rule and width are\n * untouched, so none of its sizing differs from Cortana's.\n *\n * The block is deliberately not a flex or grid container: its children are inline\n * text, links and code, and a flex root would turn each of those into a separate\n * item and break the line.\n */\nexport const calloutVariants = cva(\n 'bg-card text-card-foreground block rounded-none wrap-anywhere',\n {\n variants: {\n variant: {\n default: 'border-s-primary',\n destructive: 'border-s-destructive',\n success: 'border-s-success',\n warning: 'border-s-warning',\n info: 'border-s-info',\n },\n size: {\n /** 12px block / 14px inline padding, 2px rule: a short inline note. */\n sm: 'border-s-2 px-3.5 py-3',\n /** 18px block / 20px inline padding, 3px rule: a supporting aside. */\n md: 'border-s-3 px-5 py-4.5',\n /** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */\n lg: 'border-s-3 px-6 py-5.5',\n },\n },\n defaultVariants: { variant: 'default', size: 'md' },\n }\n)\n\nexport type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>\n\nexport function Callout(props: CalloutProps) {\n const [local, rest] = splitProps(props, ['class', 'variant', 'size'])\n return (\n <div\n data-slot=\"callout\"\n role=\"note\"\n class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}\n {...rest}\n />\n )\n}\n\n/**\n * An optional heading line for the callout. It is a styled `div`, not a heading\n * element: a callout sits inside someone else's outline, and a fixed heading\n * level would break it. Pass `role=\"heading\"` with `aria-level` where the\n * content does belong in the outline.\n *\n * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a\n * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such\n * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)\n * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for\n * bare text, the most common body. The unconditional margin is the less\n * surprising failure: it is never missing where text follows. The price is the\n * title-only callout, which would end 4px taller than its padding says. Pass\n * `class=\"mb-0\"` there (`cn` lets the caller's margin win); the `WithTitle` story\n * shows it.\n */\nexport function CalloutTitle(props: ComponentProps<'div'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <div\n data-slot=\"callout-title\"\n class={cn('mb-1 font-medium tracking-tight', local.class)}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAaK,kBAAkBH,IAC7B,iEACA;CACEI,UAAU;EACRC,SAAS;GACPC,SAAS;GACTC,aAAa;GACbC,SAAS;GACTC,SAAS;GACTC,MAAM;EACR;EACAC,MAAM;;GAEJC,IAAI;;GAEJC,IAAI;;GAEJC,IAAI;EACN;CACF;CACAC,iBAAiB;EAAEV,SAAS;EAAWM,MAAM;CAAK;AACpD,CACF;AAIA,SAAgBM,QAAQC,OAAqB;CAC3C,MAAM,CAACC,OAAOC,QAAQrB,WAAWmB,OAAO;EAAC;EAAS;EAAW;CAAM,CAAC;CACpE,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAIWtB,GAAGC,gBAAgB;IAAEE,SAASc,MAAMd;IAASM,MAAMQ,MAAMR;GAAK,CAAC,GAAGQ,MAAMM,KAAK;EAAC,EAAA,GACjFL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;;;;;;;;;;;;;;;;;AAkBA,SAAgBK,aAAaR,OAA8B;CACzD,MAAM,CAACC,OAAOC,QAAQrB,WAAWmB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWtB,GAAG,mCAAmCiB,MAAMM,KAAK;EAAC,EAAA,GACrDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/callout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export * from './components/ui/breadcrumb';
|
|
|
25
25
|
export * from './components/ui/button';
|
|
26
26
|
export * from './components/ui/button-group';
|
|
27
27
|
export * from './components/ui/calendar';
|
|
28
|
+
export * from './components/ui/callout';
|
|
28
29
|
export * from './components/ui/card';
|
|
29
30
|
export * from './components/ui/checkbox';
|
|
30
31
|
export * from './components/ui/collapsible';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -14,6 +14,7 @@ import { Button, buttonVariants } from "./components/ui/button/button.js";
|
|
|
14
14
|
import { Separator } from "./components/ui/separator/separator.js";
|
|
15
15
|
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "./components/ui/button-group/button-group.js";
|
|
16
16
|
import { CalendarSurface, DatePicker } from "./components/ui/calendar/calendar.js";
|
|
17
|
+
import { Callout, CalloutTitle, calloutVariants } from "./components/ui/callout/callout.js";
|
|
17
18
|
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/ui/card/card.js";
|
|
18
19
|
import { Checkbox, CheckboxDescription, CheckboxLabel } from "./components/ui/checkbox/checkbox.js";
|
|
19
20
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible/collapsible.js";
|
|
@@ -145,4 +146,4 @@ import { AboutDialog } from "./components/composites/about-dialog/about-dialog.j
|
|
|
145
146
|
import { HelpCenter } from "./components/composites/help-center/help-center.js";
|
|
146
147
|
import { WorkspaceMark } from "./components/composites/workspace-mark/workspace-mark.js";
|
|
147
148
|
import { writeClipboardText } from "./lib/clipboard.js";
|
|
148
|
-
export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, AboutDialog, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnnotationSurface, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearanceEditorActions, AppearanceFontSettingsGroup, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, BoardCardTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandHint, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, CommandStatus, ComposerAttachmentButton, ComposerHint, ComposerMenu, ComposerMenuItem, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextualSidebar, ConversationAvatar, ConversationPane, ConversationSurface, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, Heading, HelpCenter, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdChord, KbdGroup, Label, ListGroup, ListRow, ListRowControl, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, PixelResizeHandle, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, REDUCED_TRANSPARENCY_QUERY, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SceneControls, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsLayout, SettingsNavigation, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavLabel, SidebarNavResizeHandle, SidebarNavRow, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, Tree, TreeRow, TreeRowActions, UpdateChannelControl, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, appearancePreviewThemes, applyAppearanceFontSettings, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, cardVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createAppMenuItems, createLayoutState, createVersionedPersistence, cva, defaultDarkThemeId, defaultLightThemeId, defaultPreferenceStorage, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, editorPaletteFor, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, fontSettingsBootstrapScript, fontZoomShortcut, formatBytes, formatReleaseDate, formatToken, headingElement, headingVariants, initialsFrom, inlineScriptLiteral, isCustomAccent, isPasteBlock, isThemeAccentId, itemVariants, kbdChordKeys, kbdGroupVariants, kbdVariants, keyedRows, layoutDepth, listLeaves, localStoragePersistence, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize, normalizeCustomAccent, normalizeLayout, normalizeSurface, paintAccentRoles, parseDiff, plainTextFromMarkdown, platformModifierKey, pruneBlocks, quarantineRecord, radiusTokens, readLegacyValue, readVersionedRecord, recollapsePastes, recoveryEnvelope, recoveryKeyFor, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveAccentPreset, resolveAccentRoles, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolveSurface, resolveSurfaceState, resolveVariant, resolvedDensity, searchShortcutKeyshortcuts, searchShortcutLabel, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, splitPaneBalanced, statusDotVariants, stepAppearanceFontSizes, stripTrailingBlankLines, surfaceAlpha, surfaceInteractive, swapPanes, terminalCssVariables, textElement, textVariants, textareaVariants, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themeScript, themeSurfaces, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, tokensAsHex, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useOptionalTheme, useSideRail, useTheme, validateTheme, validateThemeRegistry, variantFromRecord, withAccent, writeClipboardText, writeVersionedRecord, zIndexTokens };
|
|
149
|
+
export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, AboutDialog, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnnotationSurface, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearanceEditorActions, AppearanceFontSettingsGroup, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, BoardCardTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Callout, CalloutTitle, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandHint, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, CommandStatus, ComposerAttachmentButton, ComposerHint, ComposerMenu, ComposerMenuItem, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextualSidebar, ConversationAvatar, ConversationPane, ConversationSurface, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, Heading, HelpCenter, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdChord, KbdGroup, Label, ListGroup, ListRow, ListRowControl, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, PixelResizeHandle, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, REDUCED_TRANSPARENCY_QUERY, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SceneControls, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsLayout, SettingsNavigation, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavLabel, SidebarNavResizeHandle, SidebarNavRow, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, Tree, TreeRow, TreeRowActions, UpdateChannelControl, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, appearancePreviewThemes, applyAppearanceFontSettings, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, calloutVariants, cardVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createAppMenuItems, createLayoutState, createVersionedPersistence, cva, defaultDarkThemeId, defaultLightThemeId, defaultPreferenceStorage, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, editorPaletteFor, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, fontSettingsBootstrapScript, fontZoomShortcut, formatBytes, formatReleaseDate, formatToken, headingElement, headingVariants, initialsFrom, inlineScriptLiteral, isCustomAccent, isPasteBlock, isThemeAccentId, itemVariants, kbdChordKeys, kbdGroupVariants, kbdVariants, keyedRows, layoutDepth, listLeaves, localStoragePersistence, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize, normalizeCustomAccent, normalizeLayout, normalizeSurface, paintAccentRoles, parseDiff, plainTextFromMarkdown, platformModifierKey, pruneBlocks, quarantineRecord, radiusTokens, readLegacyValue, readVersionedRecord, recollapsePastes, recoveryEnvelope, recoveryKeyFor, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveAccentPreset, resolveAccentRoles, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolveSurface, resolveSurfaceState, resolveVariant, resolvedDensity, searchShortcutKeyshortcuts, searchShortcutLabel, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, splitPaneBalanced, statusDotVariants, stepAppearanceFontSizes, stripTrailingBlankLines, surfaceAlpha, surfaceInteractive, swapPanes, terminalCssVariables, textElement, textVariants, textareaVariants, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themeScript, themeSurfaces, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, tokensAsHex, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useOptionalTheme, useSideRail, useTheme, validateTheme, validateThemeRegistry, variantFromRecord, withAccent, writeClipboardText, writeVersionedRecord, zIndexTokens };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "callout",
|
|
3
|
+
"type": "registry:ui",
|
|
4
|
+
"title": "Callout",
|
|
5
|
+
"description": "",
|
|
6
|
+
"dependencies": [],
|
|
7
|
+
"registryDependencies": [
|
|
8
|
+
"lib"
|
|
9
|
+
],
|
|
10
|
+
"files": [
|
|
11
|
+
{
|
|
12
|
+
"path": "src/components/ui/callout/callout.tsx",
|
|
13
|
+
"type": "registry:ui",
|
|
14
|
+
"target": "components/ui/callout/callout.tsx"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"path": "src/components/ui/callout/index.ts",
|
|
18
|
+
"type": "registry:ui",
|
|
19
|
+
"target": "components/ui/callout/index.ts"
|
|
20
|
+
}
|
|
21
|
+
]
|
|
22
|
+
}
|
package/dist/r/registry.json
CHANGED
|
@@ -297,6 +297,28 @@
|
|
|
297
297
|
}
|
|
298
298
|
]
|
|
299
299
|
},
|
|
300
|
+
{
|
|
301
|
+
"name": "callout",
|
|
302
|
+
"type": "registry:ui",
|
|
303
|
+
"title": "Callout",
|
|
304
|
+
"description": "",
|
|
305
|
+
"dependencies": [],
|
|
306
|
+
"registryDependencies": [
|
|
307
|
+
"lib"
|
|
308
|
+
],
|
|
309
|
+
"files": [
|
|
310
|
+
{
|
|
311
|
+
"path": "src/components/ui/callout/callout.tsx",
|
|
312
|
+
"type": "registry:ui",
|
|
313
|
+
"target": "components/ui/callout/callout.tsx"
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"path": "src/components/ui/callout/index.ts",
|
|
317
|
+
"type": "registry:ui",
|
|
318
|
+
"target": "components/ui/callout/index.ts"
|
|
319
|
+
}
|
|
320
|
+
]
|
|
321
|
+
},
|
|
300
322
|
{
|
|
301
323
|
"name": "card",
|
|
302
324
|
"type": "registry:ui",
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import type { ComponentProps } from 'solid-js'
|
|
2
|
+
import { splitProps } from 'solid-js'
|
|
3
|
+
import { cva, type VariantProps } from '../../../lib/variants'
|
|
4
|
+
import { cn } from '../../../lib/utils'
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Callout.
|
|
8
|
+
*
|
|
9
|
+
* A quiet aside that belongs to the content around it: the summary at the top of
|
|
10
|
+
* an answer, a note in documentation, a remembered fact beside the reply that
|
|
11
|
+
* used it. It is a card-coloured block with one rule on its start edge, and
|
|
12
|
+
* nothing about it interrupts the reader.
|
|
13
|
+
*
|
|
14
|
+
* That is the difference from `Alert`. An `Alert` is a message about the state of
|
|
15
|
+
* the surface it sits in — a failed sync, a validation summary — so it is always
|
|
16
|
+
* `role="alert"`, a live announcement, with a tone glyph and a tinted status
|
|
17
|
+
* surface. A callout is static page content: a plain `div` with `role="note"`, no
|
|
18
|
+
* live region, no icon, and no tint. A caller whose note really is a status
|
|
19
|
+
* message uses `Alert`; one whose note needs a different landmark role passes
|
|
20
|
+
* `role`. Reach for `Card` when the block is a self-contained object with its own
|
|
21
|
+
* header, content and footer; a callout has no parts beyond an optional
|
|
22
|
+
* `CalloutTitle`.
|
|
23
|
+
*
|
|
24
|
+
* The rule is the only thing that varies by `variant`: `default` is the accent
|
|
25
|
+
* (`--primary`), and the four status hues use the same tokens `Alert` does. The
|
|
26
|
+
* rule is a logical `border-s-*`, so it moves to the right in RTL. The corners
|
|
27
|
+
* stay square because a rounded box would curve the rule into a crescent.
|
|
28
|
+
*
|
|
29
|
+
* `size` is the padding rung and the rule's weight together, so a caller never
|
|
30
|
+
* sets `p-*` or a border width to make one denser. The rungs are Cortana's three
|
|
31
|
+
* answer-view callouts, expressed in the Tailwind spacing scale:
|
|
32
|
+
*
|
|
33
|
+
* - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.
|
|
34
|
+
* - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.
|
|
35
|
+
* - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.
|
|
36
|
+
*
|
|
37
|
+
* Type size and colour are inherited rather than set (only the card foreground is
|
|
38
|
+
* applied), so a callout in a dense panel and one in an article both read at the
|
|
39
|
+
* size of the text around them.
|
|
40
|
+
*
|
|
41
|
+
* Text that has no break opportunity (a 200-character token, a URL, a file path)
|
|
42
|
+
* wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`
|
|
43
|
+
* and not `break-word`, because only `anywhere` lowers the box's min-content width:
|
|
44
|
+
* a callout that is a flex or grid item (auto minimum size) then shrinks to its
|
|
45
|
+
* track instead of stretching it. The callout's own padding, rule and width are
|
|
46
|
+
* untouched, so none of its sizing differs from Cortana's.
|
|
47
|
+
*
|
|
48
|
+
* The block is deliberately not a flex or grid container: its children are inline
|
|
49
|
+
* text, links and code, and a flex root would turn each of those into a separate
|
|
50
|
+
* item and break the line.
|
|
51
|
+
*/
|
|
52
|
+
export const calloutVariants = cva(
|
|
53
|
+
'bg-card text-card-foreground block rounded-none wrap-anywhere',
|
|
54
|
+
{
|
|
55
|
+
variants: {
|
|
56
|
+
variant: {
|
|
57
|
+
default: 'border-s-primary',
|
|
58
|
+
destructive: 'border-s-destructive',
|
|
59
|
+
success: 'border-s-success',
|
|
60
|
+
warning: 'border-s-warning',
|
|
61
|
+
info: 'border-s-info',
|
|
62
|
+
},
|
|
63
|
+
size: {
|
|
64
|
+
/** 12px block / 14px inline padding, 2px rule: a short inline note. */
|
|
65
|
+
sm: 'border-s-2 px-3.5 py-3',
|
|
66
|
+
/** 18px block / 20px inline padding, 3px rule: a supporting aside. */
|
|
67
|
+
md: 'border-s-3 px-5 py-4.5',
|
|
68
|
+
/** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */
|
|
69
|
+
lg: 'border-s-3 px-6 py-5.5',
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
defaultVariants: { variant: 'default', size: 'md' },
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
|
|
76
|
+
export type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>
|
|
77
|
+
|
|
78
|
+
export function Callout(props: CalloutProps) {
|
|
79
|
+
const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
|
|
80
|
+
return (
|
|
81
|
+
<div
|
|
82
|
+
data-slot="callout"
|
|
83
|
+
role="note"
|
|
84
|
+
class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}
|
|
85
|
+
{...rest}
|
|
86
|
+
/>
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* An optional heading line for the callout. It is a styled `div`, not a heading
|
|
92
|
+
* element: a callout sits inside someone else's outline, and a fixed heading
|
|
93
|
+
* level would break it. Pass `role="heading"` with `aria-level` where the
|
|
94
|
+
* content does belong in the outline.
|
|
95
|
+
*
|
|
96
|
+
* The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
|
|
97
|
+
* paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
|
|
98
|
+
* as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
|
|
99
|
+
* from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
|
|
100
|
+
* bare text, the most common body. The unconditional margin is the less
|
|
101
|
+
* surprising failure: it is never missing where text follows. The price is the
|
|
102
|
+
* title-only callout, which would end 4px taller than its padding says. Pass
|
|
103
|
+
* `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
|
|
104
|
+
* shows it.
|
|
105
|
+
*/
|
|
106
|
+
export function CalloutTitle(props: ComponentProps<'div'>) {
|
|
107
|
+
const [local, rest] = splitProps(props, ['class'])
|
|
108
|
+
return (
|
|
109
|
+
<div
|
|
110
|
+
data-slot="callout-title"
|
|
111
|
+
class={cn('mb-1 font-medium tracking-tight', local.class)}
|
|
112
|
+
{...rest}
|
|
113
|
+
/>
|
|
114
|
+
)
|
|
115
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Callout, CalloutTitle, calloutVariants, type CalloutProps } from './callout'
|
package/package.json
CHANGED
package/registry.json
CHANGED
|
@@ -297,6 +297,28 @@
|
|
|
297
297
|
}
|
|
298
298
|
]
|
|
299
299
|
},
|
|
300
|
+
{
|
|
301
|
+
"name": "callout",
|
|
302
|
+
"type": "registry:ui",
|
|
303
|
+
"title": "Callout",
|
|
304
|
+
"description": "",
|
|
305
|
+
"dependencies": [],
|
|
306
|
+
"registryDependencies": [
|
|
307
|
+
"lib"
|
|
308
|
+
],
|
|
309
|
+
"files": [
|
|
310
|
+
{
|
|
311
|
+
"path": "src/components/ui/callout/callout.tsx",
|
|
312
|
+
"type": "registry:ui",
|
|
313
|
+
"target": "components/ui/callout/callout.tsx"
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"path": "src/components/ui/callout/index.ts",
|
|
317
|
+
"type": "registry:ui",
|
|
318
|
+
"target": "components/ui/callout/index.ts"
|
|
319
|
+
}
|
|
320
|
+
]
|
|
321
|
+
},
|
|
300
322
|
{
|
|
301
323
|
"name": "card",
|
|
302
324
|
"type": "registry:ui",
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import type { ComponentProps } from 'solid-js'
|
|
2
|
+
import { splitProps } from 'solid-js'
|
|
3
|
+
import { cva, type VariantProps } from '#lib/variants'
|
|
4
|
+
import { cn } from '#lib/utils'
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Callout.
|
|
8
|
+
*
|
|
9
|
+
* A quiet aside that belongs to the content around it: the summary at the top of
|
|
10
|
+
* an answer, a note in documentation, a remembered fact beside the reply that
|
|
11
|
+
* used it. It is a card-coloured block with one rule on its start edge, and
|
|
12
|
+
* nothing about it interrupts the reader.
|
|
13
|
+
*
|
|
14
|
+
* That is the difference from `Alert`. An `Alert` is a message about the state of
|
|
15
|
+
* the surface it sits in — a failed sync, a validation summary — so it is always
|
|
16
|
+
* `role="alert"`, a live announcement, with a tone glyph and a tinted status
|
|
17
|
+
* surface. A callout is static page content: a plain `div` with `role="note"`, no
|
|
18
|
+
* live region, no icon, and no tint. A caller whose note really is a status
|
|
19
|
+
* message uses `Alert`; one whose note needs a different landmark role passes
|
|
20
|
+
* `role`. Reach for `Card` when the block is a self-contained object with its own
|
|
21
|
+
* header, content and footer; a callout has no parts beyond an optional
|
|
22
|
+
* `CalloutTitle`.
|
|
23
|
+
*
|
|
24
|
+
* The rule is the only thing that varies by `variant`: `default` is the accent
|
|
25
|
+
* (`--primary`), and the four status hues use the same tokens `Alert` does. The
|
|
26
|
+
* rule is a logical `border-s-*`, so it moves to the right in RTL. The corners
|
|
27
|
+
* stay square because a rounded box would curve the rule into a crescent.
|
|
28
|
+
*
|
|
29
|
+
* `size` is the padding rung and the rule's weight together, so a caller never
|
|
30
|
+
* sets `p-*` or a border width to make one denser. The rungs are Cortana's three
|
|
31
|
+
* answer-view callouts, expressed in the Tailwind spacing scale:
|
|
32
|
+
*
|
|
33
|
+
* - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.
|
|
34
|
+
* - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.
|
|
35
|
+
* - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.
|
|
36
|
+
*
|
|
37
|
+
* Type size and colour are inherited rather than set (only the card foreground is
|
|
38
|
+
* applied), so a callout in a dense panel and one in an article both read at the
|
|
39
|
+
* size of the text around them.
|
|
40
|
+
*
|
|
41
|
+
* Text that has no break opportunity (a 200-character token, a URL, a file path)
|
|
42
|
+
* wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`
|
|
43
|
+
* and not `break-word`, because only `anywhere` lowers the box's min-content width:
|
|
44
|
+
* a callout that is a flex or grid item (auto minimum size) then shrinks to its
|
|
45
|
+
* track instead of stretching it. The callout's own padding, rule and width are
|
|
46
|
+
* untouched, so none of its sizing differs from Cortana's.
|
|
47
|
+
*
|
|
48
|
+
* The block is deliberately not a flex or grid container: its children are inline
|
|
49
|
+
* text, links and code, and a flex root would turn each of those into a separate
|
|
50
|
+
* item and break the line.
|
|
51
|
+
*/
|
|
52
|
+
export const calloutVariants = cva(
|
|
53
|
+
'bg-card text-card-foreground block rounded-none wrap-anywhere',
|
|
54
|
+
{
|
|
55
|
+
variants: {
|
|
56
|
+
variant: {
|
|
57
|
+
default: 'border-s-primary',
|
|
58
|
+
destructive: 'border-s-destructive',
|
|
59
|
+
success: 'border-s-success',
|
|
60
|
+
warning: 'border-s-warning',
|
|
61
|
+
info: 'border-s-info',
|
|
62
|
+
},
|
|
63
|
+
size: {
|
|
64
|
+
/** 12px block / 14px inline padding, 2px rule: a short inline note. */
|
|
65
|
+
sm: 'border-s-2 px-3.5 py-3',
|
|
66
|
+
/** 18px block / 20px inline padding, 3px rule: a supporting aside. */
|
|
67
|
+
md: 'border-s-3 px-5 py-4.5',
|
|
68
|
+
/** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */
|
|
69
|
+
lg: 'border-s-3 px-6 py-5.5',
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
defaultVariants: { variant: 'default', size: 'md' },
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
|
|
76
|
+
export type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>
|
|
77
|
+
|
|
78
|
+
export function Callout(props: CalloutProps) {
|
|
79
|
+
const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
|
|
80
|
+
return (
|
|
81
|
+
<div
|
|
82
|
+
data-slot="callout"
|
|
83
|
+
role="note"
|
|
84
|
+
class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}
|
|
85
|
+
{...rest}
|
|
86
|
+
/>
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* An optional heading line for the callout. It is a styled `div`, not a heading
|
|
92
|
+
* element: a callout sits inside someone else's outline, and a fixed heading
|
|
93
|
+
* level would break it. Pass `role="heading"` with `aria-level` where the
|
|
94
|
+
* content does belong in the outline.
|
|
95
|
+
*
|
|
96
|
+
* The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
|
|
97
|
+
* paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
|
|
98
|
+
* as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
|
|
99
|
+
* from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
|
|
100
|
+
* bare text, the most common body. The unconditional margin is the less
|
|
101
|
+
* surprising failure: it is never missing where text follows. The price is the
|
|
102
|
+
* title-only callout, which would end 4px taller than its padding says. Pass
|
|
103
|
+
* `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
|
|
104
|
+
* shows it.
|
|
105
|
+
*/
|
|
106
|
+
export function CalloutTitle(props: ComponentProps<'div'>) {
|
|
107
|
+
const [local, rest] = splitProps(props, ['class'])
|
|
108
|
+
return (
|
|
109
|
+
<div
|
|
110
|
+
data-slot="callout-title"
|
|
111
|
+
class={cn('mb-1 font-medium tracking-tight', local.class)}
|
|
112
|
+
{...rest}
|
|
113
|
+
/>
|
|
114
|
+
)
|
|
115
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Callout, CalloutTitle, calloutVariants, type CalloutProps } from './callout'
|
package/src/index.ts
CHANGED
|
@@ -27,6 +27,7 @@ export * from './components/ui/breadcrumb'
|
|
|
27
27
|
export * from './components/ui/button'
|
|
28
28
|
export * from './components/ui/button-group'
|
|
29
29
|
export * from './components/ui/calendar'
|
|
30
|
+
export * from './components/ui/callout'
|
|
30
31
|
export * from './components/ui/card'
|
|
31
32
|
export * from './components/ui/checkbox'
|
|
32
33
|
export * from './components/ui/collapsible'
|