@infonomic/uikit 6.3.1 → 6.4.0

package/src/loaders/loaders.stories.tsx

@@ -12,18 +12,18 @@ interface LoaderProps {
 
 function Loader({ loader, label }: LoaderProps): React.JSX.Element {
   return (
-    <div className="flex flex-col items-center">
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
       {loader}
-      <span className="text-sm text-gray-500">{label}</span>
+      <span style={{ fontSize: '0.875rem', color: 'var(--muted)' }}>{label}</span>
     </div>
   )
 }
 
 const LoaderDemo = (): React.JSX.Element => (
-  <div className="loader-demo grid grid-cols-4 gap-5">
+  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1.25rem' }}>
     <Loader loader={<LoaderRing size={48} />} label="Ring" />
     <Loader loader={<LoaderEllipsis size={48} />} label="Ellipsis" />
-    <Loader loader={<LoaderSpinner />} label="Spinner" />
+    <Loader loader={<LoaderSpinner size={48} />} label="Spinner" />
   </div>
 )
 
@@ -35,10 +35,121 @@ export default {
 
 export const Default = (): React.JSX.Element => {
   return (
-    <div className="mb-6">
-      <div className="max-w-[700px]">
+    <div style={{ marginBottom: '1.5rem' }}>
+      <div style={{ maxWidth: 700 }}>
         <LoaderDemo />
       </div>
     </div>
   )
 }
+
+const sizes: (number | string)[] = [24, 36, 48, 64, 80]
+
+export const Sizes = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '800px', margin: '1.5rem auto' }}>
+      <div style={{ maxWidth: '800px', display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
+        <div>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ring</h3>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
+            {sizes.map((size) => (
+              <Loader key={String(size)} loader={<LoaderRing size={size} />} label={`${size}${typeof size === 'number' ? 'px' : ''}`} />
+            ))}
+          </div>
+        </div>
+        <div>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ellipsis</h3>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
+            {sizes.map((size) => (
+              <Loader key={String(size)} loader={<LoaderEllipsis size={size} />} label={`${size}${typeof size === 'number' ? 'px' : ''}`} />
+            ))}
+          </div>
+        </div>
+        <div>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Spinner</h3>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
+            {sizes.map((size) => (
+              <Loader key={String(size)} loader={<LoaderSpinner size={size} />} label={`${size}${typeof size === 'number' ? 'px' : ''}`} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const colors = [
+  { value: 'var(--theme-500)', label: 'Theme' },
+  { value: '#e53e3e', label: '#e53e3e' },
+  { value: '#38a169', label: '#38a169' },
+  { value: '#3182ce', label: '#3182ce' },
+  { value: '#d69e2e', label: '#d69e2e' },
+]
+
+export const Colors = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '800px', margin: '1.5rem auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
+        <div>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ring</h3>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
+            {colors.map(({ value, label }) => (
+              <Loader key={label} loader={<LoaderRing size={48} color={value} />} label={label} />
+            ))}
+          </div>
+        </div>
+        <div>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ellipsis</h3>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
+            {colors.map(({ value, label }) => (
+              <Loader key={label} loader={<LoaderEllipsis size={48} color={value} />} label={label} />
+            ))}
+          </div>
+        </div>
+        <div>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Spinner</h3>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
+            {colors.map(({ value, label }) => (
+              <Loader key={label} loader={<LoaderSpinner size={48} color={value} />} label={label} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const stringSizes: (number | string)[] = ['1.5rem', '2rem', '3rem', '4rem']
+
+export const StringSizes = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '800px', margin: '1.5rem auto' }}>
+      <div style={{ maxWidth: '800px', display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
+        <div>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ring (rem units)</h3>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
+            {stringSizes.map((size) => (
+              <Loader key={String(size)} loader={<LoaderRing size={size} />} label={String(size)} />
+            ))}
+          </div>
+        </div>
+        <div>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ellipsis (rem units)</h3>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
+            {stringSizes.map((size) => (
+              <Loader key={String(size)} loader={<LoaderEllipsis size={size} />} label={String(size)} />
+            ))}
+          </div>
+        </div>
+        <div>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Spinner (rem units)</h3>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
+            {stringSizes.map((size) => (
+              <Loader key={String(size)} loader={<LoaderSpinner size={size} />} label={String(size)} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/loaders/ring.module.css

@@ -0,0 +1,55 @@
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
+
+@layer infonomic-components {
+  .loader-ring,
+  :global(.infonomic-loader-ring) {
+    --_size: var(--loader-ring-size, 60px);
+    --_color: var(--loader-ring-color, var(--loader-color, currentColor));
+    display: inline-block;
+    position: relative;
+    width: var(--_size);
+    height: var(--_size);
+  }
+
+  .loader-ring-arc,
+  :global(.infonomic-loader-ring-arc) {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: calc(var(--_size) * 0.8);
+    height: calc(var(--_size) * 0.8);
+    margin: calc(var(--_size) * 0.1);
+    border-width: calc(var(--_size) * 0.1);
+    border-radius: 50%;
+    animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-style: solid;
+    border-color: var(--_color) transparent transparent transparent;
+  }
+
+  .loader-ring-arc:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+
+  .loader-ring-arc:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+
+  .loader-ring-arc:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+
+  @keyframes loader-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/loaders/ring.tsx

@@ -1,31 +1,43 @@
 // https://github.com/JoshK2/react-spinners-css
 import type React from 'react'
 
-import classNames from 'classnames'
+import cx from 'classnames'
 
 import type { LoaderProps } from './@types/index.js'
+import styles from './ring.module.css'
+
+export function LoaderRing({
+  color,
+  size,
+  className,
+  style,
+  ...rest
+}: LoaderProps): React.JSX.Element {
+  const ringStyle: React.CSSProperties & Record<string, string | number | undefined> = {
+    ...style,
+  }
+  if (size != null) {
+    ringStyle['--loader-ring-size'] = typeof size === 'number' ? `${size}px` : size
+  }
+  if (color) {
+    ringStyle['--loader-ring-color'] = color
+  }
 
-export function LoaderRing({ color, size = 60, className, style }: LoaderProps): React.JSX.Element {
   const circles = [...Array(4)].map((_, index) => {
     return (
       <div
         // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
         key={index}
-        style={{
-          borderColor: `${color || 'var(--loader-color)'} transparent transparent transparent`,
-          width: size * 0.8,
-          height: size * 0.8,
-          margin: size * 0.1,
-          borderWidth: size * 0.1,
-        }}
+        className={cx('infonomic-loader-ring-arc', styles['loader-ring-arc'])}
       />
     )
   })
 
   return (
     <div
-      className={classNames('lds-ring', className)}
-      style={{ width: size, height: size, ...style }}
+      className={cx('infonomic-loader-ring', styles['loader-ring'], className)}
+      style={ringStyle}
+      {...rest}
     >
       {circles}
     </div>

package/src/loaders/spinner.module.css

@@ -0,0 +1,106 @@
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
+
+@layer infonomic-components {
+  .loader-spinner,
+  :global(.infonomic-loader-spinner) {
+    --_size: var(--loader-spinner-size, 56px);
+    --_color: var(--loader-spinner-color, var(--loader-color, currentColor));
+    display: inline-block;
+    position: relative;
+    width: var(--_size);
+    height: var(--_size);
+  }
+
+  .loader-spinner-blade,
+  :global(.infonomic-loader-spinner-blade) {
+    transform-origin: calc(var(--_size) * 0.5) calc(var(--_size) * 0.5714);
+    animation: loader-spinner 1.2s linear infinite;
+  }
+
+  .loader-spinner-blade-inner,
+  :global(.infonomic-loader-spinner-blade-inner) {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: calc(var(--_size) * 0.4464);
+    width: calc(var(--_size) * 0.0893);
+    height: calc(var(--_size) * 0.25);
+    border-radius: 20%;
+    background: var(--_color);
+  }
+
+  .loader-spinner-blade:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
+  }
+
+  .loader-spinner-blade:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+  }
+
+  .loader-spinner-blade:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+  }
+
+  .loader-spinner-blade:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+  }
+
+  .loader-spinner-blade:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+  }
+
+  .loader-spinner-blade:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+  }
+
+  .loader-spinner-blade:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+  }
+
+  .loader-spinner-blade:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+  }
+
+  .loader-spinner-blade:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+  }
+
+  .loader-spinner-blade:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+  }
+
+  .loader-spinner-blade:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
+  }
+
+  .loader-spinner-blade:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+  }
+
+  @keyframes loader-spinner {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/src/loaders/spinner.tsx

@@ -1,27 +1,51 @@
 // https://github.com/JoshK2/react-spinners-css
 import type React from 'react'
 
-import classNames from 'classnames'
+import cx from 'classnames'
 
 import type { LoaderProps } from './@types/index.js'
+import styles from './spinner.module.css'
 
-type SpinnerProps = Omit<LoaderProps, 'size'>
-
-export function LoaderSpinner({ color, className, style }: SpinnerProps): React.JSX.Element {
+export function LoaderSpinner({
+  color,
+  size,
+  className,
+  style,
+  ...rest
+}: LoaderProps): React.JSX.Element {
   const circles = [...Array(12)].map((_, index) => {
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-      <div key={index}>
+      <div
+        key={index}
+        className={cx('infonomic-loader-spinner-blade', styles['loader-spinner-blade'])}
+      >
         <div
-          className={classNames('div-after')}
-          style={{ backgroundColor: color ? color : 'var(--loader-color)' }}
+          className={cx(
+            'infonomic-loader-spinner-blade-inner',
+            styles['loader-spinner-blade-inner'],
+          )}
         />
       </div>
     )
   })
 
+  const spinnerStyle: React.CSSProperties & Record<string, string | number | undefined> = {
+    ...style,
+  }
+  if (size != null) {
+    spinnerStyle['--loader-spinner-size'] = typeof size === 'number' ? `${size}px` : size
+  }
+  if (color) {
+    spinnerStyle['--loader-spinner-color'] = color
+  }
+
   return (
-    <div className={classNames('lds-spinner', className)} style={{ ...style }}>
+    <div
+      className={cx('infonomic-loader-spinner', styles['loader-spinner'], className)}
+      style={spinnerStyle}
+      {...rest}
+    >
       {circles}
     </div>
   )

package/src/styles/components/components.css

@@ -1,4 +1,4 @@
 /* @import "./scroll-to-top.css"; */
 @import "./hamburger.css";
-@import "./loaders.css";
+/* @import "./loaders.css"; */
 @import "./fade-in-lift.css";

package/src/styles/components/loaders.css

@@ -1,3 +1,5 @@
+/* No longer used in our actual loaders for React and Astro components
+but left here as a reference. */
 .lds-ellipsis {
   display: inline-block;
   position: relative;
@@ -193,4 +195,4 @@
   100% {
     opacity: 0;
   }
-}
+}