ps-helix 5.1.2 → 6.0.0

package/src/lib/styles/tokens/sizing.tokens.css

@@ -1,94 +1,94 @@
-/* Design Tokens - Sizing System */
-
-:root {
-  /* Base sizing scale - All measurements in rem for accessibility */
-  --size-0: 0;
-  --size-px: 0.0625rem;     /* 1px */
-  --size-0-5: 0.125rem;     /* 2px */
-  --size-1: 0.25rem;        /* 4px */
-  --size-1-5: 0.375rem;     /* 6px */
-  --size-2: 0.5rem;         /* 8px */
-  --size-2-5: 0.625rem;     /* 10px */
-  --size-3: 0.75rem;        /* 12px */
-  --size-3-5: 0.875rem;     /* 14px */
-  --size-4: 1rem;           /* 16px */
-  --size-4-5: 1.125rem;     /* 18px */
-  --size-5: 1.25rem;        /* 20px */
-  --size-5-5: 1.375rem;     /* 22px */
-  --size-6: 1.5rem;         /* 24px */
-  --size-6-5: 1.625rem;     /* 26px */
-  --size-7: 1.75rem;        /* 28px */
-  --size-8: 2rem;           /* 32px */
-  --size-8-5: 2.125rem;     /* 34px */
-  --size-9: 2.25rem;        /* 36px */
-  --size-10: 2.5rem;        /* 40px */
-  --size-11: 2.75rem;       /* 44px */
-  --size-12: 3rem;          /* 48px */
-  --size-14: 3.5rem;        /* 56px */
-  --size-16: 4rem;          /* 64px */
-  --size-18: 4.5rem;        /* 72px */
-  --size-20: 5rem;          /* 80px */
-  --size-24: 6rem;          /* 96px */
-  --size-28: 7rem;          /* 112px */
-  --size-32: 8rem;          /* 128px */
-  --size-36: 9rem;          /* 144px */
-  --size-40: 10rem;         /* 160px */
-  --size-44: 11rem;         /* 176px */
-  --size-48: 12rem;         /* 192px */
-  --size-52: 13rem;         /* 208px */
-  --size-56: 14rem;         /* 224px */
-  --size-60: 15rem;         /* 240px */
-  --size-64: 16rem;         /* 256px */
-  --size-72: 18rem;         /* 288px */
-  --size-80: 20rem;         /* 320px */
-  --size-96: 24rem;         /* 384px */
-
-  /* Icon sizes */
-  --icon-size-xs: 0.75rem;      /* 12px */
-  --icon-size-sm: 1rem;         /* 16px */
-  --icon-size-md: 1.25rem;      /* 20px */
-  --icon-size-lg: 1.5rem;       /* 24px */
-  --icon-size-xl: 2rem;         /* 32px */
-  --icon-size-2xl: 3rem;        /* 48px */
-
-  /* Border widths - keeping px for subpixel rendering */
-  --border-width-0: 0;
-  --border-width-1: 1px;
-  --border-width-2: 2px;
-  --border-width-4: 4px;
-  --border-width-8: 8px;
-
-  /* Border radius scale */
-  --radius-none: 0;
-  --radius-sm: 0.125rem;        /* 2px */
-  --radius-base: 0.25rem;       /* 4px */
-  --radius-md: 0.375rem;        /* 6px */
-  --radius-lg: 0.5rem;          /* 8px */
-  --radius-xl: 0.75rem;         /* 12px */
-  --radius-2xl: 1rem;           /* 16px */
-  --radius-3xl: 1.5rem;         /* 24px */
-  --radius-full: 9999px;
-
-  /* Container max-widths */
-  --container-xs: 20rem;        /* 320px */
-  --container-sm: 24rem;        /* 384px */
-  --container-md: 28rem;        /* 448px */
-  --container-lg: 32rem;        /* 512px */
-  --container-xl: 36rem;        /* 576px */
-  --container-2xl: 42rem;       /* 672px */
-  --container-3xl: 48rem;       /* 768px */
-  --container-4xl: 56rem;       /* 896px */
-  --container-5xl: 64rem;       /* 1024px */
-  --container-6xl: 72rem;       /* 1152px */
-  --container-7xl: 80rem;       /* 1280px */
-
-  /* Input component heights */
-  --height-input-sm: 2rem;      /* 32px */
-  --height-input-md: 2.5rem;    /* 40px */
-  --height-input-lg: 3rem;      /* 48px */
-
-  /* Scrollbar width compensation */
-  --scrollbar-width: 0;
-
-  /* Breakpoints - See utilities/responsive.utils.css for breakpoint system */
-}
+/* Design Tokens - Sizing System */
+
+:root {
+  /* Base sizing scale - All measurements in rem for accessibility */
+  --size-0: 0;
+  --size-px: 0.0625rem;     /* 1px */
+  --size-0-5: 0.125rem;     /* 2px */
+  --size-1: 0.25rem;        /* 4px */
+  --size-1-5: 0.375rem;     /* 6px */
+  --size-2: 0.5rem;         /* 8px */
+  --size-2-5: 0.625rem;     /* 10px */
+  --size-3: 0.75rem;        /* 12px */
+  --size-3-5: 0.875rem;     /* 14px */
+  --size-4: 1rem;           /* 16px */
+  --size-4-5: 1.125rem;     /* 18px */
+  --size-5: 1.25rem;        /* 20px */
+  --size-5-5: 1.375rem;     /* 22px */
+  --size-6: 1.5rem;         /* 24px */
+  --size-6-5: 1.625rem;     /* 26px */
+  --size-7: 1.75rem;        /* 28px */
+  --size-8: 2rem;           /* 32px */
+  --size-8-5: 2.125rem;     /* 34px */
+  --size-9: 2.25rem;        /* 36px */
+  --size-10: 2.5rem;        /* 40px */
+  --size-11: 2.75rem;       /* 44px */
+  --size-12: 3rem;          /* 48px */
+  --size-14: 3.5rem;        /* 56px */
+  --size-16: 4rem;          /* 64px */
+  --size-18: 4.5rem;        /* 72px */
+  --size-20: 5rem;          /* 80px */
+  --size-24: 6rem;          /* 96px */
+  --size-28: 7rem;          /* 112px */
+  --size-32: 8rem;          /* 128px */
+  --size-36: 9rem;          /* 144px */
+  --size-40: 10rem;         /* 160px */
+  --size-44: 11rem;         /* 176px */
+  --size-48: 12rem;         /* 192px */
+  --size-52: 13rem;         /* 208px */
+  --size-56: 14rem;         /* 224px */
+  --size-60: 15rem;         /* 240px */
+  --size-64: 16rem;         /* 256px */
+  --size-72: 18rem;         /* 288px */
+  --size-80: 20rem;         /* 320px */
+  --size-96: 24rem;         /* 384px */
+
+  /* Icon sizes */
+  --icon-size-xs: 0.75rem;      /* 12px */
+  --icon-size-sm: 1rem;         /* 16px */
+  --icon-size-md: 1.25rem;      /* 20px */
+  --icon-size-lg: 1.5rem;       /* 24px */
+  --icon-size-xl: 2rem;         /* 32px */
+  --icon-size-2xl: 3rem;        /* 48px */
+
+  /* Border widths - keeping px for subpixel rendering */
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+
+  /* Border radius scale */
+  --radius-none: 0;
+  --radius-sm: 0.125rem;        /* 2px */
+  --radius-base: 0.25rem;       /* 4px */
+  --radius-md: 0.375rem;        /* 6px */
+  --radius-lg: 0.5rem;          /* 8px */
+  --radius-xl: 0.75rem;         /* 12px */
+  --radius-2xl: 1rem;           /* 16px */
+  --radius-3xl: 1.5rem;         /* 24px */
+  --radius-full: 9999px;
+
+  /* Container max-widths */
+  --container-xs: 20rem;        /* 320px */
+  --container-sm: 24rem;        /* 384px */
+  --container-md: 28rem;        /* 448px */
+  --container-lg: 32rem;        /* 512px */
+  --container-xl: 36rem;        /* 576px */
+  --container-2xl: 42rem;       /* 672px */
+  --container-3xl: 48rem;       /* 768px */
+  --container-4xl: 56rem;       /* 896px */
+  --container-5xl: 64rem;       /* 1024px */
+  --container-6xl: 72rem;       /* 1152px */
+  --container-7xl: 80rem;       /* 1280px */
+
+  /* Input component heights */
+  --height-input-sm: 2rem;      /* 32px */
+  --height-input-md: 2.5rem;    /* 40px */
+  --height-input-lg: 3rem;      /* 48px */
+
+  /* Scrollbar width compensation */
+  --scrollbar-width: 0;
+
+  /* Breakpoints - See tokens/breakpoints.tokens.css for the responsive scale */
+}

