@catalystsoftware/ui 1.0.14 → 1.0.16
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/catalyst-ui/data/chat-data.tsx +336 -0
- package/dist/components/catalyst-ui/data/code-data.tsx +1 -74
- package/dist/components/catalyst-ui/data/core-data.tsx +679 -7
- package/dist/components/catalyst-ui/data/crm-data.tsx +2 -2
- package/dist/components/catalyst-ui/data/forms-data.tsx +5 -5
- package/dist/components/catalyst-ui/data/media-data.tsx +66 -3
- package/dist/components/catalyst-ui/data/overlay-data.tsx +5 -3
- package/dist/components/catalyst-ui/data/primitive-data.tsx +18 -128
- package/dist/components/catalyst-ui/data/sidebars-data.tsx +38 -38
- package/dist/components/catalyst-ui/data/tools-data.tsx +1 -1
- package/dist/components/catalyst-ui/data/utils-data.tsx +27 -9
- package/dist/components/catalyst-ui/marketing/sections/header.tsx +1 -0
- package/dist/components/catalyst-ui/overlays/sidebar-props.tsx +1 -1
- package/dist/components/catalyst-ui/primitives/alert.tsx +1 -1
- package/dist/components/catalyst-ui/tools/md-badge-builder.tsx +1 -1
- package/dist/components/catalyst-ui/tools/monaco-sidebar.tsx +935 -331
- package/dist/components/catalyst-ui/tools/monaco.tsx +66 -66
- package/dist/components/catalyst-ui/tools/snippets.tsx +844 -0
- package/dist/data/tailwind.config.js +1 -1
- package/dist/data/tailwind.config.ngin.ts +1 -1
- package/dist/index.js +83 -86
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ export const crmTools = [
|
|
|
11
11
|
tags: ["ui", "components", "interactive"],
|
|
12
12
|
features: ["Responsive", "TypeScript", "Accessible"],
|
|
13
13
|
dependencies: ["react", "lucide-react", "@remix-run", "@monaco-editor"],
|
|
14
|
-
basicusage: `
|
|
14
|
+
basicusage: `
|
|
15
15
|
<ScriptsEditor />`,
|
|
16
16
|
usage: null,
|
|
17
17
|
usagePath: null,
|
|
@@ -31,7 +31,7 @@ export const crmTools = [
|
|
|
31
31
|
tags: ["ui", "components", "interactive"],
|
|
32
32
|
features: ["Responsive", "TypeScript", "Accessible"],
|
|
33
33
|
dependencies: ["react", "lucide-react", "@remix-run"],
|
|
34
|
-
basicusage: `
|
|
34
|
+
basicusage: `
|
|
35
35
|
<ScriptsViewer />`,
|
|
36
36
|
usage: null,
|
|
37
37
|
usagePath: null,
|
|
@@ -1145,7 +1145,7 @@ export default function InputMaskDemo() {
|
|
|
1145
1145
|
source: null,
|
|
1146
1146
|
usagePath: "/components/catalyst-ui/components/input-text.tsx",
|
|
1147
1147
|
usage: `\n\n\nfunction FullExample() {\n const [value, setValue] = React.useState('');\n const [email, setEmail] = React.useState('');\n\n return (\n <div className=\"space-y-4 p-4\">\n {/* Basic Usage */}\n <div>\n <label className=\"block text-sm font-medium mb-2\">Basic Input</label>\n <InputText\n placeholder=\"Enter your name\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n\n {/* With All Props */}\n <div>\n <label className=\"block text-sm font-medium mb-2\">Email Input</label>\n <InputText\n type=\"email\"\n variant=\"filled\"\n size=\"lg\"\n placeholder=\"Enter your email\"\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n invalid={email && !email.includes('@')}\n disabled={false}\n className=\"w-full\"\n />\n {email && !email.includes('@') && (\n <p className=\"text-destructive text-sm mt-1\">Please enter a valid email</p>\n )}\n </div>\n\n {/* Different Sizes */}\n <div className=\"flex gap-2\">\n <InputText size=\"sm\" placeholder=\"Small\" />\n <InputText size=\"default\" placeholder=\"Default\" />\n <InputText size=\"lg\" placeholder=\"Large\" />\n </div>\n\n {/* States */}\n <div className=\"flex gap-2\">\n <InputText placeholder=\"Normal\" />\n <InputText disabled placeholder=\"Disabled\" />\n <InputText invalid placeholder=\"Invalid\" />\n </div>\n </div>\n );\n}`,
|
|
1148
|
-
premium:
|
|
1148
|
+
premium: false,
|
|
1149
1149
|
category: "Forms",
|
|
1150
1150
|
tags: ["ui", "components", "form", "input"],
|
|
1151
1151
|
features: ["Variants", "Sizes", "Validation", "Accessible"],
|
|
@@ -2273,8 +2273,8 @@ export function StepFormDemo() {
|
|
|
2273
2273
|
{
|
|
2274
2274
|
name: "Forms",
|
|
2275
2275
|
value: "form",
|
|
2276
|
-
importPath: "~/components/catalyst-ui/
|
|
2277
|
-
path: "/components/catalyst-ui/
|
|
2276
|
+
importPath: "~/components/catalyst-ui/components/form-layout/form",
|
|
2277
|
+
path: "/components/catalyst-ui/components/form.tsx",
|
|
2278
2278
|
premium: false,
|
|
2279
2279
|
source: null,
|
|
2280
2280
|
category: "Forms",
|
|
@@ -4615,10 +4615,10 @@ export const compsChoiceComps = [
|
|
|
4615
4615
|
{
|
|
4616
4616
|
name: "Toggle Class",
|
|
4617
4617
|
value: "toggle-class",
|
|
4618
|
-
importPath: "~/components/catalyst-ui/
|
|
4618
|
+
importPath: "~/components/catalyst-ui/components/toggle-class",
|
|
4619
4619
|
multiImport: null,
|
|
4620
4620
|
basicusage: `\n\n\nfunction BasicExample() {\n return (\n <div>\n <ToggleClass toggleClassName=\"hidden\">\n <button className=\"bg-blue-500 text-white px-4 py-2 rounded\">\n Toggle Element\n </button>\n </ToggleClass>\n <div className=\"hidden p-4 bg-gray-100 mt-2\">\n This element will be toggled\n </div>\n </div>\n );\n}`,
|
|
4621
|
-
path: "/components/catalyst-ui/
|
|
4621
|
+
path: "/components/catalyst-ui/components/toggle-class.tsx",
|
|
4622
4622
|
source: null,
|
|
4623
4623
|
usagePath: "/components/catalyst-ui/components/toggle-class.tsx",
|
|
4624
4624
|
usage: `\n\n\n\n\nfunction FullExample() {\n const customRef = useRef(null);\n \n return (\n <div className=\"space-y-6 p-4\">\n {/* Basic Toggle */}\n <div>\n <h3 className=\"font-medium mb-2\">Basic Toggle</h3>\n <ToggleClass toggleClassName=\"hidden\">\n <Button>Toggle Visibility</Button>\n </ToggleClass>\n <div className=\"hidden p-4 bg-gray-100 mt-2 rounded\">\n Toggle me with the button above\n </div>\n </div>\n\n {/* Enter/Leave Animation */}\n <div>\n <h3 className=\"font-medium mb-2\">Enter/Leave Animation</h3>\n <ToggleClass\n variant=\"enter-leave\"\n enterClassName=\"opacity-0 scale-95\"\n enterActiveClassName=\"transition-all duration-300\"\n enterToClassName=\"opacity-100 scale-100\"\n leaveClassName=\"opacity-100 scale-100\"\n leaveActiveClassName=\"transition-all duration-300\"\n leaveToClassName=\"opacity-0 scale-95\"\n hideOnOutsideClick\n >\n <Button>Animate Menu</Button>\n </ToggleClass>\n <div className=\"hidden p-4 bg-blue-100 mt-2 rounded\">\n This animates in and out with fade and scale\n </div>\n </div>\n\n {/* Custom Selector */}\n <div>\n <h3 className=\"font-medium mb-2\">Custom Selector</h3>\n <ToggleClass \n selector=\"@parent\" \n toggleClassName=\"bg-green-200 border-green-500\"\n >\n <Button>Toggle Parent Styling</Button>\n </ToggleClass>\n </div>\n\n {/* With External Ref */}\n <div>\n <h3 className=\"font-medium mb-2\">External Ref</h3>\n <Button ref={customRef}>\n External Ref Button\n </Button>\n <ToggleClass \n nodeRef={customRef} \n toggleClassName=\"hidden\"\n >\n <span></span>\n </ToggleClass>\n <div className=\"hidden p-4 bg-yellow-100 mt-2 rounded\">\n Controlled by external ref\n </div>\n </div>\n\n {/* Different Selectors */}\n <div className=\"space-y-2\">\n <h3 className=\"font-medium\">Selector Examples</h3>\n <ToggleClass selector=\"@next\">\n <Button size=\"sm\">Toggle Next (@next)</Button>\n </ToggleClass>\n <div className=\"hidden p-2 bg-gray-100\">Next sibling</div>\n \n <ToggleClass selector=\"@prev\">\n <Button size=\"sm\">Toggle Previous (@prev)</Button>\n </ToggleClass>\n \n <ToggleClass selector=\".custom-target\">\n <Button size=\"sm\">Toggle by Class</Button>\n </ToggleClass>\n <div className=\"custom-target hidden p-2 bg-purple-100\">Custom target</div>\n </div>\n </div>\n );\n}`,
|
|
@@ -500,10 +500,73 @@ export const componentsMedia = [
|
|
|
500
500
|
{
|
|
501
501
|
name: "Iframe",
|
|
502
502
|
value: "iframe",
|
|
503
|
-
importPath: "~/components/catalyst-ui/
|
|
503
|
+
importPath: "~/components/catalyst-ui/media/iframe",
|
|
504
504
|
multiImport: 'Iframe, iframeVariants',
|
|
505
|
-
path: "/components/catlyst-ui/
|
|
505
|
+
path: "/components/catlyst-ui/media/iframe.tsx",
|
|
506
506
|
premium: false,
|
|
507
|
+
source: `
|
|
508
|
+
|
|
509
|
+
|
|
510
|
+
|
|
511
|
+
|
|
512
|
+
const iframeVariants = cva(
|
|
513
|
+
"border-0 w-full transition-all duration-200",
|
|
514
|
+
{
|
|
515
|
+
variants: {
|
|
516
|
+
variant: {
|
|
517
|
+
default: "bg-background",
|
|
518
|
+
bordered: "border border-border rounded-md",
|
|
519
|
+
shadow: "shadow-md rounded-md",
|
|
520
|
+
elevated: "shadow-lg rounded-lg border border-border",
|
|
521
|
+
ghost: "shadow-none border-0"
|
|
522
|
+
},
|
|
523
|
+
size: {
|
|
524
|
+
xs: "h-48",
|
|
525
|
+
sm: "h-64",
|
|
526
|
+
md: "h-96",
|
|
527
|
+
lg: "h-[32rem]",
|
|
528
|
+
xl: "h-[40rem]",
|
|
529
|
+
full: "h-screen",
|
|
530
|
+
auto: "h-auto"
|
|
531
|
+
},
|
|
532
|
+
rounded: {
|
|
533
|
+
none: "rounded-none",
|
|
534
|
+
sm: "rounded-sm",
|
|
535
|
+
md: "rounded-md",
|
|
536
|
+
lg: "rounded-lg",
|
|
537
|
+
xl: "rounded-xl",
|
|
538
|
+
full: "rounded-full"
|
|
539
|
+
}
|
|
540
|
+
},
|
|
541
|
+
defaultVariants: {
|
|
542
|
+
variant: "default",
|
|
543
|
+
size: "md",
|
|
544
|
+
rounded: "md"
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
)
|
|
548
|
+
|
|
549
|
+
export interface IframeProps
|
|
550
|
+
extends React.IframeHTMLAttributes<HTMLIFrameElement>,
|
|
551
|
+
VariantProps<typeof iframeVariants> {
|
|
552
|
+
loading?: "lazy" | "eager"
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(
|
|
556
|
+
({ className, variant, size, rounded, loading = "lazy", ...props }, ref) => {
|
|
557
|
+
return (
|
|
558
|
+
<iframe
|
|
559
|
+
className={cn(iframeVariants({ variant, size, rounded }), className)}
|
|
560
|
+
loading={loading}
|
|
561
|
+
ref={ref}
|
|
562
|
+
{...props}
|
|
563
|
+
/>
|
|
564
|
+
)
|
|
565
|
+
}
|
|
566
|
+
)
|
|
567
|
+
Iframe.displayName = "Iframe"
|
|
568
|
+
|
|
569
|
+
export { Iframe, iframeVariants }`,
|
|
507
570
|
basicusage: `
|
|
508
571
|
<Iframe src="https://example.com" title="My iframe" />
|
|
509
572
|
`,
|
|
@@ -619,7 +682,7 @@ export const componentsMedia = [
|
|
|
619
682
|
loading="eager"
|
|
620
683
|
/>`,
|
|
621
684
|
usagePath: null,
|
|
622
|
-
category: "
|
|
685
|
+
category: "Media",
|
|
623
686
|
tags: ["ui", "components", "interactive"],
|
|
624
687
|
features: ["Responsive", "TypeScript", "Accessible"],
|
|
625
688
|
dependencies: ["@radix-ui/react-aspect-ratio"],
|
|
@@ -276,7 +276,7 @@ export function AnimatedModalDemo() {
|
|
|
276
276
|
</DSContent>
|
|
277
277
|
</DSRight>
|
|
278
278
|
</DSProvider>`,
|
|
279
|
-
path: "/components/catalyst-ui/
|
|
279
|
+
path: "/components/catalyst-ui/components/overlay/dual-sidebar.tsx",
|
|
280
280
|
source: null,
|
|
281
281
|
usagePath: null,
|
|
282
282
|
usage: `
|
|
@@ -1417,6 +1417,7 @@ export default function DSExample() {
|
|
|
1417
1417
|
"vaul"
|
|
1418
1418
|
],
|
|
1419
1419
|
props: {
|
|
1420
|
+
// PROVIDER & CORE LAYOUT
|
|
1420
1421
|
"DSProvider": [
|
|
1421
1422
|
{ name: "defaultOpenLeft", type: "boolean", default: "false", description: "Default open state of the sidebar." },
|
|
1422
1423
|
{ name: "defaultOpenRight", type: "boolean", default: "false", description: "Default open state of the sidebar." },
|
|
@@ -1874,7 +1875,7 @@ export default function DSExample() {
|
|
|
1874
1875
|
value: "sidebar",
|
|
1875
1876
|
importPath: "~/components/catalyst-ui",
|
|
1876
1877
|
multiImport: 'Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar',
|
|
1877
|
-
path: "/components/catalyst-ui/
|
|
1878
|
+
path: "/components/catalyst-ui/components/overlay/sidebar-original.tsx",
|
|
1878
1879
|
premium: false,
|
|
1879
1880
|
source: null,
|
|
1880
1881
|
usage: null,
|
|
@@ -1936,12 +1937,13 @@ const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar
|
|
|
1936
1937
|
Settings
|
|
1937
1938
|
</SidebarMenuAnchor>
|
|
1938
1939
|
`,
|
|
1939
|
-
usagePath: "/components/catalyst-ui/
|
|
1940
|
+
usagePath: "/components/catalyst-ui/components/overlay/sidebar-original.tsx",
|
|
1940
1941
|
category: "Overlay",
|
|
1941
1942
|
tags: ["ui", "components", "interactive"],
|
|
1942
1943
|
features: ["Responsive", "TypeScript", "Accessible"],
|
|
1943
1944
|
dependencies: ["@radix-ui/react-slot", "class-variance-authority"],
|
|
1944
1945
|
props: {
|
|
1946
|
+
// PROVIDER & CORE LAYOUT
|
|
1945
1947
|
"DSProvider": [
|
|
1946
1948
|
{ name: "defaultOpenLeft", type: "boolean", default: "false", description: "Default open state of the sidebar." },
|
|
1947
1949
|
{ name: "defaultOpenRight", type: "boolean", default: "false", description: "Default open state of the sidebar." },
|
|
@@ -456,7 +456,7 @@ const sampleTree = {
|
|
|
456
456
|
value: "item",
|
|
457
457
|
importPath: "~/components/catalyst-ui/primitives/item",
|
|
458
458
|
multiImport: "Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter",
|
|
459
|
-
path: "/components/
|
|
459
|
+
path: "/components/catlyst-ui/primitives/progreitemss.tsx",
|
|
460
460
|
premium: false,
|
|
461
461
|
category: "Primitives",
|
|
462
462
|
tags: ["ui", "components", "interactive"],
|
|
@@ -525,7 +525,7 @@ export function ItemDemo() {
|
|
|
525
525
|
value: "progress",
|
|
526
526
|
importPath: "~/components/catalyst-ui/primitives/progress",
|
|
527
527
|
multiImport: null,
|
|
528
|
-
path: "/components/
|
|
528
|
+
path: "/components/catlyst-ui/primitives/progress.tsx",
|
|
529
529
|
premium: false,
|
|
530
530
|
category: "Primitives",
|
|
531
531
|
tags: ["ui", "components", "interactive"],
|
|
@@ -562,7 +562,7 @@ export function ProgressDemo() {
|
|
|
562
562
|
value: "skeleton",
|
|
563
563
|
importPath: "~/components/catalyst-ui/primitives/skeleton",
|
|
564
564
|
multiImport: null,
|
|
565
|
-
path: "/components/
|
|
565
|
+
path: "/components/catlyst-ui/primitives/skeleton.tsx",
|
|
566
566
|
premium: false,
|
|
567
567
|
category: "Primitives",
|
|
568
568
|
tags: ["ui", "components", "interactive"],
|
|
@@ -597,7 +597,7 @@ export function SkeletonDemo() {
|
|
|
597
597
|
value: "pagination",
|
|
598
598
|
importPath: "~/components/catalyst-ui/primitives/pagination",
|
|
599
599
|
multiImport: 'Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationWithHrefs, type PaginationProps, type PaginationLinkProps',
|
|
600
|
-
path: "/components/
|
|
600
|
+
path: "/components/catlyst-ui/primitives/pagination.tsx",
|
|
601
601
|
premium: false,
|
|
602
602
|
source: `
|
|
603
603
|
|
|
@@ -1073,7 +1073,7 @@ export function SkeletonDemo() {
|
|
|
1073
1073
|
{
|
|
1074
1074
|
name: "Carousel",
|
|
1075
1075
|
value: "carousel",
|
|
1076
|
-
path: "/components/
|
|
1076
|
+
path: "/components/catlyst-ui/primitives/carousel.tsx",
|
|
1077
1077
|
importPath: "~/components/catalyst-ui/primitives/carousel",
|
|
1078
1078
|
premium: false,
|
|
1079
1079
|
source: null,
|
|
@@ -1304,7 +1304,7 @@ export function SkeletonDemo() {
|
|
|
1304
1304
|
value: "breadcrumb",
|
|
1305
1305
|
importPath: "~/components/catalyst-ui/primitives/breadcrumb",
|
|
1306
1306
|
multiImport: 'Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis',
|
|
1307
|
-
path: "/components/
|
|
1307
|
+
path: "/components/catlyst-ui/primitives/breadcrumb.tsx",
|
|
1308
1308
|
premium: false,
|
|
1309
1309
|
source: `
|
|
1310
1310
|
|
|
@@ -1645,7 +1645,7 @@ export function SkeletonDemo() {
|
|
|
1645
1645
|
value: "navigation-menu",
|
|
1646
1646
|
importPath: "~/components/catalyst-ui/primitives/navigation-menu",
|
|
1647
1647
|
multiImport: 'NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle',
|
|
1648
|
-
path: "/components/
|
|
1648
|
+
path: "/components/catlyst-ui/primitives/navigation-menu.tsx",
|
|
1649
1649
|
premium: false,
|
|
1650
1650
|
source: `
|
|
1651
1651
|
|
|
@@ -2004,7 +2004,7 @@ export function SkeletonDemo() {
|
|
|
2004
2004
|
value: "context-menu",
|
|
2005
2005
|
importPath: "~/components/catalyst-ui/core/navigation/context-menu",
|
|
2006
2006
|
multiImport: 'ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup',
|
|
2007
|
-
path: "/components/
|
|
2007
|
+
path: "/components/catlyst-ui/primitives/context-menu.tsx",
|
|
2008
2008
|
premium: false,
|
|
2009
2009
|
source: `
|
|
2010
2010
|
|
|
@@ -2206,7 +2206,7 @@ export function SkeletonDemo() {
|
|
|
2206
2206
|
value: "tabs",
|
|
2207
2207
|
importPath: "~/components/catalyst-ui/primitives/tabs",
|
|
2208
2208
|
multiImport: 'Tabs, TabsList, TabsTrigger, TabsContent',
|
|
2209
|
-
path: "/components/
|
|
2209
|
+
path: "/components/catlyst-ui/core/primitives/tabs.tsx",
|
|
2210
2210
|
premium: false,
|
|
2211
2211
|
source: null,
|
|
2212
2212
|
category: "Primitives",
|
|
@@ -2331,9 +2331,9 @@ export function SkeletonDemo() {
|
|
|
2331
2331
|
{
|
|
2332
2332
|
name: "For",
|
|
2333
2333
|
value: "for",
|
|
2334
|
-
importPath: "~/components/catalyst-ui/primitives/for",
|
|
2334
|
+
importPath: "~/components/catalyst-ui/primitives/panel/for",
|
|
2335
2335
|
multiImport: null,
|
|
2336
|
-
path: "/components/
|
|
2336
|
+
path: "/components/catlyst-ui/primitives/panel/for.tsx",
|
|
2337
2337
|
premium: false,
|
|
2338
2338
|
source: `
|
|
2339
2339
|
|
|
@@ -2721,7 +2721,7 @@ export function SkeletonDemo() {
|
|
|
2721
2721
|
name: "Slider",
|
|
2722
2722
|
value: "slider",
|
|
2723
2723
|
importPath: "~/components/catalyst-ui",
|
|
2724
|
-
path: "/components/catalyst-ui/primitives/slider.tsx",
|
|
2724
|
+
path: "/components/catalyst-ui/primitives-inputs/slider.tsx",
|
|
2725
2725
|
premium: false,
|
|
2726
2726
|
source: null,
|
|
2727
2727
|
category: "Primitives",
|
|
@@ -2944,116 +2944,6 @@ const handleChange = (newValue: number[]) => {
|
|
|
2944
2944
|
status: null,
|
|
2945
2945
|
lastUpdated: null
|
|
2946
2946
|
},
|
|
2947
|
-
{
|
|
2948
|
-
name: "KBD",
|
|
2949
|
-
value: "kbd",
|
|
2950
|
-
importPath: "~/components/catalyst-ui/primitives/kbd",
|
|
2951
|
-
multiImport: null,
|
|
2952
|
-
basicusage: `
|
|
2953
|
-
<KBD>Ctrl</KBD>
|
|
2954
|
-
|
|
2955
|
-
<KBD
|
|
2956
|
-
variant="default"
|
|
2957
|
-
size="default"
|
|
2958
|
-
className=""
|
|
2959
|
-
>
|
|
2960
|
-
Ctrl
|
|
2961
|
-
</KBD>`,
|
|
2962
|
-
path: "/components/catalyst-ui/primitives/kbd.tsx",
|
|
2963
|
-
source: null,
|
|
2964
|
-
usagePath: "/components/catalyst-ui/primitives/kbd.tsx",
|
|
2965
|
-
usage: null,
|
|
2966
|
-
premium: false,
|
|
2967
|
-
category: "Primitive",
|
|
2968
|
-
tags: ["ui", "typography", "keyboard", "shortcut"],
|
|
2969
|
-
features: ["Responsive", "TypeScript", "Accessible", "Variants"],
|
|
2970
|
-
dependencies: ["react", "class-variance-authority"],
|
|
2971
|
-
props: {
|
|
2972
|
-
"KBD": [
|
|
2973
|
-
{ name: "className", type: "string", default: "null" },
|
|
2974
|
-
{ name: "variant", type: "default | outline", default: "default" },
|
|
2975
|
-
{ name: "size", type: "default | sm | lg", default: "default" },
|
|
2976
|
-
],
|
|
2977
|
-
},
|
|
2978
|
-
desc: null,
|
|
2979
|
-
status: null,
|
|
2980
|
-
lastUpdated: null
|
|
2981
|
-
},
|
|
2982
|
-
{
|
|
2983
|
-
name: "Item",
|
|
2984
|
-
value: "item",
|
|
2985
|
-
importPath: "~/components/catalyst-ui/primitives/item",
|
|
2986
|
-
multiImport: null,
|
|
2987
|
-
basicusage: `
|
|
2988
|
-
<Item>Profile</Item>
|
|
2989
|
-
|
|
2990
|
-
<Item
|
|
2991
|
-
variant="default"
|
|
2992
|
-
inset={false}
|
|
2993
|
-
className=""
|
|
2994
|
-
>
|
|
2995
|
-
Profile
|
|
2996
|
-
</Item>`,
|
|
2997
|
-
path: "/components/catalyst-ui/primitives/item.tsx",
|
|
2998
|
-
source: null,
|
|
2999
|
-
usagePath: "/components/catalyst-ui/primitives/item.tsx",
|
|
3000
|
-
usage: null,
|
|
3001
|
-
premium: false,
|
|
3002
|
-
category: "Primitive",
|
|
3003
|
-
tags: ["ui", "menu", "list", "item"],
|
|
3004
|
-
features: ["Responsive", "TypeScript", "Accessible", "Variants"],
|
|
3005
|
-
dependencies: ["react", "class-variance-authority"],
|
|
3006
|
-
props: {
|
|
3007
|
-
"Item": [
|
|
3008
|
-
{ name: "className", type: "string", default: "null" },
|
|
3009
|
-
{ name: "variant", type: "default | destructive", default: "default" },
|
|
3010
|
-
{ name: "inset", type: "boolean", default: "false" },
|
|
3011
|
-
],
|
|
3012
|
-
},
|
|
3013
|
-
desc: null,
|
|
3014
|
-
status: null,
|
|
3015
|
-
lastUpdated: null
|
|
3016
|
-
},
|
|
3017
|
-
{
|
|
3018
|
-
name: "Empty",
|
|
3019
|
-
value: "empty",
|
|
3020
|
-
importPath: "~/components/catalyst-ui/primitives/empty",
|
|
3021
|
-
multiImport: null,
|
|
3022
|
-
basicusage: `
|
|
3023
|
-
<Empty />
|
|
3024
|
-
|
|
3025
|
-
<Empty
|
|
3026
|
-
size="md"
|
|
3027
|
-
icon={<Inbox className="h-6 w-6" />}
|
|
3028
|
-
title="No data"
|
|
3029
|
-
description=""
|
|
3030
|
-
className=""
|
|
3031
|
-
>
|
|
3032
|
-
Content
|
|
3033
|
-
</Empty>`,
|
|
3034
|
-
path: "/components/catalyst-ui/primitives/empty.tsx",
|
|
3035
|
-
source: null,
|
|
3036
|
-
usagePath: "/components/catalyst-ui/primitives/empty.tsx",
|
|
3037
|
-
usage: null,
|
|
3038
|
-
premium: false,
|
|
3039
|
-
category: "Primitive",
|
|
3040
|
-
tags: ["ui", "components", "feedback", "empty-state"],
|
|
3041
|
-
features: ["Responsive", "TypeScript", "Accessible", "Customizable"],
|
|
3042
|
-
dependencies: ["lucide-react", "react", "class-variance-authority"],
|
|
3043
|
-
props: {
|
|
3044
|
-
"Empty": [
|
|
3045
|
-
{ name: "className", type: "string", default: "null" },
|
|
3046
|
-
{ name: "size", type: "sm | md | lg", default: "md" },
|
|
3047
|
-
{ name: "icon", type: "React.ReactNode", default: "null" },
|
|
3048
|
-
{ name: "title", type: "string", default: "No data" },
|
|
3049
|
-
{ name: "description", type: "string", default: "null" },
|
|
3050
|
-
{ name: "children", type: "React.ReactNode", default: "null" },
|
|
3051
|
-
],
|
|
3052
|
-
},
|
|
3053
|
-
desc: null,
|
|
3054
|
-
status: null,
|
|
3055
|
-
lastUpdated: null
|
|
3056
|
-
},
|
|
3057
2947
|
{
|
|
3058
2948
|
name: "Checkbox",
|
|
3059
2949
|
value: "checkbox",
|
|
@@ -4216,7 +4106,7 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
|
4216
4106
|
value: "alert-dialog",
|
|
4217
4107
|
importPath: "~/components/catalyst-ui/primitives/alert-dialog",
|
|
4218
4108
|
multiImport: 'AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel',
|
|
4219
|
-
path: "/components/
|
|
4109
|
+
path: "/components/catlyst-ui/primitives/alert-dialog.tsx",
|
|
4220
4110
|
premium: false,
|
|
4221
4111
|
source: `
|
|
4222
4112
|
|
|
@@ -4390,7 +4280,7 @@ export {
|
|
|
4390
4280
|
value: "dialog",
|
|
4391
4281
|
importPath: "~/components/catalyst-ui/primitives/dialog",
|
|
4392
4282
|
multiImport: 'Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger',
|
|
4393
|
-
path: "/components/
|
|
4283
|
+
path: "/components/catlyst-ui/primitives/dialog.tsx",
|
|
4394
4284
|
premium: false,
|
|
4395
4285
|
source: null,
|
|
4396
4286
|
category: "Primitives",
|
|
@@ -4557,7 +4447,7 @@ export function DialogDemo() {
|
|
|
4557
4447
|
value: "hover-card",
|
|
4558
4448
|
importPath: "~/components/catalyst-ui/primitives/hover-card",
|
|
4559
4449
|
multiImport: 'HoverCard, HoverCardTrigger, HoverCardContent',
|
|
4560
|
-
path: "/components/
|
|
4450
|
+
path: "/components/catlyst-ui/primitives/hover-card.tsx",
|
|
4561
4451
|
premium: false,
|
|
4562
4452
|
source: `
|
|
4563
4453
|
|
|
@@ -4648,7 +4538,7 @@ export function HoverCardDemo() {
|
|
|
4648
4538
|
value: "popover",
|
|
4649
4539
|
importPath: "~/components/catalyst-ui/primitives/popover",
|
|
4650
4540
|
multiImport: 'Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverHeader, PopoverFooter, PopoverTitle, PopoverDescription, PopoverAnchor',
|
|
4651
|
-
path: "/components/
|
|
4541
|
+
path: "/components/catlyst-ui/primitives/popover.tsx",
|
|
4652
4542
|
premium: false,
|
|
4653
4543
|
source: `
|
|
4654
4544
|
|
|
@@ -4903,7 +4793,7 @@ export function NotificationPopoverExample() {
|
|
|
4903
4793
|
value: "tooltip",
|
|
4904
4794
|
importPath: "~/components/catalyst-ui/primitives/tooltip",
|
|
4905
4795
|
multiImport: 'TooltipProvider, Tooltip, TooltipTrigger, TooltipContent',
|
|
4906
|
-
path: "/components/
|
|
4796
|
+
path: "/components/catlyst-ui/primitives/tooltip.tsx",
|
|
4907
4797
|
premium: false,
|
|
4908
4798
|
source: `
|
|
4909
4799
|
|
|
@@ -4966,7 +4856,7 @@ export {
|
|
|
4966
4856
|
value: "sheet",
|
|
4967
4857
|
importPath: "~/components/catalyst-ui/primitives/sheet",
|
|
4968
4858
|
multiImport: 'Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, type SheetContentProps',
|
|
4969
|
-
path: "/components/
|
|
4859
|
+
path: "/components/catlyst-ui/primitives/sheet.tsx",
|
|
4970
4860
|
premium: false,
|
|
4971
4861
|
source: `
|
|
4972
4862
|
|