@bunnix/components 0.9.0

package/src/styles/layout.css

@@ -0,0 +1,444 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: var(--body-margin);
+  height: 100vh; /* Ensure body takes full height for layout */
+}
+
+a {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--base-gap);
+}
+
+.spacer-h {
+  margin: 0 auto;
+  flex: 1;
+}
+
+.spacer-v {
+  margin: auto 0;
+  flex: 1;
+}
+
+.box {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: var(--base-padding);
+  gap: var(--base-gap);
+}
+
+.box-sm {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: calc(var(--base-padding) * 0.25) var(--base-padding);
+  gap: var(--base-gap);
+}
+
+.box-capsule {
+  width: 100%;
+  padding: calc(var(--base-padding) * 0.5) var(--base-padding);
+  border-radius: var(--base-radius);
+}
+
+.box-control {
+  width: 100%;
+  padding: calc(var(--base-padding) * 0.5) var(--base-padding);
+  border-radius: var(--min-control-radius);
+}
+
+/* New Layout Classes */
+.main-container {
+  display: flex;
+  height: 100dvh; /* Dynamic viewport height for mobile support */
+  width: 100vw;
+}
+
+.column-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.row-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.relative {
+  position: relative;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.grid-flow {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: var(--base-gap);
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar-width);
+  height: 100%;
+  overflow-y: auto;
+}
+
+.main-content {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+}
+
+nav,
+.nav {
+  display: flex;
+  flex-direction: row;
+  padding: var(--base-padding);
+}
+
+/* Utilities created for Colors Page refactor */
+.page-layout {
+  gap: var(--base-padding);
+  padding: var(--base-padding);
+}
+
+.card {
+  align-items: center;
+  border: 1px solid var(--border-color);
+  border-radius: var(--min-control-radius);
+  padding: calc(var(--base-padding) * 0.5);
+}
+
+.gap-xs {
+  gap: calc(var(--base-gap) * 0.5);
+}
+
+.gap-sm {
+  gap: var(--base-gap);
+}
+
+.gap-md {
+  gap: calc(var(--base-gap) * 2);
+}
+
+.gap-lg {
+  gap: calc(var(--base-gap) * 3);
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-start {
+  justify-content: flex-start !important;
+  text-align: left;
+}
+
+.justify-center {
+  justify-content: center !important;
+  text-align: center;
+}
+
+.justify-end {
+  justify-content: flex-end !important;
+  text-align: right;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.no-margin {
+  margin: 0;
+}
+
+.m-md {
+  margin: var(--base-padding);
+}
+
+.w-fit {
+  width: fit-content;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.shadow {
+  box-shadow: var(--shadow-base);
+}
+
+/* New Utilities for Layout Page */
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.w-300 {
+  min-width: 300px;
+}
+
+.w-200 {
+  min-width: 200px;
+}
+
+.max-w-100 {
+  max-width: 100px;
+}
+
+.max-w-200 {
+  max-width: 200px;
+}
+
+.max-w-300 {
+  max-width: 300px;
+}
+
+.max-w-400 {
+  max-width: 400px;
+}
+
+.w-150 {
+  width: 150px;
+}
+
+.w-min-150 {
+  min-width: 150px;
+}
+
+.w-40 {
+  width: 40px;
+}
+
+.h-40 {
+  height: 40px;
+}
+
+.h-200 {
+  height: 200px;
+}
+
+.p-xs {
+  padding: calc(var(--base-padding) * 0.15) calc(var(--base-padding) * 0.5);
+}
+
+.p-sm {
+  padding: calc(var(--base-padding) * 0.5);
+}
+
+.pt-sm {
+  padding-top: calc(var(--base-padding) * 0.5) !important;
+}
+
+.pb-sm {
+  padding-bottom: calc(var(--base-padding) * 0.5) !important;
+}
+
+.p-base {
+  padding: var(--base-padding) !important;
+}
+
+.p-lg {
+  padding: calc(var(--base-padding) * 1.5) !important;
+}
+
+.p-xl {
+  padding: calc(var(--base-padding) * 2) !important;
+}
+
+.px-base {
+  padding-left: var(--base-padding) !important;
+  padding-right: var(--base-padding) !important;
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.py-xs {
+  padding-top: calc(var(--base-gap) * 0.5);
+  padding-bottom: calc(var(--base-gap) * 0.5);
+}
+
+.py-md {
+  padding-top: calc(var(--base-gap) * 2);
+  padding-bottom: calc(var(--base-gap) * 2);
+}
+
+.pb-lg {
+  padding-bottom: calc(var(--base-gap) * 4) !important;
+}
+
+.pb-md {
+  padding-bottom: calc(var(--base-gap) * 2) !important;
+}
+
+.pt-md {
+  padding-top: calc(var(--base-gap) * 2) !important;
+}
+
+.pl-md {
+  padding-left: calc(var(--base-padding) * 1.5) !important;
+}
+
+.pr-md {
+  padding-right: calc(var(--base-padding) * 1.5) !important;
+}
+
+.px-md {
+  padding-left: calc(var(--base-padding) * 1.5) !important;
+  padding-right: calc(var(--base-padding) * 1.5) !important;
+}
+
+.ml-auto {
+  margin-left: auto !important;
+}
+
+.rotate-180 {
+  transform: rotate(180deg);
+}
+
+.transition-transform {
+  transition: transform 0.2s ease;
+}
+
+.rounded {
+  border-radius: var(--base-radius);
+}
+
+.rounded-sm {
+  border-radius: calc(var(--base-radius) * 0.5);
+}
+
+.rounded-full {
+  border-radius: 1rem !important;
+}
+
+.border-dashed {
+  border: 1px dashed var(--border-color);
+}
+
+.border-solid {
+  border: 1px solid var(--border-color);
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.select-none {
+  user-select: none;
+}
+
+.sticky-top {
+  position: sticky;
+  top: var(--sticky-offset, 0);
+  z-index: 10;
+}
+
+.z-99 {
+  z-index: 99 !important;
+}
+
+/* Position Utilities */
+.fixed {
+  position: fixed;
+}
+
+.inset-auto {
+  inset: auto;
+}
+
+.inset-0 {
+  inset: 0;
+}
+
+.top-md {
+  top: var(--base-padding);
+}
+
+.right-md {
+  right: var(--base-padding);
+}
+
+.bottom-md {
+  bottom: var(--base-padding);
+}
+
+.left-md {
+  left: var(--base-padding);
+}
+
+.top-lg {
+  top: calc(var(--base-padding) * 2);
+}
+
+.right-lg {
+  right: calc(var(--base-padding) * 2);
+}
+
+.bottom-lg {
+  bottom: calc(var(--base-padding) * 2);
+}
+
+.left-lg {
+  left: calc(var(--base-padding) * 2);
+}
+
+/* Popover Reset (opt-in) */
+.popover-base {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+}
+
+.dialog-base {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  display: none;
+}
+
+.dialog-base[open] {
+  display: flex;
+}
+
+.dialog-backdrop::backdrop {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}

package/src/styles/links.css

@@ -0,0 +1,38 @@
+a {
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--accent-color-dimmed); /* Default link color (moved from colors.css if it was there, or explicitly set here) */
+}
+
+a:visited {
+  color: var(--accent-color-dimmed); /* Reset visited color */
+}
+
+a:hover {
+  text-decoration: none;
+  color: var(--accent-color);
+}
+
+.link-flat {
+  color: var(--color-primary-dimmed);
+}
+
+.link-flat:visited {
+  color: var(--color-primary-dimmed);
+}
+
+.link-flat:hover {
+  color: var(--color-primary);
+}
+
+.link-destructive {
+  color: var(--color-destructive-dimmed);
+}
+
+.link-destructive:visited {
+  color: var(--color-destructive-dimmed);
+}
+
+.link-destructive:hover {
+  color: var(--color-destructive);
+}

package/src/styles/main.css

@@ -0,0 +1,16 @@
+@import "./variables.css";
+@import "./typography.css";
+@import "./layout.css";
+@import "./controls.css";
+@import "./buttons.css";
+@import "./menu.css";
+@import "./datepicker.css";
+@import "./timepicker.css";
+@import "./table.css";
+@import "./accordion.css";
+@import "./datepicker.css";
+@import "./links.css";
+@import "./media.css";
+@import "./interactable.css";
+@import "./colors.css";
+@import "./motion.css";

package/src/styles/media.css

@@ -0,0 +1,155 @@
+.icon {
+  background-color: currentColor; /* Inherit text color for masking */
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 1.2rem 1.2rem;
+  mask-size: 1.2rem 1.2rem;
+  height: 1.2rem;
+  width: 1.2rem;
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+
+/* Icon Sizes */
+.icon-xs {
+  -webkit-mask-size: .85rem .85rem;
+  mask-size: .85rem .85rem;
+  height: .85rem;
+  width: .85rem;
+}
+
+.icon-sm {
+  -webkit-mask-size: 1rem 1rem;
+  mask-size: 1rem 1rem;
+  height: 1rem;
+  width: 1rem;
+}
+
+.icon-lg {
+  -webkit-mask-size: 1.5rem 1.5rem;
+  mask-size: 1.5rem 1.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.icon-xl {
+  -webkit-mask-size: 2rem 2rem;
+  mask-size: 2rem 2rem;
+  height: 2rem;
+  width: 2rem;
+}
+
+/* Icon Class Mapping */
+.icon-add-circle { -webkit-mask-image: var(--svg-add-circle); mask-image: var(--svg-add-circle); }
+.icon-add { -webkit-mask-image: var(--svg-add); mask-image: var(--svg-add); }
+.icon-alt { -webkit-mask-image: var(--svg-alt); mask-image: var(--svg-alt); }
+.icon-archive { -webkit-mask-image: var(--svg-archive); mask-image: var(--svg-archive); }
+.icon-at { -webkit-mask-image: var(--svg-at); mask-image: var(--svg-at); }
+.icon-attestation { -webkit-mask-image: var(--svg-attestation); mask-image: var(--svg-attestation); }
+.icon-bell { -webkit-mask-image: var(--svg-bell); mask-image: var(--svg-bell); }
+.icon-bookmark { -webkit-mask-image: var(--svg-bookmark); mask-image: var(--svg-bookmark); }
+.icon-bot { -webkit-mask-image: var(--svg-bot); mask-image: var(--svg-bot); }
+.icon-button { -webkit-mask-image: var(--svg-button); mask-image: var(--svg-button); }
+.icon-calculate { -webkit-mask-image: var(--svg-calculate); mask-image: var(--svg-calculate); }
+.icon-calendar { -webkit-mask-image: var(--svg-calendar); mask-image: var(--svg-calendar); }
+.icon-chart { -webkit-mask-image: var(--svg-chart); mask-image: var(--svg-chart); }
+.icon-check { -webkit-mask-image: var(--svg-check); mask-image: var(--svg-check); }
+.icon-chevron-down { -webkit-mask-image: var(--svg-chevron-down); mask-image: var(--svg-chevron-down); }
+.icon-chevron-left { -webkit-mask-image: var(--svg-chevron-left); mask-image: var(--svg-chevron-left); }
+.icon-chevron-right { -webkit-mask-image: var(--svg-chevron-right); mask-image: var(--svg-chevron-right); }
+.icon-clip { -webkit-mask-image: var(--svg-clip); mask-image: var(--svg-clip); }
+.icon-clock { -webkit-mask-image: var(--svg-clock); mask-image: var(--svg-clock); }
+.icon-close-circle { -webkit-mask-image: var(--svg-close-circle); mask-image: var(--svg-close-circle); }
+.icon-close { -webkit-mask-image: var(--svg-close); mask-image: var(--svg-close); }
+.icon-cloud-download { -webkit-mask-image: var(--svg-cloud-download); mask-image: var(--svg-cloud-download); }
+.icon-cloud-upload { -webkit-mask-image: var(--svg-cloud-upload); mask-image: var(--svg-cloud-upload); }
+.icon-cloud { -webkit-mask-image: var(--svg-cloud); mask-image: var(--svg-cloud); }
+.icon-columns-layout { -webkit-mask-image: var(--svg-columns-layout); mask-image: var(--svg-columns-layout); }
+.icon-cube { -webkit-mask-image: var(--svg-cube); mask-image: var(--svg-cube); }
+.icon-delete { -webkit-mask-image: var(--svg-delete); mask-image: var(--svg-delete); }
+.icon-dollar { -webkit-mask-image: var(--svg-dollar); mask-image: var(--svg-dollar); }
+.icon-download { -webkit-mask-image: var(--svg-download); mask-image: var(--svg-download); }
+.icon-duplicate { -webkit-mask-image: var(--svg-duplicate); mask-image: var(--svg-duplicate); }
+.icon-edit { -webkit-mask-image: var(--svg-edit); mask-image: var(--svg-edit); }
+.icon-exclamation-mark { -webkit-mask-image: var(--svg-exclamation-mark); mask-image: var(--svg-exclamation-mark); }
+.icon-eye-open { -webkit-mask-image: var(--svg-eye-open); mask-image: var(--svg-eye-open); }
+.icon-eye { -webkit-mask-image: var(--svg-eye); mask-image: var(--svg-eye); }
+.icon-file-html { -webkit-mask-image: var(--svg-file-html); mask-image: var(--svg-file-html); }
+.icon-file { -webkit-mask-image: var(--svg-file); mask-image: var(--svg-file); }
+.icon-finger { -webkit-mask-image: var(--svg-finger); mask-image: var(--svg-finger); }
+.icon-flag { -webkit-mask-image: var(--svg-flag); mask-image: var(--svg-flag); }
+.icon-folder { -webkit-mask-image: var(--svg-folder); mask-image: var(--svg-folder); }
+.icon-function { -webkit-mask-image: var(--svg-function); mask-image: var(--svg-function); }
+.icon-gear { -webkit-mask-image: var(--svg-gear); mask-image: var(--svg-gear); }
+.icon-gift { -webkit-mask-image: var(--svg-gift); mask-image: var(--svg-gift); }
+.icon-globe { -webkit-mask-image: var(--svg-globe); mask-image: var(--svg-globe); }
+.icon-grid { -webkit-mask-image: var(--svg-grid); mask-image: var(--svg-grid); }
+.icon-hand { -webkit-mask-image: var(--svg-hand); mask-image: var(--svg-hand); }
+.icon-heart { -webkit-mask-image: var(--svg-heart); mask-image: var(--svg-heart); }
+.icon-home { -webkit-mask-image: var(--svg-home); mask-image: var(--svg-home); }
+.icon-image { -webkit-mask-image: var(--svg-image); mask-image: var(--svg-image); }
+.icon-inbox { -webkit-mask-image: var(--svg-inbox); mask-image: var(--svg-inbox); }
+.icon-info { -webkit-mask-image: var(--svg-info); mask-image: var(--svg-info); }
+.icon-key { -webkit-mask-image: var(--svg-key); mask-image: var(--svg-key); }
+.icon-lamp { -webkit-mask-image: var(--svg-lamp); mask-image: var(--svg-lamp); }
+.icon-link { -webkit-mask-image: var(--svg-link); mask-image: var(--svg-link); }
+.icon-location { -webkit-mask-image: var(--svg-location); mask-image: var(--svg-location); }
+.icon-locker { -webkit-mask-image: var(--svg-locker); mask-image: var(--svg-locker); }
+.icon-login { -webkit-mask-image: var(--svg-login); mask-image: var(--svg-login); }
+.icon-logout { -webkit-mask-image: var(--svg-logout); mask-image: var(--svg-logout); }
+.icon-mail { -webkit-mask-image: var(--svg-mail); mask-image: var(--svg-mail); }
+.icon-map { -webkit-mask-image: var(--svg-map); mask-image: var(--svg-map); }
+.icon-markup { -webkit-mask-image: var(--svg-markup); mask-image: var(--svg-markup); }
+.icon-merge { -webkit-mask-image: var(--svg-merge); mask-image: var(--svg-merge); }
+.icon-more-horizontal { -webkit-mask-image: var(--svg-more-horizontal); mask-image: var(--svg-more-horizontal); }
+.icon-more-vertical { -webkit-mask-image: var(--svg-more-vertical); mask-image: var(--svg-more-vertical); }
+.icon-mouse { -webkit-mask-image: var(--svg-mouse); mask-image: var(--svg-mouse); }
+.icon-palette { -webkit-mask-image: var(--svg-palette); mask-image: var(--svg-palette); }
+.icon-password { -webkit-mask-image: var(--svg-password); mask-image: var(--svg-password); }
+.icon-pencil { -webkit-mask-image: var(--svg-pencil); mask-image: var(--svg-pencil); }
+.icon-people { -webkit-mask-image: var(--svg-people); mask-image: var(--svg-people); }
+.icon-person-add { -webkit-mask-image: var(--svg-person-add); mask-image: var(--svg-person-add); }
+.icon-person-remove { -webkit-mask-image: var(--svg-person-remove); mask-image: var(--svg-person-remove); }
+.icon-person { -webkit-mask-image: var(--svg-person); mask-image: var(--svg-person); }
+.icon-pin { -webkit-mask-image: var(--svg-pin); mask-image: var(--svg-pin); }
+.icon-question-circle { -webkit-mask-image: var(--svg-question-circle); mask-image: var(--svg-question-circle); }
+.icon-remove-circle { -webkit-mask-image: var(--svg-remove-circle); mask-image: var(--svg-remove-circle); }
+.icon-return-arrow { -webkit-mask-image: var(--svg-return-arrow); mask-image: var(--svg-return-arrow); }
+.icon-save { -webkit-mask-image: var(--svg-save); mask-image: var(--svg-save); }
+.icon-search { -webkit-mask-image: var(--svg-search); mask-image: var(--svg-search); }
+.icon-sections { -webkit-mask-image: var(--svg-sections); mask-image: var(--svg-sections); }
+.icon-send { -webkit-mask-image: var(--svg-send); mask-image: var(--svg-send); }
+.icon-share { -webkit-mask-image: var(--svg-share); mask-image: var(--svg-share); }
+.icon-shine { -webkit-mask-image: var(--svg-shine); mask-image: var(--svg-shine); }
+.icon-sliders { -webkit-mask-image: var(--svg-sliders); mask-image: var(--svg-sliders); }
+.icon-star { -webkit-mask-image: var(--svg-star); mask-image: var(--svg-star); }
+.icon-storage { -webkit-mask-image: var(--svg-storage); mask-image: var(--svg-storage); }
+.icon-success-circle { -webkit-mask-image: var(--svg-success-circle); mask-image: var(--svg-success-circle); }
+.icon-swap { -webkit-mask-image: var(--svg-swap); mask-image: var(--svg-swap); }
+.icon-switch { -webkit-mask-image: var(--svg-switch); mask-image: var(--svg-switch); }
+.icon-sync { -webkit-mask-image: var(--svg-sync); mask-image: var(--svg-sync); }
+.icon-table { -webkit-mask-image: var(--svg-table); mask-image: var(--svg-table); }
+.icon-tag { -webkit-mask-image: var(--svg-tag); mask-image: var(--svg-tag); }
+.icon-text { -webkit-mask-image: var(--svg-text); mask-image: var(--svg-text); }
+.icon-terminal { -webkit-mask-image: var(--svg-terminal); mask-image: var(--svg-terminal); }
+.icon-thumb-down { -webkit-mask-image: var(--svg-thumb-down); mask-image: var(--svg-thumb-down); }
+.icon-thumb-up { -webkit-mask-image: var(--svg-thumb-up); mask-image: var(--svg-thumb-up); }
+.icon-timer { -webkit-mask-image: var(--svg-timer); mask-image: var(--svg-timer); }
+.icon-toggle { -webkit-mask-image: var(--svg-toggle); mask-image: var(--svg-toggle); }
+.icon-trash { -webkit-mask-image: var(--svg-trash); mask-image: var(--svg-trash); }
+.icon-update-page { -webkit-mask-image: var(--svg-update-page); mask-image: var(--svg-update-page); }
+.icon-upload { -webkit-mask-image: var(--svg-upload); mask-image: var(--svg-upload); }
+.icon-video { -webkit-mask-image: var(--svg-video); mask-image: var(--svg-video); }
+.icon-wallet { -webkit-mask-image: var(--svg-wallet); mask-image: var(--svg-wallet); }
+.icon-window { -webkit-mask-image: var(--svg-window); mask-image: var(--svg-window); }
+.icon-command { -webkit-mask-image: var(--svg-command); mask-image: var(--svg-command); }
+.icon-draw { -webkit-mask-image: var(--svg-draw); mask-image: var(--svg-draw); }
+.icon-gear { -webkit-mask-image: var(--svg-gear); mask-image: var(--svg-gear); }
+
+.swatch {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--base-radius);
+  border: 1px solid rgba(0,0,0,0.1);
+  flex-shrink: 0;
+}