@catalystsoftware/ui 1.0.5 → 1.0.7

package/dist/data.tsx

@@ -1,35 +1,35 @@
 // remove line
  // remove line
 // remove line
-import { combinedCore, } from "./data/core-data";
-import { combinedCRM, } from "./data/crm-data";
-import { combinedEcom, } from "./data/ecommerce-data";
-import { combinedTools, } from "./data/tools-data";
-import { hooksArray } from "./data/hooks-data";
-import { lofiSection } from "./data/lofi-data";
-import { combinedPdf } from "./data/pdf-data";
-import { utilsData } from "./data/utils-data";
-import { utilsBlocks } from "./data/utils-data";
-import { sidebarnavcomps, } from "./data/sidebars-data";
-import { buttonsData } from "./data/buttons-data";
-import { chartComps } from "./data/charts-data";
-import { codeData } from "./data/code-data";
-import { componentsTimeData } from "./data/date-and-time-data";
-import { formsData } from "./data/forms-data";
-import { interactiveData } from "./data/interactive-data";
-import { componentsMedia } from "./data/media-data";
-import { OverlayData } from "./data/overlay-data";
-import { primitiveDaata } from "./data/primitive-data";
-import { aiPrompt } from "./data/prompt-data";
-import { aiPromptBlocks } from "./data/prompt-data";
-import { componentsTable } from "./data/table-data";
-import { backgroundData } from "./data/bg-data";
-import { componentsTypography } from "./data/typography-data";
-import { combinedPos } from "./data/pos-data";
-import { marketingSections, marketingPages, marketingFeedback } from "./data/marketing-data";
-import { inputs } from "./data/inputs-data";
-import { xData } from "./data/x-data";
-import { Motions } from "./data/motion-data";
+import { combinedCore, } from "@catalystsoftware/ui/data/core-data";
+import { combinedCRM, } from "@catalystsoftware/ui/data/crm-data";
+import { combinedEcom, } from "@catalystsoftware/ui/data/ecommerce-data";
+import { combinedTools, } from "@catalystsoftware/ui/data/tools-data";
+import { hooksArray } from "@catalystsoftware/ui/data/hooks-data";
+import { lofiSection } from "@catalystsoftware/ui/data/lofi-data";
+import { combinedPdf } from "@catalystsoftware/ui/data/pdf-data";
+import { utilsData } from "@catalystsoftware/ui/data/utils-data";
+import { utilsBlocks } from "@catalystsoftware/ui/data/utils-data";
+import { sidebarnavcomps, } from "@catalystsoftware/ui/data/sidebars-data";
+import { buttonsData } from "@catalystsoftware/ui/data/buttons-data";
+import { chartComps } from "@catalystsoftware/ui/data/charts-data";
+import { codeData } from "@catalystsoftware/ui/data/code-data";
+import { componentsTimeData } from "@catalystsoftware/ui/data/date-and-time-data";
+import { formsData } from "@catalystsoftware/ui/data/forms-data";
+import { interactiveData } from "@catalystsoftware/ui/data/interactive-data";
+import { componentsMedia } from "@catalystsoftware/ui/data/media-data";
+import { OverlayData } from "@catalystsoftware/ui/data/overlay-data";
+import { primitiveDaata } from "@catalystsoftware/ui/data/primitive-data";
+import { aiPrompt } from "@catalystsoftware/ui/data/prompt-data";
+import { aiPromptBlocks } from "@catalystsoftware/ui/data/prompt-data";
+import { componentsTable } from "@catalystsoftware/ui/data/table-data";
+import { backgroundData } from "@catalystsoftware/ui/data/bg-data";
+import { componentsTypography } from "@catalystsoftware/ui/data/typography-data";
+import { combinedPos } from "@catalystsoftware/ui/data/pos-data";
+import { marketingSections, marketingPages, marketingFeedback } from "@catalystsoftware/ui/data/marketing-data";
+import { inputs } from "@catalystsoftware/ui/data/inputs-data";
+import { xData } from "@catalystsoftware/ui/data/x-data";
+import { Motions } from "@catalystsoftware/ui/data/motion-data";
 
 export const combinedSections = [
 	...backgroundData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catalystsoftware/ui",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Catalyst UI Component Library CLI",
   "type": "module",
   "main": "dist/index.js",
@@ -26,8 +26,9 @@
   "license": "MIT",
   "files": [
     "dist",
-    "data",
-    "components",
+    "dist/data.tsx",
+    "dist/data",
+    "dist/components",
     "README.md"
   ],
   "dependencies": {

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

@@ -1,207 +0,0 @@
-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/components/catalyst-ui/core/data-display/timeline.tsx

@@ -1,210 +0,0 @@
-"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,
-};