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

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;
+}

package/src/index.css

@@ -1,39 +1,82 @@
-@import './components/alert.component.css';
-@import './components/badge.component.css';
-@import './components/attached-box.component.css';
-@import './components/badge.component.css';
-@import './components/bottom-sheet.component.css';
-@import './components/button-group.component.css';
-@import './components/button.component.css';
-@import './components/checkbox.component.css';
-@import './components/color-picker.component.css';
-@import './components/icon.component.css';
-@import './components/input-group.component.css';
-@import './components/input.component.css';
-@import './components/label.component.css';
-@import './components/menu-group.component.css';
-@import './components/menu-item-checkbox.component.css';
-@import './components/menu-item-radio.component.css';
-@import './components/menu-item.component.css';
-@import './components/menu-label.component.css';
-@import './components/menu.component.css';
-@import './components/range.component.css';
-@import './components/row-item.component.css';
-@import './components/row.component.css';
-@import './components/select.component.css';
-@import './components/select-options.component.css';
-@import './components/combobox.component.css';
-@import './components/combobox-options.component.css';
-@import './components/command.component.css';
-@import './components/command-options.component.css';
-@import './components/option.component.css';
-@import './components/side-sheet.component.css';
-@import './components/spinner.component.css';
-@import './components/switch.component.css';
-@import './components/tab.component.css';
-@import './components/table.component.css';
-@import './components/tabs.component.css';
-@import './components/textarea.component.css';
-@import './components/tooltip.component.css';
-@import './components/tree-node.component.css';
-@import './components/tree.component.css';
+@import 'tailwindcss';
+@import './utilities/index.css';
+
+@theme {
+  /* Font family */
+  --font-display: 'Geist', sans-serif;
+  --font-display-mono: 'Geist Mono', monospace;
+
+  /* Rounded sizes */
+  --radius-size-xs: 0.25rem;
+  --radius-size-sm: 0.375rem;
+  --radius-size-md: 0.5rem;
+  --radius-size-lg: 0.75rem;
+
+  /* Light theme colors */
+  --color-background: #fff;
+  --color-surface: #fff;
+  --color-font: #0a0a0a;
+  --color-primary: #0a0a0a;
+  --color-primary-foreground: #fff;
+  --color-secondary: #f5f5f5;
+  --color-secondary-foreground: #0a0a0a;
+  --color-ring: #e0e0e0;
+  --color-destructive: #e53935;
+  --color-destructive-foreground: #fff;
+  --color-success: #b7e4c7;
+  --color-success-foreground: #22543d;
+  --color-warning: #fff3cd;
+  --color-warning-foreground: #856404;
+  --color-info: #e0e0e0;
+  --color-info-foreground: #333;
+
+  /* Dark theme colors */
+  --color-background-dark: #0a0a0a;
+  --color-surface-dark: #171717;
+  --color-font-dark: #fff;
+  --color-bg-dark: #0a0a0a;
+  --color-primary-dark: #fff;
+  --color-primary-foreground-dark: #0a0a0a;
+  --color-secondary-dark: #262626;
+  --color-secondary-foreground-dark: #fff;
+  --color-ring-dark: #ffffff26;
+  --color-destructive-dark: #ff6659;
+  --color-destructive-foreground-dark: #0a0a0a;
+  --color-success-dark: #22543d;
+  --color-success-foreground-dark: #d1fae5;
+  --color-warning-dark: #856404;
+  --color-warning-foreground-dark: #ffe066;
+  --color-info-dark: #424242;
+  --color-info-foreground-dark: #e0e0e0;
+}
+
+@import './components/alert.css';
+@import './components/backdrop.css';
+@import './components/badge.css';
+@import './components/drawer.css';
+@import './components/button-group.css';
+@import './components/button.css';
+@import './components/checkbox.css';
+@import './components/input-group.css';
+@import './components/input.css';
+@import './components/label.css';
+@import './components/menu.css';
+@import './components/range.css';
+@import './components/row-item.css';
+@import './components/row.css';
+@import './components/select.css';
+@import './components/skeleton.css';
+@import './components/command.css';
+@import './components/command-options.css';
+@import './components/option.css';
+@import './components/spinner.css';
+@import './components/switch.css';
+@import './components/tabs.css';
+@import './components/textarea.css';
+@import './components/textarea-group.css';
+@import './components/tooltip.css';
+@import './components/tree.css';
+@import './components/dialog.css';
+@import './components/card.css';
+@import './components/calendar.css';
+@import './components/otp.css';