package/src/lib/styles/tokens/spacing.tokens.css

@@ -1,27 +1,27 @@
-/* Design Tokens - Spacing System */
-
-:root {
-  /* Positive spacing scale */
-  --spacing-xxs: 0.125rem;    /* 2px */
-  --spacing-xs: 0.25rem;      /* 4px */
-  --spacing-sm: 0.5rem;       /* 8px */
-  --spacing-md: 1rem;         /* 16px */
-  --spacing-lg: 1.5rem;       /* 24px */
-  --spacing-xl: 2rem;         /* 32px */
-  --spacing-2xl: 3rem;        /* 48px */
-  --spacing-3xl: 4rem;        /* 64px */
-  --spacing-4xl: 5rem;        /* 80px */
-
-  /* Form field semantic spacing */
-  --form-field-gap: var(--spacing-xs);  /* label <-> control <-> message */
-  --form-label-gap: var(--spacing-sm);  /* control <-> inline label (checkbox/radio/switch) */
-
-  /* Negative spacing scale (for negative margins) */
-  --negative-spacing-xxs: -0.125rem;
-  --negative-spacing-xs: -0.25rem;
-  --negative-spacing-sm: -0.5rem;
-  --negative-spacing-md: -1rem;
-  --negative-spacing-lg: -1.5rem;
-  --negative-spacing-xl: -2rem;
-  --negative-spacing-2xl: -3rem;
-}
+/* Design Tokens - Spacing System */
+
+:root {
+  /* Positive spacing scale */
+  --spacing-xxs: 0.125rem;    /* 2px */
+  --spacing-xs: 0.25rem;      /* 4px */
+  --spacing-sm: 0.5rem;       /* 8px */
+  --spacing-md: 1rem;         /* 16px */
+  --spacing-lg: 1.5rem;       /* 24px */
+  --spacing-xl: 2rem;         /* 32px */
+  --spacing-2xl: 3rem;        /* 48px */
+  --spacing-3xl: 4rem;        /* 64px */
+  --spacing-4xl: 5rem;        /* 80px */
+
+  /* Form field semantic spacing */
+  --form-field-gap: var(--spacing-xs);  /* label <-> control <-> message */
+  --form-label-gap: var(--spacing-sm);  /* control <-> inline label (checkbox/radio/switch) */
+
+  /* Negative spacing scale (for negative margins) */
+  --negative-spacing-xxs: -0.125rem;
+  --negative-spacing-xs: -0.25rem;
+  --negative-spacing-sm: -0.5rem;
+  --negative-spacing-md: -1rem;
+  --negative-spacing-lg: -1.5rem;
+  --negative-spacing-xl: -2rem;
+  --negative-spacing-2xl: -3rem;
+}

