@djangocfg/ui-core 2.1.120 → 2.1.123

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.
Files changed (55) hide show
  1. package/package.json +8 -5
  2. package/src/components/accordion.story.tsx +110 -0
  3. package/src/components/alert-dialog.story.tsx +104 -0
  4. package/src/components/alert.story.tsx +77 -0
  5. package/src/components/aspect-ratio.story.tsx +94 -0
  6. package/src/components/avatar.story.tsx +115 -0
  7. package/src/components/badge.story.tsx +56 -0
  8. package/src/components/button-download.story.tsx +112 -0
  9. package/src/components/button-group.story.tsx +79 -0
  10. package/src/components/button.story.tsx +116 -0
  11. package/src/components/calendar.story.tsx +126 -0
  12. package/src/components/card.story.tsx +105 -0
  13. package/src/components/carousel.story.tsx +122 -0
  14. package/src/components/carousel.tsx +2 -2
  15. package/src/components/checkbox.story.tsx +89 -0
  16. package/src/components/collapsible.story.tsx +133 -0
  17. package/src/components/combobox.story.tsx +145 -0
  18. package/src/components/command.story.tsx +121 -0
  19. package/src/components/context-menu.story.tsx +125 -0
  20. package/src/components/copy.story.tsx +77 -0
  21. package/src/components/dialog.story.tsx +137 -0
  22. package/src/components/drawer.story.tsx +131 -0
  23. package/src/components/dropdown-menu.story.tsx +208 -0
  24. package/src/components/empty.story.tsx +115 -0
  25. package/src/components/hover-card.story.tsx +102 -0
  26. package/src/components/image-with-fallback.story.tsx +105 -0
  27. package/src/components/input-group.story.tsx +119 -0
  28. package/src/components/input-otp.story.tsx +105 -0
  29. package/src/components/input.story.tsx +77 -0
  30. package/src/components/kbd.story.tsx +113 -0
  31. package/src/components/label.story.tsx +52 -0
  32. package/src/components/menubar.story.tsx +152 -0
  33. package/src/components/multi-select.story.tsx +122 -0
  34. package/src/components/navigation-menu.story.tsx +154 -0
  35. package/src/components/popover.story.tsx +127 -0
  36. package/src/components/preloader.story.tsx +86 -0
  37. package/src/components/progress.story.tsx +97 -0
  38. package/src/components/radio-group.story.tsx +113 -0
  39. package/src/components/resizable.story.tsx +119 -0
  40. package/src/components/responsive-sheet.story.tsx +117 -0
  41. package/src/components/scroll-area.story.tsx +112 -0
  42. package/src/components/select.story.tsx +112 -0
  43. package/src/components/separator.story.tsx +69 -0
  44. package/src/components/sheet.story.tsx +148 -0
  45. package/src/components/skeleton.story.tsx +101 -0
  46. package/src/components/slider.story.tsx +113 -0
  47. package/src/components/spinner.story.tsx +66 -0
  48. package/src/components/switch.story.tsx +98 -0
  49. package/src/components/table.story.tsx +148 -0
  50. package/src/components/tabs.story.tsx +98 -0
  51. package/src/components/tabs.tsx +1 -1
  52. package/src/components/textarea.story.tsx +94 -0
  53. package/src/components/toggle-group.story.tsx +118 -0
  54. package/src/components/toggle.story.tsx +104 -0
  55. package/src/components/tooltip.story.tsx +139 -0
