@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/components/catalyst-ui/buttons/burger.tsx

@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+import { cn } from '~/components/catalyst-ui';
+import { Button } from '~/components/catalyst-ui'
+// @dev app/components/catalyst-ui/data/buttons-data.tsx:1281
+interface BurgerMenuProps {
+  opened?: boolean;
+  onToggle?: (opened: boolean) => void;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  color?: string;
+  className?: string;
+  'aria-label'?: string;
+  disabled?: boolean;
+}
+
+export function Burger({  opened = false,  size = 'md',  color = 'currentColor',}: BurgerMenuProps) {
+  const isOpened = opened
+
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+    xl: 'w-10 h-10'
+  };
+
+  const lineHeight = {
+    sm: '2px',
+    md: '2px',
+    lg: '3px',
+    xl: '3px'
+  };
+
+  return (
+    <div className={cn("relative", sizeClasses[size])}>
+      <span
+        className={cn("absolute left-0 block transition-all duration-300 ease-in-out rounded-full", "bg-current")}
+        style={{
+          width: '100%',
+          height: lineHeight[size],
+          color: color,
+          top: isOpened ? '50%' : '20%',
+          transform: isOpened ? 'translateY(-50%) rotate(45deg)' : 'translateY(-50%) rotate(0deg)'
+        }}
+      />
+      <span
+        className={cn(
+          "absolute left-0 block transition-all duration-300 ease-in-out rounded-full",
+          "bg-current"
+        )}
+        style={{
+          width: '100%',
+          height: lineHeight[size],
+          color: color,
+          top: '50%',
+          opacity: isOpened ? 0 : 1,
+          transform: 'translateY(-50%)'
+        }}
+      />
+      <span
+        className={cn(
+          "absolute left-0 block transition-all duration-300 ease-in-out rounded-full",
+          "bg-current"
+        )}
+        style={{
+          width: '100%',
+          height: lineHeight[size],
+          color: color,
+          bottom: isOpened ? '50%' : '20%',
+          transform: isOpened ? 'translateY(50%) rotate(-45deg)' : 'translateY(50%) rotate(0deg)'
+        }}
+      />
+    </div>
+  );
+}
+
+export function BurgerButton({
+  opened,
+  onToggle,
+  size,
+  color,
+  className = '',
+  'aria-label': ariaLabel = 'Toggle navigation',
+  disabled = false
+}: BurgerMenuProps) {
+  const [internalOpened, setInternalOpened] = useState(false);
+
+  const isOpened = controlledOpened !== undefined ? controlledOpened : internalOpened;
+
+  const handleToggle = () => {
+    if (disabled) return;
+
+    const newOpened = !isOpened;
+    if (controlledOpened === undefined) {
+      setInternalOpened(newOpened);
+    }
+    onToggle?.(newOpened);
+  };
+
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+    xl: 'w-10 h-10'
+  };
+
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleToggle}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      className={cn(
+        "relative p-2 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
+        sizeClasses[size],
+        className
+      )}
+    >
+      <Burger
+        opened={opened}
+        size={size}
+        color={color}
+      />
+    </Button>
+  );
+}
+
+interface NavigationItem {
+  id: string;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+interface BurgerNavigationProps {
+  menuItems: NavigationItem[];
+  isOpen: boolean;
+  onToggle: (open: boolean) => void;
+  className?: string;
+}
+
+export function BurgerNavigation({
+  menuItems,
+  isOpen,
+  onToggle,
+  className = ''
+}: BurgerNavigationProps) {
+  const handleItemClick = (item: NavigationItem) => {
+    if (item.onClick) {
+      item.onClick();
+    } else if (item.href) {
+      window.location.href = item.href;
+    }
+    onToggle(false);
+  };
+
+  return (
+    <div className={cn("relative", className)}>
+      <Burger
+        opened={isOpen}
+        onToggle={onToggle}
+        size="lg"
+        className="z-50"
+      />
+
+      <div
+        className={cn(
+          "fixed inset-0 bg-background/80 backdrop-blur-sm transition-all duration-300 z-40",
+          isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+        )}
+        onClick={() => onToggle(false)}
+      />
+
+      <nav
+        className={cn(
+          "fixed top-0 right-0 h-full w-80 bg-card border-l border-border shadow-lg transition-transform duration-300 ease-in-out z-50",
+          isOpen ? "translate-x-0" : "translate-x-full"
+        )}
+      >
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <h2 className="text-lg font-semibold text-foreground">Menu</h2>
+          <Burger
+            opened={isOpen}
+            onToggle={onToggle}
+            size="md"
+          />
+        </div>
+
+        <div className="p-6">
+          <ul className="space-y-2">
+            {menuItems.map((item) => (
+              <li key={item.id}>
+                <button
+                  onClick={() => handleItemClick(item)}
+                  className="w-full text-left p-3 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors duration-150 text-foreground font-medium"
+                >
+                  {item.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </nav>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,210 @@
+"use client";
+
+import { Slot } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "~/components/catalyst-ui";
+
+// Types
+type TimelineContextValue = {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+};
+
+// Context
+const TimelineContext = React.createContext<TimelineContextValue | undefined>(
+  undefined,
+);
+
+const useTimeline = () => {
+  const context = React.useContext(TimelineContext);
+  if (!context) {
+    throw new Error("useTimeline must be used within a Timeline");
+  }
+  return context;
+};
+
+// Components
+interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: "horizontal" | "vertical";
+}
+
+function Timeline({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  className,
+  ...props
+}: TimelineProps) {
+  const [activeStep, setInternalStep] = React.useState(defaultValue);
+
+  const setActiveStep = React.useCallback(
+    (step: number) => {
+      if (value === undefined) {
+        setInternalStep(step);
+      }
+      onValueChange?.(step);
+    },
+    [value, onValueChange],
+  );
+
+  const currentStep = value ?? activeStep;
+
+  return (
+    <TimelineContext.Provider
+      value={{ activeStep: currentStep, setActiveStep }}
+    >
+      <div
+        className={cn(
+          "group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+          className,
+        )}
+        data-orientation={orientation}
+        data-slot="timeline"
+        {...props}
+      />
+    </TimelineContext.Provider>
+  );
+}
+
+// TimelineContent
+function TimelineContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="timeline-content"
+      {...props}
+    />
+  );
+}
+
+// TimelineDate
+interface TimelineDateProps extends React.HTMLAttributes<HTMLTimeElement> {
+  asChild?: boolean;
+}
+
+function TimelineDate({
+  asChild = false,
+  className,
+  ...props
+}: TimelineDateProps) {
+  const Comp = asChild ? Slot.Root : "time";
+
+  return (
+    <Comp
+      className={cn(
+        "mb-1 block font-medium text-muted-foreground text-xs group-data-[orientation=vertical]/timeline:max-sm:h-4",
+        className,
+      )}
+      data-slot="timeline-date"
+      {...props}
+    />
+  );
+}
+
+// TimelineHeader
+function TimelineHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn(className)} data-slot="timeline-header" {...props} />
+  );
+}
+
+// TimelineIndicator
+interface TimelineIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+function TimelineIndicator({
+  asChild = false,
+  className,
+  children,
+  ...props
+}: TimelineIndicatorProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2 absolute size-4 rounded-full border-2 border-primary/20 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=horizontal]/timeline:left-0 group-data-completed/timeline-item:border-primary",
+        className,
+      )}
+      data-slot="timeline-indicator"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// TimelineItem
+interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number;
+}
+
+function TimelineItem({ step, className, ...props }: TimelineItemProps) {
+  const { activeStep } = useTimeline();
+
+  return (
+    <div
+      className={cn(
+        "group/timeline-item relative flex flex-1 flex-col gap-0.5 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:not-last:pb-12 has-[+[data-completed]]:[&_[data-slot=timeline-separator]]:bg-primary",
+        className,
+      )}
+      data-completed={step <= activeStep || undefined}
+      data-slot="timeline-item"
+      {...props}
+    />
+  );
+}
+
+// TimelineSeparator
+function TimelineSeparator({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2 absolute self-start bg-primary/10 group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=vertical]/timeline:translate-y-4.5",
+        className,
+      )}
+      data-slot="timeline-separator"
+      {...props}
+    />
+  );
+}
+
+// TimelineTitle
+function TimelineTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("font-medium text-sm", className)}
+      data-slot="timeline-title"
+      {...props}
+    />
+  );
+}
+
+export {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+};