vanduo-framework 1.1.8-docs-update

package/css/utilities/table.css

@@ -0,0 +1,381 @@
+/**
+ * Vanduo Framework - Table Utilities
+ * Table styling utilities
+ */
+
+:root {
+  /* Table Colors */
+  --table-bg: var(--color-white);
+  --table-border-color: var(--border-color);
+  --table-striped-bg: var(--bg-secondary);
+  --table-hover-bg: rgba(0, 0, 0, 0.075);
+  --table-active-bg: var(--color-primary-alpha-10);
+
+  /* Table Spacing (Fibonacci) */
+  --table-padding-y: 0.5rem;
+  /* 8px  - fib */
+  --table-padding-x: 0.8125rem;
+  /* 13px - fib (13/8 ~ phi) */
+  --table-padding-y-sm: 0.3125rem;
+  /* 5px  - fib */
+  --table-padding-x-sm: 0.5rem;
+  /* 8px  - fib (8/5 ~ phi) */
+}
+
+/* Base Table */
+.vd-table,
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+  background-color: var(--table-bg);
+  border-collapse: collapse;
+}
+
+.vd-table th,
+.vd-table td,
+.table th,
+.table td {
+  padding: var(--table-padding-y) var(--table-padding-x);
+  vertical-align: top;
+  border-top: 1px solid var(--table-border-color);
+}
+
+.vd-table thead th,
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid var(--table-border-color);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.vd-table tbody+tbody,
+.table tbody+tbody {
+  border-top: 2px solid var(--table-border-color);
+}
+
+/* Table Variants */
+.vd-table-bordered,
+.table-bordered {
+  border: 1px solid var(--table-border-color);
+}
+
+.vd-table-bordered th,
+.vd-table-bordered td,
+.table-bordered th,
+.table-bordered td {
+  border: 1px solid var(--table-border-color);
+}
+
+.vd-table-bordered thead th,
+.vd-table-bordered thead td,
+.table-bordered thead th,
+.table-bordered thead td {
+  border-bottom-width: 2px;
+}
+
+.vd-table-borderless th,
+.vd-table-borderless td,
+.vd-table-borderless thead th,
+.vd-table-borderless tbody+tbody,
+.table-borderless th,
+.table-borderless td,
+.table-borderless thead th,
+.table-borderless tbody+tbody {
+  border: 0;
+}
+
+.vd-table-striped tbody tr:nth-of-type(odd),
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: var(--table-striped-bg);
+}
+
+.vd-table-hover tbody tr:hover,
+.table-hover tbody tr:hover {
+  background-color: var(--table-hover-bg);
+}
+
+.vd-table-sm th,
+.vd-table-sm td,
+.table-sm th,
+.table-sm td {
+  padding: var(--table-padding-y-sm) var(--table-padding-x-sm);
+}
+
+/* Table Cell States */
+.vd-table-active,
+.vd-table-active>th,
+.vd-table-active>td,
+.table-active,
+.table-active>th,
+.table-active>td {
+  background-color: var(--table-active-bg);
+}
+
+.vd-table-primary,
+.vd-table-primary>th,
+.vd-table-primary>td,
+.table-primary,
+.table-primary>th,
+.table-primary>td {
+  color: var(--color-white);
+  background-color: var(--color-primary);
+}
+
+.vd-table-secondary,
+.vd-table-secondary>th,
+.vd-table-secondary>td,
+.table-secondary,
+.table-secondary>th,
+.table-secondary>td {
+  color: var(--color-white);
+  background-color: var(--color-secondary);
+}
+
+.vd-table-success,
+.vd-table-success>th,
+.vd-table-success>td,
+.table-success,
+.table-success>th,
+.table-success>td {
+  color: var(--color-white);
+  background-color: var(--color-success);
+}
+
+.vd-table-warning,
+.vd-table-warning>th,
+.vd-table-warning>td,
+.table-warning,
+.table-warning>th,
+.table-warning>td {
+  color: var(--color-gray-900);
+  background-color: var(--color-warning);
+}
+
+.vd-table-error,
+.vd-table-error>th,
+.vd-table-error>td,
+.table-error,
+.table-error>th,
+.table-error>td {
+  color: var(--color-white);
+  background-color: var(--color-error);
+}
+
+.vd-table-info,
+.vd-table-info>th,
+.vd-table-info>td,
+.table-info,
+.table-info>th,
+.table-info>td {
+  color: var(--color-white);
+  background-color: var(--color-info);
+}
+
+/* Table Sections */
+.vd-table-header,
+.table-header,
+thead {
+  background-color: var(--bg-secondary);
+}
+
+.vd-table-header th,
+.table-header th,
+thead th {
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  font-size: var(--font-size-sm);
+  letter-spacing: 0.05em;
+}
+
+.table-body,
+tbody {
+  /* Default styling */
+}
+
+.vd-table-footer,
+.table-footer,
+tfoot {
+  background-color: var(--bg-secondary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Responsive Table Wrapper */
+.vd-table-responsive,
+.table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.vd-table-responsive>.vd-table,
+.vd-table-responsive>.table,
+.table-responsive>.table {
+  margin-bottom: 0;
+}
+
+/* Responsive Breakpoints */
+@media (max-width: 575.98px) {
+  .vd-table-responsive-sm,
+  .table-responsive-sm {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .vd-table-responsive-sm>.vd-table,
+  .vd-table-responsive-sm>.table,
+  .table-responsive-sm>.table {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .vd-table-responsive-md,
+  .table-responsive-md {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .vd-table-responsive-md>.vd-table,
+  .vd-table-responsive-md>.table,
+  .table-responsive-md>.table {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .vd-table-responsive-lg,
+  .table-responsive-lg {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .vd-table-responsive-lg>.vd-table,
+  .vd-table-responsive-lg>.table,
+  .table-responsive-lg>.table {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .vd-table-responsive-xl,
+  .table-responsive-xl {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .vd-table-responsive-xl>.vd-table,
+  .vd-table-responsive-xl>.table,
+  .table-responsive-xl>.table {
+    margin-bottom: 0;
+  }
+}
+
+/* Dark Table Variant */
+.vd-table-dark,
+.table-dark {
+  color: var(--color-white);
+  background-color: var(--color-gray-800);
+}
+
+.vd-table-dark th,
+.vd-table-dark td,
+.vd-table-dark thead th,
+.table-dark th,
+.table-dark td,
+.table-dark thead th {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.vd-table-dark.vd-table-striped tbody tr:nth-of-type(odd),
+.vd-table-dark.table-striped tbody tr:nth-of-type(odd),
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.vd-table-dark.vd-table-hover tbody tr:hover,
+.vd-table-dark.table-hover tbody tr:hover,
+.table-dark.table-hover tbody tr:hover {
+  background-color: rgba(255, 255, 255, 0.075);
+}
+
+/* Dark Mode Table Overrides */
+[data-theme="dark"] .vd-table,
+[data-theme="dark"] .table {
+  --table-bg: var(--bg-primary);
+  --table-border-color: var(--border-color);
+  --table-striped-bg: var(--bg-secondary);
+  --table-hover-bg: rgba(255, 255, 255, 0.05);
+
+  background-color: var(--table-bg);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .vd-table th,
+[data-theme="dark"] .vd-table td,
+[data-theme="dark"] .table th,
+[data-theme="dark"] .table td {
+  border-color: var(--table-border-color);
+}
+
+[data-theme="dark"] .vd-table thead th,
+[data-theme="dark"] .table thead th {
+  border-color: var(--table-border-color);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .vd-table-striped tbody tr:nth-of-type(odd),
+[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
+  background-color: var(--table-striped-bg);
+}
+
+[data-theme="dark"] .vd-table thead,
+[data-theme="dark"] thead {
+  background-color: var(--bg-secondary);
+}
+
+/* Dark mode support for system preference */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .vd-table,
+  :root:not([data-theme]) .table {
+    --table-bg: var(--bg-primary);
+    --table-border-color: var(--border-color);
+    --table-striped-bg: var(--bg-secondary);
+    --table-hover-bg: rgba(255, 255, 255, 0.05);
+
+    background-color: var(--table-bg);
+    color: var(--text-primary);
+  }
+
+  :root:not([data-theme]) .vd-table th,
+  :root:not([data-theme]) .vd-table td,
+  :root:not([data-theme]) .table th,
+  :root:not([data-theme]) .table td {
+    border-color: var(--table-border-color);
+  }
+
+  :root:not([data-theme]) .vd-table thead th,
+  :root:not([data-theme]) .table thead th {
+    border-color: var(--table-border-color);
+    color: var(--text-primary);
+  }
+
+  :root:not([data-theme]) .vd-table-striped tbody tr:nth-of-type(odd),
+  :root:not([data-theme]) .table-striped tbody tr:nth-of-type(odd) {
+    background-color: var(--table-striped-bg);
+  }
+
+  :root:not([data-theme]) .vd-table thead,
+  :root:not([data-theme]) thead {
+    background-color: var(--bg-secondary);
+  }
+}

package/css/utilities/transforms.css

@@ -0,0 +1,71 @@
+/**
+ * Vanduo Framework - Transform Utilities
+ * Scale, rotate, and translate utilities
+ */
+
+/* Scale Utilities */
+.scale-0 { transform: scale(0); }
+.scale-50 { transform: scale(0.5); }
+.scale-75 { transform: scale(0.75); }
+.scale-90 { transform: scale(0.9); }
+.scale-95 { transform: scale(0.95); }
+.scale-100 { transform: scale(1); }
+.scale-105 { transform: scale(1.05); }
+.scale-110 { transform: scale(1.1); }
+.scale-125 { transform: scale(1.25); }
+.scale-150 { transform: scale(1.5); }
+
+/* Rotate Utilities */
+.rotate-0 { transform: rotate(0deg); }
+.rotate-45 { transform: rotate(45deg); }
+.rotate-90 { transform: rotate(90deg); }
+.rotate-180 { transform: rotate(180deg); }
+.-rotate-45 { transform: rotate(-45deg); }
+.-rotate-90 { transform: rotate(-90deg); }
+.-rotate-180 { transform: rotate(-180deg); }
+
+/* Translate Utilities (Fibonacci-based: 1, 2, 3, 5, 8, 13, 21px) */
+.translate-x-0 { transform: translateX(0); }
+.translate-x-1 { transform: translateX(1px); }
+.translate-x-2 { transform: translateX(2px); }
+.translate-x-3 { transform: translateX(3px); }
+.translate-x-5 { transform: translateX(5px); }
+.translate-x-8 { transform: translateX(8px); }
+.-translate-x-1 { transform: translateX(-1px); }
+.-translate-x-2 { transform: translateX(-2px); }
+.-translate-x-3 { transform: translateX(-3px); }
+.-translate-x-5 { transform: translateX(-5px); }
+.-translate-x-8 { transform: translateX(-8px); }
+
+.translate-y-0 { transform: translateY(0); }
+.translate-y-1 { transform: translateY(1px); }
+.translate-y-2 { transform: translateY(2px); }
+.translate-y-3 { transform: translateY(3px); }
+.translate-y-5 { transform: translateY(5px); }
+.translate-y-8 { transform: translateY(8px); }
+.-translate-y-1 { transform: translateY(-1px); }
+.-translate-y-2 { transform: translateY(-2px); }
+.-translate-y-3 { transform: translateY(-3px); }
+.-translate-y-5 { transform: translateY(-5px); }
+.-translate-y-8 { transform: translateY(-8px); }
+
+/* Translate percentage-based */
+.translate-x-full { transform: translateX(100%); }
+.-translate-x-full { transform: translateX(-100%); }
+.translate-x-half { transform: translateX(50%); }
+.-translate-x-half { transform: translateX(-50%); }
+.translate-y-full { transform: translateY(100%); }
+.-translate-y-full { transform: translateY(-100%); }
+.translate-y-half { transform: translateY(50%); }
+.-translate-y-half { transform: translateY(-50%); }
+
+/* Transform Origin */
+.origin-center { transform-origin: center; }
+.origin-top { transform-origin: top; }
+.origin-top-right { transform-origin: top right; }
+.origin-right { transform-origin: right; }
+.origin-bottom-right { transform-origin: bottom right; }
+.origin-bottom { transform-origin: bottom; }
+.origin-bottom-left { transform-origin: bottom left; }
+.origin-left { transform-origin: left; }
+.origin-top-left { transform-origin: top left; }

package/css/utilities/transitions.css

@@ -0,0 +1,87 @@
+/**
+ * Vanduo Framework - Transitions
+ * Transition utilities for animations and effects
+ */
+
+:root {
+  /* Transition Durations */
+  --transition-duration-fast: 150ms;
+  --transition-duration-base: 200ms;
+  --transition-duration-slow: 300ms;
+  --transition-duration-slower: 400ms;
+  --transition-duration-slowest: 500ms;
+  
+  /* Transition Timing Functions */
+  --transition-ease: ease;
+  --transition-ease-in: ease-in;
+  --transition-ease-out: ease-out;
+  --transition-ease-in-out: ease-in-out;
+  --transition-linear: linear;
+  
+  /* Common Transitions */
+  --transition-base: all var(--transition-duration-base) var(--transition-ease);
+  --transition-fast: all var(--transition-duration-fast) var(--transition-ease);
+  --transition-slow: all var(--transition-duration-slow) var(--transition-ease);
+  --transition-color: color var(--transition-duration-base) var(--transition-ease);
+  --transition-bg: background-color var(--transition-duration-base) var(--transition-ease);
+  --transition-border: border-color var(--transition-duration-base) var(--transition-ease);
+  --transition-opacity: opacity var(--transition-duration-base) var(--transition-ease);
+  --transition-transform: transform var(--transition-duration-base) var(--transition-ease);
+  --transition-shadow: box-shadow var(--transition-duration-base) var(--transition-ease);
+}
+
+/* Transition Duration Utilities */
+.vd-transition-none { transition: none; }
+.vd-transition-fast { transition-duration: var(--transition-duration-fast); }
+.vd-transition-base { transition-duration: var(--transition-duration-base); }
+.vd-transition-slow { transition-duration: var(--transition-duration-slow); }
+.vd-transition-slower { transition-duration: var(--transition-duration-slower); }
+.vd-transition-slowest { transition-duration: var(--transition-duration-slowest); }
+
+/* Transition Timing Function Utilities */
+.vd-transition-ease { transition-timing-function: var(--transition-ease); }
+.vd-transition-ease-in { transition-timing-function: var(--transition-ease-in); }
+.vd-transition-ease-out { transition-timing-function: var(--transition-ease-out); }
+.vd-transition-ease-in-out { transition-timing-function: var(--transition-ease-in-out); }
+.vd-transition-linear { transition-timing-function: var(--transition-linear); }
+
+/* Transition Property Utilities */
+.vd-transition-all { transition-property: all; }
+.vd-transition-colors { transition-property: color, background-color, border-color; }
+.vd-transition-opacity { transition-property: opacity; }
+.vd-transition-transform { transition-property: transform; }
+.vd-transition-shadow { transition-property: box-shadow; }
+
+/* Combined Transition Utilities */
+.vd-transition { transition: var(--transition-base); }
+.vd-transition-fast { transition: var(--transition-fast); }
+.vd-transition-slow { transition: var(--transition-slow); }
+.vd-transition-color { transition: var(--transition-color); }
+.vd-transition-bg { transition: var(--transition-bg); }
+.vd-transition-border { transition: var(--transition-border); }
+.vd-transition-opacity { transition: var(--transition-opacity); }
+.vd-transition-transform { transition: var(--transition-transform); }
+.vd-transition-shadow { transition: var(--transition-shadow); }
+
+/* Delay Utilities */
+.vd-transition-delay-none { transition-delay: 0ms; }
+.vd-transition-delay-75 { transition-delay: 75ms; }
+.vd-transition-delay-100 { transition-delay: 100ms; }
+.vd-transition-delay-150 { transition-delay: 150ms; }
+.vd-transition-delay-200 { transition-delay: 200ms; }
+.vd-transition-delay-300 { transition-delay: 300ms; }
+.vd-transition-delay-500 { transition-delay: 500ms; }
+.vd-transition-delay-700 { transition-delay: 700ms; }
+.vd-transition-delay-1000 { transition-delay: 1000ms; }
+
+/* Reduced Motion - Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/css/vanduo.css

@@ -0,0 +1,80 @@
+/**
+ * Vanduo Framework - Main Stylesheet
+ * Import all framework modules
+ */
+
+/* CSS Reset - Must be first */
+@import url('core/reset.css');
+
+/* Core Foundation */
+@import url('core/colors.css');
+@import url('core/fonts.css');
+@import url('core/typography.css');
+@import url('core/tokens.css');
+@import url('core/vd-aliases.css');
+@import url('core/grid.css');
+@import url('core/helpers.css');
+
+/* Icons - All Phosphor Weights */
+@import url('icons/icons-all.css');
+
+/* Utilities - Phase 2 */
+@import url('utilities/shadow.css');
+
+/* Utilities - Phase 4 */
+@import url('utilities/transitions.css');
+@import url('utilities/transforms.css');
+
+/* Components - Phase 2 */
+@import url('components/buttons.css');
+@import url('components/forms.css');
+@import url('components/cards.css');
+
+/* Components - Phase 3 */
+@import url('components/navbar.css');
+@import url('components/footer.css');
+@import url('components/breadcrumbs.css');
+
+/* Components - Phase 5 */
+@import url('components/tooltips.css');
+@import url('components/collapsible.css');
+@import url('components/dropdown.css');
+@import url('components/modals.css');
+
+/* Components - Phase 6 */
+@import url('components/badges.css');
+@import url('components/collections.css');
+@import url('components/pagination.css');
+@import url('components/sidenav.css');
+
+/* Components - Phase 7 */
+@import url('components/preloader.css');
+
+/* Components - Phase 8 (New) */
+@import url('components/alerts.css');
+@import url('components/chips.css');
+@import url('components/avatar.css');
+@import url('components/skeleton.css');
+@import url('components/tabs.css');
+@import url('components/toast.css');
+@import url('components/code-snippet.css');
+@import url('components/progress.css');
+@import url('components/spinner.css');
+@import url('components/button-group.css');
+@import url('components/theme-customizer.css');
+@import url('components/image-box.css');
+@import url('components/doc-tabs.css');
+@import url('components/doc-search.css');
+
+/* Utilities - Phase 7 */
+@import url('utilities/media.css');
+@import url('utilities/table.css');
+
+/* Effects - Phase 7 */
+@import url('effects/parallax.css');
+
+/* Components - Phase 9 (New) */
+@import url('components/draggable.css');
+
+/* Print Styles */
+@import url('utilities/print.css');

package/dist/build-info.json

@@ -0,0 +1,6 @@
+{
+  "version": "1.1.8-docs-update",
+  "builtAt": "2026-02-22T09:56:37.796Z",
+  "commit": "16b888f",
+  "mode": "production"
+}