@altruist03/ui 0.1.0 → 0.2.0

package/src/tokens/semantic/spacing.json

@@ -0,0 +1,27 @@
+{
+  "spacing": {
+    "layout": {
+      "xs": "{spacing.1}",
+      "sm": "{spacing.2}",
+      "md": "{spacing.3}",
+      "lg": "{spacing.4}",
+      "xl": "{spacing.6}",
+      "2xl": "{spacing.7}"
+    },
+    "component": {
+      "xxs": "{spacing.1_5}",
+      "xs": "{spacing.1}",
+      "sm": "{spacing.2}",
+      "md": "{spacing.3}",
+      "lg": "{spacing.4}",
+      "xl": "{spacing.5}"
+    },
+    "section": {
+      "xs": "{spacing.4}",
+      "sm": "{spacing.6}",
+      "md": "{spacing.7}",
+      "lg": "{spacing.9}",
+      "xl": "{spacing.10}"
+    }
+  }
+}

package/src/tokens/semantic/typography.json

@@ -0,0 +1,87 @@
+{
+  "typography": {
+    "heading": {
+      "h1": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.3xl}",
+        "fontWeight": "{typography.fontWeight.bold}",
+        "lineHeight": "{typography.lineHeight.tight}"
+      },
+      "h2": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.2xl}",
+        "fontWeight": "{typography.fontWeight.bold}",
+        "lineHeight": "{typography.lineHeight.tight}"
+      },
+      "h3": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.xl}",
+        "fontWeight": "{typography.fontWeight.semibold}",
+        "lineHeight": "{typography.lineHeight.snug}"
+      },
+      "h4": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.lg}",
+        "fontWeight": "{typography.fontWeight.semibold}",
+        "lineHeight": "{typography.lineHeight.normal}"
+      }
+    },
+    "body": {
+      "large": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.md}",
+        "fontWeight": "{typography.fontWeight.normal}",
+        "lineHeight": "{typography.lineHeight.relaxed}"
+      },
+      "medium": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.base}",
+        "fontWeight": "{typography.fontWeight.normal}",
+        "lineHeight": "{typography.lineHeight.normal}"
+      },
+      "small": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.sm}",
+        "fontWeight": "{typography.fontWeight.normal}",
+        "lineHeight": "{typography.lineHeight.normal}"
+      },
+      "xsmall": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.xs}",
+        "fontWeight": "{typography.fontWeight.normal}",
+        "lineHeight": "{typography.lineHeight.normal}"
+      }
+    },
+    "label": {
+      "large": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.md}",
+        "fontWeight": "{typography.fontWeight.medium}",
+        "lineHeight": "{typography.lineHeight.normal}"
+      },
+      "medium": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.base}",
+        "fontWeight": "{typography.fontWeight.medium}",
+        "lineHeight": "{typography.lineHeight.normal}"
+      },
+      "small": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontSize": "{typography.fontSize.xs}",
+        "fontWeight": "{typography.fontWeight.medium}",
+        "lineHeight": "{typography.lineHeight.normal}"
+      }
+    },
+    "icon": {
+      "size": {
+        "fontSize": "{typography.fontSize.2xl}"
+      }
+    },
+    "radio": {
+      "label": {
+        "fontFamily": "{typography.fontFamily.sans}",
+        "fontWeight": "{typography.fontWeight.semibold}"
+      }
+    }
+  }
+}

package/src/utils/scrollLock.ts

@@ -0,0 +1,44 @@
+let lockCount = 0;
+let originalOverflow = '';
+let originalPaddingRight = '';
+
+/**
+ * Gets the width of the scrollbar in pixels.
+ */
+function getScrollbarWidth() {
+  if (typeof window === 'undefined') return 0;
+  return window.innerWidth - document.documentElement.clientWidth;
+}
+
+/**
+ * Locks the body scroll and adds padding to prevent layout shift.
+ */
+export function lockScroll() {
+  if (typeof document === 'undefined') return;
+
+  if (lockCount === 0) {
+    const scrollbarWidth = getScrollbarWidth();
+    originalOverflow = document.body.style.overflow;
+    originalPaddingRight = document.body.style.paddingRight;
+
+    document.body.style.overflow = 'hidden';
+    if (scrollbarWidth > 0) {
+      const currentPadding = parseFloat(getComputedStyle(document.body).paddingRight) || 0;
+      document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
+    }
+  }
+  lockCount++;
+}
+
+/**
+ * Unlocks the body scroll if no more locks are active.
+ */
+export function unlockScroll() {
+  if (typeof document === 'undefined') return;
+
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = originalOverflow;
+    document.body.style.paddingRight = originalPaddingRight;
+  }
+}

