@moduix/solid 1.0.0

package/dist/styles/animations.css

@@ -0,0 +1,371 @@
+@keyframes moduix-pulse {
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@keyframes moduix-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes moduix-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes moduix-swap-scale-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
+@keyframes moduix-swap-scale-exit {
+  to {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
+@keyframes moduix-swap-rotate-enter {
+  from {
+    opacity: 0;
+    transform: rotate(-180deg);
+  }
+}
+
+@keyframes moduix-swap-rotate-exit {
+  to {
+    opacity: 0;
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes moduix-swap-flip-enter {
+  from {
+    opacity: 0;
+    transform: rotateY(-180deg);
+  }
+}
+
+@keyframes moduix-swap-flip-exit {
+  to {
+    opacity: 0;
+    transform: rotateY(180deg);
+  }
+}
+
+@keyframes moduix-slide-up {
+  from {
+    transform: translateY(4px);
+    opacity: 0;
+  }
+}
+
+@keyframes moduix-slide-down {
+  from {
+    transform: translateY(-4px);
+    opacity: 0;
+  }
+}
+
+@keyframes moduix-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes moduix-progress-linear-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(300%);
+  }
+}
+
+@keyframes moduix-progress-linear-indeterminate-vertical {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(-300%);
+  }
+}
+
+@keyframes moduix-marquee-x {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(var(--marquee-translate));
+  }
+}
+
+@keyframes moduix-marquee-y {
+  from {
+    transform: translateY(0%);
+  }
+
+  to {
+    transform: translateY(var(--marquee-translate));
+  }
+}
+
+@keyframes moduix-accordion-item-content-open {
+  from {
+    height: 0;
+    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+  }
+  to {
+    height: var(--height);
+    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+  }
+}
+
+@keyframes moduix-accordion-item-content-closed {
+  from {
+    height: var(--height);
+    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+  }
+  to {
+    height: 0;
+    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+  }
+}
+
+@keyframes moduix-accordion-item-content-open-horizontal {
+  from {
+    width: 0;
+    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+  }
+  to {
+    width: var(--width);
+    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+  }
+}
+
+@keyframes moduix-accordion-item-content-closed-horizontal {
+  from {
+    width: var(--width);
+    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+  }
+  to {
+    width: 0;
+    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+  }
+}
+
+@keyframes moduix-collapsible-content-open {
+  from {
+    height: var(--collapsed-height, 0);
+    width: var(--collapsed-width, var(--width));
+    opacity: 0.01;
+  }
+  to {
+    height: var(--height);
+    width: var(--width);
+    opacity: 1;
+  }
+}
+
+@keyframes moduix-collapsible-content-closed {
+  from {
+    height: var(--height);
+    width: var(--width);
+    opacity: 1;
+  }
+  to {
+    height: var(--collapsed-height, 0);
+    width: var(--collapsed-width, var(--width));
+    opacity: 0.01;
+  }
+}
+
+@keyframes moduix-collapsible-content-open-partial {
+  from {
+    height: var(--collapsed-height, 0);
+    width: var(--collapsed-width, var(--width));
+  }
+  to {
+    height: var(--height);
+    width: var(--width);
+  }
+}
+
+@keyframes moduix-collapsible-content-closed-partial {
+  from {
+    height: var(--height);
+    width: var(--width);
+  }
+  to {
+    height: var(--collapsed-height, 0);
+    width: var(--collapsed-width, var(--width));
+  }
+}
+
+@keyframes moduix-menu-content-open {
+  from {
+    opacity: 0;
+    translate: 0 0;
+    transform: scale(var(--moduix-scale-popup));
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+    transform: scale(1);
+  }
+}
+
+@keyframes moduix-menu-content-closed {
+  from {
+    opacity: 1;
+    translate: 0 0;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    translate: 0 0;
+    transform: scale(var(--moduix-scale-popup));
+  }
+}
+
+@keyframes moduix-navigation-menu-content-from-start {
+  from {
+    opacity: 0;
+    translate: -12.5rem 0;
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes moduix-navigation-menu-content-from-end {
+  from {
+    opacity: 0;
+    translate: 12.5rem 0;
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes moduix-navigation-menu-content-to-start {
+  from {
+    opacity: 1;
+    translate: 0 0;
+  }
+
+  to {
+    opacity: 0;
+    translate: -12.5rem 0;
+  }
+}
+
+@keyframes moduix-navigation-menu-content-to-end {
+  from {
+    opacity: 1;
+    translate: 0 0;
+  }
+
+  to {
+    opacity: 0;
+    translate: 12.5rem 0;
+  }
+}
+
+@keyframes moduix-drawer-backdrop-in {
+  from {
+    opacity: 0;
+    backdrop-filter: none;
+  }
+}
+
+@keyframes moduix-drawer-backdrop-out {
+  to {
+    opacity: 0;
+    backdrop-filter: none;
+  }
+}
+
+@keyframes moduix-drawer-content-in-down {
+  from {
+    transform: translate3d(0, calc(100% + max(1rem, env(safe-area-inset-bottom, 0px))), 0);
+  }
+}
+
+@keyframes moduix-drawer-content-out-down {
+  to {
+    transform: translate3d(0, calc(100% + max(1rem, env(safe-area-inset-bottom, 0px))), 0);
+  }
+}
+
+@keyframes moduix-drawer-content-in-up {
+  from {
+    transform: translate3d(0, calc(-100% - max(1rem, env(safe-area-inset-top, 0px))), 0);
+  }
+}
+
+@keyframes moduix-drawer-content-out-up {
+  to {
+    transform: translate3d(0, calc(-100% - max(1rem, env(safe-area-inset-top, 0px)) - 40px), 0);
+  }
+}
+
+@keyframes moduix-drawer-content-in-left {
+  from {
+    transform: translate3d(calc(-100% - max(1rem, env(safe-area-inset-left, 0px))), 0, 0);
+  }
+}
+
+@keyframes moduix-drawer-content-out-left {
+  to {
+    transform: translate3d(calc(-100% - max(1rem, env(safe-area-inset-left, 0px))), 0, 0);
+  }
+}
+
+@keyframes moduix-drawer-content-in-right {
+  from {
+    transform: translate3d(calc(100% + max(1rem, env(safe-area-inset-right, 0px))), 0, 0);
+  }
+}
+
+@keyframes moduix-drawer-content-out-right {
+  to {
+    transform: translate3d(calc(100% + max(1rem, env(safe-area-inset-right, 0px))), 0, 0);
+  }
+}
+
+:root {
+  --moduix-animation-pulse: moduix-pulse 2.5s ease-in-out infinite;
+  --moduix-animation-fade-in: moduix-fade-in var(--moduix-duration-normal) var(--moduix-ease-out);
+  --moduix-animation-fade-out: moduix-fade-out var(--moduix-duration-normal) var(--moduix-ease-in);
+  --moduix-animation-slide-up: moduix-slide-up var(--moduix-duration-normal) var(--moduix-ease-out);
+  --moduix-animation-slide-down: moduix-slide-down var(--moduix-duration-normal)
+    var(--moduix-ease-out);
+  --moduix-animation-spin: moduix-spin 0.75s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --moduix-animation-pulse: none;
+    --moduix-animation-fade-in: none;
+    --moduix-animation-fade-out: none;
+    --moduix-animation-slide-up: none;
+    --moduix-animation-slide-down: none;
+    --moduix-animation-spin: none;
+  }
+}

package/dist/styles/borders.css

@@ -0,0 +1,10 @@
+:root {
+  --moduix-border-width-sm: 1px;
+  --moduix-border-width-md: 2px;
+  --moduix-border-width-lg: 4px;
+
+  --moduix-focus-ring-width: var(--moduix-border-width-md);
+  --moduix-focus-ring-inset-width: var(--moduix-border-width-sm);
+  --moduix-focus-ring-offset: var(--moduix-spacing-0-5);
+  --moduix-focus-ring-inset-offset: calc(var(--moduix-border-width-sm) * -1);
+}

package/dist/styles/colors.css

@@ -0,0 +1,122 @@
+:root {
+  --moduix-background: oklch(0.982 0.003 285);
+  --moduix-foreground: oklch(0.175 0.01 285);
+  --moduix-card: oklch(0.995 0.002 285);
+  --moduix-card-foreground: oklch(0.175 0.01 285);
+  --moduix-popover: oklch(0.995 0.002 285);
+  --moduix-popover-foreground: oklch(0.175 0.01 285);
+  --moduix-primary: oklch(0.235 0.016 285);
+  --moduix-primary-foreground: oklch(0.982 0.003 285);
+  --moduix-secondary: oklch(0.96 0.006 285);
+  --moduix-secondary-foreground: oklch(0.235 0.016 285);
+  --moduix-muted: oklch(0.955 0.006 285);
+  --moduix-muted-foreground: oklch(0.485 0.015 285);
+  --moduix-accent: oklch(0.95 0.01 285);
+  --moduix-accent-foreground: oklch(0.235 0.016 285);
+  --moduix-destructive: oklch(0.565 0.235 22);
+  --moduix-destructive-foreground: var(--moduix-primary-foreground);
+  --moduix-success: oklch(0.627 0.194 149.214);
+  --moduix-warning: oklch(0.795 0.184 86.047);
+  --moduix-border: oklch(0.905 0.008 285);
+  --moduix-input: oklch(0.905 0.008 285);
+  --moduix-ring: oklch(0.62 0.035 285);
+  --moduix-overlay: oklch(0.175 0.014 285 / 0.2);
+  --moduix-overlay-foreground: oklch(0.175 0.014 285 / 0.07);
+  --moduix-chart-1: oklch(0.65 0.18 295);
+  --moduix-chart-2: oklch(0.7 0.14 175);
+  --moduix-chart-3: oklch(0.72 0.16 55);
+  --moduix-chart-4: oklch(0.6 0.2 350);
+  --moduix-chart-5: oklch(0.68 0.13 130);
+  --moduix-sidebar: oklch(0.975 0.005 285);
+  --moduix-sidebar-foreground: oklch(0.175 0.01 285);
+  --moduix-sidebar-primary: oklch(0.235 0.016 285);
+  --moduix-sidebar-primary-foreground: oklch(0.982 0.003 285);
+  --moduix-sidebar-accent: oklch(0.95 0.01 285);
+  --moduix-sidebar-accent-foreground: oklch(0.235 0.016 285);
+  --moduix-sidebar-border: oklch(0.905 0.008 285);
+  --moduix-sidebar-ring: oklch(0.62 0.035 285);
+
+  &[data-moduix-color-scheme='light'],
+  [data-moduix-color-scheme='light'] {
+    color-scheme: light;
+  }
+
+  &[data-moduix-color-scheme='dark'],
+  [data-moduix-color-scheme='dark'] {
+    color-scheme: dark;
+    --moduix-background: oklch(0.155 0.008 285);
+    --moduix-foreground: oklch(0.968 0.003 285);
+    --moduix-card: oklch(0.2 0.011 285);
+    --moduix-card-foreground: oklch(0.968 0.003 285);
+    --moduix-popover: oklch(0.2 0.011 285);
+    --moduix-popover-foreground: oklch(0.968 0.003 285);
+    --moduix-primary: oklch(0.918 0.007 285);
+    --moduix-primary-foreground: oklch(0.2 0.011 285);
+    --moduix-secondary: oklch(0.255 0.012 285);
+    --moduix-secondary-foreground: oklch(0.968 0.003 285);
+    --moduix-muted: oklch(0.255 0.012 285);
+    --moduix-muted-foreground: oklch(0.705 0.016 285);
+    --moduix-accent: oklch(0.29 0.015 285);
+    --moduix-accent-foreground: oklch(0.968 0.003 285);
+    --moduix-destructive: oklch(0.69 0.185 18);
+    --moduix-destructive-foreground: var(--moduix-primary-foreground);
+    --moduix-success: oklch(0.627 0.194 149.214);
+    --moduix-warning: oklch(0.795 0.184 86.047);
+    --moduix-border: oklch(1 0.004 285 / 13%);
+    --moduix-input: oklch(1 0.004 285 / 17%);
+    --moduix-ring: oklch(0.585 0.038 285);
+    --moduix-overlay: oklch(0.105 0.012 285 / 0.74);
+    --moduix-overlay-foreground: oklch(0.968 0.003 285 / 0.09);
+    --moduix-chart-1: oklch(0.72 0.17 295);
+    --moduix-chart-2: oklch(0.76 0.13 175);
+    --moduix-chart-3: oklch(0.78 0.15 55);
+    --moduix-chart-4: oklch(0.67 0.19 350);
+    --moduix-chart-5: oklch(0.74 0.12 130);
+    --moduix-sidebar: oklch(0.2 0.011 285);
+    --moduix-sidebar-foreground: oklch(0.968 0.003 285);
+    --moduix-sidebar-primary: oklch(0.72 0.17 295);
+    --moduix-sidebar-primary-foreground: oklch(0.155 0.008 285);
+    --moduix-sidebar-accent: oklch(0.29 0.015 285);
+    --moduix-sidebar-accent-foreground: oklch(0.968 0.003 285);
+    --moduix-sidebar-border: oklch(1 0.004 285 / 13%);
+    --moduix-sidebar-ring: oklch(0.585 0.038 285);
+  }
+
+  /* Semantic */
+  --moduix-color-background: var(--moduix-background);
+  --moduix-color-foreground: var(--moduix-foreground);
+  --moduix-color-card: var(--moduix-card);
+  --moduix-color-card-foreground: var(--moduix-card-foreground);
+  --moduix-color-popover: var(--moduix-popover);
+  --moduix-color-popover-foreground: var(--moduix-popover-foreground);
+  --moduix-color-primary: var(--moduix-primary);
+  --moduix-color-primary-foreground: var(--moduix-primary-foreground);
+  --moduix-color-secondary: var(--moduix-secondary);
+  --moduix-color-secondary-foreground: var(--moduix-secondary-foreground);
+  --moduix-color-muted: var(--moduix-muted);
+  --moduix-color-muted-foreground: var(--moduix-muted-foreground);
+  --moduix-color-accent: var(--moduix-accent);
+  --moduix-color-accent-foreground: var(--moduix-accent-foreground);
+  --moduix-color-destructive: var(--moduix-destructive);
+  --moduix-color-destructive-foreground: var(--moduix-destructive-foreground);
+  --moduix-color-success: var(--moduix-success);
+  --moduix-color-warning: var(--moduix-warning);
+  --moduix-color-border: var(--moduix-border);
+  --moduix-color-input: var(--moduix-input);
+  --moduix-color-ring: var(--moduix-ring);
+  --moduix-color-overlay: var(--moduix-overlay);
+  --moduix-color-overlay-foreground: var(--moduix-overlay-foreground);
+  --moduix-color-chart-1: var(--moduix-chart-1);
+  --moduix-color-chart-2: var(--moduix-chart-2);
+  --moduix-color-chart-3: var(--moduix-chart-3);
+  --moduix-color-chart-4: var(--moduix-chart-4);
+  --moduix-color-chart-5: var(--moduix-chart-5);
+  --moduix-color-sidebar: var(--moduix-sidebar);
+  --moduix-color-sidebar-foreground: var(--moduix-sidebar-foreground);
+  --moduix-color-sidebar-primary: var(--moduix-sidebar-primary);
+  --moduix-color-sidebar-primary-foreground: var(--moduix-sidebar-primary-foreground);
+  --moduix-color-sidebar-accent: var(--moduix-sidebar-accent);
+  --moduix-color-sidebar-accent-foreground: var(--moduix-sidebar-accent-foreground);
+  --moduix-color-sidebar-border: var(--moduix-sidebar-border);
+  --moduix-color-sidebar-ring: var(--moduix-sidebar-ring);
+}

package/dist/styles/opacity.css

@@ -0,0 +1,5 @@
+:root {
+  --moduix-opacity-disabled: 0.5;
+  --moduix-opacity-loading: 0.85;
+  --moduix-opacity-hover: 0.9;
+}

package/dist/styles/radius.css

@@ -0,0 +1,11 @@
+:root {
+  --moduix-radius: 0.625rem;
+  --moduix-radius-none: 0;
+
+  --moduix-radius-xs: calc(var(--moduix-radius) * 0.4);
+  --moduix-radius-sm: calc(var(--moduix-radius) * 0.6);
+  --moduix-radius-md: calc(var(--moduix-radius) * 0.8);
+  --moduix-radius-lg: var(--moduix-radius);
+  --moduix-radius-xl: calc(var(--moduix-radius) * 1.2);
+  --moduix-radius-full: 9999px;
+}