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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.92",
+  "version": "0.78.5-dev.93",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.1-dev.22",
+    "@licklist/core": "0.36.1-dev.42",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.15",
     "clsx": "2.1.1",
@@ -64,6 +64,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
+    "@hookform/resolvers": "^5.2.2",
     "@licklist/core": "0.36.1-dev.22",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.15",
@@ -71,6 +72,29 @@
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-aria/utils": "3.9.0",
     "@svgr/webpack": "^6.5.1",
@@ -100,13 +124,17 @@
     "bootstrap": "4.6.0",
     "bootstrap-social": "5.1.1",
     "chromatic": "^13.3.1",
+    "class-variance-authority": "^0.7.1",
     "clsx": "2.1.1",
+    "cmdk": "^1.1.1",
     "date-fns": "2.29.3",
+    "embla-carousel-react": "^8.6.0",
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
     "emojibase-regex": "6.0.1",
     "framer-motion": "4.1.17",
     "i18next": "25.3.2",
+    "input-otp": "^1.4.2",
     "konva": "6.0.0",
     "lodash": "4.17.21",
     "lucide-react": "^0.555.0",
@@ -115,6 +143,7 @@
     "react-bootstrap": "1.6.1",
     "react-color": "2.19.3",
     "react-date-range": "1.4.0",
+    "react-day-picker": "^9.14.0",
     "react-email-editor": "1.6.1",
     "react-highlighter": "0.4.3",
     "react-hook-form": "7.52.2",
@@ -127,6 +156,7 @@
     "react-overlays": "4.1.1",
     "react-phone-number-input": "3.1.16",
     "react-query": "3.34.12",
+    "react-resizable-panels": "^4.7.3",
     "react-select": "5.3.0",
     "react-swipeable": "6.2.0",
     "react-use": "17.3.1",
@@ -134,14 +164,18 @@
     "recharts": "2.0.6",
     "rrule": "2.6.8",
     "style-inject": "0.3.0",
+    "tailwind-merge": "^3.5.0",
     "twemoji-parser": "14.0.0",
-    "use-debounce": "7.0.1"
+    "use-debounce": "7.0.1",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@babel/core": "^7.28.4",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@chromatic-com/storybook": "2.0.2",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@rollup/plugin-image": "3.0.3",
     "@rollup/plugin-json": "6.1.0",
     "@storybook/addon-a11y": "9.1.13",
@@ -200,6 +234,7 @@
     "storybook": "9.1.13",
     "style-loader": "2.0.0",
     "tailwindcss": "3.4.13",
+    "tailwindcss-animate": "^1.0.7",
     "ts-loader": "^9.5.4",
     "typescript": "^5.9.3",
     "url-loader": "4.1.1",

package/rollup.config.js

@@ -44,6 +44,7 @@ export default [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
           { src: './src/v2/styles/*', dest: './dist/v2/styles' },
+          { src: './src/v2/shadcn/styles/globals.css', dest: './dist/v2/shadcn/styles' },
           { src: './src/root.css', dest: './dist' },
         ],
       }),

package/src/index.ts

@@ -26,8 +26,8 @@ export * from './static/loader'
 export * from './static/number-input'
 export * from './static/switch'
 export * from './static/text-expand'
-export { Tabs } from './static/tabs'
-export type { TabsProps } from './static/tabs'
+export { Tabs as TabsLegacy } from './static/tabs'
+export type { TabsProps as TabsLegacyProps } from './static/tabs'
 export { default as CountrySelect } from './static/CountrySelect'
 export { default as FormCard } from './static/FormCard'
 export { default as Image } from './static/Image'
@@ -68,6 +68,8 @@ export { default as RadioButton } from './customRadioButton/RadioButton'
 export * from './PageNotFound'
 export * from './UnderMaintenance'
 export * from './v2/dashboard-analytics'
