@basis-ng/styles 0.0.1-alpha.19 → 0.0.1-alpha.191

package/src/components/select.css

@@ -0,0 +1,230 @@
+b-select {
+  @apply flex gap-1 w-full;
+
+  button[b-select-trigger] {
+    /* Base */
+    @apply w-full transition-colors duration-150 flex items-center justify-between gap-x-1.5 disabled:opacity-60 disabled:pointer-events-none;
+
+    /* Default spacing/typography applied when no explicit size is present */
+    @apply px-3 py-0 text-sm h-8 rounded-size-md gap-2;
+
+    /* Default visual */
+    @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring hover:bg-secondary/10 shadow-xs;
+    @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-secondary-dark/10 shadow-xs;
+
+    svg {
+      @apply -mx-1;
+      @apply size-5;
+    }
+
+    /* Ensure the selected value doesn't wrap and shows ellipsis when too long */
+    b-select-value {
+      /* allow shrinking in flex containers and truncate overflow */
+      @apply flex-1 min-w-0 truncate;
+      /* left align the value text */
+      @apply text-left;
+
+      /* Fallback explicit properties for environments without the utility */
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Match button focus outline for accessibility/consistency */
+    &:focus-visible {
+      @apply outline-2 outline-offset-4 outline-primary;
+      @apply dark:outline-primary-dark;
+      @apply transition-none;
+    }
+
+    &.b-size-sm {
+      @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1.5;
+
+      svg {
+        @apply size-4;
+      }
+    }
+
+    &.b-size-md {
+      @apply px-3 py-0 text-sm h-8 rounded-size-md gap-2;
+      svg {
+        @apply size-5;
+      }
+    }
+
+    &.b-size-lg {
+      @apply px-4 py-0 text-base h-10 rounded-size-lg gap-2.5;
+
+      svg {
+        @apply size-6;
+      }
+    }
+  }
+
+  &.ng-invalid.ng-touched {
+    button[b-select-trigger] {
+      @apply text-destructive inset-ring-destructive/20 bg-destructive/10 hover:bg-destructive/20;
+      @apply dark:text-destructive-dark dark:inset-ring-destructive-dark/20 dark:bg-destructive-dark/10 dark:hover:bg-destructive-dark/20;
+
+      b-select-value {
+        @apply text-destructive;
+        @apply dark:text-destructive-dark;
+      }
+
+      &:focus-visible {
+        @apply outline-destructive;
+        @apply dark:outline-destructive-dark;
+      }
+    }
+  }
+}
+
+ul[b-select-content] {
+  @apply list-none box-border m-0 relative flex flex-col w-full overflow-y-auto;
+  @apply bg-background text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
+  @apply dark:bg-background-dark dark:text-secondary-foreground-dark dark:inset-ring-ring-dark shadow-xs;
+
+  @apply outline-none;
+  max-height: 320px;
+
+  @apply text-base rounded-size-md p-1 gap-1;
+
+  .no-options-message {
+    @apply py-1 px-2 text-sm;
+  }
+
+  input[b-input] {
+    @apply outline-none sticky top-0 z-10 bg-background min-h-8;
+    @apply dark:bg-background-dark;
+  }
+
+  &.b-size-sm {
+    @apply text-sm rounded-size-sm p-0.5 gap-0.5;
+  }
+  &.b-size-md {
+    @apply text-base rounded-size-md p-1 gap-1;
+  }
+  &.b-size-lg {
+    @apply text-lg rounded-size-lg p-1.5 gap-1.5;
+  }
+
+  &.b-select-content-entering-top {
+    animation: overlay-entering-top 0.1s ease forwards;
+  }
+
+  &.b-select-content-leaving-top {
+    animation: overlay-leaving-top 0.1s ease forwards;
+  }
+
+  &.b-select-content-entering-bottom {
+    animation: overlay-entering-down 0.1s ease forwards;
+  }
+
+  &.b-select-content-leaving-bottom {
+    animation: overlay-leaving-down 0.1s ease forwards;
+  }
+
+  &.b-select-content-entering-left {
+    animation: overlay-entering-left 0.1s ease forwards;
+  }
+
+  &.b-select-content-leaving-left {
+    animation: overlay-leaving-left 0.1s ease forwards;
+  }
+
+  &.b-select-content-entering-right {
+    animation: overlay-entering-right 0.1s ease forwards;
+  }
+
+  &.b-select-content-leaving-right {
+    animation: overlay-leaving-right 0.1s ease forwards;
+  }
+}
+
+@keyframes overlay-entering-top {
+  from {
+    opacity: 0;
+    transform: translateY(5px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes overlay-leaving-top {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(5px) scale(0.95);
+  }
+}
+
+@keyframes overlay-entering-down {
+  from {
+    opacity: 0;
+    transform: translateY(-5px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes overlay-leaving-down {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-5px) scale(0.95);
+  }
+}
+
+@keyframes overlay-entering-left {
+  from {
+    opacity: 0;
+    transform: translateX(5px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes overlay-leaving-left {
+  from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(5px) scale(0.95);
+  }
+}
+
+@keyframes overlay-entering-right {
+  from {
+    opacity: 0;
+    transform: translateX(-5px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes overlay-leaving-right {
+  from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-5px) scale(0.95);
+  }
+}

package/src/components/sheet.css

@@ -0,0 +1,34 @@
+b-sheet {
+  @apply fixed top-0 h-screen z-50 shadow-md opacity-0 w-[300px] p-5 pt-10 bg-background dark:bg-background-dark box-border;
+  transition:
+    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
+    opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+
+  &.right {
+    @apply right-0 border-l border-secondary dark:border-secondary-dark;
+    transform: translateX(100%);
+
+    &.open {
+      @apply opacity-100;
+      transform: translateX(0);
+    }
+  }
+
+  &.left {
+    @apply left-0 border-r border-secondary dark:border-secondary-dark;
+    transform: translateX(-100%);
+
+    &.open {
+      @apply opacity-100;
+      transform: translateX(0);
+    }
+  }
+
+  .close-button {
+    @apply absolute top-0 right-0 w-10 h-10 cursor-pointer flex items-center justify-center;
+  }
+}
+
+html:has(b-sheet.open) {
+  overflow: hidden;
+}

package/src/components/spinner.css

@@ -0,0 +1,3 @@
+b-spinner {
+  @apply inline-flex items-center justify-center;
+}

package/src/components/switch.css

@@ -0,0 +1,48 @@
+input[b-switch] {
+  @apply flex items-center cursor-pointer rounded-full border-0 transition-colors duration-200 appearance-none bg-secondary dark:bg-secondary-dark;
+
+  &:focus-visible {
+    @apply outline-2 outline-primary outline-offset-2 dark:outline-primary-dark;
+  }
+
+  &::after {
+    @apply flex rounded-full shadow-md transition-transform duration-200 justify-center items-center bg-primary-foreground will-change-transform content-[''];
+  }
+
+  &.b-size-sm {
+    @apply h-5 w-8;
+    &::after {
+      @apply h-3 w-3 m-1;
+    }
+  }
+  &.b-size-md {
+    @apply h-6 w-10;
+    &::after {
+      @apply h-4 w-4 m-1;
+    }
+  }
+  &.b-size-lg {
+    @apply h-8 w-14;
+    &::after {
+      @apply h-6 w-6 m-1;
+    }
+  }
+
+  &:checked {
+    &.b-size-sm {
+      &::after {
+        @apply transform translate-x-[0.7rem];
+      }
+    }
+    &.b-size-md {
+      &::after {
+        @apply transform translate-x-[1rem];
+      }
+    }
+    &.b-size-lg {
+      &::after {
+        @apply transform translate-x-[1.5rem];
+      }
+    }
+  }
+}

package/src/components/tabs.css

@@ -0,0 +1,84 @@
+b-tabs {
+  /* Base container */
+  @apply inline-flex items-center transition-all duration-300;
+
+  /* Default Size: md */
+  @apply gap-1.5;
+
+  /* Individual tab styling */
+  b-tab {
+    /* Base Tab Settings */
+    @apply flex items-center justify-center gap-2 cursor-pointer select-none outline-none font-medium border transition-colors duration-200 ease-out;
+
+    /* Default size md */
+    @apply px-3.5 py-1 text-[14px] h-8 rounded-size-sm;
+
+    /* Default (Unselected) State */
+    @apply bg-transparent text-neutral-500 border-ring/80;
+    @apply dark:text-neutral-400 dark:border-white/10;
+
+    /* Hover state (not selected) */
+    &:hover:not([aria-selected='true']) {
+      @apply bg-secondary/50 text-neutral-700 border-ring/80;
+      @apply dark:bg-white/[0.03] dark:text-neutral-200 dark:border-white/10;
+    }
+
+    /* Selected state */
+    &[aria-selected='true'] {
+      @apply bg-secondary text-font border-ring shadow-[0_1px_2px_rgba(0,0,0,0.05)];
+      @apply dark:bg-white/10 dark:text-font-dark dark:border-white/10;
+    }
+
+    /* Focus state */
+    &.cdk-keyboard-focused {
+      @apply ring-2 ring-primary ring-offset-1;
+      @apply dark:ring-primary-dark dark:ring-offset-background-dark;
+    }
+
+    /* Disabled state */
+    &[aria-disabled='true'] {
+      @apply opacity-60 pointer-events-none;
+    }
+  }
+
+  /* Size variants */
+  &.b-size-sm {
+    @apply gap-1;
+    b-tab {
+      @apply px-2.5 py-0.5 text-xs h-7 gap-1.5 rounded-size-sm;
+    }
+  }
+
+  &.b-size-md {
+    @apply gap-1.5;
+    b-tab {
+      @apply px-3.5 py-1 text-[14px] h-8 gap-2 rounded-size-sm;
+    }
+  }
+
+  &.b-size-lg {
+    @apply gap-2;
+    b-tab {
+      @apply px-4 py-1.5 text-[15px] h-10 gap-2.5 rounded-size-md;
+    }
+  }
+
+  /* Rounded full variant */
+  &.b-rounded-full {
+    b-tab {
+      @apply rounded-full;
+    }
+
+    &.b-size-sm b-tab {
+      @apply px-3.5;
+    }
+
+    &.b-size-md b-tab {
+      @apply px-4;
+    }
+
+    &.b-size-lg b-tab {
+      @apply px-6;
+    }
+  }
+}

package/src/components/textarea-group.css

@@ -0,0 +1,63 @@
+b-textarea-group {
+  /* Base: vertical stack */
+  @apply flex flex-col overflow-hidden items-start;
+  @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
+  @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark;
+
+  /* Base md by default */
+  @apply p-2.5 text-sm gap-2 rounded-size-md;
+
+  /* Internal textarea adjustments when placed inside group */
+  textarea[b-textarea] {
+    @apply outline-0! p-0! inset-ring-0! w-full! rounded-none! bg-transparent! hover:bg-transparent! shadow-none resize-none no-scrollbar;
+  }
+
+  button[b-button] {
+    @apply rounded-size-sm;
+  }
+
+  /* Focus state when any inner textarea is focused (and not readonly) */
+  &:has(textarea[b-textarea]:focus-visible:not(:read-only)) {
+    @apply outline-2 outline-offset-2 outline-primary dark:outline-primary-dark;
+
+    /* Override outline color if invalid while focused */
+    &:has(textarea[b-textarea].ng-invalid.ng-touched) {
+      @apply outline-destructive dark:outline-destructive-dark;
+    }
+  }
+
+  /* Disabled inner textarea visual tweak */
+  textarea[b-textarea]:disabled {
+    @apply opacity-60 pointer-events-none;
+  }
+
+  /* Invalid state styles (group reflects error) */
+  &:has(textarea[b-textarea].ng-invalid.ng-touched) {
+    @apply text-destructive placeholder:text-destructive bg-destructive/20 inset-ring-1 inset-ring-destructive/20;
+    @apply dark:text-destructive-dark dark:placeholder:text-destructive-dark dark:bg-destructive-dark/20 dark:inset-ring-destructive-dark/20;
+
+    button[b-button] {
+      @apply text-destructive placeholder:text-destructive bg-destructive/20 inset-ring-1 inset-ring-destructive/20;
+      @apply dark:text-destructive-dark dark:placeholder:text-destructive-dark dark:bg-destructive-dark/20 dark:inset-ring-destructive-dark/20;
+    }
+
+    /* Icon strokes inside when error */
+    i svg {
+      stroke: var(--color-destructive-foreground, currentColor);
+    }
+  }
+
+  /* Size variants (matching textarea sizes) */
+  &:has(textarea[b-textarea].b-size-sm) {
+    @apply p-1.5 text-xs gap-0.5;
+  }
+
+  &:has(textarea[b-textarea].b-size-lg) {
+    @apply p-3 text-base gap-1.5;
+  }
+
+  /* Prevent icons from shrinking inside the group */
+  > ng-icon {
+    @apply shrink-0;
+  }
+}

package/src/components/textarea.css

@@ -0,0 +1,35 @@
+textarea[b-textarea] {
+  @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring hover:bg-secondary/10 shadow-xs;
+  @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-secondary-dark/10 shadow-xs;
+
+  /* Base md by default */
+  @apply px-2.5 py-1.5 text-sm rounded-size-md;
+
+  &:focus-visible:not(:read-only) {
+    @apply outline-2 outline-offset-4 outline-primary dark:outline-primary-dark;
+  }
+
+  &::placeholder {
+    @apply opacity-50 dark:opacity-70 dark:text-font-dark;
+  }
+
+  &.ng-invalid.ng-touched {
+    @apply text-destructive placeholder:text-destructive bg-destructive/20 inset-ring-1 inset-ring-destructive/20;
+    @apply dark:text-destructive-dark dark:placeholder:text-destructive-dark dark:bg-destructive-dark/20 dark:inset-ring-destructive-dark/20;
+    &:focus-visible {
+      @apply outline-2 outline-offset-4 outline-destructive dark:outline-destructive-dark;
+    }
+  }
+
+  &:disabled {
+    @apply opacity-60 pointer-events-none;
+  }
+
+  &.b-size-sm {
+    @apply px-1.5 py-1 text-xs rounded-size-sm;
+  }
+
+  &.b-size-lg {
+    @apply px-3 py-2 text-base rounded-size-lg;
+  }
+}

package/src/components/tooltip.css

@@ -0,0 +1,37 @@
+b-tooltip-content {
+  @apply whitespace-nowrap rounded-lg shadow flex items-center justify-center gap-x-1.5 bg-background  text-base font-sans;
+  @apply dark:bg-background-dark;
+
+  /* Variants */
+  /* Default (primary) */
+  @apply bg-primary text-primary-foreground;
+  @apply dark:bg-primary-dark dark:text-primary-foreground-dark;
+
+  &.b-variant-secondary {
+    @apply bg-secondary text-secondary-foreground;
+    @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
+  }
+  &.b-variant-ghost {
+    @apply bg-transparent text-secondary-foreground shadow-none;
+    @apply dark:text-secondary-foreground-dark shadow-none;
+  }
+  &.b-variant-outlined {
+    @apply bg-secondary/10 text-secondary-foreground inset-ring inset-ring-ring shadow-xs;
+    @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark shadow-xs;
+  }
+  &.b-variant-destructive {
+    @apply bg-destructive text-destructive-foreground inset-ring-1 inset-ring-destructive;
+    @apply dark:bg-destructive-dark dark:text-destructive-foreground-dark dark:inset-ring-destructive-dark;
+  }
+
+  /* Sizes */
+  /* Default (md) */
+  @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5;
+
+  &.b-size-sm {
+    @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1;
+  }
+  &.b-size-lg {
+    @apply px-4 py-0 text-base h-10 rounded-size-lg gap-2;
+  }
+}

package/src/components/tree.css

@@ -0,0 +1,64 @@
+b-tree {
+  @apply flex flex-col w-full min-h-4 gap-0.5;
+}
+
+b-tree-node {
+  @apply flex flex-col box-border;
+
+  &.b-active section {
+    @apply bg-secondary text-secondary-foreground;
+    @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
+  }
+
+  section {
+    @apply px-3 rounded-size-md flex justify-between items-center h-8 box-border gap-1.5 text-sm select-none;
+
+    ng-icon[cdkdraghandle] {
+      @apply cursor-move;
+    }
+
+    &:hover {
+      @apply bg-secondary/50;
+      @apply dark:bg-secondary-dark/50;
+    }
+
+    .projected-content {
+      @apply flex items-center flex-1 gap-3 py-2 cursor-pointer;
+    }
+  }
+
+  b-tree {
+    @apply pl-4 box-border;
+  }
+
+  &.cdk-drag-preview {
+    @apply h-full w-full overflow-hidden shadow-none;
+
+    & > section {
+      @apply px-3 rounded-size-md flex justify-between items-center h-8 box-border gap-1.5 text-sm select-none bg-background;
+      @apply dark:bg-background-dark;
+
+      .projected-content {
+        @apply flex items-center flex-1 gap-3 py-2 cursor-pointer;
+      }
+    }
+  }
+
+  &.cdk-drag-placeholder {
+    @apply opacity-0;
+  }
+}
+
+b-tree.cdk-drop-list-dragging {
+  @apply pointer-events-none;
+}
+
+.b-size-sm b-tree b-tree-node section {
+  @apply px-2 rounded-size-sm h-6 gap-1.5 text-xs;
+}
+.b-size-md b-tree b-tree-node section {
+  @apply px-3 rounded-size-md h-8 gap-1.5 text-sm;
+}
+.b-size-lg b-tree b-tree-node section {
+  @apply px-4 rounded-size-lg h-10 gap-2 text-base;
+}