@basis-ng/styles 0.0.1-alpha.13 → 0.0.1-alpha.131

package/package.json

@@ -1,46 +1,36 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.13",
+  "version": "0.0.1-alpha.131",
   "description": "CSS foundation for @basis-ng/primitives components",
   "main": "src/index.css",
   "exports": {
     ".": "./src/index.css",
-    "./alert": "./src/components/alert.component.css",
-    "./attached-box": "./src/components/attached-box.component.css",
-    "./badge": "./src/components/badge.component.css",
-    "./bottom-sheet": "./src/components/bottom-sheet.component.css",
-    "./button-group": "./src/components/button-group.component.css",
-    "./button": "./src/components/button.component.css",
-    "./checkbox": "./src/components/checkbox.component.css",
-    "./color-picker": "./src/components/color-picker.component.css",
-    "./icon": "./src/components/icon.component.css",
-    "./input-group": "./src/components/input-group.component.css",
-    "./input": "./src/components/input.component.css",
-    "./label": "./src/components/label.component.css",
-    "./menu-group": "./src/components/menu-group.component.css",
-    "./menu-item-checkbox": "./src/components/menu-item-checkbox.component.css",
-    "./menu-item-radio": "./src/components/menu-item-radio.component.css",
-    "./menu-item": "./src/components/menu-item.component.css",
-    "./menu-label": "./src/components/menu-label.component.css",
-    "./menu": "./src/components/menu.component.css",
-    "./option": "./src/components/option.component.css",
-    "./range": "./src/components/range.component.css",
-    "./row-item": "./src/components/row-item.component.css",
-    "./row": "./src/components/row.component.css",
+    "./alert": "./src/components/alert.css",
+    "./badge": "./src/components/badge.css",
+    "./drawer": "./src/components/drawer.css",
+    "./button-group": "./src/components/button-group.css",
+    "./button": "./src/components/button.css",
+    "./checkbox": "./src/components/checkbox.css",
+    "./input-group": "./src/components/input-group.css",
+    "./textarea-group": "./src/components/textarea-group.css",
+    "./input": "./src/components/input.css",
+    "./label": "./src/components/label.css",
+    "./menu": "./src/components/menu.css",
+    "./option": "./src/components/option.css",
+    "./range": "./src/components/range.css",
+    "./row-item": "./src/components/row-item.css",
+    "./row": "./src/components/row.css",
     "./search": "./src/components/search.component.css",
-    "./select": "./src/components/select.component.css",
-    "./select-content": "./src/components/select-content.component.css",
-    "./select-option": "./src/components/select-option.component.css",
-    "./side-sheet": "./src/components/side-sheet.component.css",
-    "./spinner": "./src/components/spinner.component.css",
-    "./switch": "./src/components/switch.component.css",
-    "./tab": "./src/components/tab.component.css",
-    "./table": "./src/components/table.component.css",
-    "./tabs": "./src/components/tabs.component.css",
-    "./textarea": "./src/components/textarea.component.css",
-    "./tooltip": "./src/components/tooltip.component.css",
-    "./tree-node": "./src/components/tree-node.component.css",
-    "./tree": "./src/components/tree.component.css"
+    "./select": "./src/components/select.css",
+    "./select-option": "./src/components/select-option.css",
+    "./sheet": "./src/components/sheet.css",
+    "./spinner": "./src/components/spinner.css",
+    "./switch": "./src/components/switch.css",
+    "./tabs": "./src/components/tabs.css",
+    "./textarea": "./src/components/textarea.css",
+    "./tooltip": "./src/components/tooltip.css",
+    "./tree": "./src/components/tree.css",
+    "./dialog": "./src/components/dialog.css"
   },
   "files": [
     "src/**/*.css"

package/src/components/alert.css

@@ -0,0 +1,58 @@
+/* Alert styles — Base / Types / Sizes / Close */
+
+/* Use the same selector the primitive exposes: `b-alert` */
+
+b-alert {
+  @apply flex items-start gap-4 p-4 rounded-size-md w-full box-border max-w-full font-sans;
+
+  .icon {
+    @apply flex-shrink-0 self-start;
+  }
+
+  .content {
+    @apply flex-1 flex flex-col gap-1;
+
+    .title {
+      @apply font-semibold;
+    }
+
+    .body {
+      @apply text-sm;
+    }
+  }
+
+  /* Default: info */
+  @apply bg-info/20 text-info-foreground dark:bg-info-dark/20 dark:text-info-foreground-dark;
+
+  /* Types (match primitive's `type` input): use `b-type-` prefix to avoid classname collisions */
+  &.b-type-success {
+    @apply bg-success/20 inset-ring-1 text-success-foreground dark:bg-success-dark/20 dark:text-success-foreground-dark inset-ring-success/90 dark:inset-ring-success-dark/30;
+  }
+
+  &.b-type-error {
+    @apply bg-destructive/20 inset-ring-1 text-destructive dark:bg-destructive-dark/20 dark:text-destructive-dark inset-ring-destructive/30 dark:inset-ring-destructive-dark/30;
+  }
+
+  &.b-type-warning {
+    @apply bg-warning/20 inset-ring-1 text-warning-foreground dark:bg-warning-dark/20 dark:text-warning-foreground-dark inset-ring-warning/90 dark:inset-ring-warning-dark/30;
+  }
+
+  &.b-type-info {
+    @apply bg-info/20 inset-ring-1 text-info-foreground dark:bg-info-dark/20 dark:text-info-foreground-dark inset-ring-info/90 dark:inset-ring-info-dark/30;
+  }
+
+  /* Sizes */
+  &.b-size-sm {
+    @apply p-2 text-sm;
+  }
+  &.b-size-md {
+    @apply p-4 text-base;
+  }
+  &.b-size-lg {
+    @apply p-6 text-lg;
+  }
+
+  .close-btn {
+    @apply ml-auto bg-transparent border-0 cursor-pointer p-1 rounded;
+  }
+}

package/src/components/badge.css

@@ -0,0 +1,37 @@
+span[b-badge] {
+  /* Base */
+  @apply inline-flex items-center gap-2 px-2 py-1 font-medium text-sm rounded-size-md;
+  @apply bg-primary text-primary-foreground dark:bg-primary-dark dark:text-primary-foreground-dark;
+
+  /* Variants */
+  &.b-variant-primary {
+    @apply bg-primary text-primary-foreground dark:bg-primary-dark dark:text-primary-foreground-dark;
+  }
+
+  &.b-variant-secondary {
+    @apply bg-secondary text-secondary-foreground dark:bg-secondary-dark dark:text-secondary-foreground-dark;
+  }
+
+  &.b-variant-ghost {
+    @apply bg-transparent text-secondary-foreground dark:text-secondary-foreground-dark;
+  }
+
+  &.b-variant-outlined {
+    @apply bg-transparent inset-ring-1 inset-ring-ring text-secondary-foreground dark:inset-ring-ring-dark dark:text-secondary-foreground-dark;
+  }
+
+  &.b-variant-destructive {
+    @apply bg-destructive text-destructive-foreground dark:bg-destructive-dark dark:text-destructive-foreground-dark;
+  }
+
+  /* Sizes */
+  &.b-size-sm {
+    @apply px-1.5 py-0.5 text-xs rounded-size-sm;
+  }
+  &.b-size-md {
+    @apply px-2 py-1 text-sm rounded-size-md;
+  }
+  &.b-size-lg {
+    @apply px-2.5 py-1 text-base rounded-size-lg;
+  }
+}

package/src/components/button-group.css

@@ -0,0 +1,16 @@
+b-button-group {
+  @apply flex;
+
+  &:not(.spaced) {
+    button:not(:last-child) {
+      @apply rounded-tr-none rounded-br-none -mr-[1px];
+    }
+    button:not(:first-child) {
+      @apply rounded-tl-none rounded-bl-none;
+    }
+  }
+
+  &.spaced {
+    @apply gap-2;
+  }
+}

package/src/components/button.css

@@ -0,0 +1,73 @@
+/* Button styles — grouped sections: Base / Variants / Sizes / States / Squared */
+button[b-button] {
+  /* Base */
+  @apply transition-colors duration-150 flex items-center justify-center gap-x-1.5 disabled:opacity-50 disabled:cursor-not-allowed;
+
+  /* Default spacing/typography applied when no explicit size is present */
+  @apply px-3 py-0 text-sm h-8 rounded-size-md;
+
+  /* Default visual (primary) applied when no explicit variant is present */
+  @apply bg-primary text-primary-foreground hover:bg-primary/80;
+  @apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:hover:bg-primary-dark/80;
+
+  /* Variants */
+  &.b-variant-primary {
+    @apply bg-primary text-primary-foreground hover:bg-primary/80;
+    @apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:hover:bg-primary-dark/80;
+  }
+  &.b-variant-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+    @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark/80;
+  }
+  &.b-variant-ghost {
+    /* Ghost is transparent with a subtle hover; text uses secondary foreground */
+    @apply bg-transparent text-secondary-foreground hover:bg-secondary;
+    @apply dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark;
+  }
+  &.b-variant-outlined {
+    /* Outlined keeps a transparent background and an inset ring */
+    @apply bg-secondary/10 text-secondary-foreground inset-ring inset-ring-ring hover:bg-primary/5 shadow-xs;
+    @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-primary-dark/5 shadow-xs;
+  }
+  &.b-variant-destructive {
+    @apply bg-destructive text-destructive-foreground inset-ring-1 inset-ring-destructive hover:bg-destructive/90 hover:inset-ring-destructive/80;
+    @apply dark:bg-destructive-dark dark:text-destructive-foreground-dark dark:inset-ring-destructive-dark dark:hover:bg-destructive-dark/90 dark:hover:inset-ring-destructive-dark/80;
+  }
+
+  /* Sizes */
+  &.b-size-sm {
+    @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1;
+  }
+  &.b-size-md {
+    @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5;
+  }
+  &.b-size-lg {
+    @apply px-4 py-0 text-base h-10 rounded-size-lg gap-2;
+  }
+
+  /* States */
+  &.b-active,
+  &:focus-visible {
+    @apply outline-2 outline-offset-4 outline-primary;
+    @apply dark:outline-primary-dark;
+  }
+  &.b-variant-destructive.b-active,
+  &.b-variant-destructive:focus-visible {
+    @apply outline-2 outline-offset-4 outline-destructive;
+    @apply dark:outline-destructive-dark;
+  }
+
+  /* Squared */
+  &.b-squared {
+    @apply aspect-square p-0 flex items-center justify-center;
+  }
+  &.b-squared.b-size-sm {
+    @apply size-6;
+  }
+  &.b-squared.b-size-md {
+    @apply size-9;
+  }
+  &.b-squared.b-size-lg {
+    @apply size-12;
+  }
+}

