@licklist/design 0.78.5-dev.34 → 0.78.5-dev.36

package/dist/v2/navigation/DashboardLayout/index.d.ts

@@ -1,5 +1,5 @@
 export { DashboardLayout, type DashboardLayoutProps, type DestinationType } from './DashboardLayout';
-export { ProviderSidebar, type ProviderSidebarProps } from './ProviderSidebar';
+export { ProviderSidebar, type ProviderSidebarProps, type NavItem, HomeIcon, FlowsIcon, InventoryIcon, LoyaltyIcon, CustomersIcon, ReportsIcon, AnalyticsIcon, MarketingIcon, WaiversIcon, SettingsIcon, } from './ProviderSidebar';
 export { AdminSidebar, type AdminSidebarProps } from './AdminSidebar';
 export { TopNavigation, type TopNavigationProps } from './TopNavigation';
 export { DashboardFooter, type DashboardFooterProps } from './DashboardFooter';

package/dist/v2/navigation/DashboardLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACpG,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACxE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACpG,OAAO,EACH,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,OAAO,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,YAAY,GACf,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACxE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/v2/styles/components/Button.scss

@@ -0,0 +1,168 @@
+/* Button Component Styles based on Figma design */
+
+.new-button {
+  display: flex;
+  gap: var(--spacing-sm, 8px);
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm, 8px) var(--spacing-reg, 16px);
+  border-radius: var(--radius-md, 4px);
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-weight: var(--heading-h5-weight, 600);
+  font-size: var(--text-reg-size, 15px);
+  line-height: var(--text-reg-line, 18px);
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+
+  // Primary Button - Solid with gradient
+  &--primary {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      var(--purples-purple-500) 5.77%,
+      var(--purples-purple-700) 95.19%,
+      var(--purples-purple-900) 100%
+    ),
+    linear-gradient(
+      180deg,
+      var(--purples-purple-50) 0%,
+      var(--purples-purple-900) 100%
+    ),
+    linear-gradient(90deg, var(--purples-purple-500) 0%, var(--purples-purple-500) 100%);
+    color: var(--labels-main-label-white, #ffffff);
+
+    &:hover {
+      background-color: var(--fills-main-fill-action, #6200ee);
+    }
+
+    &:active,
+    &:focus {
+      background-color: var(--fills-main-fill-action, #6200ee);
+    }
+  }
+
+  // Primary - Soft
+  &--primary-soft {
+    background-color: var(--surfaces-main-background-action-soft, #efe6fd);
+    color: var(--labels-main-label-action, #6200ee);
+
+    &:hover {
+      background-color: var(--surfaces-main-background-action-soft-hover, #ceb0fa);
+    }
+
+    &:active {
+      background-color: var(--surfaces-main-background-action-soft-pressed, #965ff4);
+      color: var(--labels-main-label-white, #ffffff);
+    }
+  }
+
+  // Primary - Outline
+  &--primary-outline {
+    border: 2px solid var(--fills-main-fill-action, #6200ee);
+    background-color: transparent;
+    color: var(--labels-main-label-action, #6200ee);
+
+    &:hover {
+      border: 2px solid var(--fills-main-fill-action, #6200ee);
+      background-color: var(--surfaces-main-background-action-soft, #efe6fd);
+    }
+
+    &:active {
+      background-color: var(--surfaces-main-background-action-soft, #efe6fd);
+    }
+  }
+
+  // Secondary Button
+  &--secondary {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      var(--neutrals-gray-200) 5.77%,
+      var(--purples-purple-700) 95.19%,
+      var(--purples-purple-900) 100%
+    ),
+    linear-gradient(
+      180deg,
+      var(--neutrals-gray-200) 0%,
+      var(--fills-main-fill-secondary) 100%
+    ),
+    linear-gradient(90deg, var(--fills-main-fill-secondary) 0%, var(--fills-main-fill-secondary) 100%);
+    color: var(--labels-main-label-white, #ffffff);
+
+    &:hover,
+    &:active {
+      // Same gradient for hover/pressed states
+    }
+  }
+
+  // Destructive - Soft
+  &--destructive-soft {
+    background-color: var(--surfaces-main-background-danger-soft, #fceceb);
+    color: var(--labels-main-label-danger, #cc3c35);
+
+    &:hover {
+      background-color: var(--surfaces-main-background-danger-soft-hover, #f5c4c2);
+    }
+
+    &:active {
+      background-color: var(--surfaces-main-background-danger-soft-pressed, #e66861);
+      color: var(--labels-main-label-white, #ffffff);
+    }
+  }
+
+  // Destructive - Strong
+  &--destructive-strong {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      var(--red-red) 5.77%,
+      var(--red-red-dark) 95.19%,
+      var(--red-red-darkest) 100%
+    ),
+    linear-gradient(
+      180deg,
+      var(--red-red-lighter) 0%,
+      var(--red-red-darkest) 100%
+    ),
+    linear-gradient(90deg, var(--red-red-dark) 0%, var(--red-red-dark) 100%);
+    color: var(--labels-main-label-white, #ffffff);
+
+    &:hover,
+    &:active {
+      background-color: var(--fills-main-fill-danger, #cc3c35);
+    }
+  }
+
+  // Info Button
+  &--info {
+    background-color: var(--surfaces-status-background-info, #e7f4fc);
+    color: var(--labels-status-label-info, #0d7fce);
+
+    &:hover,
+    &:active {
+      // Same background for hover/pressed states
+    }
+  }
+
+  // Disabled state
+  &:disabled,
+  &--disabled {
+    background-color: var(--surfaces-status-background-disabled, #d2d5e3);
+    color: var(--labels-status-label-disabled, #9399b3);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Text styling
+  p {
+    margin: 0;
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+}
+

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

@@ -0,0 +1,172 @@
+/* New Form Input Styles based on Figma design tokens */
+
+.new-form-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs, 4px);
+    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;
+    }
+
+    &__label-optional {
+        font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: var(--text-xs-size, 11px);
+        font-weight: var(--heading-h6-weight, 500);
+        line-height: var(--text-xs-line, 14px);
+        color: var(--labels-main-label-secondary, #626a90);
+        text-align: right;
+    }
+
+    &__label-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--spacing-reg, 16px);
+        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;
+
+        &:focus {
+            outline: none;
+            border-color: var(--borders-main-border-selected, #121e52);
+            background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+        }
+
+        &::placeholder {
+            color: var(--labels-main-label-secondary, #626a90);
+        }
+    }
+
+    &__textarea {
+        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: 1px solid var(--borders-main-border-primary, #e8e9ef);
+        border-radius: var(--radius-md, 4px);
+        padding: 8px 10px;
+        min-height: 120px;
+        width: 100%;
+        resize: vertical;
+        transition: all 0.2s ease;
+
+        &:focus {
+            outline: none;
+            border-color: var(--borders-main-border-selected, #121e52);
+        }
+
+        &::placeholder {
+            color: var(--labels-main-label-secondary, #626a90);
+        }
+    }
+
+    &__input-with-icon {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-sm, 8px);
+        background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+        border: 2px solid var(--borders-main-border-primary, #e8e9ef);
+        border-radius: var(--radius-md, 4px);
+        padding: 5px;
+        height: 40px;
+
+        input {
+            flex: 1;
+            border: none;
+            background: transparent;
+            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);
+
+            &:focus {
+                outline: none;
+            }
+
+            &::placeholder {
+                color: var(--labels-main-label-secondary, #626a90);
+            }
+        }
+
+        .icon {
+            width: 22px;
+            height: 22px;
+            flex-shrink: 0;
+        }
+    }
+
+    &__verification-code {
+        display: flex;
+        gap: var(--spacing-sm, 8px);
+        height: 62px;
+
+        .code-input {
+            flex: 1;
+            background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+            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-size: var(--text-lg-size, 18px);
+            font-weight: var(--heading-h3-weight, 600);
+            color: var(--labels-main-label-primary, #121e52);
+            transition: all 0.2s ease;
+
+            &:focus {
+                outline: none;
+                border-color: var(--borders-main-border-selected, #121e52);
+            }
+        }
+    }
+
+    &__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;
+    }
+
+    // States
+    &--active {
+        .new-form-input__input {
+            border-color: var(--borders-main-border-selected, #121e52);
+        }
+    }
+
+    &--error {
+        .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/index.scss

@@ -0,0 +1,4 @@
+@import './tokens/colors';
+@import './tokens/sizes';
+@import './tokens/status';
+@import './tokens/typography';

package/dist/v2/styles/navigation/Navigation.scss

@@ -0,0 +1,17 @@
+.navigation {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    background: var(--surfaces-main-background-secondary, #F8F8FA);
+    border-right: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    overflow-y: auto;
+    transition: all 0.3s ease;
+
+    &--collapsed {
+        width: 76px;
+    }
+}

package/dist/v2/styles/navigation/NavigationItem.scss

@@ -0,0 +1,86 @@
+@import '../../../overrides/functions';
+
+.navigation-item {
+  width: 100%;
+  flex: 1 1 0;
+  padding: 8px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  outline: none;
+
+  &:hover {
+    background: linear-gradient(225deg, var(--gradients-stop1, #6200EE) 0%, var(--gradients-stop2, #5D5BF4) 50%, var(--gradients-stop3, #0E8CE2) 100%);
+
+    .navigation-item__icon svg,
+    .navigation-item__icon path {
+      fill: var(--fills-main-fill-white, white);
+      color: var(--fills-main-fill-white, white);
+    }
+
+    .navigation-item__label {
+      color: var(--labels-main-label-white, white);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--fills-main-fill-primary, #14215A);
+    outline-offset: 2px;
+  }
+
+  &--active {
+    background: linear-gradient(225deg, var(--gradients-stop1, #6200EE) 0%, var(--gradients-stop2, #5D5BF4) 50%, var(--gradients-stop3, #0E8CE2) 100%);
+
+    .navigation-item__icon svg,
+    .navigation-item__icon path {
+      fill: var(--fills-main-fill-white, white);
+      color: var(--fills-main-fill-white, white);
+    }
+
+    .navigation-item__label {
+      color: var(--labels-main-label-white, white);
+      font-weight: 600;
+    }
+  }
+
+    &--collapsed {
+        justify-content: center;
+        gap: 0;
+    }
+
+    &__icon {
+        width: 24px;
+        height: 24px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        svg,
+        img {
+            width: 18px;
+            height: 18px;
+            color: var(--fills-main-fill-primary, #14215A);
+        }
+    }
+
+    &__label {
+        color: var(--labels-main-label-primary, #121E52);
+        font-size: 13px;
+        font-family: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        line-height: 16px;
+        word-wrap: break-word;
+        white-space: nowrap;
+    }
+}

package/dist/v2/styles/navigation/NavigationSection.scss

@@ -0,0 +1,26 @@
+.navigation-section {
+    align-self: stretch;
+    padding: 8px 8px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+
+    &--collapsed {
+        padding-top: 8px;
+        padding-left: 8px;
+        padding-right: 8px;
+        align-items: flex-start; // Keep left-aligned like expanded
+    }
+
+    &__title {
+        color: var(--labels-main-label-secondary, #626A90);
+        font-size: 13px;
+        font-family: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        line-height: 16px;
+        word-wrap: break-word;
+        text-transform: none !important; // Override any global uppercase rules
+    }
+}

package/dist/v2/styles/navigation/_index.scss

@@ -0,0 +1,9 @@
+@import './NavigationItem.scss';
+@import './NavigationSection.scss';
+@import './Navigation.scss';
+@import './FigmasSideBar.scss';
+@import './FigmasAdminSideBar.scss';
+@import './FigmasTopHat.scss';
+@import './TopHatControlDisc.scss';
+@import './SideBarToggleLarge.scss';
+@import './SidebarUserElement.scss';