@wallarm-org/design-system 3.1.0 → 3.2.0-rc-feat-app-shell-aside.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AppShell/AppShell.js +1 -1
- package/dist/components/AppShell/AppShellAside.d.ts +15 -0
- package/dist/components/AppShell/AppShellAside.js +63 -0
- package/dist/components/AppShell/AppShellRemote.js +1 -1
- package/dist/components/AppShell/index.d.ts +1 -0
- package/dist/components/AppShell/index.js +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/metadata/components.json +288 -2
- package/package.json +1 -1
|
@@ -80,7 +80,7 @@ const AppShell = (t0)=>{
|
|
|
80
80
|
} else t4 = $[19];
|
|
81
81
|
let t5;
|
|
82
82
|
if ($[20] !== className) {
|
|
83
|
-
t5 = cn('relative isolate grid h-screen overscroll-none [grid-template-areas:"
|
|
83
|
+
t5 = cn('relative isolate grid h-screen overscroll-none [grid-template-areas:"header_header_header""rail_remote_aside"] [grid-template-columns:auto_1fr_auto] [grid-template-rows:auto_1fr] bg-component-app-shell-bg', className);
|
|
84
84
|
$[20] = className;
|
|
85
85
|
$[21] = t5;
|
|
86
86
|
} else t5 = $[21];
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
|
+
export interface AppShellAsideProps extends HTMLAttributes<HTMLElement> {
|
|
3
|
+
ref?: Ref<HTMLElement>;
|
|
4
|
+
/**
|
|
5
|
+
* Shows the panel. Closed, the region takes no space and is `hidden` and `inert`, but its
|
|
6
|
+
* children stay mounted, so whatever state they hold survives a close and reopen.
|
|
7
|
+
*/
|
|
8
|
+
open: boolean;
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* A panel docked right of the content surface, in the shell's `aside` grid area. Render it
|
|
13
|
+
* after `AppShellRemote`: while it is open, the remote turns into a card beside it.
|
|
14
|
+
*/
|
|
15
|
+
export declare const AppShellAside: FC<AppShellAsideProps>;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { c } from "react/compiler-runtime";
|
|
3
|
+
import { cn } from "../../utils/cn.js";
|
|
4
|
+
import { useTestId } from "../../utils/testId.js";
|
|
5
|
+
const AppShellAside = (t0)=>{
|
|
6
|
+
const $ = c(17);
|
|
7
|
+
let children;
|
|
8
|
+
let className;
|
|
9
|
+
let open;
|
|
10
|
+
let props;
|
|
11
|
+
let ref;
|
|
12
|
+
if ($[0] !== t0) {
|
|
13
|
+
({ ref, open, className, children, ...props } = t0);
|
|
14
|
+
$[0] = t0;
|
|
15
|
+
$[1] = children;
|
|
16
|
+
$[2] = className;
|
|
17
|
+
$[3] = open;
|
|
18
|
+
$[4] = props;
|
|
19
|
+
$[5] = ref;
|
|
20
|
+
} else {
|
|
21
|
+
children = $[1];
|
|
22
|
+
className = $[2];
|
|
23
|
+
open = $[3];
|
|
24
|
+
props = $[4];
|
|
25
|
+
ref = $[5];
|
|
26
|
+
}
|
|
27
|
+
const testId = useTestId("aside");
|
|
28
|
+
const t1 = !open;
|
|
29
|
+
const t2 = !open;
|
|
30
|
+
const t3 = open ? "open" : "closed";
|
|
31
|
+
let t4;
|
|
32
|
+
if ($[6] !== className) {
|
|
33
|
+
t4 = cn("[grid-area:aside] mx-8 mb-8 data-[state=open]:flex w-480 flex-col overflow-auto overscroll-none rounded-12 border border-border-primary-light bg-bg-page-bg pb-4", className);
|
|
34
|
+
$[6] = className;
|
|
35
|
+
$[7] = t4;
|
|
36
|
+
} else t4 = $[7];
|
|
37
|
+
let t5;
|
|
38
|
+
if ($[8] !== children || $[9] !== props || $[10] !== ref || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== testId) {
|
|
39
|
+
t5 = /*#__PURE__*/ jsx("aside", {
|
|
40
|
+
...props,
|
|
41
|
+
ref: ref,
|
|
42
|
+
hidden: t1,
|
|
43
|
+
inert: t2,
|
|
44
|
+
"data-slot": "app-shell-aside",
|
|
45
|
+
"data-state": t3,
|
|
46
|
+
"data-testid": testId,
|
|
47
|
+
className: t4,
|
|
48
|
+
children: children
|
|
49
|
+
});
|
|
50
|
+
$[8] = children;
|
|
51
|
+
$[9] = props;
|
|
52
|
+
$[10] = ref;
|
|
53
|
+
$[11] = t1;
|
|
54
|
+
$[12] = t2;
|
|
55
|
+
$[13] = t3;
|
|
56
|
+
$[14] = t4;
|
|
57
|
+
$[15] = testId;
|
|
58
|
+
$[16] = t5;
|
|
59
|
+
} else t5 = $[16];
|
|
60
|
+
return t5;
|
|
61
|
+
};
|
|
62
|
+
AppShellAside.displayName = "AppShellAside";
|
|
63
|
+
export { AppShellAside };
|
|
@@ -24,7 +24,7 @@ const AppShellRemote = (t0)=>{
|
|
|
24
24
|
const testId = useTestId("remote");
|
|
25
25
|
let t1;
|
|
26
26
|
if ($[5] !== className) {
|
|
27
|
-
t1 = cn("[grid-area:remote] relative overflow-auto overscroll-none rounded-tl-12 border-t border-l border-border-primary-light bg-bg-page-bg", className);
|
|
27
|
+
t1 = cn("[grid-area:remote] relative overflow-auto overscroll-none rounded-tl-12 border-t border-l border-border-primary-light bg-bg-page-bg", "has-[~[data-slot=app-shell-aside][data-state=open]]:rounded-tr-12 has-[~[data-slot=app-shell-aside][data-state=open]]:border-r", className);
|
|
28
28
|
$[5] = className;
|
|
29
29
|
$[6] = t1;
|
|
30
30
|
} else t1 = $[6];
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { AppShell, type AppShellExpandFrom, type AppShellProps } from './AppShell.js';
|
|
2
|
+
export { AppShellAside, type AppShellAsideProps } from './AppShellAside.js';
|
|
2
3
|
export { AppShellHeader, type AppShellHeaderProps } from './AppShellHeader.js';
|
|
3
4
|
export { AppShellRail, type AppShellRailProps } from './AppShellRail.js';
|
|
4
5
|
export { AppShellRemote, type AppShellRemoteProps } from './AppShellRemote.js';
|
package/dist/index.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ export { CalendarDate, CalendarDateTime, getLocalTimeZone, parseDate, parseDateT
|
|
|
15
15
|
export { Accordion, AccordionActions, type AccordionActionsProps, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionValueChangeDetails, type AccordionVariant, } from './components/Accordion/index.js';
|
|
16
16
|
export { Alert, AlertClose, type AlertCloseProps, type AlertColor, AlertContent, type AlertContentProps, AlertControls, type AlertControlsProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, AlertTitle, type AlertTitleProps, } from './components/Alert/index.js';
|
|
17
17
|
export { AnimatedBackground, type AnimatedBackgroundProps, } from './components/AnimatedBackground/index.js';
|
|
18
|
-
export { AppShell, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell/index.js';
|
|
18
|
+
export { AppShell, AppShellAside, type AppShellAsideProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell/index.js';
|
|
19
19
|
export { Attribute, AttributeActions, AttributeActionsContent, type AttributeActionsContentProps, AttributeActionsItem, type AttributeActionsItemProps, type AttributeActionsProps, AttributeActionsTarget, type AttributeActionsTargetProps, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute/index.js';
|
|
20
20
|
export { Avatar, AvatarContent, type AvatarContentProps, AvatarDescription, type AvatarDescriptionProps, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, AvatarName, type AvatarNameProps, AvatarOverlay, type AvatarOverlayProps, type AvatarProps, type AvatarStatusChangeDetails, } from './components/Avatar/index.js';
|
|
21
21
|
export { Badge, type BadgeProps } from './components/Badge/index.js';
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@ export { CalendarDate, CalendarDateTime, Time, ZonedDateTime, getLocalTimeZone,
|
|
|
4
4
|
export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger } from "./components/Accordion/index.js";
|
|
5
5
|
export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from "./components/Alert/index.js";
|
|
6
6
|
export { AnimatedBackground } from "./components/AnimatedBackground/index.js";
|
|
7
|
-
export { AppShell, AppShellHeader, AppShellRail, AppShellRemote } from "./components/AppShell/index.js";
|
|
7
|
+
export { AppShell, AppShellAside, AppShellHeader, AppShellRail, AppShellRemote } from "./components/AppShell/index.js";
|
|
8
8
|
export { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue } from "./components/Attribute/index.js";
|
|
9
9
|
export { Avatar, AvatarContent, AvatarDescription, AvatarFallback, AvatarImage, AvatarName, AvatarOverlay } from "./components/Avatar/index.js";
|
|
10
10
|
export { Badge } from "./components/Badge/index.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.
|
|
3
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"version": "3.1.0",
|
|
3
|
+
"generatedAt": "2026-10-21T12:04:49.932Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -4512,6 +4512,287 @@
|
|
|
4512
4512
|
],
|
|
4513
4513
|
"variants": [],
|
|
4514
4514
|
"subComponents": [
|
|
4515
|
+
{
|
|
4516
|
+
"name": "AppShellAside",
|
|
4517
|
+
"props": [
|
|
4518
|
+
{
|
|
4519
|
+
"name": "open",
|
|
4520
|
+
"type": "boolean",
|
|
4521
|
+
"required": true,
|
|
4522
|
+
"description": "Shows the panel. Closed, the region takes no space and is `hidden` and `inert`, but its\nchildren stay mounted, so whatever state they hold survives a close and reopen."
|
|
4523
|
+
},
|
|
4524
|
+
{
|
|
4525
|
+
"name": "defaultChecked",
|
|
4526
|
+
"type": "boolean | undefined",
|
|
4527
|
+
"required": false
|
|
4528
|
+
},
|
|
4529
|
+
{
|
|
4530
|
+
"name": "defaultValue",
|
|
4531
|
+
"type": "string | number | readonly string[] | undefined",
|
|
4532
|
+
"required": false
|
|
4533
|
+
},
|
|
4534
|
+
{
|
|
4535
|
+
"name": "suppressContentEditableWarning",
|
|
4536
|
+
"type": "boolean | undefined",
|
|
4537
|
+
"required": false
|
|
4538
|
+
},
|
|
4539
|
+
{
|
|
4540
|
+
"name": "suppressHydrationWarning",
|
|
4541
|
+
"type": "boolean | undefined",
|
|
4542
|
+
"required": false
|
|
4543
|
+
},
|
|
4544
|
+
{
|
|
4545
|
+
"name": "accessKey",
|
|
4546
|
+
"type": "string | undefined",
|
|
4547
|
+
"required": false
|
|
4548
|
+
},
|
|
4549
|
+
{
|
|
4550
|
+
"name": "autoCapitalize",
|
|
4551
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
4552
|
+
"required": false
|
|
4553
|
+
},
|
|
4554
|
+
{
|
|
4555
|
+
"name": "autoFocus",
|
|
4556
|
+
"type": "boolean | undefined",
|
|
4557
|
+
"required": false
|
|
4558
|
+
},
|
|
4559
|
+
{
|
|
4560
|
+
"name": "contentEditable",
|
|
4561
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
4562
|
+
"required": false
|
|
4563
|
+
},
|
|
4564
|
+
{
|
|
4565
|
+
"name": "contextMenu",
|
|
4566
|
+
"type": "string | undefined",
|
|
4567
|
+
"required": false
|
|
4568
|
+
},
|
|
4569
|
+
{
|
|
4570
|
+
"name": "dir",
|
|
4571
|
+
"type": "string | undefined",
|
|
4572
|
+
"required": false
|
|
4573
|
+
},
|
|
4574
|
+
{
|
|
4575
|
+
"name": "draggable",
|
|
4576
|
+
"type": "Booleanish | undefined",
|
|
4577
|
+
"required": false
|
|
4578
|
+
},
|
|
4579
|
+
{
|
|
4580
|
+
"name": "enterKeyHint",
|
|
4581
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
4582
|
+
"required": false
|
|
4583
|
+
},
|
|
4584
|
+
{
|
|
4585
|
+
"name": "hidden",
|
|
4586
|
+
"type": "boolean | undefined",
|
|
4587
|
+
"required": false
|
|
4588
|
+
},
|
|
4589
|
+
{
|
|
4590
|
+
"name": "id",
|
|
4591
|
+
"type": "string | undefined",
|
|
4592
|
+
"required": false
|
|
4593
|
+
},
|
|
4594
|
+
{
|
|
4595
|
+
"name": "lang",
|
|
4596
|
+
"type": "string | undefined",
|
|
4597
|
+
"required": false
|
|
4598
|
+
},
|
|
4599
|
+
{
|
|
4600
|
+
"name": "nonce",
|
|
4601
|
+
"type": "string | undefined",
|
|
4602
|
+
"required": false
|
|
4603
|
+
},
|
|
4604
|
+
{
|
|
4605
|
+
"name": "slot",
|
|
4606
|
+
"type": "string | undefined",
|
|
4607
|
+
"required": false
|
|
4608
|
+
},
|
|
4609
|
+
{
|
|
4610
|
+
"name": "spellCheck",
|
|
4611
|
+
"type": "Booleanish | undefined",
|
|
4612
|
+
"required": false
|
|
4613
|
+
},
|
|
4614
|
+
{
|
|
4615
|
+
"name": "tabIndex",
|
|
4616
|
+
"type": "number | undefined",
|
|
4617
|
+
"required": false
|
|
4618
|
+
},
|
|
4619
|
+
{
|
|
4620
|
+
"name": "title",
|
|
4621
|
+
"type": "string | undefined",
|
|
4622
|
+
"required": false
|
|
4623
|
+
},
|
|
4624
|
+
{
|
|
4625
|
+
"name": "translate",
|
|
4626
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
4627
|
+
"required": false
|
|
4628
|
+
},
|
|
4629
|
+
{
|
|
4630
|
+
"name": "radioGroup",
|
|
4631
|
+
"type": "string | undefined",
|
|
4632
|
+
"required": false
|
|
4633
|
+
},
|
|
4634
|
+
{
|
|
4635
|
+
"name": "role",
|
|
4636
|
+
"type": "AriaRole | undefined",
|
|
4637
|
+
"required": false
|
|
4638
|
+
},
|
|
4639
|
+
{
|
|
4640
|
+
"name": "about",
|
|
4641
|
+
"type": "string | undefined",
|
|
4642
|
+
"required": false
|
|
4643
|
+
},
|
|
4644
|
+
{
|
|
4645
|
+
"name": "content",
|
|
4646
|
+
"type": "string | undefined",
|
|
4647
|
+
"required": false
|
|
4648
|
+
},
|
|
4649
|
+
{
|
|
4650
|
+
"name": "datatype",
|
|
4651
|
+
"type": "string | undefined",
|
|
4652
|
+
"required": false
|
|
4653
|
+
},
|
|
4654
|
+
{
|
|
4655
|
+
"name": "inlist",
|
|
4656
|
+
"type": "any",
|
|
4657
|
+
"required": false
|
|
4658
|
+
},
|
|
4659
|
+
{
|
|
4660
|
+
"name": "prefix",
|
|
4661
|
+
"type": "string | undefined",
|
|
4662
|
+
"required": false
|
|
4663
|
+
},
|
|
4664
|
+
{
|
|
4665
|
+
"name": "property",
|
|
4666
|
+
"type": "string | undefined",
|
|
4667
|
+
"required": false
|
|
4668
|
+
},
|
|
4669
|
+
{
|
|
4670
|
+
"name": "rel",
|
|
4671
|
+
"type": "string | undefined",
|
|
4672
|
+
"required": false
|
|
4673
|
+
},
|
|
4674
|
+
{
|
|
4675
|
+
"name": "resource",
|
|
4676
|
+
"type": "string | undefined",
|
|
4677
|
+
"required": false
|
|
4678
|
+
},
|
|
4679
|
+
{
|
|
4680
|
+
"name": "rev",
|
|
4681
|
+
"type": "string | undefined",
|
|
4682
|
+
"required": false
|
|
4683
|
+
},
|
|
4684
|
+
{
|
|
4685
|
+
"name": "typeof",
|
|
4686
|
+
"type": "string | undefined",
|
|
4687
|
+
"required": false
|
|
4688
|
+
},
|
|
4689
|
+
{
|
|
4690
|
+
"name": "vocab",
|
|
4691
|
+
"type": "string | undefined",
|
|
4692
|
+
"required": false
|
|
4693
|
+
},
|
|
4694
|
+
{
|
|
4695
|
+
"name": "autoCorrect",
|
|
4696
|
+
"type": "string | undefined",
|
|
4697
|
+
"required": false
|
|
4698
|
+
},
|
|
4699
|
+
{
|
|
4700
|
+
"name": "autoSave",
|
|
4701
|
+
"type": "string | undefined",
|
|
4702
|
+
"required": false
|
|
4703
|
+
},
|
|
4704
|
+
{
|
|
4705
|
+
"name": "color",
|
|
4706
|
+
"type": "string | undefined",
|
|
4707
|
+
"required": false
|
|
4708
|
+
},
|
|
4709
|
+
{
|
|
4710
|
+
"name": "itemProp",
|
|
4711
|
+
"type": "string | undefined",
|
|
4712
|
+
"required": false
|
|
4713
|
+
},
|
|
4714
|
+
{
|
|
4715
|
+
"name": "itemScope",
|
|
4716
|
+
"type": "boolean | undefined",
|
|
4717
|
+
"required": false
|
|
4718
|
+
},
|
|
4719
|
+
{
|
|
4720
|
+
"name": "itemType",
|
|
4721
|
+
"type": "string | undefined",
|
|
4722
|
+
"required": false
|
|
4723
|
+
},
|
|
4724
|
+
{
|
|
4725
|
+
"name": "itemID",
|
|
4726
|
+
"type": "string | undefined",
|
|
4727
|
+
"required": false
|
|
4728
|
+
},
|
|
4729
|
+
{
|
|
4730
|
+
"name": "itemRef",
|
|
4731
|
+
"type": "string | undefined",
|
|
4732
|
+
"required": false
|
|
4733
|
+
},
|
|
4734
|
+
{
|
|
4735
|
+
"name": "results",
|
|
4736
|
+
"type": "number | undefined",
|
|
4737
|
+
"required": false
|
|
4738
|
+
},
|
|
4739
|
+
{
|
|
4740
|
+
"name": "security",
|
|
4741
|
+
"type": "string | undefined",
|
|
4742
|
+
"required": false
|
|
4743
|
+
},
|
|
4744
|
+
{
|
|
4745
|
+
"name": "unselectable",
|
|
4746
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
4747
|
+
"required": false
|
|
4748
|
+
},
|
|
4749
|
+
{
|
|
4750
|
+
"name": "popover",
|
|
4751
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
4752
|
+
"required": false
|
|
4753
|
+
},
|
|
4754
|
+
{
|
|
4755
|
+
"name": "popoverTargetAction",
|
|
4756
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
4757
|
+
"required": false
|
|
4758
|
+
},
|
|
4759
|
+
{
|
|
4760
|
+
"name": "popoverTarget",
|
|
4761
|
+
"type": "string | undefined",
|
|
4762
|
+
"required": false
|
|
4763
|
+
},
|
|
4764
|
+
{
|
|
4765
|
+
"name": "inert",
|
|
4766
|
+
"type": "boolean | undefined",
|
|
4767
|
+
"required": false,
|
|
4768
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
4769
|
+
},
|
|
4770
|
+
{
|
|
4771
|
+
"name": "inputMode",
|
|
4772
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
4773
|
+
"required": false,
|
|
4774
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
4775
|
+
},
|
|
4776
|
+
{
|
|
4777
|
+
"name": "is",
|
|
4778
|
+
"type": "string | undefined",
|
|
4779
|
+
"required": false,
|
|
4780
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
4781
|
+
},
|
|
4782
|
+
{
|
|
4783
|
+
"name": "exportparts",
|
|
4784
|
+
"type": "string | undefined",
|
|
4785
|
+
"required": false,
|
|
4786
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
4787
|
+
},
|
|
4788
|
+
{
|
|
4789
|
+
"name": "part",
|
|
4790
|
+
"type": "string | undefined",
|
|
4791
|
+
"required": false,
|
|
4792
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
4793
|
+
}
|
|
4794
|
+
]
|
|
4795
|
+
},
|
|
4515
4796
|
{
|
|
4516
4797
|
"name": "AppShellHeader",
|
|
4517
4798
|
"props": [
|
|
@@ -5349,6 +5630,11 @@
|
|
|
5349
5630
|
"code": "({ ambient, loading }) => (\n <StoryRouter>\n <Shell ambient={ambient} loading={loading} simulateProductLoading />\n </StoryRouter>\n)",
|
|
5350
5631
|
"description": "How the shell looks while the platform loads. The header actions and the product rail hold skeletons that sit exactly where the real items land, so nothing jumps when they arrive. Turn `loading` off in Controls to watch the swap. Opening a product also shows its own panel and content loading."
|
|
5351
5632
|
},
|
|
5633
|
+
{
|
|
5634
|
+
"name": "WithAside",
|
|
5635
|
+
"code": "({ ambient }) => (\n <StoryRouter>\n <Shell ambient={ambient} aside />\n </StoryRouter>\n)",
|
|
5636
|
+
"description": "`AppShellAside` docks a panel right of the content surface — a stand-in assistant here, toggled from the header — and closing it hides the region without unmounting what is inside, so text typed into the panel survives a close and reopen."
|
|
5637
|
+
},
|
|
5352
5638
|
{
|
|
5353
5639
|
"name": "RevealFlow",
|
|
5354
5640
|
"code": "() => (\n <StoryRouter>\n <RevealFlowShell />\n </StoryRouter>\n)",
|
package/package.json
CHANGED