package/dist/index.css

@@ -1,514 +0,0 @@
-/* src/styles.css */
-:root {
-  --al-color-primary: #0b6b4f;
-  --al-color-primary-hover: #095c44;
-  --al-color-on-primary: #ffffff;
-  --al-color-secondary: #1f2937;
-  --al-color-on-secondary: #ffffff;
-  --al-color-danger: #b42318;
-  --al-color-success: #067647;
-  --al-color-warning: #b54708;
-  --al-color-text: #1c2430;
-  --al-color-text-muted: #5c6778;
-  --al-color-surface: #ffffff;
-  --al-color-surface-muted: #f5f7fa;
-  --al-color-border: #d8dee8;
-  --al-color-focus: #0b6b4f;
-  --al-font-family:
-    "Segoe UI",
-    "Noto Sans",
-    sans-serif;
-  --al-font-size-xs: 12px;
-  --al-font-size-sm: 13px;
-  --al-font-size-md: 14px;
-  --al-font-size-lg: 16px;
-  --al-radius-sm: 6px;
-  --al-radius-md: 8px;
-  --al-radius-lg: 12px;
-  --al-space-sm: 8px;
-  --al-space-md: 12px;
-  --al-space-lg: 16px;
-}
-.al-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  box-sizing: border-box;
-  height: 36px;
-  padding: 0 14px;
-  border-radius: var(--al-radius-md);
-  border: 1px solid transparent;
-  background: var(--al-btn-bg, var(--al-color-primary));
-  color: var(--al-btn-fg, var(--al-color-on-primary));
-  font-family: var(--al-font-family);
-  font-size: var(--al-font-size-md);
-  font-weight: 600;
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
-}
-.al-btn[data-size=sm] {
-  height: 30px;
-  padding: 0 10px;
-  font-size: var(--al-font-size-sm);
-}
-.al-btn[data-size=lg] {
-  height: 42px;
-  padding: 0 18px;
-  font-size: var(--al-font-size-lg);
-}
-.al-btn[data-full-width=true] {
-  width: 100%;
-}
-.al-btn[data-variant=outline],
-.al-btn[data-variant=ghost] {
-  color: var(--al-btn-bg, var(--al-color-primary));
-  background: transparent;
-}
-.al-btn[data-variant=outline] {
-  border-color: var(--al-btn-bg, var(--al-color-primary));
-}
-.al-btn[data-variant=solid]:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--al-btn-bg, var(--al-color-primary)) 86%, #000);
-}
-.al-btn[data-variant=outline]:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--al-btn-bg, var(--al-color-primary)) 12%, transparent);
-}
-.al-btn[data-variant=ghost]:hover:not(:disabled) {
-  background: var(--al-color-surface-muted);
-}
-.al-btn:focus-visible,
-.al-control:focus-visible,
-.al-checkbox-input:focus-visible {
-  outline: 2px solid var(--al-color-focus);
-  outline-offset: 2px;
-}
-.al-btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-.al-spinner {
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: al-spin 0.6s linear infinite;
-}
-@keyframes al-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .al-spinner {
-    animation: none;
-  }
-}
-.al-field,
-.al-checkbox-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-  font-family: var(--al-font-family);
-  color: var(--al-color-text);
-}
-.al-field-label,
-.al-checkbox-label {
-  font-size: var(--al-font-size-sm);
-  font-weight: 600;
-  color: var(--al-color-text);
-}
-.al-field-required {
-  margin-left: 2px;
-  color: var(--al-color-danger);
-}
-.al-control-wrap {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.al-control {
-  box-sizing: border-box;
-  width: 100%;
-  height: 36px;
-  padding: 0 12px;
-  border: 1px solid var(--al-control-border, var(--al-color-border));
-  border-radius: var(--al-radius-md);
-  background: var(--al-color-surface);
-  color: var(--al-color-text);
-  font-family: inherit;
-  font-size: var(--al-font-size-md);
-}
-.al-control[data-size=sm] {
-  height: 30px;
-  font-size: var(--al-font-size-sm);
-}
-.al-control[data-size=lg] {
-  height: 42px;
-  font-size: var(--al-font-size-lg);
-}
-.al-control::placeholder {
-  color: var(--al-color-text-muted);
-}
-.al-control:focus {
-  border-color: var(--al-control-accent, var(--al-color-focus));
-}
-.al-control[aria-invalid=true] {
-  border-color: var(--al-color-danger);
-}
-.al-control:disabled {
-  background: var(--al-color-surface-muted);
-  color: var(--al-color-text-muted);
-  cursor: not-allowed;
-}
-.has-left .al-control {
-  padding-left: 36px;
-}
-.has-right .al-control {
-  padding-right: 36px;
-}
-.al-control-icon {
-  position: absolute;
-  display: inline-flex;
-  color: var(--al-color-text-muted);
-}
-.al-control-icon.left {
-  left: 10px;
-}
-.al-control-icon.right {
-  right: 8px;
-}
-.al-textarea {
-  height: auto;
-  min-height: 96px;
-  padding: 10px 12px;
-  resize: vertical;
-  line-height: 1.45;
-}
-.al-select {
-  appearance: none;
-  padding-right: 32px;
-  background-image:
-    linear-gradient(
-      45deg,
-      transparent 50%,
-      var(--al-color-text-muted) 50%),
-    linear-gradient(
-      135deg,
-      var(--al-color-text-muted) 50%,
-      transparent 50%);
-  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
-  background-size: 5px 5px, 5px 5px;
-  background-repeat: no-repeat;
-}
-.al-field-helper,
-.al-field-error,
-.al-checkbox-description {
-  margin: 0;
-  font-size: var(--al-font-size-xs);
-  line-height: 1.4;
-}
-.al-field-helper,
-.al-checkbox-description {
-  color: var(--al-color-text-muted);
-}
-.al-field-error {
-  color: var(--al-color-danger);
-}
-.al-checkbox {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  cursor: pointer;
-}
-.al-checkbox-input {
-  width: 16px;
-  height: 16px;
-  margin-top: 2px;
-  accent-color: var(--al-color-primary);
-}
-.al-checkbox-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.al-card {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  background: var(--al-color-surface);
-  color: var(--al-color-text);
-  border: 1px solid var(--al-color-border);
-  border-radius: var(--al-radius-lg);
-  font-family: var(--al-font-family);
-}
-.al-card[data-padding=sm] {
-  padding: var(--al-space-sm);
-}
-.al-card[data-padding=md] {
-  padding: var(--al-space-lg);
-}
-.al-card[data-padding=lg] {
-  padding: 24px;
-}
-.al-card-header {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.al-card-title {
-  margin: 0;
-  font-size: var(--al-font-size-lg);
-  line-height: 1.3;
-}
-.al-card-description {
-  margin: 0;
-  color: var(--al-color-text-muted);
-  font-size: var(--al-font-size-sm);
-  line-height: 1.45;
-}
-.al-card-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-.al-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 22px;
-  padding: 0 8px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--al-badge-color, var(--al-color-primary)) 14%, var(--al-color-surface));
-  color: var(--al-badge-color, var(--al-color-primary));
-  font-family: var(--al-font-family);
-  font-size: var(--al-font-size-xs);
-  font-weight: 700;
-  line-height: 1;
-  white-space: nowrap;
-}
-.al-badge[data-variant=solid] {
-  background: var(--al-badge-color, var(--al-color-primary));
-  color: #fff;
-}
-.al-table-wrap {
-  width: 100%;
-  overflow-x: auto;
-  border: 1px solid var(--al-color-border);
-  border-radius: var(--al-radius-lg);
-  background: var(--al-color-surface);
-}
-.al-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-family: var(--al-font-family);
-  font-size: var(--al-font-size-md);
-  color: var(--al-color-text);
-}
-.al-table th,
-.al-table td {
-  padding: 10px 12px;
-  text-align: left;
-  border-bottom: 1px solid var(--al-color-border);
-  vertical-align: middle;
-}
-.al-table th {
-  background: var(--al-color-surface-muted);
-  color: var(--al-color-text-muted);
-  font-size: var(--al-font-size-xs);
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-.al-table tbody tr:last-child td {
-  border-bottom: 0;
-}
-.al-table[data-striped=true] tbody tr:nth-child(even) td {
-  background: color-mix(in srgb, var(--al-color-surface-muted) 70%, var(--al-color-surface));
-}
-.al-table tbody tr:hover td {
-  background: color-mix(in srgb, var(--al-color-primary) 8%, var(--al-color-surface));
-}
-.al-table[data-size=sm] th,
-.al-table[data-size=sm] td {
-  padding: 6px 10px;
-}
-.al-table[data-size=lg] th,
-.al-table[data-size=lg] td {
-  padding: 14px 16px;
-}
-.al-table-empty {
-  padding: 28px 12px;
-  color: var(--al-color-text-muted);
-  text-align: center;
-}
-.al-table-caption {
-  caption-side: bottom;
-  padding: 8px 12px 10px;
-  color: var(--al-color-text-muted);
-  font-size: var(--al-font-size-xs);
-  text-align: left;
-}
-.accordion {
-  border: 1px solid var(--al-color-border);
-  border-radius: var(--al-radius-lg);
-  background: var(--al-color-surface);
-  color: var(--al-color-text);
-  font-family: var(--al-font-family);
-  overflow: hidden;
-}
-.accordion-item + .accordion-item {
-  border-top: 1px solid var(--al-color-border);
-}
-.accordion-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  padding: 12px 14px;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-weight: 600;
-  text-align: left;
-  cursor: pointer;
-}
-.accordion-trigger:hover {
-  background: var(--al-color-surface-muted);
-}
-.accordion-trigger:focus-visible {
-  outline: 2px solid var(--al-color-focus);
-  outline-offset: -2px;
-}
-.accordion-chevron {
-  width: 8px;
-  height: 8px;
-  border-right: 2px solid currentColor;
-  border-bottom: 2px solid currentColor;
-  transform: rotate(45deg);
-}
-.accordion-chevron[data-open=true] {
-  transform: rotate(225deg);
-}
-.accordion-panel {
-  padding: 0 14px 14px;
-  color: var(--al-color-text-muted);
-  font-size: var(--al-font-size-sm);
-  line-height: 1.5;
-}
-.al-float {
-  position: relative;
-}
-.al-float-input {
-  height: 52px;
-  padding: 18px 12px 6px;
-}
-.al-float[data-size=sm] .al-float-input {
-  height: 44px;
-  padding-top: 16px;
-}
-.al-float[data-size=lg] .al-float-input {
-  height: 58px;
-}
-.al-float-input::placeholder {
-  color: transparent;
-}
-.al-float:focus-within .al-float-input::placeholder {
-  color: var(--al-color-text-muted);
-}
-.al-float-label {
-  position: absolute;
-  left: 12px;
-  top: 16px;
-  max-width: calc(100% - 24px);
-  overflow: hidden;
-  color: var(--al-color-text-muted);
-  font-size: var(--al-font-size-md);
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  pointer-events: none;
-  transition:
-    top 0.15s ease,
-    font-size 0.15s ease,
-    color 0.15s ease;
-}
-.al-float[data-filled=true] .al-float-label,
-.al-float:focus-within .al-float-label {
-  top: 7px;
-  color: var(--al-control-accent, var(--al-color-primary));
-  font-size: 11px;
-  font-weight: 600;
-}
-.al-float[data-invalid=true] .al-float-label {
-  color: var(--al-color-danger);
-}
-.al-file {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 84px;
-  padding: 14px 16px;
-  border: 1px dashed var(--al-control-border, var(--al-color-border));
-  border-radius: var(--al-radius-lg);
-  background: var(--al-color-surface);
-  color: var(--al-color-text);
-  cursor: pointer;
-}
-.al-file:hover,
-.al-file.is-dragging,
-.al-file:focus-within {
-  border-style: solid;
-  border-color: var(--al-control-accent, var(--al-color-primary));
-  background: color-mix(in srgb, var(--al-color-primary) 6%, var(--al-color-surface));
-}
-.al-file[data-invalid=true] {
-  border-color: var(--al-color-danger);
-}
-.al-file-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-.al-file-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-.al-file-title {
-  font-weight: 600;
-}
-.al-file-names {
-  overflow: hidden;
-  color: var(--al-color-text-muted);
-  font-size: var(--al-font-size-xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.al-file-button {
-  flex: none;
-  height: 32px;
-  padding: 0 12px;
-  border-radius: var(--al-radius-md);
-  background: var(--al-color-primary);
-  color: var(--al-color-on-primary);
-  font-size: var(--al-font-size-sm);
-  font-weight: 600;
-  line-height: 32px;
-}
-/*# sourceMappingURL=index.css.map */