@basis-ng/styles 0.0.1-alpha.2 → 0.0.1-alpha.200

package/src/components/input-group.css

@@ -0,0 +1,138 @@
+b-input-group {
+  /* Base */
+  @apply flex overflow-hidden items-center;
+  @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 shadow-xs;
+
+  /* Base md by default */
+  @apply px-2.5 py-0 text-sm h-8 rounded-size-md gap-1.5;
+
+  &:has(> button[b-button]:first-child) {
+    @apply pl-1!;
+  }
+
+  &:has(> button[b-button]:last-child) {
+    @apply pr-1!;
+  }
+
+  /* Internal input adjustments when placed inside group */
+  input[b-input] {
+    @apply outline-0! px-0! inset-ring-0! w-full! rounded-none! bg-transparent! hover:bg-transparent! shadow-none;
+  }
+
+  /* Internal button adjustments when placed inside group */
+  button[b-button] {
+    @apply inset-ring-0 shadow-none rounded-size-sm;
+  }
+
+  /* Squared buttons should match the input group height */
+  button[b-button].b-squared {
+    @apply h-full! w-auto! aspect-square;
+  }
+
+  /* Focus state when any inner input is focused (and not readonly) */
+  &:has(input[b-input]:focus-visible:not(:read-only)) {
+    /* Focus outline remains primary for contrast */
+    @apply outline-2 outline-offset-2 outline-primary dark:outline-primary-dark;
+
+    /* Override outline color if invalid while focused */
+    &:has(input[b-input].ng-invalid.ng-touched) {
+      @apply outline-destructive dark:outline-destructive-dark;
+    }
+  }
+
+  /* Disabled inner input visual tweak */
+  input[b-input]:disabled {
+    @apply opacity-60 pointer-events-none;
+  }
+
+  /* Invalid state styles (group reflects error) */
+  &:has(input[b-input].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 (normalized to Tailwind scale, matching input sizes) */
+  &:has(input[b-input].b-size-sm) {
+    /* small */
+    @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1;
+  }
+
+  &:has(input[b-input].b-size-md) {
+    /* medium */
+    @apply px-2.5 py-0 text-sm h-8 rounded-size-md gap-1.5;
+
+    &:has(> button[b-button]:first-child) {
+      @apply pl-1!;
+    }
+
+    &:has(> button[b-button]:last-child) {
+      @apply pr-1!;
+    }
+  }
+
+  &:has(input[b-input].b-size-lg) {
+    /* large */
+    @apply px-3 py-0 text-base h-10 rounded-size-lg gap-2;
+
+    &:has(> button[b-button]:first-child) {
+      @apply pl-1!;
+    }
+
+    &:has(> button[b-button]:last-child) {
+      @apply pr-1!;
+    }
+  }
+
+  /* Prevent icons from shrinking inside the group */
+  > ng-icon {
+    @apply shrink-0;
+  }
+
+  /* Rounded full - extra horizontal padding */
+  &.b-rounded-full {
+    @apply px-4;
+
+    &:has(> button[b-button]:first-child) {
+      @apply pl-1!;
+    }
+
+    &:has(> button[b-button]:last-child) {
+      @apply pr-1!;
+    }
+  }
+
+  &:has(input[b-input].b-size-sm).b-rounded-full {
+    @apply px-3;
+
+    &:has(> button[b-button]:first-child) {
+      @apply pl-1!;
+    }
+
+    &:has(> button[b-button]:last-child) {
+      @apply pr-1!;
+    }
+  }
+
+  &:has(input[b-input].b-size-lg).b-rounded-full {
+    @apply px-5;
+
+    &:has(> button[b-button]:first-child) {
+      @apply pl-1!;
+    }
+
+    &:has(> button[b-button]:last-child) {
+      @apply pr-1!;
+    }
+  }
+}

package/src/components/input.css

@@ -0,0 +1,56 @@
+/* Input styles — Base / Sizes / States */
+input[b-input] {
+  /* Base */
+  @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 shadow-xs;
+
+  /* Base md by default */
+  @apply px-2.5 py-0 text-sm h-8 rounded-size-md;
+
+  /* Disabled */
+  &:disabled {
+    @apply opacity-60 pointer-events-none;
+  }
+
+  &:focus-visible:not(:read-only) {
+    /* Keep primary outline on focus to maintain emphasis */
+    @apply outline-2 outline-offset-4 outline-primary;
+    @apply dark:outline-primary-dark;
+  }
+
+  &::placeholder {
+    @apply opacity-50;
+    @apply 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;
+      @apply dark:outline-destructive-dark;
+    }
+  }
+
+  /* Sizes */
+  &.b-size-sm {
+    @apply px-2 py-0 text-xs h-6 rounded-size-sm;
+  }
+
+  &.b-size-lg {
+    @apply px-3 py-0 text-base h-10 rounded-size-lg;
+  }
+
+  /* Rounded full - extra horizontal padding */
+  &.b-rounded-full {
+    @apply px-4;
+  }
+
+  &.b-size-sm.b-rounded-full {
+    @apply px-3;
+  }
+
+  &.b-size-lg.b-rounded-full {
+    @apply px-5;
+  }
+}

