@womp/kookie-ui 0.14.3 → 0.14.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/components.css +12 -0
- package/dist/cjs/components/button.d.ts +1 -1
- package/dist/cjs/components/button.d.ts.map +1 -1
- package/dist/cjs/components/button.js.map +1 -1
- package/dist/cjs/components/chatbar.d.ts +3 -28
- package/dist/cjs/components/chatbar.d.ts.map +1 -1
- package/dist/cjs/components/chatbar.js +2 -2
- package/dist/cjs/components/chatbar.js.map +3 -3
- package/dist/cjs/components/icon-button.d.ts +2 -1
- package/dist/cjs/components/icon-button.d.ts.map +1 -1
- package/dist/cjs/components/icon-button.js +2 -2
- package/dist/cjs/components/icon-button.js.map +2 -2
- package/dist/cjs/components/index.js +5 -5
- package/dist/cjs/components/index.js.map +3 -3
- package/dist/cjs/components/message-scroller.d.ts +3 -9
- package/dist/cjs/components/message-scroller.d.ts.map +1 -1
- package/dist/cjs/components/message-scroller.js +1 -1
- package/dist/cjs/components/message-scroller.js.map +3 -3
- package/dist/cjs/components/notice.js +2 -2
- package/dist/cjs/components/notice.js.map +2 -2
- package/dist/cjs/components/theme-panel.js.map +2 -2
- package/dist/cjs/components/toggle-button.d.ts +3 -37
- package/dist/cjs/components/toggle-button.d.ts.map +1 -1
- package/dist/cjs/components/toggle-button.js +3 -3
- package/dist/cjs/components/toggle-button.js.map +2 -2
- package/dist/cjs/components/toggle-icon-button.d.ts +3 -2
- package/dist/cjs/components/toggle-icon-button.d.ts.map +1 -1
- package/dist/cjs/components/toggle-icon-button.js +3 -3
- package/dist/cjs/components/toggle-icon-button.js.map +2 -2
- package/dist/cjs/components/toolbar.d.ts +4 -3
- package/dist/cjs/components/toolbar.d.ts.map +1 -1
- package/dist/cjs/components/toolbar.js +2 -2
- package/dist/cjs/components/toolbar.js.map +2 -2
- package/dist/cjs/index.js +6 -6
- package/dist/cjs/index.js.map +3 -3
- package/dist/esm/{chunk-BJ2Q2WVV.js → chunk-3OQM7SLQ.js} +2 -2
- package/dist/esm/chunk-57XCVY6J.js +2 -0
- package/dist/esm/chunk-57XCVY6J.js.map +7 -0
- package/dist/esm/{chunk-UCIIRQUE.js → chunk-6SVNBGZ6.js} +2 -2
- package/dist/esm/{chunk-UCIIRQUE.js.map → chunk-6SVNBGZ6.js.map} +1 -1
- package/dist/esm/chunk-7ZCQAMHZ.js +2 -0
- package/dist/esm/chunk-7ZCQAMHZ.js.map +7 -0
- package/dist/esm/chunk-CYSDGVKF.js +2 -0
- package/dist/esm/chunk-CYSDGVKF.js.map +7 -0
- package/dist/esm/{chunk-66GLO2EG.js → chunk-F7TOKXKZ.js} +2 -2
- package/dist/esm/{chunk-522UYMDA.js → chunk-FMMKOOS7.js} +2 -2
- package/dist/esm/chunk-FMMKOOS7.js.map +7 -0
- package/dist/esm/chunk-RA2XCS3M.js +2 -0
- package/dist/esm/chunk-RA2XCS3M.js.map +7 -0
- package/dist/esm/{chunk-YEYM7QQZ.js → chunk-T7Q6DQRD.js} +2 -2
- package/dist/esm/chunk-T7Q6DQRD.js.map +7 -0
- package/dist/esm/components/button.d.ts +1 -1
- package/dist/esm/components/button.d.ts.map +1 -1
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/chatbar.d.ts +3 -28
- package/dist/esm/components/chatbar.d.ts.map +1 -1
- package/dist/esm/components/chatbar.js +1 -1
- package/dist/esm/components/icon-button.d.ts +2 -1
- package/dist/esm/components/icon-button.d.ts.map +1 -1
- package/dist/esm/components/icon-button.js +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/message-scroller.d.ts +3 -9
- package/dist/esm/components/message-scroller.d.ts.map +1 -1
- package/dist/esm/components/message-scroller.js +1 -1
- package/dist/esm/components/notice.js +1 -1
- package/dist/esm/components/theme-panel.js +1 -1
- package/dist/esm/components/toggle-button.d.ts +3 -37
- package/dist/esm/components/toggle-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-button.js +1 -1
- package/dist/esm/components/toggle-icon-button.d.ts +3 -2
- package/dist/esm/components/toggle-icon-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-icon-button.js +1 -1
- package/dist/esm/components/toolbar.d.ts +4 -3
- package/dist/esm/components/toolbar.d.ts.map +1 -1
- package/dist/esm/components/toolbar.js +1 -1
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
- package/src/components/button.tsx +1 -1
- package/src/components/chatbar.tsx +5 -2
- package/src/components/icon-button.tsx +2 -1
- package/src/components/message-scroller.tsx +5 -3
- package/src/components/sidebar.css +16 -0
- package/src/components/toggle-button.tsx +3 -1
- package/src/components/toggle-icon-button.tsx +4 -2
- package/src/components/toolbar.tsx +6 -3
- package/styles.css +12 -0
- package/dist/esm/chunk-522UYMDA.js.map +0 -7
- package/dist/esm/chunk-DAGHSWME.js +0 -2
- package/dist/esm/chunk-DAGHSWME.js.map +0 -7
- package/dist/esm/chunk-IICXZUIB.js +0 -2
- package/dist/esm/chunk-IICXZUIB.js.map +0 -7
- package/dist/esm/chunk-KDYHYQ4D.js +0 -2
- package/dist/esm/chunk-KDYHYQ4D.js.map +0 -7
- package/dist/esm/chunk-RJTWRLK4.js +0 -2
- package/dist/esm/chunk-RJTWRLK4.js.map +0 -7
- package/dist/esm/chunk-YEYM7QQZ.js.map +0 -7
- /package/dist/esm/{chunk-BJ2Q2WVV.js.map → chunk-3OQM7SLQ.js.map} +0 -0
- /package/dist/esm/{chunk-66GLO2EG.js.map → chunk-F7TOKXKZ.js.map} +0 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import type { ButtonProps, ButtonRankProps } from './button.js';
|
|
3
3
|
/**
|
|
4
4
|
* ToggleButton props that extend Button with toggle-specific functionality
|
|
5
5
|
*
|
|
6
6
|
* The ToggleButton component provides a button that can be pressed/unpressed
|
|
7
7
|
* with proper accessibility announcements and state management.
|
|
8
8
|
*/
|
|
9
|
-
type ToggleButtonProps =
|
|
9
|
+
type ToggleButtonProps = Omit<ButtonProps<'button'>, 'as' | 'variant' | 'emphasis'> & ButtonRankProps & {
|
|
10
10
|
/** Controlled pressed state */
|
|
11
11
|
pressed?: boolean;
|
|
12
12
|
/** Callback when pressed state changes */
|
|
@@ -57,41 +57,7 @@ type ToggleButtonProps = React.ComponentPropsWithoutRef<typeof Button> & {
|
|
|
57
57
|
* </ToggleButton>
|
|
58
58
|
* ```
|
|
59
59
|
*/
|
|
60
|
-
declare const ToggleButton: React.ForwardRefExoticComponent<
|
|
61
|
-
variant?: import("./_internal/base-button.js").BaseButtonProps["variant"];
|
|
62
|
-
emphasis?: never;
|
|
63
|
-
} & import("./button.js").ButtonTooltipProps & {
|
|
64
|
-
overrideStyles?: import("./button.js").ButtonOverrideStyles;
|
|
65
|
-
iconOnly?: boolean;
|
|
66
|
-
} & {
|
|
67
|
-
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
68
|
-
} & Omit<Omit<any, "ref">, "className" | "type" | "value" | "style" | "form" | "slot" | "title" | "asChild" | "color" | "key" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "disabled" | "size" | "variant" | "radius" | "material" | "panelBackground" | "flush" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "m" | "ml" | "mr" | "mt" | "mb" | "mx" | "my" | "emphasis" | "loading" | "fullWidth" | keyof import("./button.js").ButtonTooltipProps | "overrideStyles" | "iconOnly"> & {
|
|
69
|
-
ref?: React.ForwardedRef<HTMLButtonElement>;
|
|
70
|
-
}, "ref"> & {
|
|
71
|
-
/** Controlled pressed state */
|
|
72
|
-
pressed?: boolean;
|
|
73
|
-
/** Callback when pressed state changes */
|
|
74
|
-
onPressedChange?: (pressed: boolean) => void;
|
|
75
|
-
/** Default pressed state for uncontrolled usage */
|
|
76
|
-
defaultPressed?: boolean;
|
|
77
|
-
}, "ref"> | Omit<Omit<Omit<import("./_internal/base-button.js").BaseButtonProps, "as" | "variant"> & {
|
|
78
|
-
emphasis?: import("./button.js").ButtonEmphasis;
|
|
79
|
-
variant?: never;
|
|
80
|
-
} & import("./button.js").ButtonTooltipProps & {
|
|
81
|
-
overrideStyles?: import("./button.js").ButtonOverrideStyles;
|
|
82
|
-
iconOnly?: boolean;
|
|
83
|
-
} & {
|
|
84
|
-
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
85
|
-
} & Omit<Omit<any, "ref">, "className" | "type" | "value" | "style" | "form" | "slot" | "title" | "asChild" | "color" | "key" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "disabled" | "size" | "variant" | "radius" | "material" | "panelBackground" | "flush" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "m" | "ml" | "mr" | "mt" | "mb" | "mx" | "my" | "emphasis" | "loading" | "fullWidth" | keyof import("./button.js").ButtonTooltipProps | "overrideStyles" | "iconOnly"> & {
|
|
86
|
-
ref?: React.ForwardedRef<HTMLButtonElement>;
|
|
87
|
-
}, "ref"> & {
|
|
88
|
-
/** Controlled pressed state */
|
|
89
|
-
pressed?: boolean;
|
|
90
|
-
/** Callback when pressed state changes */
|
|
91
|
-
onPressedChange?: (pressed: boolean) => void;
|
|
92
|
-
/** Default pressed state for uncontrolled usage */
|
|
93
|
-
defaultPressed?: boolean;
|
|
94
|
-
}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
|
|
60
|
+
declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
95
61
|
export { ToggleButton };
|
|
96
62
|
export type { ToggleButtonProps };
|
|
97
63
|
//# sourceMappingURL=toggle-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEhE;;;;;GAKG;AACH,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC,GACjF,eAAe,GAAG;IAClB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,YAAY,6FA6ChB,CAAC;AAGH,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../chunk-
|
|
1
|
+
import{a}from"../chunk-57XCVY6J.js";import"../chunk-VK7RNXUO.js";import"../chunk-EE54S7YV.js";import"../chunk-6SVNBGZ6.js";import"../chunk-2N2AQNJH.js";import"../chunk-HIBX2EXV.js";import"../chunk-BPVVFHYD.js";import"../chunk-KJTEZVOF.js";import"../chunk-3HGHPAH4.js";import"../chunk-G2CKYO2I.js";import"../chunk-AXUDFYLY.js";import"../chunk-KNQBAOMV.js";import"../chunk-FD2TR343.js";import"../chunk-ZWZGUBL4.js";import"../chunk-WYADYDPN.js";import"../chunk-ZE2KAVXW.js";import"../chunk-FISGGGPC.js";import"../chunk-WAURCNAS.js";import"../chunk-F22ZRNWL.js";import"../chunk-7YIQV7VO.js";import"../chunk-BKES3M4Y.js";import"../chunk-PAEHH3WS.js";import"../chunk-3KB2XWBE.js";import"../chunk-AGAQC4HH.js";import"../chunk-5T6K7VPP.js";import"../chunk-PXUQEA77.js";import"../chunk-SMGDH54W.js";import"../chunk-SNR5VFWG.js";import"../chunk-FWB47YCH.js";import"../chunk-K53W3ELO.js";import"../chunk-TTFUM47A.js";import"../chunk-VX44UTQ5.js";import"../chunk-ERGJN7FJ.js";import"../chunk-5TXQLK4G.js";import"../chunk-E7LJHM3S.js";import"../chunk-KRJTW535.js";import"../chunk-6FLLFCBU.js";import"../chunk-AX5S56DS.js";import"../chunk-GSTOGDAJ.js";import"../chunk-E23RKOQJ.js";import"../chunk-JUY7CBSL.js";import"../chunk-WRWNN2NW.js";import"../chunk-QM3RCK5P.js";import"../chunk-RZCX6IBE.js";import"../chunk-NZJGC6ZW.js";import"../chunk-AVFGMLL4.js";import"../chunk-YIK4ACXS.js";import"../chunk-Z4DTHR2S.js";import"../chunk-OS3FCYZY.js";export{a as ToggleButton};
|
|
2
2
|
//# sourceMappingURL=toggle-button.js.map
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Toggle } from 'radix-ui';
|
|
3
3
|
import type { IconButtonProps } from './icon-button.js';
|
|
4
|
+
import type { ButtonRankProps } from './button.js';
|
|
4
5
|
/**
|
|
5
6
|
* Extract toggle-specific props from Radix Toggle
|
|
6
7
|
* These props control the toggle state and behavior
|
|
@@ -30,14 +31,14 @@ type AccessibilityProps = {
|
|
|
30
31
|
* Combine IconButton props with Toggle-specific props
|
|
31
32
|
* Includes tooltip props from IconButton for comprehensive functionality
|
|
32
33
|
*/
|
|
33
|
-
|
|
34
|
+
type ToggleIconButtonProps = Omit<IconButtonProps, 'as' | 'variant' | 'emphasis'> & ButtonRankProps & {
|
|
34
35
|
/** Controlled pressed state */
|
|
35
36
|
pressed?: ToggleProps['pressed'];
|
|
36
37
|
/** Callback when pressed state changes */
|
|
37
38
|
onPressedChange?: ToggleProps['onPressedChange'];
|
|
38
39
|
/** Default pressed state for uncontrolled usage */
|
|
39
40
|
defaultPressed?: ToggleProps['defaultPressed'];
|
|
40
|
-
}
|
|
41
|
+
};
|
|
41
42
|
/**
|
|
42
43
|
* Intersection with accessibility props to ensure compliance
|
|
43
44
|
* This type ensures all ToggleIconButton instances have proper accessibility
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAInD;;;GAGG;AACH,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAEtE;;;;;;;;GAQG;AACH,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAEnF;;;GAGG;AACH,KAAK,qBAAqB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC,GAC/E,eAAe,GAAG;IAClB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,0CAA0C;IAC1C,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACjD,mDAAmD;IACnD,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAC9C,CAAC;AAEJ;;;GAGG;AACH,KAAK,sCAAsC,GAAG,qBAAqB,GAAG,kBAAkB,CAAC;AAEzF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,QAAA,MAAM,gBAAgB,kHAEpB,CAAC;AAGH,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,sCAAsC,IAAI,qBAAqB,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../chunk-
|
|
1
|
+
import{a}from"../chunk-CYSDGVKF.js";import"../chunk-57XCVY6J.js";import"../chunk-VK7RNXUO.js";import"../chunk-EE54S7YV.js";import"../chunk-6SVNBGZ6.js";import"../chunk-2N2AQNJH.js";import"../chunk-HIBX2EXV.js";import"../chunk-BPVVFHYD.js";import"../chunk-KJTEZVOF.js";import"../chunk-3HGHPAH4.js";import"../chunk-G2CKYO2I.js";import"../chunk-AXUDFYLY.js";import"../chunk-KNQBAOMV.js";import"../chunk-FD2TR343.js";import"../chunk-ZWZGUBL4.js";import"../chunk-WYADYDPN.js";import"../chunk-ZE2KAVXW.js";import"../chunk-FISGGGPC.js";import"../chunk-WAURCNAS.js";import"../chunk-F22ZRNWL.js";import"../chunk-7YIQV7VO.js";import"../chunk-BKES3M4Y.js";import"../chunk-PAEHH3WS.js";import"../chunk-3KB2XWBE.js";import"../chunk-AGAQC4HH.js";import"../chunk-5T6K7VPP.js";import"../chunk-PXUQEA77.js";import"../chunk-SMGDH54W.js";import"../chunk-SNR5VFWG.js";import"../chunk-FWB47YCH.js";import"../chunk-K53W3ELO.js";import"../chunk-TTFUM47A.js";import"../chunk-VX44UTQ5.js";import"../chunk-ERGJN7FJ.js";import"../chunk-5TXQLK4G.js";import"../chunk-E7LJHM3S.js";import"../chunk-KRJTW535.js";import"../chunk-6FLLFCBU.js";import"../chunk-AX5S56DS.js";import"../chunk-GSTOGDAJ.js";import"../chunk-E23RKOQJ.js";import"../chunk-JUY7CBSL.js";import"../chunk-WRWNN2NW.js";import"../chunk-QM3RCK5P.js";import"../chunk-RZCX6IBE.js";import"../chunk-NZJGC6ZW.js";import"../chunk-AVFGMLL4.js";import"../chunk-YIK4ACXS.js";import"../chunk-Z4DTHR2S.js";import"../chunk-OS3FCYZY.js";export{a as ToggleIconButton};
|
|
2
2
|
//# sourceMappingURL=toggle-icon-button.js.map
|
|
@@ -5,6 +5,7 @@ import type { ButtonProps } from './button.js';
|
|
|
5
5
|
import type { MarginProps } from '../props/margin.props.js';
|
|
6
6
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
7
7
|
import type { GetPropDefTypes } from '../props/prop-def.js';
|
|
8
|
+
import type { ButtonRankProps } from './button.js';
|
|
8
9
|
type ToolbarOwnProps = GetPropDefTypes<typeof toolbarRootPropDefs>;
|
|
9
10
|
interface ToolbarProps extends ComponentPropsWithout<typeof ToolbarPrimitive.Root, RemovedProps | 'orientation'>, ToolbarOwnProps, MarginProps {
|
|
10
11
|
}
|
|
@@ -37,13 +38,13 @@ interface ToolbarGroupProps extends ComponentPropsWithout<'div', RemovedProps> {
|
|
|
37
38
|
* To cluster controls without a well, use a `Flex`.
|
|
38
39
|
*/
|
|
39
40
|
declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
-
type ToolbarButtonBaseProps = Omit<ButtonProps, 'as' | 'asChild'>;
|
|
41
|
+
type ToolbarButtonBaseProps = Omit<ButtonProps, 'as' | 'asChild' | 'variant' | 'emphasis'>;
|
|
41
42
|
/** A labelled button: takes every `Button` prop. */
|
|
42
|
-
type ToolbarTextButtonProps = ToolbarButtonBaseProps & {
|
|
43
|
+
type ToolbarTextButtonProps = ToolbarButtonBaseProps & ButtonRankProps & {
|
|
43
44
|
iconOnly?: false;
|
|
44
45
|
};
|
|
45
46
|
/** An icon-only button: renders an `IconButton`, and the type requires an `aria-label`. */
|
|
46
|
-
type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'overrideStyles'> & {
|
|
47
|
+
type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'overrideStyles'> & ButtonRankProps & {
|
|
47
48
|
iconOnly: true;
|
|
48
49
|
/** The control's accessible name. An icon has no words of its own, so this is required. */
|
|
49
50
|
'aria-label': string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAOzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAOzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAyCnD,KAAK,eAAe,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEnE,UAAU,YACR,SAAQ,qBAAqB,CAAC,OAAO,gBAAgB,CAAC,IAAI,EAAE,YAAY,GAAG,aAAa,CAAC,EACvF,eAAe,EACf,WAAW;CAAG;AAElB;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,WAAW,qFAqBf,CAAC;AAOH,UAAU,iBAAkB,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC;IAC5E,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,QAAA,MAAM,YAAY,0FAiBjB,CAAC;AAOF,KAAK,sBAAsB,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAE3F,oDAAoD;AACpD,KAAK,sBAAsB,GAAG,sBAAsB,GAClD,eAAe,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEF,2FAA2F;AAC3F,KAAK,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,EAAE,YAAY,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,GAC7G,eAAe,GAAG;IAClB,QAAQ,EAAE,IAAI,CAAC;IACf,2FAA2F;IAC3F,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,kBAAkB,GAAG,sBAAsB,GAAG,sBAAsB,CAAC;AAM1E;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,8FA4BjB,CAAC;AAOH,KAAK,qBAAqB,GAAG,qBAAqB,CAAC,OAAO,gBAAgB,CAAC,SAAS,EAAE,YAAY,GAAG,aAAa,CAAC,CAAC;AAEpH;;;GAGG;AACH,QAAA,MAAM,gBAAgB,8FAWrB,CAAC;AAUF,UAAU,iBAAiB;IACzB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oFAAoF;IACpF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;GAIG;AACH,QAAA,MAAM,YAAY,2FAmBjB,CAAC;AAOF,QAAA,MAAM,OAAO;;;;;;CAMX,CAAC;AAEH,OAAO,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,WAAW,IAAI,IAAI,EACnB,YAAY,IAAI,KAAK,EACrB,aAAa,IAAI,MAAM,EACvB,gBAAgB,IAAI,SAAS,EAC7B,YAAY,IAAI,KAAK,GACtB,CAAC;AACF,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,YAAY,IAAI,SAAS,EACzB,iBAAiB,IAAI,UAAU,EAC/B,kBAAkB,IAAI,WAAW,EACjC,qBAAqB,IAAI,cAAc,EACvC,iBAAiB,IAAI,UAAU,GAChC,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{a,b,c,d,e,f}from"../chunk-
|
|
1
|
+
"use client";import{a,b,c,d,e,f}from"../chunk-FMMKOOS7.js";import"../chunk-ZUOK3KFY.js";import"../chunk-T7Q6DQRD.js";import"../chunk-6SVNBGZ6.js";import"../chunk-2N2AQNJH.js";import"../chunk-HIBX2EXV.js";import"../chunk-BPVVFHYD.js";import"../chunk-KJTEZVOF.js";import"../chunk-3HGHPAH4.js";import"../chunk-G2CKYO2I.js";import"../chunk-AXUDFYLY.js";import"../chunk-KNQBAOMV.js";import"../chunk-FD2TR343.js";import"../chunk-ZWZGUBL4.js";import"../chunk-WYADYDPN.js";import"../chunk-ZE2KAVXW.js";import"../chunk-FISGGGPC.js";import"../chunk-WAURCNAS.js";import"../chunk-F22ZRNWL.js";import"../chunk-7YIQV7VO.js";import"../chunk-BKES3M4Y.js";import"../chunk-PAEHH3WS.js";import"../chunk-3KB2XWBE.js";import"../chunk-AGAQC4HH.js";import"../chunk-5T6K7VPP.js";import"../chunk-PXUQEA77.js";import"../chunk-SMGDH54W.js";import"../chunk-SNR5VFWG.js";import"../chunk-FWB47YCH.js";import"../chunk-K53W3ELO.js";import"../chunk-TTFUM47A.js";import"../chunk-VX44UTQ5.js";import"../chunk-ERGJN7FJ.js";import"../chunk-5TXQLK4G.js";import"../chunk-E7LJHM3S.js";import"../chunk-KRJTW535.js";import"../chunk-6FLLFCBU.js";import"../chunk-AX5S56DS.js";import"../chunk-GSTOGDAJ.js";import"../chunk-E23RKOQJ.js";import"../chunk-JUY7CBSL.js";import"../chunk-WRWNN2NW.js";import"../chunk-QM3RCK5P.js";import"../chunk-RZCX6IBE.js";import"../chunk-NZJGC6ZW.js";import"../chunk-AVFGMLL4.js";import"../chunk-YIK4ACXS.js";import"../chunk-Z4DTHR2S.js";import"../chunk-OS3FCYZY.js";export{c as Button,b as Group,a as Root,d as Separator,e as Title,f as Toolbar,c as ToolbarButton,b as ToolbarGroup,d as ToolbarSeparator,e as ToolbarTitle};
|
|
2
2
|
//# sourceMappingURL=toolbar.js.map
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./chunk-2KZ4NI3X.js";import{a as No,b as Oo}from"./chunk-HT7RFHLW.js";import{a as Lo,b as Mo}from"./chunk-IUER6BNH.js";import"./chunk-C7EVYSWK.js";import{a as Ao}from"./chunk-
|
|
1
|
+
import"./chunk-2KZ4NI3X.js";import{a as No,b as Oo}from"./chunk-HT7RFHLW.js";import{a as Lo,b as Mo}from"./chunk-IUER6BNH.js";import"./chunk-C7EVYSWK.js";import{a as Ao}from"./chunk-CYSDGVKF.js";import{a as zo}from"./chunk-57XCVY6J.js";import{a as yo}from"./chunk-VK7RNXUO.js";import{a as wo}from"./chunk-EE54S7YV.js";import{b as Bo,c as Co,d as Do,e as Eo,f as Fo}from"./chunk-FMMKOOS7.js";import"./chunk-ZUOK3KFY.js";import{a as Go}from"./chunk-3M73GWN5.js";import"./chunk-ZVIWTYHE.js";import{a as qo}from"./chunk-ROGC7K5N.js";import{c as so}from"./chunk-CL6P54QT.js";import"./chunk-GRRV4I2I.js";import{a as uo,b as vo}from"./chunk-F7TOKXKZ.js";import{a as jo}from"./chunk-VBAXORVV.js";import{c as ko}from"./chunk-UE2OBZIS.js";import"./chunk-AUV6B4AH.js";import{h as lo}from"./chunk-RUPET4E7.js";import"./chunk-BALS3AVM.js";import{e as no}from"./chunk-SIBSXKFF.js";import"./chunk-TZTUPQYK.js";import"./chunk-OVGPUFRI.js";import{a as ho}from"./chunk-HJLBVNQE.js";import"./chunk-5G4WWJ4Z.js";import{a as io}from"./chunk-43A5GUSI.js";import"./chunk-XI5YXUCK.js";import"./chunk-3WCSLQNH.js";import{h as Io}from"./chunk-UTHTSYSL.js";import"./chunk-ADXZNG4F.js";import"./chunk-2EQWBT2S.js";import{p as Ho}from"./chunk-OUSDYZDE.js";import"./chunk-KJC32RWT.js";import{a as bo}from"./chunk-KXSMY4ZF.js";import{c as ao}from"./chunk-IHRLGR6J.js";import"./chunk-VJUFYYKP.js";import{h as co}from"./chunk-SURYYF7I.js";import"./chunk-PLTTQFRQ.js";import{a as go}from"./chunk-K7BWSYVP.js";import"./chunk-UBWRIE4C.js";import{g as Jo}from"./chunk-45AMHIBO.js";import"./chunk-NIX6Z3JG.js";import{c as mo}from"./chunk-IY3GKGDZ.js";import{c as po}from"./chunk-CIKDGYX3.js";import"./chunk-2DKLJMUU.js";import{a as to}from"./chunk-4JNHUPIM.js";import"./chunk-STPMPY3X.js";import{a as xo}from"./chunk-FHEHX7CE.js";import{a as ro}from"./chunk-XEZXKPLE.js";import{a as eo}from"./chunk-RUOOCYK4.js";import"./chunk-CMEKH4I5.js";import{a as fo}from"./chunk-GLERJXVS.js";import"./chunk-MCQCG6AS.js";import"./chunk-FNB47XDO.js";import{a as $}from"./chunk-O2WPAUQN.js";import"./chunk-ZK55O7TN.js";import{i as Ko}from"./chunk-7ZCQAMHZ.js";import{e as oo}from"./chunk-R2MQMCND.js";import"./chunk-7ZOGH5NT.js";import{a as Z}from"./chunk-VUKTURU4.js";import{a as Y}from"./chunk-IVBKTHDM.js";import"./chunk-IBF5U4QW.js";import"./chunk-L6UXAITB.js";import"./chunk-GFOSP3PZ.js";import{a as _}from"./chunk-N6Q3L64W.js";import"./chunk-JAMLW534.js";import{d as X}from"./chunk-34UMKY2L.js";import"./chunk-VJSZG35J.js";import{e as S}from"./chunk-JXVUTFQN.js";import"./chunk-OW4KAIWF.js";import{g as U}from"./chunk-DJA5MCJA.js";import{a as T}from"./chunk-MHANZINI.js";import{o as V}from"./chunk-4WLDX7WZ.js";import"./chunk-WOR3JCLX.js";import{a as W}from"./chunk-7FC7HF76.js";import"./chunk-4JQZUQY7.js";import{a as M}from"./chunk-SGUTNJUO.js";import"./chunk-YBS2IB7Z.js";import{l as O}from"./chunk-V3QVAXH3.js";import{g as N}from"./chunk-3TIO3EMN.js";import"./chunk-WHAKQCNV.js";import"./chunk-27SCVCQY.js";import{a as P}from"./chunk-3UZHKW6I.js";import"./chunk-PPNWGWN3.js";import{n as R}from"./chunk-H7LHGT44.js";import{a as Q}from"./chunk-YLLCCUC7.js";import"./chunk-OA7C34MJ.js";import{m as H}from"./chunk-RA2XCS3M.js";import{b as F,c as G}from"./chunk-3OQM7SLQ.js";import{a as A}from"./chunk-T7Q6DQRD.js";import{c as J}from"./chunk-4BPRLR6C.js";import{a as I}from"./chunk-C7UXUTUF.js";import"./chunk-2C5WLKEZ.js";import"./chunk-HAGKI7NA.js";import{c as K}from"./chunk-ZE2GWHPY.js";import"./chunk-V32EP3S7.js";import"./chunk-YL62I5SI.js";import{a as L}from"./chunk-GLKN32J3.js";import{a as B,b as C,c as D,d as E}from"./chunk-IX5HIHVI.js";import"./chunk-UICSVJ3B.js";import{a as v}from"./chunk-EUSMN3K7.js";import"./chunk-FGORMEAO.js";import{a as y}from"./chunk-6SVNBGZ6.js";import{a as w}from"./chunk-2N2AQNJH.js";import{d as z}from"./chunk-5JS7ADWX.js";import"./chunk-O2RISF37.js";import{f as k}from"./chunk-4D5LR4H6.js";import{a as j}from"./chunk-HNO4X33C.js";import"./chunk-CSUEZWN5.js";import{a as l}from"./chunk-Y7LT3F6R.js";import{a as n}from"./chunk-OB3MHLQL.js";import"./chunk-47CEZJM2.js";import{a as s}from"./chunk-S3GZZXQ7.js";import{a as q}from"./chunk-HIBX2EXV.js";import"./chunk-BPVVFHYD.js";import"./chunk-JTN3KTAS.js";import{a as u}from"./chunk-LJXP6K5Y.js";import"./chunk-OJSDBLP7.js";import{a as c}from"./chunk-ERNM3KVF.js";import{f as d}from"./chunk-6JP5PIOO.js";import"./chunk-2T74JEVN.js";import{h as i}from"./chunk-3Q3EOUGJ.js";import"./chunk-MJJ7XDIP.js";import{a as g}from"./chunk-HFVD7W6R.js";import"./chunk-IV4YJRVR.js";import{a as h}from"./chunk-KJTEZVOF.js";import"./chunk-3HGHPAH4.js";import"./chunk-G2CKYO2I.js";import"./chunk-AXUDFYLY.js";import"./chunk-KNQBAOMV.js";import"./chunk-FD2TR343.js";import"./chunk-ZWZGUBL4.js";import"./chunk-WYADYDPN.js";import"./chunk-ZE2KAVXW.js";import"./chunk-XKBLNVOD.js";import"./chunk-GCUGJXI2.js";import"./chunk-SQ4BU4GH.js";import{a as t,b as x,c as a}from"./chunk-FISGGGPC.js";import"./chunk-WAURCNAS.js";import"./chunk-F22ZRNWL.js";import"./chunk-7YIQV7VO.js";import"./chunk-SQZ5O7QS.js";import{a as b}from"./chunk-GONBMSRL.js";import"./chunk-5GXFBLBJ.js";import"./chunk-UBOOUDS4.js";import"./chunk-XPRPYCII.js";import"./chunk-5BWLY27A.js";import"./chunk-PS6NEG5A.js";import"./chunk-ZQVYY7UT.js";import"./chunk-62CJL5G7.js";import"./chunk-3J6AUDID.js";import"./chunk-HCNO7PX6.js";import"./chunk-GMHA5CFH.js";import"./chunk-A2XVR7GL.js";import"./chunk-BZZXXZ3O.js";import"./chunk-2LYX5S7H.js";import"./chunk-HWQ3NTJP.js";import"./chunk-BKES3M4Y.js";import{a as f}from"./chunk-PAEHH3WS.js";import"./chunk-3KB2XWBE.js";import{a as m}from"./chunk-AGAQC4HH.js";import"./chunk-5T6K7VPP.js";import{a as e}from"./chunk-PXUQEA77.js";import"./chunk-SMGDH54W.js";import"./chunk-SNR5VFWG.js";import{b as o,c as r}from"./chunk-FWB47YCH.js";import"./chunk-K53W3ELO.js";import"./chunk-TTFUM47A.js";import"./chunk-VX44UTQ5.js";import"./chunk-ERGJN7FJ.js";import"./chunk-5TXQLK4G.js";import"./chunk-E7LJHM3S.js";import"./chunk-KRJTW535.js";import"./chunk-RON6FXLO.js";import"./chunk-DVSXWSAT.js";import"./chunk-UK3BFTI2.js";import{a as p}from"./chunk-IPHKKZYE.js";import"./chunk-XILM2OMC.js";import"./chunk-3XSB7YIM.js";import"./chunk-YA5DF67M.js";import"./chunk-6FLLFCBU.js";import"./chunk-AX5S56DS.js";import"./chunk-GSTOGDAJ.js";import"./chunk-E23RKOQJ.js";import"./chunk-JUY7CBSL.js";import"./chunk-WRWNN2NW.js";import"./chunk-QM3RCK5P.js";import"./chunk-RZCX6IBE.js";import"./chunk-NZJGC6ZW.js";import"./chunk-WDNTAQ6G.js";import"./chunk-AVFGMLL4.js";import"./chunk-YIK4ACXS.js";import"./chunk-WTXQB2EV.js";import"./chunk-Z4DTHR2S.js";import"./chunk-JSW6J6RS.js";import"./chunk-OS3FCYZY.js";export{Lo as APPEARANCE_STORAGE_KEY,c as AccessibleIcon,d as Accordion,i as AlertDialog,k as AppBar,l as AspectRatio,n as Avatar,s as Badge,u as Blockquote,v as Box,y as Button,z as Callout,j as Card,H as Chatbar,L as Checkbox,J as CheckboxCards,K as CheckboxGroup,D as ChevronDownIcon,M as Code,O as Combobox,G as Confirmation,P as Container,R as ContextMenu,S as DataList,U as Dialog,V as DropdownMenu,W as Em,e as Flex,I as Grid,g as Heading,X as HoverCard,A as IconButton,Z as Image,_ as Inset,p as Kbd,$ as Link,Ko as MessageScroller,oo as Navbar,F as Notice,N as Popover,ro as Portal,eo as Progress,fo as Quote,to as Radio,mo as RadioCards,po as RadioGroup,xo as Reset,b as ScrollArea,bo as Section,ao as SegmentedControl,co as Select,go as Separator,Jo as Sheet,Io as Shell,Ho as Sidebar,Y as Skeleton,ho as Slider,o as Slot,r as Slottable,f as Spinner,io as Strong,jo as Switch,ko as TabNav,lo as Table,no as Tabs,h as Text,qo as TextArea,so as TextField,a as Theme,t as ThemeContext,uo as ThemePanel,vo as ThemePanelContent,C as ThickCheckIcon,E as ThickChevronRightIcon,B as ThickDividerHorizontalIcon,zo as ToggleButton,Ao as ToggleIconButton,Fo as Toolbar,Co as ToolbarButton,Bo as ToolbarGroup,Do as ToolbarSeparator,Eo as ToolbarTitle,q as Tooltip,Go as UserCard,Q as VirtualMenu,m as VisuallyHidden,Mo as appearanceScript,No as setAppearance,Oo as useAppearance,T as useBodyPointerEventsCleanup,wo as useLiveAnnouncer,x as useThemeContext,yo as useToggleState,w as useTooltipWrapper};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -251,4 +251,4 @@ const Button = React.forwardRef(
|
|
|
251
251
|
Button.displayName = 'Button';
|
|
252
252
|
|
|
253
253
|
export { Button };
|
|
254
|
-
export type { ButtonProps, ButtonEmphasis, ButtonOverrideStyles, ButtonOverrideStateStyles };
|
|
254
|
+
export type { ButtonProps, ButtonEmphasis, ButtonRankProps, ButtonOverrideStyles, ButtonOverrideStateStyles };
|
|
@@ -17,6 +17,7 @@ import { VisuallyHidden } from './visually-hidden.js';
|
|
|
17
17
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
18
18
|
import type { accentColors } from '../props/color.prop.js';
|
|
19
19
|
import type { radii } from '../props/radius.prop.js';
|
|
20
|
+
import type { ButtonRankProps } from './button.js';
|
|
20
21
|
|
|
21
22
|
// Avoid SSR warnings by using an isomorphic layout effect
|
|
22
23
|
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
@@ -1294,7 +1295,8 @@ RowEnd.displayName = 'Chatbar.RowEnd';
|
|
|
1294
1295
|
|
|
1295
1296
|
type SendStatus = 'ready' | 'submitted' | 'streaming' | 'error';
|
|
1296
1297
|
|
|
1297
|
-
type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> &
|
|
1298
|
+
type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis'> &
|
|
1299
|
+
ButtonRankProps & {
|
|
1298
1300
|
/** Optional override for accessible name. Defaults to "Send". */
|
|
1299
1301
|
'aria-label'?: string;
|
|
1300
1302
|
'aria-labelledby'?: string;
|
|
@@ -1332,6 +1334,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
|
|
|
1332
1334
|
className,
|
|
1333
1335
|
size: sizeProp,
|
|
1334
1336
|
variant: variantProp,
|
|
1337
|
+
emphasis,
|
|
1335
1338
|
tabIndex,
|
|
1336
1339
|
onClick,
|
|
1337
1340
|
status = 'ready',
|
|
@@ -1405,7 +1408,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
|
|
|
1405
1408
|
{...buttonProps}
|
|
1406
1409
|
ref={forwardedRef}
|
|
1407
1410
|
size={sizeProp ?? ctx.size}
|
|
1408
|
-
variant
|
|
1411
|
+
{...(emphasis ? { emphasis } : { variant: variantProp ?? (ctx.open || mode !== 'send' ? 'solid' : 'ghost') })}
|
|
1409
1412
|
disabled={inactive}
|
|
1410
1413
|
className={classNames('rt-ChatbarSend', className)}
|
|
1411
1414
|
style={{ opacity: visible ? 1 : 0, pointerEvents: visible ? undefined : 'none', ...style }}
|
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { BaseButton } from './_internal/base-button.js';
|
|
4
4
|
import { Button } from './button.js';
|
|
5
5
|
import type { BaseButtonProps } from './_internal/base-button.js';
|
|
6
|
+
import type { ButtonRankProps } from './button.js';
|
|
6
7
|
|
|
7
8
|
type IconButtonElement = React.ElementRef<typeof BaseButton>;
|
|
8
9
|
|
|
@@ -41,7 +42,7 @@ interface IconButtonTooltipProps {
|
|
|
41
42
|
* Core IconButton props excluding the 'as' prop for polymorphic behavior
|
|
42
43
|
* Combines BaseButton props with accessibility requirements and tooltip functionality
|
|
43
44
|
*/
|
|
44
|
-
type IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps & IconButtonTooltipProps;
|
|
45
|
+
type IconButtonOwnProps = Omit<BaseButtonProps, 'as' | 'variant'> & ButtonRankProps & AccessibilityProps & IconButtonTooltipProps;
|
|
45
46
|
|
|
46
47
|
/**
|
|
47
48
|
* Polymorphic IconButton props that support rendering as different HTML elements
|
|
@@ -44,6 +44,7 @@ import { useComposedRefs } from 'radix-ui/internal';
|
|
|
44
44
|
|
|
45
45
|
import { IconButton, type IconButtonProps } from './icon-button.js';
|
|
46
46
|
import { useScrollEdges } from '../hooks/use-scroll-edges.js';
|
|
47
|
+
import type { ButtonRankProps } from './button.js';
|
|
47
48
|
|
|
48
49
|
interface RootProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
49
50
|
/**
|
|
@@ -128,7 +129,8 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(({ className, ...props
|
|
|
128
129
|
));
|
|
129
130
|
Item.displayName = 'MessageScroller.Item';
|
|
130
131
|
|
|
131
|
-
type ButtonProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> &
|
|
132
|
+
type ButtonProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis'> &
|
|
133
|
+
ButtonRankProps & {
|
|
132
134
|
/** Accessible name, in your words. Default "Jump to the latest". */
|
|
133
135
|
'aria-label'?: string;
|
|
134
136
|
/** `end` jumps to the latest message (default); `start` to the first. */
|
|
@@ -142,7 +144,7 @@ type ButtonProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> & {
|
|
|
142
144
|
* Place it inside `Root`, after the viewport. It sits over the viewport's bottom edge.
|
|
143
145
|
*/
|
|
144
146
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
145
|
-
({ direction = 'end', behavior, className, children, size = '2', variant = 'surface', color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
|
|
147
|
+
({ direction = 'end', behavior, className, children, size = '2', variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
|
|
146
148
|
<Primitive.Button
|
|
147
149
|
direction={direction}
|
|
148
150
|
{...(behavior ? { behavior } : {})}
|
|
@@ -151,7 +153,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
151
153
|
{...props}
|
|
152
154
|
ref={forwardedRef}
|
|
153
155
|
size={size}
|
|
154
|
-
|
|
156
|
+
{...(emphasis ? { emphasis } : { variant })}
|
|
155
157
|
color={color}
|
|
156
158
|
radius={radius}
|
|
157
159
|
aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}
|
|
@@ -1466,3 +1466,19 @@
|
|
|
1466
1466
|
width: var(--content-icon-size-3);
|
|
1467
1467
|
height: var(--content-icon-size-3);
|
|
1468
1468
|
}
|
|
1469
|
+
|
|
1470
|
+
/* In a Rail the fill is the icon tile, not the row. Under more contrast the tile goes solid and its icon
|
|
1471
|
+
takes the solid ink, so the icon never sits in solid ink on a pale tile. */
|
|
1472
|
+
@media (prefers-contrast: more) {
|
|
1473
|
+
:where(.rt-ShellRailContent :is(.rt-SidebarMenuButton[data-active], .rt-SidebarMenuButton[data-highlighted]:not([data-disabled]))) .rt-SidebarMenuIconWrapper {
|
|
1474
|
+
background-color: var(--accent-solid);
|
|
1475
|
+
color: var(--accent-solid-contrast);
|
|
1476
|
+
}
|
|
1477
|
+
}
|
|
1478
|
+
|
|
1479
|
+
@media (prefers-contrast: more) and (hover: hover) {
|
|
1480
|
+
:where(.rt-ShellRailContent .rt-SidebarMenuButton:hover:not([data-disabled])) .rt-SidebarMenuIconWrapper {
|
|
1481
|
+
background-color: var(--accent-solid);
|
|
1482
|
+
color: var(--accent-solid-contrast);
|
|
1483
|
+
}
|
|
1484
|
+
}
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { Toggle } from 'radix-ui';
|
|
3
3
|
import { Button } from './button.js';
|
|
4
4
|
import { useToggleState } from '../hooks/use-toggle-state.js';
|
|
5
|
+
import type { ButtonProps, ButtonRankProps } from './button.js';
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* ToggleButton props that extend Button with toggle-specific functionality
|
|
@@ -9,7 +10,8 @@ import { useToggleState } from '../hooks/use-toggle-state.js';
|
|
|
9
10
|
* The ToggleButton component provides a button that can be pressed/unpressed
|
|
10
11
|
* with proper accessibility announcements and state management.
|
|
11
12
|
*/
|
|
12
|
-
type ToggleButtonProps =
|
|
13
|
+
type ToggleButtonProps = Omit<ButtonProps<'button'>, 'as' | 'variant' | 'emphasis'> &
|
|
14
|
+
ButtonRankProps & {
|
|
13
15
|
/** Controlled pressed state */
|
|
14
16
|
pressed?: boolean;
|
|
15
17
|
/** Callback when pressed state changes */
|
|
@@ -3,6 +3,7 @@ import { Toggle } from 'radix-ui';
|
|
|
3
3
|
import { ToggleButton } from './toggle-button.js';
|
|
4
4
|
import { BaseButton } from './_internal/base-button.js';
|
|
5
5
|
import type { IconButtonProps } from './icon-button.js';
|
|
6
|
+
import type { ButtonRankProps } from './button.js';
|
|
6
7
|
|
|
7
8
|
type ToggleIconButtonElement = React.ElementRef<typeof BaseButton>;
|
|
8
9
|
|
|
@@ -30,14 +31,15 @@ type AccessibilityProps =
|
|
|
30
31
|
* Combine IconButton props with Toggle-specific props
|
|
31
32
|
* Includes tooltip props from IconButton for comprehensive functionality
|
|
32
33
|
*/
|
|
33
|
-
|
|
34
|
+
type ToggleIconButtonProps = Omit<IconButtonProps, 'as' | 'variant' | 'emphasis'> &
|
|
35
|
+
ButtonRankProps & {
|
|
34
36
|
/** Controlled pressed state */
|
|
35
37
|
pressed?: ToggleProps['pressed'];
|
|
36
38
|
/** Callback when pressed state changes */
|
|
37
39
|
onPressedChange?: ToggleProps['onPressedChange'];
|
|
38
40
|
/** Default pressed state for uncontrolled usage */
|
|
39
41
|
defaultPressed?: ToggleProps['defaultPressed'];
|
|
40
|
-
}
|
|
42
|
+
};
|
|
41
43
|
|
|
42
44
|
/**
|
|
43
45
|
* Intersection with accessibility props to ensure compliance
|
|
@@ -16,6 +16,7 @@ import type { TextProps } from './text.js';
|
|
|
16
16
|
import type { MarginProps } from '../props/margin.props.js';
|
|
17
17
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
18
18
|
import type { GetPropDefTypes } from '../props/prop-def.js';
|
|
19
|
+
import type { ButtonRankProps } from './button.js';
|
|
19
20
|
|
|
20
21
|
/*
|
|
21
22
|
* Toolbar takes Kookie UI v2's contract (v2: components/toolbar), built on Radix instead of
|
|
@@ -143,15 +144,17 @@ ToolbarGroup.displayName = 'Toolbar.Group';
|
|
|
143
144
|
// ToolbarButton
|
|
144
145
|
// ============================================================================
|
|
145
146
|
|
|
146
|
-
type ToolbarButtonBaseProps = Omit<ButtonProps, 'as' | 'asChild'>;
|
|
147
|
+
type ToolbarButtonBaseProps = Omit<ButtonProps, 'as' | 'asChild' | 'variant' | 'emphasis'>;
|
|
147
148
|
|
|
148
149
|
/** A labelled button: takes every `Button` prop. */
|
|
149
|
-
type ToolbarTextButtonProps = ToolbarButtonBaseProps &
|
|
150
|
+
type ToolbarTextButtonProps = ToolbarButtonBaseProps &
|
|
151
|
+
ButtonRankProps & {
|
|
150
152
|
iconOnly?: false;
|
|
151
153
|
};
|
|
152
154
|
|
|
153
155
|
/** An icon-only button: renders an `IconButton`, and the type requires an `aria-label`. */
|
|
154
|
-
type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'overrideStyles'> &
|
|
156
|
+
type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'overrideStyles'> &
|
|
157
|
+
ButtonRankProps & {
|
|
155
158
|
iconOnly: true;
|
|
156
159
|
/** The control's accessible name. An icon has no words of its own, so this is required. */
|
|
157
160
|
'aria-label': string;
|
package/styles.css
CHANGED
|
@@ -23894,6 +23894,18 @@
|
|
|
23894
23894
|
width: var(--content-icon-size-3);
|
|
23895
23895
|
height: var(--content-icon-size-3);
|
|
23896
23896
|
}
|
|
23897
|
+
@media (prefers-contrast: more) {
|
|
23898
|
+
:where(.rt-ShellRailContent :is(.rt-SidebarMenuButton[data-active], .rt-SidebarMenuButton[data-highlighted]:not([data-disabled]))) .rt-SidebarMenuIconWrapper {
|
|
23899
|
+
background-color: var(--accent-solid);
|
|
23900
|
+
color: var(--accent-solid-contrast);
|
|
23901
|
+
}
|
|
23902
|
+
}
|
|
23903
|
+
@media (prefers-contrast: more) and (hover: hover) {
|
|
23904
|
+
:where(.rt-ShellRailContent .rt-SidebarMenuButton:hover:not([data-disabled])) .rt-SidebarMenuIconWrapper {
|
|
23905
|
+
background-color: var(--accent-solid);
|
|
23906
|
+
color: var(--accent-solid-contrast);
|
|
23907
|
+
}
|
|
23908
|
+
}
|
|
23897
23909
|
.rt-ShellRoot {
|
|
23898
23910
|
--shell-inset-gap: var(--space-2);
|
|
23899
23911
|
--shell-rail-offset: 0px;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/toolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Toolbar as ToolbarPrimitive } from 'radix-ui';\n\nimport { toolbarRootPropDefs } from './toolbar.props.js';\nimport { Button } from './button.js';\nimport { IconButton } from './icon-button.js';\nimport { Text } from './text.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { ButtonProps } from './button.js';\nimport type { TextProps } from './text.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\n/*\n * Toolbar takes Kookie UI v2's contract (v2: components/toolbar), built on Radix instead of\n * Base UI. A toolbar is a row of controls with ONE tab stop: `role=\"toolbar\"`, and the arrow\n * keys move focus between its controls. That keyboard is the reason it is a component.\n *\n * Its `size` reaches every control inside it that does not state its own. The row itself paints\n * nothing; a `ToolbarGroup` draws a quiet well around controls that belong together, and a\n * `ToolbarSeparator` draws a gray hairline between clusters. Use a `Flex` to cluster controls\n * without a well: the row spaces the clusters with `space-between`.\n *\n * The band anchored to a pane's edge (Left / Center / Right / Title) that this name used to\n * mean is `AppBar` since 0.11.0.\n */\n\ntype ToolbarSize = NonNullable<GetPropDefTypes<typeof toolbarRootPropDefs>['size']>;\ntype ToolbarOrientation = NonNullable<GetPropDefTypes<typeof toolbarRootPropDefs>['orientation']>;\n\ninterface ToolbarContextValue {\n size: ToolbarSize;\n orientation: ToolbarOrientation;\n}\n\nconst ToolbarContext = React.createContext<ToolbarContextValue | null>(null);\n\n/** Set by a `ToolbarGroup`: its children rest quiet, and `disabled` turns them all off. */\nconst ToolbarGroupContext = React.createContext<{ disabled: boolean } | null>(null);\n\nfunction useToolbarContext(consumer: string): ToolbarContextValue {\n const context = React.useContext(ToolbarContext);\n if (!context) {\n throw new Error(`${consumer} must be rendered inside a Toolbar.`);\n }\n return context;\n}\n\n// ============================================================================\n// Toolbar (root)\n// ============================================================================\n\ntype ToolbarOwnProps = GetPropDefTypes<typeof toolbarRootPropDefs>;\n\ninterface ToolbarProps\n extends ComponentPropsWithout<typeof ToolbarPrimitive.Root, RemovedProps | 'orientation'>,\n ToolbarOwnProps,\n MarginProps {}\n\n/**\n * A row of controls with one keyboard tab stop. The arrow keys move focus between the controls.\n *\n * Give it an `aria-label` (or `aria-labelledby`) that says what the controls act on.\n *\n * @example\n * ```tsx\n * <Toolbar aria-label=\"Formatting\">\n * <ToolbarGroup>\n * <ToolbarButton iconOnly aria-label=\"Bold\" aria-pressed={bold} onClick={toggleBold}>\n * <HugeiconsIcon icon={TextBoldIcon} strokeWidth={1.75} />\n * </ToolbarButton>\n * </ToolbarGroup>\n * <ToolbarSeparator />\n * <ToolbarButton>Share</ToolbarButton>\n * </Toolbar>\n * ```\n */\nconst ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwardedRef) => {\n const size: ToolbarSize = props.size ?? toolbarRootPropDefs.size.default;\n const orientation: ToolbarOrientation = props.orientation ?? toolbarRootPropDefs.orientation.default;\n const { className, orientation: _orientation, children, ...rootProps } = extractProps(\n props,\n toolbarRootPropDefs,\n marginPropDefs,\n );\n\n const context = React.useMemo(() => ({ size, orientation }), [size, orientation]);\n\n return (\n <ToolbarPrimitive.Root\n {...rootProps}\n ref={forwardedRef}\n orientation={orientation}\n className={classNames('rt-Toolbar', className)}\n >\n <ToolbarContext.Provider value={context}>{children}</ToolbarContext.Provider>\n </ToolbarPrimitive.Root>\n );\n});\nToolbarRoot.displayName = 'Toolbar';\n\n// ============================================================================\n// ToolbarGroup\n// ============================================================================\n\ninterface ToolbarGroupProps extends ComponentPropsWithout<'div', RemovedProps> {\n /** Turns every control in the group off at once. */\n disabled?: boolean;\n}\n\n/**\n * Controls that belong together, drawn as one quiet well that stands level with a button\n * beside it. Buttons inside it rest as `ghost` unless they state a `variant`.\n * To cluster controls without a well, use a `Flex`.\n */\nconst ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroupProps>(\n ({ className, disabled = false, children, ...props }, forwardedRef) => {\n const { orientation } = useToolbarContext('ToolbarGroup');\n const group = React.useMemo(() => ({ disabled }), [disabled]);\n return (\n <div\n role=\"group\"\n data-orientation={orientation}\n data-disabled={disabled || undefined}\n {...props}\n ref={forwardedRef}\n className={classNames('rt-ToolbarGroup', className)}\n >\n <ToolbarGroupContext.Provider value={group}>{children}</ToolbarGroupContext.Provider>\n </div>\n );\n },\n);\nToolbarGroup.displayName = 'Toolbar.Group';\n\n// ============================================================================\n// ToolbarButton\n// ============================================================================\n\ntype ToolbarButtonBaseProps = Omit<ButtonProps, 'as' | 'asChild'>;\n\n/** A labelled button: takes every `Button` prop. */\ntype ToolbarTextButtonProps = ToolbarButtonBaseProps & {\n iconOnly?: false;\n};\n\n/** An icon-only button: renders an `IconButton`, and the type requires an `aria-label`. */\ntype ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'overrideStyles'> & {\n iconOnly: true;\n /** The control's accessible name. An icon has no words of its own, so this is required. */\n 'aria-label': string;\n};\n\ntype ToolbarButtonProps = ToolbarTextButtonProps | ToolbarIconButtonProps;\n\nfunction isPressed(value: React.AriaAttributes['aria-pressed']) {\n return value === true || value === 'true';\n}\n\n/**\n * A `Button` that joins the toolbar's keyboard navigation, so a row of them is one tab stop.\n *\n * Set `iconOnly` (with an `aria-label`) for a symbol-only control. Set `aria-pressed` for a\n * control that toggles; a pressed button wears Button's pressed look.\n *\n * It takes the toolbar's `size`, and rests as a gray `soft` button (gray `ghost` inside a\n * `ToolbarGroup`). A stated `size`, `variant` or `color` wins; a stated `variant` without a\n * `color` takes Button's own default colour. It throws outside a `Toolbar`.\n */\nconst ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((props, forwardedRef) => {\n const toolbar = useToolbarContext('ToolbarButton');\n const group = React.useContext(ToolbarGroupContext);\n const { iconOnly, size, variant, emphasis, color, disabled, ...rest } = props;\n\n const pressed = isPressed(props['aria-pressed']);\n const stateProps =\n 'data-state' in props || props['aria-pressed'] === undefined ? {} : { 'data-state': pressed ? 'on' : 'off' };\n\n const shared = {\n size: size ?? toolbar.size,\n // A caller states the look by `variant` or the rank by `emphasis`, never both.\n ...(emphasis !== undefined ? { emphasis } : { variant: variant ?? (group ? 'ghost' : 'soft') }),\n // The gray rest is a pair with the default variant: a caller who states a variant or an\n // emphasis gets Button's own colour for it unless they state a colour too.\n color: color ?? (variant || emphasis ? undefined : 'gray'),\n ...stateProps,\n } as const;\n\n return (\n <ToolbarPrimitive.Button asChild ref={forwardedRef} disabled={disabled || group?.disabled || undefined}>\n {iconOnly ? (\n <IconButton {...(rest as Omit<ToolbarIconButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />\n ) : (\n <Button {...(rest as Omit<ToolbarTextButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />\n )}\n </ToolbarPrimitive.Button>\n );\n});\nToolbarButton.displayName = 'Toolbar.Button';\n\n// ============================================================================\n// ToolbarSeparator\n// ============================================================================\n\ntype ToolbarSeparatorProps = ComponentPropsWithout<typeof ToolbarPrimitive.Separator, RemovedProps | 'orientation'>;\n\n/**\n * A gray hairline between two clusters, announced as a separator. Its direction is always\n * opposite to the toolbar's.\n */\nconst ToolbarSeparator = React.forwardRef<HTMLDivElement, ToolbarSeparatorProps>(\n ({ className, ...props }, forwardedRef) => {\n useToolbarContext('ToolbarSeparator');\n return (\n <ToolbarPrimitive.Separator\n {...props}\n ref={forwardedRef}\n className={classNames('rt-ToolbarSeparator', className)}\n />\n );\n },\n);\nToolbarSeparator.displayName = 'Toolbar.Separator';\n\n// ============================================================================\n// ToolbarTitle\n// ============================================================================\n\n/** The title's text step: one step above the label of a button at the same size. */\nconst TITLE_SIZE = { '1': '2', '2': '3', '3': '4', '4': '5' } as const satisfies Record<ToolbarSize, TextProps['size']>;\n\ninterface ToolbarTitleProps {\n /** The title text. With none, the title renders nothing. */\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n /** The id of the title, so that the toolbar's `aria-labelledby` can point at it. */\n id?: string;\n}\n\n/**\n * What the row is about, at its leading edge. One line: it truncates rather than wrapping.\n * Its text step follows the toolbar's `size`, and it takes more air from the controls beside it\n * than they take from each other.\n */\nconst ToolbarTitle = React.forwardRef<HTMLSpanElement, ToolbarTitleProps>(\n ({ className, children, style, id }, forwardedRef) => {\n const { size } = useToolbarContext('ToolbarTitle');\n if (children === undefined || children === null || children === false) return null;\n return (\n <Text\n ref={forwardedRef}\n as=\"span\"\n size={TITLE_SIZE[size]}\n weight=\"medium\"\n truncate\n id={id}\n style={style}\n className={classNames('rt-ToolbarTitle', className)}\n >\n {children}\n </Text>\n );\n },\n);\nToolbarTitle.displayName = 'Toolbar.Title';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst Toolbar = Object.assign(ToolbarRoot, {\n Root: ToolbarRoot,\n Group: ToolbarGroup,\n Button: ToolbarButton,\n Separator: ToolbarSeparator,\n Title: ToolbarTitle,\n});\n\nexport {\n Toolbar,\n ToolbarGroup,\n ToolbarButton,\n ToolbarSeparator,\n ToolbarTitle,\n ToolbarRoot as Root,\n ToolbarGroup as Group,\n ToolbarButton as Button,\n ToolbarSeparator as Separator,\n ToolbarTitle as Title,\n};\nexport type {\n ToolbarProps,\n ToolbarGroupProps,\n ToolbarButtonProps,\n ToolbarSeparatorProps,\n ToolbarTitleProps,\n ToolbarProps as RootProps,\n ToolbarGroupProps as GroupProps,\n ToolbarButtonProps as ButtonProps,\n ToolbarSeparatorProps as SeparatorProps,\n ToolbarTitleProps as TitleProps,\n};\n"],
|
|
5
|
-
"mappings": "gPAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,WAAWC,MAAwB,WAqC5C,IAAMC,EAAuB,gBAA0C,IAAI,EAGrEC,EAA4B,gBAA4C,IAAI,EAElF,SAASC,EAAkBC,EAAuC,CAChE,IAAMC,EAAgB,aAAWJ,CAAc,EAC/C,GAAI,CAACI,EACH,MAAM,IAAI,MAAM,GAAGD,CAAQ,qCAAqC,EAElE,OAAOC,CACT,CA+BA,IAAMC,EAAoB,aAAyC,CAACC,EAAOC,IAAiB,CAC1F,IAAMC,EAAoBF,EAAM,MAAQG,EAAoB,KAAK,QAC3DC,EAAkCJ,EAAM,aAAeG,EAAoB,YAAY,QACvF,CAAE,UAAAE,EAAW,YAAaC,EAAc,SAAAC,EAAU,GAAGC,CAAU,EAAIC,EACvET,EACAG,EACAO,CACF,EAEMZ,EAAgB,UAAQ,KAAO,CAAE,KAAAI,EAAM,YAAAE,CAAY,GAAI,CAACF,EAAME,CAAW,CAAC,EAEhF,OACE,gBAACO,EAAiB,KAAjB,CACE,GAAGH,EACJ,IAAKP,EACL,YAAaG,EACb,UAAWQ,EAAW,aAAcP,CAAS,GAE7C,gBAACX,EAAe,SAAf,CAAwB,MAAOI,GAAUS,CAAS,CACrD,CAEJ,CAAC,EACDR,EAAY,YAAc,UAgB1B,IAAMc,EAAqB,aACzB,CAAC,CAAE,UAAAR,EAAW,SAAAS,EAAW,GAAO,SAAAP,EAAU,GAAGP,CAAM,EAAGC,IAAiB,CACrE,GAAM,CAAE,YAAAG,CAAY,EAAIR,EAAkB,cAAc,EAClDmB,EAAc,UAAQ,KAAO,CAAE,SAAAD,CAAS,GAAI,CAACA,CAAQ,CAAC,EAC5D,OACE,gBAAC,OACC,KAAK,QACL,mBAAkBV,EAClB,gBAAeU,GAAY,OAC1B,GAAGd,EACJ,IAAKC,EACL,UAAWW,EAAW,kBAAmBP,CAAS,GAElD,gBAACV,EAAoB,SAApB,CAA6B,MAAOoB,GAAQR,CAAS,CACxD,CAEJ,CACF,EACAM,EAAa,YAAc,gBAsB3B,SAASG,EAAUC,EAA6C,CAC9D,OAAOA,IAAU,IAAQA,IAAU,MACrC,CAYA,IAAMC,EAAsB,aAAkD,CAAClB,EAAOC,IAAiB,CACrG,IAAMkB,EAAUvB,EAAkB,eAAe,EAC3CmB,EAAc,aAAWpB,CAAmB,EAC5C,CAAE,SAAAyB,EAAU,KAAAlB,EAAM,QAAAmB,EAAS,SAAAC,EAAU,MAAAC,EAAO,SAAAT,EAAU,GAAGU,CAAK,EAAIxB,EAElEyB,EAAUT,EAAUhB,EAAM,cAAc,CAAC,EACzC0B,EACJ,eAAgB1B,GAASA,EAAM,cAAc,IAAM,OAAY,CAAC,EAAI,CAAE,aAAcyB,EAAU,KAAO,KAAM,EAEvGE,EAAS,CACb,KAAMzB,GAAQiB,EAAQ,KAEtB,GAAIG,IAAa,OAAY,CAAE,SAAAA,CAAS,EAAI,CAAE,QAASD,IAAYN,EAAQ,QAAU,OAAQ,EAG7F,MAAOQ,IAAUF,GAAWC,EAAW,OAAY,QACnD,GAAGI,CACL,EAEA,OACE,gBAACf,EAAiB,OAAjB,CAAwB,QAAO,GAAC,IAAKV,EAAc,SAAUa,GAAYC,GAAO,UAAY,QAC1FK,EACC,gBAACQ,EAAA,CAAY,GAAIJ,EAA6E,GAAGG,EAAQ,EAEzG,gBAACE,EAAA,CAAQ,GAAIL,EAA6E,GAAGG,EAAQ,CAEzG,CAEJ,CAAC,EACDT,EAAc,YAAc,iBAY5B,IAAMY,EAAyB,aAC7B,CAAC,CAAE,UAAAzB,EAAW,GAAGL,CAAM,EAAGC,KACxBL,EAAkB,kBAAkB,EAElC,gBAACe,EAAiB,UAAjB,CACE,GAAGX,EACJ,IAAKC,EACL,UAAWW,EAAW,sBAAuBP,CAAS,EACxD,EAGN,EACAyB,EAAiB,YAAc,oBAO/B,IAAMC,EAAa,CAAE,EAAK,IAAK,EAAK,IAAK,EAAK,IAAK,EAAK,GAAI,EAgBtDC,EAAqB,aACzB,CAAC,CAAE,UAAA3B,EAAW,SAAAE,EAAU,MAAA0B,EAAO,GAAAC,CAAG,EAAGjC,IAAiB,CACpD,GAAM,CAAE,KAAAC,CAAK,EAAIN,EAAkB,cAAc,EACjD,OAA8BW,GAAa,MAAQA,IAAa,GAAc,KAE5E,gBAAC4B,EAAA,CACC,IAAKlC,EACL,GAAG,OACH,KAAM8B,EAAW7B,CAAI,EACrB,OAAO,SACP,SAAQ,GACR,GAAIgC,EACJ,MAAOD,EACP,UAAWrB,EAAW,kBAAmBP,CAAS,GAEjDE,CACH,CAEJ,CACF,EACAyB,EAAa,YAAc,gBAM3B,IAAMI,EAAU,OAAO,OAAOrC,EAAa,CACzC,KAAMA,EACN,MAAOc,EACP,OAAQK,EACR,UAAWY,EACX,MAAOE,CACT,CAAC",
|
|
6
|
-
"names": ["React", "classNames", "ToolbarPrimitive", "ToolbarContext", "ToolbarGroupContext", "useToolbarContext", "consumer", "context", "ToolbarRoot", "props", "forwardedRef", "size", "toolbarRootPropDefs", "orientation", "className", "_orientation", "children", "rootProps", "extractProps", "marginPropDefs", "ToolbarPrimitive", "classNames", "ToolbarGroup", "disabled", "group", "isPressed", "value", "ToolbarButton", "toolbar", "iconOnly", "variant", "emphasis", "color", "rest", "pressed", "stateProps", "shared", "IconButton", "Button", "ToolbarSeparator", "TITLE_SIZE", "ToolbarTitle", "style", "id", "Text", "Toolbar"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/toggle-icon-button.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { ToggleButton } from './toggle-button.js';\nimport { BaseButton } from './_internal/base-button.js';\nimport type { IconButtonProps } from './icon-button.js';\n\ntype ToggleIconButtonElement = React.ElementRef<typeof BaseButton>;\n\n/**\n * Extract toggle-specific props from Radix Toggle\n * These props control the toggle state and behavior\n */\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;\n\n/**\n * Required accessibility props for icon buttons (same as IconButton)\n * Icon buttons must have an accessible name to meet WCAG guidelines\n *\n * Three ways to provide accessibility:\n * 1. aria-label: Direct descriptive text\n * 2. aria-labelledby: Reference to a label element\n * 3. children: Visible text content (fallback)\n */\ntype AccessibilityProps =\n | { 'aria-label': string; 'aria-labelledby'?: never }\n | { 'aria-label'?: never; 'aria-labelledby': string }\n | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n/**\n * Combine IconButton props with Toggle-specific props\n * Includes tooltip props from IconButton for comprehensive functionality\n */\ninterface ToggleIconButtonProps extends Omit<IconButtonProps, 'as'> {\n /** Controlled pressed state */\n pressed?: ToggleProps['pressed'];\n /** Callback when pressed state changes */\n onPressedChange?: ToggleProps['onPressedChange'];\n /** Default pressed state for uncontrolled usage */\n defaultPressed?: ToggleProps['defaultPressed'];\n}\n\n/**\n * Intersection with accessibility props to ensure compliance\n * This type ensures all ToggleIconButton instances have proper accessibility\n */\ntype ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;\n\n/**\n * ToggleIconButton component for icon buttons that can be pressed/unpressed. It is\n * `ToggleButton` with `iconOnly` set, kept as its own name for its stricter type.\n *\n * The ToggleIconButton component extends IconButton with toggle functionality\n * using Radix UI's Toggle primitive. It provides proper accessibility announcements,\n * controlled/uncontrolled state management, and seamless integration with\n * the existing IconButton component.\n *\n * Key features:\n * - Controlled and uncontrolled state management\n * - Live accessibility announcements for screen readers\n * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)\n * - Automatic state validation and warnings\n * - Seamless integration with IconButton props and styling\n * - Proper ARIA attributes for toggle functionality\n * - Built-in tooltip support from IconButton\n *\n * @example\n * ```tsx\n * // Uncontrolled toggle icon button\n * <ToggleIconButton defaultPressed={false} aria-label=\"Toggle notifications\">\n * <Bell />\n * </ToggleIconButton>\n *\n * // Controlled toggle icon button\n * const [pressed, setPressed] = React.useState(false);\n * <ToggleIconButton\n * pressed={pressed}\n * onPressedChange={setPressed}\n * aria-label=\"Toggle notifications\"\n * >\n * <Bell />\n * </ToggleIconButton>\n *\n * // Toggle icon button with tooltip\n * <ToggleIconButton\n * variant=\"solid\"\n * size=\"3\"\n * color=\"blue\"\n * pressed={isActive}\n * onPressedChange={setIsActive}\n * aria-label=\"Toggle feature\"\n * tooltip=\"Toggle this feature on/off\"\n * >\n * <Star />\n * </ToggleIconButton>\n *\n * // Toggle icon button with aria-labelledby\n * <ToggleIconButton\n * aria-labelledby=\"notifications-label\"\n * pressed={notificationsEnabled}\n * onPressedChange={setNotificationsEnabled}\n * >\n * <Bell />\n * </ToggleIconButton>\n * <span id=\"notifications-label\">Toggle notifications</span>\n * ```\n */\nconst ToggleIconButton = React.forwardRef<ToggleIconButtonElement, ToggleIconButtonPropsWithAccessibility>((props, forwardedRef) => (\n <ToggleButton {...(props as React.ComponentPropsWithoutRef<typeof ToggleButton>)} iconOnly ref={forwardedRef} />\n));\nToggleIconButton.displayName = 'ToggleIconButton';\n\nexport { ToggleIconButton };\nexport type { ToggleIconButtonPropsWithAccessibility as ToggleIconButtonProps };\n"],
|
|
5
|
-
"mappings": "wCAAA,UAAYA,MAAW,QACvB,MAAuB,WAyGvB,IAAMC,EAAyB,aAA4E,CAACC,EAAOC,IACjH,gBAACC,EAAA,CAAc,GAAIF,EAA+D,SAAQ,GAAC,IAAKC,EAAc,CAC/G,EACDF,EAAiB,YAAc",
|
|
6
|
-
"names": ["React", "ToggleIconButton", "props", "forwardedRef", "ToggleButton"]
|
|
7
|
-
}
|