@dilipod/ui 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",

package/src/components/error-state.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import * as React from 'react'
+import { Card, CardContent } from './card'
+import { IconBox } from './icon-box'
+import { Button } from './button'
+import { cn } from '../lib/utils'
+
+export interface ErrorStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Title text */
+  title?: string
+  /** Description text */
+  description?: string
+  /** Whether to show the retry button */
+  showRetry?: boolean
+  /** Whether to show the home/dashboard link */
+  showHomeLink?: boolean
+  /** Custom retry button text */
+  retryText?: string
+  /** Custom home link text */
+  homeLinkText?: string
+  /** Callback when retry is clicked */
+  onRetry?: () => void
+  /** Callback when home link is clicked */
+  onHomeClick?: () => void
+  /** Custom icon to display */
+  icon?: React.ReactNode
+  /** Custom action buttons */
+  actions?: React.ReactNode
+}
+
+const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(
+  (
+    {
+      title = 'Something went wrong',
+      description = 'We encountered an error loading this page. Please try again.',
+      showRetry = true,
+      showHomeLink = true,
+      retryText = 'Try again',
+      homeLinkText = 'Go to dashboard',
+      onRetry,
+      onHomeClick,
+      icon,
+      actions,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    // Default icon - Warning icon
+    const defaultIcon = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="currentColor"
+        viewBox="0 0 256 256"
+        className="text-red-500"
+      >
+        <path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z" />
+      </svg>
+    )
+
+    // Default refresh icon for retry button
+    const refreshIcon = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        viewBox="0 0 256 256"
+        className="mr-2"
+      >
+        <path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64A80,80,0,1,0,207.6,176.16a8,8,0,1,1,13.54,8.49A96,96,0,1,1,227.59,64l.3-.31L208,44.31V56a8,8,0,0,0,8,8h16A8,8,0,0,0,240,56Z" />
+      </svg>
+    )
+
+    const hasDefaultActions = (showRetry && onRetry) || (showHomeLink && onHomeClick)
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center justify-center min-h-[60vh]', className)}
+        {...props}
+      >
+        <Card className="max-w-md w-full">
+          <CardContent className="p-8 text-center">
+            <IconBox size="lg" className="mx-auto mb-4 bg-red-50">
+              {icon || defaultIcon}
+            </IconBox>
+            <h2 className="text-lg font-semibold text-[var(--black)] mb-2">
+              {title}
+            </h2>
+            <p className="text-sm text-muted-foreground mb-6">{description}</p>
+            {actions ? (
+              <div className="flex gap-3 justify-center">{actions}</div>
+            ) : hasDefaultActions ? (
+              <div className="flex gap-3 justify-center">
+                {showRetry && onRetry && (
+                  <Button variant="outline" onClick={onRetry}>
+                    {refreshIcon}
+                    {retryText}
+                  </Button>
+                )}
+                {showHomeLink && onHomeClick && (
+                  <Button onClick={onHomeClick}>{homeLinkText}</Button>
+                )}
+              </div>
+            ) : null}
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+)
+ErrorState.displayName = 'ErrorState'
+
+export { ErrorState }

