sparkdesign 0.4.9 → 0.4.10
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/AGENT_COMPONENT_LIBRARY_QUICKREF.md +117 -0
- package/AI_README.md +7 -2
- package/README.md +4 -1
- package/cli/registry/AGENTS.md +1 -1
- package/cli/registry/agent-manifest.json +137 -93
- package/cli/registry/basic/calendar.tsx +16 -16
- package/cli/registry/basic/combobox.tsx +11 -2
- package/cli/registry/basic/date-picker.tsx +3 -2
- package/cli/registry/basic/popover.tsx +19 -2
- package/cli/registry/basic/rating.tsx +161 -0
- package/cli/registry/basic/sidebar.tsx +1 -1
- package/cli/registry/basic/stepper.tsx +163 -0
- package/cli/registry/basic/timeline.tsx +129 -0
- package/cli/registry/chat/permission-card.tsx +1 -1
- package/cli/registry/meta.json +30 -25
- package/dist/registry/basic/calendar.d.ts +1 -1
- package/dist/registry/basic/combobox.d.ts +2 -1
- package/dist/registry/basic/date-picker.d.ts +2 -2
- package/dist/registry/basic/popover.d.ts +2 -0
- package/dist/registry/basic/rating.d.ts +31 -0
- package/dist/registry/basic/stepper.d.ts +36 -0
- package/dist/registry/basic/timeline.d.ts +34 -0
- package/dist/spark-design.cjs.js +23 -23
- package/dist/spark-design.es.js +3420 -3035
- package/dist/sparkdesign.css +1 -1
- package/dist/src/components/basic/Rating/index.d.ts +13 -0
- package/dist/src/components/basic/Stepper/index.d.ts +13 -0
- package/dist/src/components/basic/Timeline/index.d.ts +13 -0
- package/dist/src/components/index.d.ts +6 -2
- package/docs/agent/component-selection.md +1 -3
- package/docs/agent/prompt-recipes.md +167 -0
- package/docs/guides/agent-usage.md +213 -0
- package/docs/guides/system-operating-model.md +148 -0
- package/package.json +14 -2
- package/registry/agent-manifest.json +137 -93
- package/cli/registry/basic/sheet.tsx +0 -18
- package/dist/registry/basic/sheet.d.ts +0 -13
- package/dist/src/components/basic/Sheet/index.d.ts +0 -13
|
@@ -933,55 +933,7 @@
|
|
|
933
933
|
],
|
|
934
934
|
"agentHints": [
|
|
935
935
|
"Choose Popover for compact pickers and contextual controls.",
|
|
936
|
-
"Use Dialog or
|
|
937
|
-
]
|
|
938
|
-
},
|
|
939
|
-
"sheet": {
|
|
940
|
-
"id": "sheet",
|
|
941
|
-
"name": "Sheet",
|
|
942
|
-
"category": "basic",
|
|
943
|
-
"status": "stable",
|
|
944
|
-
"intent": "Side panel overlay for contextual details, filters, settings, or secondary editing flows.",
|
|
945
|
-
"packageImport": "import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from 'sparkdesign'",
|
|
946
|
-
"cliAdd": "npx sparkdesign@latest add sheet",
|
|
947
|
-
"slots": [
|
|
948
|
-
"Sheet",
|
|
949
|
-
"SheetTrigger",
|
|
950
|
-
"SheetContent",
|
|
951
|
-
"SheetHeader",
|
|
952
|
-
"SheetTitle",
|
|
953
|
-
"SheetDescription",
|
|
954
|
-
"SheetFooter"
|
|
955
|
-
],
|
|
956
|
-
"states": [
|
|
957
|
-
"open",
|
|
958
|
-
"closed",
|
|
959
|
-
"side-left",
|
|
960
|
-
"side-right",
|
|
961
|
-
"side-top",
|
|
962
|
-
"side-bottom",
|
|
963
|
-
"focus-trapped"
|
|
964
|
-
],
|
|
965
|
-
"a11y": [
|
|
966
|
-
"Always provide SheetTitle.",
|
|
967
|
-
"Use SheetDescription when the panel purpose is not obvious.",
|
|
968
|
-
"Return focus to the trigger after close."
|
|
969
|
-
],
|
|
970
|
-
"composition": [
|
|
971
|
-
"Button",
|
|
972
|
-
"Field",
|
|
973
|
-
"Tabs",
|
|
974
|
-
"SidebarMenu",
|
|
975
|
-
"Alert"
|
|
976
|
-
],
|
|
977
|
-
"antiPatterns": [
|
|
978
|
-
"Do not use Sheet for destructive confirmations; use AlertDialog.",
|
|
979
|
-
"Do not create nested sheets unless the product specifically requires it.",
|
|
980
|
-
"Do not put primary app navigation in a temporary sheet on desktop when persistent navigation is expected."
|
|
981
|
-
],
|
|
982
|
-
"agentHints": [
|
|
983
|
-
"Choose Sheet for secondary panels that preserve page context.",
|
|
984
|
-
"Use Drawer when the product already follows drawer terminology or behavior."
|
|
936
|
+
"Use Dialog or Drawer when the content needs more space."
|
|
985
937
|
]
|
|
986
938
|
},
|
|
987
939
|
"sidebar-menu": {
|
|
@@ -2004,6 +1956,49 @@
|
|
|
2004
1956
|
"Use Spinner for brief unknown-duration loading."
|
|
2005
1957
|
]
|
|
2006
1958
|
},
|
|
1959
|
+
"rating": {
|
|
1960
|
+
"id": "rating",
|
|
1961
|
+
"name": "Rating",
|
|
1962
|
+
"category": "basic",
|
|
1963
|
+
"status": "stable",
|
|
1964
|
+
"intent": "Star-based score or preference input for reviews, quality signals, and lightweight sentiment feedback.",
|
|
1965
|
+
"packageImport": "import { Rating } from 'sparkdesign'",
|
|
1966
|
+
"cliAdd": "npx sparkdesign@latest add rating",
|
|
1967
|
+
"slots": [
|
|
1968
|
+
"Rating",
|
|
1969
|
+
"stars",
|
|
1970
|
+
"numeric value by option",
|
|
1971
|
+
"accessible label"
|
|
1972
|
+
],
|
|
1973
|
+
"states": [
|
|
1974
|
+
"controlled",
|
|
1975
|
+
"uncontrolled",
|
|
1976
|
+
"whole precision",
|
|
1977
|
+
"half precision",
|
|
1978
|
+
"read-only",
|
|
1979
|
+
"disabled"
|
|
1980
|
+
],
|
|
1981
|
+
"a11y": [
|
|
1982
|
+
"Provide a clear label when the rating is an input.",
|
|
1983
|
+
"Use readOnly for static review summaries.",
|
|
1984
|
+
"Do not rely on star color alone when numeric precision matters."
|
|
1985
|
+
],
|
|
1986
|
+
"composition": [
|
|
1987
|
+
"Card",
|
|
1988
|
+
"Field",
|
|
1989
|
+
"Label",
|
|
1990
|
+
"Tooltip"
|
|
1991
|
+
],
|
|
1992
|
+
"antiPatterns": [
|
|
1993
|
+
"Do not use Rating for exact numeric entry; use Input or Slider.",
|
|
1994
|
+
"Do not ask for ratings when the user needs categorical choices.",
|
|
1995
|
+
"Do not hide the current value in dense analytics summaries."
|
|
1996
|
+
],
|
|
1997
|
+
"agentHints": [
|
|
1998
|
+
"Choose Rating for familiar 1-5 preference capture or review display.",
|
|
1999
|
+
"Use precision={0.5} only when half steps are meaningful to users."
|
|
2000
|
+
]
|
|
2001
|
+
},
|
|
2007
2002
|
"resizable": {
|
|
2008
2003
|
"id": "resizable",
|
|
2009
2004
|
"name": "Resizable",
|
|
@@ -2682,6 +2677,99 @@
|
|
|
2682
2677
|
"Pair with Input when users need precise values."
|
|
2683
2678
|
]
|
|
2684
2679
|
},
|
|
2680
|
+
"stepper": {
|
|
2681
|
+
"id": "stepper",
|
|
2682
|
+
"name": "Stepper",
|
|
2683
|
+
"category": "basic",
|
|
2684
|
+
"status": "stable",
|
|
2685
|
+
"intent": "Linear workflow progress for setup, checkout, approval, onboarding, and multi-step task status.",
|
|
2686
|
+
"packageImport": "import { Stepper, StepperItem, StepperIndicator, StepperContent, StepperTitle, StepperDescription, StepperSeparator } from 'sparkdesign'",
|
|
2687
|
+
"cliAdd": "npx sparkdesign@latest add stepper",
|
|
2688
|
+
"slots": [
|
|
2689
|
+
"Stepper",
|
|
2690
|
+
"StepperItem",
|
|
2691
|
+
"StepperIndicator",
|
|
2692
|
+
"StepperContent",
|
|
2693
|
+
"StepperTitle",
|
|
2694
|
+
"StepperDescription",
|
|
2695
|
+
"StepperSeparator"
|
|
2696
|
+
],
|
|
2697
|
+
"states": [
|
|
2698
|
+
"horizontal",
|
|
2699
|
+
"vertical",
|
|
2700
|
+
"complete",
|
|
2701
|
+
"current",
|
|
2702
|
+
"upcoming",
|
|
2703
|
+
"error"
|
|
2704
|
+
],
|
|
2705
|
+
"a11y": [
|
|
2706
|
+
"Use ordered steps when sequence matters.",
|
|
2707
|
+
"Make the current step visible in text, not only color.",
|
|
2708
|
+
"Do not hide validation errors behind completed-looking steps."
|
|
2709
|
+
],
|
|
2710
|
+
"composition": [
|
|
2711
|
+
"Button",
|
|
2712
|
+
"Progress",
|
|
2713
|
+
"Alert",
|
|
2714
|
+
"Card"
|
|
2715
|
+
],
|
|
2716
|
+
"antiPatterns": [
|
|
2717
|
+
"Do not use Stepper for non-linear tabs; use Tabs.",
|
|
2718
|
+
"Do not show too many steps when grouped milestones would scan better.",
|
|
2719
|
+
"Do not mark future steps as interactive unless navigation is supported."
|
|
2720
|
+
],
|
|
2721
|
+
"agentHints": [
|
|
2722
|
+
"Choose Stepper when users need to understand where they are in a process.",
|
|
2723
|
+
"Use vertical orientation for verbose workflow history or mobile layouts."
|
|
2724
|
+
]
|
|
2725
|
+
},
|
|
2726
|
+
"timeline": {
|
|
2727
|
+
"id": "timeline",
|
|
2728
|
+
"name": "Timeline",
|
|
2729
|
+
"category": "basic",
|
|
2730
|
+
"status": "stable",
|
|
2731
|
+
"intent": "Chronological event list for activity history, releases, audit logs, and milestone narratives.",
|
|
2732
|
+
"packageImport": "import { Timeline, TimelineItem, TimelineMarker, TimelineConnector, TimelineContent, TimelineTitle, TimelineDescription, TimelineTime } from 'sparkdesign'",
|
|
2733
|
+
"cliAdd": "npx sparkdesign@latest add timeline",
|
|
2734
|
+
"slots": [
|
|
2735
|
+
"Timeline",
|
|
2736
|
+
"TimelineItem",
|
|
2737
|
+
"TimelineMarker",
|
|
2738
|
+
"TimelineConnector",
|
|
2739
|
+
"TimelineContent",
|
|
2740
|
+
"TimelineTitle",
|
|
2741
|
+
"TimelineDescription",
|
|
2742
|
+
"TimelineTime"
|
|
2743
|
+
],
|
|
2744
|
+
"states": [
|
|
2745
|
+
"default",
|
|
2746
|
+
"primary",
|
|
2747
|
+
"success",
|
|
2748
|
+
"warning",
|
|
2749
|
+
"error",
|
|
2750
|
+
"last item without connector"
|
|
2751
|
+
],
|
|
2752
|
+
"a11y": [
|
|
2753
|
+
"Keep event order clear and consistent.",
|
|
2754
|
+
"Include timestamps or labels when chronology matters.",
|
|
2755
|
+
"Do not encode event meaning only through marker color."
|
|
2756
|
+
],
|
|
2757
|
+
"composition": [
|
|
2758
|
+
"Badge",
|
|
2759
|
+
"Tag",
|
|
2760
|
+
"Card",
|
|
2761
|
+
"Separator"
|
|
2762
|
+
],
|
|
2763
|
+
"antiPatterns": [
|
|
2764
|
+
"Do not use Timeline for dense tabular audit data; use Table or DataTable.",
|
|
2765
|
+
"Do not mix ascending and descending order in the same view.",
|
|
2766
|
+
"Do not overload markers with unrelated status meanings."
|
|
2767
|
+
],
|
|
2768
|
+
"agentHints": [
|
|
2769
|
+
"Choose Timeline for readable event progression or product release histories.",
|
|
2770
|
+
"Use tone sparingly for the few events that need semantic emphasis."
|
|
2771
|
+
]
|
|
2772
|
+
},
|
|
2685
2773
|
"toggle": {
|
|
2686
2774
|
"id": "toggle",
|
|
2687
2775
|
"name": "Toggle",
|
|
@@ -2861,50 +2949,6 @@
|
|
|
2861
2949
|
"Use Alert for feedback that must remain visible."
|
|
2862
2950
|
]
|
|
2863
2951
|
},
|
|
2864
|
-
"sonner": {
|
|
2865
|
-
"id": "sonner",
|
|
2866
|
-
"name": "Sonner",
|
|
2867
|
-
"category": "basic",
|
|
2868
|
-
"status": "stable",
|
|
2869
|
-
"intent": "Sonner toaster entry using Spark token styling and theme/style portal inheritance.",
|
|
2870
|
-
"packageImport": "import { Toaster, toast } from 'sparkdesign'",
|
|
2871
|
-
"cliAdd": "npx sparkdesign@latest add sonner",
|
|
2872
|
-
"slots": [
|
|
2873
|
-
"Toaster",
|
|
2874
|
-
"toast function",
|
|
2875
|
-
"toast options",
|
|
2876
|
-
"icons",
|
|
2877
|
-
"portal wrapper"
|
|
2878
|
-
],
|
|
2879
|
-
"states": [
|
|
2880
|
-
"success",
|
|
2881
|
-
"error",
|
|
2882
|
-
"warning",
|
|
2883
|
-
"info",
|
|
2884
|
-
"loading",
|
|
2885
|
-
"dismissed"
|
|
2886
|
-
],
|
|
2887
|
-
"a11y": [
|
|
2888
|
-
"Use concise notification text.",
|
|
2889
|
-
"Do not put required decisions only in sonner toasts.",
|
|
2890
|
-
"Ensure critical errors also appear inline when users need to recover."
|
|
2891
|
-
],
|
|
2892
|
-
"composition": [
|
|
2893
|
-
"Button",
|
|
2894
|
-
"Alert",
|
|
2895
|
-
"Form",
|
|
2896
|
-
"ToolInvocationCard"
|
|
2897
|
-
],
|
|
2898
|
-
"antiPatterns": [
|
|
2899
|
-
"Do not use Sonner for persistent validation or destructive confirmation.",
|
|
2900
|
-
"Do not stack noisy success toasts for every small state change.",
|
|
2901
|
-
"Do not hide important recovery actions inside an auto-dismissing toast."
|
|
2902
|
-
],
|
|
2903
|
-
"agentHints": [
|
|
2904
|
-
"Choose Sonner when the target explicitly asks for the sonner toaster API.",
|
|
2905
|
-
"Choose Toast when describing the semantic notification pattern."
|
|
2906
|
-
]
|
|
2907
|
-
},
|
|
2908
2952
|
"tooltip": {
|
|
2909
2953
|
"id": "tooltip",
|
|
2910
2954
|
"name": "Tooltip",
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export {
|
|
2
|
-
Drawer as Sheet,
|
|
3
|
-
DrawerTrigger as SheetTrigger,
|
|
4
|
-
DrawerClose as SheetClose,
|
|
5
|
-
DrawerPortal as SheetPortal,
|
|
6
|
-
DrawerOverlay as SheetOverlay,
|
|
7
|
-
DrawerContent as SheetContent,
|
|
8
|
-
DrawerHeader as SheetHeader,
|
|
9
|
-
DrawerFooter as SheetFooter,
|
|
10
|
-
DrawerTitle as SheetTitle,
|
|
11
|
-
DrawerDescription as SheetDescription,
|
|
12
|
-
drawerVariants as sheetVariants,
|
|
13
|
-
} from './drawer'
|
|
14
|
-
export type {
|
|
15
|
-
DrawerContentProps as SheetContentProps,
|
|
16
|
-
DrawerHeaderProps as SheetHeaderProps,
|
|
17
|
-
DrawerFooterProps as SheetFooterProps,
|
|
18
|
-
} from './drawer'
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* [WHO]: Sheet — compatibility alias for Drawer using shadcn-style naming.
|
|
3
|
-
* [FROM]: registry/basic/drawer.
|
|
4
|
-
* [TO]: sparkdesign package consumers; output of CLI `add sheet` when registered.
|
|
5
|
-
* [HERE]: registry/basic/sheet.tsx — Spark Design source; keep aligned with Drawer semantics.
|
|
6
|
-
*
|
|
7
|
-
* [PROTOCOL]:
|
|
8
|
-
* 1. Keep Sheet as a thin compatibility layer; Drawer remains the canonical semantic component.
|
|
9
|
-
* 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
|
|
10
|
-
* 3. Follow design tokens and explicit type exports.
|
|
11
|
-
*/
|
|
12
|
-
export { Drawer as Sheet, DrawerTrigger as SheetTrigger, DrawerClose as SheetClose, DrawerPortal as SheetPortal, DrawerOverlay as SheetOverlay, DrawerContent as SheetContent, DrawerHeader as SheetHeader, DrawerFooter as SheetFooter, DrawerTitle as SheetTitle, DrawerDescription as SheetDescription, drawerVariants as sheetVariants, } from './drawer';
|
|
13
|
-
export type { DrawerContentProps as SheetContentProps, DrawerHeaderProps as SheetHeaderProps, DrawerFooterProps as SheetFooterProps, } from './drawer';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* [WHO]: Public Sheet compatibility exports.
|
|
3
|
-
* [FROM]: registry/basic/sheet.
|
|
4
|
-
* [TO]: sparkdesign package consumers and Showcase demos.
|
|
5
|
-
* [HERE]: src/components/basic/Sheet/index.tsx — package-facing Sheet alias re-export.
|
|
6
|
-
*
|
|
7
|
-
* [PROTOCOL]:
|
|
8
|
-
* 1. Keep this P3 header in sync when the public contract changes.
|
|
9
|
-
* 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
|
|
10
|
-
* 3. Follow design tokens and explicit type exports.
|
|
11
|
-
*/
|
|
12
|
-
export { Sheet, SheetTrigger, SheetClose, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, sheetVariants, } from '../../../../registry/basic/sheet';
|
|
13
|
-
export type { SheetContentProps, SheetHeaderProps, SheetFooterProps, } from '../../../../registry/basic/sheet';
|