@catalystsoftware/ui 1.0.14 → 1.0.16

package/dist/components/catalyst-ui/data/core-data.tsx

@@ -1467,6 +1467,46 @@ export const coreFeedback = [
         desc: null,
         customize: null
     },
+    {
+        name: "Empty",
+        value: "empty",
+        importPath: "~/components/catalyst-ui/core/feedback/empty",
+        multiImport: null,
+        basicusage: `
+<Empty />
+
+<Empty 
+  size="md"
+  icon={<Inbox className="h-6 w-6" />}
+  title="No data"
+  description=""
+  className=""
+>
+  Content
+</Empty>`,
+        path: "/components/catalyst-ui/core/feedback/empty.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/core/feedback/empty.tsx",
+        usage: null,
+        premium: false,
+        category: "Core: Feedback",
+        tags: ["ui", "components", "feedback", "empty-state"],
+        features: ["Responsive", "TypeScript", "Accessible", "Customizable"],
+        dependencies: ["lucide-react", "react", "class-variance-authority"],
+        props: {
+            "Empty": [
+                { name: "className", type: "string", default: "null" },
+                { name: "size", type: "sm | md | lg", default: "md" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+                { name: "title", type: "string", default: "No data" },
+                { name: "description", type: "string", default: "null" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
     {
         name: "Insufficient Permissions",
         value: "insufficient-permissions",
@@ -1977,6 +2017,30 @@ if (!user) {
         status: null,
         lastUpdated: null
     },
+    {
+        name: "notification",
+        value: "notification",
+        importPath: "~/components/catalyst-ui/core/feedback/notification",
+        multiImport: null,
+        basicusage: null,
+        path: "/components/catalyst-ui/core/feedback/notification.tsx",
+        premium: false,
+        source: null,
+        usage: null,
+        usagePath: null,
+        category: "Core: Feedback",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-aspect-ratio"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+            { name: "size", type: "sm | md | lg | xl", default: "md" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
     {
         name: "error",
         value: "error",
@@ -4774,7 +4838,9 @@ export const componentsNavigation = [
   />
 </Toolbar>`,
         path: "/components/catalyst-ui/core/navigation/toolbar.tsx",
+        source: null,
         usagePath: "/components/catalyst-ui/core/navigation/toolbar.tsx",
+        usage: null,
         premium: true,
         category: "Core: Navigation",
         tags: ["ui", "components", "interactive", "toolbar", "editor", "actions"],
@@ -4860,6 +4926,244 @@ export const componentsNavigation = [
         multiImport: null,
         path: "/components/catlyst-ui/core/navigation/fab.tsx",
         premium: true,
+        source: `
+
+
+
+
+
+
+export interface FABItem {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  className?: string;
+}
+
+export interface FABProps {
+  icon?: React.ReactNode;
+  label?: string;
+  items?: FABItem[];
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  variant?: "default" | "primary" | "secondary" | "outline";
+  size?: "sm" | "md" | "lg";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+export function FAB({
+  icon = <Plus className="h-5 w-5" />,
+  label,
+  items = [],
+  position = "bottom-right",
+  variant = "primary",
+  size = "md",
+  open = false,
+  onOpenChange,
+  className,
+  ...props
+}: FABProps) {
+  const sizeClasses = {
+    sm: "h-10 w-10",
+    md: "h-12 w-12",
+    lg: "h-14 w-14"
+  };
+
+  const positionClasses = {
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "bottom-right": "bottom-4 right-4"
+  };
+
+  const variantClasses = {
+    default: "bg-background text-foreground border border-border",
+    primary: "bg-primary text-primary-foreground",
+    secondary: "bg-secondary text-secondary-foreground",
+    outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+  };
+
+  return (
+    <Box className={cn("fixed z-50", positionClasses[position], className)}>
+      <Box className="flex flex-col items-center gap-2">
+        {open && items.length > 0 && (
+          <Box className="flex flex-col-reverse gap-2 mb-2">
+            {items.map((item, index) => (
+              <Button
+                key={index}
+                variant="outline"
+                size="sm"
+                className={cn(
+                  "gap-2 animate-in fade-in-0 zoom-in-95",
+                  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+                  item.className
+                )}
+                onClick={item.onClick}
+              >
+                {item.icon}
+                {item.label}
+              </Button>
+            ))}
+          </Box>
+        )}
+        
+        <Button
+          className={cn(
+            "rounded-full shadow-lg transition-all duration-200",
+            sizeClasses[size],
+            variantClasses[variant],
+            open && "rotate-45"
+          )}
+          onClick={() => onOpenChange?.(!open)}
+          {...props}
+        >
+          {icon}
+          {label && <Text className="sr-only">{label}</Text>}
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+export function FABDemo() {
+  const fabItems: FABItem[] = [
+    {
+      icon: <MessageCircle className="h-4 w-4" />,
+      label: "Message",
+      onClick: () => console.log("Message clicked")
+    },
+    {
+      icon: <Share className="h-4 w-4" />,
+      label: "Share",
+      onClick: () => console.log("Share clicked")
+    },
+    {
+      icon: <Heart className="h-4 w-4" />,
+      label: "Like",
+      onClick: () => console.log("Like clicked")
+    },
+    {
+      icon: <Upload className="h-4 w-4" />,
+      label: "Upload",
+      onClick: () => console.log("Upload clicked")
+    }
+  ];
+
+  return (
+    <Box className="relative h-64 border border-border rounded-lg bg-muted/50">
+      <Text className="text-lg font-semibold p-4">FAB Demo</Text>
+      <Text className="text-sm text-muted-foreground px-4">
+        Click the floating action button to see the menu items
+      </Text>
+      
+      <FAB
+        icon={<Plus className="h-5 w-5" />}
+        items={fabItems}
+        position="bottom-right"
+        variant="primary"
+        className="relative"
+      />
+    </Box>
+  );
+}
+
+export function FABUsage() {
+  const handleAction = (action: string) => {
+    console.log('FAB action:');
+  };
+
+  const socialItems: FABItem[] = [
+    {
+      icon: <MessageCircle className="h-4 w-4" />,
+      label: "Chat",
+      onClick: () => handleAction("chat")
+    },
+    {
+      icon: <Share className="h-4 w-4" />,
+      label: "Share",
+      onClick: () => handleAction("share")
+    }
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <Text className="font-medium mb-4">Primary FAB with Menu</Text>
+        <Box className="relative h-32 border border-border rounded-lg p-4">
+          <FAB
+            icon={<Plus className="h-5 w-5" />}
+            items={socialItems}
+            position="bottom-right"
+            variant="primary"
+          />
+        </Box>
+      </div>
+
+      <div>
+        <Text className="font-medium mb-4">Secondary FAB</Text>
+        <Box className="relative h-32 border border-border rounded-lg p-4">
+          <FAB
+            icon={<MessageCircle className="h-5 w-5" />}
+            label="Message"
+            position="bottom-left"
+            variant="secondary"
+          />
+        </Box>
+      </div>
+
+      <div>
+        <Text className="font-medium mb-4">Outline FAB</Text>
+        <Box className="relative h-32 border border-border rounded-lg p-4">
+          <FAB
+            icon={<Share className="h-5 w-5" />}
+            label="Share"
+            position="top-right"
+            variant="outline"
+          />
+        </Box>
+      </div>
+
+      <div>
+        <Text className="font-medium mb-4">Different Sizes</Text>
+        <Box className="relative h-32 border border-border rounded-lg p-4 flex gap-4">
+          <FAB
+            icon={<Plus className="h-3 w-3" />}
+            size="sm"
+            position="top-left"
+            variant="primary"
+          />
+          <FAB
+            icon={<Plus className="h-4 w-4" />}
+            size="md"
+            position="top-left"
+            variant="primary"
+            className="left-16"
+          />
+          <FAB
+            icon={<Plus className="h-5 w-5" />}
+            size="lg"
+            position="top-left"
+            variant="primary"
+            className="left-32"
+          />
+        </Box>
+      </div>
+
+      <div>
+        <Text className="font-medium mb-4">Simple FAB without Menu</Text>
+        <Box className="relative h-32 border border-border rounded-lg p-4">
+          <FAB
+            icon={<Upload className="h-5 w-5" />}
+            label="Upload"
+            position="bottom-right"
+            variant="primary"
+          />
+        </Box>
+      </div>
+    </div>
+  );
+}`,
         category: "Core: Navigation",
         tags: ["ui", "components", "interactive"],
         features: ["Responsive", "TypeScript", "Accessible"],
@@ -4894,6 +5198,85 @@ export const componentsNavigation = [
         importPath: "~/components/catalyst-ui/core/navigation/action-bar",
         multiImport: "ActionBar, ActionBarContent, ActionBarDescription",
         path: "/components/catlyst-ui/core/navigation/action-bar.tsx",
+        source: `
+
+
+
+
+
+export interface ActionBarProps {
+  children: React.ReactNode;
+  open?: boolean;
+  onClose?: () => void;
+  position?: "bottom" | "top";
+  variant?: "solid" | "subtle";
+  className?: string;
+}
+
+export function ActionBar({
+  children,
+  open = true,
+  onClose,
+  position = "bottom",
+  variant = "solid",
+  className,
+}: ActionBarProps) {
+  if (!open) return null;
+
+  return (
+  <div
+    className={cn(
+    "fixed left-0 right-0 z-50 flex items-center justify-between p-4 transition-all duration-300",
+    position === "bottom" ? "bottom-0" : "top-0",
+    variant === "solid"
+      ? "bg-background border-t border-border shadow-lg"
+      : "bg-background/80 backdrop-blur-sm border-t border-border/50",
+    className
+    )}
+  >
+    <div className="flex-1 flex items-center justify-between max-w-7xl mx-auto">
+    <div className="flex-1">{children}</div>
+    {onClose && (
+      <Button
+      variant="ghost"
+      size="icon"
+      onClick={onClose}
+      className="ml-4"
+      >
+      <X className="h-4 w-4" />
+      </Button>
+    )}
+    </div>
+  </div>
+  );
+}
+
+export function ActionBarContent({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+  <div className={cn("flex items-center space-x-4", className)}>
+    {children}
+  </div>
+  );
+}
+
+export function ActionBarDescription({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+  <p className={cn("text-sm text-foreground/80", className)}>{children}</p>
+  );
+}
+`,
         usagePath: null,
         basicusage: `
   <Button onClick={() => setIsActionBarOpen(true)}>
@@ -5209,6 +5592,41 @@ function AffixUsage() {
         status: null,
         lastUpdated: null
     },
+    {
+        name: "KBD",
+        value: "kbd",
+        importPath: "~/components/catalyst-ui/components/ui/kbd",
+        multiImport: null,
+        basicusage: `
+<KBD>Ctrl</KBD>
+
+<KBD 
+  variant="default"
+  size="default"
+  className=""
+>
+  Ctrl
+</KBD>`,
+        path: "/components/catalyst-ui/components/ui/kbd.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/components/ui/kbd.tsx",
+        usage: null,
+        premium: false,
+        category: "Core: Navigation",
+        tags: ["ui", "typography", "keyboard", "shortcut"],
+        features: ["Responsive", "TypeScript", "Accessible", "Variants"],
+        dependencies: ["react", "class-variance-authority"],
+        props: {
+            "KBD": [
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | outline", default: "default" },
+                { name: "size", type: "default | sm | lg", default: "default" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
     {
         name: "tab-menu",
         value: "tab-menu",
@@ -7409,7 +7827,226 @@ nav="navlink"
         importPath: "~/components/catalyst-ui/core/navigation/menubar",
         multiImport: 'Menubar,  MenubarContent,  MenubarItem,  MenubarMenu,  MenubarSeparator,  MenubarShortcut,  MenubarTrigger, MenubarPortal, MenubarGroup, MenubarLabel, MenubarCheckboxItem, MenubarRadioItem, MenubarRadioGroup, MenubarSub, MenubarSubTrigger, MenubarSubContent',
         path: "/components/catlyst-ui/core/navigation/menubar.tsx",
-        premium: true,
+        premium: false,
+        source: `
+
+
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+  ref={ref}
+  className={cn(
+    "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+    className
+  )}
+  {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+  ref={ref}
+  className={cn(
+    "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+    className
+  )}
+  {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+  ref={ref}
+  className={cn(
+    "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+  >
+  {children}
+  <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+  ref={ref}
+  className={cn(
+    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    className
+  )}
+  {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+  { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+  ref
+  ) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+    ref={ref}
+    align={align}
+    alignOffset={alignOffset}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+    />
+  </MenubarPrimitive.Portal>
+  )
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+  inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    className
+  )}
+  checked={checked}
+  {...props}
+  >
+  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <MenubarPrimitive.ItemIndicator>
+    <CheckIcon className="h-4 w-4" />
+    </MenubarPrimitive.ItemIndicator>
+  </span>
+  {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    className
+  )}
+  {...props}
+  >
+  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <MenubarPrimitive.ItemIndicator>
+    <Circle className="h-2 w-2 fill-current" />
+    </MenubarPrimitive.ItemIndicator>
+  </span>
+  {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+  inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+  ref={ref}
+  className={cn(
+    "px-2 py-1.5 text-sm font-semibold",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+  ref={ref}
+  className={cn("-mx-1 my-1 h-px bg-muted", className)}
+  {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+  <span
+    className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+    {...props}
+  />
+  );
+};
+MenubarShortcut.displayName = "MenubarShortcut";
+
+export {
+    Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarShortcut,
+}		`,
         category: "Core: Navigation",
         tags: ["ui", "components", "interactive"],
         features: ["Responsive", "TypeScript", "Accessible"],
@@ -13524,13 +14161,13 @@ function ArrowDownIcon(props: React.SVGProps<SVGSVGElement>) {
     {
         name: "order list",
         value: "order-list",
-        importPath: "~/components/catalyst-ui/core/data-display/order-list",
-        path: "/components/catalyst-ui/core/data-display/order-list.tsx",
+        importPath: "~/components/catalyst-ui/components/list-management/order-list",
+        path: "/components/catalyst-ui/components/list-management/order-list.tsx",
         premium: true,
         source: null,
         usage: null,
         usagePath: null,
-        category: "Core: Data Display",
+        category: "Forms",
         tags: ["ui", "components", "interactive"],
         features: ["Responsive", "TypeScript", "Accessible"],
         dependencies: ["@radix-ui/react-aspect-ratio"],
@@ -13546,12 +14183,12 @@ function ArrowDownIcon(props: React.SVGProps<SVGSVGElement>) {
     {
         name: "Transfer List",
         value: "transfer-list",
-        importPath: "~/components/catalyst-ui/core/data-display/transfer-list",
+        importPath: "~/components/catalyst-ui/components/list-management/transfer-list",
         multiImport: null,
-        path: "/components/catalyst-ui/core/data-display/transfer-list.tsx",
+        path: "/components/catalyst-ui/components/list-management/transfer-list.tsx",
         premium: true,
         source: null,
-        category: "Core: Data Display",
+        category: "Forms",
         tags: ["ui", "components", "interactive"],
         features: ["Responsive", "TypeScript", "Accessible"],
         dependencies: ["react", "lucide-react"],
@@ -14106,6 +14743,41 @@ export const coreLists = [
         status: null,
         lastUpdated: null
     },
+    {
+        name: "Item",
+        value: "item",
+        importPath: "~/components/catalyst-ui/core/lists/item",
+        multiImport: null,
+        basicusage: `
+  <Item>Profile</Item>
+  
+  <Item 
+    variant="default"
+    inset={false}
+    className=""
+  >
+    Profile
+  </Item>`,
+        path: "/components/catalyst-ui/core/lists/item.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/core/lists/item.tsx",
+        usage: null,
+        premium: false,
+        category: "Core: Lists",
+        tags: ["ui", "menu", "list", "item"],
+        features: ["Responsive", "TypeScript", "Accessible", "Variants"],
+        dependencies: ["react", "class-variance-authority"],
+        props: {
+            "Item": [
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | destructive", default: "default" },
+                { name: "inset", type: "boolean", default: "false" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
     {
         name: "Rail",
         value: "rail",