@dilipod/ui 0.1.0

package/src/components/sheet.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from '@phosphor-icons/react'
+
+import { cn } from '../lib/utils'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.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}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-[var(--black)]', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-gray-500', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/components/stat.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Stat } from './stat'
+
+const meta: Meta<typeof Stat> = {
+  title: 'Components/Stat',
+  component: Stat,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'card'],
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+    },
+    valueSize: {
+      control: 'select',
+      options: ['sm', 'default', 'lg', 'xl'],
+    },
+    valueColor: {
+      control: 'select',
+      options: ['default', 'primary', 'white', 'gradient'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Stat>
+
+export const Default: Story = {
+  args: {
+    value: '1,247',
+    label: 'Docs Reviewed',
+  },
+}
+
+export const WithSuffix: Story = {
+  args: {
+    value: '80%',
+    suffix: 'cheaper',
+    label: '€6-12K/year vs €40-60K for an employee',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    value: '99.8%',
+    label: 'Accuracy',
+    valueColor: 'primary',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    value: '24h',
+    suffix: 'to deploy',
+    label: 'From call to working agent in one day',
+    valueSize: 'lg',
+  },
+}
+
+export const Card: Story = {
+  args: {
+    value: '1,247',
+    label: 'Docs Reviewed',
+    variant: 'card',
+    align: 'center',
+  },
+}
+
+export const Centered: Story = {
+  args: {
+    value: '24/7',
+    label: 'Available',
+    align: 'center',
+    valueColor: 'primary',
+    valueSize: 'lg',
+  },
+}
+
+export const StatsGrid: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-80">
+      <Stat value="1,247" label="Docs Reviewed" variant="card" align="center" />
+      <Stat value="99.8%" label="Accuracy" variant="card" align="center" valueColor="primary" />
+    </div>
+  ),
+}
+
+export const SolutionStats: Story = {
+  render: () => (
+    <div className="grid grid-cols-4 gap-8">
+      <Stat value="80%" suffix="cheaper" label="€6-12K/year vs €40-60K" valueSize="lg" />
+      <Stat value="24h" suffix="to deploy" label="From call to working agent" valueSize="lg" />
+      <Stat value="Zero" suffix="maintenance" label="We handle everything" valueSize="lg" />
+      <Stat value="Instant" suffix="capacity" label="Add more agents on demand" valueSize="lg" />
+    </div>
+  ),
+}
+
+export const UseCaseStats: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <Stat value="40hrs" label="saved/week" valueColor="primary" />
+      <Stat value="99.8%" label="accuracy" valueColor="primary" />
+      <Stat value="10x" label="faster" valueColor="primary" />
+      <Stat value="24/7" label="available" valueColor="primary" />
+    </div>
+  ),
+}
+
+export const OnDarkBackground: Story = {
+  render: () => (
+    <div className="bg-[var(--black)] p-8 rounded-lg">
+      <div className="grid grid-cols-4 gap-8">
+        <Stat value="80%" suffix="cheaper" valueSize="lg" valueColor="white" />
+        <Stat value="24h" suffix="to deploy" valueSize="lg" valueColor="white" />
+        <Stat value="Zero" suffix="maintenance" valueSize="lg" valueColor="white" />
+        <Stat value="Instant" suffix="capacity" valueSize="lg" valueColor="white" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+}

package/src/components/stat.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const statVariants = cva('', {
+  variants: {
+    variant: {
+      default: '',
+      card: 'p-3 rounded-sm bg-gray-50 text-center',
+    },
+    align: {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    align: 'left',
+  },
+})
+
+const valueVariants = cva('font-bold', {
+  variants: {
+    size: {
+      sm: 'text-xl',
+      default: 'text-3xl md:text-4xl',
+      lg: 'text-4xl md:text-5xl',
+      xl: 'text-5xl md:text-6xl',
+    },
+    color: {
+      default: 'text-[var(--black)]',
+      primary: 'text-[var(--cyan)]',
+      white: 'text-white',
+      gradient: 'text-gradient',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+    color: 'default',
+  },
+})
+
+export interface StatProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof statVariants> {
+  /** The main value to display */
+  value: string | number
+  /** Label below the value */
+  label?: string
+  /** Optional suffix after value (e.g., "faster", "cheaper") */
+  suffix?: string
+  /** Size of the value text */
+  valueSize?: 'sm' | 'default' | 'lg' | 'xl'
+  /** Color of the value */
+  valueColor?: 'default' | 'primary' | 'white' | 'gradient'
+}
+
+const Stat = React.forwardRef<HTMLDivElement, StatProps>(
+  (
+    {
+      className,
+      variant,
+      align,
+      value,
+      label,
+      suffix,
+      valueSize = 'default',
+      valueColor = 'default',
+      ...props
+    },
+    ref
+  ) => {
+    const justifyClass = {
+      left: 'justify-start',
+      center: 'justify-center',
+      right: 'justify-end',
+    }[align || 'left']
+
+    return (
+      <div
+        ref={ref}
+        className={cn(statVariants({ variant, align }), className)}
+        {...props}
+      >
+        <div className={cn('flex items-baseline gap-2', justifyClass)}>
+          <span className={cn(valueVariants({ size: valueSize, color: valueColor }))}>
+            {value}
+          </span>
+          {suffix && (
+            <span className={cn(
+              "font-medium text-[var(--cyan)]",
+              valueSize === 'lg' || valueSize === 'xl' ? 'text-lg md:text-xl' : 'text-base md:text-lg'
+            )}>
+              {suffix}
+            </span>
+          )}
+        </div>
+        {label && (
+          <div className={cn(
+            "font-medium mt-1",
+            valueColor === 'white' ? 'text-white/70 text-sm md:text-base' : 'text-gray-500 text-xs md:text-sm'
+          )}>
+            {label}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+Stat.displayName = 'Stat'
+
+export { Stat, statVariants, valueVariants }

package/src/components/tag.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Buildings, Briefcase, FirstAid, ShoppingCart } from '@phosphor-icons/react'
+import { Tag } from './tag'
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'outline', 'dark'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Tag>
+
+export const Default: Story = {
+  args: {
+    children: 'Tag Label',
+    variant: 'default',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    children: 'Active',
+    variant: 'primary',
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    children: 'Real Estate',
+    variant: 'outline',
+    icon: <Buildings size={14} weight="fill" />,
+  },
+}
+
+export const Dark: Story = {
+  args: {
+    children: 'Premium',
+    variant: 'dark',
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    children: 'Healthcare',
+    variant: 'outline',
+    icon: <FirstAid size={14} weight="fill" />,
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex gap-2 items-center">
+      <Tag size="sm">Small</Tag>
+      <Tag size="default">Default</Tag>
+      <Tag size="lg">Large</Tag>
+    </div>
+  ),
+}
+
+export const Industries: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Tag variant="outline" icon={<Buildings size={14} weight="fill" />}>Real Estate</Tag>
+      <Tag variant="outline" icon={<Briefcase size={14} weight="fill" />}>Professional Services</Tag>
+      <Tag variant="outline" icon={<FirstAid size={14} weight="fill" />}>Healthcare</Tag>
+      <Tag variant="outline" icon={<ShoppingCart size={14} weight="fill" />}>E-commerce</Tag>
+    </div>
+  ),
+}
+
+export const FeatureTags: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Tag>Walk through your workflow</Tag>
+      <Tag>Show us your tools</Tag>
+      <Tag>Describe edge cases</Tag>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex gap-2 items-center flex-wrap">
+        <Tag variant="default">Default</Tag>
+        <Tag variant="primary">Primary</Tag>
+        <Tag variant="outline">Outline</Tag>
+        <Tag variant="dark">Dark</Tag>
+      </div>
+      <div className="flex gap-2 items-center flex-wrap">
+        <Tag variant="outline" icon={<Buildings size={14} weight="fill" />}>With Icon</Tag>
+        <Tag variant="primary" icon={<Briefcase size={14} weight="fill" />}>Primary Icon</Tag>
+      </div>
+    </div>
+  ),
+}

package/src/components/tag.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const tagVariants = cva(
+  'inline-flex items-center gap-2 font-medium transition-colors cursor-pointer',
+  {
+    variants: {
+      variant: {
+        default: 'bg-gray-100 text-[var(--black)]',
+        primary: 'bg-[var(--cyan)]/10 text-[var(--cyan)]',
+        outline: 'border border-gray-200 bg-white text-gray-700 hover:border-[var(--black)] hover:text-[var(--black)]',
+        dark: 'bg-[var(--black)] text-white',
+      },
+      size: {
+        sm: 'px-2 py-1 text-[10px] rounded',
+        default: 'px-3 py-1.5 text-xs rounded-full',
+        lg: 'px-4 py-2 text-sm rounded-full',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export interface TagProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof tagVariants> {
+  /** Optional icon to display before text */
+  icon?: React.ReactNode
+}
+
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  ({ className, variant, size, icon, children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(tagVariants({ variant, size }), className)}
+        {...props}
+      >
+        {icon && <span className="shrink-0">{icon}</span>}
+        {children}
+      </span>
+    )
+  }
+)
+Tag.displayName = 'Tag'
+
+export { Tag, tagVariants }

package/src/icons.ts

@@ -0,0 +1,107 @@
+/**
+ * Dilipod Icon Library
+ * 
+ * Re-exports Phosphor icons used across the design system.
+ * Import icons from '@dilipod/ui' instead of '@phosphor-icons/react' directly.
+ * 
+ * @example
+ * import { ArrowRight, Brain, CheckCircle } from '@dilipod/ui'
+ */
+
+// Navigation & Actions
+export {
+  ArrowRight,
+  ArrowUpRight,
+  ArrowLeft,
+  CaretRight,
+  CaretDown,
+  CaretUp,
+  List,
+  X,
+  Plus,
+  Minus,
+  Check,
+  Play,
+  Pause,
+  Stop,
+} from '@phosphor-icons/react'
+
+// Business & Work
+export {
+  Brain,
+  Robot,
+  Gear,
+  GearSix,
+  Files,
+  File,
+  FileText,
+  Database,
+  Receipt,
+  Wallet,
+  Clock,
+  Calendar,
+  VideoCamera,
+  ChatCircle,
+  ChartBar,
+  ChartLineUp,
+  Handshake,
+  UserPlus,
+  UsersThree,
+  User,
+  Users,
+  SignOut,
+  SignIn,
+} from '@phosphor-icons/react'
+
+// Industries
+export {
+  Buildings,
+  Briefcase,
+  FirstAid,
+  ShoppingCart,
+  AddressBook,
+} from '@phosphor-icons/react'
+
+// Status & Feedback
+export {
+  CheckCircle,
+  CheckSquare,
+  WarningCircle,
+  Warning,
+  Info,
+  Question,
+  Circle,
+} from '@phosphor-icons/react'
+
+// Social & Communication
+export {
+  LinkedinLogo,
+  XLogo,
+  EnvelopeSimple,
+  Envelope,
+  Phone,
+  Globe,
+} from '@phosphor-icons/react'
+
+// UI Elements
+export {
+  House,
+  MagnifyingGlass,
+  Trash,
+  PencilSimple,
+  Copy,
+  DotsThree,
+  DotsThreeVertical,
+  Eye,
+  EyeSlash,
+  Funnel,
+  SortAscending,
+  SortDescending,
+  Download,
+  Upload,
+  Link,
+  ArrowSquareOut,
+} from '@phosphor-icons/react'
+
+// Re-export Icon type for TypeScript
+export type { Icon, IconProps } from '@phosphor-icons/react'

package/src/index.ts

@@ -0,0 +1,50 @@
+// Core Components
+export { Button, buttonVariants } from './components/button'
+export type { ButtonProps } from './components/button'
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from './components/sheet'
+
+export { Logo } from './components/logo'
+export type { LogoProps } from './components/logo'
+
+// New Design System Components
+export { Badge, badgeVariants } from './components/badge'
+export type { BadgeProps } from './components/badge'
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from './components/card'
+
+export { Progress, progressVariants } from './components/progress'
+export type { ProgressProps } from './components/progress'
+
+export { IconBox, iconBoxVariants } from './components/icon-box'
+export type { IconBoxProps } from './components/icon-box'
+
+export { Tag, tagVariants } from './components/tag'
+export type { TagProps } from './components/tag'
+
+export { Stat, statVariants, valueVariants } from './components/stat'
+export type { StatProps } from './components/stat'
+
+// Utilities
+export { cn } from './lib/utils'
+
+// Icons - Re-exported from @phosphor-icons/react
+export * from './icons'

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}