package/{label.component.css → src/components/label.css}

@@ -1,74 +1,70 @@
-b-label {
-  position: relative;
-  display: flex;
-  --horizontal-padding: clamp(
-    1rem,
-    calc(0.75rem + var(--radius, 0.5rem) / 2),
-    1.5rem
-  );
-
-  label {
-    color: var(--text-color);
-  }
-
-  &:not(.is-switch):not(.is-checkbox) {
-    width: 100%;
-
-    label {
-      position: absolute;
-      z-index: 1;
-      top: 50%;
-      left: var(--horizontal-padding);
-      transform: translateY(-50%);
-      pointer-events: none;
-      transition:
-        top 0.2s,
-        font-size 0.2s,
-        transform 0.2s;
-    }
-
-    &.up {
-      label {
-        top: 0.45rem;
-        font-size: 0.7rem;
-        transform: translateY(0);
-      }
-
-      input,
-      select {
-        --vertical-padding: calc(0.9rem - 2px);
-        padding-top: calc(var(--vertical-padding) + 0.5rem);
-        padding-bottom: calc(var(--vertical-padding) - 0.5rem);
-      }
-
-      textarea {
-        padding-top: 1.5rem;
-        box-sizing: border-box;
-      }
-    }
-
-    &.is-textarea {
-      label {
-        top: 0.8rem;
-        transform: none;
-      }
-
-      &.up {
-        label {
-          top: 0.45rem;
-          font-size: 0.7rem;
-        }
-      }
-    }
-  }
-
-  &.is-switch,
-  &.is-checkbox {
-    gap: 0.5rem;
-    align-items: center;
-
-    label {
-      cursor: pointer;
-    }
-  }
-}
+b-label {
+  position: relative;
+  display: flex;
+  --horizontal-padding: clamp(1rem, calc(0.75rem + var(--radius, 0.5rem) / 2), 1.5rem);
+
+  label {
+    color: var(--text-color);
+  }
+
+  &:not(.is-switch):not(.is-checkbox) {
+    width: 100%;
+
+    label {
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: var(--horizontal-padding);
+      transform: translateY(-50%);
+      pointer-events: none;
+      transition:
+        top 0.2s,
+        font-size 0.2s,
+        transform 0.2s;
+    }
+
+    &.up {
+      label {
+        top: 0.45rem;
+        font-size: 0.7rem;
+        transform: translateY(0);
+      }
+
+      input,
+      select {
+        --vertical-padding: calc(0.9rem - 2px);
+        padding-top: calc(var(--vertical-padding) + 0.5rem);
+        padding-bottom: calc(var(--vertical-padding) - 0.5rem);
+      }
+
+      textarea {
+        padding-top: 1.5rem;
+        box-sizing: border-box;
+      }
+    }
+
+    &.is-textarea {
+      label {
+        top: 0.8rem;
+        transform: none;
+      }
+
+      &.up {
+        label {
+          top: 0.45rem;
+          font-size: 0.7rem;
+        }
+      }
+    }
+  }
+
+  &.is-switch,
+  &.is-checkbox {
+    gap: 0.5rem;
+    align-items: center;
+
+    label {
+      cursor: pointer;
+    }
+  }
+}

package/src/components/menu.css

