@basis-ng/styles 0.0.1-alpha.0

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@basis-ng/styles",
+  "version": "0.0.1-alpha.0",
+  "description": "Styles for the @basis-ng/primitives",
+  "main": "src/index.css",
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "ui",
+    "design-system",
+    "styles",
+    "basis-ng"
+  ],
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css"
+  ]
+}

package/src/alert.component.css

@@ -0,0 +1,71 @@
+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/attached-box.component.css

@@ -0,0 +1,84 @@
+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/badge.component.css

@@ -0,0 +1,58 @@
+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/bottom-sheet.component.css

@@ -0,0 +1,49 @@
+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/button-group.component.css

@@ -0,0 +1,20 @@
+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/button.component.css

@@ -0,0 +1,177 @@
+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;
+  overflow: hidden;
+  transition:
+    background-color 0.2s,
+    opacity 0.2s;
+  font-size: 100%;
+  border: none;
+  text-decoration: none;
+  font-family: 'Geist', sans-serif;
+  --padding-inline-multiple: 1.5;
+  --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 {
+        transform: scale(0.98);
+      }
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.size-small {
+    --vertical-padding: calc(0.5rem - (var(--border-px) * 2));
+    --horizontal-padding: clamp(
+      0.75rem,
+      calc(0.5rem + var(--radius, 0.5rem) / 2),
+      1.25rem
+    );
+    font-size: 0.875rem;
+    padding: var(--vertical-padding) var(--horizontal-padding);
+
+    &.equal-padding {
+      padding: var(--vertical-padding);
+    }
+  }
+
+  &.size-default {
+    --vertical-padding: calc(0.9rem - (var(--border-px) * 2));
+    --horizontal-padding: clamp(
+      1rem,
+      calc(0.75rem + var(--radius, 0.5rem) / 2),
+      1.5rem
+    );
+    font-size: 1rem;
+    padding: var(--vertical-padding) var(--horizontal-padding);
+
+    &.equal-padding {
+      padding: var(--vertical-padding);
+    }
+  }
+}

package/src/checkbox.component.css

@@ -0,0 +1,41 @@
+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;
+  }
+}

package/src/color-picker.component.css

@@ -0,0 +1,34 @@
+input[b-color-picker] {
+  width: 100%;
+  position: relative;
+  width: 100%;
+  height: 2.8rem;
+  background: none;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+
+  &::-webkit-color-swatch-wrapper {
+    width: 100%;
+    height: 2.8rem;
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+  }
+
+  &.show-color {
+    &::before {
+      content: var(--value);
+      display: flex;
+      color: var(--text-color);
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-family: 'Geist', sans-serif;
+    }
+  }
+}

package/src/icon.component.css

@@ -0,0 +1,5 @@
+i[b-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/index.css

@@ -0,0 +1,35 @@
+@import './alert.component.css';
+@import './badge.component.css';
+@import './attached-box.component.css';
+@import './badge.component.css';
+@import './bottom-sheet.component.css';
+@import './button-group.component.css';
+@import './button.component.css';
+@import './checkbox.component.css';
+@import './color-picker.component.css';
+@import './icon.component.css';
+@import './input-group.component.css';
+@import './input.component.css';
+@import './label.component.css';
+@import './menu-group.component.css';
+@import './menu-item-checkbox.component.css';
+@import './menu-item-radio.component.css';
+@import './menu-item.component.css';
+@import './menu-label.component.css';
+@import './menu.component.css';
+@import './option.component.css';
+@import './range.component.css';
+@import './row-item.component.css';
+@import './row.component.css';
+@import './search.component.css';
+@import './select.component.css';
+@import './side-sheet.component.css';
+@import './spinner.component.css';
+@import './switch.component.css';
+@import './tab.component.css';
+@import './table.component.css';
+@import './tabs.component.css';
+@import './textarea.component.css';
+@import './tooltip.component.css';
+@import './tree-node.component.css';
+@import './tree.component.css';

package/src/input-group.component.css

@@ -0,0 +1,110 @@
+b-input-group {
+  --exterior-padding: clamp(
+    1rem,
+    calc(0.75rem + var(--radius, 0.5rem) / 2),
+    1.3rem
+  );
+
+  width: 100%;
+  background-color: var(--input-background);
+  border-radius: var(--radius, 0.5rem);
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border-color, transparent);
+  transition:
+    opacity 0.2s,
+    padding-top 0.2s,
+    padding-bottom 0.2s,
+    background-color 0.2s,
+    border-color 0.2s;
+  font-size: 1rem;
+  color: var(--input-foreground, #798194);
+  display: flex;
+  align-items: center;
+
+  &:has(> *.ng-invalid) {
+    color: var(--error-foreground, #c40000ab);
+    background-color: var(--error, #fff0f0);
+    border-color: var(--error-border-color, #c40000ab);
+
+    i svg {
+      stroke: var(--error-foreground, #c40000ab);
+    }
+
+    button {
+      color: var(--error-foreground, #c40000ab);
+      background-color: var(--error, #fff0f0);
+    }
+  }
+
+  select,
+  input,
+  button,
+  b-label input,
+  b-label select {
+    border-radius: 0px !important;
+    border-width: 0px !important;
+  }
+
+  &:not(:has(b-label)) select:not(:first-child),
+  &:not(:has(b-label)) input:not(:first-child),
+  button:not(:first-child),
+  b-label:not(:first-child) input,
+  b-label:not(:first-child) select {
+    padding-left: 0.8rem !important;
+  }
+
+  b-label:not(:first-child) label {
+    left: 0.8rem !important;
+  }
+
+  &:not(:has(b-label)) select:not(:last-child),
+  &:not(:has(b-label)) input:not(:last-child),
+  button:not(:last-child),
+  b-label:not(:last-child) input,
+  b-label:not(:last-child) select {
+    padding-right: 0.8rem !important;
+  }
+
+  input:first-child,
+  button:first-child,
+  b-label:first-child input,
+  b-label:first-child select select:first-child,
+  input:first-child,
+  button:first-child,
+  b-label:first-child input,
+  b-label:first-child select {
+    border-top-left-radius: var(--radius) !important;
+    border-bottom-left-radius: var(--radius) !important;
+  }
+
+  select:last-child,
+  input:last-child,
+  button:last-child,
+  b-label:last-child input,
+  b-label:last-child select {
+    border-top-right-radius: var(--radius) !important;
+    border-bottom-right-radius: var(--radius) !important;
+  }
+
+  span:first-child,
+  & > i:first-child {
+    padding-inline: var(--exterior-padding) 0;
+  }
+
+  span:last-child,
+  & > i:last-child {
+    padding-inline: 0 var(--exterior-padding);
+  }
+
+  button {
+    height: 100%;
+    max-height: 100%;
+    font-size: 0.88rem;
+  }
+
+  button:active {
+    transform: scale(1) !important;
+  }
+}