@dilipod/ui 0.1.0

package/src/components/card.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-sm border border-gray-200 bg-white shadow-sm',
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-lg font-bold leading-none tracking-tight text-[var(--black)]',
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-gray-500', className)}
+    {...props}
+  />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/components/icon-box.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Brain, Files, Robot, ChartBar, CheckCircle } from '@phosphor-icons/react'
+import { IconBox } from './icon-box'
+
+const meta: Meta<typeof IconBox> = {
+  title: 'Components/IconBox',
+  component: IconBox,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'outline', 'ghost', 'gradient'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg', 'xl'],
+    },
+    rounded: {
+      control: 'select',
+      options: ['sm', 'default', 'full'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof IconBox>
+
+export const Default: Story = {
+  args: {
+    children: <Brain size={20} weight="fill" />,
+    variant: 'default',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    children: <Brain size={20} weight="fill" />,
+    variant: 'primary',
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    children: <Brain size={20} weight="fill" />,
+    variant: 'outline',
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    children: <Brain size={20} weight="fill" />,
+    variant: 'ghost',
+  },
+}
+
+export const Gradient: Story = {
+  args: {
+    children: <Brain size={20} weight="fill" />,
+    variant: 'gradient',
+  },
+}
+
+export const Rounded: Story = {
+  args: {
+    children: <Brain size={20} weight="fill" />,
+    variant: 'default',
+    rounded: 'full',
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex gap-4 items-center">
+      <IconBox size="sm"><Brain size={16} weight="fill" /></IconBox>
+      <IconBox size="default"><Brain size={20} weight="fill" /></IconBox>
+      <IconBox size="lg"><Brain size={24} weight="fill" /></IconBox>
+      <IconBox size="xl"><Brain size={28} weight="fill" /></IconBox>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex gap-4 items-center">
+        <IconBox variant="default"><Brain size={20} weight="fill" /></IconBox>
+        <IconBox variant="primary"><Files size={20} weight="fill" /></IconBox>
+        <IconBox variant="outline"><Robot size={20} weight="fill" /></IconBox>
+        <IconBox variant="ghost"><ChartBar size={20} weight="fill" /></IconBox>
+        <IconBox variant="gradient"><CheckCircle size={20} weight="fill" /></IconBox>
+      </div>
+      <div className="flex gap-4 items-center">
+        <IconBox variant="default" rounded="full"><Brain size={20} weight="fill" /></IconBox>
+        <IconBox variant="primary" rounded="full"><Files size={20} weight="fill" /></IconBox>
+        <IconBox variant="outline" rounded="full"><Robot size={20} weight="fill" /></IconBox>
+      </div>
+    </div>
+  ),
+}

package/src/components/icon-box.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const iconBoxVariants = cva(
+  'inline-flex items-center justify-center shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-[var(--black)] text-white',
+        primary: 'bg-[var(--cyan)] text-[var(--black)]',
+        outline: 'border-2 border-gray-200 bg-white text-[var(--black)]',
+        ghost: 'bg-gray-100 text-gray-600',
+        gradient: 'bg-gradient-to-br from-[var(--black)] to-[var(--cyan-dark)] text-white',
+      },
+      size: {
+        sm: 'w-8 h-8',
+        default: 'w-10 h-10',
+        lg: 'w-12 h-12',
+        xl: 'w-14 h-14',
+      },
+      rounded: {
+        sm: 'rounded-sm',
+        default: 'rounded-md',
+        full: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      rounded: 'sm',
+    },
+  }
+)
+
+export interface IconBoxProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof iconBoxVariants> {}
+
+const IconBox = React.forwardRef<HTMLDivElement, IconBoxProps>(
+  ({ className, variant, size, rounded, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(iconBoxVariants({ variant, size, rounded }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+IconBox.displayName = 'IconBox'
+
+export { IconBox, iconBoxVariants }

package/src/components/logo.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Logo } from './logo'
+
+const meta: Meta<typeof Logo> = {
+  title: 'Components/Logo',
+  component: Logo,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['dark', 'light'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    href: {
+      control: 'text',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Logo>
+
+export const Dark: Story = {
+  args: {
+    variant: 'dark',
+    size: 'md',
+  },
+}
+
+export const Light: Story = {
+  args: {
+    variant: 'light',
+    size: 'md',
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+}
+
+export const Small: Story = {
+  args: {
+    variant: 'dark',
+    size: 'sm',
+  },
+}
+
+export const Medium: Story = {
+  args: {
+    variant: 'dark',
+    size: 'md',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    variant: 'dark',
+    size: 'lg',
+  },
+}
+
+export const WithLink: Story = {
+  args: {
+    variant: 'dark',
+    size: 'md',
+    href: '/',
+  },
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <div>
+        <p className="text-sm text-gray-500 mb-2">Dark variant (for light backgrounds)</p>
+        <div className="flex items-center gap-8">
+          <Logo variant="dark" size="sm" />
+          <Logo variant="dark" size="md" />
+          <Logo variant="dark" size="lg" />
+        </div>
+      </div>
+      <div className="bg-[var(--black)] p-6 rounded-lg">
+        <p className="text-sm text-gray-400 mb-2">Light variant (for dark backgrounds)</p>
+        <div className="flex items-center gap-8">
+          <Logo variant="light" size="sm" />
+          <Logo variant="light" size="md" />
+          <Logo variant="light" size="lg" />
+        </div>
+      </div>
+    </div>
+  ),
+}

package/src/components/logo.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import * as React from 'react'
+
+interface LogoProps {
+  variant?: 'dark' | 'light' // dark = black text, light = white text
+  size?: 'sm' | 'md' | 'lg'
+  href?: string
+  className?: string
+}
+
+const sizes = {
+  sm: { width: 100, height: 30 },
+  md: { width: 130, height: 40 },
+  lg: { width: 160, height: 50 },
+}
+
+/**
+ * Logo component that renders the Dilipod logo as inline SVG
+ * 
+ * @param variant - 'dark' for light backgrounds (black text), 'light' for dark backgrounds (white text)
+ * @param size - 'sm' | 'md' | 'lg'
+ * @param href - Optional link href (wraps logo in anchor tag)
+ * @param className - Additional CSS classes
+ */
+export function Logo({
+  variant = 'dark',
+  size = 'md',
+  href,
+  className,
+}: LogoProps) {
+  const s = sizes[size]
+  const textColor = variant === 'light' ? 'white' : '#0A0A0A'
+  const iconTextColor = variant === 'light' ? 'white' : '#0A0A0A'
+
+  const svgContent = (
+    <svg
+      width={s.width}
+      height={s.height}
+      viewBox="0 0 130 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id={`gradient-${variant}`} x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#007A70" />
+          <stop offset="50%" stopColor="#00B8A9" />
+          <stop offset="100%" stopColor="#00E5D4" />
+        </linearGradient>
+      </defs>
+      {/* Icon */}
+      <rect width="40" height="40" rx="4" fill={`url(#gradient-${variant})`} />
+      <text
+        x="20"
+        y="29"
+        textAnchor="middle"
+        fontFamily="system-ui, -apple-system, sans-serif"
+        fontSize="24"
+        fontWeight="700"
+        fill={iconTextColor}
+      >
+        D
+      </text>
+      {/* Text */}
+      <text
+        x="52"
+        y="28"
+        fontFamily="system-ui, -apple-system, sans-serif"
+        fontSize="20"
+        fontWeight="700"
+        letterSpacing="1"
+        fill={textColor}
+      >
+        Dilipod
+      </text>
+    </svg>
+  )
+
+  if (href) {
+    return (
+      <a href={href} className="inline-flex items-center group">
+        {svgContent}
+      </a>
+    )
+  }
+
+  return <div className="inline-flex items-center">{svgContent}</div>
+}
+
+export type { LogoProps }

package/src/components/progress.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Progress } from './progress'
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Progress',
+  component: Progress,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'success', 'warning', 'error', 'gradient'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+    },
+    showLabel: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Progress>
+
+export const Default: Story = {
+  args: {
+    value: 60,
+  },
+}
+
+export const WithLabel: Story = {
+  args: {
+    value: 75,
+    showLabel: true,
+  },
+}
+
+export const Gradient: Story = {
+  args: {
+    value: 84,
+    variant: 'gradient',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    value: 100,
+    variant: 'success',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    value: 45,
+    variant: 'warning',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    value: 25,
+    variant: 'error',
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4 w-64">
+      <div>
+        <p className="text-xs text-gray-500 mb-1">Small</p>
+        <Progress value={60} size="sm" />
+      </div>
+      <div>
+        <p className="text-xs text-gray-500 mb-1">Default</p>
+        <Progress value={60} size="default" />
+      </div>
+      <div>
+        <p className="text-xs text-gray-500 mb-1">Large</p>
+        <Progress value={60} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4 w-64">
+      <Progress value={84} variant="default" showLabel />
+      <Progress value={100} variant="success" />
+      <Progress value={45} variant="warning" />
+      <Progress value={25} variant="error" />
+      <Progress value={70} variant="gradient" />
+    </div>
+  ),
+}

package/src/components/progress.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const progressVariants = cva('h-full rounded-full transition-all duration-300', {
+  variants: {
+    variant: {
+      default: 'bg-[var(--cyan)]',
+      success: 'bg-green-500',
+      warning: 'bg-amber-500',
+      error: 'bg-red-500',
+      gradient: 'bg-gradient-to-r from-[var(--cyan-dark)] to-[var(--cyan)]',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export interface ProgressProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof progressVariants> {
+  /** Progress value (0-100) */
+  value: number
+  /** Show percentage label */
+  showLabel?: boolean
+  /** Custom label text (defaults to "Progress") */
+  label?: string
+  /** Size of the progress bar */
+  size?: 'sm' | 'default' | 'lg'
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value, variant, showLabel, label = 'Progress', size = 'default', ...props }, ref) => {
+    const clampedValue = Math.min(100, Math.max(0, value))
+    
+    const heightClass = {
+      sm: 'h-1',
+      default: 'h-1.5',
+      lg: 'h-2.5',
+    }[size]
+
+    return (
+      <div className={cn('w-full', className)} ref={ref} {...props}>
+        {showLabel && (
+          <div className="flex justify-between text-xs mb-1">
+            <span className="text-gray-500">{label}</span>
+            <span className="font-semibold text-[var(--black)]">{clampedValue}%</span>
+          </div>
+        )}
+        <div
+          className={cn(
+            'w-full bg-gray-200 rounded-full overflow-hidden',
+            heightClass
+          )}
+        >
+          <div
+            className={cn(progressVariants({ variant }))}
+            style={{ width: `${clampedValue}%` }}
+          />
+        </div>
+      </div>
+    )
+  }
+)
+Progress.displayName = 'Progress'
+
+export { Progress, progressVariants }

package/src/components/sheet.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from './button'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetFooter,
+  SheetClose,
+} from './sheet'
+
+const meta: Meta<typeof Sheet> = {
+  title: 'Components/Sheet',
+  component: Sheet,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Sheet>
+
+export const Default: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Sheet</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Sheet Title</SheetTitle>
+          <SheetDescription>
+            This is a sheet description. It can contain any content you want.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="py-4">
+          <p className="text-sm text-gray-600">
+            Sheet content goes here. You can add forms, lists, or any other content.
+          </p>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </SheetClose>
+          <Button>Save Changes</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+}
+
+export const LeftSide: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Left Sheet</Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>Navigation</SheetTitle>
+        </SheetHeader>
+        <nav className="flex flex-col gap-2 py-4">
+          <a href="#" className="px-4 py-2 text-sm hover:bg-gray-100 rounded-sm">Home</a>
+          <a href="#" className="px-4 py-2 text-sm hover:bg-gray-100 rounded-sm">About</a>
+          <a href="#" className="px-4 py-2 text-sm hover:bg-gray-100 rounded-sm">Services</a>
+          <a href="#" className="px-4 py-2 text-sm hover:bg-gray-100 rounded-sm">Contact</a>
+        </nav>
+      </SheetContent>
+    </Sheet>
+  ),
+}
+
+export const TopSide: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Top Sheet</Button>
+      </SheetTrigger>
+      <SheetContent side="top" className="h-auto">
+        <SheetHeader>
+          <SheetTitle>Notification</SheetTitle>
+          <SheetDescription>
+            You have new updates available.
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  ),
+}
+
+export const BottomSide: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Bottom Sheet</Button>
+      </SheetTrigger>
+      <SheetContent side="bottom" className="h-auto">
+        <SheetHeader>
+          <SheetTitle>Actions</SheetTitle>
+        </SheetHeader>
+        <div className="flex gap-2 py-4">
+          <Button variant="outline" className="flex-1">Share</Button>
+          <Button variant="outline" className="flex-1">Download</Button>
+          <Button variant="destructive" className="flex-1">Delete</Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  ),
+}