@mohammad-irfan/create-dashboard-kit 1.0.0

package/templates/source/components/controls/Button.tsx

@@ -0,0 +1,69 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import type { ButtonShape } from '../../config/dashboard.config.ts'
+import { getButtonShapeClass } from '../../config/dashboard.config.ts'
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+export type ButtonSize = 'sm' | 'md' | 'lg'
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  shape?: ButtonShape
+  leftIcon?: ReactNode
+  rightIcon?: ReactNode
+  isLoading?: boolean
+  children?: ReactNode
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  shape = 'pill',
+  leftIcon,
+  rightIcon,
+  isLoading,
+  disabled,
+  className = '',
+  children,
+  ...props
+}: ButtonProps) {
+  const shapeClass = getButtonShapeClass(shape)
+
+  const sizeClasses = {
+    sm: 'px-3 py-1.5 text-xs gap-1.5',
+    md: 'px-4 py-2 text-sm gap-2',
+    lg: 'px-5 py-2.5 text-base gap-2.5 font-semibold',
+  }[size]
+
+  const variantClasses = {
+    primary:
+      'bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90 hover:shadow-xs active:scale-[0.99]',
+    secondary:
+      'border border-border/80 bg-surface text-foreground shadow-2xs hover:bg-muted/70 active:scale-[0.99]',
+    outline:
+      'border border-border bg-transparent text-foreground hover:bg-muted/60 active:scale-[0.99]',
+    ghost:
+      'text-muted-foreground hover:bg-muted/60 hover:text-foreground active:scale-[0.99]',
+    danger:
+      'bg-danger text-white shadow-2xs hover:bg-danger/90 active:scale-[0.99]',
+  }[variant]
+
+  return (
+    <button
+      disabled={disabled || isLoading}
+      className={`inline-flex items-center justify-center font-medium transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60 select-none ${shapeClass} ${sizeClasses} ${variantClasses} ${className}`}
+      {...props}
+    >
+      {isLoading ? (
+        <span
+          aria-hidden="true"
+          className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+        />
+      ) : leftIcon ? (
+        <span className="shrink-0">{leftIcon}</span>
+      ) : null}
+      {children}
+      {!isLoading && rightIcon ? <span className="shrink-0">{rightIcon}</span> : null}
+    </button>
+  )
+}

package/templates/source/components/controls/Input.tsx

@@ -0,0 +1,59 @@
+import type { InputHTMLAttributes, ReactNode } from 'react'
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+  helperText?: string
+  leftIcon?: ReactNode
+  rightIcon?: ReactNode
+}
+
+export function Input({
+  id,
+  label,
+  error,
+  helperText,
+  leftIcon,
+  rightIcon,
+  className = '',
+  ...props
+}: InputProps) {
+  const inputId = id || (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined)
+
+  return (
+    <div className="w-full">
+      {label ? (
+        <label htmlFor={inputId} className="block text-sm font-medium text-foreground mb-1">
+          {label}
+        </label>
+      ) : null}
+      <div className="relative flex items-center">
+        {leftIcon ? (
+          <span className="pointer-events-none absolute left-3 flex items-center text-muted-foreground">
+            {leftIcon}
+          </span>
+        ) : null}
+        <input
+          id={inputId}
+          aria-invalid={Boolean(error)}
+          className={`block w-full rounded-lg border bg-input px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground shadow-2xs transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 ${
+            error
+              ? 'border-danger focus-visible:ring-danger'
+              : 'border-border focus:border-primary'
+          } ${leftIcon ? 'pl-10' : ''} ${rightIcon ? 'pr-10' : ''} ${className}`}
+          {...props}
+        />
+        {rightIcon ? (
+          <span className="absolute right-3 flex items-center text-muted-foreground">
+            {rightIcon}
+          </span>
+        ) : null}
+      </div>
+      {error ? (
+        <p className="mt-1 text-xs text-danger-fg">{error}</p>
+      ) : helperText ? (
+        <p className="mt-1 text-xs text-muted-foreground">{helperText}</p>
+      ) : null}
+    </div>
+  )
+}

package/templates/source/components/controls/SearchBar.tsx

@@ -0,0 +1,44 @@
+import type { ChangeEvent } from 'react'
+import { CloseIcon, SearchIcon } from '../icons/IconSet.tsx'
+
+export interface SearchBarProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  ariaLabel?: string
+  className?: string
+}
+
+export function SearchBar({
+  value,
+  onChange,
+  placeholder = 'Search...',
+  ariaLabel = 'Search records',
+  className = '',
+}: SearchBarProps) {
+  return (
+    <div className={`relative flex items-center ${className}`}>
+      <span className="pointer-events-none absolute left-3 flex items-center text-muted-foreground">
+        <SearchIcon className="h-4 w-4" />
+      </span>
+      <input
+        type="search"
+        value={value}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
+        className="block w-full rounded-lg border border-border bg-input pl-9 pr-8 py-1.5 text-sm text-foreground placeholder:text-muted-foreground shadow-2xs transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus:border-primary"
+      />
+      {value ? (
+        <button
+          type="button"
+          onClick={() => onChange('')}
+          aria-label="Clear search"
+          className="absolute right-2.5 flex items-center justify-center rounded-full p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground focus:outline-none"
+        >
+          <CloseIcon className="h-3.5 w-3.5" />
+        </button>
+      ) : null}
+    </div>
+  )
+}

