@bcc-code/component-library-vue 0.3.0 → 0.4.1

package/dist/theme.css

@@ -1822,92 +1822,119 @@
 
 /* === ./components/custom/styles.css === */
 
-/* from ./BccReact/BccReact.css */
+/* from ./BccAvatar/BccAvatar.css */
 @layer components {
-  .bcc-react {
-    @apply relative flex w-full items-center overflow-visible;
-  }
-  .bcc-react-toggle {
-    @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
-  }
-  .bcc-react-list {
-    @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
-  }
-  .bcc-react-empty {
-    @apply heading-xs flex items-center;
-  }
+    .bcc-avatar {
+        --p-avatar-background: var(--ctx-background);
+        --p-avatar-color: var(--ctx-text);
+        --bcc-avatar-border: var(--ctx-border);
+        @apply overflow-hidden shrink-0 ctx-gray-subtler;
+    }
+    .bcc-avatar.male,
+    .bcc-avatar.M {
+        @apply ctx-blue-subtler;
+    }
+    .bcc-avatar.female,
+    .bcc-avatar.F {
+        @apply ctx-purple-subtler;
+    }
+    .bcc-avatar.male.child,
+    .bcc-avatar.M.child {
+        @apply ctx-teal-subtler;
+    }
+    .bcc-avatar.female.child,
+    .bcc-avatar.F.child {
+        @apply ctx-magenta-subtler;
+    }
+    .bcc-avatar.bordered {
+        @apply border-2 border-ctx;
+    }
+    .bcc-avatar.xs {
+        @apply size-5 text-xs;
+    }
+    .bcc-avatar.sm {
+        @apply size-6 text-sm;
+    }
+    .bcc-avatar.md {
+        @apply size-8 text-base;
+    }
+    .bcc-avatar.lg {
+        @apply size-10 text-lg;
+    }
+    .bcc-avatar.xl {
+        @apply size-12 text-xl;
+    }
+    .bcc-avatar.xxl {
+        @apply size-20 text-3xl;
+    }
+    .bcc-avatar.xxxl {
+        @apply size-24 text-4xl;
+    }
 
-  .bcc-react-selector-container {
-    @apply absolute z-50 h-9;
-    @apply top-11 origin-top-left;
-  }
+    .bcc-avatar.squared.lg {
+        @apply text-xl;
+    }
+    .bcc-avatar.squared.xl {
+        @apply text-2xl;
+    }
+    .bcc-avatar.squared.xxl {
+        @apply text-4xl;
+    }
+    .bcc-avatar.squared.xxxl {
+        @apply text-5xl;
+    }
 
-  .bcc-react-selector-container--top {
-    @apply -top-10 origin-bottom-left;
-  }
 
-  .bcc-react-selector {
-    @apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
-    border-radius: 18px;
-  }
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
+        transform: translate(25%, -25%);
+    }
+}
 
-  .bcc-react-selector-emojis-container {
-    @apply flex items-center bg-neutral-100 px-1;
-  }
 