package/src/components/card.css

@@ -0,0 +1,24 @@
+b-card {
+  @apply flex flex-col gap-4 p-6 bg-background inset-ring-1 inset-ring-ring rounded-size-lg;
+  @apply dark:bg-background-dark dark:inset-ring-ring-dark;
+
+  b-card-header {
+    @apply flex flex-col gap-1;
+
+    b-card-title {
+      @apply text-base font-semibold opacity-100;
+    }
+
+    b-card-description {
+      @apply text-sm opacity-70;
+    }
+  }
+
+  b-card-content {
+    @apply flex flex-col gap-2;
+  }
+
+  b-card-footer {
+    @apply flex justify-end gap-2;
+  }
+}

package/src/components/checkbox.css

@@ -0,0 +1,66 @@
+button[b-checkbox] {
+  /* Base */
+  @apply inline-flex items-center justify-center align-middle select-none text-secondary-foreground bg-background inset-ring-1 inset-ring-ring shadow-xs;
+  @apply dark:bg-background-dark dark:text-secondary-foreground-dark dark:inset-ring-ring-dark;
+  @apply size-5 rounded-size-sm;
+
+  &:not([data-disabled]) {
+    @apply cursor-pointer hover:bg-secondary/20;
+    @apply dark:hover:bg-secondary-dark/30;
+  }
+
+  &[data-disabled] {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  &[data-state='checked'] {
+    @apply bg-primary text-primary-foreground inset-ring-primary;
+    @apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:inset-ring-primary-dark;
+  }
+
+  &[data-state='checked']:not([data-disabled]) {
+    @apply hover:bg-primary/80;
+    @apply dark:hover:bg-primary-dark/80;
+  }
+
+  &:focus-visible {
+    @apply outline-2 outline-offset-4 outline-primary;
+    @apply dark:outline-primary-dark;
+  }
+
+  /* Sizes */
+  &.b-size-sm {
+    @apply size-4 rounded-size-xs;
+  }
+  &.b-size-lg {
+    @apply size-6 rounded-size-md;
+  }
+
+  .b-checkbox-indicator {
+    @apply pointer-events-none flex items-center justify-center text-current;
+  }
+
+  &.b-size-sm .b-checkbox-indicator svg {
+    @apply h-2.5 w-2.5;
+  }
+
+  &.b-size-md .b-checkbox-indicator svg {
+    @apply h-3 w-3;
+  }
+
+  &.b-size-lg .b-checkbox-indicator svg {
+    @apply h-3.5 w-3.5;
+  }
+
+  &[data-state='unchecked'] .b-checkbox-indicator {
+    @apply opacity-0 scale-75;
+  }
+
+  &[data-state='checked'] .b-checkbox-indicator {
+    @apply opacity-100 scale-100;
+  }
+
+  svg {
+    @apply block;
+  }
+}

package/src/components/command-options.css

@@ -0,0 +1,17 @@
+ul[b-command-options] {
+  list-style: none;
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+  overflow-y: auto;
+  padding: 0;
+  scrollbar-width: thin;
+
+  .no-options-message {
+    padding: 0.5rem 0.75rem;
+  }
+}

package/src/components/command.css

@@ -0,0 +1,20 @@
+b-command {
+  padding: 0.25rem;
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  background: var(--background, #ffffff);
+  box-shadow: 0 0 0.25rem 0.125rem rgba(1, 1, 1, 0.01);
+  border-radius: clamp(0rem, var(--radius, 0.5rem), 0.5rem);
+  border: 1px solid color-mix(in srgb, var(--foreground, #798194) 10%, var(--background, #ffffff));
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+
+  input {
+    &:focus-visible {
+      outline: none !important;
+    }
+  }
+}

package/src/components/dialog.css

@@ -0,0 +1,41 @@
+b-dialog-content {
+  animation: b-dialog-enter 150ms ease-in-out;
+
+  &.leaving {
+    transform: scale(0.9);
+    opacity: 0;
+    transition:
+      transform 150ms ease-in-out,
+      opacity 150ms ease-in-out;
+  }
+}
+
+.b-dialog-backdrop {
+  background-color: rgba(0, 0, 0, 0.08);
+  animation: b-dialog-backdrop-enter 150ms ease-in-out;
+}
+
+:has(b-dialog-content.leaving) .b-dialog-backdrop {
+  opacity: 0;
+  transition: opacity 150ms ease-in-out;
+}
+
+@keyframes b-dialog-enter {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes b-dialog-backdrop-enter {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/drawer.css

@@ -0,0 +1,21 @@
+b-drawer {
+  @apply fixed bottom-0 left-0 right-0 bg-background dark:bg-background-dark rounded-t-lg border border-secondary dark:border-secondary-dark border-b-0 flex flex-col z-[1001] will-change-transform shadow-2xl touch-none select-none pt-10 box-border overflow-hidden h-1/2;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+  transform: translateY(100%);
+
+  &.dragging {
+    transition: none;
+  }
+
+  .drag-section {
+    @apply w-full h-10 flex items-center justify-center cursor-grab touch-none absolute top-0;
+
+    .drag-indicator {
+      @apply w-1/5 h-1 bg-secondary dark:bg-secondary-dark rounded;
+    }
+  }
+}
+
+html:has(b-drawer.open) {
+  overflow: hidden;
+}

package/src/components/input-group.css

@@ -0,0 +1,92 @@
+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;
+
+  /* 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;
+  }
+
+  /* Focus state when any inner input is focused (and not readonly) */
+  &:has(input[b-input]: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(.ng-invalid.ng-touched),
+    &:has(.ng-invalid.ng-dirty) {
+      @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),
+  &:has(input[b-input].ng-invalid.ng-dirty) {
+    @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 flex-shrink-0;
+  }
+}

package/src/components/input.css

@@ -0,0 +1,49 @@
+/* Input styles — Base / Sizes / States */
+input[b-input] {
+  /* Base */
+  @apply bg-transparent 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 px-2.5 py-0 text-sm h-8 rounded-size-md;
+
+  /* Disabled */
+  @apply disabled:opacity-50 disabled:cursor-not-allowed;
+
+  &:focus-visible:not(:read-only) {
+    @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,
+  &.ng-invalid.ng-dirty {
+    @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;
+    }
+    &::placeholder {
+      @apply text-destructive;
+      @apply dark:text-destructive-foreground;
+    }
+  }
+
+  &:disabled {
+    @apply opacity-60 pointer-events-none;
+  }
+
+  /* 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;
+  }
+}