package/src/components/tooltip.story.tsx ADDED
@@ -0,0 +1,139 @@
1
+ import { defineStory, useSelect } from '@djangocfg/playground';
2
+ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
3
+ import { Button } from './button';
4
+ import { Plus, Settings, HelpCircle } from 'lucide-react';
5
+
6
+ export default defineStory({
7
+ title: 'Core/Tooltip',
8
+ component: Tooltip,
9
+ description: 'Tooltip for showing additional information on hover.',
10
+ });
11
+
12
+ export const Interactive = () => {
13
+ const [side] = useSelect('side', {
14
+ options: ['top', 'right', 'bottom', 'left'] as const,
15
+ defaultValue: 'top',
16
+ label: 'Side',
17
+ description: 'Tooltip position',
18
+ });
19
+
20
+ return (
21
+ <div className="flex justify-center p-20">
22
+ <TooltipProvider>
23
+ <Tooltip>
24
+ <TooltipTrigger asChild>
25
+ <Button variant="outline">Hover me</Button>
26
+ </TooltipTrigger>
27
+ <TooltipContent side={side}>
28
+ <p>This is a tooltip</p>
29
+ </TooltipContent>
30
+ </Tooltip>
31
+ </TooltipProvider>
32
+ </div>
33
+ );
34
+ };
35
+
36
+ export const Default = () => (
37
+ <TooltipProvider>
38
+ <Tooltip>
39
+ <TooltipTrigger asChild>
40
+ <Button variant="outline">Hover me</Button>
41
+ </TooltipTrigger>
42
+ <TooltipContent>
43
+ <p>Add to library</p>
44
+ </TooltipContent>
45
+ </Tooltip>
46
+ </TooltipProvider>
47
+ );
48
+
49
+ export const Positions = () => (
50
+ <TooltipProvider>
51
+ <div className="flex gap-4 p-10">
52
+ <Tooltip>
53
+ <TooltipTrigger asChild>
54
+ <Button variant="outline">Top</Button>
55
+ </TooltipTrigger>
56
+ <TooltipContent side="top">
57
+ <p>Top tooltip</p>
58
+ </TooltipContent>
59
+ </Tooltip>
60
+ <Tooltip>
61
+ <TooltipTrigger asChild>
62
+ <Button variant="outline">Right</Button>
63
+ </TooltipTrigger>
64
+ <TooltipContent side="right">
65
+ <p>Right tooltip</p>
66
+ </TooltipContent>
67
+ </Tooltip>
68
+ <Tooltip>
69
+ <TooltipTrigger asChild>
70
+ <Button variant="outline">Bottom</Button>
71
+ </TooltipTrigger>
72
+ <TooltipContent side="bottom">
73
+ <p>Bottom tooltip</p>
74
+ </TooltipContent>
75
+ </Tooltip>
76
+ <Tooltip>
77
+ <TooltipTrigger asChild>
78
+ <Button variant="outline">Left</Button>
79
+ </TooltipTrigger>
80
+ <TooltipContent side="left">
81
+ <p>Left tooltip</p>
82
+ </TooltipContent>
83
+ </Tooltip>
84
+ </div>
85
+ </TooltipProvider>
86
+ );
87
+
88
+ export const WithIcons = () => (
89
+ <TooltipProvider>
90
+ <div className="flex gap-2">
91
+ <Tooltip>
92
+ <TooltipTrigger asChild>
93
+ <Button size="icon" variant="outline">
94
+ <Plus className="h-4 w-4" />
95
+ </Button>
96
+ </TooltipTrigger>
97
+ <TooltipContent>
98
+ <p>Add new item</p>
99
+ </TooltipContent>
100
+ </Tooltip>
101
+ <Tooltip>
102
+ <TooltipTrigger asChild>
103
+ <Button size="icon" variant="outline">
104
+ <Settings className="h-4 w-4" />
105
+ </Button>
106
+ </TooltipTrigger>
107
+ <TooltipContent>
108
+ <p>Settings</p>
109
+ </TooltipContent>
110
+ </Tooltip>
111
+ <Tooltip>
112
+ <TooltipTrigger asChild>
113
+ <Button size="icon" variant="outline">
114
+ <HelpCircle className="h-4 w-4" />
115
+ </Button>
116
+ </TooltipTrigger>
117
+ <TooltipContent>
118
+ <p>Help & Support</p>
119
+ </TooltipContent>
120
+ </Tooltip>
121
+ </div>
122
+ </TooltipProvider>
123
+ );
124
+
125
+ export const WithShortcut = () => (
126
+ <TooltipProvider>
127
+ <Tooltip>
128
+ <TooltipTrigger asChild>
129
+ <Button variant="outline">Save</Button>
130
+ </TooltipTrigger>
131
+ <TooltipContent className="flex items-center gap-2">
132
+ <span>Save document</span>
133
+ <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
134
+ <span className="text-xs">⌘</span>S
135
+ </kbd>
136
+ </TooltipContent>
137
+ </Tooltip>
138
+ </TooltipProvider>
139
+ );