@licklist/design 0.78.5-dev.87 → 0.78.5-dev.9

package/dist/v2/styles/tokens/_status.scss

@@ -1,108 +0,0 @@
-/* Status/Alert Color tokens derived from Figma Alerts & Errors page
- * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=167:968
- */
-
-:root {
-    /* Success/Green Status Colors */
-    --color-success-fill: #2d6b18;
-    --color-success-background: #eef9ea;
-    --color-success-border: #c9ecbd;
-
-    /* Error/Red Status Colors */
-    --color-error-fill: #cc3c35;
-    --color-error-background: #fceceb;
-    --color-error-border: #f5c4c2;
-
-    /* Alert/Warning/Yellow Status Colors */
-    --color-alert-fill: #fd7e14;
-    --color-alert-background: #fcf6e7;
-    --color-alert-border: #f6e3b4;
-
-    /* Info/Blue Status Colors */
-    --color-info-fill: #0e8ce2;
-    --color-info-background: #e7f4fc;
-    --color-info-border: #b4dbf6;
-}
-
-/* Legacy format for compatibility with existing alias system */
-:root {
-    /* Surfaces - Status backgrounds */
-    --surfaces-status-background-success: var(--color-success-background);
-    --surfaces-status-background-error: var(--color-error-background);
-    --surfaces-status-background-alert: var(--color-alert-background);
-    --surfaces-status-background-info: var(--color-info-background);
-
-    /* Borders - Status borders */
-    --borders-status-border-success: var(--color-success-border);
-    --borders-status-border-error: var(--color-error-border);
-    --borders-status-border-alert: var(--color-alert-border);
-    --borders-status-border-info: var(--color-info-border);
-
-    /* Fills - Status icons/text */
-    --fills-status-fill-success: var(--color-success-fill);
-    --fills-status-fill-error: var(--color-error-fill);
-    --fills-status-fill-alert: var(--color-alert-fill);
-    --fills-status-fill-info: var(--color-info-fill);
-}
-
-/* SCSS Map for status colors */
-$status-colors: (
-    success: (
-        fill: var(--color-success-fill),
-        background: var(--color-success-background),
-        border: var(--color-success-border)
-    ),
-    error: (
-        fill: var(--color-error-fill),
-        background: var(--color-error-background),
-        border: var(--color-error-border)
-    ),
-    alert: (
-        fill: var(--color-alert-fill),
-        background: var(--color-alert-background),
-        border: var(--color-alert-border)
-    ),
-    info: (
-        fill: var(--color-info-fill),
-        background: var(--color-info-background),
-        border: var(--color-info-border)
-    )
-);
-
-/* Mixins for status colors */
-@mixin status-success() {
-    background-color: var(--surfaces-status-background-success);
-    border-color: var(--borders-status-border-success);
-    color: var(--fills-status-fill-success);
-}
-
-@mixin status-error() {
-    background-color: var(--surfaces-status-background-error);
-    border-color: var(--borders-status-border-error);
-    color: var(--fills-status-fill-error);
-}
-
-@mixin status-alert() {
-    background-color: var(--surfaces-status-background-alert);
-    border-color: var(--borders-status-border-alert);
-    color: var(--fills-status-fill-alert);
-}
-
-@mixin status-info() {
-    background-color: var(--surfaces-status-background-info);
-    border-color: var(--borders-status-border-info);
-    color: var(--fills-status-fill-info);
-}
-
-/* Helper mixin for getting status colors */
-@function get-status-color($status, $type) {
-    $status-map: map-get($status-colors, $status);
-    @if $status-map {
-        $color: map-get($status-map, $type);
-        @if $color {
-            @return $color;
-        }
-    }
-    @warn "Unknown status color: #{$status}.#{$type}";
-    @return null;
-}

package/dist/v2/styles/tokens/_typography.scss