package/src/lib/styles/utilities/animations.utils.css

@@ -1,157 +1,157 @@
-/* Utility Classes - Animations */
-
-/* Keyframe definitions */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(var(--animation-distance-md));
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInDown {
-  from {
-    opacity: 0;
-    transform: translateY(calc(-1 * var(--animation-distance-md)));
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(calc(-1 * var(--animation-distance-md)));
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(var(--animation-distance-md));
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(calc(-1 * var(--animation-distance-sm)));
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.8;
-    transform: scale(1.05);
-  }
-}
-
-/* Animation utility classes */
-.animate-fade-in {
-  animation: fadeIn var(--animation-duration-default) var(--animation-easing-default);
-}
-
-.animate-fade-in-up {
-  animation: fadeInUp var(--animation-duration-default) var(--animation-easing-default);
-}
-
-.animate-slide-in {
-  animation: slideIn var(--animation-duration-default) var(--animation-easing-default);
-}
-
-.animate-slide-in-down {
-  animation: slideInDown var(--animation-duration-default) var(--animation-easing-default);
-}
-
-.animate-slide-in-left {
-  animation: slideInLeft var(--animation-duration-default) var(--animation-easing-default);
-}
-
-.animate-slide-in-right {
-  animation: slideInRight var(--animation-duration-default) var(--animation-easing-default);
-}
-
-.animate-scale-in {
-  animation: scaleIn var(--animation-duration-fast) var(--animation-easing-smooth);
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-.animate-bounce {
-  animation: bounce var(--animation-duration-slow) var(--animation-easing-default) infinite;
-}
-
-.animate-pulse {
-  animation: pulse var(--animation-duration-slow) var(--animation-easing-default) infinite;
-}
-
-/* Animation control utilities */
-.animate-fast {
-  animation-duration: var(--animation-duration-fast) !important;
-}
-
-.animate-slow {
-  animation-duration: var(--animation-duration-slow) !important;
-}
-
-.animate-smooth {
-  animation-timing-function: var(--animation-easing-smooth) !important;
-}
+/* Utility Classes - Animations */
+
+/* Keyframe definitions */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(var(--animation-distance-md));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--animation-distance-md)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--animation-distance-md)));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(var(--animation-distance-md));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(calc(-1 * var(--animation-distance-sm)));
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+/* Animation utility classes */
+.psh-animate-fade-in {
+  animation: fadeIn var(--animation-duration-default) var(--animation-easing-default);
+}
+
+.psh-animate-fade-in-up {
+  animation: fadeInUp var(--animation-duration-default) var(--animation-easing-default);
+}
+
+.psh-animate-slide-in {
+  animation: slideIn var(--animation-duration-default) var(--animation-easing-default);
+}
+
+.psh-animate-slide-in-down {
+  animation: slideInDown var(--animation-duration-default) var(--animation-easing-default);
+}
+
+.psh-animate-slide-in-left {
+  animation: slideInLeft var(--animation-duration-default) var(--animation-easing-default);
+}
+
+.psh-animate-slide-in-right {
+  animation: slideInRight var(--animation-duration-default) var(--animation-easing-default);
+}
+
+.psh-animate-scale-in {
+  animation: scaleIn var(--animation-duration-fast) var(--animation-easing-smooth);
+}
+
+.psh-animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.psh-animate-bounce {
+  animation: bounce var(--animation-duration-slow) var(--animation-easing-default) infinite;
+}
+
+.psh-animate-pulse {
+  animation: pulse var(--animation-duration-slow) var(--animation-easing-default) infinite;
+}
+
+/* Animation control utilities */
+.psh-animate-fast {
+  animation-duration: var(--animation-duration-fast) !important;
+}
+
+.psh-animate-slow {
+  animation-duration: var(--animation-duration-slow) !important;
+}
+
+.psh-animate-smooth {
+  animation-timing-function: var(--animation-easing-smooth) !important;
+}