package/templates/source/components/controls/Select.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode, SelectHTMLAttributes } from 'react'
+
+export interface SelectOption {
+  value: string | number
+  label: string
+  disabled?: boolean
+}
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string
+  options?: SelectOption[]
+  error?: string
+  helperText?: string
+  children?: ReactNode
+}
+
+export function Select({
+  id,
+  label,
+  options,
+  error,
+  helperText,
+  className = '',
+  children,
+  ...props
+}: SelectProps) {
+  const selectId = id || (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined)
+
+  return (
+    <div className="w-full">
+      {label ? (
+        <label htmlFor={selectId} className="block text-sm font-medium text-foreground mb-1">
+          {label}
+        </label>
+      ) : null}
+      <select
+        id={selectId}
+        aria-invalid={Boolean(error)}
+        className={`block w-full rounded-lg border bg-input px-3 py-2 text-sm font-medium text-foreground shadow-2xs transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 ${
+          error
+            ? 'border-danger focus-visible:ring-danger'
+            : 'border-border focus:border-primary'
+        } ${className}`}
+        {...props}
+      >
+        {options
+          ? options.map((opt) => (
+              <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                {opt.label}
+              </option>
+            ))
+          : children}
+      </select>
+      {error ? (
+        <p className="mt-1 text-xs text-danger-fg">{error}</p>
+      ) : helperText ? (
+        <p className="mt-1 text-xs text-muted-foreground">{helperText}</p>
+      ) : null}
+    </div>
+  )
+}

package/templates/source/components/controls/ThemeToggle.tsx

@@ -0,0 +1,23 @@
+import { MoonIcon, SunIcon } from '../icons/IconSet.tsx'
+import { useTheme } from '../../theme/useTheme.ts'
+
+export interface ThemeToggleProps {
+  className?: string
+}
+
+export function ThemeToggle({ className = '' }: ThemeToggleProps) {
+  const { isDark, toggleTheme } = useTheme()
+  const label = isDark ? 'Switch to light theme' : 'Switch to dark theme'
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={label}
+      title={label}
+      className={`inline-flex items-center justify-center rounded-xl p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ${className}`}
+    >
+      {isDark ? <MoonIcon className="h-5 w-5" /> : <SunIcon className="h-5 w-5" />}
+    </button>
+  )
+}