@@ -0,0 +1,154 @@
+b-menu {
+  @apply flex flex-col;
+
+  /* Base */
+  @apply text-base rounded-size-md;
+
+  /* Horizontal Modifier: Only applies to direct children */
+  &.b-orientation-horizontal {
+    @apply flex-row items-center w-max;
+
+    & > b-menu-group {
+      @apply flex-row items-center h-full;
+
+      /* Border adjustments for horizontal layout */
+      &:not(:first-child) {
+        @apply border-t-0 border-l border-secondary;
+        @apply dark:border-l-secondary-dark;
+      }
+      &:not(:last-child) {
+        @apply border-b-0;
+      }
+    }
+
+    /* Spacing adjustments for direct items in horizontal mode */
+    &:not(:has(> b-menu-group)) {
+      @apply py-0 px-1; /* Reduce vertical padding in horizontal mode */
+    }
+  }
+
+  /* --- Vertical Structure (Default) --- */
+  &:not(:has(b-menu-group)) {
+    @apply p-1 gap-1;
+  }
+
+  b-menu-group {
+    @apply p-1 gap-1 flex flex-col;
+
+    &:not(:first-child) {
+      @apply border-t border-secondary;
+      @apply dark:border-secondary-dark;
+    }
+
+    &:not(:last-child) {
+      @apply border-b border-secondary;
+      @apply dark:border-secondary-dark;
+    }
+  }
+
+  /* --- Internal Elements --- */
+  b-menu-label {
+    @apply px-3 py-0 text-sm h-8 gap-1.5 flex items-center whitespace-nowrap;
+  }
+
+  button[b-menu-item],
+  button[b-menu-item-radio],
+  button[b-menu-item-checkbox] {
+    @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5 flex items-center cursor-pointer;
+    @apply hover:bg-secondary/50;
+    @apply dark:hover:bg-secondary-dark/50;
+    @apply whitespace-nowrap;
+
+    &.b-squared {
+      @apply aspect-square p-0 flex items-center justify-center size-8;
+      text-align: center;
+    }
+
+    &.b-destructive {
+      @apply bg-destructive/10 text-destructive;
+      @apply dark:bg-destructive-dark/10 dark:text-destructive-dark;
+      @apply hover:bg-destructive/20;
+      @apply dark:hover:bg-destructive-dark/20;
+    }
+
+    &:focus-visible {
+      @apply outline-2 outline-offset-4 outline-primary;
+      @apply dark:outline-primary-dark;
+    }
+
+    &[aria-selected='true'],
+    &.b-active {
+      @apply bg-secondary text-secondary-foreground;
+      @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
+    }
+
+    &[aria-disabled='true'] {
+      @apply opacity-60 pointer-events-none bg-none cursor-auto;
+    }
+  }
+
+  /* --- Sizes --- */
+  &.b-size-sm {
+    @apply text-sm rounded-size-sm box-border;
+
+    &:not(:has(b-menu-group)),
+    & b-menu-group {
+      @apply p-0.5 gap-0.5;
+    }
+    b-menu-label {
+      @apply px-2 text-xs h-6 gap-1;
+    }
+    button[b-menu-item],
+    button[b-menu-item-radio],
+    button[b-menu-item-checkbox] {
+      @apply px-2 text-xs h-6 rounded-size-xs gap-1;
+      &.b-squared {
+        @apply size-6;
+      }
+    }
+  }
+
+  &.b-size-md {
+    @apply text-base rounded-size-md;
+    &:not(:has(b-menu-group)),
+    & b-menu-group {
+      @apply p-1 gap-1;
+    }
+    b-menu-label {
+      @apply px-3 text-sm h-8 gap-1.5;
+    }
+    button[b-menu-item],
+    button[b-menu-item-radio],
+    button[b-menu-item-checkbox] {
+      @apply px-3 text-sm h-8 rounded-size-sm gap-1.5;
+      &.b-squared {
+        @apply size-8;
+      }
+    }
+  }
+
+  &.b-size-lg {
+    @apply text-lg rounded-size-lg;
+    &:not(:has(b-menu-group)),
+    & b-menu-group {
+      @apply p-1.5 gap-1.5;
+    }
+    b-menu-label {
+      @apply px-4 text-base h-10 gap-2;
+    }
+    button[b-menu-item],
+    button[b-menu-item-radio],
+    button[b-menu-item-checkbox] {
+      @apply px-4 text-base h-10 rounded-size-md gap-2;
+      &.b-squared {
+        @apply size-10;
+      }
+    }
+  }
+}
+
+/* Overlay Styles (Popups) */
+.cdk-overlay-container b-menu {
+  @apply inset-ring-1 inset-ring-ring bg-surface shadow-xs;
+  @apply dark:inset-ring-ring-dark/60 dark:bg-surface-dark;
+}

package/src/components/option.css