package/src/utilities/general.css

@@ -0,0 +1,7 @@
+@utility no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

package/src/utilities/index.css

@@ -0,0 +1,2 @@
+@import './general.css';
+@import './sizes.css';

package/src/utilities/sizes.css

@@ -0,0 +1,7 @@
+@utility b-rounded-full {
+  border-radius: 9999px !important;
+}
+
+@utility b-rounded-none {
+  border-radius: 0 !important;
+}

package/src/components/alert.component.css

@@ -1,71 +0,0 @@
-b-alert {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  position: relative;
-  font-family: 'Geist', sans-serif;
-  max-width: var(--max-width, none);
-  width: 100%;
-  box-sizing: border-box;
-
-  .icon {
-    flex-shrink: 0;
-    align-self: flex-start;
-  }
-
-  .content {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-
-    .title {
-      font-weight: bold;
-    }
-
-    .body {
-      font-size: 0.875rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.2rem;
-    }
-  }
-
-  &.success {
-    background-color: var(--success);
-    color: var(--success-foreground);
-    border: 1px solid var(--success-border-color);
-  }
-
-  &.error {
-    background-color: var(--error);
-    color: var(--error-foreground);
-    border: 1px solid var(--error-border-color);
-  }
-
-  &.warning {
-    background-color: var(--warning);
-    color: var(--warning-foreground);
-    border: 1px solid var(--warning-border-color);
-  }
-
-  &.info {
-    background-color: var(--secondary);
-    color: var(--secondary-foreground);
-    border: 1px solid var(--secondary-border-color);
-  }
-
-  .close-btn {
-    align-self: flex-start;
-    flex-shrink: 0;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: inherit;
-    display: flex;
-    align-items: start;
-    padding: 0;
-  }
-}

package/src/components/attached-box.component.css

@@ -1,84 +0,0 @@
-b-attached-box {
-  position: relative;
-  cursor: pointer;
-
-  .b-attached-box-content {
-    position: absolute;
-    display: flex;
-    z-index: 1000;
-    opacity: 0;
-    transform: scale(var(--scale-from, 0.99))
-      var(--translate-from, translateX(-10px));
-    transition:
-      opacity var(--duration, 0.15s) var(--enter-delay, 0s),
-      transform var(--duration, 0.15s) var(--enter-delay, 0s);
-    pointer-events: none;
-
-    &.visible {
-      opacity: 1;
-      transform: scale(var(--scale-to, 1)) var(--translate-to, translateX(0));
-      pointer-events: all;
-    }
-
-    /* Positioning classes */
-    &.top-left {
-      bottom: calc(100% + var(--gap, 0.5rem));
-      left: 0;
-    }
-
-    &.top-center {
-      bottom: calc(100% + var(--gap, 0.5rem));
-      left: 50%;
-    }
-
-    &.top-right {
-      bottom: calc(100% + var(--gap, 0.5rem));
-      right: 0;
-    }
-
-    &.bottom-left {
-      top: calc(100% + var(--gap, 0.5rem));
-      left: 0;
-    }
-
-    &.bottom-center {
-      top: calc(100% + var(--gap, 0.5rem));
-      left: 50%;
-    }
-
-    &.bottom-right {
-      top: calc(100% + var(--gap, 0.5rem));
-      right: 0;
-    }
-
-    &.left-top {
-      right: calc(100% + var(--gap, 0.5rem));
-      top: 0;
-    }
-
-    &.left-center {
-      right: calc(100% + var(--gap, 0.5rem));
-      top: 50%;
-    }
-
-    &.left-bottom {
-      right: calc(100% + var(--gap, 0.5rem));
-      bottom: 0;
-    }
-
-    &.right-top {
-      left: calc(100% + var(--gap, 0.5rem));
-      top: 0;
-    }
-
-    &.right-center {
-      left: calc(100% + var(--gap, 0.5rem));
-      top: 50%;
-    }
-
-    &.right-bottom {
-      left: calc(100% + var(--gap, 0.5rem));
-      bottom: 0;
-    }
-  }
-}

