@licklist/design 0.78.5-dev.92 → 0.78.5-dev.94

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

@@ -2,30 +2,39 @@
 
 .tabs {
   display: flex;
-  gap: 0;
-  border-bottom: 1px solid var(--border-primary, #e8e9ef);
+  gap: 24px;
+  padding: 8px 0 0 8px;
 
   &__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);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
     cursor: pointer;
-    position: relative;
-    margin-bottom: -1px;
-    transition: color 0.15s ease;
 
     &:hover:not(:disabled) {
-      color: var(--label-primary, #121e52);
+      .tabs__tab-label {
+        color: var(--label-action);
+      }
+
+      .tabs__tab-indicator {
+        width: 50%;
+        background: var(--fill-action);
+      }
     }
 
     &--active {
-      color: var(--label-primary, #121e52);
-      border-bottom-color: var(--border-selected, #6200ee);
+      .tabs__tab-label {
+        color: var(--label-primary);
+      }
+
+      .tabs__tab-indicator {
+        width: 100%;
+        background: var(--fill-primary);
+      }
     }
 
     &--disabled {
@@ -33,4 +42,22 @@
       cursor: not-allowed;
     }
   }
+
+  &__tab-label {
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 18px;
+    font-family: var(--font-family-sans);
+    color: var(--label-secondary);
+    transition: color 0.15s;
+  }
+
+  &__tab-indicator {
+    width: 1px;
+    height: 2px;
+    background: transparent;
+    border-radius: 3px;
+    align-self: center;
+    transition: width 0.2s ease, background 0.15s;
+  }
 }

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

@@ -44,7 +44,8 @@ export const Tabs: React.FC<TabsProps> = ({
             }
           }}
         >
-          {tab.label}
+          <span className="tabs__tab-label">{tab.label}</span>
+          <div className="tabs__tab-indicator" />
         </button>
       )
     })}

package/src/v2/components/Toggle/Toggle.scss

@@ -0,0 +1,2 @@
+/* Toggle uses the bkit-switch styles from shadcn/components/ui/switch.scss */
+/* No additional overrides needed */

package/src/v2/components/Toggle/Toggle.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Switch } from '../../shadcn/components/ui/switch'
+import './Toggle.scss'
+
+export interface ToggleProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  disabled?: boolean
+  id?: string
+}
+
+export const Toggle: React.FC<ToggleProps> = ({ checked, onChange, disabled = false, id }) => (
+  <Switch
+    id={id}
+    checked={checked}
+    onCheckedChange={onChange}
+    disabled={disabled}
+    className="toggle-switch"
+  />
+)

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

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle'
+export type { ToggleProps } from './Toggle'

package/src/v2/components/Tooltip/Tooltip.tsx

@@ -61,4 +61,3 @@ const Tooltip: React.FC<TooltipProps> = ({
 }
 
 export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent }
-export type { TooltipProps }

package/src/v2/components/UserPanel/UserPanel.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import './UserPanel.scss'
 import { UserAvatar } from '../UserAvatar'
 
@@ -48,6 +49,7 @@ export const UserPanel: React.FC<UserPanelProps> = ({
     onProfileClick,
     onLogoutClick,
 }) => {
+    const { t } = useTranslation(['Design'])
     const displayFirstName = firstName || userName?.split(' ')[0] || 'User'
     const displayInitials = initials || userName?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2) || 'U'
 
