@basis-ng/styles 0.0.1-alpha.0 → 0.0.1-alpha.1

package/package.json

@@ -1,19 +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"
-  ]
-}
+{
+  "name": "@basis-ng/styles",
+  "version": "0.0.1-alpha.1",
+  "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

@@ -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/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/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/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/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/button.component.css

@@ -1,177 +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;
-  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

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

package/src/color-picker.component.css

@@ -1,34 +0,0 @@
-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

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

package/src/index.css

@@ -1,35 +0,0 @@
-@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';