@licklist/design 0.78.5-dev.69 → 0.78.5-dev.70

package/src/v2/components/TableControls/TableControls.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { Button } from '../Button'
+import { QuickFilter } from '../QuickFilter'
+import type { QuickFilterOption } from '../QuickFilter'
+import './TableControls.scss'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface TableSearchConfig {
+  label?: string
+  placeholder?: string
+  value: string
+  onChange: (value: string) => void
+}
+
+export interface TableFilterConfig {
+  label: string
+  value: string
+  isActive: boolean
+  onClick: () => void
+}
+
+export interface TableHeaderAction {
+  label: string
+  icon?: React.ReactNode
+  onClick: () => void
+  variant?: 'primary' | 'primary-soft' | 'secondary-soft' | 'tertiary-soft' | 'primary-outline' | 'outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info'
+}
+
+export interface TableControlsProps {
+  searchConfig?: TableSearchConfig
+  filters?: TableFilterConfig[]
+  actions?: TableHeaderAction[]
+  filterLabel?: string
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const TableControls: React.FC<TableControlsProps> = ({
+  searchConfig,
+  filters,
+  actions,
+  filterLabel = 'Quick Filters:',
+}) => {
+  const filterOptions: QuickFilterOption[] = (filters ?? []).map((f) => ({
+    label: f.label,
+    value: f.value,
+  }))
+  const selectedFilterValues = (filters ?? [])
+    .filter((f) => f.isActive)
+    .map((f) => f.value)
+
+  const handleFilterChange = (selected: string[]) => {
+    ;(filters ?? []).forEach((f) => {
+      const wasActive = f.isActive
+      const nowActive = selected.includes(f.value)
+      if (wasActive !== nowActive) f.onClick()
+    })
+  }
+
+  return (
+    <div className="table-controls">
+      {/* ── Search + actions row ── */}
+      {(searchConfig || (actions && actions.length > 0)) && (
+        <div className="table-controls__top-row">
+          {searchConfig && (
+            <div className="table-controls__search-group">
+              {searchConfig.label && (
+                <label className="table-controls__search-label">
+                  {searchConfig.label}
+                </label>
+              )}
+              <input
+                className="table-controls__search"
+                type="text"
+                placeholder={searchConfig.placeholder ?? 'Search…'}
+                value={searchConfig.value}
+                onChange={(e) => searchConfig.onChange(e.target.value)}
+              />
+            </div>
+          )}
+
+          {actions && actions.length > 0 && (
+            <div
+              className="table-controls__actions"
+              style={searchConfig?.label ? { marginTop: '22px' } : undefined}
+            >
+              {actions.map((action, i) => (
+                <Button key={i} variant={action.variant ?? 'primary'} onClick={action.onClick}>
+                  {action.icon}
+                  {action.label}
+                </Button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── Quick filters row ── */}
+      {filterOptions.length > 0 && (
+        <QuickFilter
+          label={filterLabel}
+          options={filterOptions}
+          selectedValues={selectedFilterValues}
+          onChange={handleFilterChange}
+        />
+      )}
+    </div>
+  )
+}

package/src/v2/components/TableControls/index.ts

@@ -0,0 +1,7 @@
+export { TableControls } from './TableControls'
+export type {
+  TableControlsProps,
+  TableSearchConfig,
+  TableFilterConfig,
+  TableHeaderAction,
+} from './TableControls'

package/src/v2/components/Tabs/Tabs.scss

@@ -0,0 +1,36 @@
+@import '../../styles/index.scss';
+
+.tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border-primary, #e8e9ef);
+
+  &__tab {
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    padding: 12px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: var(--font-family-sans);
+    color: var(--label-secondary, #626a90);
+    cursor: pointer;
+    position: relative;
+    margin-bottom: -1px;
+    transition: color 0.15s ease;
+
+    &:hover:not(:disabled) {
+      color: var(--label-primary, #121e52);
+    }
+
+    &--active {
+      color: var(--label-primary, #121e52);
+      border-bottom-color: var(--border-selected, #6200ee);
+    }
+
+    &--disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+}

package/src/v2/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tabs } from './Tabs'
+
+const meta: Meta<typeof Tabs> = {
+  title: 'v2/Components/Tabs',
+  component: Tabs,
+  parameters: { layout: 'centered' },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Tabs>
+
+export const Default: Story = {
+  render: () => {
+    const [activeTab, setActiveTab] = useState('overview')
+
+    return (
+      <div style={{ width: 400 }}>
+        <Tabs
+          tabs={[
+            { value: 'overview', label: 'Overview' },
+            { value: 'details', label: 'Details' },
+            { value: 'history', label: 'History' },
+          ]}
+          activeTab={activeTab}
+          onChange={setActiveTab}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyTabs: Story = {
+  render: () => {
+    const [activeTab, setActiveTab] = useState('bookings')
+
+    return (
+      <div style={{ width: 600 }}>
+        <Tabs
+          tabs={[
+            { value: 'bookings', label: 'Bookings' },
+            { value: 'payments', label: 'Payments' },
+            { value: 'reviews', label: 'Reviews' },
+            { value: 'analytics', label: 'Analytics' },
+            { value: 'settings', label: 'Settings' },
+          ]}
+          activeTab={activeTab}
+          onChange={setActiveTab}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithDisabled: Story = {
+  render: () => {
+    const [activeTab, setActiveTab] = useState('active')
+
+    return (
+      <div style={{ width: 400 }}>
+        <Tabs
+          tabs={[
+            { value: 'active', label: 'Active' },
+            { value: 'pending', label: 'Pending', disabled: true },
+            { value: 'archived', label: 'Archived' },
+          ]}
+          activeTab={activeTab}
+          onChange={setActiveTab}
+        />
+      </div>
+    )
+  },
+}

package/src/v2/components/Tabs/Tabs.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import './Tabs.scss'
+
+export interface TabItem {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface TabsProps {
+  tabs: TabItem[]
+  activeTab: string
+  onChange(value: string): void
+  className?: string
+}
+
+export const Tabs: React.FC<TabsProps> = ({
+  tabs,
+  activeTab,
+  onChange,
+  className = '',
+}) => (
+  <div className={`tabs ${className}`}>
+    {tabs.map((tab) => {
+      const isActive = tab.value === activeTab
+      const isDisabled = tab.disabled ?? false
+
+      const modifiers = [
+        isActive ? 'tabs__tab--active' : '',
+        isDisabled ? 'tabs__tab--disabled' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')
+
+      return (
+        <button
+          key={tab.value}
+          type="button"
+          className={`tabs__tab ${modifiers}`}
+          disabled={isDisabled}
+          onClick={() => {
+            if (!isDisabled) {
+              onChange(tab.value)
+            }
+          }}
+        >
+          {tab.label}
+        </button>
+      )
+    })}
+  </div>
+)

package/src/v2/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs'
+export type { TabsProps, TabItem } from './Tabs'

package/src/v2/icons/index.tsx

@@ -351,8 +351,227 @@ export const DeleteIcon = ({ width = 24, height = 24 }: { width?: number; height
   </svg>
 )
 
+export const UserAddIcon = ({ width = 24, height = 24 }: { width?: number; height?: number } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 20C12.6863 20 10 22.6863 10 26H8C8 21.5817 11.5817 18 16 18V20ZM22 21H25V23H22V26H20V23H17V21H20V18H22V21ZM16 5C19.315 5 22 7.685 22 11C22 14.315 19.315 17 16 17C12.685 17 10 14.315 10 11C10 7.685 12.685 5 16 5ZM16 7C13.79 7 12 8.79 12 11C12 13.21 13.79 15 16 15C18.21 15 20 13.21 20 11C20 8.79 18.21 7 16 7Z" fill="currentColor" />
+  </svg>
+)
+
+export const UserImportIcon = ({ width = 24, height = 24 }: { width?: number; height?: number } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 20C12.6863 20 10 22.6863 10 26H8C8 21.5817 11.5817 18 16 18V20ZM16 5C19.315 5 22 7.685 22 11C22 14.315 19.315 17 16 17C12.685 17 10 14.315 10 11C10 7.685 12.685 5 16 5ZM16 7C13.79 7 12 8.79 12 11C12 13.21 13.79 15 16 15C18.21 15 20 13.21 20 11C20 8.79 18.21 7 16 7Z" fill="currentColor" />
+    <path d="M22 23L25 23L21 18L17 23L20 23L20 28L22 28L22 23Z" fill="currentColor" />
+  </svg>
+)
+
+export const SlidersIcon = ({ width = 18, height = 18 }: { width?: number; height?: number } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13 9C14.3059 9 15.4141 9.83532 15.8262 11H24V13H15.8262C15.4141 14.1647 14.3059 15 13 15C11.6941 15 10.5859 14.1647 10.1738 13H8V11H10.1738C10.5859 9.83532 11.6941 9 13 9Z" fill="currentColor"/>
+    <path d="M19 17C20.3059 17 21.4141 17.8353 21.8262 19H24V21H21.8262C21.4141 22.1647 20.3059 23 19 23C17.6941 23 16.5859 22.1647 16.1738 21H8V19H16.1738C16.5859 17.8353 17.6941 17 19 17Z" fill="currentColor"/>
+  </svg>
+)
+
+export const ProviderPlusIcon = ({ width = 16, height = 16 }: { width?: number; height?: number } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 10L17 6.5V24H8V10Z" fill="currentColor" fillOpacity="0.1"/>
+    <path d="M17.3291 5.24414C17.5886 5.14978 17.8753 5.28351 17.9697 5.54297C17.9896 5.59773 18 5.6556 18 5.71387V10.667L24.3164 12.7725C24.7246 12.9086 25 13.2904 25 13.7207V23H27V25H5V23H7V9.7002C7.00011 9.27982 7.26314 8.90443 7.6582 8.76074L17.3291 5.24414ZM9 10.4014V23H16V7.85547L9 10.4014ZM18 23H23V14.4414L18 12.7744V23ZM25 5H28V7H25V10H23V7H20V5H23V2H25V5Z" fill="currentColor"/>
+  </svg>
+)
+
 export const ClockIcon = ({ width = 20, height = 20 }: { width?: number; height?: number } = {}) => (
   <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16C28 22.6274 22.6274 28 16 28ZM16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26ZM17 9V15.5858L21.2426 19.8284L19.8284 21.2426L15 16.4142V9H17Z" fill="currentColor" />
   </svg>
 )
+
+export const WarningTriangleIcon = () => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+    <path
+      d="M15.3496 8.46973C15.7414 7.84329 16.6543 7.84314 17.0459 8.46973L25.2412 21.583C25.6574 22.249 25.1788 23.113 24.3936 23.1133H8.00195C7.21654 23.1133 6.73711 22.249 7.15332 21.583L15.3496 8.46973ZM16.1973 19.1133C15.6451 19.1134 15.1973 19.5611 15.1973 20.1133C15.1973 20.6654 15.6451 21.1132 16.1973 21.1133C16.7495 21.1133 17.1972 20.6655 17.1973 20.1133C17.1973 19.561 16.7496 19.1133 16.1973 19.1133ZM15.1973 18.1133H17.1973V13.1133H15.1973V18.1133Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export const CheckCircleIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+    <path d="M16 7C20.9706 7 25 11.0294 25 16C25 20.9706 20.9706 25 16 25C11.0294 25 7 20.9706 7 16C7 11.0294 11.0294 7 16 7ZM14.4463 17.6055L12.7217 15.8076L11.2783 17.1924L14.3525 20.3945L21.6729 13.7402L20.3271 12.2598L14.4463 17.6055Z" fill="currentColor" />
+  </svg>
+)
+
+export const XCircleIcon = ({ size = 24 }: { size?: number } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+    <path d="M16.1975 7C21.1681 7 25.1975 11.0294 25.1975 16C25.1975 20.9706 21.1681 25 16.1975 25C11.2269 25 7.19751 20.9706 7.19751 16C7.19751 11.0294 11.2269 7 16.1975 7ZM16.1975 14.5859L13.3694 11.7578L11.9553 13.1719L14.7834 16L11.9553 18.8281L13.3694 20.2422L16.1975 17.4141L19.0256 20.2422L20.4397 18.8281L17.6116 16L20.4397 13.1719L19.0256 11.7578L16.1975 14.5859Z" fill="currentColor" />
+  </svg>
+)
+
+export const UserGroupIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+    <path d="M16 7C18.7614 7 21 9.23858 21 12C21 14.7614 18.7614 17 16 17C13.2386 17 11 14.7614 11 12C11 9.23858 13.2386 7 16 7ZM16 9C14.3431 9 13 10.3431 13 12C13 13.6569 14.3431 15 16 15C17.6569 15 19 13.6569 19 12C19 10.3431 17.6569 9 16 9ZM16 18C20.4183 18 24 19.7909 24 22V25H8V22C8 19.7909 11.5817 18 16 18ZM16 20C12.6863 20 10 21.3431 10 22V23H22V22C22 21.3431 19.3137 20 16 20Z" fill="currentColor" />
+  </svg>
+)
+
+export const UploadIcon = () => (
+  <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+    <path d="M12 16V8M12 8L8.5 11.5M12 8L15.5 11.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M4 17V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V17" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"/>
+  </svg>
+)
+
+export const ArrowDownSmallIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M8 10.5L3.5 6H12.5L8 10.5Z" fill="currentColor" />
+  </svg>
+)
+
+export const ToggleCheckIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 32 32" fill="none">
+    <path
+      d="M25.5029 11.5693L14.4727 24.1348L7.62012 17.6074L10.3799 14.7109L14.2148 18.3643L22.4971 8.93066L25.5029 11.5693Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export const ToggleCrossIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 32 32" fill="none">
+    <path
+      d="M24.1895 11.4658L18.7676 16.5L24.1895 21.5342L21.4668 24.4658L15.8281 19.2295L10.1895 24.4658L7.4668 21.5342L12.8877 16.5L7.4668 11.4658L10.1895 8.53418L15.8281 13.7695L21.4668 8.53418L24.1895 11.4658Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export const TrendUpIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M3 17L9 11L13 15L21 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <polyline points="15,7 21,7 21,13" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+export const TrendDownIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M3 7L9 13L13 9L21 17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <polyline points="15,17 21,17 21,11" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+export const TrendSteadyIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <line x1="4" y1="12" x2="20" y2="12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+  </svg>
+)
+
+export const TrendUpSmallIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path d="M2 10L6 6L9 9L12 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <polyline points="9,4 12,4 12,7" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+export const TrendDownSmallIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path d="M2 4L6 8L9 5L12 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <polyline points="9,10 12,10 12,7" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+export const TrendSteadySmallIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <line x1="2" y1="7" x2="12" y2="7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+export const NPSHappyIcon = () => (
+  <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+    <circle cx="11" cy="11" r="10" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <circle cx="8" cy="9.5" r="1" fill="currentColor" />
+    <circle cx="14" cy="9.5" r="1" fill="currentColor" />
+    <path d="M7.5 13.5C7.5 13.5 9 16 11 16C13 16 14.5 13.5 14.5 13.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+export const NPSNeutralIcon = () => (
+  <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+    <circle cx="11" cy="11" r="10" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <circle cx="8" cy="9.5" r="1" fill="currentColor" />
+    <circle cx="14" cy="9.5" r="1" fill="currentColor" />
+    <line x1="8" y1="14" x2="14" y2="14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+export const NPSSadIcon = () => (
+  <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+    <circle cx="11" cy="11" r="10" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <circle cx="8" cy="9.5" r="1" fill="currentColor" />
+    <circle cx="14" cy="9.5" r="1" fill="currentColor" />
+    <path d="M7.5 15.5C7.5 15.5 9 13 11 13C13 13 14.5 15.5 14.5 15.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+export const NPSSadFaceIcon = () => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+    <circle cx="20" cy="20" r="18" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <circle cx="14.5" cy="17" r="1.5" fill="currentColor" />
+    <circle cx="25.5" cy="17" r="1.5" fill="currentColor" />
+    <path d="M13 27C13 27 15.5 23 20 23C24.5 23 27 27 27 27" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+export const NPSNeutralFaceIcon = () => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+    <circle cx="20" cy="20" r="18" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <circle cx="14.5" cy="17" r="1.5" fill="currentColor" />
+    <circle cx="25.5" cy="17" r="1.5" fill="currentColor" />
+    <line x1="14" y1="26" x2="26" y2="26" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+export const NPSHappyFaceIcon = () => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+    <circle cx="20" cy="20" r="18" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <circle cx="14.5" cy="17" r="1.5" fill="currentColor" />
+    <circle cx="25.5" cy="17" r="1.5" fill="currentColor" />
+    <path d="M13 23C13 23 15.5 27 20 27C24.5 27 27 23 27 23" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+export const AnalyticsEmptyIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <rect x="6" y="30" width="8" height="12" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
+    <rect x="20" y="20" width="8" height="22" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
+    <rect x="34" y="10" width="8" height="32" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
+    <line x1="2" y1="44" x2="46" y2="44" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+  </svg>
+)
+
+export const PaymentsEmptyIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <rect x="6" y="12" width="36" height="26" rx="4" stroke="currentColor" strokeWidth="2" fill="none" />
+    <line x1="6" y1="20" x2="42" y2="20" stroke="currentColor" strokeWidth="2" />
+    <rect x="12" y="26" width="8" height="4" rx="1" fill="currentColor" opacity="0.4" />
+    <rect x="24" y="26" width="6" height="4" rx="1" fill="currentColor" opacity="0.2" />
+  </svg>
+)
+
+export const ReportsEmptyIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <rect x="8" y="6" width="32" height="36" rx="4" stroke="currentColor" strokeWidth="2" fill="none" />
+    <line x1="14" y1="16" x2="34" y2="16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    <line x1="14" y1="22" x2="34" y2="22" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    <line x1="14" y1="28" x2="26" y2="28" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    <path d="M30 32L34 36M34 32L30 36" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+  </svg>
+)
+
+export const SelectCheckIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+    <path
+      d="M10 3L4.5 8.5L2 6"
+      stroke="white"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)

package/src/v2/index.ts

@@ -57,6 +57,39 @@ export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps,
 export { ZonesResourcesPage } from './pages/ZonesResources'
 export type { ZonesResourcesPageProps } from './pages/ZonesResources'
 
+// DataTable Component
+export { DataTable } from './components/DataTable'
+export type { DataTableColumn, DataTableRowAction, DataTableProps, DataTableSortDirection } from './components/DataTable'
+
+// TableControls Component
+export { TableControls } from './components/TableControls'
+export type { TableControlsProps, TableSearchConfig, TableFilterConfig, TableHeaderAction } from './components/TableControls'
+
+// Tabs Component
+export { Tabs } from './components/Tabs'
+export type { TabsProps, TabItem } from './components/Tabs'
+
+// EmptyState Component
+export { EmptyState } from './components/EmptyState'
+export type { EmptyStateProps } from './components/EmptyState'
+
+// StepIndicator Component
+export { StepIndicator } from './components/StepIndicator'
+export type { StepIndicatorProps } from './components/StepIndicator'
+
+// RadioCard Component
+export { RadioCard } from './components/RadioCard'
+export type { RadioCardProps, RadioCardOption } from './components/RadioCard'
+
+// AvatarUpload Component
+export { AvatarUpload } from './components/AvatarUpload'
+export type { AvatarUploadProps } from './components/AvatarUpload'
+
+// InfoGrid Component
+export { InfoGrid } from './components/InfoGrid'
+export type { InfoGridProps, InfoGridItem } from './components/InfoGrid'
+
+
 // ============================================================================
 // Navigation Components
 // ============================================================================
@@ -155,6 +188,71 @@ export type { SettingsPageProps, SettingsTabsProps, SettingsTab, SidebarCustomis
 export { AuthLayout, LoginPage, ResetPasswordPage, CreatePasswordPage, VerifyEmailPage } from './pages/auth'
 export type { AuthLayoutProps, LoginPageProps, ResetPasswordPageProps, CreatePasswordPageProps, VerifyEmailPageProps } from './pages/auth'
 
+// ============================================================================
+// Admin Section
+// ============================================================================
+
+export {
+  // Home
+  AdminHomePage,
+  // Companies
+  AdminCompaniesPage, AdminCompanyDetailPage, AddCompanyPage,
+  // Providers
+  AdminProvidersPage, AdminProviderDetailPage, AddProviderPage, UpdateVenuePage,
+  // Users
+  AdminUsersPage, AdminUserDetailPage, AdminRolesPage,
+  EditRolePermissionsPage, EditUserPage, ChangeUserRolePage, CreateRolePage,
+  AdminPermissionsPage, CreatePermissionPage,
+  AddUserToProviderCompanyPage, UserActivityHistory,
+  // Customers
+  AdminCustomersPage,
+  // Analytics
+  AdminAnalyticsPage,
+  // Reports
+  AdminReportsPage,
+  // Payments
+  AdminPaymentsPage,
+  // Settings
+  AdminSettingsPage, AdminFeesPage,
+} from './admin'
+
+export type {
+  // Home
+  AdminHomePageProps, NPSSummaryData, NPSTrend, OnlineUsersData, BookingsSummaryData, BookingRow,
+  // Companies
+  AdminCompaniesPageProps, AdminCompanyRow, CompanyStatus,
+  AdminCompanyDetailPageProps, AdminCompanyDetailData, CompanyProvider,
+  AddCompanyPageProps, AddCompanyFormData, AddCompanyProvider, AddCompanyStep,
+  // Providers
+  AdminProvidersPageProps, AdminProviderRow, ProviderStatus, ProviderType,
+  AdminProviderDetailPageProps, AdminProviderDetailData, ProviderCompany, AccountManagerInfo,
+  AddProviderPageProps, AddProviderFormData, AddProviderCompany, AddProviderType, AddProviderStep,
+  UpdateVenuePageProps, VenueFormData, VenueWorkHour, VenueLocation, CategoryOption, TimezoneOption,
+  // Users
+  AdminUsersPageProps, AdminUserRow, UserStatus, UserPrimaryRole,
+  AdminUserDetailPageProps, AdminUserDetailData, DetailUserAssignment, DetailUserStatus,
+  AdminRolesPageProps, RoleRow,
+  EditRolePermissionsPageProps, PermissionItem, PermissionCategory, PermissionValues,
+  EditUserPageProps, EditUserFormData,
+  CreateRolePageProps, CreateRoleFormData,
+  AdminPermissionsPageProps, PermissionRow,
+  CreatePermissionPageProps, CreatePermissionFormData,
+  ChangeUserRolePageProps,
+  AddUserToProviderCompanyPageProps, AssignmentCandidate, NewAssignment, AssignmentRole, AssignmentRoleOption,
+  UserActivityHistoryProps, ActivityEntry,
+  // Customers
+  AdminCustomersPageProps, AdminCustomerRow, CustomerWaiverStatus,
+  // Analytics
+  AdminAnalyticsPageProps, AnalyticsTab, NPSMetrics, NPSResponseRow, NPSScoreFilter, NPSTrendDirection,
+  // Reports
+  AdminReportsPageProps,
+  // Payments
+  AdminPaymentsPageProps,
+  // Settings
+  AdminSettingsPageProps, SettingsLink,
+  AdminFeesPageProps, FeeSettings, FeeStructure, PercentageConfig, FixedConfig, FixedPercentageConfig,
+} from './admin'
+
 // ============================================================================
 // Design Tokens
 // ============================================================================