@licklist/design 0.78.5-dev.40 → 0.78.5-dev.43

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

@@ -1,22 +1,25 @@
 /* New Form Input Styles based on Figma design tokens */
 
 .new-form-input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs, 4px);
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  align-self: stretch;
+  width: 100%;
 
     &__label {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        font-weight: var(--heading-h5-weight, 500);
-        line-height: var(--text-sm-line, 16px);
-        color: var(--labels-main-label-primary, #121e52);
-        margin: 0;
+      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 16px; /* 123.077% */
+      color: var(--label-primary, #121E52);
+
     }
 
     &__label-optional {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
         font-size: var(--text-xs-size, 11px);
         font-weight: var(--heading-h6-weight, 500);
         line-height: var(--text-xs-line, 14px);
@@ -32,32 +35,33 @@
         width: 100%;
     }
 
-    &__input {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        line-height: var(--text-sm-line, 16px);
-        color: var(--labels-main-label-primary, #121e52);
-        background-color: var(--surfaces-main-background-secondary, #f8f8fa);
-        border: 2px solid var(--borders-main-border-primary, #e8e9ef);
-        border-radius: var(--radius-md, 4px);
-        padding: 8px 10px;
-        height: 40px;
-        width: 100%;
-        transition: all 0.2s ease;
+  &__input {
+    font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+    font-size: var(--text-sm-size, 13px);
+    line-height: var(--text-sm-line, 16px);
+    flex: 1 0 0;
+    background-color: var(--surfaces-main-background-secondary);
+    border: 2px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    padding: 8px 10px;
+    min-height: 40px;
+    background: var(--surface-secondary);
+    width: 100%;
+    transition: all 0.2s ease;
 
-        &:focus {
-            outline: none;
-            border-color: var(--borders-main-border-selected, #121e52);
-            background-color: var(--surfaces-main-background-secondary, #f8f8fa);
-        }
+    &:focus {
+      outline: none;
+      border-color: var(--border-selected, #6200EE);
+      background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+    }
 
-        &::placeholder {
-            color: var(--labels-main-label-secondary, #626a90);
-        }
+    &::placeholder {
+      color: var(--labels-main-label-secondary, #626a90);
     }
+  }
 
     &__textarea {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
         font-size: var(--text-sm-size, 13px);
         line-height: var(--text-sm-line, 16px);
         color: var(--labels-main-label-primary, #121e52);
@@ -72,7 +76,7 @@
 
         &:focus {
             outline: none;
-            border-color: var(--borders-main-border-selected, #121e52);
+            border-color: var(--border-selected, #6200EE);
         }
 
         &::placeholder {
@@ -88,13 +92,13 @@
         border: 2px solid var(--borders-main-border-primary, #e8e9ef);
         border-radius: var(--radius-md, 4px);
         padding: 5px;
-        height: 40px;
+        min-height: 40px;
 
         input {
             flex: 1;
             border: none;
             background: transparent;
-            font-family: var(--font-family-sans, 'Geist', sans-serif);
+            font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
             font-size: var(--text-sm-size, 13px);
             line-height: var(--text-sm-line, 16px);
             color: var(--labels-main-label-primary, #121e52);
@@ -126,7 +130,7 @@
             border: 2px solid var(--borders-main-border-primary, #e8e9ef);
             border-radius: var(--radius-md, 4px);
             text-align: center;
-            font-family: var(--font-family-sans, 'Geist', sans-serif);
+            font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
             font-size: var(--text-lg-size, 18px);
             font-weight: var(--heading-h3-weight, 600);
             color: var(--labels-main-label-primary, #121e52);
@@ -134,24 +138,35 @@
 
             &:focus {
                 outline: none;
-                border-color: var(--borders-main-border-selected, #121e52);
+                border-color: var(--border-selected, #6200EE);
             }
         }
     }
 
     &__helper-text {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        font-weight: 400;
-        line-height: var(--text-sm-line, 16px);
-        color: var(--labels-main-label-secondary, #626a90);
-        margin: 0;
+      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 16px;
+      margin-top: 2px;
+      color: var(--label-secondary, #626A90);
+    }
+
+    &__error-text {
+      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+      font-size: 11px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 14px;
+      margin-top: 2px;
+      color: var(--labels-status-label-error, #ef4444);
     }
 
     // States
     &--active {
         .new-form-input__input {
-            border-color: var(--borders-main-border-selected, #121e52);
+            border-color: var(--border-selected, #6200EE);
         }
     }
 
@@ -159,14 +174,10 @@
         .new-form-input__input {
             border-color: var(--borders-status-border-error, #ef4444);
         }
-
-        .new-form-input__helper-text {
-            color: var(--labels-status-label-error, #ef4444);
-        }
     }
 
     &--disabled {
         opacity: var(--opacity-50, 0.5);
         pointer-events: none;
     }
-}
+}

package/dist/v2/styles/form/NewInput.scss.js

@@ -0,0 +1,6 @@
+import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{color:var(--label-primary,#121e52);font-size:13px;font-style:normal;font-weight:500;line-height:16px}.new-form-input__label,.new-form-input__label-optional{font-family:var(--font-family-sans,\"Geist\",sans-serif),serif}.new-form-input__label-optional{color:var(--labels-main-label-secondary,#626a90);font-size:var(--text-xs-size,11px);font-weight:var(--heading-h6-weight,500);line-height:var(--text-xs-line,14px);text-align:right}.new-form-input__label-row{align-items:center;display:flex;gap:var(--spacing-reg,16px);justify-content:space-between;width:100%}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);flex:1 0 0;font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-size:var(--text-sm-size,13px);line-height:var(--text-sm-line,16px);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-size:var(--text-sm-size,13px);line-height:var(--text-sm-line,16px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:40px;padding:5px}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-size:var(--text-sm-size,13px);line-height:var(--text-sm-line,16px)}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon .icon{flex-shrink:0;height:22px;width:22px}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-size:13px;line-height:16px}.new-form-input__error-text,.new-form-input__helper-text{font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-style:normal;font-weight:400;margin-top:2px}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-size:11px;line-height:14px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/v2/styles/index.scss

@@ -2,3 +2,4 @@
 @import './tokens/sizes';
 @import './tokens/status';
 @import './tokens/typography';
+@import './form/Layout';

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

@@ -5,7 +5,7 @@
 
 :root {
   /* Base Colors - BKIT */
-  
+
   /* Blues */
   --blue-50: #E7F4FC;
   --blue-100: #B4DBF6;
@@ -144,7 +144,7 @@
   --neutral-black: #000000;
 
   /* Main Color Abstractions */
-  
+
   /* Purple Scale */
   --purple-lightest: var(--purple-50);
   --purple-lighter: var(--purple-100);
@@ -253,7 +253,7 @@
   --shade-darkest: var(--neutral-black);
 
   /* Semantic Colors */
-  
+
   /* Highlight Colors */
   --highlight-lightest: var(--cyan-lightest);
   --highlight-lighter: var(--cyan-lighter);
@@ -326,7 +326,7 @@
   --disabled-darkest: var(--shade-regular);
 
   /* Light Theme Palette Mappings */
-  
+
   /* Labels */
   --label-primary: var(--shade-light);
   --label-secondary: var(--tone-darkest);
@@ -387,7 +387,7 @@
   /* Borders */
   --border-primary: var(--tone-light);
   --border-secondary: var(--tone-regular);
-  --border-selected: var(--shade-light);
+  --border-selected: var(--purple-regular);
   --border-action: var(--actions-regular);
   --border-status-error: var(--errors-lighter);
   --border-status-success: var(--success-lighter);
@@ -551,4 +551,4 @@
 
 @mixin color-border($color) {
   border-color: var(--#{$color});
-}
+}

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

@@ -7,7 +7,7 @@
     --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 */
+  /* Headings Desktop */
     --heading-xxl-size: 44px;
     --heading-xxl-line: 48px;
     --heading-xxl-weight: 600;
@@ -143,4 +143,4 @@ $typo-map: (
     @media (max-width: $bp-mobile-max) {
         @include typography($mobileVariant);
     }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.40",
+  "version": "0.78.5-dev.43",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"

package/src/index.ts

@@ -48,3 +48,4 @@ export * from './PageNotFound'
 export * from './UnderMaintenance'
 export * from './v2/dashboard-analytics'
 export * from './v2/navigation/DashboardLayout'
+export * from './v2/components'

package/src/v2/components/Alert/Alert.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/overrides/functions';
+@import '../../styles/index.scss';
 
 .alert {
   background: var(--surfaces-status-background-success, #eef9ea);
@@ -133,7 +133,7 @@
     gap: 8px;
     align-items: center;
     cursor: pointer;
-    
+
     &:hover {
       opacity: 0.8;
     }
@@ -172,7 +172,7 @@
     align-items: center;
     justify-content: center;
     transition: opacity 0.2s ease;
-    
+
     &:hover {
       opacity: 0.7;
     }

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

@@ -1,19 +1,18 @@
-import React, { HTMLAttributes } from 'react'
+import { ButtonHTMLAttributes } from 'react'
 import './Button.scss'
 
-export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'primary-soft' | 'primary-outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled'
   size?: 'sm' | 'md' | 'lg'
-  disabled?: boolean
 }
 
-export function Button({ 
-  variant = 'primary', 
-  size = 'md', 
-  disabled = false, 
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
   className = '',
   children,
-  ...props 
+  ...props
 }: ButtonProps) {
   const classes = [
     'new-button',
@@ -22,16 +21,39 @@ export function Button({
     className
   ].filter(Boolean).join(' ')
 
+  const content = typeof children === 'string' ? (
+    <span className="new-button__text">{children}</span>
+  ) : children
+
   return (
-    <button 
-      className={classes} 
+    <button
+      className={classes}
       disabled={disabled}
       {...props}
     >
-      {children}
+      {content}
     </button>
   )
 }
 
-export default Button
+export interface ButtonTextProps {
+  children: React.ReactNode
+  className?: string
+  color?: 'primary' | 'secondary' | 'danger' | 'white' | 'action'
+}
+
+export function ButtonText({ children, className = '', color }: ButtonTextProps) {
+  const classes = [
+    'new-button__text',
+    color ? `new-button__text--${color}` : '',
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <span className={classes}>
+      {children}
+    </span>
+  )
+}
+
 

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

@@ -1,3 +1,3 @@
-export { Button } from './Button'
-export type { ButtonProps } from './Button'
+export { Button, ButtonText } from './Button'
+export type { ButtonProps, ButtonTextProps } from './Button'
 

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

@@ -0,0 +1,190 @@
+@import '../../styles/index.scss';
+
+.checkbox {
+  display: flex;
+  max-width: 500px;
+  align-items: flex-start;
+  gap: 11px;
+  align-self: stretch;
+
+  &__wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 11px;
+    cursor: pointer;
+    user-select: none;
+    width: 100%;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    &:checked ~ .checkbox__toggle {
+      background: var(--fill-selected, #14215A);
+      border: 1px solid var(--border-primary, #E8E9EF);
+
+      .checkbox__xmark {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      .checkbox__checked-group {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    &:focus ~ .checkbox__toggle {
+      box-shadow: 0 0 0 2px rgba(20, 33, 90, 0.2);
+    }
+
+    &:disabled ~ .checkbox__toggle {
+      background-color: var(--surface-status-disabled, #f8f8fa);
+      border-color: var(--border-primary, #e8e9ef);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  // Only show X mark when not pristine and not checked
+  &:not(&--pristine) &__input:not(:checked) ~ &__toggle {
+    .checkbox__xmark {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(0); // X mark slides to right (natural position)
+    }
+
+    .checkbox__checked-group {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  &__toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end; // Positions X mark to the right
+    width: 58px;
+    height: auto;
+    min-width: 58px;
+    padding: 4px;
+    background: transparent;
+    border: 1px solid var(--border-primary, #E8E9EF);
+    border-radius: var(--padding-xl, 32px);
+    transition: background 0.3s ease, border 0.3s ease;
+    flex-shrink: 0;
+  }
+
+  &__xmark {
+    width: 24px;
+    height: 24px;
+    opacity: 0; // Hidden by default (blank state)
+    visibility: hidden;
+    transition: all 0.3s ease;
+    transform: translateX(-20px); // Start from left when hidden
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__checked-group {
+    position: absolute;
+    left: 4px;
+    width: 24px;
+    height: 24px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+  }
+
+  &__circle {
+    position: relative;
+    width: 24px;
+    height: 24px;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__checkmark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 24px;
+    height: 24px;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+  }
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+    color: var(--label-primary);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+  }
+
+  &__description {
+    color: var(--label-secondary);
+    font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+  }
+
+  &__error-text {
+    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);
+    margin-left: 69px;
+  }
+
+  &__wrapper:hover &__input:not(:disabled) ~ &__toggle {
+    border-color: var(--border-primary-hover, #d1d3de);
+  }
+
+  // Pristine state - blank checkbox on load (no icons)
+  &--pristine {
+    .checkbox__xmark,
+    .checkbox__checked-group {
+      opacity: 0 !important;
+      visibility: hidden !important;
+    }
+  }
+}
+
+.checkbox-pristine-wrapper {
+  display: flex;
+  width: 58px;
+  padding: 4px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--padding-xl, 32px);
+  border: 1px solid var(--border-primary, #E8E9EF);
+  background: var(--surface-primary, #FFF);
+}
+