ui-arreya-components 0.0.16 → 0.1.4

package/src/components/feature/wizard.tsx

@@ -1,278 +0,0 @@
-"use client"
-
-import React, { useState, createContext, useContext } from "react"
-import { cn } from "@/lib/utils"
-import { Check, ChevronRight } from 'lucide-react'
-import { Button } from "@/components/ui/button"
-
-// Types
-export type WizardStepStatus = "upcoming" | "current" | "completed"
-
-export interface WizardStep {
-  id: string
-  title: string
-  description?: string
-  optional?: boolean
-}
-
-interface WizardContextValue {
-  currentStepIndex: number
-  steps: WizardStep[]
-  goToStep: (index: number) => void
-  nextStep: () => void
-  prevStep: () => void
-  isFirstStep: boolean
-  isLastStep: boolean
-  getStepStatus: (index: number) => WizardStepStatus
-  completeWizard: () => void
-  isComplete: boolean
-}
-
-// Context
-const WizardContext = createContext<WizardContextValue | undefined>(undefined)
-
-export function useWizard() {
-  const context = useContext(WizardContext)
-  if (!context) {
-    throw new Error("useWizard must be used within a WizardProvider")
-  }
-  return context
-}
-
-// Provider Component
-interface WizardProviderProps {
-  steps: WizardStep[]
-  children: React.ReactNode
-  onComplete?: () => void
-  initialStep?: number
-}
-
-export function WizardProvider({
-  steps,
-  children,
-  onComplete,
-  initialStep = 0,
-}: WizardProviderProps) {
-  const [currentStepIndex, setCurrentStepIndex] = useState(initialStep)
-  const [isComplete, setIsComplete] = useState(false)
-
-  const goToStep = (index: number) => {
-    if (index >= 0 && index < steps.length) {
-      setCurrentStepIndex(index)
-    }
-  }
-
-  const nextStep = () => {
-    if (currentStepIndex < steps.length - 1) {
-      setCurrentStepIndex(currentStepIndex + 1)
-    } else {
-      completeWizard()
-    }
-  }
-
-  const prevStep = () => {
-    if (currentStepIndex > 0) {
-      setCurrentStepIndex(currentStepIndex - 1)
-    }
-  }
-
-  const completeWizard = () => {
-    setIsComplete(true)
-    onComplete?.()
-  }
-
-  const getStepStatus = (index: number): WizardStepStatus => {
-    if (isComplete) return "completed"
-    if (index < currentStepIndex) return "completed"
-    if (index === currentStepIndex) return "current"
-    return "upcoming"
-  }
-
-  const value = {
-    currentStepIndex,
-    steps,
-    goToStep,
-    nextStep,
-    prevStep,
-    isFirstStep: currentStepIndex === 0,
-    isLastStep: currentStepIndex === steps.length - 1,
-    getStepStatus,
-    completeWizard,
-    isComplete,
-  }
-
-  return <WizardContext.Provider value={value}>{children}</WizardContext.Provider>
-}
-
-// Wizard Component
-interface WizardProps extends WizardProviderProps {
-  className?: string
-  showStepIndicator?: boolean
-  navigationPosition?: "top" | "bottom" | "both"
-}
-
-export function Wizard({
-  steps,
-  children,
-  onComplete,
-  initialStep = 0,
-  className,
-  showStepIndicator = true,
-  navigationPosition = "bottom",
-}: WizardProps) {
-  return (
-    <WizardProvider steps={steps} onComplete={onComplete} initialStep={initialStep}>
-      <div className={cn("w-full", className)}>
-        {(navigationPosition === "top" || navigationPosition === "both") && (
-          <WizardNavigation className="mb-6" />
-        )}
-        
-        {showStepIndicator && <WizardStepIndicator className="mb-8" />}
-        
-        <div className="wizard-content">{children}</div>
-        
-        {(navigationPosition === "bottom" || navigationPosition === "both") && (
-          <WizardNavigation className="mt-6" />
-        )}
-      </div>
-    </WizardProvider>
-  )
-}
-
-// Step Indicator Component
-interface WizardStepIndicatorProps {
-  className?: string
-}
-
-export function WizardStepIndicator({ className }: WizardStepIndicatorProps) {
-  const { steps, currentStepIndex, getStepStatus, goToStep } = useWizard()
-
-  return (
-    <div className={cn("w-full", className)}>
-      <div className="relative flex w-full justify-between">
-        {/* Progress Bar */}
-        <div className="absolute top-1/2 h-0.5 w-full -translate-y-1/2 bg-muted">
-          <div
-            className="h-full bg-primary transition-all duration-300 ease-in-out"
-            style={{ width: `${(currentStepIndex / (steps.length - 1)) * 100}%` }}
-          />
-        </div>
-
-        {/* Step Indicators */}
-        {steps.map((step, index) => {
-          const status = getStepStatus(index)
-          return (
-            <div key={step.id} className="relative z-10 flex flex-col items-center">
-              <button
-                onClick={() => {
-                  if (status === "completed") {
-                    goToStep(index)
-                  }
-                }}
-                disabled={status === "upcoming"}
-                className={cn(
-                  "flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors",
-                  status === "completed" && "border-primary bg-primary text-primary-foreground hover:bg-primary/90",
-                  status === "current" && "border-primary bg-background text-primary",
-                  status === "upcoming" && "border-muted bg-background text-muted-foreground"
-                )}
-                aria-current={status === "current" ? "step" : undefined}
-              >
-                {status === "completed" ? <Check className="h-4 w-4" /> : index + 1}
-              </button>
-              <div className="mt-2 text-center">
-                <div
-                  className={cn(
-                    "text-xs font-medium",
-                    status === "completed" && "text-primary",
-                    status === "current" && "text-primary",
-                    status === "upcoming" && "text-muted-foreground"
-                  )}
-                >
-                  {step.title}
-                </div>
-                {step.description && (
-                  <div className="mt-0.5 text-xs text-muted-foreground">
-                    {step.description}
-                  </div>
-                )}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-// Navigation Component
-interface WizardNavigationProps {
-  className?: string
-  showCancel?: boolean
-  onCancel?: () => void
-  nextLabel?: string
-  backLabel?: string
-  completeLabel?: string
-}
-
-export function WizardNavigation({
-  className,
-  showCancel = false,
-  onCancel,
-  nextLabel = "Next",
-  backLabel = "Back",
-  completeLabel = "Complete",
-}: WizardNavigationProps) {
-  const { nextStep, prevStep, isFirstStep, isLastStep, completeWizard } = useWizard()
-
-  return (
-    <div className={cn("flex items-center justify-between", className)}>
-      <div>
-        {!isFirstStep && (
-          <Button variant="outline" onClick={prevStep}>
-            {backLabel}
-          </Button>
-        )}
-        {showCancel && isFirstStep && (
-          <Button variant="outline" onClick={onCancel}>
-            Cancel
-          </Button>
-        )}
-      </div>
-      <Button onClick={isLastStep ? completeWizard : nextStep}>
-        {isLastStep ? completeLabel : nextLabel}
-        {!isLastStep && <ChevronRight className="ml-1 h-4 w-4" />}
-      </Button>
-    </div>
-  )
-}
-
-// Step Component
-interface WizardStepContentProps {
-  stepId: string
-  children: React.ReactNode
-}
-
-export function WizardStepContent({ stepId, children }: WizardStepContentProps) {
-  const { steps, currentStepIndex, isComplete } = useWizard()
-  const currentStep = steps[currentStepIndex]
-  
-  if (isComplete) return null
-  if (currentStep.id !== stepId) return null
-  
-  return <>{children}</>
-}
-
-// Completion Component
-interface WizardCompletionProps {
-  children: React.ReactNode
-}
-
-export function WizardCompletion({ children }: WizardCompletionProps) {
-  const { isComplete } = useWizard()
-  
-  if (!isComplete) return null
-  
-  return <>{children}</>
-}
-

package/src/components/ui/accordion.stories.tsx.disabled

@@ -1,36 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"
-
-import { 
-  Accordion,
-  AccordionTrigger,
-  AccordionContent,
-  AccordionItem,
-} from "./accordion"
-
-const meta = {
-  title: "Components/Accordion",
-  component: Accordion,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Accordion>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    collapsible: true
-  },
-  render: () => (
-    <Accordion type="single" collapsible>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It adheres to the WAI-ARIA design pattern.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-}

package/src/components/ui/accordion.tsx

@@ -1,55 +0,0 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/ui/alert-dialog.stories.tsx

@@ -1,46 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"
-
-import { 
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger
-} from "./alert-dialog"
-
-const meta = {
-  title: "Components/AlertDialog",
-  component: AlertDialog,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof AlertDialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => (
-    <AlertDialog>
-      <AlertDialogTrigger>Open</AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your account
-            and remove your data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}

package/src/components/ui/alert-dialog.tsx

@@ -1,139 +0,0 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/src/components/ui/alert.stories.tsx

@@ -1,45 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"
-
-import { AlertCircle, Terminal } from 'lucide-react'
-
-import { 
-  Alert,
-  AlertTitle,
-  AlertDescription
-} from "./alert"
-
-const meta = {
-  title: "Components/Alert",
-  component: Alert,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Alert>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => (
-    <Alert>
-      <Terminal className="h-4 w-4" />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>
-        You can add components and dependencies to your app using the cli.
-      </AlertDescription>
-    </Alert>
-  )
-}
-
-export const Destructive: Story = {
-  render: () => (
-    <Alert variant="destructive">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>
-        Your session has expired. Please log in again.
-      </AlertDescription>
-    </Alert>
-  )
-}

package/src/components/ui/alert.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/aspect-ratio.stories.tsx

@@ -1,24 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"
-
-import { 
-  AspectRatio
-} from "./aspect-ratio"
-
-const meta = { title: "Components/AspectRatio",
-  component: AspectRatio,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof AspectRatio>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => (
-    <AspectRatio ratio={16 / 9}>
-      <image href="https://github.com/shadcn.png" />
-    </AspectRatio>
-  )
-}

package/src/components/ui/aspect-ratio.tsx

@@ -1,5 +0,0 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-const AspectRatio = AspectRatioPrimitive.Root
-
-export { AspectRatio }