@licklist/design 0.78.5-dev.92 → 0.78.5-dev.94

package/src/v2/components/DataTable/DataTable.tsx

@@ -1,6 +1,7 @@
-import React, { useRef, useEffect } from 'react'
+import React from 'react'
 import { ActionMenu } from '../ActionMenu'
-import { ArrowUpIcon, ArrowDownIcon } from '../../icons'
+import { IconChevronDown } from '../../icons'
+import { Checkbox } from '../../shadcn/components/ui/checkbox'
 import './DataTable.scss'
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -33,6 +34,8 @@ export interface DataTableProps<T> {
   keyExtractor: (item: T) => string
   onRowClick?: (item: T) => void
   rowActions?: (item: T) => DataTableRowAction<T>[]
+  /** Quick-action button rendered inline beside the action menu (combined 80px cell) */
+  rowQuickActions?: (item: T) => React.ReactNode
   emptyState?: React.ReactNode
   className?: string
   sortKey?: string
@@ -55,18 +58,11 @@ interface HeaderCheckboxProps {
 }
 
 function HeaderCheckbox({ checked, indeterminate, onChange }: HeaderCheckboxProps) {
-  const ref = useRef<HTMLInputElement>(null)
-  useEffect(() => {
-    if (ref.current) ref.current.indeterminate = indeterminate
-  }, [indeterminate])
   return (
-    <input
-      type="checkbox"
-      ref={ref}
-      checked={checked}
-      onChange={onChange}
-      className="data-table__checkbox"
-      onClick={(e) => e.stopPropagation()}
+    <Checkbox
+      checked={indeterminate ? 'indeterminate' : checked}
+      onCheckedChange={onChange}
+      onClick={(e: React.MouseEvent) => e.stopPropagation()}
     />
   )
 }
@@ -79,6 +75,7 @@ export function DataTable<T>({
   keyExtractor,
   onRowClick,
   rowActions,
+  rowQuickActions,
   emptyState,
   className = '',
   sortKey,
@@ -115,7 +112,7 @@ export function DataTable<T>({
   return (
     <div className={`data-table ${className}`}>
       {/* ── Header row ── */}
-      <div className="data-table__header">
+      <div className={`data-table__header${selectable ? ' data-table__header--selectable' : ''}`}>
         {selectable && (
           <div className="data-table__th data-table__th--checkbox">
             <HeaderCheckbox
@@ -150,17 +147,20 @@ export function DataTable<T>({
                 <span
                   className={`data-table__sort-icon ${!isSorted ? 'data-table__sort-icon--hidden' : ''}`}
                 >
-                  {isSorted && sortDirection === 'desc' ? (
-                    <ArrowDownIcon />
-                  ) : (
-                    <ArrowUpIcon />
-                  )}
+                  <IconChevronDown
+                    style={{ transform: isSorted && sortDirection === 'asc' ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease' }}
+                  />
                 </span>
               )}
             </div>
           )
         })}
-        {rowActions && <div className="data-table__th data-table__th--action" />}
+        {(rowActions || rowQuickActions) && (
+          <div
+            className="data-table__th data-table__th--action"
+            style={rowQuickActions ? { width: '80px' } : undefined}
+          />
+        )}
       </div>
 
       {/* ── Body ── */}
@@ -190,14 +190,11 @@ export function DataTable<T>({
                 {selectable && (
                   <div
                     className="data-table__td data-table__td--checkbox"
-                    onClick={(e) => { e.stopPropagation(); toggleRow(key) }}
+                    onClick={(e) => e.stopPropagation()}
                   >
-                    <input
-                      type="checkbox"
-                      className="data-table__checkbox"
+                    <Checkbox
                       checked={isSelected}
-                      onChange={() => toggleRow(key)}
-                      onClick={(e) => e.stopPropagation()}
+                      onCheckedChange={() => toggleRow(key)}
                     />
                   </div>
                 )}
@@ -231,18 +228,22 @@ export function DataTable<T>({
                     )
                   })}
 
-                  {actions && actions.length > 0 && (
+                  {(actions && actions.length > 0 || rowQuickActions) && (
                     <div
                       className="data-table__td data-table__td--action"
+                      style={rowQuickActions ? { width: '80px', gap: '4px' } : undefined}
                       onClick={(e) => e.stopPropagation()}
                     >
-                      <ActionMenu
-                        items={actions.map((a) => ({
-                          label: a.label,
-                          onClick: () => a.onClick(item),
-                          variant: a.variant,
-                        }))}
-                      />
+                      {rowQuickActions?.(item)}
+                      {actions && actions.length > 0 && (
+                        <ActionMenu
+                          items={actions.map((a) => ({
+                            label: a.label,
+                            onClick: () => a.onClick(item),
+                            variant: a.variant,
+                          }))}
+                        />
+                      )}
                     </div>
                   )}
                 </div>

package/src/v2/components/FeatureToggle/FeatureToggle.scss

@@ -0,0 +1,64 @@
+@import '../../styles/index.scss';
+
+.feature-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-reg, 16px);
+  border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+  border-radius: var(--radius-reg, 8px);
+  background: var(--surfaces-main-surface-secondary, #F4F4F7);
+  width: 100%;
+  gap: 16px;
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  &__title {
+    font-family: 'Geist', sans-serif;
+    font-weight: 500;
+    font-size: 15px;
+    line-height: 20px;
+    color: var(--labels-main-label-primary, #121E52);
+  }
+
+  &__description {
+    font-family: 'Geist', sans-serif;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 18px;
+    color: var(--labels-main-label-tertiary, #9EA4BF);
+    margin: 0;
+  }
+
+  &__lock {
+    color: var(--labels-main-label-tertiary, #9EA4BF);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+}

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

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { FeatureToggle } from './FeatureToggle'
+
+const WaiversIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 4h16a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" stroke="#121E52" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M11 12h10M11 16h10M11 20h6" stroke="#121E52" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export default {
+  title: 'v2/Components/FeatureToggle',
+  component: FeatureToggle,
+  parameters: { layout: 'padded' },
+} as Meta<typeof FeatureToggle>
+
+type Story = StoryObj<typeof FeatureToggle>
+
+export const Enabled: Story = {
+  args: {
+    icon: <WaiversIcon />,
+    title: 'Waivers Enabled',
+    description: 'Allow customers to sign waivers before participating in activities.',
+    enabled: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    icon: <WaiversIcon />,
+    title: 'Waivers Disabled',
+    description: 'Waivers are currently disabled. Customers cannot sign waivers.',
+    enabled: false,
+  },
+}
+
+export const Locked: Story = {
+  args: {
+    icon: <WaiversIcon />,
+    title: 'Waivers Locked',
+    description: 'This feature is locked and cannot be changed.',
+    enabled: false,
+    isLocked: true,
+  },
+}
+
+export const ReadOnly: Story = {
+  args: {
+    icon: <WaiversIcon />,
+    title: 'Waivers Enabled',
+    description: 'Read-only display, no toggle shown.',
+    enabled: true,
+    readOnly: true,
+  },
+}

package/src/v2/components/FeatureToggle/FeatureToggle.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { LockIcon } from '../../icons'
+import { Toggle } from '../Toggle'
+import './FeatureToggle.scss'
+
+export interface FeatureToggleProps {
+  icon: React.ReactNode
+  title: string
+  description: string
+  enabled: boolean
+  onToggle?: (checked: boolean) => void
+  isLocked?: boolean
+  readOnly?: boolean
+  className?: string
+}
+
+export const FeatureToggle: React.FC<FeatureToggleProps> = ({
+  icon, title, description, enabled, onToggle, isLocked = false, readOnly = false, className = '',
+}) => (
+  <div className={`feature-toggle ${className}`}>
+    <div className="feature-toggle__left">
+      <div className="feature-toggle__icon">{icon}</div>
+      <div className="feature-toggle__text">
+        <span className="feature-toggle__title">{title}</span>
+        <p className="feature-toggle__description">{description}</p>
+      </div>
+    </div>
+    {!readOnly && (
+      isLocked ? (
+        <div className="feature-toggle__lock">
+          <LockIcon />
+        </div>
+      ) : (
+        <Toggle
+          checked={enabled}
+          onChange={(val) => onToggle?.(val)}
+        />
+      )
+    )}
+  </div>
+)

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

@@ -0,0 +1,2 @@
+export { FeatureToggle } from './FeatureToggle'
+export type { FeatureToggleProps } from './FeatureToggle'

package/src/v2/components/IconButton/IconButton.scss

@@ -5,8 +5,8 @@
   gap: var(--spacing-sm, 8px);
   padding: 0 16px 0 12px;
   height: 36px;
-  background: transparent;
-  border: 1px solid var(--border-primary);
+  background: var(--surface-action-soft);
+  border: none;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -18,33 +18,33 @@
   }
 
   &:hover {
-    background: var(--surface-secondary);
-    color: var(--label-primary);
+    background: var(--surface-action-soft-hover, color-mix(in srgb, var(--surface-action-soft) 85%, var(--label-action)));
 
     .icon-button__icon {
-      color: var(--label-primary);
+      color: var(--label-action);
     }
 
     .icon-button__label {
-      color: var(--label-primary);
+      color: var(--label-action);
     }
   }
 
   &:active {
-    background: var(--surface-tertiary);
+    background: var(--surface-action-soft);
+    opacity: 0.8;
   }
 
   &__icon {
     display: flex;
     align-items: center;
-    color: var(--label-primary);
+    color: var(--label-action);
   }
 
   &__label {
     font-size: 13px;
     font-weight: 500;
     line-height: 16px;
-    color: var(--label-primary);
+    color: var(--label-action);
   }
 }
 

package/src/v2/components/InputCheckbox/InputCheckbox.scss

@@ -16,9 +16,9 @@
     width: 16px;
     height: 16px;
     min-width: 16px;
-    border: 1px solid var(--border-primary, #e2e2e2);
+    border: 1px solid var(--border-primary);
     border-radius: 3px;
-    background: var(--surface-primary, #fff);
+    background: var(--surface-primary);
     transition: all 0.15s ease;
     position: relative;
 
@@ -37,8 +37,8 @@
   }
 
   &__input:checked + &__box {
-    background: var(--fill-selected, #14215a);
-    border-color: var(--fill-selected, #14215a);
+    background: var(--fill-selected);
+    border-color: var(--fill-selected);
 
     &::after {
       opacity: 1;
@@ -46,8 +46,8 @@
   }
 
   &__label {
-    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-family: var(--font-family-sans);
     font-size: 14px;
-    color: var(--label-primary, #121e52);
+    color: var(--label-primary);
   }
 }

package/src/v2/components/Modal/DeleteModal.scss

@@ -1,40 +1,17 @@
-.delete-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  animation: fadeIn 0.2s ease-in-out;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
+/* DeleteModal — styled on top of shadcn Dialog */
 
 .delete-modal {
-  background: white;
-  border-radius: 12px;
-  width: 95%;
-  max-width: 800px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  animation: slideUp 0.2s ease-in-out;
+  /* Override shadcn DialogContent sizing */
+  max-width: 800px !important;
+  width: 95% !important;
+  padding: 0 !important;
+  border-radius: 12px !important;
   font-family: var(--font-family-sans, 'Geist', sans-serif);
-}
+  gap: 0 !important;
 
-@keyframes slideUp {
-  from {
-    transform: translateY(10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
+  /* Hide shadcn's default close X button */
+  > button[class*="absolute"] {
+    display: none;
   }
 }
 
@@ -44,11 +21,13 @@
 
 .delete-modal__title {
   font-family: var(--font-family-sans, 'Geist', sans-serif);
-  font-size: 32px;
-  font-weight: 700;
-  color: #14215A;
+  font-size: 32px !important;
+  font-weight: 700 !important;
+  color: var(--label-primary, #14215A) !important;
   margin: 0 0 24px 0;
-  line-height: 40px;
+  line-height: 40px !important;
+  letter-spacing: normal !important;
+  padding: 48px 48px 0;
 }
 
 .delete-modal__description-group {
@@ -62,7 +41,7 @@
   font-family: var(--font-family-sans, 'Geist', sans-serif);
   font-size: 20px;
   font-weight: 400;
-  color: #626A90;
+  color: var(--label-secondary, #626A90);
   margin: 0;
   line-height: 28px;
 }
@@ -75,7 +54,7 @@
   font-family: var(--font-family-sans, 'Geist', sans-serif);
   display: block;
   font-size: 20px;
-  color: #14215A;
+  color: var(--label-primary, #14215A);
   margin-bottom: 16px;
   font-weight: 600;
 
@@ -84,32 +63,12 @@
   }
 }
 
-.delete-modal__input {
-  font-family: var(--font-family-sans, 'Geist', sans-serif);
-  width: 100%;
-  padding: 16px 24px;
-  font-size: 20px;
-  border: 1px solid #E8E9EF;
-  border-radius: 12px;
-  outline: none;
-  transition: all 0.2s ease-in-out;
-  font-family: inherit;
-  color: #14215A;
-
-  &::placeholder {
-    color: #626A90;
-    opacity: 0.6;
-  }
-
-  &:focus {
-    border-color: #D2D5E3;
-  }
-}
-
 .delete-modal__actions {
-  display: flex;
+  display: flex !important;
+  flex-direction: row !important;
   gap: 16px;
   align-items: center;
+  padding: 0 48px 48px;
 }
 
 .delete-modal__button {
@@ -121,7 +80,6 @@
   border: none;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
-  font-family: inherit;
   outline: none;
   min-height: 64px;
   display: flex;
@@ -134,7 +92,7 @@
   }
 
   &--delete {
-    background-color: #CC3C35;
+    background-color: var(--red-dark, #CC3C35);
     color: white;
 
     &:disabled {
@@ -148,11 +106,11 @@
 
   &--cancel {
     background-color: transparent;
-    color: var(--label-primary);
-    border: 2px solid #D2D5E3;
+    color: var(--label-primary, #14215A);
+    border: 2px solid var(--border-secondary, #D2D5E3);
 
     &:hover:not(:disabled) {
-      background-color: var(--surface-secondary);
+      background-color: var(--surface-secondary, #F8F8FA);
     }
   }
 }
@@ -160,20 +118,21 @@
 // Mobile styles
 @media (max-width: 768px) {
   .delete-modal {
-    max-width: 90%;
-    width: 90%;
-  }
-
-  .delete-modal__content {
-    padding: 32px 24px;
+    max-width: 90% !important;
+    width: 90% !important;
   }
 
   .delete-modal__title {
-    font-size: 24px;
-    line-height: 32px;
+    padding: 32px 24px 0;
+    font-size: 24px !important;
+    line-height: 32px !important;
     margin-bottom: 16px;
   }
 
+  .delete-modal__content {
+    padding: 32px 24px;
+  }
+
   .delete-modal__description-group {
     gap: 16px;
     margin-bottom: 24px;
@@ -195,6 +154,7 @@
 
   .delete-modal__actions {
     gap: 12px;
+    padding: 0 24px 32px;
   }
 
   .delete-modal__button {
@@ -206,20 +166,21 @@
 
 @media (max-width: 480px) {
   .delete-modal {
-    max-width: 95%;
-    width: 95%;
-  }
-
-  .delete-modal__content {
-    padding: 24px 16px;
+    max-width: 95% !important;
+    width: 95% !important;
   }
 
   .delete-modal__title {
-    font-size: 20px;
-    line-height: 28px;
+    padding: 24px 16px 0;
+    font-size: 20px !important;
+    line-height: 28px !important;
     margin-bottom: 12px;
   }
 
+  .delete-modal__content {
+    padding: 24px 16px;
+  }
+
   .delete-modal__description-group {
     gap: 12px;
     margin-bottom: 20px;
@@ -240,8 +201,9 @@
   }
 
   .delete-modal__actions {
-    flex-direction: column;
+    flex-direction: column !important;
     gap: 8px;
+    padding: 0 16px 24px;
   }
 
   .delete-modal__button {
@@ -251,4 +213,3 @@
     min-height: 48px;
   }
 }
-