@q9labsai/chalk-ui 5.1.0 → 5.2.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/CHANGELOG.md +25 -0
- package/dist/badge.d.ts +2 -1
- package/dist/button.d.ts +1 -1
- package/dist/card.d.ts +7 -7
- package/dist/input.d.ts +1 -1
- package/dist/logos/chalk-icon.svg +1 -34
- package/dist/logos/chalk-logo-on-dark.svg +9 -32
- package/dist/logos/chalk-logo.svg +9 -42
- package/dist/menu.d.ts +9 -9
- package/dist/sidebar.d.ts +13 -13
- package/dist/styles.css +119 -6
- package/dist/toast.d.ts +2 -2
- package/dist/toggle-group.d.ts +3 -2
- package/dist/toggle.d.ts +1 -1
- package/dist/tooltip.d.ts +4 -4
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 5.2.0
|
|
4
|
+
|
|
5
|
+
### phone-board-notices-next-release
|
|
6
|
+
|
|
7
|
+
Float faces over a phone board, and keep call notices off the call's controls.
|
|
8
|
+
On a phone, an open board now fills the stage and up to three faces float at
|
|
9
|
+
its right edge, with short name tags. Notices sit between the header and the
|
|
10
|
+
controls under them. A call shorter than 620px, such as a landscape phone or a
|
|
11
|
+
short embedded call, puts every notice in a notice button in the header, which
|
|
12
|
+
lists each one whole and announces it once to screen readers; a taller call
|
|
13
|
+
shows the newest three and puts older ones in the button. A notice in the
|
|
14
|
+
button starts its timer only once it shows. The header stays visible while
|
|
15
|
+
the button holds notices. Long names, links and error tokens wrap inside
|
|
16
|
+
their notice, and a long call name shortens to make room for the timer and
|
|
17
|
+
the notice button. A screen share beside a short board always keeps its own
|
|
18
|
+
tile when there is no explicit cap. A capped strip or floating column counts
|
|
19
|
+
shared content and its overflow button against that cap; folded shares stay
|
|
20
|
+
readable in the shared-content overflow. One text-only announcer handles
|
|
21
|
+
notice speech independently of its stage or header presentation.
|
|
22
|
+
|
|
23
|
+
New optional props: `ToastStackProps.onFold` reports the ids of the notices
|
|
24
|
+
the stage has no room for, `ChalkToastProps.announce` lets a host that already
|
|
25
|
+
announced a notice keep its toast quiet, and `SpaceHeaderProps.notices` places
|
|
26
|
+
a control before the people button.
|
|
27
|
+
|
|
3
28
|
## 5.1.0
|
|
4
29
|
|
|
5
30
|
- Round the call's corners and lift board messages clear of the controls. This is a stylesheet change with no API changes.
|
package/dist/badge.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useRender } from "@base-ui/react/use-render";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
import type React from "react";
|
|
3
4
|
declare const badgeVariants: (props?: ({
|
|
4
5
|
variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
|
|
5
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -9,5 +10,5 @@ type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVa
|
|
|
9
10
|
readonly dot?: boolean;
|
|
10
11
|
readonly showZero?: boolean;
|
|
11
12
|
};
|
|
12
|
-
declare function Badge({ className, variant, render, count, max, dot, showZero, children, ...props }: BadgeProps):
|
|
13
|
+
declare function Badge({ className, variant, render, count, max, dot, showZero, children, ...props }: BadgeProps): React.JSX.Element;
|
|
13
14
|
export { Badge, badgeVariants };
|
package/dist/button.d.ts
CHANGED
|
@@ -4,5 +4,5 @@ declare const buttonVariants: (props?: ({
|
|
|
4
4
|
variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
|
|
5
5
|
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
-
declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react
|
|
7
|
+
declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
|
|
8
8
|
export { Button, buttonVariants };
|
package/dist/card.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
|
|
3
3
|
size?: "default" | "sm";
|
|
4
|
-
}):
|
|
5
|
-
declare function CardHeader({ className, ...props }: React.ComponentProps<"div">):
|
|
6
|
-
declare function CardTitle({ className, ...props }: React.ComponentProps<"div">):
|
|
7
|
-
declare function CardDescription({ className, ...props }: React.ComponentProps<"div">):
|
|
8
|
-
declare function CardAction({ className, ...props }: React.ComponentProps<"div">):
|
|
9
|
-
declare function CardContent({ className, ...props }: React.ComponentProps<"div">):
|
|
10
|
-
declare function CardFooter({ className, ...props }: React.ComponentProps<"div">):
|
|
4
|
+
}): React.JSX.Element;
|
|
5
|
+
declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
6
|
+
declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
7
|
+
declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
8
|
+
declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
9
|
+
declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
10
|
+
declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
11
|
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
|
package/dist/input.d.ts
CHANGED
|
@@ -7,5 +7,5 @@ export interface InputProps extends Omit<React.ComponentProps<"input">, "size">
|
|
|
7
7
|
readonly size?: "sm" | "md" | "lg";
|
|
8
8
|
readonly fullWidth?: boolean;
|
|
9
9
|
}
|
|
10
|
-
declare function Input({ className, type, label, error, icon, iconPosition, size, fullWidth, id, ...props }: InputProps):
|
|
10
|
+
declare function Input({ className, type, label, error, icon, iconPosition, size, fullWidth, id, ...props }: InputProps): React.JSX.Element;
|
|
11
11
|
export { Input };
|
|
@@ -1,34 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
2
|
-
<defs>
|
|
3
|
-
<linearGradient id="grn" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
4
|
-
<stop offset="0%" stop-color="#C5E5C0"/><stop offset="100%" stop-color="#80B879"/>
|
|
5
|
-
</linearGradient>
|
|
6
|
-
<linearGradient id="yel" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
7
|
-
<stop offset="0%" stop-color="#FCEAB3"/><stop offset="100%" stop-color="#D9B641"/>
|
|
8
|
-
</linearGradient>
|
|
9
|
-
<linearGradient id="blu" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
10
|
-
<stop offset="0%" stop-color="#B2E0F0"/><stop offset="100%" stop-color="#55AAC9"/>
|
|
11
|
-
</linearGradient>
|
|
12
|
-
<linearGradient id="pnk" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
13
|
-
<stop offset="0%" stop-color="#F8CACA"/><stop offset="100%" stop-color="#D67B7B"/>
|
|
14
|
-
</linearGradient>
|
|
15
|
-
</defs>
|
|
16
|
-
<g transform="translate(5, 5) scale(0.85)">
|
|
17
|
-
<g transform="rotate(-20 16 48)">
|
|
18
|
-
<path d="M9,16 L19,16 L20,50 A6,6 0 0 1 8,50 Z" fill="url(#grn)"/>
|
|
19
|
-
<ellipse cx="14" cy="16" rx="5" ry="2" fill="#D8ECD4"/>
|
|
20
|
-
</g>
|
|
21
|
-
<g transform="rotate(-5 24 44)">
|
|
22
|
-
<path d="M19,12 L29,12 L30,50 A6,6 0 0 1 18,50 Z" fill="url(#yel)"/>
|
|
23
|
-
<ellipse cx="24" cy="12" rx="5" ry="2" fill="#FEF3D1"/>
|
|
24
|
-
</g>
|
|
25
|
-
<g transform="rotate(25 44 20)">
|
|
26
|
-
<path d="M29,4 L39,4 L40,40 A6,6 0 0 1 28,40 Z" fill="url(#blu)"/>
|
|
27
|
-
<ellipse cx="34" cy="4" rx="5" ry="2" fill="#D0EDF8"/>
|
|
28
|
-
</g>
|
|
29
|
-
<g transform="rotate(10 44 40)">
|
|
30
|
-
<path d="M39,56 L49,56 L50,24 A6,6 0 0 0 38,24 Z" fill="url(#pnk)"/>
|
|
31
|
-
<ellipse cx="44" cy="56" rx="5" ry="2" fill="#FBE4E4"/>
|
|
32
|
-
</g>
|
|
33
|
-
</g>
|
|
34
|
-
</svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><clipPath id="round"><rect width="1024" height="1024" rx="232"/></clipPath><g clip-path="url(#round)"><rect width="1024" height="1024" fill="#16181c"/></g><svg x="136.53333333333336" y="136.53333333333336" width="750.9333333333333" height="750.9333333333333" viewBox="0 0 48 48"><g transform="rotate(28 24 24)"><path d="M18 8h12v28a6 6 0 0 1-12 0z" fill="#f1f0ea"/><path d="M18 8h12l-1.5 4.5h-9z" fill="#f1f0ea" opacity="0.45"/></g><circle cx="10.5" cy="41.5" r="1.7" fill="#f1f0ea" opacity="0.55"/><circle cx="6.5" cy="37" r="1.2" fill="#f1f0ea" opacity="0.4"/><circle cx="4" cy="43.5" r="0.85" fill="#f1f0ea" opacity="0.28"/></svg></svg>
|
|
@@ -1,35 +1,12 @@
|
|
|
1
1
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" fill="none">
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
</linearGradient>
|
|
12
|
-
<linearGradient id="pnk" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
13
|
-
<stop offset="0%" stop-color="#F8CACA"/><stop offset="100%" stop-color="#D67B7B"/>
|
|
14
|
-
</linearGradient>
|
|
15
|
-
</defs>
|
|
16
|
-
<g transform="translate(2, 2) scale(0.95)">
|
|
17
|
-
<g transform="rotate(-15 20 60)">
|
|
18
|
-
<path d="M9,20 L21,20 L22,63 A7,7 0 0 1 8,63 Z" fill="url(#grn)"/>
|
|
19
|
-
<ellipse cx="15" cy="20" rx="6" ry="2.5" fill="#D8ECD4"/>
|
|
20
|
-
</g>
|
|
21
|
-
<g transform="rotate(-8 32 55)">
|
|
22
|
-
<path d="M23,15 L35,15 L36,60 A7,7 0 0 1 22,60 Z" fill="url(#yel)"/>
|
|
23
|
-
<ellipse cx="29" cy="15" rx="6" ry="2.5" fill="#FEF3D1"/>
|
|
24
|
-
</g>
|
|
25
|
-
<g transform="rotate(12 60 30)">
|
|
26
|
-
<path d="M36,8 L48,8 L49,56 A7,7 0 0 1 35,56 Z" fill="url(#blu)"/>
|
|
27
|
-
<ellipse cx="42" cy="8" rx="6" ry="2.5" fill="#D0EDF8"/>
|
|
28
|
-
</g>
|
|
29
|
-
<g transform="rotate(5 55 50)">
|
|
30
|
-
<path d="M49,70 L61,70 L62,29 A7,7 0 0 0 48,29 Z" fill="url(#pnk)"/>
|
|
31
|
-
<ellipse cx="55" cy="70" rx="6" ry="2.5" fill="#FBE4E4"/>
|
|
32
|
-
</g>
|
|
33
|
-
</g>
|
|
2
|
+
<svg x="0" y="6" width="68" height="68" viewBox="0 0 48 48">
|
|
3
|
+
<g transform="rotate(28 24 24)" fill="#F4F3EE">
|
|
4
|
+
<path d="M18 8h12v28a6 6 0 0 1-12 0z"/>
|
|
5
|
+
<path d="M18 8h12l-1.5 4.5h-9z" opacity="0.45"/>
|
|
6
|
+
</g>
|
|
7
|
+
<circle cx="10.5" cy="41.5" r="1.7" fill="#F4F3EE" opacity="0.55"/>
|
|
8
|
+
<circle cx="6.5" cy="37" r="1.2" fill="#F4F3EE" opacity="0.4"/>
|
|
9
|
+
<circle cx="4" cy="43.5" r="0.85" fill="#F4F3EE" opacity="0.28"/>
|
|
10
|
+
</svg>
|
|
34
11
|
<text x="90" y="52" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="38" font-weight="600" letter-spacing="-0.02em" fill="#F4F3EE">chalk</text>
|
|
35
12
|
</svg>
|
|
@@ -1,45 +1,12 @@
|
|
|
1
1
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" fill="none">
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
</linearGradient>
|
|
12
|
-
<linearGradient id="pnk" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
13
|
-
<stop offset="0%" stop-color="#F8CACA"/><stop offset="100%" stop-color="#D67B7B"/>
|
|
14
|
-
</linearGradient>
|
|
15
|
-
</defs>
|
|
16
|
-
<!-- Chalk sticks arrangement -->
|
|
17
|
-
<g transform="translate(2, 2) scale(0.95)">
|
|
18
|
-
<!-- Green chalk -->
|
|
19
|
-
<g transform="rotate(-15 20 60)">
|
|
20
|
-
<path d="M9,20 L21,20 L22,63 A7,7 0 0 1 8,63 Z" fill="url(#grn)"/>
|
|
21
|
-
<ellipse cx="15" cy="20" rx="6" ry="2.5" fill="#D8ECD4"/>
|
|
22
|
-
</g>
|
|
23
|
-
|
|
24
|
-
<!-- Yellow chalk -->
|
|
25
|
-
<g transform="rotate(-8 32 55)">
|
|
26
|
-
<path d="M23,15 L35,15 L36,60 A7,7 0 0 1 22,60 Z" fill="url(#yel)"/>
|
|
27
|
-
<ellipse cx="29" cy="15" rx="6" ry="2.5" fill="#FEF3D1"/>
|
|
28
|
-
</g>
|
|
29
|
-
|
|
30
|
-
<!-- Blue chalk -->
|
|
31
|
-
<g transform="rotate(12 60 30)">
|
|
32
|
-
<path d="M36,8 L48,8 L49,56 A7,7 0 0 1 35,56 Z" fill="url(#blu)"/>
|
|
33
|
-
<ellipse cx="42" cy="8" rx="6" ry="2.5" fill="#D0EDF8"/>
|
|
34
|
-
</g>
|
|
35
|
-
|
|
36
|
-
<!-- Pink chalk -->
|
|
37
|
-
<g transform="rotate(5 55 50)">
|
|
38
|
-
<path d="M49,70 L61,70 L62,29 A7,7 0 0 0 48,29 Z" fill="url(#pnk)"/>
|
|
39
|
-
<ellipse cx="55" cy="70" rx="6" ry="2.5" fill="#FBE4E4"/>
|
|
40
|
-
</g>
|
|
41
|
-
</g>
|
|
42
|
-
|
|
43
|
-
<!-- "chalk" text -->
|
|
2
|
+
<svg x="0" y="6" width="68" height="68" viewBox="0 0 48 48">
|
|
3
|
+
<g transform="rotate(28 24 24)" fill="currentColor">
|
|
4
|
+
<path d="M18 8h12v28a6 6 0 0 1-12 0z"/>
|
|
5
|
+
<path d="M18 8h12l-1.5 4.5h-9z" opacity="0.45"/>
|
|
6
|
+
</g>
|
|
7
|
+
<circle cx="10.5" cy="41.5" r="1.7" fill="currentColor" opacity="0.55"/>
|
|
8
|
+
<circle cx="6.5" cy="37" r="1.2" fill="currentColor" opacity="0.4"/>
|
|
9
|
+
<circle cx="4" cy="43.5" r="0.85" fill="currentColor" opacity="0.28"/>
|
|
10
|
+
</svg>
|
|
44
11
|
<text x="90" y="52" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="38" font-weight="600" letter-spacing="-0.02em" fill="currentColor">chalk</text>
|
|
45
12
|
</svg>
|
package/dist/menu.d.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
|
-
declare function Menu(props: MenuPrimitive.Root.Props): import("react
|
|
4
|
-
declare function MenuTrigger(props: MenuPrimitive.Trigger.Props): import("react
|
|
3
|
+
declare function Menu(props: MenuPrimitive.Root.Props): import("react").JSX.Element;
|
|
4
|
+
declare function MenuTrigger(props: MenuPrimitive.Trigger.Props): import("react").JSX.Element;
|
|
5
5
|
declare const menuContentVariants: (props?: ({
|
|
6
6
|
tone?: "default" | "sidebar" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
type MenuContentProps = MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & VariantProps<typeof menuContentVariants>;
|
|
9
|
-
declare function MenuContent({ className, tone, side, sideOffset, align, alignOffset, children, ...props }: MenuContentProps): import("react
|
|
10
|
-
declare function MenuItem({ className, ...props }: MenuPrimitive.Item.Props): import("react
|
|
11
|
-
declare function MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props): import("react
|
|
12
|
-
declare function MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props): import("react
|
|
9
|
+
declare function MenuContent({ className, tone, side, sideOffset, align, alignOffset, children, ...props }: MenuContentProps): import("react").JSX.Element;
|
|
10
|
+
declare function MenuItem({ className, ...props }: MenuPrimitive.Item.Props): import("react").JSX.Element;
|
|
11
|
+
declare function MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props): import("react").JSX.Element;
|
|
12
|
+
declare function MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props): import("react").JSX.Element;
|
|
13
13
|
/** Owns the labelled section a `MenuGroupLabel` names; the label throws without it. */
|
|
14
|
-
declare function MenuGroup(props: MenuPrimitive.Group.Props): import("react
|
|
15
|
-
declare function MenuGroupLabel({ className, ...props }: MenuPrimitive.GroupLabel.Props): import("react
|
|
16
|
-
declare function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react
|
|
14
|
+
declare function MenuGroup(props: MenuPrimitive.Group.Props): import("react").JSX.Element;
|
|
15
|
+
declare function MenuGroupLabel({ className, ...props }: MenuPrimitive.GroupLabel.Props): import("react").JSX.Element;
|
|
16
|
+
declare function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react").JSX.Element;
|
|
17
17
|
export { Menu, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger };
|
package/dist/sidebar.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ interface SidebarProviderProps extends React.ComponentPropsWithRef<"div"> {
|
|
|
21
21
|
readonly open?: boolean;
|
|
22
22
|
readonly onOpenChange?: (open: boolean) => void;
|
|
23
23
|
}
|
|
24
|
-
declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, className, children, ...props }: SidebarProviderProps):
|
|
24
|
+
declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, className, children, ...props }: SidebarProviderProps): React.JSX.Element;
|
|
25
25
|
interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
|
|
26
26
|
readonly side?: SidebarSide;
|
|
27
27
|
readonly variant?: SidebarVariant;
|
|
@@ -29,18 +29,18 @@ interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
|
|
|
29
29
|
/** Accessible name for the mobile drawer. */
|
|
30
30
|
readonly title?: string;
|
|
31
31
|
}
|
|
32
|
-
declare function Sidebar({ side, variant, collapsible, title, className, children, ...props }: SidebarProps):
|
|
33
|
-
declare function SidebarInset({ className, ...props }: React.ComponentPropsWithRef<"main">):
|
|
34
|
-
declare function SidebarTrigger({ className, onClick, children, ...props }: React.ComponentPropsWithRef<"button">):
|
|
32
|
+
declare function Sidebar({ side, variant, collapsible, title, className, children, ...props }: SidebarProps): React.JSX.Element;
|
|
33
|
+
declare function SidebarInset({ className, ...props }: React.ComponentPropsWithRef<"main">): React.JSX.Element;
|
|
34
|
+
declare function SidebarTrigger({ className, onClick, children, ...props }: React.ComponentPropsWithRef<"button">): React.JSX.Element;
|
|
35
35
|
/** The hairline hit area on the sidebar's edge; drag-to-toggle affordance. */
|
|
36
|
-
declare function SidebarRail({ className, ...props }: React.ComponentPropsWithRef<"button">):
|
|
37
|
-
declare function SidebarHeader({ className, ...props }: React.ComponentPropsWithRef<"div">):
|
|
38
|
-
declare function SidebarContent({ className, ...props }: React.ComponentPropsWithRef<"div">):
|
|
39
|
-
declare function SidebarFooter({ className, ...props }: React.ComponentPropsWithRef<"div">):
|
|
40
|
-
declare function SidebarGroup({ className, ...props }: React.ComponentPropsWithRef<"div">):
|
|
41
|
-
declare function SidebarGroupLabel({ className, ...props }: React.ComponentPropsWithRef<"div">):
|
|
42
|
-
declare function SidebarMenu({ className, ...props }: React.ComponentPropsWithRef<"ul">):
|
|
43
|
-
declare function SidebarMenuItem({ className, ...props }: React.ComponentPropsWithRef<"li">):
|
|
36
|
+
declare function SidebarRail({ className, ...props }: React.ComponentPropsWithRef<"button">): React.JSX.Element;
|
|
37
|
+
declare function SidebarHeader({ className, ...props }: React.ComponentPropsWithRef<"div">): React.JSX.Element;
|
|
38
|
+
declare function SidebarContent({ className, ...props }: React.ComponentPropsWithRef<"div">): React.JSX.Element;
|
|
39
|
+
declare function SidebarFooter({ className, ...props }: React.ComponentPropsWithRef<"div">): React.JSX.Element;
|
|
40
|
+
declare function SidebarGroup({ className, ...props }: React.ComponentPropsWithRef<"div">): React.JSX.Element;
|
|
41
|
+
declare function SidebarGroupLabel({ className, ...props }: React.ComponentPropsWithRef<"div">): React.JSX.Element;
|
|
42
|
+
declare function SidebarMenu({ className, ...props }: React.ComponentPropsWithRef<"ul">): React.JSX.Element;
|
|
43
|
+
declare function SidebarMenuItem({ className, ...props }: React.ComponentPropsWithRef<"li">): React.JSX.Element;
|
|
44
44
|
declare const sidebarMenuButtonVariants: (props?: ({
|
|
45
45
|
variant?: "default" | "outline" | "primary" | null | undefined;
|
|
46
46
|
size?: "default" | "lg" | null | undefined;
|
|
@@ -52,5 +52,5 @@ interface SidebarMenuButtonProps extends React.ComponentPropsWithRef<"button">,
|
|
|
52
52
|
/** Renders a different element — a router link, for instance — with the button's props. */
|
|
53
53
|
readonly render?: useRender.RenderProp;
|
|
54
54
|
}
|
|
55
|
-
declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: SidebarMenuButtonProps):
|
|
55
|
+
declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: SidebarMenuButtonProps): React.JSX.Element;
|
|
56
56
|
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonVariants, useSidebar };
|
package/dist/styles.css
CHANGED
|
@@ -816,6 +816,38 @@
|
|
|
816
816
|
height: 12px;
|
|
817
817
|
}
|
|
818
818
|
|
|
819
|
+
/* Faces float over the board on a narrow stage, so an edge and a shadow lift each face off the drawing. */
|
|
820
|
+
[data-stage-role="float"] [data-part="stage-tile"] {
|
|
821
|
+
box-shadow:
|
|
822
|
+
0 0 0 1px var(--chalk-app-line-strong),
|
|
823
|
+
0 6px 18px rgb(0 0 0 / 0.5);
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
/* A tile under 70px tall, such as a face floating over a phone board, keeps a small tag with the first name. Its menu would cover the tag, and clicking the tile does the same. */
|
|
827
|
+
@container (max-height: 70px) {
|
|
828
|
+
[data-part="tile-tag"] {
|
|
829
|
+
left: 4px;
|
|
830
|
+
bottom: 4px;
|
|
831
|
+
height: 18px;
|
|
832
|
+
padding: 0 5px;
|
|
833
|
+
font-size: 11px;
|
|
834
|
+
}
|
|
835
|
+
[data-part="tile-full-name"],
|
|
836
|
+
[data-part="tile-following"],
|
|
837
|
+
[data-part="tile-menu"] {
|
|
838
|
+
display: none;
|
|
839
|
+
}
|
|
840
|
+
[data-part="tile-short-name"] {
|
|
841
|
+
display: inline;
|
|
842
|
+
}
|
|
843
|
+
[data-part="tile-signal"] {
|
|
844
|
+
top: 4px;
|
|
845
|
+
left: 4px;
|
|
846
|
+
height: 18px;
|
|
847
|
+
padding: 0 5px;
|
|
848
|
+
}
|
|
849
|
+
}
|
|
850
|
+
|
|
819
851
|
@container (min-width: 240px) {
|
|
820
852
|
.chalk-sound-bars {
|
|
821
853
|
height: 14px;
|
|
@@ -1207,14 +1239,32 @@
|
|
|
1207
1239
|
z-index: 45;
|
|
1208
1240
|
pointer-events: none;
|
|
1209
1241
|
}
|
|
1210
|
-
|
|
1242
|
+
|
|
1243
|
+
/* Notices sit in the band between the header and the controls under it, and an open reaction tray shrinks that band with padding, because a margin does not shrink a box held by both top and bottom. A call too short for the band's three notices folds them into the header instead (ToastStack's FOLD_BELOW_PX). */
|
|
1244
|
+
.chalk-toasts {
|
|
1245
|
+
--chalk-toast-top: 60px;
|
|
1246
|
+
--chalk-toast-lift: 92px;
|
|
1247
|
+
box-sizing: border-box;
|
|
1248
|
+
top: var(--chalk-toast-top);
|
|
1249
|
+
bottom: var(--chalk-toast-lift);
|
|
1250
|
+
margin-bottom: 0;
|
|
1251
|
+
padding-bottom: var(--chalk-reaction-toast-lift, 0px);
|
|
1252
|
+
justify-content: flex-end;
|
|
1253
|
+
}
|
|
1211
1254
|
[data-chalk]:has(.chalk-board[data-primary] .chalk-board-island[data-place="bottom"]) .chalk-toasts {
|
|
1212
|
-
|
|
1255
|
+
--chalk-toast-lift: 160px;
|
|
1256
|
+
}
|
|
1257
|
+
[data-chalk]:has(.chalk-board[data-primary] .chalk-board-island[data-place="compact"]) .chalk-toasts {
|
|
1258
|
+
--chalk-toast-lift: 182px;
|
|
1259
|
+
}
|
|
1260
|
+
[data-chalk]:has(.chalk-board[data-primary] .chalk-board-island[data-place="expanded"]) .chalk-toasts {
|
|
1261
|
+
--chalk-toast-lift: 242px;
|
|
1213
1262
|
}
|
|
1214
1263
|
.chalk-toast {
|
|
1215
1264
|
display: flex;
|
|
1216
1265
|
align-items: center;
|
|
1217
1266
|
gap: 10px;
|
|
1267
|
+
flex-shrink: 0;
|
|
1218
1268
|
min-height: 48px;
|
|
1219
1269
|
max-width: calc(100% - 32px);
|
|
1220
1270
|
padding: 6px 6px 6px 14px;
|
|
@@ -1229,10 +1279,56 @@
|
|
|
1229
1279
|
transform 0.15s ease-out;
|
|
1230
1280
|
}
|
|
1231
1281
|
.chalk-toast > span {
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1282
|
+
/* Long names, links and error tokens wrap inside the notice instead of widening it past the call. */
|
|
1283
|
+
min-width: 0;
|
|
1284
|
+
overflow-wrap: anywhere;
|
|
1235
1285
|
margin-right: 4px;
|
|
1286
|
+
line-height: 1.35;
|
|
1287
|
+
padding: 4px 0;
|
|
1288
|
+
}
|
|
1289
|
+
.chalk-toast[data-type="error"] {
|
|
1290
|
+
max-width: min(560px, calc(100% - 32px));
|
|
1291
|
+
}
|
|
1292
|
+
/* The header's notice button stays when a phone hides the header's other controls. */
|
|
1293
|
+
.chalk-notice-button {
|
|
1294
|
+
margin: 0 8px 0 auto;
|
|
1295
|
+
display: flex;
|
|
1296
|
+
align-items: center;
|
|
1297
|
+
justify-content: center;
|
|
1298
|
+
gap: 4px;
|
|
1299
|
+
flex-shrink: 0;
|
|
1300
|
+
min-width: 44px;
|
|
1301
|
+
height: 44px;
|
|
1302
|
+
padding: 0 12px;
|
|
1303
|
+
border-radius: 999px;
|
|
1304
|
+
background: var(--chalk-danger-surface);
|
|
1305
|
+
color: var(--chalk-danger-text);
|
|
1306
|
+
font-weight: 600;
|
|
1307
|
+
font-variant-numeric: tabular-nums;
|
|
1308
|
+
}
|
|
1309
|
+
.chalk-notice-list {
|
|
1310
|
+
z-index: 85;
|
|
1311
|
+
display: grid;
|
|
1312
|
+
gap: 4px;
|
|
1313
|
+
/* The room left in the call, not the window, so a short or narrow embedded call shows the list whole and scrolls to its last notice. */
|
|
1314
|
+
width: min(360px, var(--available-width, 360px));
|
|
1315
|
+
max-height: var(--available-height, calc(100vh - 80px));
|
|
1316
|
+
overflow: auto;
|
|
1317
|
+
padding: 6px;
|
|
1318
|
+
}
|
|
1319
|
+
.chalk-notice {
|
|
1320
|
+
display: flex;
|
|
1321
|
+
align-items: center;
|
|
1322
|
+
gap: 10px;
|
|
1323
|
+
min-height: 48px;
|
|
1324
|
+
padding: 6px 6px 6px 12px;
|
|
1325
|
+
border-radius: 10px;
|
|
1326
|
+
}
|
|
1327
|
+
.chalk-notice > span {
|
|
1328
|
+
flex: 1;
|
|
1329
|
+
min-width: 0;
|
|
1330
|
+
overflow-wrap: anywhere;
|
|
1331
|
+
line-height: 1.35;
|
|
1236
1332
|
}
|
|
1237
1333
|
.chalk-toast[data-exiting] {
|
|
1238
1334
|
opacity: 0;
|
|
@@ -1345,6 +1441,12 @@
|
|
|
1345
1441
|
background: var(--chalk-line-strong);
|
|
1346
1442
|
margin: 4px auto 12px;
|
|
1347
1443
|
}
|
|
1444
|
+
.chalk-sheet[data-variant="stage"] {
|
|
1445
|
+
height: 100%;
|
|
1446
|
+
max-height: max-content;
|
|
1447
|
+
overflow-y: auto;
|
|
1448
|
+
overscroll-behavior: contain;
|
|
1449
|
+
}
|
|
1348
1450
|
.chalk-sheet-heading {
|
|
1349
1451
|
display: flex;
|
|
1350
1452
|
align-items: center;
|
|
@@ -1457,10 +1559,20 @@
|
|
|
1457
1559
|
transform: scale(0.97);
|
|
1458
1560
|
}
|
|
1459
1561
|
.chalk-call-timer {
|
|
1562
|
+
flex-shrink: 0;
|
|
1460
1563
|
color: var(--chalk-muted-text);
|
|
1461
1564
|
font-weight: 500;
|
|
1462
1565
|
font-variant-numeric: tabular-nums;
|
|
1463
1566
|
}
|
|
1567
|
+
/* A long call name gives way to the timer and the notice button. */
|
|
1568
|
+
.chalk-call-name {
|
|
1569
|
+
min-width: 0;
|
|
1570
|
+
}
|
|
1571
|
+
.chalk-call-name > span[dir="auto"] {
|
|
1572
|
+
overflow: hidden;
|
|
1573
|
+
text-overflow: ellipsis;
|
|
1574
|
+
white-space: nowrap;
|
|
1575
|
+
}
|
|
1464
1576
|
.chalk-frame-stage {
|
|
1465
1577
|
position: absolute;
|
|
1466
1578
|
inset: 0;
|
|
@@ -1601,7 +1713,8 @@
|
|
|
1601
1713
|
min-height: 48px;
|
|
1602
1714
|
}
|
|
1603
1715
|
.chalk-toasts {
|
|
1604
|
-
|
|
1716
|
+
--chalk-toast-top: 52px;
|
|
1717
|
+
--chalk-toast-lift: 110px;
|
|
1605
1718
|
}
|
|
1606
1719
|
.chalk-drawer {
|
|
1607
1720
|
inset: auto 0 0;
|
package/dist/toast.d.ts
CHANGED
|
@@ -21,14 +21,14 @@ export declare const toast: ((options: ToastOptions) => string) & {
|
|
|
21
21
|
success: (options: Omit<ToastOptions, "type">) => string;
|
|
22
22
|
warning: (options: Omit<ToastOptions, "type">) => string;
|
|
23
23
|
};
|
|
24
|
-
declare function ToastProvider({ toastManager: manager, ...props }: React.ComponentProps<typeof ToastPrimitive.Provider>):
|
|
24
|
+
declare function ToastProvider({ toastManager: manager, ...props }: React.ComponentProps<typeof ToastPrimitive.Provider>): React.JSX.Element;
|
|
25
25
|
declare const ToastRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
26
26
|
declare const ToastContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
27
27
|
declare const ToastTitle: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
28
28
|
declare const ToastDescription: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
29
29
|
declare const ToastClose: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
30
30
|
declare const ToastAction: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
31
|
-
declare function ToastViewport({ className, children, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>):
|
|
31
|
+
declare function ToastViewport({ className, children, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>): React.JSX.Element;
|
|
32
32
|
declare function useToast<Data extends object = Record<string, unknown>>(): import("@base-ui/react").UseToastManagerReturnValue<Data>;
|
|
33
33
|
declare const Toast: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
|
|
34
34
|
Action: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
package/dist/toggle-group.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
2
3
|
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
|
|
3
4
|
import { type VariantProps } from "class-variance-authority";
|
|
@@ -5,6 +6,6 @@ import { toggleVariants } from "./toggle";
|
|
|
5
6
|
declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
|
|
6
7
|
spacing?: number;
|
|
7
8
|
orientation?: "horizontal" | "vertical";
|
|
8
|
-
}):
|
|
9
|
-
declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>):
|
|
9
|
+
}): React.JSX.Element;
|
|
10
|
+
declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
|
|
10
11
|
export { ToggleGroup, ToggleGroupItem };
|
package/dist/toggle.d.ts
CHANGED
|
@@ -15,5 +15,5 @@ type ToggleProps = Omit<TogglePrimitive.Props, "pressed" | "onPressedChange" | "
|
|
|
15
15
|
readonly ariaLabel?: string;
|
|
16
16
|
readonly ariaLabelledby?: string;
|
|
17
17
|
};
|
|
18
|
-
declare function Toggle({ className, variant, size, checked, enabled, onChange, label, ariaLabel, ariaLabelledby, pressed, onPressedChange, id, ...props }: ToggleProps):
|
|
18
|
+
declare function Toggle({ className, variant, size, checked, enabled, onChange, label, ariaLabel, ariaLabelledby, pressed, onPressedChange, id, ...props }: ToggleProps): React.JSX.Element;
|
|
19
19
|
export { Toggle, toggleVariants };
|
package/dist/tooltip.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
3
|
-
declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props):
|
|
3
|
+
declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): React.JSX.Element;
|
|
4
4
|
type TooltipProps = TooltipPrimitive.Root.Props & {
|
|
5
5
|
readonly content?: React.ReactNode;
|
|
6
6
|
readonly children?: React.ReactNode;
|
|
@@ -8,7 +8,7 @@ type TooltipProps = TooltipPrimitive.Root.Props & {
|
|
|
8
8
|
readonly delay?: number;
|
|
9
9
|
readonly className?: string;
|
|
10
10
|
};
|
|
11
|
-
declare function Tooltip({ content, children, position, delay, className, ...props }: TooltipProps):
|
|
12
|
-
declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props):
|
|
13
|
-
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">):
|
|
11
|
+
declare function Tooltip({ content, children, position, delay, className, ...props }: TooltipProps): React.JSX.Element;
|
|
12
|
+
declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): React.JSX.Element;
|
|
13
|
+
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
|
|
14
14
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@q9labsai/chalk-ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
},
|
|
181
181
|
"dependencies": {
|
|
182
182
|
"@base-ui/react": "^1.0.0",
|
|
183
|
-
"@q9labsai/chalk-assets": "^5.
|
|
183
|
+
"@q9labsai/chalk-assets": "^5.2.0",
|
|
184
184
|
"class-variance-authority": "^0.7.1",
|
|
185
185
|
"clsx": "^2.1.1",
|
|
186
186
|
"tailwind-merge": "^3.6.0"
|