package/src/components/metric-label.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+export interface MetricLabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** The label text */
+  children: React.ReactNode
+}
+
+/**
+ * MetricLabel - A utility component for consistent metric labeling
+ * 
+ * Uses the standardized pattern: text-xs uppercase tracking-wide text-muted-foreground
+ * Typically used above metric values in dashboards and cards.
+ * 
+ * @example
+ * <MetricLabel>Monthly Revenue</MetricLabel>
+ * <p className="text-2xl font-bold">€5,000</p>
+ */
+const MetricLabel = React.forwardRef<HTMLParagraphElement, MetricLabelProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <p
+        ref={ref}
+        className={cn(
+          'text-xs text-muted-foreground uppercase tracking-wide',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </p>
+    )
+  }
+)
+MetricLabel.displayName = 'MetricLabel'
+
+export interface MetricValueProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** The value to display */
+  children: React.ReactNode
+  /** Size variant */
+  size?: 'default' | 'lg' | 'sm'
+  /** Highlight the value (uses brand cyan) */
+  highlight?: boolean
+}
+
+/**
+ * MetricValue - A utility component for consistent metric value display
+ * 
+ * Pairs with MetricLabel for a complete metric display pattern.
+ * 
+ * @example
+ * <MetricLabel>Monthly Revenue</MetricLabel>
+ * <MetricValue highlight>€5,000</MetricValue>
+ */
+const MetricValue = React.forwardRef<HTMLParagraphElement, MetricValueProps>(
+  ({ className, children, size = 'default', highlight = false, ...props }, ref) => {
+    return (
+      <p
+        ref={ref}
+        className={cn(
+          'font-bold mt-1',
+          size === 'lg' && 'text-3xl',
+          size === 'default' && 'text-2xl',
+          size === 'sm' && 'text-xl',
+          highlight && 'text-[#00e5cc]',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </p>
+    )
+  }
+)
+MetricValue.displayName = 'MetricValue'
+
+export interface MetricSubtextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** The subtext content */
+  children: React.ReactNode
+}
+
+/**
+ * MetricSubtext - A utility component for metric subtitles/descriptions
+ * 
+ * @example
+ * <MetricLabel>Monthly Revenue</MetricLabel>
+ * <MetricValue>€5,000</MetricValue>
+ * <MetricSubtext>ARR: €60,000</MetricSubtext>
+ */
+const MetricSubtext = React.forwardRef<HTMLParagraphElement, MetricSubtextProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <p
+        ref={ref}
+        className={cn(
+          'text-xs text-muted-foreground mt-1',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </p>
+    )
+  }
+)
+MetricSubtext.displayName = 'MetricSubtext'
+
+/**
+ * Metric - A compound component combining Label, Value, and optional Subtext
+ * 
+ * @example
+ * <Metric>
+ *   <MetricLabel>Monthly Revenue</MetricLabel>
+ *   <MetricValue highlight>€5,000</MetricValue>
+ *   <MetricSubtext>ARR: €60,000</MetricSubtext>
+ * </Metric>
+ */
+const Metric = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(className)}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+Metric.displayName = 'Metric'
+
+export { MetricLabel, MetricValue, MetricSubtext, Metric }

package/src/components/tabs.tsx

@@ -74,7 +74,9 @@ const TabsTriggerUnderline = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground border-b-2 border-transparent -mb-px data-[state=active]:text-foreground data-[state=active]:border-[var(--cyan)] disabled:pointer-events-none disabled:opacity-50',
+      'inline-flex items-center justify-center whitespace-nowrap px-4 py-2.5 text-sm font-medium text-muted-foreground transition-all hover:text-foreground border-b-2 border-transparent -mb-px',
+      'data-[state=active]:text-[var(--cyan)] data-[state=active]:border-[var(--cyan)] data-[state=active]:font-semibold',
+      'disabled:pointer-events-none disabled:opacity-50',
       className
     )}
     {...props}

package/src/index.ts

@@ -46,6 +46,9 @@ export type { StatProps } from './components/stat'
 export { MetricCard, metricCardVariants } from './components/metric-card'
 export type { MetricCardProps } from './components/metric-card'
 
+export { MetricLabel, MetricValue, MetricSubtext, Metric } from './components/metric-label'
+export type { MetricLabelProps, MetricValueProps, MetricSubtextProps } from './components/metric-label'
+
 export { UsageBar, usageBarVariants } from './components/usage-bar'
 export type { UsageBarProps } from './components/usage-bar'
 
@@ -121,13 +124,10 @@ export {
   DropdownMenuRadioGroup,
 } from './components/dropdown-menu'
 
-export {
-  Sidebar,
-  SidebarNavItem,
-} from './components/sidebar'
+export { Sidebar } from './components/sidebar'
 export type {
   SidebarProps,
-  SidebarNavItem as SidebarNavItemType,
+  SidebarNavItem,
   SidebarNavItemProps,
 } from './components/sidebar'
 
@@ -137,6 +137,9 @@ export type { AlertProps } from './components/alert'
 export { EmptyState } from './components/empty-state'
 export type { EmptyStateProps } from './components/empty-state'
 
+export { ErrorState } from './components/error-state'
+export type { ErrorStateProps } from './components/error-state'
+
 export { CodeBlock } from './components/code-block'
 export type { CodeBlockProps } from './components/code-block'