@@ -1,146 +0,0 @@
-/* Typography tokens and mixins derived from Figma
- * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=30-95&m=dev
- */
-
-:root {
-    /* Families */
-    --font-family-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-    --font-family-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-
-  /* Headings Desktop */
-    --heading-xxl-size: 44px;
-    --heading-xxl-line: 48px;
-    --heading-xxl-weight: 600;
-    --heading-xl-size: 32px;
-    --heading-xl-line: 36px;
-    --heading-xl-weight: 700;
-    --heading-h1-size: 24px;
-    --heading-h1-line: 28px;
-    --heading-h1-weight: 600;
-    --heading-h2-size: 20px;
-    --heading-h2-line: 24px;
-    --heading-h2-weight: 600;
-    --heading-h3-size: 17px;
-    --heading-h3-line: 20px;
-    --heading-h3-weight: 600;
-    --heading-h4-size: 15px;
-    --heading-h4-line: 18px;
-    --heading-h4-weight: 600;
-    --heading-h5-size: 13px;
-    --heading-h5-line: 16px;
-    --heading-h5-weight: 500;
-    --heading-h6-size: 11px;
-    --heading-h6-line: 14px;
-    --heading-h6-weight: 500;
-
-    /* Headings Mobile */
-    --heading-xxl-mobile-size: 32px;
-    --heading-xxl-mobile-line: 36px;
-    --heading-xxl-mobile-weight: 600;
-    --heading-xl-mobile-size: 26px;
-    --heading-xl-mobile-line: 30px;
-    --heading-xl-mobile-weight: 700;
-    --heading-h1-mobile-size: 20px;
-    --heading-h1-mobile-line: 23px;
-    --heading-h1-mobile-weight: 600;
-    --heading-h2-mobile-size: 18px;
-    --heading-h2-mobile-line: 22px;
-    --heading-h2-mobile-weight: 600;
-    --heading-h3-mobile-size: 16px;
-    --heading-h3-mobile-line: 18px;
-    --heading-h3-mobile-weight: 600;
-    --heading-h4-mobile-size: 14px;
-    --heading-h4-mobile-line: 16px;
-    --heading-h4-mobile-weight: 600;
-    --heading-h5-mobile-size: 13px;
-    --heading-h5-mobile-line: 16px;
-    --heading-h5-mobile-weight: 500;
-    --heading-h6-mobile-size: 11px;
-    --heading-h6-mobile-line: 14px;
-    --heading-h6-mobile-weight: 500;
-
-    /* Body Desktop */
-    --text-xl-size: 20px;
-    --text-xl-line: 26px;
-    --text-xl-weight: 400;
-    --text-large-size: 18px;
-    --text-large-line: 24px;
-    --text-large-weight: 400;
-    --text-regular-size: 15px;
-    --text-regular-line: 20px;
-    --text-regular-weight: 400;
-    --text-small-size: 13px;
-    --text-small-line: 16px;
-    --text-small-weight: 400;
-    --text-small-emphasis-weight: 500;
-    --text-small-bold-weight: 600;
-    --text-xs-size: 10px;
-    --text-xs-line: 13px;
-    --text-xs-weight: 500;
-    --text-xs-bold-weight: 600;
-}
-
-/* Breakpoint: adjust if your system uses different breakpoints */
-$bp-mobile-max: 767px;
-
-/* Map of variants to CSS variable tuples: (size, line, weight) */
-$typo-map: (
-    'heading.xxl': (var(--heading-xxl-size), var(--heading-xxl-line), var(--heading-xxl-weight), var(--font-family-sans)),
-    'heading.xl': (var(--heading-xl-size), var(--heading-xl-line), var(--heading-xl-weight), var(--font-family-sans)),
-    'heading.h1': (var(--heading-h1-size), var(--heading-h1-line), var(--heading-h1-weight), var(--font-family-sans)),
-    'heading.h2': (var(--heading-h2-size), var(--heading-h2-line), var(--heading-h2-weight), var(--font-family-sans)),
-    'heading.h3': (var(--heading-h3-size), var(--heading-h3-line), var(--heading-h3-weight), var(--font-family-sans)),
-    'heading.h4': (var(--heading-h4-size), var(--heading-h4-line), var(--heading-h4-weight), var(--font-family-sans)),
-    'heading.h5': (var(--heading-h5-size), var(--heading-h5-line), var(--heading-h5-weight), var(--font-family-sans)),
-    'heading.h6': (var(--heading-h6-size), var(--heading-h6-line), var(--heading-h6-weight), var(--font-family-sans)),
-
-    'heading.xxl.mobile': (var(--heading-xxl-mobile-size), var(--heading-xxl-mobile-line), var(--heading-xxl-mobile-weight), var(--font-family-sans)),
-    'heading.xl.mobile': (var(--heading-xl-mobile-size), var(--heading-xl-mobile-line), var(--heading-xl-mobile-weight), var(--font-family-sans)),
-    'heading.h1.mobile': (var(--heading-h1-mobile-size), var(--heading-h1-mobile-line), var(--heading-h1-mobile-weight), var(--font-family-sans)),
-    'heading.h2.mobile': (var(--heading-h2-mobile-size), var(--heading-h2-mobile-line), var(--heading-h2-mobile-weight), var(--font-family-sans)),
-    'heading.h3.mobile': (var(--heading-h3-mobile-size), var(--heading-h3-mobile-line), var(--heading-h3-mobile-weight), var(--font-family-sans)),
-    'heading.h4.mobile': (var(--heading-h4-mobile-size), var(--heading-h4-mobile-line), var(--heading-h4-mobile-weight), var(--font-family-sans)),
-    'heading.h5.mobile': (var(--heading-h5-mobile-size), var(--heading-h5-mobile-line), var(--heading-h5-mobile-weight), var(--font-family-sans)),
-    'heading.h6.mobile': (var(--heading-h6-mobile-size), var(--heading-h6-mobile-line), var(--heading-h6-mobile-weight), var(--font-family-sans)),
-
-    'text.xl': (var(--text-xl-size), var(--text-xl-line), var(--text-xl-weight), var(--font-family-sans)),
-    'text.large': (var(--text-large-size), var(--text-large-line), var(--text-large-weight), var(--font-family-sans)),
-    'text.regular': (var(--text-regular-size), var(--text-regular-line), var(--text-regular-weight), var(--font-family-sans)),
-    'text.small': (var(--text-small-size), var(--text-small-line), var(--text-small-weight), var(--font-family-sans)),
-    'text.small.emphasis': (var(--text-small-size), var(--text-small-line), var(--text-small-emphasis-weight), var(--font-family-sans)),
-    'text.small.bold': (var(--text-small-size), var(--text-small-line), var(--text-small-bold-weight), var(--font-family-sans)),
-    'text.xs': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-weight), var(--font-family-sans)),
-    'text.xs.bold': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-bold-weight), var(--font-family-sans))
-);
-
-@mixin apply-typo($tuple) {
-    $size: nth($tuple, 1);
-    $line: nth($tuple, 2);
-    $weight: nth($tuple, 3);
-    $family: nth($tuple, 4);
-    font-family: $family;
-    font-size: $size;
-    line-height: $line;
-    font-weight: $weight;
-    color: var(--labels-main-label-primary, #121E52);
-}
-
-@mixin typography($variant) {
-    @if map-has-key($typo-map, $variant) {
-        @include apply-typo(map-get($typo-map, $variant));
-    }
-
-    @else {
-        /* Fallback to regular text */
-        @include apply-typo(map-get($typo-map, 'text.regular'));
-    }
-}
-
-/* Convenience mixin that switches to mobile variant under mobile breakpoint */
-@mixin responsive-heading($desktopVariant, $mobileVariant) {
-    @include typography($desktopVariant);
-
-    @media (max-width: $bp-mobile-max) {
-        @include typography($mobileVariant);
-    }
-}

package/dist/v2/types/navigation.d.ts

@@ -1,17 +0,0 @@
-export interface NavigationItem {
-    id: string;
-    label: string;
-    path: string;
-    requiredRoles?: string[];
-    requiredPermissions?: string[];
-    adminOnly?: boolean;
-    venueRequired?: boolean;
-}
-export interface AuthCredentials {
-    roles: string[];
-    permissions: string[];
-    isAdmin: boolean;
-    isVenueUser: boolean;
-    venueId?: string;
-}
-//# sourceMappingURL=navigation.d.ts.map

package/dist/v2/types/navigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/v2/types/navigation.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB"}

package/src/CustomDatePicker/CustomDatePicker.tsx

@@ -1,258 +0,0 @@
-import { TextInput } from '@mantine/core'
-import { useEffect, useState } from 'react'
-import { Controller, useFormContext } from 'react-hook-form'
-import { DateTime } from 'luxon'
-import { useTranslation } from 'react-i18next'
-
-type CustomDatePickerProps = {
-  name: string
-  error?: string
-  label?: string
-  showAge?: boolean
-  required?: boolean
-}
-
-export function CustomDatePicker({
-  name, 
-  error, 
-  showAge = true,
-  required = true 
-}: CustomDatePickerProps) {
-  const { t } = useTranslation()
-  const { control, setValue, watch, getValues, trigger, formState } = useFormContext()
-  const [age, setAge] = useState<number | null>(null)
-  const [localError, setLocalError] = useState<string | null>(null)
-  
-  // Get current field values
-  const day = watch(`${name}_day`) || ''
-  const month = watch(`${name}_month`) || ''
-  const year = watch(`${name}_year`) || ''
-  
-  // Initialize values from existing date
-  useEffect(() => {
-    const existingDate = getValues(name)
-    
-    if (existingDate instanceof Date && !day && !month && !year) {
-      const dateTime = DateTime.fromJSDate(existingDate)
-      if (dateTime.isValid) {
-        setValue(`${name}_day`, dateTime.day.toString().padStart(2, '0'))
-        setValue(`${name}_month`, dateTime.month.toString().padStart(2, '0'))
-        setValue(`${name}_year`, dateTime.year.toString())
-      }
-    }
-  }, [name, setValue, getValues, day, month, year])
-  
-  // Check for empty fields after submit attempt
-  useEffect(() => {
-    if (formState.isSubmitted && required) {
-      const hasEmptyFields = !day || !month || !year
-      
-      if (hasEmptyFields) {
-        setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
-        // Set the main field to null to trigger form validation
-        setValue(name, null, { shouldValidate: true })
-      } else {
-        setLocalError(null)
-      }
-    }
-  }, [formState.isSubmitted, day, month, year, required, name, setValue, t])
-  
-  // Calculate age and validate date when all fields are filled
-  useEffect(() => {
-    if (day && month && year) {
-      try {
-        // Create a date object
-        const dateObj = DateTime.fromObject({ 
-          day: parseInt(day, 10), 
-          month: parseInt(month, 10), 
-          year: parseInt(year, 10) 
-        })
-        
-        // Only proceed if date is valid
-        if (dateObj.isValid) {
-          // Set the main field value
-          setValue(name, dateObj.toJSDate(), { shouldValidate: true })
-          setLocalError(null)
-          
-          // Calculate age
-          if (showAge) {
-            const now = DateTime.now()
-            const diff = now.diff(dateObj, 'years')
-            setAge(Math.floor(diff.years))
-          }
-        } else {
-          setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
-          setValue(name, null, { shouldValidate: true })
-          setAge(null)
-        }
-      } catch (err) {
-        // If any parsing fails, just reset the age display
-        setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
-        setValue(name, null, { shouldValidate: true })
-        setAge(null)
-      }
-    } else if (formState.isSubmitted && required) {
-      // If form was submitted and fields are required but not all filled
-      setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
-      setValue(name, null, { shouldValidate: true })
-      setAge(null)
-    } else {
-      // Reset if not all fields are filled but not submitted yet
-      setValue(name, null, { shouldValidate: false })
-      setAge(null)
-    }
-  }, [day, month, year, name, setValue, showAge, formState.isSubmitted, required, t])
-
-  // After user completes all fields, validate the form
-  useEffect(() => {
-    if (day && month && year) {
-      trigger(name)
-    }
-  }, [day, month, year, name, trigger])
-
-  // Display either the form error or our local error
-  const displayError = error || localError
-
-  return (
-    <div className="tw-w-full">
-      <div className="tw-flex tw-flex-col">
-        <div className="tw-mb-2 tw-flex tw-items-center tw-justify-between">
-          <label className="tw-font-semibold">
-            {t('App:dateOfBirth')}
-            {required && <span className="tw-ml-1 tw-text-red-500"></span>}
-          </label>
-          {age !== null && (
-            <span className="tw-text-sm tw-text-gray-600">
-              {t('App:Age')}: {age}
-            </span>
-          )}
-        </div>
-        
-        <div className="tw-flex tw-flex-row tw-gap-4">
-          <div className="tw-w-1/3">
-            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Day')}</label>
-            <Controller
-              control={control}
-              name={`${name}_day`}
-              defaultValue=""
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  value={field.value || ''}
-                  placeholder="DD"
-                  maxLength={2}
-                  error={!!displayError}
-                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
-                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
-                  onChange={(e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    field.onChange(value)
-                  }}
-                  onBlur={(e) => {
-                    // Validate and format on blur
-                    let value = e.target.value.replace(/[^0-9]/g, '')
-                    if (value) {
-                      const num = parseInt(value, 10)
-                      if (num < 1) value = '01'
-                      else if (num > 31) value = '31'
-                      else value = num.toString().padStart(2, '0')
-                    }
-                    field.onChange(value)
-                  }}
-                />
-              )}
-            />
-          </div>
-          
-          <div className="tw-w-1/3">
-            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Month')}</label>
-            <Controller
-              control={control}
-              name={`${name}_month`}
-              defaultValue=""
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  value={field.value || ''}
-                  placeholder="MM"
-                  maxLength={2}
-                  error={!!displayError}
-                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
-                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
-                  onChange={(e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    field.onChange(value)
-                  }}
-                  onBlur={(e) => {
-                    // Validate and format on blur
-                    let value = e.target.value.replace(/[^0-9]/g, '')
-                    if (value) {
-                      const num = parseInt(value, 10)
-                      if (num < 1) value = '01'
-                      else if (num > 12) value = '12'
-                      else value = num.toString().padStart(2, '0')
-                    }
-                    field.onChange(value)
-                  }}
-                />
-              )}
-            />
-          </div>
-          
-          <div className="tw-w-1/3">
-            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Year')}</label>
-            <Controller
-              control={control}
-              name={`${name}_year`}
-              defaultValue=""
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  value={field.value || ''}
-                  placeholder="YYYY"
-                  maxLength={4}
-                  error={!!displayError}
-                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
-                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
-                  onChange={(e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    field.onChange(value)
-                  }}
-                  onBlur={(e) => {
-                    // Validate on blur
-                    const value = e.target.value.replace(/[^0-9]/g, '')
-                    if (value) {
-                      const num = parseInt(value, 10)
-                      const currentYear = new Date().getFullYear()
-                      if (num > currentYear) {
-                        field.onChange(currentYear.toString())
-                      } else if (num < 1900) {
-                        field.onChange('1900')
-                      }
-                    }
-                  }}
-                />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-      
-      {/* Hidden field to store the actual date value */}
-      <Controller
-        control={control}
-        name={name}
-        defaultValue={null}
-        rules={{
-          validate: value => {
-            if (required && !value) {
-              return t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') })
-            }
-            return true
-          }
-        }}
-        render={() => <input type="hidden" />}
-      />
-    </div>
-  )
-}