+export { AuthLayout, LoginPage, ResetPasswordPage, CreatePasswordPage, VerifyEmailPage } from './v2/pages/auth'
+export type { AuthLayoutProps, LoginPageProps, ResetPasswordPageProps, CreatePasswordPageProps, VerifyEmailPageProps } from './v2/pages/auth'
 export {
   DashboardLayout,
   type DashboardLayoutProps,

package/src/v2/components/AccountManagerCard/AccountManagerCard.scss

@@ -0,0 +1,75 @@
+@import '../../styles/index.scss';
+
+.account-manager-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: var(--padding-reg, 16px);
+  background: var(--surfaces-main-surface-secondary, #F4F4F7);
+  border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+  border-radius: var(--radius-reg, 8px);
+
+  &__avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--surfaces-main-surface-secondary, #F4F4F7);
+    border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+  }
+
+  &__avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &__avatar-initials {
+    font-family: 'Geist', sans-serif;
+    font-weight: 700;
+    font-size: 14px;
+    color: var(--labels-main-label-secondary, #626A90);
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-family: 'Geist', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 18px;
+    color: var(--labels-main-label-primary, #121E52);
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__icon {
+    color: var(--labels-main-label-secondary, #626A90);
+    flex-shrink: 0;
+  }
+
+  &__detail {
+    font-family: 'Geist', sans-serif;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--labels-main-label-secondary, #626A90);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { AccountManagerCard } from './AccountManagerCard'
+
+export default {
+  title: 'v2/Components/AccountManagerCard',
+  component: AccountManagerCard,
+  parameters: { layout: 'padded' },
+} as Meta<typeof AccountManagerCard>
+
+type Story = StoryObj<typeof AccountManagerCard>
+
+export const WithAvatar: Story = {
+  args: {
+    fullName: 'Jane Smith',
+    email: 'jane.smith@company.com',
+    avatarUrl: 'https://i.pravatar.cc/48?img=47',
+    phone: '+44 7700 900123',
+  },
+}
+
+export const WithoutAvatar: Story = {
+  args: {
+    fullName: 'John Doe',
+    email: 'john.doe@company.com',
+    phone: '+44 7700 900456',
+  },
+}
+
+export const EmailOnly: Story = {
+  args: {
+    fullName: 'Alice Johnson',
+    email: 'alice@company.com',
+  },
+}

package/src/v2/components/AccountManagerCard/AccountManagerCard.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { MailIcon, PhoneIcon } from '../../icons'
+import './AccountManagerCard.scss'
+
+export interface AccountManagerCardProps {
+  fullName: string
+  email: string
+  avatarUrl?: string | null
+  phone?: string | null
+  className?: string
+}
+
+export const AccountManagerCard: React.FC<AccountManagerCardProps> = ({
+  fullName, email, avatarUrl, phone, className = '',
+}) => (
+  <div className={`account-manager-card ${className}`}>
+    <div className="account-manager-card__avatar">
+      {avatarUrl
+        ? <img src={avatarUrl} alt={fullName} className="account-manager-card__avatar-img" />
+        : <span className="account-manager-card__avatar-initials">{fullName[0]?.toUpperCase() || '?'}</span>
+      }
+    </div>
+    <div className="account-manager-card__info">
+      <span className="account-manager-card__name">{fullName}</span>
+      <div className="account-manager-card__row">
+        <MailIcon size={14} className="account-manager-card__icon" />
+        <span className="account-manager-card__detail">{email}</span>
+      </div>
+      {phone && (
+        <div className="account-manager-card__row">
+          <PhoneIcon size={14} className="account-manager-card__icon" />
+          <span className="account-manager-card__detail">{phone}</span>
+        </div>
+      )}
+    </div>
+  </div>
+)

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

@@ -0,0 +1,2 @@
+export { AccountManagerCard } from './AccountManagerCard'
+export type { AccountManagerCardProps } from './AccountManagerCard'

package/src/v2/components/AvatarUpload/AvatarUpload.scss

@@ -2,15 +2,16 @@
 
 .avatar-upload {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  gap: 8px;
+  gap: 20px;
 
   &__circle {
-    width: 80px;
-    height: 80px;
+    width: 96px;
+    height: 96px;
+    flex-shrink: 0;
     border-radius: 50%;
-    border: 1.5px dashed var(--border-primary, #e8e9ef);
+    border: 1.5px solid var(--border-primary, #e8e9ef);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -44,25 +45,46 @@
     color: var(--label-secondary, #626a90);
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
   &__label {
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 600;
     color: var(--label-primary, #121e52);
   }
 
   &__description {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--label-secondary, #626a90);
-    text-align: center;
+  }
+
+  &__upload-btn {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--brand-primary, #5b21b6);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    text-align: left;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   &__remove {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--label-status-error, #ef4444);
     background: none;
     border: none;
     cursor: pointer;
     padding: 0;
+    text-align: left;
     text-decoration: underline;
   }
 }

package/src/v2/components/AvatarUpload/AvatarUpload.tsx

@@ -57,13 +57,19 @@ export const AvatarUpload: React.FC<AvatarUploadProps> = ({
         onChange={handleFileChange}
       />
 
-      {label && <span className="avatar-upload__label">{label}</span>}
-      {description && <span className="avatar-upload__description">{description}</span>}
-      {preview && (
-        <button type="button" className="avatar-upload__remove" onClick={onDelete}>
-          Remove
-        </button>
-      )}
+      <div className="avatar-upload__content">
+        {label && <span className="avatar-upload__label">{label}</span>}
+        {description && <span className="avatar-upload__description">{description}</span>}
+        {preview ? (
+          <button type="button" className="avatar-upload__remove" onClick={onDelete}>
+            Remove
+          </button>
+        ) : (
+          <button type="button" className="avatar-upload__upload-btn" onClick={handleCircleClick}>
+            Upload
+          </button>
+        )}
+      </div>
     </div>
   )
 }

package/src/v2/components/Button/Button.tsx

@@ -30,6 +30,7 @@ export function Button({
   const classes = [
     'new-button',
     `new-button--${variant}`,
+    _size !== 'md' ? `new-button--${_size}` : '',
     disabled || isLoading ? 'new-button--disabled' : '',
     className
   ].filter(Boolean).join(' ')

package/src/v2/components/Button/GhostButton.scss

@@ -28,8 +28,8 @@
   }
 
   &.active {
-    background-color: var(--fill-primary, #6200EE);
-    border-color: var(--border-selected, #121E52);
+    background-color: var(--fill-primary, #14215A);
+    border-color: var(--fill-primary, #14215A);
     color: var(--neutral-white, #FFFFFF);
 
     .ghost-button__text {

package/src/v2/components/DataTable/DataTable.scss

@@ -12,11 +12,15 @@
     height: 48px;
     align-items: center;
     align-self: stretch;
-    background: var(--surface-secondary, #f8f8fa);
+    background: var(--surface-secondary);
     padding: 0 16px;
-    border-bottom: 1px solid var(--border-primary, #e8e9ef);
+    border-bottom: 1px solid var(--border-primary);
     gap: 16px;
     min-width: 0;
+
+    &--selectable {
+      padding-left: 0;
+    }
   }
 
   &__th {
@@ -26,7 +30,7 @@
     font-size: 13px;
     font-weight: 500;
     line-height: 16px;
-    color: var(--label-secondary, #626a90);
+    color: var(--label-secondary);
     white-space: nowrap;
     flex-shrink: 0;
 
@@ -41,7 +45,7 @@
       user-select: none;
 
       &:hover {
-        color: var(--label-primary, #121e52);
+        color: var(--label-primary);
       }
     }
 
@@ -86,7 +90,7 @@
     display: flex;
     align-items: center;
     align-self: stretch;
-    border-bottom: 1px solid var(--border-primary, #e8e9ef);
+    border-bottom: 1px solid var(--border-primary);
     transition: background-color 0.15s;
 
     &:last-child {
@@ -97,7 +101,7 @@
       cursor: pointer;
 
       &:hover {
-        background: var(--surface-primary-hover, #f8f8fa);
+        background: var(--surface-primary-hover);
       }
     }
 
@@ -127,7 +131,7 @@
     font-size: 13px;
     font-weight: 400;
     line-height: 16px;
-    color: var(--label-primary, #121e52);
+    color: var(--label-primary);
     flex-shrink: 0;
 
     &--flex1 {
@@ -151,22 +155,12 @@
     }
   }
 
-  // ── Checkbox ──────────────────────────────────────────────────────────────────
-  &__checkbox {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    cursor: pointer;
-    accent-color: var(--label-action, #6200ee);
-    border-radius: 3px;
-  }
-
   // ── Selected row ──────────────────────────────────────────────────────────────
   &__row--selected {
-    background: var(--surface-action-soft, #f3e8ff);
+    background: var(--surface-action-soft);
 
     &:hover {
-      background: var(--surface-action-soft, #f3e8ff);
+      background: var(--surface-action-soft);
     }
   }
 
@@ -176,6 +170,6 @@
     text-align: center;
     font-size: 14px;
     font-weight: 500;
-    color: var(--label-secondary, #626a90);
+    color: var(--label-secondary);
   }
 }

package/src/v2/components/DataTable/DataTable.tsx

@@ -1,6 +1,7 @@
-import React, { useRef, useEffect } from 'react'
+import React from 'react'
 import { ActionMenu } from '../ActionMenu'
-import { ArrowUpIcon, ArrowDownIcon } from '../../icons'
+import { IconChevronDown } from '../../icons'
+import { Checkbox } from '../../shadcn/components/ui/checkbox'
 import './DataTable.scss'
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -33,6 +34,8 @@ export interface DataTableProps<T> {
   keyExtractor: (item: T) => string
   onRowClick?: (item: T) => void
   rowActions?: (item: T) => DataTableRowAction<T>[]
+  /** Quick-action button rendered inline beside the action menu (combined 80px cell) */
+  rowQuickActions?: (item: T) => React.ReactNode
   emptyState?: React.ReactNode
   className?: string
   sortKey?: string
@@ -55,18 +58,11 @@ interface HeaderCheckboxProps {
 }
 
 function HeaderCheckbox({ checked, indeterminate, onChange }: HeaderCheckboxProps) {
-  const ref = useRef<HTMLInputElement>(null)
-  useEffect(() => {
-    if (ref.current) ref.current.indeterminate = indeterminate
-  }, [indeterminate])
   return (
-    <input
-      type="checkbox"
-      ref={ref}
-      checked={checked}
-      onChange={onChange}
-      className="data-table__checkbox"
-      onClick={(e) => e.stopPropagation()}
+    <Checkbox
+      checked={indeterminate ? 'indeterminate' : checked}
+      onCheckedChange={onChange}
+      onClick={(e: React.MouseEvent) => e.stopPropagation()}
     />
   )
 }
@@ -79,6 +75,7 @@ export function DataTable<T>({
   keyExtractor,
   onRowClick,
   rowActions,
+  rowQuickActions,
   emptyState,
   className = '',
   sortKey,
@@ -115,7 +112,7 @@ export function DataTable<T>({
   return (
     <div className={`data-table ${className}`}>
       {/* ── Header row ── */}
-      <div className="data-table__header">
+      <div className={`data-table__header${selectable ? ' data-table__header--selectable' : ''}`}>
         {selectable && (
           <div className="data-table__th data-table__th--checkbox">
             <HeaderCheckbox
@@ -150,17 +147,20 @@ export function DataTable<T>({
                 <span
                   className={`data-table__sort-icon ${!isSorted ? 'data-table__sort-icon--hidden' : ''}`}
                 >
-                  {isSorted && sortDirection === 'desc' ? (
-                    <ArrowDownIcon />
-                  ) : (
-                    <ArrowUpIcon />
-                  )}
+                  <IconChevronDown
+                    style={{ transform: isSorted && sortDirection === 'asc' ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease' }}
+                  />
                 </span>
               )}
             </div>
           )
         })}
-        {rowActions && <div className="data-table__th data-table__th--action" />}
+        {(rowActions || rowQuickActions) && (
+          <div
+            className="data-table__th data-table__th--action"
+            style={rowQuickActions ? { width: '80px' } : undefined}
+          />
+        )}
       </div>
 
       {/* ── Body ── */}
@@ -190,14 +190,11 @@ export function DataTable<T>({
                 {selectable && (
                   <div
                     className="data-table__td data-table__td--checkbox"
-                    onClick={(e) => { e.stopPropagation(); toggleRow(key) }}
+                    onClick={(e) => e.stopPropagation()}
                   >
-                    <input
-                      type="checkbox"
-                      className="data-table__checkbox"
+                    <Checkbox
                       checked={isSelected}
-                      onChange={() => toggleRow(key)}
-                      onClick={(e) => e.stopPropagation()}
+                      onCheckedChange={() => toggleRow(key)}
                     />
                   </div>
                 )}
@@ -231,18 +228,22 @@ export function DataTable<T>({
                     )
                   })}
 
-                  {actions && actions.length > 0 && (
+                  {(actions && actions.length > 0 || rowQuickActions) && (
                     <div
                       className="data-table__td data-table__td--action"
+                      style={rowQuickActions ? { width: '80px', gap: '4px' } : undefined}
                       onClick={(e) => e.stopPropagation()}
                     >
-                      <ActionMenu
-                        items={actions.map((a) => ({
-                          label: a.label,
-                          onClick: () => a.onClick(item),
-                          variant: a.variant,
-                        }))}
-                      />
+                      {rowQuickActions?.(item)}
+                      {actions && actions.length > 0 && (
+                        <ActionMenu
+                          items={actions.map((a) => ({
+                            label: a.label,
+                            onClick: () => a.onClick(item),
+                            variant: a.variant,
+                          }))}
+                        />
+                      )}
                     </div>
                   )}
                 </div>