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

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

@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { NotificationBanner } from './NotificationBanner'
+
+export default {
+  title: 'v2/Components/NotificationBanner',
+  component: NotificationBanner,
+  parameters: { layout: 'padded' },
+} as Meta<typeof NotificationBanner>
+
+type Story = StoryObj<typeof NotificationBanner>
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    title: 'Provider Updated',
+    message: 'The provider details have been saved successfully.',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    title: 'Failed to Update',
+    message: 'An error occurred while saving. Please try again.',
+  },
+}
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    title: 'Information',
+    message: 'This action may take a few minutes to complete.',
+  },
+}
+
+export const WithDismiss: Story = {
+  args: {
+    variant: 'success',
+    title: 'Provider Updated',
+    message: 'The provider details have been saved successfully.',
+    onDismiss: () => console.log('dismissed'),
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    variant: 'info',
+    title: 'User Added',
+    message: 'The user has been added to the provider.',
+    action: { label: 'View User', onClick: () => console.log('view user') },
+    onDismiss: () => console.log('dismissed'),
+  },
+}

package/src/v2/components/NotificationBanner/NotificationBanner.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { NotificationSuccessIcon, NotificationErrorIcon, NotificationInfoIcon, NotificationCloseIcon } from '../../icons'
+import './NotificationBanner.scss'
+
+export type NotificationBannerVariant = 'success' | 'error' | 'info'
+
+export interface NotificationBannerProps {
+  variant: NotificationBannerVariant
+  title: string
+  message?: string
+  onDismiss?: () => void
+  action?: {
+    label: string
+    onClick: () => void
+  }
+  className?: string
+}
+
+export const NotificationBanner: React.FC<NotificationBannerProps> = ({
+  variant, title, message, onDismiss, action, className = '',
+}) => {
+  const icons = { success: <NotificationSuccessIcon />, error: <NotificationErrorIcon />, info: <NotificationInfoIcon /> }
+
+  return (
+    <div className={`notification-banner notification-banner--${variant} ${className}`}>
+      <div className="notification-banner__icon-wrap">
+        {icons[variant]}
+      </div>
+      <div className="notification-banner__content">
+        <p className="notification-banner__title">{title}</p>
+        {message && <p className="notification-banner__message">{message}</p>}
+        {action && (
+          <button type="button" className="notification-banner__action" onClick={action.onClick}>
+            {action.label}
+          </button>
+        )}
+      </div>
+      {onDismiss && (
+        <button type="button" className="notification-banner__dismiss" onClick={onDismiss} aria-label="Dismiss">
+          <NotificationCloseIcon />
+        </button>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { NotificationBanner } from './NotificationBanner'
+export type { NotificationBannerProps, NotificationBannerVariant } from './NotificationBanner'

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import React, { useState } from 'react'
-import { RadioCard } from './RadioCard'
+import { RadioCardGroup } from './RadioCardGroup'
 
-const meta: Meta<typeof RadioCard> = {
-  title: 'v2/Components/RadioCard',
-  component: RadioCard,
+const meta: Meta<typeof RadioCardGroup> = {
+  title: 'v2/Components/RadioCardGroup',
+  component: RadioCardGroup,
   parameters: {
     layout: 'centered',
   },
@@ -12,7 +12,7 @@ const meta: Meta<typeof RadioCard> = {
 }
 
 export default meta
-type Story = StoryObj<typeof RadioCard>
+type Story = StoryObj<typeof RadioCardGroup>
 
 export const Default: Story = {
   render: () => {
@@ -21,7 +21,7 @@ export const Default: Story = {
 
       return (
         <div style={{ width: 400 }}>
-          <RadioCard
+          <RadioCardGroup
             name="role-default"
             value={value}
             onChange={setValue}
@@ -58,7 +58,7 @@ export const NoDescriptions: Story = {
 
       return (
         <div style={{ width: 400 }}>
-          <RadioCard
+          <RadioCardGroup
             name="role-no-desc"
             value={value}
             onChange={setValue}
@@ -83,7 +83,7 @@ export const WithDisabled: Story = {
 
       return (
         <div style={{ width: 400 }}>
-          <RadioCard
+          <RadioCardGroup
             name="role-disabled"
             value={value}
             onChange={setValue}

package/src/v2/components/RadioCard/{RadioCard.scss → RadioCardGroup.scss}

@@ -1,9 +1,14 @@
 .radio-card {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 12px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 
   &__option {
+    flex: 1;
     display: flex;
     align-items: flex-start;
     gap: 12px;
@@ -15,8 +20,8 @@
     transition: border-color 0.15s, background 0.15s;
 
     &--selected {
-      border-color: var(--border-selected, #6200ee);
-      background: var(--surface-action-soft, #f3e8ff);
+      border-color: var(--border-primary, #e8e9ef);
+      background: var(--surface-primary, #ffffff);
     }
 
     &--disabled {
@@ -32,6 +37,26 @@
     height: 0;
   }
 
+  &__icon-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px 8px 8px;
+    background: var(--surface-secondary, #f8f8fa);
+    border-radius: 6px;
+    flex-shrink: 0;
+    width: 60px;
+    color: var(--fill-primary, #14215a);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   &__radio {
     width: 18px;
     height: 18px;
@@ -44,14 +69,14 @@
     justify-content: center;
 
     &--selected {
-      border-color: var(--border-selected, #6200ee);
+      border-color: var(--fills-main-fill-primary, #14215a);
 
       &::after {
         content: '';
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        background: var(--border-selected, #6200ee);
+        background: var(--fills-main-fill-primary, #14215a);
       }
     }
   }

package/src/v2/components/RadioCard/{RadioCard.tsx → RadioCardGroup.tsx}

@@ -1,14 +1,15 @@
 import React from 'react'
-import './RadioCard.scss'
+import './RadioCardGroup.scss'
 
 export interface RadioCardOption {
   value: string
   label: string
   description?: string
   disabled?: boolean
+  icon?: React.ReactNode
 }
 
-export interface RadioCardProps {
+export interface RadioCardGroupProps {
   options: RadioCardOption[]
   value: string
   onChange(value: string): void
@@ -16,7 +17,7 @@ export interface RadioCardProps {
   className?: string
 }
 
-export const RadioCard: React.FC<RadioCardProps> = ({
+export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
   options,
   value,
   onChange,
@@ -54,7 +55,14 @@ export const RadioCard: React.FC<RadioCardProps> = ({
             onChange={() => !isDisabled && onChange(option.value)}
             className="radio-card__radio-input"
           />
-          <div className={radioClass} />
+          {option.icon ? (
+            <div className="radio-card__icon-box">
+              <div className="radio-card__icon">{option.icon}</div>
+              <div className={radioClass} />
+            </div>
+          ) : (
+            <div className={radioClass} />
+          )}
           <div className="radio-card__text">
             <span className="radio-card__label">{option.label}</span>
             {option.description && (

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

@@ -1 +1 @@
-export * from './RadioCard'
+export * from './RadioCardGroup'

package/src/v2/components/Select/Select.tsx

@@ -1,6 +1,12 @@
 import { SelectHTMLAttributes } from 'react'
 import './Select.scss'
 
+export interface SelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   variant?: 'default' | 'hover'| 'focus' | 'error' | 'disabled'
   size?: 'sm' | 'md' | 'lg'
@@ -8,6 +14,7 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
   optional?: boolean
   error?: string
   helperText?: string
+  options?: SelectOption[]
 }
 
 export function Select({
@@ -19,6 +26,7 @@ export function Select({
   optional,
   error,
   helperText,
+  options,
   children,
   ...props
 }: SelectProps) {
@@ -46,7 +54,13 @@ export function Select({
           disabled={disabled}
           {...props}
         >
-          {children}
+          {options
+            ? options.map((opt) => (
+                <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                  {opt.label}
+                </option>
+              ))
+            : children}
         </select>
         <svg
           className="select-arrow"

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

@@ -1,2 +1,2 @@
 export { Select } from './Select'
-export type { SelectProps } from './Select'
+export type { SelectProps, SelectOption } from './Select'

package/src/v2/components/StatusBadge/StatusBadge.tsx

@@ -9,9 +9,14 @@ export type StatusBadgeStatus =
   | 'imported'
   | 'inactive'
   | 'expired'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'default'
 
 export interface StatusBadgeProps {
   status: StatusBadgeStatus
+  label?: string
 }
 
 const STATUS_LABELS: Record<StatusBadgeStatus, string> = {
@@ -22,10 +27,14 @@ const STATUS_LABELS: Record<StatusBadgeStatus, string> = {
   imported: 'Imported',
   inactive: 'Inactive',
   expired: 'Expired',
+  success: 'Success',
+  warning: 'Warning',
+  error: 'Error',
+  default: '',
 }
 
-export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => (
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, label }) => (
   <span className={`status-badge status-badge--${status}`}>
-    {STATUS_LABELS[status]}
+    {label ?? STATUS_LABELS[status]}
   </span>
 )

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/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/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.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/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;