sheerly 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -0
- package/lib/accordion.css +1 -1
- package/lib/accordion.d.ts +2 -2
- package/lib/alert.css +1 -1
- package/lib/alert.d.ts +4 -4
- package/lib/avatar.css +1 -1
- package/lib/avatar.d.ts +4 -4
- package/lib/badge.css +1 -1
- package/lib/badge.d.ts +1 -1
- package/lib/breadcrumb.css +1 -1
- package/lib/breadcrumb.d.ts +34 -8
- package/lib/button.css +1 -1
- package/lib/button.d.ts +1 -1
- package/lib/card.css +1 -1
- package/lib/card.d.ts +7 -7
- package/lib/carousel.d.ts +2 -2
- package/lib/checkbox.d.ts +1 -1
- package/lib/dialog.css +1 -1
- package/lib/dialog.d.ts +7 -7
- package/lib/dropdown-menu.css +1 -1
- package/lib/dropdown-menu.d.ts +20 -15
- package/lib/hover-card.css +1 -1
- package/lib/hover-card.d.ts +2 -2
- package/lib/index.css +1 -1
- package/lib/index.js +95 -95
- package/lib/input.css +1 -1
- package/lib/input.d.ts +1 -1
- package/lib/kbd.css +1 -1
- package/lib/kbd.d.ts +2 -2
- package/lib/label.css +1 -1
- package/lib/label.d.ts +1 -1
- package/lib/pagination.css +1 -1
- package/lib/pagination.d.ts +38 -13
- package/lib/popover.css +1 -1
- package/lib/popover.d.ts +2 -2
- package/lib/progress.d.ts +1 -1
- package/lib/radio.d.ts +2 -2
- package/lib/root.css +1 -1
- package/lib/root.terminal.css +1 -0
- package/lib/scrollbar.d.ts +1 -1
- package/lib/select.css +1 -1
- package/lib/select.d.ts +1 -1
- package/lib/separator.d.ts +1 -1
- package/lib/sheet.css +1 -1
- package/lib/sheet.d.ts +7 -7
- package/lib/skeleton.d.ts +1 -1
- package/lib/slider.d.ts +1 -1
- package/lib/spinner.d.ts +1 -1
- package/lib/switch.d.ts +1 -1
- package/lib/table.css +1 -1
- package/lib/table.d.ts +2 -2
- package/lib/tabs.css +1 -1
- package/lib/tabs.d.ts +10 -7
- package/lib/textarea.css +1 -1
- package/lib/textarea.d.ts +1 -1
- package/lib/toggle.css +1 -1
- package/lib/toggle.d.ts +1 -1
- package/lib/tooltip.css +1 -1
- package/lib/tooltip.d.ts +2 -2
- package/lib/typography.css +1 -1
- package/lib/typography.d.ts +1 -1
- package/package.json +17 -15
- package/src/accordion.css +2 -2
- package/src/alert.css +1 -1
- package/src/avatar.css +1 -1
- package/src/badge.css +1 -1
- package/src/breadcrumb.css +1 -1
- package/src/breadcrumb.tsx +67 -20
- package/src/button.css +1 -1
- package/src/card.css +2 -2
- package/src/dialog.css +2 -2
- package/src/dropdown-menu.css +1 -1
- package/src/dropdown-menu.tsx +21 -8
- package/src/hover-card.css +1 -1
- package/src/input.css +1 -1
- package/src/kbd.css +1 -1
- package/src/label.css +1 -1
- package/src/pagination.css +1 -1
- package/src/pagination.tsx +85 -26
- package/src/popover.css +1 -1
- package/src/root.css +6 -0
- package/src/root.terminal.css +77 -0
- package/src/select.css +1 -1
- package/src/sheet.css +2 -2
- package/src/table.css +1 -1
- package/src/tabs.css +1 -1
- package/src/tabs.tsx +16 -9
- package/src/textarea.css +1 -1
- package/src/toggle.css +1 -1
- package/src/tooltip.css +1 -1
- package/src/typography.css +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,51 @@
|
|
|
1
1
|
# Sheerly
|
|
2
2
|
|
|
3
3
|
A minimal, CSS-only component library.
|
|
4
|
+
|
|
5
|
+
## Getting Started
|
|
6
|
+
|
|
7
|
+
Using React:
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import "sheerly/lib/index.css";
|
|
11
|
+
import { Alert, AlertTitle, AlertDescription } from "sheerly";
|
|
12
|
+
export default function App() {
|
|
13
|
+
return (
|
|
14
|
+
<Alert data-variant="success" role="alert">
|
|
15
|
+
<AlertTitle>Sheerly loaded!</AlertTitle>
|
|
16
|
+
<AlertDescription>You are now using Sheerly!</AlertDescription>
|
|
17
|
+
</Alert>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Using plain HTML:
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<!doctype html>
|
|
26
|
+
<html lang="en">
|
|
27
|
+
<head>
|
|
28
|
+
<meta charset="UTF-8" />
|
|
29
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
30
|
+
<title>Sheerly</title>
|
|
31
|
+
<link href="https://raw.esm.sh/sheerly/lib/index.css" rel="stylesheet" />
|
|
32
|
+
<link
|
|
33
|
+
href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&display=swap"
|
|
34
|
+
rel="stylesheet"
|
|
35
|
+
/>
|
|
36
|
+
<style>
|
|
37
|
+
body {
|
|
38
|
+
background-color: var(--sheerly-background);
|
|
39
|
+
color: var(--sheerly-foreground);
|
|
40
|
+
font-family: var(--sheerly-font-sans);
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
43
|
+
</head>
|
|
44
|
+
<body>
|
|
45
|
+
<div class="sheerly-alert" data-variant="success" role="alert">
|
|
46
|
+
<div class="sheerly-alert-title">Sheerly loaded!</div>
|
|
47
|
+
<div class="sheerly-alert-description">You are now using Sheerly!</div>
|
|
48
|
+
</div>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|
|
51
|
+
```
|
package/lib/accordion.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-accordion{interpolate-size:allow-keywords}.sheerly-accordion:not(:last-of-type){border-bottom:1px solid var(--sheerly-border)}.sheerly-accordion summary{border-radius:var(--sheerly-radius-lg);color:var(--sheerly-foreground);cursor:pointer;border:1px solid #0000;outline:none;justify-content:space-between;align-items:flex-start;gap:16px;padding:10px 0;font-
|
|
1
|
+
.sheerly-accordion{interpolate-size:allow-keywords}.sheerly-accordion:not(:last-of-type){border-bottom:1px solid var(--sheerly-border)}.sheerly-accordion summary{border-radius:var(--sheerly-radius-lg);font-family:var(--sheerly-font-sans);color:var(--sheerly-foreground);cursor:pointer;border:1px solid #0000;outline:none;justify-content:space-between;align-items:flex-start;gap:16px;padding:10px 0;font-size:14px;font-weight:500;line-height:20px;list-style:none;transition:box-shadow .15s,border-color .15s;display:flex}.sheerly-accordion summary::-webkit-details-marker{display:none}.sheerly-accordion summary::marker{content:""}.sheerly-accordion summary:after{content:"";background-color:var(--sheerly-muted-foreground);flex-shrink:0;width:16px;height:16px;transition:rotate .2s;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.sheerly-accordion summary:hover{text-decoration:underline}.sheerly-accordion summary:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-accordion .sheerly-accordion-content{font-family:var(--sheerly-font-sans);color:var(--sheerly-muted-foreground);padding-top:0;padding-bottom:10px;font-size:14px;font-weight:400;line-height:20px}.sheerly-accordion .sheerly-accordion-content a{text-underline-offset:3px;text-decoration:underline}.sheerly-accordion .sheerly-accordion-content a:hover{color:var(--sheerly-foreground)}.sheerly-accordion .sheerly-accordion-content p:not(:last-child){margin-bottom:16px}.sheerly-accordion::details-content{opacity:0;transition-behavior:allow-discrete;height:0;transition:height .2s,content-visibility .2s,opacity .2s;overflow:hidden}.sheerly-accordion[open]::details-content{opacity:1;height:auto}.sheerly-accordion[open]>summary:after{rotate:180deg}
|
package/lib/accordion.d.ts
CHANGED
|
@@ -10,6 +10,6 @@ export type AccordionProps = DetailsHTMLAttributes<HTMLDetailsElement>;
|
|
|
10
10
|
* <AccordionContent>Yes.</AccordionContent>
|
|
11
11
|
* </Accordion>
|
|
12
12
|
*/
|
|
13
|
-
export declare function Accordion({ className, ...props }: AccordionProps): import(
|
|
13
|
+
export declare function Accordion({ className, ...props }: AccordionProps): import('react').JSX.Element;
|
|
14
14
|
export type AccordionContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
15
|
-
export declare function AccordionContent<T extends ElementType = 'div'>({ as, className, ...props }: AccordionContentProps<T>): import(
|
|
15
|
+
export declare function AccordionContent<T extends ElementType = 'div'>({ as, className, ...props }: AccordionContentProps<T>): import('react').JSX.Element;
|
package/lib/alert.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-alert{border-radius:var(--sheerly-radius-lg);background-color:var(--sheerly-card);width:100%;color:var(--sheerly-card-foreground);box-shadow:0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);text-align:left;border:1px solid #0000;grid-template-columns:auto 1fr;gap:2px 8px;padding:8px 10px;font-
|
|
1
|
+
.sheerly-alert{border-radius:var(--sheerly-radius-lg);background-color:var(--sheerly-card);width:100%;color:var(--sheerly-card-foreground);box-shadow:0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);font-family:var(--sheerly-font-sans);text-align:left;border:1px solid #0000;grid-template-columns:auto 1fr;gap:2px 8px;padding:8px 10px;font-size:14px;line-height:20px;display:grid;position:relative}.sheerly-alert:before{content:"";background-color:currentColor;flex-shrink:0;grid-row:1/span 2;align-self:start;width:16px;height:16px;translate:0 2px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") 50%/contain no-repeat}.sheerly-alert>*{grid-column:2}.sheerly-alert[data-variant=destructive]{color:var(--sheerly-destructive)}.sheerly-alert[data-variant=destructive]:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E")}.sheerly-alert[data-variant=destructive] .sheerly-alert-description{color:oklch(from var(--sheerly-destructive) l c h / 90%)}.sheerly-alert[data-variant=success]{color:oklch(52.7% .132 152.53)}.sheerly-alert[data-variant=success]:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E")}.sheerly-alert[data-variant=warning]{color:oklch(55.3% .135 66.44)}.sheerly-alert[data-variant=warning]:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}.sheerly-alert[data-variant=info]{color:oklch(48.8% .243 264.38)}.sheerly-alert-title{color:inherit;letter-spacing:-.006em;font-weight:500;line-height:20px}.sheerly-alert-title a{text-underline-offset:3px;text-decoration:underline}.sheerly-alert-title a:hover{color:var(--sheerly-foreground)}.sheerly-alert-description{color:var(--sheerly-muted-foreground);text-wrap:balance;font-size:14px;line-height:20px}.sheerly-alert-description a{text-underline-offset:3px;text-decoration:underline}.sheerly-alert-description a:hover{color:var(--sheerly-foreground)}.sheerly-alert-description p:not(:last-child){margin-bottom:16px}.sheerly-alert-action{grid-column:auto;position:absolute;top:8px;right:8px}
|
package/lib/alert.d.ts
CHANGED
|
@@ -14,10 +14,10 @@ export type AlertProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
|
|
|
14
14
|
* <AlertDescription>Your session expires soon.</AlertDescription>
|
|
15
15
|
* </Alert>
|
|
16
16
|
*/
|
|
17
|
-
export declare function Alert<T extends ElementType = 'div'>({ as, className, ...props }: AlertProps<T>): import(
|
|
17
|
+
export declare function Alert<T extends ElementType = 'div'>({ as, className, ...props }: AlertProps<T>): import('react').JSX.Element;
|
|
18
18
|
export type AlertTitleProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
19
|
-
export declare function AlertTitle<T extends ElementType = 'div'>({ as, className, ...props }: AlertTitleProps<T>): import(
|
|
19
|
+
export declare function AlertTitle<T extends ElementType = 'div'>({ as, className, ...props }: AlertTitleProps<T>): import('react').JSX.Element;
|
|
20
20
|
export type AlertDescriptionProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
21
|
-
export declare function AlertDescription<T extends ElementType = 'div'>({ as, className, ...props }: AlertDescriptionProps<T>): import(
|
|
21
|
+
export declare function AlertDescription<T extends ElementType = 'div'>({ as, className, ...props }: AlertDescriptionProps<T>): import('react').JSX.Element;
|
|
22
22
|
export type AlertActionProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
23
|
-
export declare function AlertAction<T extends ElementType = 'div'>({ as, className, ...props }: AlertActionProps<T>): import(
|
|
23
|
+
export declare function AlertAction<T extends ElementType = 'div'>({ as, className, ...props }: AlertActionProps<T>): import('react').JSX.Element;
|
package/lib/avatar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-avatar{border-radius:var(--sheerly-radius-full);-webkit-user-select:none;user-select:none;flex-shrink:0;width:32px;height:32px;display:flex;overflow:hidden}.sheerly-avatar[data-size=sm]{width:24px;height:24px}.sheerly-avatar[data-size=lg]{width:40px;height:40px}.sheerly-avatar[data-size=xl]{width:56px;height:56px}.sheerly-avatar img{aspect-ratio:1;object-fit:cover;width:100%;height:100%}.sheerly-avatar-fallback{border-radius:var(--sheerly-radius-full);background-color:var(--sheerly-muted);width:100%;height:100%;color:var(--sheerly-muted-foreground);justify-content:center;align-items:center;font-
|
|
1
|
+
.sheerly-avatar{border-radius:var(--sheerly-radius-full);-webkit-user-select:none;user-select:none;flex-shrink:0;width:32px;height:32px;display:flex;overflow:hidden}.sheerly-avatar[data-size=sm]{width:24px;height:24px}.sheerly-avatar[data-size=lg]{width:40px;height:40px}.sheerly-avatar[data-size=xl]{width:56px;height:56px}.sheerly-avatar img{aspect-ratio:1;object-fit:cover;width:100%;height:100%}.sheerly-avatar-fallback{border-radius:var(--sheerly-radius-full);background-color:var(--sheerly-muted);width:100%;height:100%;font-family:var(--sheerly-font-sans);color:var(--sheerly-muted-foreground);justify-content:center;align-items:center;font-size:14px;font-weight:500;display:flex}.sheerly-avatar[data-size=sm] .sheerly-avatar-fallback{font-size:11px}.sheerly-avatar[data-size=lg] .sheerly-avatar-fallback{font-size:16px}.sheerly-avatar[data-size=xl] .sheerly-avatar-fallback{font-size:20px}.sheerly-avatar-group{display:flex}.sheerly-avatar-group .sheerly-avatar{box-shadow:0 0 0 2px var(--sheerly-background)}.sheerly-avatar-group .sheerly-avatar+.sheerly-avatar{margin-left:-8px}
|
package/lib/avatar.d.ts
CHANGED
|
@@ -15,12 +15,12 @@ export type AvatarProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
|
|
|
15
15
|
* <AvatarFallback>AL</AvatarFallback>
|
|
16
16
|
* </Avatar>
|
|
17
17
|
*/
|
|
18
|
-
export declare function Avatar<T extends ElementType = 'div'>({ as, className, ...props }: AvatarProps<T>): import(
|
|
18
|
+
export declare function Avatar<T extends ElementType = 'div'>({ as, className, ...props }: AvatarProps<T>): import('react').JSX.Element;
|
|
19
19
|
export interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
|
|
20
20
|
alt: string;
|
|
21
21
|
}
|
|
22
|
-
export declare function AvatarImage(props: AvatarImageProps): import(
|
|
22
|
+
export declare function AvatarImage(props: AvatarImageProps): import('react').JSX.Element;
|
|
23
23
|
export type AvatarFallbackProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
|
|
24
|
-
export declare function AvatarFallback<T extends ElementType = 'span'>({ as, className, ...props }: AvatarFallbackProps<T>): import(
|
|
24
|
+
export declare function AvatarFallback<T extends ElementType = 'span'>({ as, className, ...props }: AvatarFallbackProps<T>): import('react').JSX.Element;
|
|
25
25
|
export type AvatarGroupProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
26
|
-
export declare function AvatarGroup<T extends ElementType = 'div'>({ as, className, ...props }: AvatarGroupProps<T>): import(
|
|
26
|
+
export declare function AvatarGroup<T extends ElementType = 'div'>({ as, className, ...props }: AvatarGroupProps<T>): import('react').JSX.Element;
|
package/lib/badge.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-badge{border-radius:var(--sheerly-radius-full);white-space:nowrap;background-color:var(--sheerly-foreground);
|
|
1
|
+
.sheerly-badge{border-radius:var(--sheerly-radius-full);width:fit-content;font-family:var(--sheerly-font-sans);white-space:nowrap;background-color:var(--sheerly-foreground);color:var(--sheerly-background);border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:2px 8px;font-size:12px;font-weight:500;line-height:16px;transition:background-color .15s,color .15s;display:inline-flex;overflow:hidden}.sheerly-badge svg{pointer-events:none;flex-shrink:0;width:12px;height:12px}.sheerly-badge[data-variant=secondary]{background-color:var(--sheerly-muted);color:var(--sheerly-muted-foreground)}.sheerly-badge[data-variant=destructive]{background-color:var(--sheerly-destructive);color:#fff}.sheerly-badge[data-variant=outline]{border-color:var(--sheerly-border);color:var(--sheerly-foreground);background-color:#0000}.sheerly-badge[data-variant=ghost]{color:var(--sheerly-foreground);background-color:#0000}.sheerly-badge[data-variant=success]{color:oklch(39.3% .095 152.53);background-color:oklch(96.2% .044 156.64)}.sheerly-badge[data-variant=warning]{color:oklch(55.3% .135 66.44);background-color:oklch(96.2% .059 95.27)}.sheerly-badge[data-variant=error]{color:oklch(44.4% .177 26.9);background-color:oklch(93.6% .032 17.72)}.sheerly-badge[data-variant=blue]{color:oklch(48.8% .243 264.38);background-color:oklch(93.2% .032 255.59)}
|
package/lib/badge.d.ts
CHANGED
|
@@ -12,4 +12,4 @@ export type BadgeProps<T extends ElementType = 'span'> = PolymorphicProps<T, {
|
|
|
12
12
|
* @example
|
|
13
13
|
* <Badge data-variant="success">Active</Badge>
|
|
14
14
|
*/
|
|
15
|
-
export declare function Badge<T extends ElementType = 'span'>({ as, className, ...props }: BadgeProps<T>): import(
|
|
15
|
+
export declare function Badge<T extends ElementType = 'span'>({ as, className, ...props }: BadgeProps<T>): import('react').JSX.Element;
|
package/lib/breadcrumb.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-breadcrumb{font-family:
|
|
1
|
+
.sheerly-breadcrumb{font-family:var(--sheerly-font-sans)}.sheerly-breadcrumb-list{color:var(--sheerly-muted-foreground);word-break:break-word;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;font-size:14px;line-height:20px;list-style:none;display:flex}@media (width>=640px){.sheerly-breadcrumb-list{gap:10px}}.sheerly-breadcrumb-item{align-items:center;gap:6px;display:inline-flex}.sheerly-breadcrumb-link{color:inherit;border-radius:var(--sheerly-radius-sm);cursor:pointer;outline:none;align-items:center;gap:4px;text-decoration:none;transition:color .15s;display:inline-flex}.sheerly-breadcrumb-link:hover{color:var(--sheerly-foreground)}.sheerly-breadcrumb-link:focus-visible{color:var(--sheerly-foreground);box-shadow:var(--sheerly-focus-ring)}.sheerly-breadcrumb-link svg{pointer-events:none;flex-shrink:0;width:14px;height:14px}.sheerly-breadcrumb-page{color:var(--sheerly-foreground);align-items:center;gap:4px;font-weight:400;display:inline-flex}.sheerly-breadcrumb-page svg{pointer-events:none;flex-shrink:0;width:14px;height:14px}.sheerly-breadcrumb-separator{color:var(--sheerly-muted-foreground);justify-content:center;align-items:center;display:inline-flex}.sheerly-breadcrumb-separator svg{width:14px;height:14px}.sheerly-breadcrumb-separator:empty:after{content:"";background-color:currentColor;width:14px;height:14px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") 50%/contain no-repeat}.sheerly-breadcrumb-ellipsis{border-radius:var(--sheerly-radius-lg);width:28px;height:28px;color:var(--sheerly-foreground);background-color:#0000;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex}.sheerly-breadcrumb-ellipsis svg{width:16px;height:16px}.sheerly-breadcrumb-ellipsis:empty:before{content:"";background-color:currentColor;width:16px;height:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E") 50%/contain no-repeat}.sheerly-breadcrumb-ellipsis:is(button,[role=button],a){cursor:pointer}.sheerly-breadcrumb-ellipsis:is(button,[role=button],a):hover{background-color:var(--sheerly-accent);color:var(--sheerly-accent-foreground)}.sheerly-breadcrumb-ellipsis:is(button,[role=button],a):focus-visible{background-color:var(--sheerly-accent);color:var(--sheerly-accent-foreground);box-shadow:var(--sheerly-focus-ring)}
|
package/lib/breadcrumb.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ElementType } from 'react';
|
|
2
2
|
import { PolymorphicProps } from './utils/polymorphic';
|
|
3
|
+
export type BreadcrumbProps<T extends ElementType = 'nav'> = PolymorphicProps<T>;
|
|
3
4
|
/**
|
|
4
5
|
* A path hierarchy of links.
|
|
5
6
|
*
|
|
7
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `nav`).
|
|
8
|
+
*
|
|
6
9
|
* @example
|
|
7
10
|
* <Breadcrumb>
|
|
8
11
|
* <BreadcrumbList>
|
|
@@ -12,12 +15,35 @@ import { PolymorphicProps } from './utils/polymorphic';
|
|
|
12
15
|
* </BreadcrumbList>
|
|
13
16
|
* </Breadcrumb>
|
|
14
17
|
*/
|
|
15
|
-
export declare function Breadcrumb({ className, ...props }:
|
|
16
|
-
export
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
export declare function Breadcrumb<T extends ElementType = 'nav'>({ as, className, ...props }: BreadcrumbProps<T>): import('react').JSX.Element;
|
|
19
|
+
export type BreadcrumbListProps<T extends ElementType = 'ol'> = PolymorphicProps<T>;
|
|
20
|
+
/**
|
|
21
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `ol`).
|
|
22
|
+
*/
|
|
23
|
+
export declare function BreadcrumbList<T extends ElementType = 'ol'>({ as, className, ...props }: BreadcrumbListProps<T>): import('react').JSX.Element;
|
|
24
|
+
export type BreadcrumbItemProps<T extends ElementType = 'li'> = PolymorphicProps<T>;
|
|
25
|
+
/**
|
|
26
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
|
|
27
|
+
*/
|
|
28
|
+
export declare function BreadcrumbItem<T extends ElementType = 'li'>({ as, className, ...props }: BreadcrumbItemProps<T>): import('react').JSX.Element;
|
|
29
|
+
export type BreadcrumbLinkProps<T extends ElementType = 'a'> = PolymorphicProps<T>;
|
|
30
|
+
/**
|
|
31
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
|
|
32
|
+
* `as={Link}` for a router link).
|
|
33
|
+
*/
|
|
34
|
+
export declare function BreadcrumbLink<T extends ElementType = 'a'>({ as, className, ...props }: BreadcrumbLinkProps<T>): import('react').JSX.Element;
|
|
19
35
|
export type BreadcrumbPageProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
|
|
20
|
-
|
|
21
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
|
|
38
|
+
*/
|
|
39
|
+
export declare function BreadcrumbPage<T extends ElementType = 'span'>({ as, className, ...props }: BreadcrumbPageProps<T>): import('react').JSX.Element;
|
|
40
|
+
export type BreadcrumbSeparatorProps<T extends ElementType = 'li'> = PolymorphicProps<T>;
|
|
41
|
+
/**
|
|
42
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
|
|
43
|
+
*/
|
|
44
|
+
export declare function BreadcrumbSeparator<T extends ElementType = 'li'>({ as, className, ...props }: BreadcrumbSeparatorProps<T>): import('react').JSX.Element;
|
|
22
45
|
export type BreadcrumbEllipsisProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
|
|
23
|
-
|
|
46
|
+
/**
|
|
47
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
|
|
48
|
+
*/
|
|
49
|
+
export declare function BreadcrumbEllipsis<T extends ElementType = 'span'>({ as, className, ...props }: BreadcrumbEllipsisProps<T>): import('react').JSX.Element;
|
package/lib/button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-button{white-space:nowrap;border-radius:var(--sheerly-radius-lg);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;background-color:var(--sheerly-primary);color:var(--sheerly-primary-foreground);border:1px solid #0000;outline:none;flex-shrink:0;justify-content:center;align-items:center;gap:6px;height:32px;padding:0 10px;font-
|
|
1
|
+
.sheerly-button{white-space:nowrap;border-radius:var(--sheerly-radius-lg);font-family:var(--sheerly-font-sans);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;background-color:var(--sheerly-primary);color:var(--sheerly-primary-foreground);border:1px solid #0000;outline:none;flex-shrink:0;justify-content:center;align-items:center;gap:6px;height:32px;padding:0 10px;font-size:14px;font-weight:500;line-height:20px;text-decoration:none;transition:all .15s;display:inline-flex}.sheerly-button:hover{background-color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-button:active:not([aria-haspopup]){translate:0 1px}.sheerly-button:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-button:disabled{pointer-events:none;opacity:.5}.sheerly-button svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}.sheerly-button [data-icon=inline-start]{margin-inline-start:-2px}.sheerly-button [data-icon=inline-end]{margin-inline-end:-2px}.sheerly-button[data-rounded=full]{border-radius:var(--sheerly-radius-full)}.sheerly-button[data-variant=default],.sheerly-button[data-variant=primary]{background-color:var(--sheerly-primary);color:var(--sheerly-primary-foreground)}:is(.sheerly-button[data-variant=default],.sheerly-button[data-variant=primary]):hover{background-color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-button[data-variant=secondary]{background-color:var(--sheerly-secondary);color:var(--sheerly-secondary-foreground)}.sheerly-button[data-variant=secondary]:hover{background-color:color-mix(in oklch, var(--sheerly-secondary), var(--sheerly-foreground) 5%)}.sheerly-button[data-variant=tertiary],.sheerly-button[data-variant=ghost]{color:var(--sheerly-foreground);background-color:#0000}:is(.sheerly-button[data-variant=tertiary],.sheerly-button[data-variant=ghost]):hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-button[data-variant=muted]{background-color:var(--sheerly-muted);color:var(--sheerly-muted-foreground)}.sheerly-button[data-variant=muted]:hover{background-color:color-mix(in oklch, var(--sheerly-muted), var(--sheerly-foreground) 5%)}.sheerly-button[data-variant=destructive],.sheerly-button[data-variant=error]{background-color:oklch(from var(--sheerly-destructive) l c h / 10%);color:var(--sheerly-destructive)}:is(.sheerly-button[data-variant=destructive],.sheerly-button[data-variant=error]):hover{background-color:oklch(from var(--sheerly-destructive) l c h / 20%)}:is(.sheerly-button[data-variant=destructive],.sheerly-button[data-variant=error]):focus-visible{border-color:oklch(from var(--sheerly-destructive) l c h / 40%);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-button[data-variant=outline]{background-color:var(--sheerly-background);color:var(--sheerly-foreground);border-color:var(--sheerly-border)}.sheerly-button[data-variant=outline]:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-button[data-variant=link]{color:var(--sheerly-primary);text-underline-offset:4px;background-color:#0000;border:none;height:auto;padding:0}.sheerly-button[data-variant=link]:hover{text-decoration:underline}.sheerly-button[data-size=xs]{border-radius:var(--sheerly-radius-md);gap:4px;height:24px;padding:0 8px;font-size:12px}.sheerly-button[data-size=xs] svg{width:14px;height:14px}.sheerly-button[data-size=sm]{border-radius:var(--sheerly-radius-md);gap:4px;height:28px;padding:0 10px;font-size:13px}.sheerly-button[data-size=default]{height:32px;padding:0 10px}.sheerly-button[data-size=lg]{height:36px;padding:0 10px}.sheerly-button[data-size=icon]{width:32px;height:32px;padding:0}.sheerly-button[data-size=icon-xs]{border-radius:var(--sheerly-radius-md);width:24px;height:24px;padding:0}.sheerly-button[data-size=icon-xs] svg{width:14px;height:14px}.sheerly-button[data-size=icon-sm]{border-radius:var(--sheerly-radius-md);width:28px;height:28px;padding:0}.sheerly-button[data-size=icon-lg]{width:36px;height:36px;padding:0}
|
package/lib/button.d.ts
CHANGED
|
@@ -13,4 +13,4 @@ export type ButtonProps<T extends ElementType = 'button'> = PolymorphicProps<T,
|
|
|
13
13
|
* <Button data-variant="secondary">Save</Button>
|
|
14
14
|
* <Button as="a" role="button" href="/settings">Settings</Button>
|
|
15
15
|
*/
|
|
16
|
-
export declare function Button<T extends ElementType = 'button'>({ as, className, ...props }: ButtonProps<T>): import(
|
|
16
|
+
export declare function Button<T extends ElementType = 'button'>({ as, className, ...props }: ButtonProps<T>): import('react').JSX.Element;
|
package/lib/card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-card{--sheerly-card-spacing:16px;gap:var(--sheerly-card-spacing);border-radius:var(--sheerly-radius-xl);background-color:var(--sheerly-card);color:var(--sheerly-card-foreground);box-shadow:inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);padding-block:var(--sheerly-card-spacing);flex-direction:column;font-size:14px;line-height:20px;display:flex;overflow:hidden}.sheerly-card:has(.sheerly-card-footer){padding-bottom:0}.sheerly-card:has(>img:first-child){padding-top:0}.sheerly-card[data-size=sm]{--sheerly-card-spacing:12px}.sheerly-card>img:first-child{border-radius:var(--sheerly-radius-xl) var(--sheerly-radius-xl) 0 0}.sheerly-card-header{auto-rows:min-content;border-radius:var(--sheerly-radius-xl) var(--sheerly-radius-xl) 0 0;padding-inline:var(--sheerly-card-spacing);grid-template-rows:auto;align-items:start;gap:4px;display:grid}.sheerly-card-header:has(.sheerly-card-action){grid-template-columns:1fr auto}.sheerly-card-header:has(.sheerly-card-description){grid-template-rows:auto auto}.sheerly-card-title{color:var(--sheerly-card-foreground);margin:0;font-
|
|
1
|
+
.sheerly-card{--sheerly-card-spacing:16px;gap:var(--sheerly-card-spacing);border-radius:var(--sheerly-radius-xl);background-color:var(--sheerly-card);color:var(--sheerly-card-foreground);box-shadow:inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);padding-block:var(--sheerly-card-spacing);flex-direction:column;font-size:14px;line-height:20px;display:flex;overflow:hidden}.sheerly-card:has(.sheerly-card-footer){padding-bottom:0}.sheerly-card:has(>img:first-child){padding-top:0}.sheerly-card[data-size=sm]{--sheerly-card-spacing:12px}.sheerly-card>img:first-child{border-radius:var(--sheerly-radius-xl) var(--sheerly-radius-xl) 0 0}.sheerly-card-header{auto-rows:min-content;border-radius:var(--sheerly-radius-xl) var(--sheerly-radius-xl) 0 0;padding-inline:var(--sheerly-card-spacing);grid-template-rows:auto;align-items:start;gap:4px;display:grid}.sheerly-card-header:has(.sheerly-card-action){grid-template-columns:1fr auto}.sheerly-card-header:has(.sheerly-card-description){grid-template-rows:auto auto}.sheerly-card-title{font-family:var(--sheerly-font-sans);color:var(--sheerly-card-foreground);margin:0;font-size:16px;font-weight:500;line-height:1.3}.sheerly-card-description{font-family:var(--sheerly-font-sans);color:var(--sheerly-muted-foreground);margin:0;font-size:14px;font-weight:400;line-height:20px}.sheerly-card-action{grid-area:1/2/-1;place-self:start end}.sheerly-card-content{padding-inline:var(--sheerly-card-spacing)}.sheerly-card-footer{border-radius:0 0 var(--sheerly-radius-xl) var(--sheerly-radius-xl);border-top:1px solid var(--sheerly-border);background-color:oklch(from var(--sheerly-muted) l c h / 50%);padding:var(--sheerly-card-spacing);align-items:center;gap:8px;display:flex}.sheerly-card-footer[data-direction=column]{flex-direction:column}.sheerly-card-footer[data-direction=column]>*{width:100%}
|
package/lib/card.d.ts
CHANGED
|
@@ -17,18 +17,18 @@ export type CardProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
|
|
|
17
17
|
* <CardContent>…</CardContent>
|
|
18
18
|
* </Card>
|
|
19
19
|
*/
|
|
20
|
-
export declare function Card<T extends ElementType = 'div'>({ as, className, ...props }: CardProps<T>): import(
|
|
20
|
+
export declare function Card<T extends ElementType = 'div'>({ as, className, ...props }: CardProps<T>): import('react').JSX.Element;
|
|
21
21
|
export type CardHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
22
|
-
export declare function CardHeader<T extends ElementType = 'div'>({ as, className, ...props }: CardHeaderProps<T>): import(
|
|
22
|
+
export declare function CardHeader<T extends ElementType = 'div'>({ as, className, ...props }: CardHeaderProps<T>): import('react').JSX.Element;
|
|
23
23
|
export type CardTitleProps<T extends ElementType = 'h3'> = PolymorphicProps<T>;
|
|
24
|
-
export declare function CardTitle<T extends ElementType = 'h3'>({ as, className, ...props }: CardTitleProps<T>): import(
|
|
24
|
+
export declare function CardTitle<T extends ElementType = 'h3'>({ as, className, ...props }: CardTitleProps<T>): import('react').JSX.Element;
|
|
25
25
|
export type CardDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<T>;
|
|
26
|
-
export declare function CardDescription<T extends ElementType = 'p'>({ as, className, ...props }: CardDescriptionProps<T>): import(
|
|
26
|
+
export declare function CardDescription<T extends ElementType = 'p'>({ as, className, ...props }: CardDescriptionProps<T>): import('react').JSX.Element;
|
|
27
27
|
export type CardActionProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
28
|
-
export declare function CardAction<T extends ElementType = 'div'>({ as, className, ...props }: CardActionProps<T>): import(
|
|
28
|
+
export declare function CardAction<T extends ElementType = 'div'>({ as, className, ...props }: CardActionProps<T>): import('react').JSX.Element;
|
|
29
29
|
export type CardContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
30
|
-
export declare function CardContent<T extends ElementType = 'div'>({ as, className, ...props }: CardContentProps<T>): import(
|
|
30
|
+
export declare function CardContent<T extends ElementType = 'div'>({ as, className, ...props }: CardContentProps<T>): import('react').JSX.Element;
|
|
31
31
|
export type CardFooterProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
|
|
32
32
|
'data-direction'?: 'column';
|
|
33
33
|
}>;
|
|
34
|
-
export declare function CardFooter<T extends ElementType = 'div'>({ as, className, ...props }: CardFooterProps<T>): import(
|
|
34
|
+
export declare function CardFooter<T extends ElementType = 'div'>({ as, className, ...props }: CardFooterProps<T>): import('react').JSX.Element;
|
package/lib/carousel.d.ts
CHANGED
|
@@ -19,9 +19,9 @@ export type CarouselProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
|
19
19
|
* <CarouselItem data-name="Slide 2">…</CarouselItem>
|
|
20
20
|
* </Carousel>
|
|
21
21
|
*/
|
|
22
|
-
export declare function Carousel<T extends ElementType = 'div'>({ as, className, ...props }: CarouselProps<T>): import(
|
|
22
|
+
export declare function Carousel<T extends ElementType = 'div'>({ as, className, ...props }: CarouselProps<T>): import('react').JSX.Element;
|
|
23
23
|
export type CarouselItemProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
|
|
24
24
|
'data-name'?: string;
|
|
25
25
|
}>;
|
|
26
26
|
/** A slide. Defaults to `width: 100%` (one per page); override via `style`/`className`. */
|
|
27
|
-
export declare function CarouselItem<T extends ElementType = 'div'>({ as, className, ...props }: CarouselItemProps<T>): import(
|
|
27
|
+
export declare function CarouselItem<T extends ElementType = 'div'>({ as, className, ...props }: CarouselItemProps<T>): import('react').JSX.Element;
|
package/lib/checkbox.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
|
|
|
6
6
|
* @example
|
|
7
7
|
* <Checkbox id="terms" defaultChecked />
|
|
8
8
|
*/
|
|
9
|
-
export declare function Checkbox({ className, ...props }: CheckboxProps): import(
|
|
9
|
+
export declare function Checkbox({ className, ...props }: CheckboxProps): import('react').JSX.Element;
|
package/lib/dialog.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-dialog{z-index:50;border-radius:var(--sheerly-radius-xl);background-color:var(--sheerly-popover);width:calc(100% - 32px);max-width:384px;max-height:calc(100dvh - 64px);color:var(--sheerly-popover-foreground);box-shadow:0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);opacity:0;transition:opacity .1s ease, scale .1s ease, display .1s allow-discrete, overlay .1s allow-discrete;border:none;outline:none;flex-direction:column;margin:0;padding:0;font-size:14px;line-height:20px;display:none;position:fixed;top:50%;left:50%;overflow:hidden;translate:-50% -50%;scale:.95}.sheerly-dialog[open]{opacity:1;display:flex;scale:1}@starting-style{.sheerly-dialog[open]{opacity:0;scale:.95}}.sheerly-dialog::backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;transition:opacity .1s ease, overlay .1s allow-discrete, display .1s allow-discrete;background-color:oklch(0% 0 0/.1)}.sheerly-dialog[open]::backdrop{opacity:1}@starting-style{.sheerly-dialog[open]::backdrop{opacity:0}}.sheerly-dialog-header{flex-direction:column;flex-shrink:0;gap:4px;padding:16px 16px 0;display:flex}.sheerly-dialog-title{color:var(--sheerly-popover-foreground);margin:0;padding-right:32px;font-
|
|
1
|
+
.sheerly-dialog{z-index:50;border-radius:var(--sheerly-radius-xl);background-color:var(--sheerly-popover);width:calc(100% - 32px);max-width:384px;max-height:calc(100dvh - 64px);color:var(--sheerly-popover-foreground);box-shadow:0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);opacity:0;transition:opacity .1s ease, scale .1s ease, display .1s allow-discrete, overlay .1s allow-discrete;border:none;outline:none;flex-direction:column;margin:0;padding:0;font-size:14px;line-height:20px;display:none;position:fixed;top:50%;left:50%;overflow:hidden;translate:-50% -50%;scale:.95}.sheerly-dialog[open]{opacity:1;display:flex;scale:1}@starting-style{.sheerly-dialog[open]{opacity:0;scale:.95}}.sheerly-dialog::backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;transition:opacity .1s ease, overlay .1s allow-discrete, display .1s allow-discrete;background-color:oklch(0% 0 0/.1)}.sheerly-dialog[open]::backdrop{opacity:1}@starting-style{.sheerly-dialog[open]::backdrop{opacity:0}}.sheerly-dialog-header{flex-direction:column;flex-shrink:0;gap:4px;padding:16px 16px 0;display:flex}.sheerly-dialog-title{font-family:var(--sheerly-font-sans);color:var(--sheerly-popover-foreground);margin:0;padding-right:32px;font-size:16px;font-weight:500;line-height:1}.sheerly-dialog-description{font-family:var(--sheerly-font-sans);color:var(--sheerly-muted-foreground);margin:0;font-size:14px;font-weight:400;line-height:20px}.sheerly-dialog-body{flex:1;padding:16px;overflow-y:auto}.sheerly-dialog-footer{border-top:1px solid var(--sheerly-border);border-radius:0 0 var(--sheerly-radius-xl) var(--sheerly-radius-xl);background-color:oklch(from var(--sheerly-muted) l c h / 50%);flex-shrink:0;justify-content:flex-end;gap:8px;padding:16px;display:flex}.sheerly-dialog-footer[data-direction=column]{flex-direction:column}.sheerly-dialog-footer[data-direction=column]>*{width:100%}.sheerly-dialog-close{border-radius:var(--sheerly-radius-md);width:28px;height:28px;color:var(--sheerly-muted-foreground);cursor:pointer;z-index:1;background-color:#0000;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex;position:absolute;top:8px;right:8px}.sheerly-dialog-close:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-dialog-close:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-dialog-close svg{width:16px;height:16px}.sheerly-dialog-close:empty:before{content:"";background-color:currentColor;width:16px;height:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") 50%/contain no-repeat}
|
package/lib/dialog.d.ts
CHANGED
|
@@ -11,17 +11,17 @@ import { PolymorphicProps } from './utils/polymorphic';
|
|
|
11
11
|
* <DialogFooter><DialogClose command="close" commandfor="d">Cancel</DialogClose></DialogFooter>
|
|
12
12
|
* </Dialog>
|
|
13
13
|
*/
|
|
14
|
-
export declare function Dialog({ className, ...props }: DialogHTMLAttributes<HTMLDialogElement>): import(
|
|
14
|
+
export declare function Dialog({ className, ...props }: DialogHTMLAttributes<HTMLDialogElement>): import('react').JSX.Element;
|
|
15
15
|
export type DialogHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
16
|
-
export declare function DialogHeader<T extends ElementType = 'div'>({ as, className, ...props }: DialogHeaderProps<T>): import(
|
|
16
|
+
export declare function DialogHeader<T extends ElementType = 'div'>({ as, className, ...props }: DialogHeaderProps<T>): import('react').JSX.Element;
|
|
17
17
|
export type DialogTitleProps<T extends ElementType = 'h3'> = PolymorphicProps<T>;
|
|
18
|
-
export declare function DialogTitle<T extends ElementType = 'h3'>({ as, className, ...props }: DialogTitleProps<T>): import(
|
|
18
|
+
export declare function DialogTitle<T extends ElementType = 'h3'>({ as, className, ...props }: DialogTitleProps<T>): import('react').JSX.Element;
|
|
19
19
|
export type DialogDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<T>;
|
|
20
|
-
export declare function DialogDescription<T extends ElementType = 'p'>({ as, className, ...props }: DialogDescriptionProps<T>): import(
|
|
20
|
+
export declare function DialogDescription<T extends ElementType = 'p'>({ as, className, ...props }: DialogDescriptionProps<T>): import('react').JSX.Element;
|
|
21
21
|
export type DialogBodyProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
22
|
-
export declare function DialogBody<T extends ElementType = 'div'>({ as, className, ...props }: DialogBodyProps<T>): import(
|
|
22
|
+
export declare function DialogBody<T extends ElementType = 'div'>({ as, className, ...props }: DialogBodyProps<T>): import('react').JSX.Element;
|
|
23
23
|
export type DialogFooterProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
|
|
24
24
|
'data-direction'?: 'column';
|
|
25
25
|
}>;
|
|
26
|
-
export declare function DialogFooter<T extends ElementType = 'div'>({ as, className, ...props }: DialogFooterProps<T>): import(
|
|
27
|
-
export declare function DialogClose({ className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): import(
|
|
26
|
+
export declare function DialogFooter<T extends ElementType = 'div'>({ as, className, ...props }: DialogFooterProps<T>): import('react').JSX.Element;
|
|
27
|
+
export declare function DialogClose({ className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): import('react').JSX.Element;
|
package/lib/dropdown-menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-dropdown-menu{anchor-name:--sheerly-dropdown-menu;width:fit-content;display:inline-block}.sheerly-dropdown-menu-content{position-anchor:--sheerly-dropdown-menu;position-area:var(--sheerly-dropdown-menu-position,block-end);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;min-width:128px;max-height:var(--sheerly-dropdown-menu-max-height,auto);border-radius:var(--sheerly-radius-lg);background-color:var(--sheerly-popover);color:var(--sheerly-popover-foreground);box-shadow:inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%), 0 4px 16px -4px oklch(0% 0 0/.08), 0 1px 2px oklch(0% 0 0/.04);opacity:0;transition:opacity .1s ease, scale .1s ease, display .1s allow-discrete, overlay .1s allow-discrete;border:none;flex-direction:column;margin:4px 0;padding:4px;font-
|
|
1
|
+
.sheerly-dropdown-menu{anchor-name:--sheerly-dropdown-menu;width:fit-content;display:inline-block}.sheerly-dropdown-menu-content{position-anchor:--sheerly-dropdown-menu;position-area:var(--sheerly-dropdown-menu-position,block-end);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;min-width:128px;max-height:var(--sheerly-dropdown-menu-max-height,auto);border-radius:var(--sheerly-radius-lg);background-color:var(--sheerly-popover);color:var(--sheerly-popover-foreground);box-shadow:inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%), 0 4px 16px -4px oklch(0% 0 0/.08), 0 1px 2px oklch(0% 0 0/.04);font-family:var(--sheerly-font-sans);opacity:0;transition:opacity .1s ease, scale .1s ease, display .1s allow-discrete, overlay .1s allow-discrete;border:none;flex-direction:column;margin:4px 0;padding:4px;font-size:14px;line-height:20px;position:fixed;overflow:hidden auto;scale:.95}.sheerly-dropdown-menu-content:popover-open{opacity:1;display:flex;scale:1}@starting-style{.sheerly-dropdown-menu-content:popover-open{opacity:0;scale:.95}}.sheerly-dropdown-menu-group{flex-direction:column;display:flex}.sheerly-dropdown-menu-label{color:var(--sheerly-muted-foreground);padding:4px 6px;font-size:12px;font-weight:500;line-height:16px}.sheerly-dropdown-menu-label[data-inset]{padding-left:28px}.sheerly-dropdown-menu-item,.sheerly-dropdown-menu-sub-trigger{border-radius:var(--sheerly-radius-md);width:100%;color:inherit;font:inherit;text-align:start;cursor:default;-webkit-user-select:none;user-select:none;background-color:#0000;border:none;outline:none;align-items:center;gap:6px;padding:4px 6px;font-size:14px;line-height:20px;text-decoration:none;display:flex}:is(.sheerly-dropdown-menu-item,.sheerly-dropdown-menu-sub-trigger):hover,:is(.sheerly-dropdown-menu-item,.sheerly-dropdown-menu-sub-trigger):focus-visible{background-color:var(--sheerly-accent);color:var(--sheerly-accent-foreground)}:is(.sheerly-dropdown-menu-item,.sheerly-dropdown-menu-sub-trigger)[disabled],:is(.sheerly-dropdown-menu-item,.sheerly-dropdown-menu-sub-trigger)[data-disabled],:is(.sheerly-dropdown-menu-item,.sheerly-dropdown-menu-sub-trigger)[aria-disabled=true]{pointer-events:none;opacity:.5}:is(.sheerly-dropdown-menu-item,.sheerly-dropdown-menu-sub-trigger)[data-inset]{padding-left:28px}:is(.sheerly-dropdown-menu-item,.sheerly-dropdown-menu-sub-trigger) svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}.sheerly-dropdown-menu-item[data-variant=destructive]{color:var(--sheerly-destructive)}.sheerly-dropdown-menu-item[data-variant=destructive] svg{color:var(--sheerly-destructive)}.sheerly-dropdown-menu-item[data-variant=destructive]:hover,.sheerly-dropdown-menu-item[data-variant=destructive]:focus-visible{background-color:oklch(from var(--sheerly-destructive) l c h / 10%);color:var(--sheerly-destructive)}.dark .sheerly-dropdown-menu-item[data-variant=destructive]:hover,.dark .sheerly-dropdown-menu-item[data-variant=destructive]:focus-visible{background-color:oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-dropdown-menu-shortcut{letter-spacing:.1em;color:var(--sheerly-muted-foreground);margin-inline-start:auto;padding-inline-start:12px;font-size:12px;line-height:16px}.sheerly-dropdown-menu-item:hover .sheerly-dropdown-menu-shortcut,.sheerly-dropdown-menu-item:focus-visible .sheerly-dropdown-menu-shortcut{color:var(--sheerly-accent-foreground)}.sheerly-dropdown-menu-separator{background-color:var(--sheerly-border);height:1px;margin:4px -4px}.sheerly-dropdown-menu-sub{display:contents}.sheerly-dropdown-menu-sub-trigger{anchor-name:--sheerly-dropdown-menu-sub}.sheerly-dropdown-menu-sub-trigger:after{content:"";background-color:currentColor;flex-shrink:0;width:16px;height:16px;margin-inline-start:auto;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") 50%/contain no-repeat}:is(.sheerly-dropdown-menu-sub:has(>.sheerly-dropdown-menu-content:popover-open)>.sheerly-dropdown-menu-sub-trigger,.sheerly-dropdown-menu-sub-trigger[aria-expanded=true]){background-color:var(--sheerly-accent);color:var(--sheerly-accent-foreground)}.sheerly-dropdown-menu-sub>.sheerly-dropdown-menu-content{position-anchor:--sheerly-dropdown-menu-sub;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline;min-width:96px;box-shadow:inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%), 0 8px 24px -6px oklch(0% 0 0/.12), 0 2px 4px oklch(0% 0 0/.06);margin:0 4px}
|
package/lib/dropdown-menu.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ButtonHTMLAttributes, ElementType } from 'react';
|
|
2
2
|
import { PolymorphicProps } from './utils/polymorphic';
|
|
3
3
|
/**
|
|
4
4
|
* Wrapper carrying the anchor. Nest the trigger button + content inside.
|
|
@@ -13,43 +13,48 @@ import { PolymorphicProps } from './utils/polymorphic';
|
|
|
13
13
|
* </DropdownMenu>
|
|
14
14
|
*/
|
|
15
15
|
export type DropdownMenuProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
|
|
16
|
-
export declare function DropdownMenu<T extends ElementType = 'span'>({ as, className, ...props }: DropdownMenuProps<T>): import(
|
|
16
|
+
export declare function DropdownMenu<T extends ElementType = 'span'>({ as, className, ...props }: DropdownMenuProps<T>): import('react').JSX.Element;
|
|
17
17
|
/**
|
|
18
18
|
* The floating menu panel. Give it `popover`, an `id` matched by the trigger's
|
|
19
19
|
* `commandfor`, and `role="menu"`. When nested inside a <DropdownMenuSub> it is
|
|
20
20
|
* automatically styled as a submenu panel (no extra attribute needed).
|
|
21
21
|
*/
|
|
22
22
|
export type DropdownMenuContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
23
|
-
export declare function DropdownMenuContent<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuContentProps<T>): import(
|
|
23
|
+
export declare function DropdownMenuContent<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuContentProps<T>): import('react').JSX.Element;
|
|
24
24
|
/** A semantic wrapper for a set of related items/labels. */
|
|
25
25
|
export type DropdownMenuGroupProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
26
|
-
export declare function DropdownMenuGroup<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuGroupProps<T>): import(
|
|
26
|
+
export declare function DropdownMenuGroup<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuGroupProps<T>): import('react').JSX.Element;
|
|
27
27
|
/** A non-interactive section heading. */
|
|
28
28
|
export type DropdownMenuLabelProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
|
|
29
29
|
'data-inset'?: boolean;
|
|
30
30
|
}>;
|
|
31
|
-
export declare function DropdownMenuLabel<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuLabelProps<T>): import(
|
|
31
|
+
export declare function DropdownMenuLabel<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuLabelProps<T>): import('react').JSX.Element;
|
|
32
32
|
/** An interactive menu row. Renders a <button> by default. */
|
|
33
33
|
export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
34
34
|
'data-variant'?: 'destructive';
|
|
35
35
|
'data-inset'?: boolean;
|
|
36
36
|
}
|
|
37
|
-
export declare function DropdownMenuItem({ className, type, ...props }: DropdownMenuItemProps): import(
|
|
38
|
-
/**
|
|
39
|
-
|
|
37
|
+
export declare function DropdownMenuItem({ className, type, ...props }: DropdownMenuItemProps): import('react').JSX.Element;
|
|
38
|
+
/**
|
|
39
|
+
* An interactive menu row rendered as a link.
|
|
40
|
+
*
|
|
41
|
+
* Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
|
|
42
|
+
* `as={Link}` for a router link).
|
|
43
|
+
*/
|
|
44
|
+
export type DropdownMenuLinkItemProps<T extends ElementType = 'a'> = PolymorphicProps<T, {
|
|
40
45
|
'data-variant'?: 'destructive';
|
|
41
46
|
'data-inset'?: boolean;
|
|
42
|
-
}
|
|
43
|
-
export declare function DropdownMenuLinkItem({ className, ...props }: DropdownMenuLinkItemProps): import(
|
|
47
|
+
}>;
|
|
48
|
+
export declare function DropdownMenuLinkItem<T extends ElementType = 'a'>({ as, className, ...props }: DropdownMenuLinkItemProps<T>): import('react').JSX.Element;
|
|
44
49
|
/** A trailing keyboard-shortcut hint inside an item. */
|
|
45
50
|
export type DropdownMenuShortcutProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
|
|
46
|
-
export declare function DropdownMenuShortcut<T extends ElementType = 'span'>({ as, className, ...props }: DropdownMenuShortcutProps<T>): import(
|
|
51
|
+
export declare function DropdownMenuShortcut<T extends ElementType = 'span'>({ as, className, ...props }: DropdownMenuShortcutProps<T>): import('react').JSX.Element;
|
|
47
52
|
/** A horizontal divider between item groups. */
|
|
48
53
|
export type DropdownMenuSeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
49
|
-
export declare function DropdownMenuSeparator<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuSeparatorProps<T>): import(
|
|
54
|
+
export declare function DropdownMenuSeparator<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuSeparatorProps<T>): import('react').JSX.Element;
|
|
50
55
|
/** Submenu wrapper (display: contents). Nest a sub-trigger + a sub-content. */
|
|
51
56
|
export type DropdownMenuSubProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
52
|
-
export declare function DropdownMenuSub<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuSubProps<T>): import(
|
|
57
|
+
export declare function DropdownMenuSub<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuSubProps<T>): import('react').JSX.Element;
|
|
53
58
|
/**
|
|
54
59
|
* Opens a submenu. Use `popoverTarget` (+ `popoverTargetAction="toggle"`)
|
|
55
60
|
* pointing at the sub-content id — NOT command/commandfor, which would
|
|
@@ -58,9 +63,9 @@ export declare function DropdownMenuSub<T extends ElementType = 'div'>({ as, cla
|
|
|
58
63
|
export interface DropdownMenuSubTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
59
64
|
'data-inset'?: boolean;
|
|
60
65
|
}
|
|
61
|
-
export declare function DropdownMenuSubTrigger({ className, type, ...props }: DropdownMenuSubTriggerProps): import(
|
|
66
|
+
export declare function DropdownMenuSubTrigger({ className, type, ...props }: DropdownMenuSubTriggerProps): import('react').JSX.Element;
|
|
62
67
|
/**
|
|
63
68
|
* The submenu panel. It's a DropdownMenuContent nested inside a DropdownMenuSub;
|
|
64
69
|
* the child-combinator CSS picks it up as a submenu — no extra attribute needed.
|
|
65
70
|
*/
|
|
66
|
-
export declare function DropdownMenuSubContent<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuContentProps<T>): import(
|
|
71
|
+
export declare function DropdownMenuSubContent<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuContentProps<T>): import('react').JSX.Element;
|
package/lib/hover-card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheerly-hover-card{anchor-name:--sheerly-hover-card;anchor-scope:--sheerly-hover-card;width:fit-content;display:inline-block}.sheerly-hover-card [interestfor]{interest-delay:var(--sheerly-hover-card-delay,.2s)}.sheerly-hover-card-content{position-anchor:--sheerly-hover-card;position-area:var(--sheerly-hover-card-position,block-end);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;background-color:var(--sheerly-popover);color:var(--sheerly-popover-foreground);border:1px solid var(--sheerly-border);border-radius:var(--sheerly-radius-md);opacity:0;width:max-content;max-width:288px;transition:opacity .1s ease, display .1s allow-discrete, overlay .1s allow-discrete;margin:6px;padding:16px;font-
|
|
1
|
+
.sheerly-hover-card{anchor-name:--sheerly-hover-card;anchor-scope:--sheerly-hover-card;width:fit-content;display:inline-block}.sheerly-hover-card [interestfor]{interest-delay:var(--sheerly-hover-card-delay,.2s)}.sheerly-hover-card-content{position-anchor:--sheerly-hover-card;position-area:var(--sheerly-hover-card-position,block-end);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;background-color:var(--sheerly-popover);color:var(--sheerly-popover-foreground);font-family:var(--sheerly-font-sans);border:1px solid var(--sheerly-border);border-radius:var(--sheerly-radius-md);opacity:0;width:max-content;max-width:288px;transition:opacity .1s ease, display .1s allow-discrete, overlay .1s allow-discrete;margin:6px;padding:16px;font-size:14px;line-height:20px;position:fixed;overflow:auto;box-shadow:0 4px 16px -4px oklch(0% 0 0/.08),0 1px 2px oklch(0% 0 0/.04)}.sheerly-hover-card-content:popover-open{opacity:1}@starting-style{.sheerly-hover-card-content:popover-open{opacity:0}}
|
package/lib/hover-card.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export type HoverCardProps<T extends ElementType = 'span'> = PolymorphicProps<T>
|
|
|
10
10
|
* <HoverCardContent id="hc" popover="hint">Ada Lovelace — 1815</HoverCardContent>
|
|
11
11
|
* </HoverCard>
|
|
12
12
|
*/
|
|
13
|
-
export declare function HoverCard<T extends ElementType = 'span'>({ as, className, ...props }: HoverCardProps<T>): import(
|
|
13
|
+
export declare function HoverCard<T extends ElementType = 'span'>({ as, className, ...props }: HoverCardProps<T>): import('react').JSX.Element;
|
|
14
14
|
export type HoverCardContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
|
|
15
15
|
/** The floating card. Give it `popover="hint"` and an `id` matched by the trigger's `interestfor`. */
|
|
16
|
-
export declare function HoverCardContent<T extends ElementType = 'div'>({ as, className, ...props }: HoverCardContentProps<T>): import(
|
|
16
|
+
export declare function HoverCardContent<T extends ElementType = 'div'>({ as, className, ...props }: HoverCardContentProps<T>): import('react').JSX.Element;
|