@licklist/design 0.78.32 → 0.78.33

package/src/v2/components/NewTable/NewTable.scss

@@ -0,0 +1,126 @@
+.new-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+
+  &.action-menu-open {
+    overflow: visible !important;
+  }
+}
+
+.new-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+
+  &__head {
+    background-color: var(--surface-secondary, #F8F8FA);
+  }
+
+  &__header-cell {
+    padding: 16px 24px;
+    font-size: var(--text-small-size, 13px);
+    font-weight: 500;
+    color: var(--label-secondary, #9399B3);
+    border-bottom: 1px solid var(--border-primary, #E8E9EF);
+    white-space: nowrap;
+  }
+
+  &__body {
+    background-color: var(--neutral-white, #FFFFFF);
+  }
+
+  &__row {
+    border-bottom: 1px solid var(--border-primary, #E8E9EF);
+    transition: background-color 0.2s ease;
+    overflow: visible;
+
+    &.action-menu-open {
+      overflow: visible !important;
+      z-index: 20;
+      position: relative;
+
+      .new-table__cell {
+        overflow: visible !important;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &--clickable {
+      cursor: pointer;
+      &:hover {
+        background-color: var(--surface-primary-hover, #F8F8FA);
+      }
+    }
+  }
+
+  &__cell {
+    padding: 16px 24px;
+    font-size: var(--text-base-size, 14px);
+    color: var(--label-primary, #121E52);
+    vertical-align: middle;
+    overflow: visible;
+  }
+
+  &__no-data-cell {
+    padding: 64px 24px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #9399B3;
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .new-table-wrapper {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .new-table {
+    min-width: 600px; // Ensure table doesn't collapse too much
+
+    &__header-cell {
+      padding: 12px 16px;
+      font-size: 12px;
+    }
+
+    &__cell {
+      padding: 12px 16px;
+      font-size: 13px;
+    }
+
+    &__no-data-cell {
+      padding: 48px 16px;
+      font-size: 14px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .new-table {
+    min-width: 500px;
+
+    &__header-cell,
+    &__cell {
+      padding: 10px 12px;
+    }
+
+    &__header-cell {
+      font-size: 11px;
+    }
+
+    &__cell {
+      font-size: 12px;
+    }
+
+    &__no-data-cell {
+      padding: 32px 12px;
+      font-size: 13px;
+    }
+  }
+}
+

package/src/v2/components/NewTable/NewTable.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import './NewTable.scss'
+
+export interface NewTableColumn<T> {
+  header: React.ReactNode
+  accessor: keyof T | ((row: T) => React.ReactNode)
+  className?: string
+  width?: string | number
+  disableRowClick?: boolean
+}
+
+export interface NewTableProps<T> {
+  columns: NewTableColumn<T>[]
+  data: T[]
+  className?: string
+  rowClassName?: string | ((row: T) => string)
+  onRowClick?: (row: T) => void
+  noDataText?: string
+}
+
+export function NewTable<T extends { id?: string | number }>({
+  columns,
+  data,
+  className = '',
+  rowClassName = '',
+  onRowClick,
+  noDataText,
+}: NewTableProps<T>) {
+  return (
+    <div className={`new-table-wrapper ${className}`}>
+      <table className="new-table">
+        <thead className="new-table__head">
+          <tr>
+            {columns.map((column, index) => (
+              <th
+                key={index}
+                className={`new-table__header-cell ${column.className || ''}`}
+                style={{ width: column.width }}
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="new-table__body">
+          {data.length > 0 ? (
+            data.map((row, rowIndex) => {
+              const customRowClass = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName
+              return (
+                <tr
+                  key={row.id || rowIndex}
+                  className={`new-table__row ${onRowClick ? 'new-table__row--clickable' : ''} ${customRowClass}`}
+                  onClick={() => onRowClick?.(row)}
+                >
+                  {columns.map((column, colIndex) => {
+                    const content =
+                      typeof column.accessor === 'function'
+                        ? column.accessor(row)
+                        : (row[column.accessor] as React.ReactNode)
+
+                    return (
+                      <td
+                        key={colIndex}
+                        className={`new-table__cell ${column.className || ''}`}
+                        role="presentation"
+                        onClick={(e) => {
+                          if (column.disableRowClick) {
+                            e.stopPropagation()
+                          }
+                        }}
+                      >
+                        {content}
+                      </td>
+                    )
+                  })}
+                </tr>
+              )
+            })
+          ) : (
+            noDataText && (
+              <tr className="new-table__no-data-row">
+                <td colSpan={columns.length} className="new-table__no-data-cell">
+                  {noDataText}
+                </td>
+              </tr>
+            )
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}

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

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

package/src/v2/components/Pagination/Pagination.scss

@@ -0,0 +1,142 @@
+.v2-pagination {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+
+  &__controls {
+    display: flex;
+    gap: 8px;
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    background-color: #efeffe; // Light purple background
+    color: #6200ee; // Primary purple color
+    transition: background-color 0.2s ease, color 0.2s ease;
+    flex-shrink: 0; // Prevent button from shrinking
+
+    &:hover:not(:disabled) {
+      background-color: #cdccfc;
+    }
+
+    &:active:not(:disabled) {
+      background-color: #b4b4fa;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #6200ee;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      background-color: #e5e7eb; // Light gray
+      color: #9ca3af; // Gray arrow
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0; // Prevent SVG from shrinking
+    }
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__page-number {
+    font-size: 15px;
+    font-weight: 600;
+    color: #14215a; // Main fill primary
+  }
+
+  &__showing {
+    font-size: 13px;
+    font-weight: 500;
+    color: #626a90; // Secondary text color
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .v2-pagination {
+    gap: 12px;
+
+    &__controls {
+      gap: 6px;
+    }
+
+    &__button {
+      width: 40px;
+      height: 40px;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    &__info {
+      gap: 2px;
+    }
+
+    &__page-number {
+      font-size: 14px;
+    }
+
+    &__showing {
+      font-size: 12px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .v2-pagination {
+    flex-direction: column;
+    gap: 10px;
+    align-items: flex-start;
+
+    &__controls {
+      order: 2;
+      width: 100%;
+      justify-content: center;
+    }
+
+    &__button {
+      width: 36px;
+      height: 36px;
+
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    &__info {
+      order: 1;
+      width: 100%;
+      text-align: center;
+      align-items: center;
+    }
+
+    &__page-number {
+      font-size: 13px;
+    }
+
+    &__showing {
+      font-size: 11px;
+    }
+  }
+}
+

package/src/v2/components/Pagination/Pagination.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import './Pagination.scss'
+import { ArrowLeftIcon, ArrowRightIcon } from '../../icons'
+
+export interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  totalItems: number
+  itemsPerPage: number
+  onPageChange: (page: number) => void
+  t: (key: string, options?: any) => string
+  entityName?: string
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  totalItems,
+  itemsPerPage,
+  onPageChange,
+  t,
+  entityName = 'items'
+}) => {
+  const startItem = (currentPage - 1) * itemsPerPage + 1
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems)
+  const isFirstPage = currentPage <= 1
+  const isLastPage = currentPage >= totalPages
+
+  const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    if (!isFirstPage) {
+      onPageChange(currentPage - 1)
+    }
+  }
+
+  const handleNext = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    if (!isLastPage) {
+      onPageChange(currentPage + 1)
+    }
+  }
+
+  return (
+    <div className="v2-pagination">
+      <div className="v2-pagination__controls">
+        <button
+          type="button"
+          className="v2-pagination__button"
+          onClick={handlePrev}
+          disabled={isFirstPage}
+          aria-label={t('App:previous', { defaultValue: 'Previous' })}
+        >
+          <ArrowLeftIcon />
+        </button>
+        <button
+          type="button"
+          className="v2-pagination__button"
+          onClick={handleNext}
+          disabled={isLastPage}
+          aria-label={t('App:next', { defaultValue: 'Next' })}
+        >
+          <ArrowRightIcon />
+        </button>
+      </div>
+      <div className="v2-pagination__info">
+        <div className="v2-pagination__page-number">
+          {t('App:page', { from: currentPage })}
+        </div>
+        <div className="v2-pagination__showing">
+          {t('App:paginationText', {
+            type: entityName,
+            from: startItem,
+            to: endItem,
+            total: totalItems
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

package/src/v2/components/QuickFilter/QuickFilter.scss

@@ -0,0 +1,67 @@
+.quick-filter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  &__label {
+    font-size: var(--text-small-size, 13px);
+    font-weight: 500;
+    color: var(--label-secondary, #9399B3);
+    white-space: nowrap;
+  }
+
+  &__options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .ghost-button {
+      border-radius: 100px;
+    }
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .quick-filter {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+
+    &__label {
+      font-size: 12px;
+    }
+
+    &__options {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding: 0;
+      margin: 0;
+      min-width: 0;
+
+      .ghost-button {
+        flex-shrink: 0;
+        border-radius: 100px;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .quick-filter {
+    gap: 8px;
+
+    &__label {
+      font-size: 11px;
+    }
+
+    &__options {
+      gap: 4px;
+    }
+  }
+}
+

package/src/v2/components/QuickFilter/QuickFilter.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { GhostButton } from '../Button'
+import './QuickFilter.scss'
+
+export interface QuickFilterOption {
+  label: string
+  value: string
+}
+
+export interface QuickFilterProps {
+  options: QuickFilterOption[]
+  selectedValues: string[]
+  onChange: (selectedValues: string[]) => void
+  label?: string
+}
+
+export const QuickFilter: React.FC<QuickFilterProps> = ({
+  options,
+  selectedValues = [],
+  onChange,
+  label,
+}) => {
+  const toggleOption = (value: string) => {
+    if (selectedValues?.includes(value)) {
+      onChange(selectedValues.filter((v) => v !== value))
+    } else {
+      onChange([...selectedValues, value])
+    }
+  }
+
+  return (
+    <div className="quick-filter">
+      {label && <span className="quick-filter__label">{label}</span>}
+      <div className="quick-filter__options">
+        {options.map((option) => (
+          <GhostButton
+            key={option.value}
+            type="button"
+            size="sm"
+            className={
+              selectedValues?.includes(option.value) ? 'active' : ''
+            }
+            onClick={() => toggleOption(option.value)}
+          >
+            {option.label}
+          </GhostButton>
+        ))}
+      </div>
+    </div>
+  )
+}

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

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

package/src/v2/components/SectionHeader/SectionHeader.tsx

@@ -6,10 +6,8 @@ export interface SectionHeaderProps {
     className?: string;
 }
 
-export const SectionHeader: React.FC<SectionHeaderProps> = ({ title, className = '' }) => {
-    return (
-        <span className={`section-header ${className}`}>
-            {title}
-        </span>
-    );
-};
+export const SectionHeader: React.FC<SectionHeaderProps> = ({ title, className = '' }) => (
+    <span className={`section-header ${className}`}>
+        {title}
+    </span>
+);

package/src/v2/components/Select/Select.scss

@@ -1,20 +1,41 @@
 @import '../../design-system/typography/Typography.scss';
 
+.select-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 8px);
+  width: 100%;
+}
+
+.select-label {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--label-primary, #121E52);
+  display: block;
+}
+
+.select-label-optional {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--label-primary, #121E52);
+}
+
+
 .select-container {
   position: relative;
-  display: inline-block;
-  width: auto;
-  max-width: 152px;
-
-  @media (min-width: 768px) {
-    max-width: 448px;
-  }
+  display: block;
+  width: 100%;
 }
 
 .select {
   @include typography('heading.h5');
   display: block;
-  width: auto;
+  width: 100%;
   height: 40px;
   padding: 8px var(--padding-reg, 16px);
   padding-right: 40px;
@@ -28,13 +49,12 @@
   border-radius: var(--radius-md, 4px);
   transition: all 0.2s ease-in-out;
   &:hover:not(:disabled) {
-    border-color: var(--disabled-regular);
+    border-color: var(--border-primary);
   }
 
   &:focus {
     outline: none;
-    border-color: var(--highlight-dark);
-    box-shadow: 0 0 0 3px var(--surface-highlight-soft);
+    border-color: var(--border-selected, #6200EE);
   }
 
   // Variants
@@ -49,7 +69,7 @@
 
   &--focus {
     background-color: var(--surface-secondary);
-    border-color: var(--border-selected);
+    border-color: var(--border-selected, #6200EE);
   }
 
   &--secondary {
@@ -148,26 +168,14 @@
 }
 
 .select {
-  &:focus {
-    outline: none;
-    border-color: var(--highlight-dark);
-    box-shadow: 0 0 0 3px var(--surface-highlight-soft);
-    transform: translateY(-1px);
-  }
-
   &:active {
     transform: translateY(0px);
-    box-shadow: 0 0 0 2px var(--surface-highlight-soft);
   }
 
   &.select--transitioning {
     opacity: 0.8;
     transform: scale(0.98);
     border-color: var(--cyan-700);
-
-    &:focus {
-      transform: scale(0.98) translateY(-1px);
-    }
   }
 }
 
@@ -186,3 +194,32 @@
 .select--filter-active {
   animation: filterPulse 0.6s ease-out;
 }
+
+.select-helper-text {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: var(--text-regular-size, 15px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-regular-line, 20px);
+  margin-top: 2px;
+  color: var(--label-secondary, #626A90);
+  min-width: max-content;
+  white-space: nowrap;
+
+  @media (max-width: 768px) {
+    min-width: unset;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+}
+
+.select-error-text {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: var(--text-sm-size, 13px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line, 18px);
+  color: var(--status-error, #D32F2F);
+  margin-top: 2px;
+}
+