@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/primitives/tabs.tsx

@@ -0,0 +1,335 @@
+import React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '~/components/catalyst-ui'
+
+interface TabsProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,
+  VariantProps<typeof tabsVariants> { }
+
+
+// @devsearch app/components/catalyst-ui/data/primitive-data.tsx:TabsList
+export const tabsVariants = cva('', {
+  variants: {
+    variant: {
+      default: '',
+      underline: '',
+      compact: 'border border-zinc-700 bg-zinc-900/40 rounded overflow-hidden',
+      glass: '',
+      frosted: '',
+      pill: '',
+      neon: 'rounded-xl bg-black/40 border border-cyan-500/30 p-2',
+      vertical: 'flex flex-row gap-4',
+      minimal: '',
+      bordered: 'rounded-xl border border-border bg-background/50 p-1',
+      elevated: '',
+      segmented: 'inline-block rounded-xl bg-muted/50 p-1',
+      dots: '',
+      floating: 'inline-block rounded-2xl bg-background shadow-2xl border border-border p-1',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export const tabsListVariants = cva('', {
+  variants: {
+    variant: {
+      default: 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      underline: 'mb-px flex gap-x-6 border-b border-border whitespace-nowrap justify-start bg-transparent rounded-[0xp]',
+      compact: '',
+      glass: 'inline-flex h-10 items-center justify-center rounded-lg bg-white/10 backdrop-blur-md border border-white/20 p-1 shadow-lg',
+      frosted: 'inline-flex h-10 items-center justify-center rounded-lg bg-white/5 backdrop-blur-xl border border-white/10 p-1',
+      pill: 'inline-flex h-10 items-center gap-2 rounded-full bg-muted/50 p-1',
+      neon: 'inline-flex h-10 items-center gap-2 p-1',
+      vertical: 'flex flex-col gap-1 w-48 p-2 bg-muted/50 rounded-lg',
+      minimal: 'flex gap-6 p-0',
+      bordered: 'inline-flex h-10 items-center gap-1 p-1',
+      elevated: 'inline-flex h-10 items-center gap-2 p-1',
+      segmented: 'inline-flex h-9 items-center justify-center w-full',
+      dots: 'flex gap-4 p-0 border-b border-border',
+      floating: 'inline-flex h-11 items-center gap-2',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export const tabsTriggerVariants = cva('', {
+  variants: {
+    variant: {
+      default: 'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      underline: '-mb-px flex border-b-2 pb-2 text-sm/7 font-medium border-transparent text-muted-foreground hover:border-[#1447e6]/25 data-[state=active]:border-[#1447e6] data-[state=active]:text-foreground rounded-[0px]',
+      compact: 'px-3 py-1 text-sm transition-colors hover:text-zinc-200 data-[state=active]:text-zinc-200 data-[state=inactive]:text-zinc-500 hover:text-zinc-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      glass: 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-white/20 data-[state=active]:text-white data-[state=active]:shadow-md',
+      frosted: 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-white/60 hover:text-white/90 data-[state=active]:bg-white/15 data-[state=active]:text-white data-[state=active]:backdrop-blur-sm',
+      pill: 'rounded-full px-4 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-muted-foreground hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-md',
+      neon: 'rounded-md px-4 py-2 text-sm font-medium text-cyan-400 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 disabled:pointer-events-none disabled:opacity-50 hover:text-cyan-300 data-[state=active]:bg-cyan-500/20 data-[state=active]:text-cyan-300 data-[state=active]:shadow-[0_0_15px_rgba(6,182,212,0.5)] data-[state=active]:border data-[state=active]:border-cyan-400',
+      vertical: 'justify-start rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-muted-foreground hover:text-foreground hover:bg-background/50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      minimal: 'text-sm font-medium text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:text-foreground/80 data-[state=active]:text-foreground',
+      bordered: 'rounded-md px-4 py-2 text-sm font-medium border border-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-muted-foreground hover:text-foreground data-[state=active]:border-border data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      elevated: 'rounded-lg px-4 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-muted-foreground hover:text-foreground hover:shadow-md data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-lg data-[state=active]:shadow-primary/20',
+      segmented: 'rounded-md px-4 py-1.5 text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-muted-foreground hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      dots: 'relative pb-3 text-sm font-medium text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:text-foreground/80 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1 after:h-1 after:rounded-full after:transition-colors data-[state=active]:after:bg-primary',
+      floating: 'rounded-lg px-4 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-muted-foreground hover:text-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export const tabsContentVariants = cva('', {
+  variants: {
+    variant: {
+      default: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      underline: '',
+      compact: 'bg-zinc-900/40 overflow-hidden max-h-[80vh] max-w-[80vw] h-full w-full border-t border-zinc-700',
+      blueLine: '',
+      glass: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-white/5 backdrop-blur-sm rounded-lg border border-white/10 p-4',
+      frosted: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-white/5 backdrop-blur-xl rounded-lg border border-white/5 p-4',
+      pill: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      neon: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 focus-visible:ring-offset-2 rounded-lg bg-black/20 border border-cyan-500/20 p-4',
+      vertical: 'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 flex-1 rounded-lg bg-background/50 p-4',
+      minimal: 'mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      bordered: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 p-4',
+      elevated: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      segmented: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 p-4',
+      dots: 'mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      floating: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 p-4',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+
+// Create a context to share the variant
+const TabsVariantContext = React.createContext<string>('default')
+
+interface TabsProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,
+  VariantProps<typeof tabsVariants> { }
+
+
+const Tabs = React.forwardRef<
+React.ElementRef<typeof TabsPrimitive.Root>,
+  TabsProps
+  > (({ className, variant = 'default', defaultValue, children, ...props }, ref) => {
+    // Auto-detect first tab's value if no defaultValue provided
+    const autoDefaultValue = React.useMemo(() => {
+      if (defaultValue) return defaultValue
+
+      let firstValue: string | undefined
+
+      React.Children.forEach(children, (child) => {
+        if (firstValue) return
+
+        if (React.isValidElement(child) && child.type === TabsList) {
+          React.Children.forEach(child.props.children, (tabChild) => {
+            if (firstValue) return
+
+            if (React.isValidElement(tabChild) && tabChild.type === TabsTrigger) {
+              // Use explicit value or fallback to children text
+              firstValue = tabChild.props.value ||
+                (typeof tabChild.props.children === 'string'
+                  ? tabChild.props.children
+                  : undefined)
+            }
+          })
+        }
+      })
+
+      return firstValue
+    }, [defaultValue, children])
+
+    return (
+      <TabsVariantContext.Provider value={variant as string}>
+        <TabsPrimitive.Root
+          ref={ref}
+          className={cn(tabsVariants({ variant }), className)}
+          defaultValue={autoDefaultValue}
+          {...props}
+        >
+          {children}
+        </TabsPrimitive.Root>
+      </TabsVariantContext.Provider>
+    )
+  })
+Tabs.displayName = TabsPrimitive.Root.displayName
+
+interface TabsListProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, 'variant'> {
+  variant?: VariantProps<typeof tabsListVariants>['variant']
+}
+
+const TabsList = React.forwardRef<
+React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+  > (({ className, variant: variantOverride, ...props }, ref) => {
+    const contextVariant = React.useContext(TabsVariantContext)
+    const variant = variantOverride ?? contextVariant
+
+    const list = (
+      <TabsPrimitive.List
+        ref={ref}
+        className={cn(tabsListVariants({ variant: variant as any }), className)}
+        {...props}
+      />
+    )
+
+    if (variant === 'underline') {
+      return <div className="min-w-full flex-none px-4 sm:px-6">{list}</div>
+    }
+
+    return list
+  })
+TabsList.displayName = TabsPrimitive.List.displayName
+
+interface TabsTriggerProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'variant' | 'value'> {
+  variant?: VariantProps<typeof tabsTriggerVariants>['variant']
+  value?: string // Now optional
+}
+
+const TabsTrigger = React.forwardRef<
+React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+  > (({ className, variant: variantOverride, value, children, ...props }, ref) => {
+    const contextVariant = React.useContext(TabsVariantContext)
+    const variant = variantOverride ?? contextVariant
+
+    // Auto-use children as value if not explicitly provided
+    const finalValue = value || (typeof children === 'string' ? children : undefined)
+
+    return (
+      <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(tabsTriggerVariants({ variant: variant as any }), className)}
+        value={finalValue}
+        {...props}
+      >
+        {children}
+      </TabsPrimitive.Trigger>
+    )
+  })
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+interface TabsContentProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, 'variant'> {
+  variant?: VariantProps<typeof tabsContentVariants>['variant']
+}
+
+const TabsContent = React.forwardRef<
+React.ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+  > (({ className, variant: variantOverride, ...props }, ref) => {
+    const contextVariant = React.useContext(TabsVariantContext)
+    const variant = variantOverride ?? contextVariant
+
+    return (
+      <TabsPrimitive.Content
+        ref={ref}
+        className={cn(tabsContentVariants({ variant: variant as any }), className)}
+        {...props}
+      />
+    )
+  })
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
+/**
+
+const TabsVariantContext = React.createContext<string>('default')
+
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  TabsProps
+>(({ className, variant = 'default', ...props }, ref) => (
+  <TabsVariantContext.Provider value={variant as string}>
+    <TabsPrimitive.Root
+      ref={ref}
+      className={cn(tabsVariants({ variant }), className)}
+      {...props}
+    />
+  </TabsVariantContext.Provider>
+))
+Tabs.displayName = TabsPrimitive.Root.displayName
+
+interface TabsListProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, 'variant'> {
+  variant?: VariantProps<typeof tabsListVariants>['variant']
+}
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, variant: variantOverride, ...props }, ref) => {
+  const contextVariant = React.useContext(TabsVariantContext)
+  const variant = variantOverride ?? contextVariant
+
+  const list = (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(tabsListVariants({ variant: variant as any }), className)}
+      {...props}
+    />
+  )
+
+  if (variant === 'underline') {
+    return <div className="min-w-full flex-none px-4 sm:px-6">{list}</div>
+  }
+
+  return list
+})
+TabsList.displayName = TabsPrimitive.List.displayName
+
+interface TabsTriggerProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'variant'> {
+  variant?: VariantProps<typeof tabsTriggerVariants>['variant']
+}
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, variant: variantOverride, ...props }, ref) => {
+  const contextVariant = React.useContext(TabsVariantContext)
+  const variant = variantOverride ?? contextVariant
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(tabsTriggerVariants({ variant: variant as any }), className)}
+      {...props}
+    />
+  )
+})
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+interface TabsContentProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, 'variant'> {
+  variant?: VariantProps<typeof tabsContentVariants>['variant']
+}
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(({ className, variant: variantOverride, ...props }, ref) => {
+  const contextVariant = React.useContext(TabsVariantContext)
+  const variant = variantOverride ?? contextVariant
+
+  return (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cn(tabsContentVariants({ variant: variant as any }), className)}
+      {...props}
+    />
+  )
+})
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent } */

package/components/catalyst-ui/primitives/textarea.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { cn } from '~/components/catalyst-ui'
+
+// @dev app/components/catalyst-ui/data/primitive-data.tsx:3931
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

package/components/catalyst-ui/primitives/toggle-group.tsx

@@ -0,0 +1,55 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cn } from "~/components/catalyst-ui";
+import React from "react";
+import { toggleVariants } from '~/components/catalyst-ui'
+
+// @dev app/components/catalyst-ui/data/primitive-data.tsx:3118
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem }

package/components/catalyst-ui/primitives/toggle.tsx

@@ -0,0 +1,42 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva } from "class-variance-authority";
+import { cn } from "~/components/catalyst-ui";
+import React from "react";
+
+// @dev app/components/catalyst-ui/data/primitive-data.tsx:3076
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+export { Toggle,  toggleVariants }

package/components/catalyst-ui/primitives/tooltip.tsx

@@ -0,0 +1,116 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "~/components/catalyst-ui";
+import React from "react";
+
+// @dev app/components/catalyst-ui/data/primitive-data.tsx:4707
+
+const TooltipVariantContext = React.createContext<{
+    variant?: "default" | "light" | "error";
+    arrow?: "visible" | "hidden";
+    rounded?: "default" | "full";
+}>({});
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = ({ children, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> & {
+    variant?: "default" | "light" | "error";
+    arrow?: "visible" | "hidden";
+    rounded?: "default" | "full";
+}) => {
+    const { variant, arrow, rounded, ...rootProps } = props;
+
+    return (
+        <TooltipVariantContext.Provider value={{ variant, arrow, rounded }}>
+            <TooltipPrimitive.Root {...rootProps}>
+                {children}
+            </TooltipPrimitive.Root>
+        </TooltipVariantContext.Provider>
+    );
+};
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const tooltipContentVariants = cva(
+    "z-50 overflow-hidden border px-3 py-1.5 text-sm shadow-md 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 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",
+    {
+        variants: {
+            variant: {
+                default: "bg-popover text-popover-foreground",
+                light: "bg-neutral-200 text-neutral-950 dark:bg-neutral-50 [&_svg]:bg-neutral-200 [&_svg]:fill-neutral-200 dark:[&_svg]:bg-neutral-50 dark:[&_svg]:fill-neutral-50",
+                error: "bg-destructive text-white [&_svg]:bg-destructive [&_svg]:fill-destructive",
+            },
+            arrow: {
+                visible: "",
+                hidden: "[&_svg]:invisible",
+            },
+            rounded: {
+                default: "rounded-md",
+                full: "rounded-full",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            arrow: "visible",
+            rounded: "default",
+        },
+    }
+);
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+    VariantProps<typeof tooltipContentVariants>
+>(({ className, sideOffset = 4, ...props }, ref) => {
+    const { variant, arrow, rounded } = React.useContext(TooltipVariantContext);
+
+    return (
+        <TooltipPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(
+                tooltipContentVariants({ variant, arrow, rounded, }), className)}
+            {...props}
+        />
+    );
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+    TooltipProvider,
+    Tooltip,
+    TooltipTrigger,
+    TooltipContent,
+    tooltipContentVariants,
+};
+
+/**
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "~/components/catalyst-ui";
+import React from "react";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+            "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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 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}
+    />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+    TooltipProvider,    Tooltip,    TooltipTrigger,    TooltipContent
+} */

package/components/catalyst-ui/utils/basic-auth.tsx

@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export function BasicAuthMiddleware() {
+  const validateBasicAuth = useCallback((
+    request: Request, 
+    credentials: BasicAuthCredentials[]
+  ): BasicAuthCredentials | null => {
+    const authHeader = request.headers.get('authorization');
+    if (!authHeader?.startsWith('Basic ')) return null;
+
+    const encoded = authHeader.slice(6);
+    const decoded = atob(encoded);
+    const [username, password] = decoded.split(':');
+
+    const validCredential = credentials.find(
+      cred => cred.username === username && cred.password === password
+    );
+
+    return validCredential || null;
+  }, []);
+
+  const requireBasicAuth = useCallback((
+    request: Request,
+    credentials: BasicAuthCredentials[],
+    realm = 'Restricted Area'
+  ) => {
+    const auth = validateBasicAuth(request, credentials);
+    if (!auth) {
+      return new Response('Unauthorized', {
+        status: 401,
+        headers: {
+          'WWW-Authenticate': `Basic realm="${realm}"`
+        }
+      });
+    }
+    return null;
+  }, [validateBasicAuth]);
+
+  return { validateBasicAuth, requireBasicAuth };
+}

package/components/catalyst-ui/utils/context-storage.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export function ContextStorageMiddleware() {
+  const storage = new Map<string, ContextData>();
+
+  const setContext = useCallback((requestId: string, data: ContextData) => {
+    storage.set(requestId, data);
+  }, []);
+
+  const getContext = useCallback((requestId: string): ContextData | undefined => {
+    return storage.get(requestId);
+  }, []);
+
+  const clearContext = useCallback((requestId: string) => {
+    storage.delete(requestId);
+  }, []);
+
+  return { setContext, getContext, clearContext };
+}