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

package/package.json

@@ -1,46 +1,38 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.20",
+  "version": "0.0.1-alpha.200",
   "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",
+    "./backdrop": "./src/components/backdrop.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",
+    "./skeleton": "./src/components/skeleton.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",
+    "./calendar": "./src/components/calendar.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/backdrop.css

@@ -0,0 +1,17 @@
+b-backdrop {
+  @apply fixed inset-0 pointer-events-none z-50;
+
+  &.b-open {
+    @apply pointer-events-auto;
+  }
+
+  .b-backdrop-layer {
+    @apply absolute inset-0 bg-black;
+  }
+
+  &.b-animated {
+    .b-backdrop-layer {
+      transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    }
+  }
+}

package/src/components/badge.css

@@ -0,0 +1,43 @@
+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;
+  @apply dark:bg-primary-dark dark:text-primary-foreground-dark;
+
+  /* Variants */
+  &.b-variant-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-dark;
+    @apply dark:text-secondary;
+  }
+
+  &.b-variant-outlined {
+    @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;
+  }
+
+  &.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 */
+  &.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,88 @@
+/* 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-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;
+
+  /* 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/50;
+    @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark/50;
+  }
+  &.b-variant-ghost {
+    @apply bg-transparent text-secondary-dark hover:bg-secondary;
+    @apply dark:text-secondary dark:hover:bg-secondary-dark;
+  }
+  &.b-variant-outlined {
+    @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;
+  }
+  &.b-variant-destructive {
+    @apply bg-destructive/10 text-destructive hover:bg-destructive/20;
+    @apply dark:bg-destructive-dark/10 dark:text-destructive-dark dark:hover:bg-destructive-dark/20;
+  }
+
+  /* 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 {
+    @apply outline-2 outline-offset-4 outline-primary;
+    @apply dark:outline-primary-dark;
+  }
+
+  /* Focus-visible should show the outline instantly (no transition), matching input behavior */
+  &:focus-visible {
+    @apply outline-2 outline-offset-4 outline-primary;
+    @apply dark:outline-primary-dark;
+    @apply transition-none;
+  }
+  &.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-8;
+  }
+  &.b-squared.b-size-lg {
+    @apply size-10;
+  }
+
+  /* Rounded full - extra horizontal padding */
+  &.b-rounded-full:not(.b-squared) {
+    @apply px-4;
+  }
+  &.b-size-sm.b-rounded-full:not(.b-squared) {
+    @apply px-3;
+  }
+  &.b-size-lg.b-rounded-full:not(.b-squared) {
+    @apply px-5;
+  }
+}

package/src/components/calendar.css

@@ -0,0 +1,56 @@
+/* Calendar component styles - simple, utility-first classes matching project conventions */
+b-calendar {
+  @apply w-full min-w-60 flex flex-col gap-1;
+
+  header.b-calendar-header {
+    @apply flex gap-0.5 w-full justify-between;
+
+    .b-calendar-header {
+      @apply flex items-center justify-between mb-2;
+    }
+
+    .b-calendar-title {
+      @apply font-medium text-sm;
+      @apply px-3 py-1 rounded-size-sm text-sm font-medium cursor-pointer bg-transparent hover:bg-secondary/10 dark:hover:bg-secondary-dark/10;
+    }
+
+    .b-calendar-nav {
+      @apply inline-flex items-center justify-center w-8 h-8 rounded-size-sm cursor-pointer bg-transparent hover:bg-secondary/10 dark:hover:bg-secondary-dark/10;
+    }
+
+    .b-calendar-title:focus {
+      @apply outline-none ring-2 ring-primary/10;
+    }
+  }
+
+  table.b-calendar-table {
+    @apply w-full table table-fixed border-collapse;
+
+    .b-calendar-weekday {
+      @apply text-xs text-center h-6;
+    }
+
+    .b-calendar-cell {
+      @apply text-center rounded-size-sm w-full h-8 place-content-center;
+
+      &.b-active {
+        @apply bg-primary text-primary-foreground;
+        @apply dark:bg-primary-dark dark:text-primary-foreground-dark;
+
+        &[data-outside] {
+          @apply text-primary-foreground;
+          @apply dark:text-primary-foreground-dark;
+        }
+      }
+
+      &[data-outside] {
+        @apply opacity-50;
+      }
+
+      &:not(.b-active):hover,
+      &:not(.b-active):focus {
+        @apply bg-secondary/10 dark:bg-secondary-dark/10 cursor-pointer;
+      }
+    }
+  }
+}

