@licklist/design 0.78.5-dev.111 → 0.78.5-dev.112

package/dist/v2/pages/SettingsSubPage/SettingsSubPage.js

@@ -7,7 +7,7 @@ import { ArrowLeftIcon, PlusIcon } from '../../icons/index.js';
 import './SettingsSubPage.scss.js';
 
 var SettingsSubPage = function(param) {
-    var _param_title = param.title, title = _param_title === void 0 ? '' : _param_title, _param_backLabel = param.backLabel, backLabel = _param_backLabel === void 0 ? 'Back to Settings' : _param_backLabel, onBack = param.onBack, actionLabel = param.actionLabel, onAction = param.onAction, children = param.children;
+    var _param_title = param.title, title = _param_title === void 0 ? '' : _param_title, _param_backLabel = param.backLabel, backLabel = _param_backLabel === void 0 ? 'Back to Settings' : _param_backLabel, onBack = param.onBack, actionLabel = param.actionLabel, onAction = param.onAction, children = param.children, _param_showDivider = param.showDivider, showDivider = _param_showDivider === void 0 ? true : _param_showDivider;
     return /*#__PURE__*/ jsxs("div", {
         className: "settings-sub-page",
         children: [
@@ -21,7 +21,7 @@ var SettingsSubPage = function(param) {
             }),
             /*#__PURE__*/ jsx(NewPageHeader, {
                 title: title,
-                showDivider: true
+                showDivider: showDivider
             }),
             /*#__PURE__*/ jsxs("div", {
                 className: "settings-sub-page__content",

package/dist/v2/pages/SettingsSubPage/SettingsSubPage.scss.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".settings-sub-page{align-self:stretch;display:flex;flex-direction:column}.settings-sub-page__back{align-self:flex-start;padding:24px 32px 0 0}.settings-sub-page__back .ghost-button{border-color:var(--borders-main-border-primary,#e8e9ef);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button:not(.active):hover:not(:disabled){background-color:var(--surface-action-soft,#f4f4fe);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button .ghost-button__icon svg{height:24px;width:24px}@media (max-width:768px){.settings-sub-page__back{padding:16px 16px 0 0}}.settings-sub-page__content{padding:24px 0}@media (max-width:768px){.settings-sub-page__content{padding:0}}.settings-sub-page__action{display:flex;justify-content:flex-end;margin-bottom:16px}";
+var css_248z = ".settings-sub-page{align-self:stretch;display:flex;flex-direction:column}.settings-sub-page__back{align-self:flex-start;padding:24px 0 0}.settings-sub-page__back .ghost-button{border-color:var(--borders-main-border-primary,#e8e9ef);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button:not(.active):hover:not(:disabled){background-color:var(--surface-action-soft,#f4f4fe);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button .ghost-button__icon svg{height:24px;width:24px}@media (max-width:768px){.settings-sub-page__back{padding:16px 0 0}}.settings-sub-page__content{padding:0}@media (max-width:768px){.settings-sub-page__content{padding:16px 0}}.settings-sub-page__action{display:flex;justify-content:flex-end;margin-bottom:16px}";
 styleInject(css_248z);
 
 export { css_248z as default };

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

@@ -116,6 +116,16 @@
   --pink-800: #80224D;
   --pink-900: #611A3B;
 
+  --grey-100: #F8F8FA;
+  --grey-200: #E8E9EF;
+  --grey-300: #D2D5E3;
+  --grey-400: #B6BACC;
+  --grey-500: #9399B3;
+  --grey-600: #626A90;
+  --grey-700: #433D7B;
+  --grey-800: #14215A;
+  --grey-900: #0B1232;
+
   /* Teals */
   --teal-50: #E9FAF7;
   --teal-100: #BAF0E7;
@@ -218,6 +228,15 @@
   --pink-darker: var(--pink-700);
   --pink-darkest: var(--pink-800);
 
+  /* Grey Scale */
+  --grey-lightest: var(--grey-50);
+  --grey-lighter: var(--grey-100);
+  --grey-light: var(--grey-300);
+  --grey-regular: var(--grey-500);
+  --grey-dark: var(--grey-600);
+  --grey-darker: var(--grey-700);
+  --grey-darkest: var(--grey-800);
+
   /* Green Scale */
   --green-lightest: var(--green-50);
   --green-lighter: var(--green-100);

package/dist/v2/utils/colourPicker/colors.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Standard color palette for pricing periods and other color picker components
+ */
+export declare const COLORS: {
+    name: string;
+    hex: string;
+}[];
+//# sourceMappingURL=colors.d.ts.map

package/dist/v2/utils/colourPicker/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/v2/utils/colourPicker/colors.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,MAAM;;;GAYlB,CAAA"}

package/dist/v2/utils/timeFormat/formatTime.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Formats time from "HH:mm:ss" to "HH:mm" format
+ * Useful for converting HTML time input values to backend-compatible format
+ *
+ * @param time - Time string in "HH:mm:ss" or "HH:mm" format
+ * @returns Time string in "HH:mm" format, or undefined if input is undefined
+ *
+ * @example
+ * formatTimeToHHMM("09:00:00") // returns "09:00"
+ * formatTimeToHHMM("17:30") // returns "17:30"
+ * formatTimeToHHMM(undefined) // returns undefined
+ */
+export declare const formatTimeToHHMM: (time?: string) => string | undefined;
+//# sourceMappingURL=formatTime.d.ts.map

package/dist/v2/utils/timeFormat/formatTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatTime.d.ts","sourceRoot":"","sources":["../../../../src/v2/utils/timeFormat/formatTime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,SAIzD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.111",
+  "version": "0.78.5-dev.112",
   "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.49",
+    "@licklist/core": "0.36.1-dev.52",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.18",
     "clsx": "2.1.1",
@@ -65,7 +65,7 @@
     "@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.49",
+    "@licklist/core": "0.36.1-dev.52",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.18",
     "@mantine/core": "6.0.22",

package/src/v2/components/Badge/Badge.scss

@@ -1,5 +1,5 @@
 .new-badge {
-  font-family: var(--font-family-mono, 'Geist Mono', monospace);
+  font-family: var(--font-family-sans, Geist, sans-serif);
   display: inline-flex;
   padding: 6px 10px;
   justify-content: center;
@@ -8,7 +8,6 @@
   color: var(--label-primary, #121E52);
   font-size: 11px;
   font-style: normal;
-  font-weight: 600;
   line-height: 14px;
   height: 28px;
 

package/src/v2/components/Checkbox/Checkbox.scss

@@ -28,10 +28,10 @@
     width: 0;
 
     &:checked ~ .checkbox__toggle {
-      background: var(--fill-selected, #14215A);
-      border: 1px solid var(--border-primary, #E8E9EF);
+      background: var(--fill-selected, var(--neutral-500));
+      border: none;
 
-      .checkbox__xmark {
+      .checkbox__unchecked-group {
         opacity: 0;
         visibility: hidden;
       }
@@ -43,29 +43,25 @@
     }
 
     &:focus ~ .checkbox__toggle {
-      box-shadow: 0 0 0 2px rgba(20, 33, 90, 0.2);
+      outline: none;
     }
 
     &:disabled ~ .checkbox__toggle {
-      background-color: var(--surface-status-disabled, #f8f8fa);
-      border-color: var(--border-primary, #e8e9ef);
+      background-color: var(--surface-status-disabled, var(--neutral-25));
+      border-color: var(--border-primary, var(--neutral-50));
       cursor: not-allowed;
       opacity: 0.6;
     }
   }
 
-  // Only show X mark when not pristine and not checked
+  // Only show Unchecked group (X) when not pristine and not checked
   &:not(&--pristine) &__input:not(:checked) ~ &__toggle {
-    .checkbox__xmark {
+    background: var(--grey-500); // Match image track color
+    border: none;
+
+    .checkbox__unchecked-group {
       opacity: 1;
       visibility: visible;
-      top: 50%;
-      position: absolute;
-      right: 4px;
-      transform: translateY(-50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
     }
 
     .checkbox__checked-group {
@@ -78,30 +74,18 @@
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: flex-end; // Positions X mark to the right
     width: 58px;
-    height: 34px; // Set explicit height to help with vertical centering
+    height: 34px;
     min-width: 58px;
     padding: 4px;
-    background: var(--surface-secondary, #F8F8FA);
-    border: 1px solid var(--border-primary, #E8E9EF);
+    background: var(--surface-secondary, var(--neutral-25));
+    border: none;
     border-radius: var(--padding-xl, 32px);
     flex-shrink: 0;
+    transition: background-color 0.2s ease;
   }
 
-  &__xmark {
-    width: 24px;
-    height: 24px;
-    opacity: 0; // Hidden by default (blank state)
-    visibility: hidden;
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__checked-group {
+  &__unchecked-group {
     position: absolute;
     left: 4px;
     top: 50%;
@@ -113,37 +97,33 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background: white;
+    border-radius: 50%;
   }
 
-  &__circle {
-    position: relative;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
+  &__icon-cross {
+    fill: var(--grey-500);
+    opacity: 0.5;
   }
 
-  &__checkmark {
+  &__checked-group {
     position: absolute;
+    right: 4px; // Checked position on the right
     top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translateY(-50%);
     width: 24px;
     height: 24px;
+    opacity: 0;
+    visibility: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: white;
+    border-radius: 50%;
+  }
 
-    svg {
-      width: 100%;
-      height: 100%;
-    }
+  &__icon-tick {
+    fill: var(--neutral-500);
   }
 
   &__content {
@@ -177,19 +157,19 @@
     font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
     font-size: var(--text-xs-size, 11px);
     line-height: var(--text-xs-line, 14px);
-    color: var(--label-status-error, #ef4444);
+    color: var(--label-status-error, var(--red-500));
     margin-left: 69px;
   }
 
   &__wrapper:hover &__input:not(:disabled) ~ &__toggle {
-    border-color: var(--border-primary-hover, #d1d3de);
+    // border-color: var(--border-primary-hover, #d1d3de);
   }
 
   &--pristine {
     .checkbox__toggle {
-      background: var(--surface-secondary, #F8F8FA);
+      background: var(--surface-secondary, var(--neutral-25));
     }
-    .checkbox__xmark,
+    .checkbox__unchecked-group,
     .checkbox__checked-group {
       opacity: 0 !important;
       visibility: hidden !important;
@@ -205,7 +185,7 @@
   align-items: center;
   gap: 8px;
   border-radius: var(--padding-xl, 32px);
-  border: 1px solid var(--border-primary, #E8E9EF);
-  background: var(--surface-primary, #FFF);
+  border: 1px solid var(--border-primary, var(--neutral-50));
+  background: var(--surface-primary, var(--neutral-white));
 }
 

package/src/v2/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,5 @@
 import React, { InputHTMLAttributes, forwardRef } from 'react'
+import { IconTick, IconCross } from '../../icons'
 import './Checkbox.scss'
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
@@ -41,53 +42,14 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             {...props}
           />
           <span className="checkbox__toggle">
-            {/* X mark - visible when unchecked, positioned to the right */}
-            <span className="checkbox__xmark">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-              >
-                <path
-                  d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z"
-                  fill="#14215A"
-                />
-                <path
-                  d="M18.1426 8.59961L14.0762 12.375L18.1426 16.1504L16.1006 18.3496L11.8711 14.4219L7.64258 18.3496L5.60059 16.1504L9.66602 12.375L5.60059 8.59961L7.64258 6.40039L11.8711 10.3271L16.1006 6.40039L18.1426 8.59961Z"
-                  fill="white"
-                />
-              </svg>
+            {/* White circle + X mark - visible when unchecked, positioned to the left */}
+            <span className="checkbox__unchecked-group">
+              <IconCross size={16} className="checkbox__icon-cross" />
             </span>
 
-            {/* White circle + Checkmark - visible when checked, positioned to the left */}
+            {/* White circle + Checkmark - visible when checked, positioned to the right */}
             <span className="checkbox__checked-group">
-              <span className="checkbox__circle">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                >
-                  <circle cx="12" cy="12" r="12" fill="white" />
-                </svg>
-              </span>
-              <span className="checkbox__checkmark">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                >
-                  <path
-                    d="M19.1272 8.67725L10.8545 18.1013L5.71509 13.2058L7.78491 11.0334L10.6611 13.7734L16.8728 6.69824L19.1272 8.67725Z"
-                    fill="#14215A"
-                  />
-                </svg>
-              </span>
+              <IconTick size={16} className="checkbox__icon-tick" />
             </span>
           </span>
           {(label || description) && (

package/src/v2/components/ColorPicker/ColorPicker.scss

@@ -0,0 +1,96 @@
+.color-picker-grid {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 20px;
+  row-gap: 32px;
+  margin-top: 16px;
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  transition: all 0.2s;
+
+  &--error {
+    border-color: #E0423A;
+    background-color: rgba(224, 66, 58, 0.05);
+  }
+
+  @media (max-width: 480px) {
+    column-gap: 0;
+    row-gap: 16px;
+    justify-content: flex-start;
+  }
+}
+
+.color-picker-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px; // 1.5 * 4 = 6px
+  padding: 8px; // 2 * 4 = 8px
+  border-radius: 8px;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  min-width: 72px;
+  background: transparent;
+  border: none;
+  outline: none;
+
+  @media (max-width: 480px) {
+    min-width: unset;
+    width: 25%;
+    padding: 4px;
+
+    .color-picker-outer-circle {
+      width: 48px;
+      height: 48px;
+    }
+
+    .color-picker-inner-circle {
+      width: 32px;
+      height: 32px;
+    }
+
+    .color-picker-name {
+      font-size: 10px;
+    }
+  }
+
+  &:hover {
+    background-color: var(--surface-primary-hover);
+  }
+}
+
+.color-picker-outer-circle {
+  position: relative;
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-primary);
+  transition: border-color 0.2s;
+
+  &:hover {
+    border-color: var(--label-secondary);
+  }
+
+  &--selected {
+    border-width: 2px;
+  }
+}
+
+.color-picker-inner-circle {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  transition: all 0.2s ease-out;
+}
+
+.color-picker-name {
+  font-size: 12px; // text-xs
+  font-weight: 500; // font-medium
+  color: var(--label-secondary);
+  line-height: 1.25; // leading-tight
+  text-transform: capitalize;
+}

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ColorPicker } from './ColorPicker'
+import * as React from 'react'
+import { useState } from 'react'
+
+const meta: Meta<typeof ColorPicker> = {
+  title: 'V2/Components/ColorPicker',
+  component: ColorPicker,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ColorPicker>
+
+const MOCK_COLORS = [
+  { name: 'Red', hex: '#EF4444' },
+  { name: 'Orange', hex: '#F97316' },
+  { name: 'Amber', hex: '#F59E0B' },
+  { name: 'Yellow', hex: '#EAB308' },
+  { name: 'Lime', hex: '#84CC16' },
+  { name: 'Green', hex: '#22C55E' },
+  { name: 'Emerald', hex: '#10B981' },
+  { name: 'Teal', hex: '#14B8A6' },
+  { name: 'Cyan', hex: '#06B6D4' },
+  { name: 'Sky', hex: '#0EA5E9' },
+  { name: 'Blue', hex: '#3B82F6' },
+]
+
+export const Default: Story = {
+  args: {
+    colors: MOCK_COLORS,
+    selectedColor: '#EF4444',
+    onChange: (hex: string) => console.log('Selected color:', hex),
+    t: (key: string) => key,
+  },
+}
+
+export const Controlled: Story = {
+  render: (args) => {
+    const ControlledExample = () => {
+      const [selected, setSelected] = useState('#3B82F6')
+      return (
+        <ColorPicker
+          {...args}
+          selectedColor={selected}
+          onChange={setSelected}
+          t={(key: string) => key}
+        />
+      )
+    }
+    return <ControlledExample />
+  },
+  args: {
+    colors: MOCK_COLORS,
+  },
+}
+
+export const NoSelection: Story = {
+  args: {
+    colors: MOCK_COLORS,
+    selectedColor: '',
+    onChange: (hex: string) => console.log('Selected color:', hex),
+    t: (key: string) => key,
+  },
+}

package/src/v2/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import './ColorPicker.scss'
+
+export interface ColorOption {
+  name: string
+  hex: string
+}
+
+export interface ColorPickerProps {
+  colors: ColorOption[]
+  selectedColor?: string
+  onChange: (hex: string) => void
+  t: (key: string) => string
+  error?: string
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  colors,
+  selectedColor,
+  onChange,
+  t,
+  error,
+}) => {
+  return (
+    <div className={`color-picker-grid ${error ? 'color-picker-grid--error' : ''}`}>
+      {colors.map((color) => (
+        <button
+          key={color.name}
+          type="button"
+          className="color-picker-button"
+          onClick={() => onChange(color.hex)}
+        >
+          <div
+            className={`color-picker-outer-circle ${
+              selectedColor === color.hex ? 'color-picker-outer-circle--selected' : ''
+            }`}
+            style={selectedColor === color.hex ? { borderColor: color.hex, borderWidth: '2px' } : {}}
+          >
+            <div
+              className="color-picker-inner-circle"
+              style={{ backgroundColor: color.hex }}
+            />
+          </div>
+          <span className="color-picker-name">{t(color.name)}</span>
+        </button>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1 @@
+export * from './ColorPicker'

package/src/v2/components/FeatureCard/FeatureCard.scss

@@ -0,0 +1,65 @@
+@import '../../styles/tokens/colors';
+@import '../../styles/tokens/sizes';
+
+.feature-card {
+  font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 12px;
+  background-color: var(--surface-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex: 1;
+  }
+
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  &__title {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    color: var(--label-primary);
+    margin: 0;
+  }
+
+  &__description {
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--label-primary);
+    opacity: 0.8;
+    margin: 4px 0 0;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    @media (min-width: 640px) {
+      width: auto;
+    }
+  }
+}