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

package/src/v2/shadcn/index.ts

@@ -0,0 +1,76 @@
+// Utility
+export { cn } from './lib/utils'
+
+// Components
+export { Button, buttonVariants } from './components/ui/button'
+export type { ButtonProps } from './components/ui/button'
+export { Input } from './components/ui/input'
+export type { InputProps } from './components/ui/input'
+export { Label } from './components/ui/label'
+export { Badge, badgeVariants } from './components/ui/badge'
+export type { BadgeProps } from './components/ui/badge'
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from './components/ui/card'
+export { Separator } from './components/ui/separator'
+export { Avatar, AvatarImage, AvatarFallback } from './components/ui/avatar'
+export { Checkbox } from './components/ui/checkbox'
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './components/ui/select'
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './components/ui/dialog'
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './components/ui/dropdown-menu'
+export { Skeleton } from './components/ui/skeleton'
+export { Switch } from './components/ui/switch'
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/ui/tooltip'
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from './components/ui/table'

package/src/v2/shadcn/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/v2/shadcn/styles/globals.css

@@ -0,0 +1,112 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* ─── Bridge: shadcn CSS variables → BKIT design tokens ───────────────────
+     * shadcn components use HSL values via Tailwind (e.g. bg-primary = hsl(var(--primary))).
+     * We keep HSL values here that approximate BKIT tokens, so shadcn components
+     * look correct. The BKIT SCSS tokens (_colors.scss) remain the source of truth
+     * for all custom v2 components.
+     * ────────────────────────────────────────────────────────────────────────── */
+
+    /* Backgrounds / Surfaces */
+    --background: 0 0% 100%;            /* #FFFFFF = --surface-primary */
+    --foreground: 228 65% 20%;          /* #121E52 = --label-primary */
+
+    /* Card */
+    --card: 0 0% 100%;                  /* #FFFFFF = --surface-primary */
+    --card-foreground: 228 65% 20%;     /* #121E52 = --label-primary */
+
+    /* Popover */
+    --popover: 0 0% 100%;              /* #FFFFFF */
+    --popover-foreground: 228 65% 20%; /* #121E52 */
+
+    /* Primary = BKIT purple (#6200EE) */
+    --primary: 270 100% 47%;           /* #6200EE = --actions-regular */
+    --primary-foreground: 0 0% 100%;   /* #FFFFFF */
+
+    /* Secondary = BKIT action soft (#EFE6FD) */
+    --secondary: 270 90% 95%;          /* ~--surface-action-soft */
+    --secondary-foreground: 270 100% 47%; /* #6200EE = --label-action */
+
+    /* Muted = BKIT surface-secondary (#F8F8FA) */
+    --muted: 240 14% 97%;              /* #F8F8FA = --surface-secondary */
+    --muted-foreground: 227 16% 47%;   /* #626A90 = --label-secondary */
+
+    /* Accent = hover states */
+    --accent: 240 14% 97%;             /* #F8F8FA */
+    --accent-foreground: 228 65% 20%;  /* #121E52 */
+
+    /* Destructive = BKIT red (#E0423A) */
+    --destructive: 3 73% 55%;          /* #E0423A = --errors-regular */
+    --destructive-foreground: 0 0% 100%; /* #FFFFFF */
+
+    /* Border / Input = BKIT --border-primary (#E8E9EF) */
+    --border: 234 20% 93%;             /* #E8E9EF */
+    --input: 234 20% 93%;              /* #E8E9EF */
+
+    /* Ring = BKIT purple for focus rings */
+    --ring: 270 100% 47%;              /* #6200EE */
+
+    --radius: 0.5rem;
+
+    /* Chart colors */
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+
+    /* BKIT design token fallbacks — used by shadcn Switch and other components
+       that reference BKIT semantic tokens directly. These are overridden when the
+       full BKIT token stylesheet (_colors.scss) is also loaded. */
+    --fill-primary: #14215A;
+    --fill-selected: #6200EE;
+    --surface-tertiary: #E8E9EF;
+    --surface-primary: #FFFFFF;
+    --surface-secondary: #F8F8FA;
+    --border-primary: #E8E9EF;
+    --label-primary: #121E52;
+    --label-secondary: #626A90;
+    --label-action: #6200EE;
+    --surface-action-soft: #EFE6FD;
+  }
+
+  .dark {
+    --background: 228 50% 10%;
+    --foreground: 240 14% 97%;
+    --card: 228 50% 10%;
+    --card-foreground: 240 14% 97%;
+    --popover: 228 50% 10%;
+    --popover-foreground: 240 14% 97%;
+    --primary: 240 14% 97%;
+    --primary-foreground: 228 65% 20%;
+    --secondary: 228 25% 18%;
+    --secondary-foreground: 240 14% 97%;
+    --muted: 228 25% 18%;
+    --muted-foreground: 228 16% 65%;
+    --accent: 228 25% 18%;
+    --accent-foreground: 240 14% 97%;
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 240 14% 97%;
+    --border: 228 25% 18%;
+    --input: 228 25% 18%;
+    --ring: 228 27% 84%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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

@@ -2,22 +2,29 @@
 
 .new-button {
   display: flex;
-  gap: var(--spacing-sm);
+  gap: 6px;
   justify-content: center;
-  padding: 12px 24px;
+  padding: 8px 16px;
   align-self: flex-start;
   text-align: center;
   align-items: center;
   font-family: var(--font-family-sans, 'Geist', sans-serif);
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 500;
   line-height: 20px;
-  min-height: 44px;
+  min-height: 40px;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
 
+  // Asymmetric padding when button starts with an icon (svg)
+  &:has(> svg:first-child),
+  &:has(> .new-button__icon:first-child) {
+    padding-left: 12px;
+  }
+
   // Primary Button - Solid purple
   &--primary {
     background: #6200EE;
@@ -146,24 +153,15 @@
 
   // Destructive - Strong
   &--destructive-strong {
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      var(--red-red) 5.77%,
-      var(--red-red-dark) 95.19%,
-      var(--red-red-darkest) 100%
-    ),
-    linear-gradient(
-      180deg,
-      var(--red-red-lighter) 0%,
-      var(--red-red-darkest) 100%
-    ),
-    linear-gradient(90deg, var(--red-red-dark) 0%, var(--red-red-dark) 100%);
-    color: var(--labels-main-label-white, #ffffff);
+    background-color: #CC3C35;
+    color: #ffffff;
+
+    &:hover {
+      background-color: #B8352F;
+    }
 
-    &:hover,
     &:active {
-      background-color: var(--fills-main-fill-danger, #cc3c35);
+      background-color: #9F2F29;
     }
   }
 
@@ -200,9 +198,9 @@
 
   &__text {
     font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: 15px;
+    font-size: 14px;
     font-style: normal;
-    font-weight: 600;
+    font-weight: 500;
     line-height: 20px;
     text-align: center;
 

package/src/v2/styles/form/NewInput.scss

@@ -112,7 +112,7 @@
         border-radius: var(--radius-md, 4px);
         padding: 8px 10px;
         min-height: 52px;
-        width: 70%;
+        width: 100%;
         transition: all 0.2s ease;
 
         &:focus-within {

package/src/v2/styles/tokens/_colors.scss

@@ -333,6 +333,7 @@
   --label-primary-alt: var(--tone-lighter);
   --label-secondary: var(--tone-darkest);
   --label-secondary-hover: var(--shade-lighter);
+  --label-tertiary: var(--tone-darker);
   --label-white: var(--tone-lightest);
   --label-highlight: var(--highlight-dark);
   --label-action: var(--actions-regular);
@@ -341,6 +342,7 @@
   --label-status-success: var(--success-darker);
   --label-status-info: var(--information-dark);
   --label-status-alert: var(--alert-regular);
+  --label-status-warning: var(--alert-regular);
   --label-status-disabled: var(--disabled-regular);
 
   /* Surfaces */
@@ -356,8 +358,13 @@
 
   /* Surface Status */
   --surface-status-success: var(--success-lightest);
+  --surface-status-success-soft: var(--success-lightest);
   --surface-status-error: var(--errors-lightest);
+  --surface-status-error-soft: var(--errors-lightest);
+  --surface-error-soft: var(--errors-lightest);
   --surface-status-alert: var(--alert-lightest);
+  --surface-status-warning: var(--alert-lightest);
+  --surface-status-warning-soft: var(--alert-lightest);
   --surface-status-info: var(--information-lightest);
   --surface-status-disabled: var(--disabled-lighter);
 
@@ -390,12 +397,14 @@
 
   /* Borders */
   --border-primary: var(--tone-light);
+  --border-primary-hover: var(--tone-regular);
   --border-secondary: var(--tone-regular);
   --border-selected: var(--neutral-600);
   --border-action: var(--actions-regular);
   --border-status-error: var(--errors-lighter);
   --border-status-success: var(--success-lighter);
   --border-status-alert: var(--alert-lighter);
+  --border-status-warning: var(--alert-lighter);
   --border-status-info: var(--information-lighter);
   --border-status-disabled: var(--disabled-lightest);
   --border-colour-overlay: #121E521A;
@@ -408,6 +417,7 @@
   --fill-action: var(--actions-regular);
   --fill-highlight: var(--highlight-dark);
   --fill-danger: var(--danger-dark);
+  --fill-disabled: var(--disabled-light);
   --fill-status-success: var(--success-darker);
   --fill-status-error: var(--errors-dark);
   --fill-status-alert: var(--alert-regular);
@@ -427,6 +437,7 @@
   --label-primary-alt: var(--shade-light);
   --label-secondary: var(--tone-darker);
   --label-secondary-hover: var(--tone-lighter);
+  --label-tertiary: var(--tone-dark);
   --label-white: var(--tone-lightest);
   --label-highlight: var(--highlight-light);
   --label-action: var(--actions-lighter);
@@ -435,6 +446,7 @@
   --label-status-success: var(--success-light);
   --label-status-info: var(--information-light);
   --label-status-alert: var(--alert-light);
+  --label-status-warning: var(--alert-light);
   --label-status-disabled: var(--disabled-regular);
 
   /* Surfaces */
@@ -450,8 +462,13 @@
 
   /* Surface Status */
   --surface-status-success: var(--success-darkest);
+  --surface-status-success-soft: var(--success-darkest);
   --surface-status-error: var(--errors-darkest);
+  --surface-status-error-soft: var(--errors-darkest);
+  --surface-error-soft: var(--errors-darkest);
   --surface-status-alert: var(--alert-darkest);
+  --surface-status-warning: var(--alert-darkest);
+  --surface-status-warning-soft: var(--alert-darkest);
   --surface-status-info: var(--information-darkest);
   --surface-status-disabled: var(--disabled-darkest);
 
@@ -484,12 +501,14 @@
 
   /* Borders */
   --border-primary: var(--shade-light);
+  --border-primary-hover: var(--shade-dark);
   --border-secondary: var(--shade-dark);
   --border-selected: var(--tone-light);
   --border-action: var(--actions-light);
   --border-status-error: var(--errors-darker);
   --border-status-success: var(--success-darker);
   --border-status-alert: var(--alert-darker);
+  --border-status-warning: var(--alert-darker);
   --border-status-info: var(--information-darker);
   --border-status-disabled: var(--disabled-dark);
   --border-colour-overlay: #FFFFFF1A;
@@ -501,6 +520,7 @@
   --fill-action: var(--actions-lighter);
   --fill-highlight: var(--highlight-light);
   --fill-danger: var(--danger-light);
+  --fill-disabled: var(--disabled-dark);
   --fill-status-success: var(--success-light);
   --fill-status-error: var(--errors-light);
   --fill-status-alert: var(--alert-light);

package/src/v2/styles/tokens/_sizes.scss

@@ -5,11 +5,11 @@
 :root {
     /* Radius tokens - Border radius values */
     --radius-zero: 0px;
-    --radius-xs: 1px;
-    --radius-sm: 2px;
-    --radius-md: 4px;
+    --radius-xs: 2px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
     --radius-reg: 8px;
-    --radius-lg: 16px;
+    --radius-lg: 12px;
     --radius-xl: 24px;
 
     /* Spacing tokens - Gap, padding, margin values */

package/src/v2/types/navigation.ts

@@ -2,6 +2,7 @@ export interface NavigationItem {
   id: string
   label: string
   path: string
+  icon?: JSX.Element
   requiredRoles?: string[]
   requiredPermissions?: string[]
   adminOnly?: boolean

package/tailwind.config.js

@@ -1,14 +1,56 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ['class'],
-  prefix: 'tw-',
-  // @TODO: remove this after removing bootstrap from a project
   corePlugins: {
     preflight: false,
   },
   content: ['./src/**/*.{ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
   },
-  plugins: [],
+  plugins: [
+    // Uncomment after installing: yarn add -D tailwindcss-animate
+    // require('tailwindcss-animate'),
+  ],
 }

package/dist/v2/components/RadioCard/RadioCard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/RadioCard/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,kBAAkB,CAAA;AAEzB,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiD9C,CAAA"}

package/src/v2/navigation/Navigation/Navigation.stories.tsx

@@ -1,137 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import React, { useState } from 'react'
-import { Navigation } from './Navigation'
-
-export default {
-    title: 'v2/Navigation/Navigation',
-    component: Navigation,
-    parameters: {
-        layout: 'fullscreen',
-    },
-    argTypes: {
-        isCollapsed: {
-            control: 'boolean',
-            description: 'Toggle between expanded (with labels) and collapsed (icons only) navigation',
-        },
-        activeItem: {
-            control: 'select',
-            options: ['home', 'companies', 'venues', 'promoters', 'admin', 'users', 'customers', 'reports', 'analytics', 'payments', 'settings'],
-            description: 'Which navigation item is currently active',
-        },
-    },
-} as Meta
-
-type Story = StoryObj<typeof Navigation>
-
-// Default expanded navigation
-export const Expanded: Story = {
-    args: {
-        isCollapsed: false,
-        activeItem: 'home',
-    },
-    render: (args) => (
-        <div style={{ width: '250px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
-            <Navigation {...args} />
-        </div>
-    ),
-}
-
-// Collapsed navigation (icons only)
-export const Collapsed: Story = {
-    args: {
-        isCollapsed: true,
-        activeItem: 'home',
-    },
-    render: (args) => (
-        <div style={{ width: '76px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
-            <Navigation {...args} />
-        </div>
-    ),
-}
-
-// Interactive with toggle
-export const Interactive: Story = {
-    render: function () {
-        const [isCollapsed, setIsCollapsed] = useState(false);
-        const [activeItem, setActiveItem] = useState('home');
-
-        return (
-            <div style={{ display: 'flex', height: '100vh' }}>
-                <div style={{ width: isCollapsed ? '76px' : '250px', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB', transition: 'width 0.3s ease' }}>
-                    <div style={{ padding: '16px', borderBottom: '1px solid #E5E7EB' }}>
-                        <button
-                            onClick={() => setIsCollapsed(!isCollapsed)}
-                            style={{
-                                padding: '8px 12px',
-                                background: '#14215A',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '6px',
-                                cursor: 'pointer',
-                                fontSize: '13px',
-                                fontWeight: '500',
-                            }}
-                        >
-                            {isCollapsed ? '→' : '←'}
-                        </button>
-                    </div>
-                    <Navigation
-                        isCollapsed={isCollapsed}
-                        activeItem={activeItem}
-                        onItemClick={setActiveItem}
-                    />
-                </div>
-                <div style={{ flex: 1, padding: '24px', background: '#F9FAFB' }}>
-                    <h1 style={{ fontSize: '24px', fontWeight: '600', color: '#111827', marginBottom: '8px' }}>
-                        Active Page: {activeItem.charAt(0).toUpperCase() + activeItem.slice(1)}
-                    </h1>
-                    <p style={{ color: '#6B7280' }}>Click a navigation item to change the active page</p>
-                </div>
-            </div>
-        );
-    },
-}
-
-// Different active states
-export const ActiveOnCompanies: Story = {
-    args: {
-        isCollapsed: false,
-        activeItem: 'companies',
-    },
-    render: (args) => (
-        <div style={{ width: '250px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
-            <Navigation {...args} />
-        </div>
-    ),
-}
-
-export const ActiveOnSettings: Story = {
-    args: {
-        isCollapsed: false,
-        activeItem: 'settings',
-    },
-    render: (args) => (
-        <div style={{ width: '250px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
-            <Navigation {...args} />
-        </div>
-    ),
-}
-
-// Mobile viewport
-export const Mobile: Story = {
-    args: {
-        isCollapsed: false,
-        activeItem: 'home',
-    },
-    parameters: {
-        viewport: {
-            defaultViewport: 'mobile1',
-        },
-    },
-    render: (args) => (
-        <div style={{ width: '100%', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)' }}>
-            <Navigation {...args} />
-        </div>
-    ),
-}
-