polpo 0.1.13 → 0.1.16

package/src/components/button/button.styles.css

@@ -0,0 +1,317 @@
+@reference "polpo-tailwind-config/styles";
+
+@layer components {
+    .button {
+        --button-blur: 2px;
+
+        --color: var(--color-gray-800);
+        --solid-background: var(--color-gray-900);
+        --solid-text: var(--color-gray-50);
+        --solid-hover-background: var(--color-gray-800);
+        --solid-active-background: var(--color-gray-900);
+        --flat-background: hsl(from var(--color-gray-100) h s l / 80%);
+        --flat-hover-background: var(--color-gray-50);
+        --flat-active-background: var(--color-gray-100);
+        --outlined-hover-background: hsl(from var(--color-gray-100) h s l / 20%);
+        --outlined-active-background: hsl(from var(--color-gray-100) h s l / 50%);
+        --text-hover-background: hsl(from var(--color-gray-100) h s l / 20%);
+        --text-active-background: hsl(from var(--color-gray-100) h s l / 50%);
+        --shadow-color: hsl(from var(--color-gray-800) h s l / 20%);
+        --focus-background: hsl(from var(--color-gray-100) h s l / 20%);
+
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 0.625em 2.1875em;
+        gap: 0.625em;
+        width: auto;
+        border-radius: 0.5em;
+        font-weight: bold;
+        @apply text-label;
+        cursor: pointer;
+        outline: none;
+        transition: all 150ms ease;
+        user-select: none;
+
+        &.icon {
+            padding: 0.625em;
+        }
+
+        &.full {
+            width: 100%;
+        }
+
+        &.no-wrap {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &.size-small {
+            @apply text-small;
+        }
+
+        &.size-regular {
+            @apply text-label;
+        }
+
+        &.size-large {
+            @apply text-body;
+        }
+
+        &.radius-none {
+            border-radius: 0;
+        }
+
+        &.radius-small {
+            border-radius: 0.25em;
+        }
+
+        &.radius-medium {
+            border-radius: 0.5em;
+        }
+
+        &.radius-large {
+            border-radius: 1em;
+        }
+
+        &.radius-full {
+            border-radius: 100rem;
+        }
+
+        &:not(:disabled) {
+            &:hover,
+            &:active,
+            &:focus-visible {
+                backdrop-filter: blur(var(--button-blur));
+            }
+
+            &:hover {
+                transform: scale(1.01);
+                box-shadow: 0 1.4em 0.5em -1em hsl(from var(--color-black) h s l / 20%),
+                0 0.7em 1em -0.5em hsl(from var(--color-black) h s l / 20%);
+            }
+
+            &:active {
+                transform: scale(0.98);
+                box-shadow: 0 0.3em 0.4em -0.2em hsl(from var(--color-black) h s l / 20%),
+                0 0.2em 0.8em -0.1em hsl(from var(--color-black) h s l / 20%);
+            }
+        }
+
+        /*----------------------------------------------------------------------------------------------*/
+
+        color: var(--color);
+
+        .ripple-effect {
+            background: var(--color);
+        }
+
+        &.solid {
+            background: var(--solid-background);
+            color: var(--solid-text);
+            backdrop-filter: blur(var(--button-blur));
+
+            .ripple-effect {
+                background: var(--solid-text);
+            }
+
+            &:focus-visible {
+                box-shadow: 0 0 0 0.3125em var(--shadow-color);
+                background: var(--solid-background);
+            }
+
+            &:hover {
+                background: var(--solid-hover-background);
+            }
+
+            &:active {
+                background: var(--solid-active-background);
+            }
+        }
+
+        &.flat {
+            background: var(--flat-background);
+            backdrop-filter: blur(var(--button-blur));
+
+            &:hover {
+                background: var(--flat-hover-background);
+            }
+
+            &:active {
+                background: var(--flat-active-background);
+            }
+        }
+
+        &.outlined {
+            background: transparent;
+            border: 1px solid;
+
+            &:hover {
+                background: var(--outlined-hover-background);
+            }
+
+            &:active {
+                background: var(--outlined-active-background);
+            }
+        }
+
+        &.text {
+            background: transparent;
+
+            &:hover {
+                background: var(--text-hover-background);
+            }
+
+            &:active {
+                background: var(--text-active-background);
+            }
+        }
+
+        &:focus-visible {
+            box-shadow: 0 0 0 0.3125em var(--shadow-color);
+            background: var(--focus-background);
+        }
+
+        /*----------------------------------------------------------------------------------------------*/
+
+        &.primary {
+            --color: var(--color-primary-500);
+            --solid-background: var(--color-primary-500);
+            --solid-text: var(--color-primary-50);
+            --solid-hover-background: var(--color-primary-400);
+            --solid-active-background: var(--color-primary-600);
+            --flat-background: hsl(from var(--color-primary-100) h s l / 80%);
+            --flat-hover-background: var(--color-primary-50);
+            --flat-active-background: var(--color-primary-100);
+            --outlined-hover-background: hsl(from var(--color-primary-100) h s l / 20%);
+            --outlined-active-background: hsl(from var(--color-primary-100) h s l / 50%);
+            --text-hover-background: hsl(from var(--color-primary-100) h s l / 20%);
+            --text-active-background: hsl(from var(--color-primary-100) h s l / 50%);
+            --shadow-color: hsl(from var(--color-primary-500) h s l / 20%);
+            --focus-background: hsl(from var(--color-primary-100) h s l / 20%);
+        }
+
+        &.secondary {
+            --color: var(--color-secondary-500);
+            --solid-background: var(--color-secondary-500);
+            --solid-text: var(--color-secondary-50);
+            --solid-hover-background: var(--color-secondary-400);
+            --solid-active-background: var(--color-secondary-600);
+            --flat-background: hsl(from var(--color-secondary-100) h s l / 80%);
+            --flat-hover-background: var(--color-secondary-50);
+            --flat-active-background: var(--color-secondary-100);
+            --outlined-hover-background: hsl(from var(--color-secondary-100) h s l / 20%);
+            --outlined-active-background: hsl(from var(--color-secondary-100) h s l / 50%);
+            --text-hover-background: hsl(from var(--color-secondary-100) h s l / 20%);
+            --text-active-background: hsl(from var(--color-secondary-100) h s l / 50%);
+            --shadow-color: hsl(from var(--color-secondary-500) h s l / 20%);
+            --focus-background: hsl(from var(--color-secondary-100) h s l / 20%);
+        }
+
+        &.tertiary {
+            --color: var(--color-tertiary-500);
+            --solid-background: var(--color-tertiary-500);
+            --solid-text: var(--color-tertiary-50);
+            --solid-hover-background: var(--color-tertiary-400);
+            --solid-active-background: var(--color-tertiary-600);
+            --flat-background: hsl(from var(--color-tertiary-100) h s l / 80%);
+            --flat-hover-background: var(--color-tertiary-50);
+            --flat-active-background: var(--color-tertiary-100);
+            --outlined-hover-background: hsl(from var(--color-tertiary-100) h s l / 20%);
+            --outlined-active-background: hsl(from var(--color-tertiary-100) h s l / 50%);
+            --text-hover-background: hsl(from var(--color-tertiary-100) h s l / 20%);
+            --text-active-background: hsl(from var(--color-tertiary-100) h s l / 50%);
+            --shadow-color: hsl(from var(--color-tertiary-500) h s l / 20%);
+            --focus-background: hsl(from var(--color-tertiary-100) h s l / 20%);
+        }
+
+        &.active {
+            --color: var(--color-active-500);
+            --solid-background: var(--color-active-500);
+            --solid-text: var(--color-active-50);
+            --solid-hover-background: var(--color-active-400);
+            --solid-active-background: var(--color-active-600);
+            --flat-background: hsl(from var(--color-active-100) h s l / 80%);
+            --flat-hover-background: var(--color-active-50);
+            --flat-active-background: var(--color-active-100);
+            --outlined-hover-background: hsl(from var(--color-active-100) h s l / 20%);
+            --outlined-active-background: hsl(from var(--color-active-100) h s l / 50%);
+            --text-hover-background: hsl(from var(--color-active-100) h s l / 20%);
+            --text-active-background: hsl(from var(--color-active-100) h s l / 50%);
+            --shadow-color: hsl(from var(--color-active-500) h s l / 20%);
+            --focus-background: hsl(from var(--color-active-100) h s l / 20%);
+        }
+
+        &.warning {
+            --color: var(--color-warning-500);
+            --solid-background: var(--color-warning-500);
+            --solid-text: var(--color-warning-50);
+            --solid-hover-background: var(--color-warning-400);
+            --solid-active-background: var(--color-warning-600);
+            --flat-background: hsl(from var(--color-warning-100) h s l / 80%);
+            --flat-hover-background: var(--color-warning-50);
+            --flat-active-background: var(--color-warning-100);
+            --outlined-hover-background: hsl(from var(--color-warning-100) h s l / 20%);
+            --outlined-active-background: hsl(from var(--color-warning-100) h s l / 50%);
+            --text-hover-background: hsl(from var(--color-warning-100) h s l / 20%);
+            --text-active-background: hsl(from var(--color-warning-100) h s l / 50%);
+            --shadow-color: hsl(from var(--color-warning-500) h s l / 20%);
+            --focus-background: hsl(from var(--color-warning-100) h s l / 20%);
+        }
+
+        &.alert {
+            --color: var(--color-alert-500);
+            --solid-background: var(--color-alert-500);
+            --solid-text: var(--color-alert-50);
+            --solid-hover-background: var(--color-alert-400);
+            --solid-active-background: var(--color-alert-600);
+            --flat-background: hsl(from var(--color-alert-100) h s l / 80%);
+            --flat-hover-background: var(--color-alert-50);
+            --flat-active-background: var(--color-alert-100);
+            --outlined-hover-background: hsl(from var(--color-alert-100) h s l / 20%);
+            --outlined-active-background: hsl(from var(--color-alert-100) h s l / 50%);
+            --text-hover-background: hsl(from var(--color-alert-100) h s l / 20%);
+            --text-active-background: hsl(from var(--color-alert-100) h s l / 50%);
+            --shadow-color: hsl(from var(--color-alert-500) h s l / 20%);
+            --focus-background: hsl(from var(--color-alert-100) h s l / 20%);
+        }
+
+        &.info {
+            --color: var(--color-info-500);
+            --solid-background: var(--color-info-500);
+            --solid-text: var(--color-info-50);
+            --solid-hover-background: var(--color-info-400);
+            --solid-active-background: var(--color-info-600);
+            --flat-background: hsl(from var(--color-info-100) h s l / 80%);
+            --flat-hover-background: var(--color-info-50);
+            --flat-active-background: var(--color-info-100);
+            --outlined-hover-background: hsl(from var(--color-info-100) h s l / 20%);
+            --outlined-active-background: hsl(from var(--color-info-100) h s l / 50%);
+            --text-hover-background: hsl(from var(--color-info-100) h s l / 20%);
+            --text-active-background: hsl(from var(--color-info-100) h s l / 50%);
+            --shadow-color: hsl(from var(--color-info-500) h s l / 20%);
+            --focus-background: hsl(from var(--color-info-100) h s l / 20%);
+        }
+
+        &:disabled {
+            color: var(--color-gray-200);
+            pointer-events: none;
+        }
+
+        &.solid:disabled {
+            background: var(--color-gray-200);
+            color: var(--color-gray-50);
+        }
+
+        &.flat:disabled {
+            background: hsl(from var(--color-gray-50) h s l / 80%);
+        }
+
+        &.outlined:disabled,
+        &.text:disabled {
+            background: transparent;
+        }
+    }
+}

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button.component';

package/src/components/cards/flip-card/flip-card.component.tsx

@@ -0,0 +1,66 @@
+import { CSSProperties, useMemo } from 'react';
+
+import { useClassNames } from '../../../hooks';
+
+import './flip-card.styles.css';
+
+type FlipCardProps = {
+  cardZIndex?: CSSProperties['zIndex'];
+  isFlipped?: boolean;
+  flipSpeed?: number;
+  flipDirection?: 'horizontal' | 'vertical';
+  children: [React.ReactNode, React.ReactNode];
+};
+
+export const FlipCard = ({
+  cardZIndex = 'auto',
+  flipDirection = 'vertical',
+  flipSpeed = 500,
+  isFlipped = false,
+  children,
+}: FlipCardProps) => {
+  const getComponent = (key: 0 | 1): React.ReactNode => {
+    if (children.length !== 2) {
+      throw new Error('Component FlipCard requires 2 children');
+    }
+
+    return children[key] as React.ReactNode;
+  };
+
+  const frontRotate = useMemo(() => {
+    const deg = isFlipped ? 180 : 0;
+
+    return `rotate${flipDirection === 'horizontal' ? 'Y' : 'X'}(${deg}deg)`;
+  }, [flipDirection, isFlipped]);
+
+  const backRotate = useMemo(() => {
+    const deg = isFlipped ? 0 : -180;
+
+    return `rotate${flipDirection === 'horizontal' ? 'Y' : 'X'}(${deg}deg)`;
+  }, [flipDirection, isFlipped]);
+
+  const className = useClassNames({
+    'flip-card': true,
+    'is-flipped': isFlipped,
+  });
+
+  return (
+    <section
+      className={className}
+      style={
+        {
+          '--cardZIndex': cardZIndex,
+          '--flipSpeed': `${flipSpeed}ms`,
+          '--frontRotate': frontRotate,
+          '--backRotate': backRotate,
+        } as React.CSSProperties
+      }
+    >
+      <section className='flipper'>
+        <section className='front'>{getComponent(0)}</section>
+
+        <section className='back'>{getComponent(1)}</section>
+      </section>
+    </section>
+  );
+};

package/src/components/cards/flip-card/flip-card.styles.css

@@ -0,0 +1,50 @@
+@reference "polpo-tailwind-config/styles";
+
+.flip-card {
+    --cardZIndex: attr(data-zIndex);
+    --flipSpeed: attr(data-flipSpeed, 500ms);
+    --frontRotate: attr(data-frontRotate);
+    --backRotate: attr(data-backRotate);
+
+    perspective: 1000px;
+    z-index: var(--cardZIndex);
+
+    .flipper {
+        height: 100%;
+        position: relative;
+        width: 100%;
+        transform-style: preserve-3d;
+    }
+
+    .front,
+    .back {
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform-style: preserve-3d;
+        transition: var(--flipSpeed);
+        height: 100%;
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+
+    .front {
+        position: relative;
+        transform: var(--frontRotate);
+        z-index: 2;
+    }
+
+    .back {
+        position: absolute;
+        transform: var(--backRotate);
+    }
+
+    .is-flipped {
+        .front {
+            position: absolute;
+        }
+        .back {
+            position: relative;
+        }
+    }
+}

package/src/components/cards/flip-card/index.ts

@@ -0,0 +1 @@
+export * from './flip-card.component';

package/src/components/cards/hover-card/hover-card.component.tsx

@@ -0,0 +1,76 @@
+import { MouseEvent, MouseEventHandler, useCallback, useRef } from 'react';
+
+import { useClassNames, useEventListener } from '../../../hooks';
+
+import './hover-card.styles.css';
+
+type HoverCardProps = {
+  children: React.ReactNode;
+  threshold?: number;
+  translationZ?: number;
+  width?: 'fit-content' | '100%';
+  className?: string;
+};
+
+export const HoverCard = ({
+  children,
+  threshold = 5,
+  translationZ = 25,
+  width = 'fit-content',
+  className = '',
+}: HoverCardProps) => {
+  const refCard = useRef<HTMLElement>(null);
+  const refLayer = useRef<HTMLElement>(null);
+
+  const mouseMoveCallback = useCallback(
+    (e: MouseEvent) => {
+      const card = refCard.current;
+      const layer = refLayer.current;
+
+      if (!card || !layer) return;
+
+      const { clientX, clientY, currentTarget } = e;
+      const { clientWidth, clientHeight } = currentTarget;
+      const { top, left } = card.getBoundingClientRect();
+
+      const horizontal = (clientX - left) / clientWidth;
+      const vertical = (clientY - top) / clientHeight;
+
+      const relativePercentageX = horizontal * 2 - 1;
+      const relativePercentageY = vertical * 2 - 1;
+
+      const rotateY = (relativePercentageY * threshold).toFixed(2);
+      const rotateX = (relativePercentageX * threshold).toFixed(2);
+
+      layer.style.transform = `perspective(${clientWidth}px) rotateX(${-rotateY}deg) rotateY(${rotateX}deg)`;
+      card.style.transform = `perspective(${clientWidth}px) translateZ(${translationZ}px)`;
+    },
+    [threshold, translationZ],
+  );
+
+  const mouseLeaveCallback = useCallback<MouseEventHandler>(e => {
+    const card = refCard.current;
+    const layer = refLayer.current;
+
+    if (!card || !layer) return;
+
+    layer.style.transform = `perspective(${e.currentTarget.clientWidth}px) rotateX(0) rotateY(0)`;
+    card.style.transform = `perspective(${e.currentTarget.clientWidth}px) translateZ(0)`;
+  }, []);
+
+  useEventListener('mousemove', mouseMoveCallback as unknown as EventListener, refCard);
+  useEventListener('mouseleave', mouseLeaveCallback as unknown as EventListener, refCard);
+
+  const cardClassName = useClassNames({
+    'hover-card': true,
+    [className]: Boolean(className),
+  });
+
+  return (
+    <span ref={refCard} style={{ width }} className={cardClassName}>
+      <span className='card-hover-layer' ref={refLayer}>
+        {children}
+      </span>
+    </span>
+  );
+};

package/src/components/cards/hover-card/hover-card.styles.css

@@ -0,0 +1,13 @@
+@reference "polpo-tailwind-config/styles";
+
+.hover-card {
+    display: inline-block;
+    transition: all 300ms ease;
+
+    .card-hover-layer {
+        transition: all 100ms ease;
+        width: 100%;
+        height: 100%;
+        display: grid;
+    }
+}

package/src/components/cards/hover-card/index.ts

@@ -0,0 +1 @@
+export * from './hover-card.component';

package/src/components/cards/index.ts

@@ -0,0 +1,3 @@
+export * from './slide-card';
+export * from './flip-card';
+export * from './hover-card';

package/src/components/cards/slide-card/index.ts

@@ -0,0 +1 @@
+export * from './slide-card.component';

package/src/components/cards/slide-card/slide-card.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+type SlideCardProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const SlideCard = ({ children, isOpen, className = '', style = {} }: SlideCardProps) => {
+  return (
+    <section
+      className={className}
+      style={
+        {
+          overflow: 'hidden',
+          height: isOpen ? 'auto' : 0,
+          transition: 'height 300ms ease',
+          interpolateSize: 'allow-keywords',
+          ...style,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </section>
+  );
+};

package/src/components/component.types.ts

@@ -0,0 +1,31 @@
+export enum ColorTypes {
+  DEFAULT = 'default',
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  ACTIVE = 'active',
+  WARNING = 'warning',
+  ALERT = 'alert',
+  INFO = 'info',
+}
+
+export enum SizeTypes {
+  SMALL = 'small',
+  REGULAR = 'regular',
+  LARGE = 'large',
+}
+
+export enum VariantTypes {
+  SOLID = 'solid',
+  FLAT = 'flat',
+  OUTLINED = 'outlined',
+  TEXT = 'text',
+}
+
+export enum RadiusTypes {
+  NONE = 'none',
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+  FULL = 'full',
+}

package/src/components/cursor/cursor.component.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+import { useEventListener, useMousePosition } from '../../hooks';
+
+import './cursor.styles.css';
+
+export const Cursor = () => {
+  const { x, y, elementX, elementY, ref } = useMousePosition();
+  const [isCursorHover, setIsCursorHover] = useState(false);
+
+  useEventListener('mouseover', e => {
+    const computedCursor = getComputedStyle(e.target as HTMLElement).cursor;
+
+    setIsCursorHover(computedCursor === 'pointer');
+  });
+
+  useEffect(() => {
+    if (!('ontouchstart' in window || navigator.maxTouchPoints)) {
+      document.body.style.cursor = 'none';
+    }
+
+    return () => {
+      document.body.style.cursor = 'auto';
+    };
+  }, []);
+
+  if (x === null || y === null || 'ontouchstart' in window || navigator.maxTouchPoints) {
+    return null;
+  }
+
+  const translate3d = `translate3d(${elementX}px, ${elementY}px, 0)`;
+
+  return (
+    <section className='cursor-overlay' ref={ref}>
+      <span
+        className={`cursor outer-circle ${isCursorHover ? 'cursor-hover' : ''}`}
+        style={{
+          transform: translate3d,
+        }}
+      />
+      <span
+        className={`cursor inner-circle ${isCursorHover ? 'cursor-hover' : ''}`}
+        style={{
+          transform: translate3d,
+        }}
+      />
+    </section>
+  );
+};