@astryxdesign/core 0.1.8-canary.9caa99e → 0.1.8-canary.9d459aa
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +2 -6
- package/dist/AppShell/AppShellMobileContext.d.ts +0 -8
- package/dist/AppShell/AppShellMobileContext.d.ts.map +1 -1
- package/dist/Banner/Banner.d.ts +1 -9
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +2 -31
- package/dist/Button/Button.d.ts +2 -8
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +2 -31
- package/dist/ButtonGroup/ButtonGroup.d.ts +1 -9
- package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +1 -30
- package/dist/Card/Card.d.ts +2 -8
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +2 -28
- package/dist/Carousel/Carousel.d.ts +1 -4
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +4 -24
- package/dist/Chat/ChatComposer.d.ts +0 -8
- package/dist/Chat/ChatComposer.d.ts.map +1 -1
- package/dist/Chat/ChatComposer.js +6 -31
- package/dist/Chat/ChatComposerDrawer.d.ts +0 -2
- package/dist/Chat/ChatComposerDrawer.d.ts.map +1 -1
- package/dist/Chat/ChatComposerDrawer.js +1 -11
- package/dist/Chat/ChatToolCalls.d.ts +1 -5
- package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.js +3 -12
- package/dist/ClickableCard/ClickableCard.d.ts +2 -9
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +0 -3
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +1 -8
- package/dist/CommandPalette/CommandPaletteInput.d.ts +1 -7
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +1 -6
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +1 -10
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +1 -2
- package/dist/FieldStatus/FieldStatus.d.ts +0 -8
- package/dist/FieldStatus/FieldStatus.d.ts.map +1 -1
- package/dist/FieldStatus/FieldStatus.js +4 -22
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +2 -10
- package/dist/HoverCard/HoverCard.d.ts +1 -9
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +0 -2
- package/dist/HoverCard/useHoverCard.d.ts +0 -8
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +2 -7
- package/dist/Layer/useLayer.d.ts +0 -6
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +0 -2
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +1 -6
- package/dist/MobileNav/MobileNavToggle.d.ts.map +1 -1
- package/dist/MobileNav/MobileNavToggle.js +0 -4
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +12 -39
- package/dist/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +0 -16
- package/dist/SelectableCard/SelectableCard.d.ts +2 -9
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +11 -14
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +2 -4
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +0 -16
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +8 -21
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +1 -15
- package/dist/Table/plugins/selection/useTableSelection.d.ts +0 -12
- package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
- package/dist/Table/plugins/selection/useTableSelection.js +1 -4
- package/dist/Thumbnail/Thumbnail.d.ts +1 -8
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +8 -46
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +4 -15
- package/dist/Tokenizer/Tokenizer.d.ts +1 -1
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +4 -16
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +8 -18
- package/dist/TopNav/TopNavMegaMenu.js +4 -10
- package/dist/TopNav/TopNavMenu.d.ts +1 -2
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +6 -68
- package/dist/astryx.css +12 -24
- package/dist/astryx.umd.js +49 -49
- package/dist/astryx.umd.js.map +3 -3
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +0 -51
- package/dist/utils/types.d.ts +0 -13
- package/dist/utils/types.d.ts.map +1 -1
- package/locales/en.json +0 -12
- package/locales/pseudo.json +0 -9
- package/package.json +1 -1
- package/src/AppShell/AppShell.tsx +0 -6
- package/src/AppShell/AppShellMobileContext.tsx +0 -8
- package/src/AppShell/useAppShellMobile.doc.mjs +0 -8
- package/src/Banner/Banner.doc.mjs +0 -9
- package/src/Banner/Banner.test.tsx +0 -30
- package/src/Banner/Banner.tsx +1 -37
- package/src/Button/Button.doc.mjs +0 -9
- package/src/Button/Button.test.tsx +0 -49
- package/src/Button/Button.tsx +1 -25
- package/src/ButtonGroup/ButtonGroup.doc.mjs +0 -3
- package/src/ButtonGroup/ButtonGroup.test.tsx +0 -37
- package/src/ButtonGroup/ButtonGroup.tsx +0 -32
- package/src/Card/Card.doc.mjs +0 -9
- package/src/Card/Card.test.tsx +3 -21
- package/src/Card/Card.tsx +2 -35
- package/src/Carousel/Carousel.test.tsx +0 -53
- package/src/Carousel/Carousel.tsx +4 -34
- package/src/Chat/ChatComposer.doc.mjs +0 -9
- package/src/Chat/ChatComposer.tsx +9 -58
- package/src/Chat/ChatComposerDrawer.tsx +1 -11
- package/src/Chat/ChatToolCalls.test.tsx +0 -64
- package/src/Chat/ChatToolCalls.tsx +1 -13
- package/src/CheckboxInput/CheckboxInput.test.tsx +1 -32
- package/src/CheckboxList/CheckboxList.test.tsx +1 -9
- package/src/ClickableCard/ClickableCard.doc.mjs +0 -2
- package/src/ClickableCard/ClickableCard.test.tsx +0 -34
- package/src/ClickableCard/ClickableCard.tsx +1 -11
- package/src/CodeBlock/CodeBlock.test.tsx +0 -56
- package/src/CodeBlock/CodeBlock.tsx +0 -6
- package/src/CommandPalette/CommandPaletteInput.doc.mjs +9 -26
- package/src/CommandPalette/CommandPaletteInput.test.tsx +0 -34
- package/src/CommandPalette/CommandPaletteInput.tsx +0 -11
- package/src/DateTimeInput/DateTimeInput.test.tsx +0 -35
- package/src/DateTimeInput/DateTimeInput.tsx +1 -11
- package/src/Dialog/Dialog.tsx +2 -12
- package/src/Field/Field.test.tsx +12 -57
- package/src/FieldStatus/FieldStatus.doc.mjs +5 -17
- package/src/FieldStatus/FieldStatus.test.tsx +40 -78
- package/src/FieldStatus/FieldStatus.tsx +4 -22
- package/src/FileInput/FileInput.test.tsx +3 -52
- package/src/FileInput/FileInput.tsx +1 -9
- package/src/HoverCard/HoverCard.doc.mjs +0 -13
- package/src/HoverCard/HoverCard.test.tsx +2 -21
- package/src/HoverCard/HoverCard.tsx +0 -11
- package/src/HoverCard/useHoverCard.doc.mjs +0 -2
- package/src/HoverCard/useHoverCard.tsx +2 -24
- package/src/IconButton/IconButton.doc.mjs +0 -8
- package/src/IconButton/IconButton.test.tsx +18 -15
- package/src/Layer/useLayer.tsx +0 -8
- package/src/MobileNav/MobileNav.tsx +0 -6
- package/src/MobileNav/MobileNavToggle.tsx +1 -9
- package/src/MultiSelector/MultiSelector.doc.mjs +2 -4
- package/src/MultiSelector/MultiSelector.test.tsx +1 -162
- package/src/MultiSelector/MultiSelector.tsx +12 -55
- package/src/MultiSelector/hooks.ts +0 -17
- package/src/NumberInput/NumberInput.test.tsx +7 -11
- package/src/SelectableCard/SelectableCard.doc.mjs +0 -2
- package/src/SelectableCard/SelectableCard.test.tsx +4 -46
- package/src/SelectableCard/SelectableCard.tsx +14 -27
- package/src/Selector/Selector.test.tsx +0 -69
- package/src/Selector/Selector.tsx +1 -5
- package/src/Selector/hooks.ts +0 -17
- package/src/SideNav/SideNav.test.tsx +3 -119
- package/src/SideNav/SideNavHeading.tsx +8 -24
- package/src/Slider/Slider.test.tsx +2 -62
- package/src/Slider/Slider.tsx +1 -15
- package/src/Switch/Switch.test.tsx +1 -32
- package/src/Table/plugins/selection/useTableSelection.test.tsx +0 -16
- package/src/Table/plugins/selection/useTableSelection.tsx +1 -18
- package/src/Table/useTableSelection.doc.mjs +14 -65
- package/src/TextArea/TextArea.test.tsx +1 -9
- package/src/Thumbnail/Thumbnail.doc.mjs +0 -9
- package/src/Thumbnail/Thumbnail.test.tsx +8 -38
- package/src/Thumbnail/Thumbnail.tsx +1 -28
- package/src/TimeInput/TimeInput.test.tsx +1 -76
- package/src/TimeInput/TimeInput.tsx +6 -19
- package/src/Tokenizer/Tokenizer.doc.mjs +1 -1
- package/src/Tokenizer/Tokenizer.test.tsx +2 -137
- package/src/Tokenizer/Tokenizer.tsx +4 -16
- package/src/TopNav/TopNav.test.tsx +1 -80
- package/src/TopNav/TopNavHeading.tsx +8 -24
- package/src/TopNav/TopNavMegaMenu.test.tsx +1 -149
- package/src/TopNav/TopNavMegaMenu.tsx +4 -10
- package/src/TopNav/TopNavMenu.test.tsx +4 -118
- package/src/TopNav/TopNavMenu.tsx +5 -83
- package/src/theme/generateThemeRules.test.ts +0 -65
- package/src/theme/generateThemeRules.ts +0 -56
- package/src/utils/types.ts +0 -14
- package/src/Chat/ChatComposer.test.tsx +0 -35
- package/src/Chat/ChatComposerDrawer.test.tsx +0 -61
- package/src/MobileNav/MobileNavToggle.test.tsx +0 -116
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmC5C;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAiXf;yBAhYe,QAAQ"}
|
|
@@ -20,7 +20,7 @@ import React from 'react';
|
|
|
20
20
|
* - /packages/cli/templates/blocks/components/AppShell/ (showcase blocks)
|
|
21
21
|
*/
|
|
22
22
|
|
|
23
|
-
import { isValidElement, useCallback, useEffect,
|
|
23
|
+
import { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
24
24
|
import * as stylex from '@stylexjs/stylex';
|
|
25
25
|
import "../theme/tokens.stylex.js";
|
|
26
26
|
import { colorVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -307,19 +307,15 @@ export function AppShell({
|
|
|
307
307
|
// =========================================================================
|
|
308
308
|
// Mobile context — shared with MobileNavToggle and future TopNav mobile
|
|
309
309
|
// =========================================================================
|
|
310
|
-
// Stable id shared by the drawer (applied as its `id`) and the toggle
|
|
311
|
-
// (referenced via `aria-controls`) so screen readers know what it controls.
|
|
312
|
-
const mobileNavId = useId();
|
|
313
310
|
const mobileContextValue = useMemo(() => ({
|
|
314
311
|
isMobile: isBelowBreakpoint,
|
|
315
312
|
isMobileNavOpen,
|
|
316
|
-
mobileNavId,
|
|
317
313
|
toggleMobileNav: () => mobileNavEnabled && setMobileNavOpen(!isMobileNavOpen),
|
|
318
314
|
openMobileNav: () => mobileNavEnabled && setMobileNavOpen(true),
|
|
319
315
|
closeMobileNav: () => setMobileNavOpen(false),
|
|
320
316
|
isMobileNavEnabled: mobileNavEnabled,
|
|
321
317
|
hasAutoToggle: mobileNavHasToggle
|
|
322
|
-
}), [isBelowBreakpoint, isMobileNavOpen,
|
|
318
|
+
}), [isBelowBreakpoint, isMobileNavOpen, setMobileNavOpen, mobileNavEnabled, mobileNavHasToggle]);
|
|
323
319
|
|
|
324
320
|
// =========================================================================
|
|
325
321
|
// Build header content (topNav + banner)
|
|
@@ -3,14 +3,6 @@ export interface AppShellMobileContextValue {
|
|
|
3
3
|
isMobile: boolean;
|
|
4
4
|
/** Whether the mobile nav drawer is currently open */
|
|
5
5
|
isMobileNavOpen: boolean;
|
|
6
|
-
/**
|
|
7
|
-
* DOM id of the mobile nav drawer. `AppShell` sets this so the toggle can
|
|
8
|
-
* point its `aria-controls` at the drawer and the drawer can apply it as its
|
|
9
|
-
* `id`. Optional: callers that construct this context by hand may omit it, in
|
|
10
|
-
* which case `MobileNav` falls back to a locally generated id and the toggle
|
|
11
|
-
* simply drops `aria-controls`.
|
|
12
|
-
*/
|
|
13
|
-
mobileNavId?: string;
|
|
14
6
|
/** Toggle the mobile nav drawer open/closed */
|
|
15
7
|
toggleMobileNav: () => void;
|
|
16
8
|
/** Open the mobile nav drawer */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellMobileContext.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShellMobileContext.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,0BAA0B;IACzC,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB
|
|
1
|
+
{"version":3,"file":"AppShellMobileContext.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShellMobileContext.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,0BAA0B;IACzC,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,+CAA+C;IAC/C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,iCAAiC;IACjC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kCAAkC;IAClC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6EAA6E;IAC7E,aAAa,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,qBAAqB,qDACuB,CAAC;AAG1D;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,0BAA0B,CAE9D"}
|
package/dist/Banner/Banner.d.ts
CHANGED
|
@@ -28,7 +28,6 @@
|
|
|
28
28
|
*/
|
|
29
29
|
import { type ReactNode } from 'react';
|
|
30
30
|
import type { BaseProps } from '../BaseProps';
|
|
31
|
-
import type { Elevation } from '../utils/types';
|
|
32
31
|
/**
|
|
33
32
|
* Extensible status map for Banner.
|
|
34
33
|
*
|
|
@@ -126,13 +125,6 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
126
125
|
* @default 'card'
|
|
127
126
|
*/
|
|
128
127
|
container?: BannerContainer;
|
|
129
|
-
/**
|
|
130
|
-
* Resting elevation — the shadow depth the banner sits at. Use for a
|
|
131
|
-
* floating banner that hovers above content. `none` is the default inline
|
|
132
|
-
* banner.
|
|
133
|
-
* @default 'none'
|
|
134
|
-
*/
|
|
135
|
-
elevation?: Elevation;
|
|
136
128
|
/**
|
|
137
129
|
* Whether the content area (children) starts expanded.
|
|
138
130
|
* Only relevant when children are provided.
|
|
@@ -191,7 +183,7 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
191
183
|
* </Banner>
|
|
192
184
|
* ```
|
|
193
185
|
*/
|
|
194
|
-
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container,
|
|
186
|
+
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, defaultIsExpanded, children, xstyle, className, style, ref, ...rest }: BannerProps): import("react").JSX.Element | null;
|
|
195
187
|
export declare namespace Banner {
|
|
196
188
|
var displayName: string;
|
|
197
189
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCA0Ib;yBA1Je,MAAM"}
|
package/dist/Banner/Banner.js
CHANGED
|
@@ -35,7 +35,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
35
35
|
import { Button } from "../Button/index.js";
|
|
36
36
|
import { Icon } from "../Icon/index.js";
|
|
37
37
|
import "../theme/tokens.stylex.js";
|
|
38
|
-
import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars
|
|
38
|
+
import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
39
39
|
import { mergeProps } from "../utils/index.js";
|
|
40
40
|
import { edgeCompSlot } from "../Layout/edgeCompensation.stylex.js";
|
|
41
41
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -130,10 +130,6 @@ const styles = {
|
|
|
130
130
|
kMv6JI: "xjb2p0i",
|
|
131
131
|
$$css: true
|
|
132
132
|
},
|
|
133
|
-
rootElevatedCard: {
|
|
134
|
-
kaIpWk: "x1hviunn",
|
|
135
|
-
$$css: true
|
|
136
|
-
},
|
|
137
133
|
header: {
|
|
138
134
|
k1xSpc: "x78zum5",
|
|
139
135
|
kGNEyG: "x1cy8zhl",
|
|
@@ -186,30 +182,6 @@ const statusStyles = {
|
|
|
186
182
|
}
|
|
187
183
|
};
|
|
188
184
|
|
|
189
|
-
// Resting elevation for the banner. Applied to the root so the shadow wraps
|
|
190
|
-
// the whole banner (header + optional content). 'none' is the default and
|
|
191
|
-
// leaves the layout-only root untouched. For the `card` container the root is
|
|
192
|
-
// rounded (rootElevatedCard) so the shadow follows the card silhouette; the
|
|
193
|
-
// full-width `section` container stays square.
|
|
194
|
-
const elevationStyles = {
|
|
195
|
-
none: {
|
|
196
|
-
kGVxlE: "x1gnnqk1",
|
|
197
|
-
$$css: true
|
|
198
|
-
},
|
|
199
|
-
low: {
|
|
200
|
-
kGVxlE: "x1i5ehqx",
|
|
201
|
-
$$css: true
|
|
202
|
-
},
|
|
203
|
-
med: {
|
|
204
|
-
kGVxlE: "x14hfi27",
|
|
205
|
-
$$css: true
|
|
206
|
-
},
|
|
207
|
-
high: {
|
|
208
|
-
kGVxlE: "x1kcpxr7",
|
|
209
|
-
$$css: true
|
|
210
|
-
}
|
|
211
|
-
};
|
|
212
|
-
|
|
213
185
|
// =============================================================================
|
|
214
186
|
// Component
|
|
215
187
|
// =============================================================================
|
|
@@ -268,7 +240,6 @@ export function Banner({
|
|
|
268
240
|
onDismiss,
|
|
269
241
|
endContent,
|
|
270
242
|
container = 'card',
|
|
271
|
-
elevation = 'none',
|
|
272
243
|
defaultIsExpanded = false,
|
|
273
244
|
children,
|
|
274
245
|
xstyle,
|
|
@@ -311,7 +282,7 @@ export function Banner({
|
|
|
311
282
|
return /*#__PURE__*/_jsxs("div", {
|
|
312
283
|
ref: ref,
|
|
313
284
|
role: role,
|
|
314
|
-
...mergeProps(stylex.props(styles.root,
|
|
285
|
+
...mergeProps(stylex.props(styles.root, xstyle), className, style),
|
|
315
286
|
...rest,
|
|
316
287
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
317
288
|
...mergeProps(themeProps('banner', {
|
package/dist/Button/Button.d.ts
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
*/
|
|
16
16
|
import { type ReactNode } from 'react';
|
|
17
17
|
import type { BaseProps } from '../BaseProps';
|
|
18
|
-
import type {
|
|
18
|
+
import type { SizeValue } from '../utils/types';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import type { LinkComponentType } from '../Link/types';
|
|
21
21
|
declare const sizeStyles: Readonly<{
|
|
@@ -84,12 +84,6 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
|
|
|
84
84
|
* @default 'md'
|
|
85
85
|
*/
|
|
86
86
|
size?: ButtonSize;
|
|
87
|
-
/**
|
|
88
|
-
* Resting elevation — the shadow depth the button sits at. Use for floating
|
|
89
|
-
* buttons (FABs) that hover above content. `none` is the default flat button.
|
|
90
|
-
* @default 'none'
|
|
91
|
-
*/
|
|
92
|
-
elevation?: Elevation;
|
|
93
87
|
/**
|
|
94
88
|
* Whether the button is disabled.
|
|
95
89
|
* @default false
|
|
@@ -199,7 +193,7 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
|
|
|
199
193
|
* <Button label="Open in new tab" href="https://example.com" target="_blank" rel="noopener noreferrer" />
|
|
200
194
|
* ```
|
|
201
195
|
*/
|
|
202
|
-
export declare function Button({ label, variant, size: sizeProp, type, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width,
|
|
196
|
+
export declare function Button({ label, variant, size: sizeProp, type, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, endContent, tooltip, href, as, target, rel, xstyle, className, style, ref, ...props }: ButtonProps): ReactNode;
|
|
203
197
|
export declare namespace Button {
|
|
204
198
|
var displayName: string;
|
|
205
199
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -21,7 +21,7 @@ import { useRef, useTransition } from 'react';
|
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
22
22
|
import { useTooltip } from "../Tooltip/useTooltip.js";
|
|
23
23
|
import "../theme/tokens.stylex.js";
|
|
24
|
-
import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars
|
|
24
|
+
import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
25
25
|
import { Spinner } from "../Spinner/index.js";
|
|
26
26
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
27
27
|
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
@@ -150,30 +150,6 @@ const iconSizeStyles = {
|
|
|
150
150
|
}
|
|
151
151
|
};
|
|
152
152
|
|
|
153
|
-
/**
|
|
154
|
-
* Resting elevation for floating buttons (e.g. a FAB). `none` is the default
|
|
155
|
-
* flat button; `low`/`med`/`high` map to the shadow token scale. 'none' stays
|
|
156
|
-
* a literal so it never conflicts with a variant's background layering.
|
|
157
|
-
*/
|
|
158
|
-
const elevationStyles = {
|
|
159
|
-
none: {
|
|
160
|
-
kGVxlE: "x1gnnqk1",
|
|
161
|
-
$$css: true
|
|
162
|
-
},
|
|
163
|
-
low: {
|
|
164
|
-
kGVxlE: "x1i5ehqx",
|
|
165
|
-
$$css: true
|
|
166
|
-
},
|
|
167
|
-
med: {
|
|
168
|
-
kGVxlE: "x14hfi27",
|
|
169
|
-
$$css: true
|
|
170
|
-
},
|
|
171
|
-
high: {
|
|
172
|
-
kGVxlE: "x1kcpxr7",
|
|
173
|
-
$$css: true
|
|
174
|
-
}
|
|
175
|
-
};
|
|
176
|
-
|
|
177
153
|
/**
|
|
178
154
|
* Variant styles using backgroundImage for layered colors
|
|
179
155
|
* Pseudo-classes are nested within properties per StyleX recommendation
|
|
@@ -362,7 +338,6 @@ export function Button({
|
|
|
362
338
|
icon,
|
|
363
339
|
isIconOnly = false,
|
|
364
340
|
width,
|
|
365
|
-
elevation = 'none',
|
|
366
341
|
children,
|
|
367
342
|
endContent,
|
|
368
343
|
tooltip,
|
|
@@ -455,10 +430,7 @@ export function Button({
|
|
|
455
430
|
} : null;
|
|
456
431
|
|
|
457
432
|
// Shared StyleX props for both button and link rendering
|
|
458
|
-
const sharedStylexProps = stylex.props(styles.base, sizeStyles[size], variants[variant], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
|
|
459
|
-
// Standalone floating buttons only — a grouped button's elevation is owned
|
|
460
|
-
// by the ButtonGroup so the shared surface lifts as one unit.
|
|
461
|
-
!buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width), xstyle);
|
|
433
|
+
const sharedStylexProps = stylex.props(styles.base, sizeStyles[size], variants[variant], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical), width != null && dynamicStyles.width(width), xstyle);
|
|
462
434
|
const sharedMergedProps = mergeProps(themeProps('button', {
|
|
463
435
|
variant,
|
|
464
436
|
size
|
|
@@ -533,7 +505,6 @@ export function Button({
|
|
|
533
505
|
...ariaLabelProp,
|
|
534
506
|
...describedByProp,
|
|
535
507
|
...edgeCompAttr,
|
|
536
|
-
"aria-busy": isLoadingState || undefined,
|
|
537
508
|
onClick: handleClick,
|
|
538
509
|
children: buttonContent
|
|
539
510
|
});
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
*/
|
|
19
19
|
import { type ReactNode } from 'react';
|
|
20
20
|
import type { ButtonSize } from '../Button';
|
|
21
|
-
import type { Elevation } from '../utils/types';
|
|
22
21
|
import type { BaseProps } from '../BaseProps';
|
|
23
22
|
import type { ButtonGroupOrientation } from './ButtonGroupContext';
|
|
24
23
|
export interface ButtonGroupProps extends BaseProps<HTMLDivElement> {
|
|
@@ -43,13 +42,6 @@ export interface ButtonGroupProps extends BaseProps<HTMLDivElement> {
|
|
|
43
42
|
* @default 'md'
|
|
44
43
|
*/
|
|
45
44
|
size?: ButtonSize;
|
|
46
|
-
/**
|
|
47
|
-
* Resting elevation for the group. The connected buttons share one surface,
|
|
48
|
-
* so the shadow sits on the group and lifts them together. Use for a floating
|
|
49
|
-
* group of actions above content.
|
|
50
|
-
* @default 'none'
|
|
51
|
-
*/
|
|
52
|
-
elevation?: Elevation;
|
|
53
45
|
/**
|
|
54
46
|
* Whether all buttons in the group are disabled.
|
|
55
47
|
* @default false
|
|
@@ -90,7 +82,7 @@ export interface ButtonGroupProps extends BaseProps<HTMLDivElement> {
|
|
|
90
82
|
* </ButtonGroup>
|
|
91
83
|
* ```
|
|
92
84
|
*/
|
|
93
|
-
export declare function ButtonGroup({ children, label, orientation, size: sizeProp, isDisabled,
|
|
85
|
+
export declare function ButtonGroup({ children, label, orientation, size: sizeProp, isDisabled, xstyle, className, style, ref, 'data-testid': testId, onKeyDown, ...props }: ButtonGroupProps): ReactNode;
|
|
94
86
|
export declare namespace ButtonGroup {
|
|
95
87
|
var displayName: string;
|
|
96
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAI1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;AAOjE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IAErC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,WAA0B,EAC1B,IAAI,EAAE,QAAQ,EACd,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAuC9B;yBApDe,WAAW"}
|
|
@@ -22,8 +22,6 @@
|
|
|
22
22
|
*/
|
|
23
23
|
import { useMemo } from 'react';
|
|
24
24
|
import * as stylex from '@stylexjs/stylex';
|
|
25
|
-
import "../theme/tokens.stylex.js";
|
|
26
|
-
import { radiusVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
27
25
|
import { SizeProvider, useSize } from "../SizeContext/SizeContext.js";
|
|
28
26
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
29
27
|
import { mergeProps, mergeRefs, composeEventHandlers } from "../utils/index.js";
|
|
@@ -50,32 +48,6 @@ const styles = {
|
|
|
50
48
|
}
|
|
51
49
|
};
|
|
52
50
|
|
|
53
|
-
// Resting elevation for the whole group — the connected buttons share one
|
|
54
|
-
// surface, so the shadow sits on the group wrapper and lifts them as a unit.
|
|
55
|
-
// The wrapper takes the element radius so the shadow follows the group's
|
|
56
|
-
// rounded outer corners rather than a bare rectangle. 'none' is the default.
|
|
57
|
-
const elevationStyles = {
|
|
58
|
-
none: {
|
|
59
|
-
kGVxlE: "x1gnnqk1",
|
|
60
|
-
$$css: true
|
|
61
|
-
},
|
|
62
|
-
low: {
|
|
63
|
-
kGVxlE: "x1i5ehqx",
|
|
64
|
-
kaIpWk: "xh6dtrn",
|
|
65
|
-
$$css: true
|
|
66
|
-
},
|
|
67
|
-
med: {
|
|
68
|
-
kGVxlE: "x14hfi27",
|
|
69
|
-
kaIpWk: "xh6dtrn",
|
|
70
|
-
$$css: true
|
|
71
|
-
},
|
|
72
|
-
high: {
|
|
73
|
-
kGVxlE: "x1kcpxr7",
|
|
74
|
-
kaIpWk: "xh6dtrn",
|
|
75
|
-
$$css: true
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
|
|
79
51
|
// =============================================================================
|
|
80
52
|
// Component
|
|
81
53
|
// =============================================================================
|
|
@@ -116,7 +88,6 @@ export function ButtonGroup({
|
|
|
116
88
|
orientation = 'horizontal',
|
|
117
89
|
size: sizeProp,
|
|
118
90
|
isDisabled = false,
|
|
119
|
-
elevation = 'none',
|
|
120
91
|
xstyle,
|
|
121
92
|
className,
|
|
122
93
|
style,
|
|
@@ -147,7 +118,7 @@ export function ButtonGroup({
|
|
|
147
118
|
...mergeProps(themeProps('button-group', {
|
|
148
119
|
size,
|
|
149
120
|
orientation
|
|
150
|
-
}), stylex.props(styles.group, orientation === 'vertical' && styles.vertical,
|
|
121
|
+
}), stylex.props(styles.group, orientation === 'vertical' && styles.vertical, xstyle), className, style),
|
|
151
122
|
role: "group",
|
|
152
123
|
"aria-label": label,
|
|
153
124
|
onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
|
package/dist/Card/Card.d.ts
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* - /packages/cli/templates/blocks/components/Card/ (showcase blocks)
|
|
12
12
|
*/
|
|
13
13
|
import type { ReactNode } from 'react';
|
|
14
|
-
import type {
|
|
14
|
+
import type { SizeValue, SpacingStep } from '../utils/types';
|
|
15
15
|
import type { BaseProps } from '../BaseProps';
|
|
16
16
|
/**
|
|
17
17
|
* Background color variant for Card.
|
|
@@ -78,12 +78,6 @@ export interface CardProps extends BaseProps<HTMLDivElement> {
|
|
|
78
78
|
* @default 'default'
|
|
79
79
|
*/
|
|
80
80
|
variant?: CardVariant;
|
|
81
|
-
/**
|
|
82
|
-
* Resting elevation — the shadow depth the card sits at.
|
|
83
|
-
* `none` is flat; `low`/`med`/`high` map to the shadow token scale.
|
|
84
|
-
* @default 'none'
|
|
85
|
-
*/
|
|
86
|
-
elevation?: Elevation;
|
|
87
81
|
}
|
|
88
82
|
/**
|
|
89
83
|
* A card container with border and themed styling.
|
|
@@ -119,7 +113,7 @@ export interface CardProps extends BaseProps<HTMLDivElement> {
|
|
|
119
113
|
* </Card>
|
|
120
114
|
* ```
|
|
121
115
|
*/
|
|
122
|
-
export declare function Card({ width, height, maxWidth, minHeight, children, padding, variant,
|
|
116
|
+
export declare function Card({ width, height, maxWidth, minHeight, children, padding, variant, xstyle, className, style, ref, ...props }: CardProps): import("react").JSX.Element;
|
|
123
117
|
export declare namespace Card {
|
|
124
118
|
var displayName: string;
|
|
125
119
|
}
|
package/dist/Card/Card.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AAwFb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA0DX;yBAvEe,IAAI"}
|
package/dist/Card/Card.js
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
*/
|
|
17
17
|
import * as stylex from '@stylexjs/stylex';
|
|
18
18
|
import "../theme/tokens.stylex.js";
|
|
19
|
-
import { borderVars, colorVars, radiusVars
|
|
19
|
+
import { borderVars, colorVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
20
20
|
import { container } from "../Layout/container.stylex.js";
|
|
21
21
|
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
|
|
22
22
|
import { mergeProps } from "../utils/index.js";
|
|
@@ -49,7 +49,6 @@ const styles = {
|
|
|
49
49
|
"--_card-radius": "x2kkz0m",
|
|
50
50
|
kaIpWk: "x153u1i6",
|
|
51
51
|
kVQacm: "x7giv3",
|
|
52
|
-
kGVxlE: "x1p8z4y0",
|
|
53
52
|
$$css: true
|
|
54
53
|
},
|
|
55
54
|
withBorder: {
|
|
@@ -124,30 +123,6 @@ const variantStyles = {
|
|
|
124
123
|
}
|
|
125
124
|
};
|
|
126
125
|
|
|
127
|
-
// Elevation → shadow-token map. Sets the private --_card-elevation variable
|
|
128
|
-
// (not box-shadow directly) so it composes with --_card-ring in the shadow
|
|
129
|
-
// list above — a selection ring and a resting elevation coexist without one
|
|
130
|
-
// overwriting the other. 'none' is a transparent no-op (not the CSS literal
|
|
131
|
-
// `none`, which would be invalid inside the comma-separated shadow list).
|
|
132
|
-
const elevationStyles = {
|
|
133
|
-
none: {
|
|
134
|
-
"--_card-elevation": "xw28qpl",
|
|
135
|
-
$$css: true
|
|
136
|
-
},
|
|
137
|
-
low: {
|
|
138
|
-
"--_card-elevation": "x1nn8khe",
|
|
139
|
-
$$css: true
|
|
140
|
-
},
|
|
141
|
-
med: {
|
|
142
|
-
"--_card-elevation": "x1ovzxg0",
|
|
143
|
-
$$css: true
|
|
144
|
-
},
|
|
145
|
-
high: {
|
|
146
|
-
"--_card-elevation": "xnpe7fx",
|
|
147
|
-
$$css: true
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
|
|
151
126
|
// Dynamic styles for sizing props
|
|
152
127
|
const dynamicStyles = {
|
|
153
128
|
sizing: (width, height, maxWidth, minHeight) => [{
|
|
@@ -205,7 +180,6 @@ export function Card({
|
|
|
205
180
|
children,
|
|
206
181
|
padding,
|
|
207
182
|
variant = 'default',
|
|
208
|
-
elevation = 'none',
|
|
209
183
|
xstyle,
|
|
210
184
|
className,
|
|
211
185
|
style,
|
|
@@ -223,7 +197,7 @@ export function Card({
|
|
|
223
197
|
ref: ref,
|
|
224
198
|
...mergeProps(themeProps('card', {
|
|
225
199
|
variant
|
|
226
|
-
}), stylex.props(styles.card, variantStyles[variant],
|
|
200
|
+
}), stylex.props(styles.card, variantStyles[variant], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
|
|
227
201
|
useThemeDefault: 'card'
|
|
228
202
|
} : {
|
|
229
203
|
paddingInnerX: paddingToken,
|
|
@@ -5,10 +5,7 @@
|
|
|
5
5
|
* @position Horizontal scroll container with fade-edge overflow indication,
|
|
6
6
|
* optional prev/next buttons on the top layer, scroll-snap, a 1px
|
|
7
7
|
* visual bleed allowance for child selection indicators, and Shift + wheel
|
|
8
|
-
* mapping so mouse users can scroll horizontally.
|
|
9
|
-
* carousel semantics: the root is a labelled region with
|
|
10
|
-
* aria-roledescription="carousel" and each item wrapper is a group with
|
|
11
|
-
* aria-roledescription="slide" named "Slide N of M".
|
|
8
|
+
* mapping so mouse users can scroll horizontally.
|
|
12
9
|
*
|
|
13
10
|
* SYNC: When modified, update:
|
|
14
11
|
* - /packages/core/src/Carousel/index.ts (exports)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA6Kf;yBA3Le,QAAQ"}
|
|
@@ -9,17 +9,14 @@
|
|
|
9
9
|
* @position Horizontal scroll container with fade-edge overflow indication,
|
|
10
10
|
* optional prev/next buttons on the top layer, scroll-snap, a 1px
|
|
11
11
|
* visual bleed allowance for child selection indicators, and Shift + wheel
|
|
12
|
-
* mapping so mouse users can scroll horizontally.
|
|
13
|
-
* carousel semantics: the root is a labelled region with
|
|
14
|
-
* aria-roledescription="carousel" and each item wrapper is a group with
|
|
15
|
-
* aria-roledescription="slide" named "Slide N of M".
|
|
12
|
+
* mapping so mouse users can scroll horizontally.
|
|
16
13
|
*
|
|
17
14
|
* SYNC: When modified, update:
|
|
18
15
|
* - /packages/core/src/Carousel/index.ts (exports)
|
|
19
16
|
* - /apps/storybook/stories/Carousel.stories.tsx
|
|
20
17
|
* - /packages/cli/templates/blocks/components/Carousel/ (showcase blocks)
|
|
21
18
|
*/
|
|
22
|
-
import { useRef, useCallback, useEffect, Children
|
|
19
|
+
import { useRef, useCallback, useEffect, Children } from 'react';
|
|
23
20
|
import * as stylex from '@stylexjs/stylex';
|
|
24
21
|
import "../theme/tokens.stylex.js";
|
|
25
22
|
import { spacingVars, colorVars, shadowVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
@@ -223,11 +220,6 @@ export function Carousel({
|
|
|
223
220
|
overflowStart,
|
|
224
221
|
overflowEnd
|
|
225
222
|
} = useScrollOverflow();
|
|
226
|
-
|
|
227
|
-
// Children.toArray drops null/undefined/boolean children and assigns
|
|
228
|
-
// stable keys, so slide numbering ("Slide N of M") matches what actually
|
|
229
|
-
// renders even when some children are conditionally omitted.
|
|
230
|
-
const slides = Children.toArray(children);
|
|
231
223
|
const layer = useLayer({
|
|
232
224
|
mode: 'context',
|
|
233
225
|
lightDismiss: false
|
|
@@ -310,24 +302,12 @@ export function Carousel({
|
|
|
310
302
|
tabIndex: 0,
|
|
311
303
|
onWheel: handleWheel,
|
|
312
304
|
...stylex.props(styles.scroller, gapStyles[gap], padding != null && paddingStyles[padding], hasSnap && styles.snap, fadeStyle),
|
|
313
|
-
children:
|
|
314
|
-
/*#__PURE__*/
|
|
315
|
-
// APG carousel pattern: each slide container is a group with
|
|
316
|
-
// aria-roledescription="slide" and an "N of M" accessible name so
|
|
317
|
-
// ATs announce slide boundaries and position instead of anonymous
|
|
318
|
-
// generics.
|
|
319
|
-
_jsx("div", {
|
|
320
|
-
role: "group",
|
|
321
|
-
"aria-roledescription": "slide",
|
|
322
|
-
"aria-label": t('@astryx.carousel.slideLabel', {
|
|
323
|
-
current: index + 1,
|
|
324
|
-
total: slides.length
|
|
325
|
-
}),
|
|
305
|
+
children: Children.map(children, child => /*#__PURE__*/_jsx("div", {
|
|
326
306
|
...{
|
|
327
307
|
className: "x1bhewko x78zum5 x2lah0s"
|
|
328
308
|
},
|
|
329
309
|
children: child
|
|
330
|
-
}
|
|
310
|
+
}))
|
|
331
311
|
}), hasButtons && layer.render(/*#__PURE__*/_jsxs(_Fragment, {
|
|
332
312
|
children: [/*#__PURE__*/_jsx("div", {
|
|
333
313
|
...{
|
|
@@ -43,14 +43,6 @@ export interface ChatComposerProps extends Omit<BaseProps<HTMLDivElement>, 'onCh
|
|
|
43
43
|
isDisabled?: boolean;
|
|
44
44
|
/** Density variant */
|
|
45
45
|
density?: ChatComposerDensity;
|
|
46
|
-
/**
|
|
47
|
-
* Resting elevation of the composer body. `low` (the default) keeps today's
|
|
48
|
-
* raised look — low at rest, bumping to med on hover / focus. `none` flattens
|
|
49
|
-
* it and draws a border with the same rest / hover / focus treatment as a
|
|
50
|
-
* text input (emphasized border → accent on focus, with matching inset rings).
|
|
51
|
-
* @default 'low'
|
|
52
|
-
*/
|
|
53
|
-
elevation?: 'none' | 'low';
|
|
54
46
|
/** Collapsible drawer rendered above the input — attachments, context chips, etc. Use ChatComposerDrawer. */
|
|
55
47
|
drawer?: ReactNode;
|
|
56
48
|
/** Actions rendered on the left side of the header (e.g. attach, mention buttons). Use icon-only `size="sm"` buttons. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAI9B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yHAAyH;IACzH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yGAAyG;IACzG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gHAAgH;IAChH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACnC;AAwJD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAiKpD;yBAjKe,YAAY"}
|