polpo 0.1.0 → 0.1.2

package/dist/use-modal-in-container-DiNW1PE_.d.cts

@@ -0,0 +1,34 @@
+import { RefObject } from 'react';
+import { P as PositionContainer } from './get-modal-position-drle0OjP.cjs';
+
+declare enum ModalState {
+    OPENING = "OPENING",
+    OPEN = "OPEN",
+    CLOSING = "CLOSING",
+    CLOSED = "CLOSED"
+}
+declare const useModalTransition: (transitionDuration?: number, onClose?: () => void) => {
+    isVisible: boolean;
+    closeModal: () => void;
+    openModal: () => void;
+    modalState: ModalState;
+};
+
+type UseModalInContainerParams<Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container> = {
+    closeOnClickOutside?: boolean;
+    transitionDuration?: number;
+    windowOffset?: number;
+    offset?: number;
+    position?: `${PositionContainer}`;
+    modalRef: RefObject<Modal>;
+    containerRef?: RefObject<Container>;
+    onClose?: () => void;
+};
+declare const useModalInContainer: <Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container>({ closeOnClickOutside, offset, windowOffset, position, transitionDuration, modalRef, containerRef, onClose, }: UseModalInContainerParams<Container, Modal>) => {
+    isVisible: boolean;
+    closeModal: () => void;
+    openModal: () => void;
+    modalState: ModalState;
+};
+
+export { ModalState as M, type UseModalInContainerParams as U, useModalTransition as a, useModalInContainer as u };

package/dist/use-modal-in-container-neGo-kMk.d.ts