-  .bcc-react-selector-more {
-    @apply flex w-9 items-center justify-center;
+/* from ./BccBadge/BccBadge.css */
+@layer components {
+  .bcc-badge {
+    @apply inline-flex shrink-0 gap-1 items-center justify-center rounded-full leading-none whitespace-nowrap;
+  
+    @apply bg-ctx text-ctx;
   }
-  .bcc-react-selector-more-btn {
-    @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
+  .bcc-badge.md {
+    @apply h-5 w-5 text-body-sm p-0.5;
   }
-
-  .bcc-react-dropdown-container {
-    @apply left-0 top-0 -z-10 w-full max-w-full;
-    width: 296px;
+  .bcc-badge.sm {
+    @apply w-4 h-4 text-body-sm p-0.5;
   }
-  .bcc-react-dropdown-container--top {
-    @apply bottom-0 top-auto pb-0;
+  .bcc-badge.lg {
+    @apply w-6 h-6 text-body-sm p-1;
   }
-
-  .bcc-react-dropdown {
-    @apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
+  .bcc-badge.xl {
+    @apply w-8 h-8 text-body-md p-1.5;
   }
 
-  .bcc-react-arrow-down-icon {
-    @apply h-6 w-6 text-slate-600;
-    transition: transform 0.3s ease;
+  .bcc-badge.bcc-badge-text {
+    @apply w-auto px-2;
   }
-  .bcc-react-arrow-down-icon.open {
-    transform: rotate(-180deg);
+  .bcc-badge-text.lg { 
+    @apply px-3;
   }
 
-  .bcc-react-selector-item {
-    @apply p-2 text-xl leading-none transition-transform duration-200 ease-out h-9 w-9 relative;
+  .bcc-badge .bcc-badge-icon {
+    @apply size-full;
   }
 
-  .bcc-react-selector-item--clicked {
-    animation: scaleFadeOut 300ms forwards;
+  .bcc-badge.border {
+    @apply border-1;
+    border-color: var(--ctx-background-pressed);
   }
-
-  @keyframes scaleFadeOut {
-    0% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(1.4);
-      opacity: 0;
-    }
+  .bcc-badge.bordered {
+    @apply border-2;
+    border-color: var(--ctx-background-pressed);
   }
 
-  .bcc-react-emoji-list-item {
-    @apply flex ctx clickable items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
-    /* Default --not-selected */
-    @apply ctx-neutral-subtlest;
-  }
-  .bcc-react-emoji-list-item.selected {
-    @apply ctx-neutral-subtle;
+  .bcc-badge.squared  {
+    @apply rounded;
   }
 }
 
@@ -1996,61 +2023,80 @@
 
 
 
-/* from ./BccNpsScore/BccNpsScore.css */
+/* from ./BccFrame/BccFrame.css */
 @layer components {
-  .bcc-nps-score {
-    @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2;
-  }
+    .bcc-frame {
+        @apply ctx ctx-default w-full;
+    }
 
-  .bcc-nps-score--heading {
-    @apply flex items-center justify-between;
-  }
+    .bcc-frame.bcc-frame--shadow {
+        @apply shadow shadow-ctx;
+    }
 
-  .bcc-nps-score--label {
-    @apply flex-1 truncate;
-  }
+    .bcc-frame--raised {
+        --ctx-background: var(--color-elevation-surface-raised-default);
+    }
+    .bcc-frame--raised.rounded {
+        @apply rounded;
+    }
+    .bcc-frame--raised.bcc-frame--shadow {
+        @apply shadow-raised;
+    }
 
-  .bcc-nps-score--bar {
-    @apply flex justify-evenly rounded-xl text-white pointer-events-none;
-    @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
-  }
+    .bcc-frame--overlay {
+        --ctx-background: var(--color-elevation-surface-overlay-default);
+    }
+    .bcc-frame--overlay.bcc-frame--shadow {
+        @apply shadow-overlay;
+    }
 
-  .bcc-nps-score--bar.reverse {
-    @apply bg-linear-to-l;
-  }
+    .bcc-frame--sunken {
+        --ctx-background: var(--color-elevation-surface-sunken-default);
+    }
+    .bcc-frame--sunken.bcc-frame--shadow {
+        @apply shadow-inner;
+    }
+}
 
-  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
-    @apply bg-ctx ctx-gray-subtler text-disabled;
-  }
 
-  .bcc-nps-score--number {
-    @apply border-border-inverse;
-    @apply flex h-8 flex-1 items-center justify-center border-r-2 font-bold text-sm leading-none;
-    @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
+/* from ./BccGraphic/BccGraphic.css */
+@layer components {
+  .bcc-graphic .corner,
+  .bcc-graphic .center-slot {
+    @apply absolute z-10;
   }
-
-  .bcc-nps-score--number:disabled {
-    @apply pointer-events-none cursor-default;
+  .bcc-graphic .corner.top-left {
+    @apply left-4 top-4;
   }
-
-  .bcc-nps-score--number.active {
-    @apply pointer-events-none;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  .bcc-graphic .corner.top-right {
+    @apply right-4 top-4;
+  }
+  .bcc-graphic .corner.bottom-right {
+    @apply bottom-4 right-4;
+  }
+  .bcc-graphic .corner.bottom-left {
+    @apply bottom-4 left-4;
+  }
+  .bcc-graphic .center-slot {
+    @apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center;
   }
 
-  .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  .bcc-graphic {
+    @apply relative flex max-h-full w-full bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
   }
 
-  .bcc-nps-score--number.inactive {
-    @apply bg-ctx text-ctx ctx-gray-subtle;
+  .bcc-graphic-banner {
+    @apply absolute inset-0 h-full w-full object-cover object-center;
+  }
+  .bcc-graphic-banner--loading {
+    @apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
   }
 
-  .bcc-nps-score--number:first-child {
-    @apply rounded-l-xl pl-0.5;
+  .bcc-graphic-logo {
+    @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
   }
-  .bcc-nps-score--number:last-child{
-    @apply rounded-r-xl border-r-0 pr-0.5;
+  .bcc-graphic-logo--loading {
+    @apply animate-pulse bg-black opacity-10 blur-sm;
   }
 }
 
@@ -2104,217 +2150,192 @@
 
 
 
-/* from ./BccGraphic/BccGraphic.css */
+/* from ./BccNpsScore/BccNpsScore.css */
 @layer components {
-  .bcc-graphic .corner,
-  .bcc-graphic .center-slot {
-    @apply absolute z-10;
+  .bcc-nps-score {
+    @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2;
   }
-  .bcc-graphic .corner.top-left {
-    @apply left-4 top-4;
+
+  .bcc-nps-score--heading {
+    @apply flex items-center justify-between;
   }
-  .bcc-graphic .corner.top-right {
-    @apply right-4 top-4;
+
+  .bcc-nps-score--label {
+    @apply flex-1 truncate;
   }
-  .bcc-graphic .corner.bottom-right {
-    @apply bottom-4 right-4;
+
+  .bcc-nps-score--bar {
+    @apply flex justify-evenly rounded-xl text-white pointer-events-none;
+    @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
   }
-  .bcc-graphic .corner.bottom-left {
-    @apply bottom-4 left-4;
+
+  .bcc-nps-score--bar.reverse {
+    @apply bg-linear-to-l;
   }
-  .bcc-graphic .center-slot {
-    @apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center;
+
+  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
+    @apply bg-ctx ctx-gray-subtler text-disabled;
   }
 
-  .bcc-graphic {
-    @apply relative flex max-h-full w-full bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
+  .bcc-nps-score--number {
+    @apply border-border-inverse;
+    @apply flex h-8 flex-1 items-center justify-center border-r-2 font-bold text-sm leading-none;
+    @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
   }
 
-  .bcc-graphic-banner {
-    @apply absolute inset-0 h-full w-full object-cover object-center;
+  .bcc-nps-score--number:disabled {
+    @apply pointer-events-none cursor-default;
   }
-  .bcc-graphic-banner--loading {
-    @apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
+
+  .bcc-nps-score--number.active {
+    @apply pointer-events-none;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   }
 
-  .bcc-graphic-logo {
-    @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
+  .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   }
-  .bcc-graphic-logo--loading {
-    @apply animate-pulse bg-black opacity-10 blur-sm;
+
+  .bcc-nps-score--number.inactive {
+    @apply bg-ctx text-ctx ctx-gray-subtle;
+  }
+
+  .bcc-nps-score--number:first-child {
+    @apply rounded-l-xl pl-0.5;
+  }
+  .bcc-nps-score--number:last-child{
+    @apply rounded-r-xl border-r-0 pr-0.5;
   }
 }
 
 
 
-/* from ./BccFrame/BccFrame.css */
+/* from ./BccReact/BccReact.css */
 @layer components {
-    .bcc-frame {
-        @apply ctx ctx-default w-full;
-    }
-
-    .bcc-frame.bcc-frame--shadow {
-        @apply shadow shadow-ctx;
-    }
-
-    .bcc-frame--raised {
-        --ctx-background: var(--color-elevation-surface-raised-default);
-    }
-    .bcc-frame--raised.rounded {
-        @apply rounded;
-    }
-    .bcc-frame--raised.bcc-frame--shadow {
-        @apply shadow-raised;
-    }
-
-    .bcc-frame--overlay {
-        --ctx-background: var(--color-elevation-surface-overlay-default);
-    }
-    .bcc-frame--overlay.bcc-frame--shadow {
-        @apply shadow-overlay;
-    }
+  .bcc-react {
+    @apply relative flex w-full items-center overflow-visible;
+  }
+  .bcc-react-toggle {
+    @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
+  }
+  .bcc-react-list {
+    @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
+  }
+  .bcc-react-empty {
+    @apply heading-xs flex items-center;
+  }
 
-    .bcc-frame--sunken {
-        --ctx-background: var(--color-elevation-surface-sunken-default);
-    }
-    .bcc-frame--sunken.bcc-frame--shadow {
-        @apply shadow-inner;
-    }
-}
+  .bcc-react-selector-container {
+    @apply absolute z-50 h-9;
+    @apply top-11 origin-top-left;
+  }
 
+  .bcc-react-selector-container--top {
+    @apply -top-10 origin-bottom-left;
+  }
 
-/* from ./BccToggle/BccToggle.css */
-@layer components {
-    .p-toggleswitch.useCtx {
-        --p-toggleswitch-background: var(--ctx-background);
-        --p-toggleswitch-hover-background: var(--ctx-background-hover);
-        --p-toggleswitch-checked-background: var(--ctx-background);
-        --p-toggleswitch-checked-hover-background: var(--ctx-background-hover);
-    }
-    .p-toggleswitch.loading {
-        @apply pointer-events-none;
-    }
-    .p-toggleswitch.toggled:not(.p-toggleswitch-checked) {
-        --p-toggleswitch-background: var(--color-background-danger-bolder-default);
-        --p-toggleswitch-hover-background: var(--color-background-danger-bolder-hover);
-    }
-}
+  .bcc-react-selector {
+    @apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
+    border-radius: 18px;
+  }
 
+  .bcc-react-selector-emojis-container {
+    @apply flex items-center bg-neutral-100 px-1;
+  }
 
-/* from ./BccBadge/BccBadge.css */
-@layer components {
-  .bcc-badge {
-    @apply inline-flex shrink-0 gap-1 items-center justify-center rounded-full leading-none whitespace-nowrap;
-  
-    @apply bg-ctx text-ctx;
+  .bcc-react-selector-more {
+    @apply flex w-9 items-center justify-center;
   }
-  .bcc-badge.md {
-    @apply h-5 w-5 text-body-sm p-0.5;
+  .bcc-react-selector-more-btn {
+    @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
   }
-  .bcc-badge.sm {
-    @apply w-4 h-4 text-body-sm p-0.5;
+
+  .bcc-react-dropdown-container {
+    @apply left-0 top-0 -z-10 w-full max-w-full;
+    width: 296px;
   }
-  .bcc-badge.lg {
-    @apply w-6 h-6 text-body-sm p-1;
+  .bcc-react-dropdown-container--top {
+    @apply bottom-0 top-auto pb-0;
   }
-  .bcc-badge.xl {
-    @apply w-8 h-8 text-body-md p-1.5;
+
+  .bcc-react-dropdown {
+    @apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
   }
 
-  .bcc-badge.bcc-badge-text {
-    @apply w-auto px-2;
+  .bcc-react-arrow-down-icon {
+    @apply h-6 w-6 text-slate-600;
+    transition: transform 0.3s ease;
   }
-  .bcc-badge-text.lg { 
-    @apply px-3;
+  .bcc-react-arrow-down-icon.open {
+    transform: rotate(-180deg);
   }
 
-  .bcc-badge .bcc-badge-icon {
-    @apply size-full;
+  .bcc-react-selector-item {
+    @apply p-2 text-xl leading-none transition-transform duration-200 ease-out h-9 w-9 relative;
   }
 
-  .bcc-badge.border {
-    @apply border-1;
-    border-color: var(--ctx-background-pressed);
+  .bcc-react-selector-item--clicked {
+    animation: scaleFadeOut 300ms forwards;
   }
-  .bcc-badge.bordered {
-    @apply border-2;
-    border-color: var(--ctx-background-pressed);
+
+  @keyframes scaleFadeOut {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.4);
+      opacity: 0;
+    }
   }
 
-  .bcc-badge.squared  {
-    @apply rounded;
+  .bcc-react-emoji-list-item {
+    @apply flex ctx clickable items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
+    /* Default --not-selected */
+    @apply ctx-neutral-subtlest;
+  }
+  .bcc-react-emoji-list-item.selected {
+    @apply ctx-neutral-subtle;
   }
 }
 
 
 
-/* from ./BccAvatar/BccAvatar.css */
+/* from ./BccTabs/BccTabs.css */
 @layer components {
-    .bcc-avatar {
-        --p-avatar-background: var(--ctx-background);
-        --p-avatar-color: var(--ctx-text);
-        --bcc-avatar-border: var(--ctx-border);
-        @apply overflow-hidden shrink-0 ctx-gray-subtler;
-    }
-    .bcc-avatar.male,
-    .bcc-avatar.M {
-        @apply ctx-blue-subtler;
-    }
-    .bcc-avatar.female,
-    .bcc-avatar.F {
-        @apply ctx-purple-subtler;
+    .bcc-tabs-fill.p-tabs {
+        height: 100%;
+        overflow: hidden;
     }
-    .bcc-avatar.male.child,
-    .bcc-avatar.M.child {
-        @apply ctx-teal-subtler;
-    }
-    .bcc-avatar.female.child,
-    .bcc-avatar.F.child {
-        @apply ctx-magenta-subtler;
-    }
-    .bcc-avatar.bordered {
-        @apply border-2 border-ctx;
-    }
-    .bcc-avatar.xs {
-        @apply size-5 text-xs;
-    }
-    .bcc-avatar.sm {
-        @apply size-6 text-sm;
-    }
-    .bcc-avatar.md {
-        @apply size-8 text-base;
-    }
-    .bcc-avatar.lg {
-        @apply size-10 text-lg;
-    }
-    .bcc-avatar.xl {
-        @apply size-12 text-xl;
+    .bcc-tabs-fill.p-tabs > .p-tablist {
+        flex-shrink: 0;
     }
-    .bcc-avatar.xxl {
-        @apply size-20 text-3xl;
+    .bcc-tabs-fill.p-tabs > .p-tabpanels {
+        height: 100%;
+        overflow: hidden;
+        padding: 0;
     }
-    .bcc-avatar.xxxl {
-        @apply size-24 text-4xl;
+    .bcc-tabs-fill.p-tabs > .p-tabpanels > .p-tabpanel {
+        height: 100%;
+        overflow: auto;
     }
+}
 
-    .bcc-avatar.squared.lg {
-        @apply text-xl;
-    }
-    .bcc-avatar.squared.xl {
-        @apply text-2xl;
-    }
-    .bcc-avatar.squared.xxl {
-        @apply text-4xl;
+
+/* from ./BccToggle/BccToggle.css */
+@layer components {
+    .p-toggleswitch.useCtx {
+        --p-toggleswitch-background: var(--ctx-background);
+        --p-toggleswitch-hover-background: var(--ctx-background-hover);
+        --p-toggleswitch-checked-background: var(--ctx-background);
+        --p-toggleswitch-checked-hover-background: var(--ctx-background-hover);
     }
-    .bcc-avatar.squared.xxxl {
-        @apply text-5xl;
+    .p-toggleswitch.loading {
+        @apply pointer-events-none;
     }
-
-
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
-        transform: translate(25%, -25%);
+    .p-toggleswitch.toggled:not(.p-toggleswitch-checked) {
+        --p-toggleswitch-background: var(--color-background-danger-bolder-default);
+        --p-toggleswitch-hover-background: var(--color-background-danger-bolder-hover);
     }
 }
 

package/dist-types/components/{wrapped → custom/BccTabs}/BccTabs.vue.d.ts

@@ -1,6 +1,6 @@
 import type { VueComponent } from '@/types';
 import { type TabsProps as PrimeTabsProps } from 'primevue/tabs';
-import { type BadgeProps } from '../custom/BccBadge/BccBadge.vue';
+import { type BadgeProps } from '../BccBadge/BccBadge.vue';
 export interface TabItem {
     title: string;
     icon?: VueComponent;