@@ -75,7 +77,7 @@ export const UserPanel: React.FC<UserPanelProps> = ({
                             size="md"
                         />
                         <div className="user-panel__user-details">
-                            <h2 className="user-panel__greeting">Hey {displayFirstName}</h2>
+                            <h2 className="user-panel__greeting">{t('greetingHey', { name: displayFirstName })}</h2>
                             {email && (
                                 <span className="user-panel__email">{email}</span>
                             )}
@@ -84,7 +86,7 @@ export const UserPanel: React.FC<UserPanelProps> = ({
                     <button
                         onClick={onClose}
                         className="user-panel__close-btn"
-                        aria-label="Close user menu"
+                        aria-label={t('closeUserMenu')}
                     >
                         <CloseIcon />
                     </button>
@@ -97,7 +99,7 @@ export const UserPanel: React.FC<UserPanelProps> = ({
                         className="user-panel__menu-item"
                     >
                         <UserIcon />
-                        <span>Profile</span>
+                        <span>{t('profile')}</span>
                     </button>
                 </div>
 
@@ -108,7 +110,7 @@ export const UserPanel: React.FC<UserPanelProps> = ({
                         className="user-panel__menu-item"
                     >
                         <LogoutIcon />
-                        <span>Log out</span>
+                        <span>{t('logOutLower')}</span>
                     </button>
                 </div>
 
@@ -116,7 +118,9 @@ export const UserPanel: React.FC<UserPanelProps> = ({
                 <div className="user-panel__footer">
                     <div className="user-panel__user-badge">
                         <span>
-                            User: {userNumber ? String(userNumber).padStart(2, '0') : 'N/A'}{userRole ? ` - ${userRole}` : ''}
+                            {userRole
+                              ? t('userLabelWithRole', { id: userNumber ? String(userNumber).padStart(2, '0') : 'N/A', role: userRole })
+                              : t('userLabel', { id: userNumber ? String(userNumber).padStart(2, '0') : 'N/A' })}
                         </span>
                     </div>
                 </div>

package/src/v2/components/index.ts

@@ -27,7 +27,7 @@ export { NewTabs } from './NewTabs'
 export type { NewTabsProps, NewTabItem } from './NewTabs'
 
 export { StepIndicator } from './StepIndicator'
-export type { StepIndicatorProps, StepItem } from './StepIndicator'
+export type { StepIndicatorProps } from './StepIndicator'
 
 export { AvatarUpload } from './AvatarUpload'
 export type { AvatarUploadProps } from './AvatarUpload'
@@ -75,6 +75,7 @@ export { Button, ButtonText, GhostButton } from './Button'
 export type { ButtonProps, ButtonTextProps, GhostButtonProps } from './Button'
 
 export { Select } from './Select'
+export type { SelectProps, SelectOption } from './Select'
 
 export { Tooltip } from './Tooltip'
 
@@ -87,11 +88,26 @@ export { EntityHeader } from './EntityHeader'
 
 export { Alert } from './Alert'
 
+export { Toggle } from './Toggle'
+export type { ToggleProps } from './Toggle'
+
+export { FeatureToggle } from './FeatureToggle'
+export type { FeatureToggleProps } from './FeatureToggle'
+
+export { AccountManagerCard } from './AccountManagerCard'
+export type { AccountManagerCardProps } from './AccountManagerCard'
+
+export { NotificationBanner } from './NotificationBanner'
+export type { NotificationBannerProps, NotificationBannerVariant } from './NotificationBanner'
+
 export { NPSScore } from './NPSScore'
 
 export { Pagination } from './Pagination'
 export type { PaginationProps } from './Pagination'
 
+export { RadioCardGroup } from './RadioCard'
+export type { RadioCardGroupProps, RadioCardOption } from './RadioCard'
+
 export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './ZoneCard'
 export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, AddResourceButtonProps } from './ZoneCard'
 
@@ -143,6 +159,15 @@ export {
   BookingTypesIcon,
   SecurityIcon,
   UploadIcon,
+  WarningTriangleIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  UserGroupIcon,
+  CurrencyPoundIcon,
+  CurrencyDollarIcon,
+  CurrencyEuroIcon,
+  PercentIcon,
+  LayersIcon,
   SettingsPageWaiversIcon,
 } from '../icons'
 

package/src/v2/dashboard-analytics/blog-posts/Blog.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import './Blog.scss';
 
 interface BlogPost {
@@ -49,15 +50,16 @@ const ExternalLinkIcon = () => (
   </svg>
 );
 
-export const Blog: React.FC<BlogProps> = ({ 
-  posts = defaultPosts, 
+export const Blog: React.FC<BlogProps> = ({
+  posts = defaultPosts,
   logoUrl = 'https://api.builder.io/api/v1/image/assets/TEMP/1f8a6c2f7239cf2c859ace81bb32160a5d376121?placeholderIfAbsent=true',
   className = ''
 }) => {
+  const { t } = useTranslation(['Design']);
   return (
     <div className={`blog ${className}`}>
       <div className="blog__header">
-        <h2 className="blog__title">Latest Updates</h2>
+        <h2 className="blog__title">{t('latestUpdates')}</h2>
         <img 
           src={logoUrl} 
           alt="Logo" 
@@ -76,7 +78,7 @@ export const Blog: React.FC<BlogProps> = ({
               rel="noopener noreferrer"
               className="blog__post-link"
             >
-              Read more
+              {t('readMore')}
               <span className="blog__post-link-icon">
                 <ExternalLinkIcon />
               </span>

package/src/v2/dashboard-analytics/blog-posts/index.ts

@@ -1,2 +1,2 @@
 export { Blog } from './Blog';
-export type { BlogProps } from './Blog';
+export type { BlogProps, BlogPost } from './Blog';

package/src/v2/dashboard-analytics/chart/Chart.scss

@@ -24,12 +24,12 @@
   }
 
   &--refreshing {
+    border-color: rgba(31, 154, 181, 0.3);
+
     .chart__wrapper {
       opacity: 0.95;
       transition: opacity 0.2s ease-in-out;
     }
-    
-    border-color: rgba(31, 154, 181, 0.3);
   }
 
   &[data-full-width="true"] {

package/src/v2/dashboard-analytics/chart/Chart.tsx

@@ -23,7 +23,7 @@ export const Chart: React.FC<ChartProps> = ({
   isRevenue = false,
   className = '',
   period = 'today',
-  bookingType = 'bookings_for',
+  bookingType: _bookingType = 'bookings_for',
   isFullWidth: propIsFullWidth = false,
   isLoading = false,
   isRefreshing = false
@@ -55,11 +55,12 @@ export const Chart: React.FC<ChartProps> = ({
       
       return () => clearTimeout(timer);
     }
+    return undefined;
   }, [data, period]);
   const [isMobile, setIsMobile] = React.useState(false);
   const [isTablet, setIsTablet] = React.useState(false);
   const [detectedFullWidth, setDetectedFullWidth] = React.useState(false);
-  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+  const [_dimensions, _setDimensions] = React.useState({ width: 0, height: 0 });
   const chartRef = React.useRef<HTMLDivElement>(null);
 
   const isFullWidth = propIsFullWidth || detectedFullWidth;
@@ -71,7 +72,7 @@ export const Chart: React.FC<ChartProps> = ({
       
       if (chartRef.current) {
         const rect = chartRef.current.getBoundingClientRect();
-        setDimensions({ width: rect.width, height: rect.height });
+        _setDimensions({ width: rect.width, height: rect.height });
       }
     };
 
@@ -108,7 +109,7 @@ export const Chart: React.FC<ChartProps> = ({
   }, [period, forceRecalculation]);
 
   React.useEffect(() => {
-    if (propIsFullWidth !== undefined) return; 
+    if (propIsFullWidth !== undefined) return undefined;
     
     const checkChartWidth = () => {
       if (chartRef.current) {
@@ -153,7 +154,7 @@ export const Chart: React.FC<ChartProps> = ({
       
       setTimeout(() => {
         const rect = currentRef.getBoundingClientRect();
-        setDimensions({ width: rect.width, height: rect.height });
+        _setDimensions({ width: rect.width, height: rect.height });
       }, 10);
     }
   }, [period, forceResize, animationKey]);
@@ -548,26 +549,28 @@ export const Chart: React.FC<ChartProps> = ({
                 </linearGradient>
               </defs>
               <CartesianGrid strokeDasharray="3 3" stroke="#E8E9EF" />
-               <XAxis 
-                dataKey="time" 
+               {/* @ts-ignore recharts tickMargin typing issue */}
+               <XAxis
+                dataKey="time"
                 type="category"
                 axisLine={false}
                 tickLine={false}
-                tick={{ 
-                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11), 
-                  fill: '#626A90' 
+                tick={{
+                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11),
+                  fill: '#626A90'
                 }}
-                tickMargin={isMobile ? 5 : 10}
+                {...{ tickMargin: isMobile ? 5 : 10 } as any}
                 interval={xAxisInterval}
               />
-              <YAxis 
+              {/* @ts-ignore recharts tickMargin typing issue */}
+              <YAxis
                 domain={[yAxisMin, yAxisMax]}
                 ticks={ticks}
                 axisLine={false}
                 tickLine={false}
-                tick={{ 
-                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11), 
-                  fill: '#626A90' 
+                tick={{
+                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11),
+                  fill: '#626A90'
                 }}
                 tickFormatter={(value) => {
                   if (isRevenue) {
@@ -575,8 +578,8 @@ export const Chart: React.FC<ChartProps> = ({
                   }
                   return value.toString();
                 }}
-                tickMargin={isMobile ? 3 : 5}
-                width={isMobile ? 30 : (isTablet ? 35 : 40)} 
+                {...{ tickMargin: isMobile ? 3 : 5 } as any}
+                width={isMobile ? 30 : (isTablet ? 35 : 40)}
               />
               <Tooltip content={CustomTooltip} />
               {currentTimeRef && (

package/src/v2/dashboard-analytics/dashboard/Dashboard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Chart, ChartProps } from '../chart';
 import { MetricCard } from '../metric-card';
 import { Select } from '../../components/Select/Select';
@@ -74,6 +75,8 @@ export const Dashboard: React.FC<DashboardProps> = ({
   isLoading,
   isRefreshing = false,
 }) => {
+  const { t } = useTranslation(['Design']);
+
   const handleFilterChange = React.useCallback((filter: 'Today' | 'Yesterday' | 'This Week') => {
     onFilterChange?.(filter);
   }, [onFilterChange]);
@@ -82,10 +85,10 @@ export const Dashboard: React.FC<DashboardProps> = ({
 
   const getTimePeriodText = (filter: 'Today' | 'Yesterday' | 'This Week'): string => {
     switch (filter) {
-      case 'Today': return 'today';
-      case 'Yesterday': return 'yesterday';
-      case 'This Week': return 'this week';
-      default: return 'today';
+      case 'Today': return t('dashboardToday');
+      case 'Yesterday': return t('dashboardYesterday');
+      case 'This Week': return t('dashboardThisWeek');
+      default: return t('dashboardToday');
     }
   };
 
@@ -115,8 +118,8 @@ export const Dashboard: React.FC<DashboardProps> = ({
             onBookingTypeChange?.(newBookingType);
           }}
         >
-          <option value="Bookings For">Bookings For</option>
-          <option value="Bookings Made">Bookings Made</option>
+          <option value="Bookings For">{t('bookingsFor')}</option>
+          <option value="Bookings Made">{t('bookingsMade')}</option>
         </Select>
 
         <div className="dashboard__filter-container">
@@ -130,9 +133,9 @@ export const Dashboard: React.FC<DashboardProps> = ({
             }}
             className={showRefreshing ? 'select--refreshing' : ''}
           >
-            <option value="Today">Today</option>
-            <option value="Yesterday">Yesterday</option>
-            <option value="This Week">This Week</option>
+            <option value="Today">{t('dashboardTodayOption')}</option>
+            <option value="Yesterday">{t('dashboardYesterdayOption')}</option>
+            <option value="This Week">{t('dashboardThisWeekOption')}</option>
           </Select>
           
           {showRefreshing && (
@@ -146,7 +149,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
       <div className="dashboard__metrics-grid">
         <MetricCard
           icon="https://api.builder.io/api/v1/image/assets/TEMP/a9080a040516a2aee8e202c1fecbbf08f0f4f7b0?placeholderIfAbsent=true"
-          title={metrics.totalBookings.label || "Total Bookings"}
+          title={metrics.totalBookings.label || t('totalBookings')}
           value={metrics.totalBookings.value}
           performance={{
             icon: getTrendIcon(metrics.totalBookings.change, metrics.totalBookings.is_positive),
@@ -159,7 +162,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
 
         <MetricCard
           icon="https://api.builder.io/api/v1/image/assets/TEMP/d2cc0fb13dfe9a16e4258917cb2c331c1f0e1189?placeholderIfAbsent=true"
-          title={metrics.revenue.label || "Revenue"}
+          title={metrics.revenue.label || t('revenue')}
           value={metrics.revenue.value}
           performance={{
             icon: getTrendIcon(metrics.revenue.change, metrics.revenue.is_positive),
@@ -172,8 +175,8 @@ export const Dashboard: React.FC<DashboardProps> = ({
 
         <MetricCard
           icon="https://api.builder.io/api/v1/image/assets/TEMP/8c83d255f42836d5497be545d10a8ad9295aa968?placeholderIfAbsent=true"
-          title={metrics.numberOfPeople.label || `People booked in ${getTimePeriodText(timeFilter)}`}
-          value={metrics.numberOfPeople.formatted_value || `${metrics.numberOfPeople.value} people`}
+          title={metrics.numberOfPeople.label || t('peopleBookedIn', { period: getTimePeriodText(timeFilter) })}
+          value={metrics.numberOfPeople.formatted_value || t('peopleSuffix', { count: metrics.numberOfPeople.value })}
           performance={{
             icon: getTrendIcon(metrics.numberOfPeople.change, metrics.numberOfPeople.is_positive),
             text: metrics.numberOfPeople.change,
@@ -185,7 +188,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
 
         <MetricCard
           icon="https://api.builder.io/api/v1/image/assets/TEMP/265ca1f3a6e063263764400beb86070a49b952cb?placeholderIfAbsent=true"
-          title={metrics.busiestTime.label || (timeFilter === 'This Week' ? 'Busiest day' : 'Busiest time')}
+          title={metrics.busiestTime.label || (timeFilter === 'This Week' ? t('busiestDay') : t('busiestTime'))}
           value={metrics.busiestTime.value}
           performance={{
             text: `${metrics.busiestTime.peopleText} // ${metrics.busiestTime.bookingText}`,
@@ -221,12 +224,12 @@ export const Dashboard: React.FC<DashboardProps> = ({
               <div className="dashboard__venue-section">
                 <VenueCard
                   icon='https://api.builder.io/api/v1/image/assets/TEMP/b44b83b1f30b882d65f942ec883e90ae34fdb2d0?placeholderIfAbsent=true'
-                  title='In venue'
+                  title={t('inVenue')}
                   value={metrics.peopleInVenue.formatted_value || '0'}
                 />
                 <VenueCard
                   icon={<VenueIcon />}
-                  title="Open until"
+                  title={t('openUntil')}
                   value={metrics.workHours?.message?.replace('Open until ', '') || ''}
                   shadowColor='#121E52'
                 />

package/src/v2/dashboard-analytics/venue-card/VenueCard.tsx

@@ -1,8 +1,8 @@
-import React, { ReactSVGElement } from 'react';
+import React from 'react';
 import './VenueCard.scss';
 
 interface VenueCardProps {
-  icon: string | ReactSVGElement;
+  icon: string | React.ReactNode;
   title: string;
   value: string;
   className?: string;