@@ -0,0 +1,34 @@
+import { RefObject } from 'react';
+import { P as PositionContainer } from './get-modal-position-drle0OjP.js';
+
+declare enum ModalState {
+    OPENING = "OPENING",
+    OPEN = "OPEN",
+    CLOSING = "CLOSING",
+    CLOSED = "CLOSED"
+}
+declare const useModalTransition: (transitionDuration?: number, onClose?: () => void) => {
+    isVisible: boolean;
+    closeModal: () => void;
+    openModal: () => void;
+    modalState: ModalState;
+};
+
+type UseModalInContainerParams<Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container> = {
+    closeOnClickOutside?: boolean;
+    transitionDuration?: number;
+    windowOffset?: number;
+    offset?: number;
+    position?: `${PositionContainer}`;
+    modalRef: RefObject<Modal>;
+    containerRef?: RefObject<Container>;
+    onClose?: () => void;
+};
+declare const useModalInContainer: <Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container>({ closeOnClickOutside, offset, windowOffset, position, transitionDuration, modalRef, containerRef, onClose, }: UseModalInContainerParams<Container, Modal>) => {
+    isVisible: boolean;
+    closeModal: () => void;
+    openModal: () => void;
+    modalState: ModalState;
+};
+
+export { ModalState as M, type UseModalInContainerParams as U, useModalTransition as a, useModalInContainer as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polpo",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "sideEffects": false,
   "license": "MIT",
   "type": "module",
@@ -12,9 +12,9 @@
   "exports": {
     ".": null,
     "./ui": {
-      "main": "./dist/polpo.cjs",
-      "module": "./dist/polpo.js",
-      "types": "./dist/polpo.d.ts"
+      "main": "./dist/ui.cjs",
+      "module": "./dist/ui.js",
+      "types": "./dist/ui.d.ts"
     },
     "./hooks": {
       "main": "./dist/hooks.cjs",
@@ -40,7 +40,7 @@
     "clean": "rm -rf ./dist",
     "build": "yarn clean && tsup",
     "publish-package": "yarn lint && yarn build && yarn publish --no-git-tag-version",
-    "transform-svgs": "node ../../node_modules/@juanmsl/svg-to-react && yarn lint:fix",
+    "transform-svgs": "svg-to-react && yarn lint:fix",
     "dev": "storybook dev -p 6006 --quiet",
     "build-storybook": "storybook build"
   },

package/src/components/buttons/button/button.stories.tsx

@@ -1,8 +1,8 @@
-import { RadiusVariants, SizeVariants } from '../../../core/variants';
+import { ColorVariants, RadiusVariants, SizeVariants } from '../../../core/variants';
 import { Grid } from '../../../layouts';
 import { IconNames } from '../../icon';
 
-import { Button, ButtonColor, ButtonVariant } from './button';
+import { Button, ButtonVariant } from './button';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -14,7 +14,7 @@ const meta: Meta<typeof Button> = {
     className: { control: false },
     color: {
       control: 'inline-radio',
-      options: [undefined, ...Object.values(ButtonColor)],
+      options: [undefined, ...Object.values(ColorVariants)],
     },
     disabled: { control: 'boolean' },
     isLoading: { control: 'boolean' },
@@ -93,7 +93,7 @@ export const Colors: Story = {
   render: args => (
     <Grid gtc='300px' ji='center' gap='1em' ai='center'>
       <Button {...args}>Default</Button>
-      {Object.values(ButtonColor).map(color => (
+      {Object.values(ColorVariants).map(color => (
         <Button {...args} color={color} key={color}>
           {color}
         </Button>

package/src/components/buttons/button/button.style.ts

@@ -1,13 +1,18 @@
 import styled from 'styled-components';
 
-import { RadiusStyles, SizeStyles } from '../../../core/variants';
+import { RadiusStyles, RadiusVariants, SizeStyles, SizeVariants } from '../../../core/variants';
 
-export type ButtonStyleProps = {
+export type ButtonColorStyles = {
   $color: string;
   $colorDark: string;
   $colorContrast: string;
 };
 
+export type ButtonStyleProps = ButtonColorStyles & {
+  $size: `${SizeVariants}`;
+  $radius: `${RadiusVariants}`;
+};
+
 export const ButtonStyle = styled.button<ButtonStyleProps>`
   cursor: pointer;
   font-weight: bold;
@@ -24,9 +29,6 @@ export const ButtonStyle = styled.button<ButtonStyleProps>`
   position: relative;
   user-select: none;
 
-  ${SizeStyles}
-  ${RadiusStyles}
-
   .button-loader-icon {
     animation: spin 800ms linear infinite;
     font-size: 1.2em;
@@ -63,6 +65,9 @@ export const ButtonStyle = styled.button<ButtonStyleProps>`
   transition: all 250ms ease;
   border: 1px solid ${props => props.$color};
 
+  ${props => SizeStyles[props.$size]}
+  ${props => RadiusStyles[props.$radius]}
+
   &:not(:disabled) {
     &:not(.no-shadow) {
       &:hover {

package/src/components/buttons/button/button.tsx

@@ -2,11 +2,11 @@ import React, { ButtonHTMLAttributes } from 'react';
 import { useTheme } from 'styled-components';
 
 import { ThemeColor } from '../../../contexts';
-import { SizeVariants, useSizeClassName, RadiusVariants, useRadiusClassName } from '../../../core/variants';
+import { SizeVariants, RadiusVariants, ColorVariants } from '../../../core/variants';
 import { Icon, IconNameT } from '../../icon';
 import { Ripple } from '../../ripple';
 
-import { ButtonStyle, ButtonStyleProps } from './button.style';
+import { ButtonStyle, ButtonColorStyles } from './button.style';
 
 import { useClassNames } from '@polpo/hooks';
 
@@ -16,17 +16,7 @@ export enum ButtonVariant {
   FLAT = 'flat',
 }
 
-export enum ButtonColor {
-  PRIMARY = 'primary',
-  SECONDARY = 'secondary',
-  TERTIARY = 'tertiary',
-  INFO = 'info',
-  WARNING = 'warning',
-  ALERT = 'alert',
-  ACTIVE = 'active',
-}
-
-const getColor = (color?: ThemeColor): ButtonStyleProps | null => {
+const getColor = (color?: ThemeColor): ButtonColorStyles | null => {
   if (color) {
     return {
       $color: color.main,
@@ -53,7 +43,7 @@ export type ButtonProps = {
   style?: React.CSSProperties;
   type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   noShadow?: boolean;
-  color?: `${ButtonColor}`;
+  color?: `${ColorVariants}`;
 };
 
 const ButtonComponent = (
@@ -77,11 +67,7 @@ const ButtonComponent = (
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) => {
   const theme = useTheme();
-  const buttonSize = useSizeClassName(size);
-  const buttonRadius = useRadiusClassName(radius);
   const buttonClassName = useClassNames({
-    [buttonRadius]: true,
-    [buttonSize]: true,
     'ghost-variant': variant === ButtonVariant.GHOST,
     'flat-variant': variant === ButtonVariant.FLAT,
     'is-loading': !disabled && isLoading,
@@ -90,7 +76,7 @@ const ButtonComponent = (
     [className]: !!className,
   });
 
-  const buttonColors: ButtonStyleProps = (color && getColor(theme.colors[color])) || {
+  const buttonColors: ButtonColorStyles = (color && getColor(theme.colors[color])) || {
     $color: theme.colors.text.main,
     $colorDark: theme.colors.text.dark,
     $colorContrast: theme.colors.background.main,
@@ -105,6 +91,8 @@ const ButtonComponent = (
       disabled={disabled}
       onClick={onClick}
       type={type}
+      $size={size}
+      $radius={radius}
     >
       {leftIcon && (!isLoading || disabled) && <Icon className='button-left-icon' name={leftIcon} />}
       <span className='button-text'>

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

@@ -16,7 +16,7 @@ export const FlipCard = ({
   flipSpeed = 500,
   isFlipped = false,
   children,
-}: FlipCardProps): React.ReactElement => {
+}: FlipCardProps) => {
   const getComponent = (key: 0 | 1): React.ReactNode => {
     if (children.length !== 2) {
       throw new Error('Component FlipCard requires 2 children');

package/src/components/cursor/cursor.stories.tsx

@@ -0,0 +1,35 @@
+import { Cursor } from './cursor';
+
+import { SectionLayout, Typography } from '@polpo/ui';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Cursor> = {
+  title: 'Cursor',
+  component: Cursor,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {},
+  args: {},
+  render: () => (
+    <section>
+      <Cursor />
+      <SectionLayout>
+        <Typography align='center' variant='header4'>
+          Hello world
+        </Typography>
+        <Typography align='center'>
+          <a href=''>Link, hover me!</a>
+        </Typography>
+      </SectionLayout>
+    </section>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof Cursor>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/cursor/cursor.style.ts

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+
+export const CursorOverlayStyle = styled.section`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: none;
+  pointer-events: none;
+`;
+
+export const CursorStyle = styled.span`
+  position: fixed;
+  border-radius: 50%;
+  z-index: 99999999;
+  pointer-events: none;
+  transform: translateZ(0);
+
+  @media (any-pointer: coarse) {
+    display: none;
+  }
+
+  &.outer-circle {
+    margin-left: -15px;
+    margin-top: -15px;
+    width: 30px;
+    height: 30px;
+    border: 2px solid ${props => props.theme.colors.primary.main};
+    box-sizing: border-box;
+    z-index: 99999999;
+    opacity: 0.5;
+    transition:
+      all 0.08s ease-out,
+      width 0.3s ease-in-out,
+      height 0.3s ease-in-out,
+      margin 0.3s ease-in-out,
+      opacity 0.3s ease-in-out;
+
+    &.cursor-hover {
+      margin-left: -40px;
+      margin-top: -40px;
+      width: 80px;
+      height: 80px;
+      background-color: ${props => props.theme.colors.primary.main};
+      opacity: 0.3;
+    }
+
+    &.cursor-text {
+      margin-left: -2px;
+      margin-top: -40px;
+      width: 4px;
+      height: 80px;
+      background-color: ${props => props.theme.colors.primary.main};
+      opacity: 0.3;
+    }
+  }
+
+  &.inner-circle {
+    margin-left: -3px;
+    margin-top: -3px;
+    width: 6px;
+    height: 6px;
+    z-index: 99999999;
+    background-color: ${props => props.theme.colors.primary.main};
+    transition: opacity 0.3s ease-in-out;
+    opacity: 1;
+
+    &.cursor-hover {
+      opacity: 0;
+    }
+  }
+`;

package/src/components/cursor/cursor.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+import { CursorOverlayStyle, CursorStyle } from './cursor.style';
+
+import { useEventListener, useMousePosition } from '@polpo/hooks';
+
+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 (
+    <CursorOverlayStyle ref={ref}>
+      <CursorStyle
+        className={`outer-circle ${isCursorHover ? 'cursor-hover' : ''}`}
+        style={{
+          transform: translate3d,
+        }}
+      />
+      <CursorStyle
+        className={`inner-circle ${isCursorHover ? 'cursor-hover' : ''}`}
+        style={{
+          transform: translate3d,
+        }}
+      />
+    </CursorOverlayStyle>
+  );
+};

package/src/components/cursor/index.ts

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

package/src/components/form/checkbox/checkbox.stories.tsx

@@ -1,10 +1,13 @@
 import { useState } from 'react';
 
+import { ColorVariants } from '../../../core/variants';
 import { IconNames } from '../../icon';
 import { UnControlledComponentArgTypes } from '../form.stories.types';
 
 import { Checkbox } from './checkbox';
 
+import { SectionLayout } from '@polpo/ui';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Checkbox> = {
@@ -15,6 +18,7 @@ const meta: Meta<typeof Checkbox> = {
     placeholder: { table: { disable: true } },
     label: { control: 'text' },
     icon: { options: [undefined, ...IconNames.toSorted()] },
+    color: { control: { type: 'inline-radio', options: Object.values(ColorVariants) } },
   },
   args: {
     label: 'Checkbox',
@@ -32,3 +36,50 @@ type Story = StoryObj<typeof Checkbox>;
 export const Default: Story = {
   args: {},
 };
+
+export const MultipleOptions: Story = {
+  args: {},
+  render: args => {
+    const [option1, setOption1] = useState(false);
+    const [option2, setOption2] = useState(false);
+    const [option3, setOption3] = useState(false);
+    const [option4, setOption4] = useState(false);
+
+    return (
+      <SectionLayout fitHeightContent>
+        <Checkbox {...args} value={option1} setValue={setOption1} label='Option 1' />
+        <Checkbox {...args} value={option2} setValue={setOption2} label='Option 2' />
+        <Checkbox {...args} value={option3} setValue={setOption3} label='Option 3' />
+        <Checkbox {...args} value={option4} setValue={setOption4} label='Option 4' />
+      </SectionLayout>
+    );
+  },
+};
+
+export const Colors: Story = {
+  args: {},
+  argTypes: {
+    color: { control: false },
+  },
+  render: args => {
+    const [option1, setOption1] = useState(false);
+    const [option2, setOption2] = useState(false);
+    const [option3, setOption3] = useState(false);
+    const [option4, setOption4] = useState(false);
+    const [option5, setOption5] = useState(false);
+    const [option6, setOption6] = useState(false);
+    const [option7, setOption7] = useState(false);
+
+    return (
+      <SectionLayout fitHeightContent>
+        <Checkbox {...args} color='primary' value={option1} setValue={setOption1} label='Primary' />
+        <Checkbox {...args} color='secondary' value={option2} setValue={setOption2} label='Secondary' />
+        <Checkbox {...args} color='tertiary' value={option3} setValue={setOption3} label='Tertiary' />
+        <Checkbox {...args} color='info' value={option4} setValue={setOption4} label='Info' />
+        <Checkbox {...args} color='active' value={option5} setValue={setOption5} label='Active' />
+        <Checkbox {...args} color='warning' value={option6} setValue={setOption6} label='Warning' />
+        <Checkbox {...args} color='alert' value={option7} setValue={setOption7} label='Alert' />
+      </SectionLayout>
+    );
+  },
+};

package/src/components/form/checkbox/checkbox.style.ts

@@ -1,44 +1,35 @@
 import styled from 'styled-components';
 
-export const CheckboxStyle = styled.section`
-  border-radius: 42%;
-  background: ${props => props.theme.colors.background.paper};
-  color: ${props => props.theme.colors.primary.main};
-  transition: all 300ms ease;
+export const CheckboxFillStyle = styled.section`
+  transition: all 200ms ease-out;
+  border-radius: inherit;
+  margin: auto;
+  width: 0;
+  height: 0;
+  overflow: hidden;
   position: relative;
-  padding: 2px;
-  width: 1.4em;
-  height: 1.4em;
-  border: 1px solid;
+  display: grid;
+  place-content: center;
+  place-items: center;
 
   .checkbox-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: ${props => props.theme.colors.primary.contrast};
     font-size: 0.7em;
     z-index: 1;
     opacity: 0;
     transition: opacity 300ms ease;
-
-    path {
-      filter: drop-shadow(0px 0 3px rgba(0, 0, 0, 1));
-    }
   }
+`;
 
-  &.is-checked {
-    background: ${props => props.theme.colors.primary.main};
-    color: ${props => props.theme.colors.primary.main};
-
-    .checkbox-icon {
-      opacity: 1;
-    }
-
-    &:hover {
-      background: ${props => props.theme.colors.primary.light};
-    }
-  }
+export const CheckboxStyle = styled.section`
+  border-radius: 40%;
+  background: ${props => props.theme.colors.background.paper};
+  transition: all 300ms ease;
+  width: 1em;
+  height: 1em;
+  margin: 2px;
+  outline: 1px solid;
+  display: flex;
+  position: relative;
 
   .checkbox-input {
     position: absolute;
@@ -52,24 +43,69 @@ export const CheckboxStyle = styled.section`
   }
 `;
 
-export const CheckboxContainerStyle = styled.section`
-  display: flex;
+type CheckboxContainerStyleProps = {
+  $color: string;
+  $colorIcon: string;
+};
+
+export const CheckboxContainerStyle = styled.section<CheckboxContainerStyleProps>`
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: auto 1fr;
   align-items: center;
-  gap: 1em;
+  gap: 0.5em;
   width: fit-content;
 
   .checkbox-label {
     cursor: pointer;
     user-select: none;
+    width: 100%;
+  }
+
+  ${CheckboxStyle} {
+    color: ${props => props.$color};
+
+    &.is-checked {
+      ${CheckboxFillStyle} {
+        width: 100%;
+        height: 100%;
+        background: ${props => props.$color};
+        color: ${props => props.$colorIcon};
+      }
+
+      .checkbox-icon {
+        opacity: 1;
+      }
+    }
   }
 
   ${CheckboxStyle}:hover,
   &:has(.checkbox-label:hover) ${CheckboxStyle} {
-    box-shadow: 0 0 0 0.4em ${props => props.theme.colors.primary.main}88;
+    box-shadow: 0 0 0 0.3em ${props => props.$color}88;
+    padding: 2px;
+
+    ${CheckboxFillStyle} {
+      width: 20%;
+      height: 20%;
+      border-radius: 20%;
+      background: ${props => props.$color}88;
+      color: ${props => props.$colorIcon};
+    }
+
+    &:is(.is-checked) {
+      ${CheckboxFillStyle} {
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        background: ${props => props.$color};
+      }
+    }
   }
 
-  ${CheckboxStyle}:active,
-  &:has(.checkbox-label:active) ${CheckboxStyle} {
-    transform: scale(0.95);
+  ${CheckboxStyle}:focus,
+  &:has(.checkbox-input:focus) ${CheckboxStyle},
+  &:has(.checkbox-label:focus) ${CheckboxStyle} {
+    box-shadow: 0 0 0 0.3em ${props => props.$color}88;
+    padding: 2px;
   }
 `;