@bunnix/components 0.9.0

package/src/styles/menu.css

@@ -0,0 +1,168 @@
+/* Modern Popover Logic with Dynamic Anchoring */
+[popover].menu-popover {
+  margin: 0;
+  padding: 0;
+  inset: auto;
+  overflow: visible;
+  border: none;
+  background: transparent;
+
+  /* Modern CSS Anchor Positioning (Chrome/Edge) */
+  position-anchor: var(--anchor-id);
+  position: fixed;
+  top: anchor(var(--anchor-id) bottom);
+  left: anchor(var(--anchor-id) left);
+
+  /* Fallback for Safari/Firefox:
+     Since .menu-wrapper is relative, this puts it below the button
+  */
+  margin-top: var(--base-gap);
+}
+
+/* Custom Try States to prevent horizontal shifting */
+@position-try --flip-v {
+  top: auto;
+  bottom: anchor(var(--anchor-id) top);
+  left: anchor(var(--anchor-id) left);
+}
+
+@position-try --flip-v-right {
+  top: auto;
+  bottom: anchor(var(--anchor-id) top);
+  right: anchor(var(--anchor-id) right);
+}
+
+[popover].menu-popover {
+  position-try-fallbacks: --flip-v, --flip-v-right;
+}
+
+/* Alignment Modifiers for Menu */
+.menu-anchor-right {
+  left: auto !important;
+  right: anchor(var(--anchor-id) right) !important;
+}
+
+.menu-anchor-left {
+  left: anchor(var(--anchor-id) left) !important;
+  right: auto !important;
+}
+
+[popover].menu-popover {
+  position-try-fallbacks: --flip-v, --flip-v-right;
+  position-try-order: most-height;
+}
+
+[popover].menu-popover.match-anchor {
+  min-width: anchor-size(var(--anchor-id) width);
+  width: anchor-size(var(--anchor-id) width);
+  max-width: anchor-size(var(--anchor-id) width);
+}
+
+[popover].menu-popover .selected .icon {
+  background-color: white !important;
+}
+
+[popover].menu-popover .selected,
+[popover].menu-popover .selected .text-secondary,
+[popover].menu-popover .selected .text-sm,
+[popover].menu-popover .selected .text-base {
+  color: white !important;
+}
+
+[popover].menu-popover.menu-anchor-right {
+  position-try-fallbacks: --flip-v-right, --flip-v;
+}
+
+[popover].menu-popover.menu-anchor-left {
+  position-try-fallbacks: --flip-v, --flip-v-right;
+}
+
+[popover]:popover-open {
+  display: flex;
+}
+
+.menu-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-trigger {
+  appearance: none;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--min-control-radius);
+  color: var(--color-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-regular);
+  padding: calc(var(--base-padding) * 0.5) var(--base-padding);
+  padding-right: calc(var(--base-padding) * 3) !important;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-gap);
+  cursor: pointer;
+  min-width: 150px;
+  text-align: left;
+  position: relative;
+}
+
+.dropdown-trigger.dropdown-lg {
+  padding: calc(var(--base-padding) * 0.75) calc(var(--base-padding) * 1.25);
+  padding-right: calc(var(--base-padding) * 3.25) !important;
+  font-size: 1.1rem;
+}
+
+.dropdown-trigger.dropdown-xl {
+  padding: var(--base-padding) calc(var(--base-padding) * 1.5);
+  padding-right: calc(var(--base-padding) * 3.5) !important;
+  font-size: 1.2rem;
+}
+
+.dropdown-trigger::after {
+  content: "";
+  position: absolute;
+  right: var(--base-padding);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg-chevron-down);
+  mask-image: var(--svg-chevron-down);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  pointer-events: none;
+}
+
+.dropdown-trigger.no-chevron::after {
+  display: none;
+}
+
+.dropdown-trigger.no-chevron {
+  padding-right: var(--base-padding) !important;
+}
+
+.dropdown-trigger.dropdown-lg::after {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.dropdown-trigger.dropdown-xl::after {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.dropdown-trigger:focus {
+  border-color: var(--accent-color);
+}
+
+.dropdown-trigger:hover {
+  background-color: var(--highlight-background-color);
+}
+
+.menu-wrapper:has([popover]:popover-open) > .btn,
+.menu-wrapper:has([popover]:popover-open) > .dropdown-trigger {
+  background-color: var(--highlight-background-color) !important;
+}

package/src/styles/motion.css

@@ -0,0 +1,66 @@
+.slide-in-right {
+  animation: slideInRight 0.2s ease-out;
+}
+
+.slide-in-left {
+  animation: slideInLeft 0.2s ease-out;
+}
+
+.dialog-appear {
+  animation: dialogAppear 0.18s ease-out;
+  transform-origin: center;
+}
+
+.dialog-backdrop::backdrop {
+  animation: dialogBackdrop 0.18s ease-out;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(12px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-12px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes dialogAppear {
+  from {
+    transform: scale(0.96);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes dialogBackdrop {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog-appear,
+  .slide-in-right,
+  .slide-in-left {
+    animation: none;
+  }
+}

package/src/styles/table.css

@@ -0,0 +1,78 @@
+.table {
+  width: 100%;
+  border-collapse: separate; /* Required for border-radius */
+  border-spacing: 0;
+  text-align: left;
+}
+
+.table th,
+.table td {
+  padding: var(--base-padding);
+  vertical-align: middle;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.table th {
+  font-weight: var(--font-bold);
+  color: var(--color-primary);
+}
+
+/* Remove bottom border from last row */
+.table tr:last-child td {
+  border-bottom: none;
+}
+
+/* Variant: With Background */
+.table-bg {
+  background-color: var(--alternate-background-color);
+}
+
+/* Variant: Bordered (Outer border + rounded) */
+.table-bordered {
+  border: 1px solid var(--border-color);
+  border-radius: var(--base-radius);
+  /* Ensure background colors don't bleed */
+  overflow: hidden; 
+}
+
+/* Ensure border works with radius on table element */
+.table-bordered th:first-child {
+  border-top-left-radius: var(--base-radius);
+}
+.table-bordered th:last-child {
+  border-top-right-radius: var(--base-radius);
+}
+.table-bordered tr:last-child td:first-child {
+  border-bottom-left-radius: var(--base-radius);
+}
+.table-bordered tr:last-child td:last-child {
+  border-bottom-right-radius: var(--base-radius);
+}
+
+/* Modifier: Hover Rows */
+.table-hover-rows tr:hover td {
+  background-color: var(--highlight-background-color);
+}
+
+.table-interactive tbody tr {
+  cursor: pointer;
+}
+
+.table-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.table-sortable .table-sort-icon {
+  margin-left: var(--base-gap);
+  vertical-align: middle;
+}
+
+.table-checkbox-cell {
+  text-align: center;
+  width: 40px;
+}
+
+.table-checkbox {
+  gap: 0;
+}

package/src/styles/timepicker.css

@@ -0,0 +1,87 @@
+.timepicker-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+[popover].timepicker-popover {
+  margin: 0;
+  padding: 0;
+  inset: auto;
+  overflow: visible;
+  border: none;
+  background: transparent;
+  position-anchor: var(--anchor-id);
+  position: fixed;
+  top: anchor(var(--anchor-id) bottom);
+  left: anchor(var(--anchor-id) left);
+  width: auto;
+  margin-top: var(--base-gap);
+}
+
+@position-try --time-flip-v {
+  top: auto;
+  bottom: anchor(var(--anchor-id) top);
+  left: anchor(var(--anchor-id) left);
+}
+
+[popover].timepicker-popover {
+  position-try-fallbacks: --time-flip-v;
+}
+
+.timepicker-card {
+  min-width: 240px; /* Proportional for H1 size */
+  overflow: hidden;
+}
+
+.timepicker-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--base-gap);
+  padding: var(--base-padding);
+  background-color: transparent;
+  border-radius: var(--base-radius) var(--base-radius) 0 0;
+}
+
+input.time-segment {
+  font-size: 2rem !important; /* H1 Equivalent */
+  font-weight: var(--font-bold) !important;
+  height: calc(var(--base-padding) * 5) !important;
+  width: calc(var(--base-padding) * 5) !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-radius: var(--base-radius);
+  cursor: pointer;
+  background: transparent !important;
+  border: 2px solid transparent !important;
+  color: var(--color-primary) !important;
+  line-height: 1 !important;
+  text-align: center !important;
+  font-family: inherit !important;
+  appearance: none !important;
+  outline: none !important;
+  transition: all 0.2s ease;
+  box-sizing: border-box !important;
+}
+
+input.time-segment::-webkit-inner-spin-button,
+input.time-segment::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+input.time-segment:focus {
+  border-color: var(--accent-color) !important;
+  background-color: var(--highlight-background-color) !important;
+  color: var(--accent-color) !important;
+}
+
+.time-separator {
+  font-size: 1.75rem;
+  font-weight: var(--font-bold);
+  color: var(--color-tertiary);
+  display: flex;
+  align-items: center;
+  height: calc(var(--base-padding) * 5);
+  line-height: 1;
+}

package/src/styles/typography.css

@@ -0,0 +1,94 @@
+body {
+ font-family: var(--font-family);
+ font-size: var(--font-size);
+ font-size-adjust: var(--font-size-adjust, 0.52);
+ line-height: 1.5;
+}
+
+html * { -webkit-text-size-adjust: 100%; }
+
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+}
+
+h1 {
+ font-size: 2rem;
+ line-height: 1.2;
+ font-weight: var(--font-bold);
+}
+
+h2 {
+ font-size: 1.5rem;
+ line-height: 1.25;
+ font-weight: var(--font-bold);
+}
+
+h3 {
+ font-size: 1.25rem;
+ line-height: 1.3;
+ font-weight: var(--font-bold);
+}
+
+h4 {
+ font-size: 1rem;
+ line-height: 1.4;
+ font-weight: var(--font-semibold);
+}
+
+h5 {
+ font-size: 1rem;
+ line-height: 1.4;
+ font-weight: var(--font-semibold);
+ color: var(--color-secondary); /* Match H6 color */
+}
+
+h6 {
+ font-size: 1rem;
+ line-height: 1.4;
+ font-weight: var(--font-bold);
+ color: var(--color-secondary);
+ font-size: 0.85rem;
+ letter-spacing: 0.05em;
+}
+
+.text-mono {
+  font-family: monospace;
+}
+
+.text-sm {
+  font-size: var(--font-size-sm);
+}
+
+.text-base {
+  font-size: 1rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+}
+
+.font-inherit {
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.label {
+  display: block;
+  font-size: var(--font-size);
+  font-weight: var(--font-semibold);
+  color: var(--color-secondary);
+  margin-bottom: var(--base-gap);
+}

package/src/styles/variables.css

@@ -0,0 +1,218 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap');
+
+:root {
+  color-scheme: light dark; /* Critical for light-dark() to work */
+
+  /* Colors (light defaults; dark overrides below for Safari fallback) */
+  --color-primary: #000;
+  --color-primary-dimmed: #444;
+  --color-secondary: #666;
+  --color-tertiary: #999;
+  --color-quaternary: #b3b3b3;
+  --color-destructive: #d73a49;
+  --color-destructive-dimmed: #b31d28;
+  --color-success: #2da44e;
+  --color-info: #f2994a;
+  --accent-color: #007bff;
+  --accent-color-dimmed: #0069d9;
+
+  --border-color: #ccc;
+  --background-color: #fff;
+  --alternate-background-color: #f5f5f5;
+  --highlight-background-color: #e5e5e5;
+
+  /* Shadow */
+  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  /* Layout */
+  --body-margin: 0;
+  --base-margin: .15rem;
+  --base-gap: .5rem;
+  --base-radius: 1rem;
+  --base-padding: .75rem;
+
+  /* Controls */
+  --min-control-height: 34px;
+  --min-control-radius: calc(var(--base-radius) * 0.4);
+
+  /* Sidebar */
+  --sidebar-width: 280px;
+  --sidebar-padding: var(--base-padding);
+  --sidebar-gap: 1px;
+
+  /* Typography */
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --font-regular: 400;
+  --font-bold: 600;
+  --font-semibold: 500;
+  --font-size: 14px;
+  --font-size-sm: 12px;
+  --font-size-xs: 10px;
+
+  /* Switch */
+  --switch-track-w: 2.75rem;
+  --switch-track-h: 1.6rem;
+  --switch-thumb: 1.2rem;
+  --switch-pad: calc((var(--switch-track-h) - var(--switch-thumb)) / 2);
+  --switch-track-w-lg: 3.25rem;
+  --switch-track-h-lg: 1.8rem;
+  --switch-thumb-lg: 1.35rem;
+  --switch-pad-lg: calc((var(--switch-track-h-lg) - var(--switch-thumb-lg)) / 2);
+  --switch-track-w-xl: 3.75rem;
+  --switch-track-h-xl: 2rem;
+  --switch-thumb-xl: 1.5rem;
+  --switch-pad-xl: calc((var(--switch-track-h-xl) - var(--switch-thumb-xl)) / 2);
+
+  /* Icons */
+  --svg-add-circle: url('../icons/add-circle.svg');
+  --svg-add: url('../icons/add.svg');
+  --svg-alt: url('../icons/alt.svg');
+  --svg-archive: url('../icons/archive.svg');
+  --svg-at: url('../icons/at.svg');
+  --svg-attestation: url('../icons/attestation.svg');
+  --svg-bell: url('../icons/bell.svg');
+  --svg-bookmark: url('../icons/bookmark.svg');
+  --svg-bot: url('../icons/bot.svg');
+  --svg-button: url('../icons/button.svg');
+  --svg-calculate: url('../icons/calculate.svg');
+  --svg-calendar: url('../icons/calendar.svg');
+  --svg-chart: url('../icons/chart.svg');
+  --svg-check: url('../icons/check.svg');
+  --svg-chevron-down: url('../icons/chevron-down.svg');
+  --svg-chevron-left: url('../icons/chevron-left.svg');
+  --svg-chevron-right: url('../icons/chevron-right.svg');
+  --svg-clip: url('../icons/clip.svg');
+  --svg-clock: url('../icons/clock.svg');
+  --svg-close-circle: url('../icons/close-circle.svg');
+  --svg-close: url('../icons/close.svg');
+  --svg-cloud-download: url('../icons/cloud-download.svg');
+  --svg-cloud-upload: url('../icons/cloud-upload.svg');
+  --svg-cloud: url('../icons/cloud.svg');
+  --svg-columns-layout: url('../icons/columns-layout.svg');
+  --svg-command: url('../icons/command.svg');
+  --svg-cube: url('../icons/cube.svg');
+  --svg-delete: url('../icons/delete.svg');
+  --svg-dollar: url('../icons/dollar.svg');
+  --svg-download: url('../icons/download.svg');
+  --svg-draw: url('../icons/draw.svg');
+  --svg-duplicate: url('../icons/duplicate.svg');
+  --svg-edit: url('../icons/edit.svg');
+  --svg-exclamation-mark: url('../icons/exclamation-mark.svg');
+  --svg-eye-open: url('../icons/eye-open.svg');
+  --svg-eye: url('../icons/eye.svg');
+  --svg-file-html: url('../icons/file-html.svg');
+  --svg-file: url('../icons/file.svg');
+  --svg-finger: url('../icons/finger.svg');
+  --svg-flag: url('../icons/flag.svg');
+  --svg-folder: url('../icons/folder.svg');
+  --svg-function: url('../icons/function.svg');
+  --svg-gear: url('../icons/gear.svg');
+  --svg-gift: url('../icons/gift.svg');
+  --svg-globe: url('../icons/globe.svg');
+  --svg-grid: url('../icons/grid.svg');
+  --svg-hand: url('../icons/hand.svg');
+  --svg-heart: url('../icons/heart.svg');
+  --svg-home: url('../icons/home.svg');
+  --svg-image: url('../icons/image.svg');
+  --svg-inbox: url('../icons/inbox.svg');
+  --svg-info: url('../icons/info.svg');
+  --svg-key: url('../icons/key.svg');
+  --svg-lamp: url('../icons/lamp.svg');
+  --svg-link: url('../icons/link.svg');
+  --svg-location: url('../icons/location.svg');
+  --svg-locker: url('../icons/locker.svg');
+  --svg-login: url('../icons/login.svg');
+  --svg-logout: url('../icons/logout.svg');
+  --svg-mail: url('../icons/mail.svg');
+  --svg-map: url('../icons/map.svg');
+  --svg-markup: url('../icons/markup.svg');
+  --svg-merge: url('../icons/merge.svg');
+  --svg-more-horizontal: url('../icons/more-horizontal.svg');
+  --svg-more-vertical: url('../icons/more-vertical.svg');
+  --svg-mouse: url('../icons/mouse.svg');
+  --svg-palette: url('../icons/palette.svg');
+  --svg-password: url('../icons/password.svg');
+  --svg-pencil: url('../icons/pencil.svg');
+  --svg-people: url('../icons/people.svg');
+  --svg-person-add: url('../icons/person-add.svg');
+  --svg-person-remove: url('../icons/person-remove.svg');
+  --svg-person: url('../icons/person.svg');
+  --svg-pin: url('../icons/pin.svg');
+  --svg-question-circle: url('../icons/question-circle.svg');
+  --svg-remove-circle: url('../icons/remove-circle.svg');
+  --svg-return-arrow: url('../icons/return-arrow.svg');
+  --svg-save: url('../icons/save.svg');
+  --svg-search: url('../icons/search.svg');
+  --svg-sections: url('../icons/sections.svg');
+  --svg-send: url('../icons/send.svg');
+  --svg-share: url('../icons/share.svg');
+  --svg-shine: url('../icons/shine.svg');
+  --svg-sliders: url('../icons/sliders.svg');
+  --svg-star: url('../icons/star.svg');
+  --svg-storage: url('../icons/storage.svg');
+  --svg-success-circle: url('../icons/success-circle.svg');
+  --svg-swap: url('../icons/swap.svg');
+  --svg-switch: url('../icons/switch.svg');
+  --svg-sync: url('../icons/sync.svg');
+  --svg-table: url('../icons/table.svg');
+  --svg-tag: url('../icons/tag.svg');
+  --svg-text: url('../icons/text.svg');
+  --svg-terminal: url('../icons/terminal.svg');
+  --svg-thumb-down: url('../icons/thumb-down.svg');
+  --svg-thumb-up: url('../icons/thumb-up.svg');
+  --svg-timer: url('../icons/timer.svg');
+  --svg-toggle: url('../icons/toggle.svg');
+  --svg-trash: url('../icons/trash.svg');
+  --svg-update-page: url('../icons/update-page.svg');
+  --svg-upload: url('../icons/upload.svg');
+  --svg-video: url('../icons/video.svg');
+  --svg-wallet: url('../icons/wallet.svg');
+  --svg-window: url('../icons/window.svg');
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-primary: #fff;
+    --color-primary-dimmed: #eee;
+    --color-secondary: #ccc;
+    --color-tertiary: #888;
+    --color-quaternary: #666;
+    --color-destructive: #f85149;
+    --color-destructive-dimmed: #da3633;
+    --color-success: #3fb950;
+    --color-info: #f2994a;
+    --accent-color: #007bff;
+    --accent-color-dimmed: #0069d9;
+
+    --border-color: #333;
+    --background-color: #000;
+    --alternate-background-color: #111;
+    --highlight-background-color: #222;
+
+    --svg-chevron-select: var(--svg-chevron-down);
+  }
+}
+
+@supports (color: light-dark(black, white)) {
+  :root {
+    /* Override fallback with light-dark() when supported */
+    --color-primary: light-dark(#000, #fff);
+    --color-primary-dimmed: light-dark(#444, #eee);
+    --color-secondary: light-dark(#666, #ccc);
+    --color-tertiary: light-dark(#999, #888);
+    --color-quaternary: light-dark(#b3b3b3, #666);
+    --color-destructive: light-dark(#d73a49, #f85149);
+    --color-destructive-dimmed: light-dark(#b31d28, #da3633);
+    --color-success: light-dark(#2da44e, #3fb950);
+    --color-info: light-dark(#f2994a, #f2994a);
+    --accent-color: light-dark(#007bff, #007bff);
+    --accent-color-dimmed: light-dark(#0069d9, #0069d9);
+
+    --border-color: light-dark(#ccc, #333);
+    --background-color: light-dark(#fff, #000);
+    --alternate-background-color: light-dark(#f5f5f5, #111);
+    --highlight-background-color: light-dark(#e5e5e5, #222);
+
+    --svg-chevron-select: var(--svg-chevron-down);
+  }
+}

package/src/styles.css

@@ -0,0 +1 @@
+@import "./styles/main.css";