package/src/components/card.css

@@ -0,0 +1,24 @@
+b-card {
+  @apply flex flex-col gap-4 p-6 bg-surface inset-ring-1 inset-ring-ring rounded-size-lg;
+  @apply dark:bg-surface-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-60 pointer-events-none;
+  }
+
+  &[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,112 @@
+b-drawer {
+  @apply fixed z-999 flex box-border overflow-hidden rounded-2xl border border-ring bg-surface text-font shadow-lg will-change-transform opacity-0 pointer-events-none dark:border-ring-dark dark:bg-surface-dark dark:text-font-dark;
+  transition:
+    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
+    opacity 0.2s ease;
+
+  &.open,
+  &.dragging {
+    @apply opacity-100 pointer-events-auto;
+  }
+
+  .drag-section {
+    @apply absolute z-10 flex items-center justify-center touch-none bg-surface dark:bg-surface-dark;
+
+    .drag-indicator {
+      @apply rounded-full bg-ring dark:bg-ring-dark;
+    }
+  }
+
+  .drawer-content {
+    @apply flex-1 overflow-auto min-h-0;
+  }
+
+  &.bottom {
+    @apply left-2 right-2 bottom-2 mx-auto min-h-0;
+    max-height: var(--b-drawer-max-height, calc(100dvh - 1rem));
+    height: var(--b-drawer-height, 50%);
+
+    .drag-section {
+      @apply top-0 left-0 right-0 h-10 cursor-ns-resize;
+    }
+
+    .drag-indicator {
+      @apply h-1 w-1/5;
+    }
+
+    &.draggable {
+      .drawer-content {
+        @apply pt-10;
+      }
+    }
+  }
+
+  &.top {
+    @apply left-2 right-2 top-2 mx-auto min-h-0;
+    max-height: var(--b-drawer-max-height, calc(100dvh - 1rem));
+    height: var(--b-drawer-height, 50%);
+
+    .drag-section {
+      @apply bottom-0 left-0 right-0 h-10 cursor-ns-resize;
+    }
+
+    .drag-indicator {
+      @apply h-1 w-1/5;
+    }
+
+    &.draggable {
+      .drawer-content {
+        @apply pb-10;
+      }
+    }
+  }
+
+  &.left {
+    @apply top-2 bottom-2 left-2;
+    max-width: var(--b-drawer-max-width, calc(100vw - 1rem));
+    width: var(--b-drawer-width, 320px);
+
+    .drag-section {
+      @apply top-0 right-0 bottom-0 w-5 cursor-ew-resize;
+    }
+
+    .drag-indicator {
+      @apply h-1/5 w-1;
+    }
+
+    &.draggable {
+      .drawer-content {
+        @apply pr-5;
+      }
+    }
+  }
+
+  &.right {
+    @apply top-2 bottom-2 right-2;
+    max-width: var(--b-drawer-max-width, calc(100vw - 1rem));
+    width: var(--b-drawer-width, 320px);
+
+    .drag-section {
+      @apply top-0 bottom-0 left-0 w-5 cursor-ew-resize;
+    }
+
+    .drag-indicator {
+      @apply h-1/5 w-1;
+    }
+
+    &.draggable {
+      .drawer-content {
+        @apply pl-5;
+      }
+    }
+  }
+
+  &.dragging {
+    transition: none;
+  }
+}
+
+html:has(b-drawer.open),
+html:has(b-drawer.dragging) {
+  overflow: hidden;
+}