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

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

@@ -1,106 +0,0 @@
-import React, { InputHTMLAttributes, forwardRef } from 'react'
-import './Checkbox.scss'
-
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  label?: string | React.ReactNode
-  description?: string
-  error?: string
-}
-
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ label, description, error, className = '', checked, onChange, ...props }, ref) => {
-    const [isPristine, setIsPristine] = React.useState(checked === undefined)
-    const hasInteractedRef = React.useRef(false)
-
-    // Update pristine state when checked prop changes (e.g., from form defaultValues)
-    React.useEffect(() => {
-      // If checked is defined (true or false) and user hasn't manually interacted, show the state
-      if (checked !== undefined && !hasInteractedRef.current) {
-        setIsPristine(false)
-      } else if (checked === undefined && !hasInteractedRef.current) {
-        // If checked becomes undefined again, restore pristine state (blank)
-        setIsPristine(true)
-      }
-    }, [checked])
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      hasInteractedRef.current = true
-      setIsPristine(false)
-      onChange?.(e)
-    }
-
-    return (
-      <div className={`checkbox ${isPristine ? 'checkbox--pristine' : ''} ${className}`}>
-        <label className="checkbox__wrapper">
-          <input
-            ref={ref}
-            type="checkbox"
-            className={`checkbox__input ${error ? 'checkbox__input--error' : ''}`}
-            checked={checked}
-            onChange={handleChange}
-            {...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>
-            </span>
-
-            {/* White circle + Checkmark - visible when checked, positioned to the left */}
-            <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>
-            </span>
-          </span>
-          {(label || description) && (
-            <div className="checkbox__content">
-              {label && <span className="checkbox__label">{label}</span>}
-              {description && <span className="checkbox__description">{description}</span>}
-            </div>
-          )}
-        </label>
-        {error && <span className="checkbox__error-text">{error}</span>}
-      </div>
-    )
-  }
-)
-
-Checkbox.displayName = 'Checkbox'

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

@@ -1,3 +0,0 @@
-export { Checkbox } from './Checkbox'
-export type { CheckboxProps } from './Checkbox'
-

package/src/v2/components/Customer/CustomerDetail.scss

@@ -1,194 +0,0 @@
-.customer-detail {
-  padding: 40px;
-  background-color: var(--surface-primary);
-  min-height: 100vh;
-  font-family: var(--font-family-sans, 'Geist', sans-serif);
-
-  &__back {
-    margin-bottom: 16px;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    border-radius: 8px;
-    border: 1px solid var(--border-primary);
-    background: transparent;
-    color: var(--purple-500);
-    font-weight: 500;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    svg {
-      width: 24px;
-      height: 24px;
-      color: var(--purple-500);
-    }
-
-    span {
-      color: var(--purple-500);
-      font-weight: 500;
-      font-size: 14px;
-    }
-
-    &:hover {
-      background-color: var(--surface-action-soft);
-      border: 1px solid var(--border-primary);
-    }
-  }
-
-  &__name {
-    font-size: 24px;
-    font-weight: 600;
-    color: var(--label-primary);
-    margin: 0 0 22px 0;
-    line-height: 1.2;
-  }
-
-  &__header {
-    margin-bottom: 40px;
-  }
-
-  &__summary-row {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 16px;
-    margin-bottom: 32px;
-  }
-
-  &__card {
-    background: var(--surface-primary);
-    border: 1px solid var(--border-primary);
-    border-radius: 12px;
-    padding: 32px;
-    margin-bottom: 24px;
-
-    &--details {
-      margin-bottom: 32px;
-    }
-
-    &--full {
-      grid-column: 1 / -1;
-    }
-  }
-
-  &__card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 32px;
-  }
-
-  &__card-title {
-    font-size: 20px;
-    font-weight: 700;
-    color: var(--label-primary);
-    margin: 0;
-  }
-
-  &__grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    column-gap: 64px;
-    row-gap: 24px;
-  }
-
-  &__info-group {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    label {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--label-secondary);
-      margin: 2px;
-      text-transform: none;
-    }
-  }
-
-  &__minor-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 0;
-    border-bottom: 1px solid var(--surface-tertiary);
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-    }
-
-    &:first-of-type {
-        padding-top: 0;
-    }
-  }
-
-  &__minor-info {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &__minor-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--label-primary);
-  }
-
-  &__minor-age {
-    font-size: 12px;
-    color: var(--label-secondary);
-  }
-
-  &__minor-status-group {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__minor-expires {
-    font-size: 12px;
-    color: var(--label-secondary);
-  }
-}
-
-// Mobile styles
-@media (max-width: 1024px) {
-  .customer-detail {
-    &__summary-row {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .customer-detail {
-    padding: 20px 0;
-
-    &__summary-row {
-      grid-template-columns: 1fr;
-      gap: 16px;
-    }
-
-    &__grid {
-      grid-template-columns: 1fr;
-      row-gap: 16px;
-    }
-
-    &__card {
-      padding: 24px;
-    }
-
-    &__minor-status-group {
-      flex-direction: column;
-      align-items: flex-end;
-      gap: 8px;
-    }
-
-    &__minor-expires {
-      order: 2;
-    }
-  }
-}
-