@@ -0,0 +1,37 @@
+li[b-option] {
+  @apply flex gap-2 py-1.5 px-3 text-sm box-border cursor-pointer min-w-full items-center rounded-sm;
+  @apply hover:bg-secondary/30;
+  @apply dark:hover:bg-secondary-dark/30;
+
+  /* Default */
+  @apply px-3 py-0 text-sm h-8 min-h-8 rounded-size-sm gap-1.5;
+
+  &.cdk-option-active {
+    @apply bg-secondary/30;
+    @apply dark:bg-secondary-dark/30;
+  }
+
+  &.cdk-option-highlighted {
+    @apply bg-secondary/10;
+    @apply dark:bg-secondary-dark/10;
+  }
+
+  &[aria-selected='true'] {
+    @apply bg-secondary text-secondary-foreground;
+    @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
+  }
+
+  &[aria-disabled='true'] {
+    @apply opacity-60 pointer-events-none bg-none;
+  }
+}
+
+.b-size-sm li[b-option] {
+  @apply px-2 py-0 text-xs min-h-6 rounded-size-xs gap-1;
+}
+.b-size-md li[b-option] {
+  @apply px-3 py-0 text-sm min-h-8 rounded-size-sm gap-1.5;
+}
+.b-size-lg li[b-option] {
+  @apply px-4 py-0 text-base min-h-10 rounded-size-md gap-2;
+}

package/src/components/otp.css

@@ -0,0 +1,64 @@
+b-otp {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+
+  input[b-otp-digit] {
+    @apply w-8 h-8 py-0 text-sm rounded-size-md p-0;
+  }
+}
+
+input[b-otp-digit] {
+  @apply box-border text-center font-sans text-base transition-opacity bg-background text-font inset-ring-1 inset-ring-ring;
+  @apply dark:bg-background-dark dark:text-font-dark dark:inset-ring-ring-dark;
+
+  &:read-only:not(:disabled) {
+    @apply border-0;
+  }
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type='text'],
+  &[type='number'] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+  &:focus-visible:not(:read-only) {
+    @apply outline-2 outline-offset-2 outline-primary;
+    @apply dark:outline-primary-dark;
+  }
+
+  &::placeholder {
+    @apply opacity-50;
+    @apply dark:opacity-70 dark:text-font-dark;
+  }
+
+  &:disabled {
+    @apply opacity-60 pointer-events-none;
+  }
+}
+
+b-otp.b-size-sm input[b-otp-digit] {
+  @apply w-6 h-6 text-xs rounded-size-sm p-0;
+}
+b-otp.b-size-md input[b-otp-digit] {
+  @apply w-8 h-8 py-0 text-sm rounded-size-md p-0;
+}
+b-otp.b-size-lg input[b-otp-digit] {
+  @apply w-10 h-10 text-base rounded-size-lg p-0;
+}
+
+b-otp.ng-invalid.ng-touched input[b-otp-digit] {
+  @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;
+}
+
+b-otp.ng-invalid.ng-touched input[b-otp-digit]:focus-visible {
+  @apply outline-2 outline-offset-2 outline-destructive;
+  @apply dark:outline-destructive-dark;
+}

package/src/components/range.css

@@ -0,0 +1,29 @@
+input[b-range] {
+  @apply appearance-none w-full bg-secondary dark:bg-secondary-dark rounded-full cursor-pointer m-0 outline-none;
+}
+
+input[b-range]::-webkit-slider-thumb {
+  @apply appearance-none rounded-full cursor-pointer transition-colors inset-ring-1 inset-ring-ring border-0;
+  @apply bg-primary dark:bg-primary-dark dark:inset-ring-ring-dark;
+}
+
+input[b-range] {
+  @apply h-2;
+}
+input[b-range]::-webkit-slider-thumb {
+  @apply w-5 h-5;
+}
+
+input[b-range].b-size-sm {
+  @apply h-1;
+}
+input[b-range].b-size-sm::-webkit-slider-thumb {
+  @apply w-3 h-3;
+}
+
+input[b-range].b-size-lg {
+  @apply h-3;
+}
+input[b-range].b-size-lg::-webkit-slider-thumb {
+  @apply w-6 h-6;
+}

package/{row-item.component.css → src/components/row-item.css}

@@ -1,14 +1,14 @@
-b-row-item {
-  &:not(&:last-child) {
-    .row-item-container {
-      border-right: 1px solid var(--border-color, transparent);
-    }
-  }
-  .row-item-container {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding-inline: 10px;
-  }
-}
+b-row-item {
+  &:not(&:last-child) {
+    .row-item-container {
+      border-right: 1px solid var(--border-color, transparent);
+    }
+  }
+  .row-item-container {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding-inline: 10px;
+  }
+}