package/src/components/badge.component.css

@@ -1,58 +0,0 @@
-span[b-badge] {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  box-sizing: border-box;
-  transition:
-    background-color 0.2s,
-    opacity 0.2s;
-
-  &.primary {
-    background-color: var(--primary, #0a0a0a);
-    color: var(--primary-foreground, #ffffff);
-    border: var(--border-px, 0px) solid var(--primary-border-color, #0a0a0a);
-  }
-
-  &.secondary {
-    background-color: color-mix(
-      in srgb,
-      var(--secondary-foreground, #0a0a0a) 5%,
-      var(--secondary, transparent)
-    );
-    color: var(--secondary-foreground, #0a0a0a);
-  }
-
-  &.ghost {
-    background-color: transparent;
-    color: var(--secondary-foreground, #0a0a0a);
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--secondary-foreground, #0a0a0a) 5%,
-          var(--secondary, transparent)
-        );
-      }
-    }
-  }
-
-  &.outlined {
-    background-color: var(--background, #ffffff);
-    border: 1px solid var(--border-color, #ececec);
-    color: var(--secondary-foreground, #0a0a0a);
-  }
-
-  &.size-small {
-    font-size: 0.75rem;
-    padding: 0.2rem 0.6rem;
-  }
-
-  &.size-default {
-    font-size: 0.875rem;
-    padding: 0.25rem 0.8rem;
-  }
-}

package/src/components/bottom-sheet.component.css

@@ -1,49 +0,0 @@
-b-bottom-sheet {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--background, #ffffff);
-  border-radius: 16px 16px 0 0;
-  border: 1px solid var(--border-color, transparent);
-  border-bottom: none;
-  display: flex;
-  flex-direction: column;
-  z-index: 1001;
-  will-change: transform;
-  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-  touch-action: none;
-  user-select: none;
-  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-  padding-top: 40px;
-  box-sizing: border-box;
-  overflow: hidden;
-  transform: translateY(100%);
-
-  &.dragging {
-    transition: none;
-  }
-
-  .drag-section {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: grab;
-    touch-action: none;
-    position: absolute;
-    top: 0;
-
-    .drag-indicator {
-      width: 20%;
-      height: 4px;
-      background-color: var(--input-border-color, #e0e0e0);
-      border-radius: 2px;
-    }
-  }
-}
-
-html:has(b-bottom-sheet.open) {
-  overflow: hidden;
-}

package/src/components/button-group.component.css

@@ -1,20 +0,0 @@
-b-button-group {
-  display: flex;
-
-  &:not(.spaced) {
-    button:not(:last-child) {
-      border-right: none !important;
-      border-top-right-radius: 0 !important;
-      border-bottom-right-radius: 0 !important;
-    }
-
-    button:not(:first-child) {
-      border-top-left-radius: 0 !important;
-      border-bottom-left-radius: 0 !important;
-    }
-  }
-
-  &.spaced {
-    gap: 0.5rem;
-  }
-}

package/src/components/button.component.css

@@ -1,164 +0,0 @@
-button[b-button] {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--primary, #0a0a0a);
-  border-radius: var(--radius, 0.5rem);
-  box-sizing: border-box;
-  gap: 0.5rem;
-  position: relative;
-  transition:
-    background-color 0.2s,
-    opacity 0.2s;
-  border: none;
-  text-decoration: none;
-  font-family: 'Geist', sans-serif;
-  --border-px: 0px;
-
-  &:focus-visible {
-    outline: 2px solid var(--primary, #0a0a0a);
-    outline-offset: 2px;
-  }
-
-  &.primary,
-  &.outlined {
-    --border-px: 1px;
-  }
-
-  &.primary {
-    background-color: var(--primary, #0a0a0a);
-    color: var(--primary-foreground, #ffffff);
-    border: var(--border-px) solid var(--primary-border-color, #0a0a0a);
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--primary-foreground, #ffffff) 5%,
-          var(--primary, #0a0a0a)
-        );
-      }
-    }
-
-    &.toggled {
-      background-color: color-mix(
-        in srgb,
-        var(--primary-foreground, #ffffff) 5%,
-        var(--primary, #0a0a0a)
-      );
-    }
-  }
-
-  &.secondary {
-    background-color: var(--secondary);
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--secondary-foreground, #0a0a0a) 8%,
-          var(--secondary, transparent)
-        );
-      }
-    }
-
-    &.toggled {
-      background-color: color-mix(
-        in srgb,
-        var(--secondary-foreground, #0a0a0a) 8%,
-        var(--secondary, transparent)
-      );
-    }
-  }
-
-  &.ghost {
-    background-color: transparent;
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--secondary-foreground, #0a0a0a) 5%,
-          var(--secondary, transparent)
-        );
-      }
-    }
-
-    &.toggled {
-      background-color: color-mix(
-        in srgb,
-        var(--secondary-foreground, #0a0a0a) 5%,
-        var(--secondary, transparent)
-      );
-    }
-  }
-
-  &.outlined {
-    background-color: var(--background, #ffffff);
-    border: var(--border-px) solid var(--border-color, #ececec);
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--secondary-foreground, #0a0a0a) 5%,
-          var(--secondary, transparent)
-        );
-      }
-    }
-
-    &.toggled {
-      background-color: color-mix(
-        in srgb,
-        var(--secondary-foreground, #0a0a0a) 5%,
-        var(--secondary, transparent)
-      );
-    }
-  }
-
-  &.secondary,
-  &.ghost,
-  &.outlined {
-    color: var(--secondary-foreground, #0a0a0a);
-  }
-
-  &:not(:disabled) {
-    @media (width > 768px) {
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    @media (width >= 768px) {
-      &.active {
-        &:active {
-          transform: scale(0.98);
-        }
-      }
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  &.size-1 {
-    padding-inline: 0.571rem;
-    min-height: 1.714rem;
-    font-size: 0.857rem;
-  }
-
-  &.size-2 {
-    padding-inline: 0.857rem;
-    min-height: 2.286rem;
-    font-size: 1rem;
-  }
-
-  &.size-3 {
-    padding-inline: 1.143rem;
-    min-height: 2.857rem;
-    font-size: 1.143rem;
-  }
-}

package/src/components/checkbox.component.css

@@ -1,41 +0,0 @@
-input[b-checkbox] {
-  appearance: none;
-  -webkit-appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.3rem;
-  height: 1.3rem;
-  border: 1px solid var(--border, #d9d9d9);
-  border-radius: 0.25rem;
-  background-color: var(--background, #ffffff);
-  cursor: pointer;
-  transition:
-    background-color 0.2s,
-    border-color 0.2s;
-
-  &:checked {
-    background-color: var(--primary, #0a0a0a);
-    border-color: var(--primary, #0a0a0a);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--primary, #0a0a0a);
-    outline-offset: 2px;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    width: 90%;
-    height: 90%;
-    background-color: var(--background, #ffffff);
-    clip-path: polygon(14% 48%, 19% 43%, 39% 63%, 82% 15%, 87% 20%, 39% 74%);
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  &:checked::after {
-    opacity: 1;
-  }
-}