package/templates/source/components/feedback/NotificationCenter.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useRef, useState, type CSSProperties } from 'react'
+import { BellIcon, CheckIcon } from '../icons/IconSet.tsx'
+
+export interface NotificationItemData {
+  id: string
+  title: string
+  message: string
+  timestamp: string
+  read?: boolean
+  link?: string
+}
+
+export interface NotificationCenterProps {
+  notifications?: NotificationItemData[]
+  onMarkAllRead?: () => void
+  onItemClick?: (item: NotificationItemData) => void
+  className?: string
+}
+
+export function NotificationCenter({
+  notifications = [],
+  onMarkAllRead,
+  onItemClick,
+  className = '',
+}: NotificationCenterProps) {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState<CSSProperties>({})
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  const unreadCount = notifications.filter((n) => !n.read).length
+
+  const handleToggle = () => {
+    if (!open && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      setPosition({
+        top: rect.bottom + 8,
+        right: Math.max(12, window.innerWidth - rect.right),
+      })
+    }
+    setOpen((prev) => !prev)
+  }
+
+  useEffect(() => {
+    if (!open) return
+
+    function onPointerDown(event: PointerEvent) {
+      if (
+        panelRef.current &&
+        !panelRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setOpen(false)
+        buttonRef.current?.focus()
+      }
+    }
+
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  return (
+    <div className={`relative inline-block ${className}`}>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={handleToggle}
+        aria-label={`Notifications (${unreadCount} unread)`}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        className="relative inline-flex items-center justify-center rounded-xl p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <BellIcon className="h-5 w-5" />
+        {unreadCount > 0 ? (
+          <span
+            aria-hidden="true"
+            className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground"
+          >
+            {unreadCount > 9 ? '9+' : unreadCount}
+          </span>
+        ) : null}
+      </button>
+
+      {open ? (
+        <div
+          ref={panelRef}
+          role="dialog"
+          aria-label="Notification center"
+          style={position}
+          className="fixed z-50 w-[380px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border border-border bg-surface text-foreground shadow-lg"
+        >
+          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+            <h3 className="text-sm font-semibold text-foreground">Notifications</h3>
+            {onMarkAllRead && unreadCount > 0 ? (
+              <button
+                type="button"
+                onClick={onMarkAllRead}
+                className="inline-flex items-center gap-1.5 rounded-md text-xs font-medium text-primary hover:text-primary/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <CheckIcon className="h-3.5 w-3.5" />
+                <span>Mark all read</span>
+              </button>
+            ) : null}
+          </div>
+
+          <div className="max-h-80 overflow-y-auto divide-y divide-border/40">
+            {notifications.length === 0 ? (
+              <div className="p-8 text-center text-muted-foreground">
+                <BellIcon className="mx-auto h-6 w-6 mb-2 text-muted-foreground/60" />
+                <p className="text-xs font-medium">All caught up!</p>
+                <p className="text-[11px] text-muted-foreground/70 mt-0.5">
+                  No new notifications right now.
+                </p>
+              </div>
+            ) : (
+              notifications.map((item) => (
+                <div
+                  key={item.id}
+                  onClick={() => onItemClick?.(item)}
+                  className={`p-3 text-left transition-colors cursor-pointer hover:bg-muted/40 ${
+                    !item.read ? 'bg-primary/5' : ''
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <p className="text-xs font-bold text-foreground">{item.title}</p>
+                    <span className="text-[10px] text-muted-foreground whitespace-nowrap">
+                      {item.timestamp}
+                    </span>
+                  </div>
+                  <p className="mt-1 text-xs text-muted-foreground line-clamp-2">{item.message}</p>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/templates/source/components/feedback/Skeleton.tsx

@@ -0,0 +1,22 @@
+export interface SkeletonProps {
+  className?: string
+}
+
+export function Skeleton({ className = '' }: SkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={`animate-pulse rounded-xl bg-muted/60 dark:bg-muted/40 ${className}`}
+    />
+  )
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="rounded-2xl border border-border/40 bg-surface p-6 shadow-2xs space-y-4">
+      <Skeleton className="h-6 w-1/3" />
+      <Skeleton className="h-4 w-2/3" />
+      <Skeleton className="h-12 w-full" />
+    </div>
+  )
+}

package/templates/source/components/feedback/StatusBadge.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+
+import {
+  STATUS_VARIANT_STYLES,
+  type StatusVariant,
+} from './statusBadgeStyles.ts'
+
+export { STATUS_VARIANT_STYLES, type StatusVariant }
+ 
+export interface StatusBadgeProps {
+  label?: string
+  variant?: StatusVariant
+  dot?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function StatusBadge({
+  label,
+  variant = 'neutral',
+  dot = false,
+  className = '',
+  children,
+}: StatusBadgeProps) {
+  const styles = STATUS_VARIANT_STYLES[variant] || STATUS_VARIANT_STYLES.neutral
+
+  return (
+    <span
+      className={`inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset ${styles.badge} ${className}`}
+    >
+      {dot ? <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${styles.dot}`} /> : null}
+      {children || label}
+    </span>
+  )
+}

package/templates/source/components/feedback/statusBadgeStyles.ts

@@ -0,0 +1,28 @@
+export type StatusVariant = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'purple'
+
+export const STATUS_VARIANT_STYLES: Record<StatusVariant, { badge: string; dot: string }> = {
+  success: {
+    badge: 'bg-emerald-100 text-emerald-700 ring-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:ring-emerald-500/25',
+    dot: 'bg-emerald-500',
+  },
+  warning: {
+    badge: 'bg-amber-100 text-amber-800 ring-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:ring-amber-500/25',
+    dot: 'bg-amber-500',
+  },
+  danger: {
+    badge: 'bg-red-100 text-red-700 ring-red-200 dark:bg-red-500/15 dark:text-red-300 dark:ring-red-500/25',
+    dot: 'bg-red-500',
+  },
+  info: {
+    badge: 'bg-blue-100 text-blue-700 ring-blue-200 dark:bg-blue-500/15 dark:text-blue-300 dark:ring-blue-500/25',
+    dot: 'bg-blue-500',
+  },
+  neutral: {
+    badge: 'bg-slate-100 text-slate-700 ring-slate-200 dark:bg-slate-400/15 dark:text-slate-300 dark:ring-slate-400/25',
+    dot: 'bg-slate-400',
+  },
+  purple: {
+    badge: 'bg-purple-100 text-purple-700 ring-purple-200 dark:bg-purple-500/15 dark:text-purple-300 dark:ring-purple-500/25',
+    dot: 'bg-purple-500',
+  },
+}