polpo 0.1.1 → 0.1.2

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

@@ -1,18 +1,40 @@
 import { useMemo } from 'react';
+import { DefaultTheme, useTheme } from 'styled-components';
 
+import { ColorVariants } from '../../../core/variants';
 import { Icon, IconNameT } from '../../icon';
 import { Typography } from '../../typography';
 import { Controller } from '../controller';
 import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
 
-import { CheckboxContainerStyle, CheckboxStyle } from './checkbox.style';
+import { CheckboxContainerStyle, CheckboxFillStyle, CheckboxStyle } from './checkbox.style';
 
 import { useInputHandlers } from '@polpo/hooks';
 
+type CheckboxColor = {
+  color: string;
+  colorIcon: string;
+};
+
+const getCheckboxColor = (theme: DefaultTheme, color: `${ColorVariants}`): CheckboxColor => {
+  const checkboxColors: Record<ColorVariants, CheckboxColor> = {
+    [ColorVariants.Primary]: { color: theme.colors.primary.main, colorIcon: theme.colors.primary.contrast },
+    [ColorVariants.Secondary]: { color: theme.colors.secondary.main, colorIcon: theme.colors.secondary.contrast },
+    [ColorVariants.Tertiary]: { color: theme.colors.tertiary.main, colorIcon: theme.colors.tertiary.contrast },
+    [ColorVariants.Info]: { color: theme.colors.info.main, colorIcon: theme.colors.info.contrast },
+    [ColorVariants.Active]: { color: theme.colors.active.main, colorIcon: theme.colors.active.contrast },
+    [ColorVariants.Warning]: { color: theme.colors.warning.main, colorIcon: theme.colors.warning.contrast },
+    [ColorVariants.Alert]: { color: theme.colors.alert.main, colorIcon: theme.colors.alert.contrast },
+  };
+
+  return checkboxColors[color] ?? checkboxColors[ColorVariants.Primary];
+};
+
 type CheckboxProps = {
-  label?: string;
+  label?: React.ReactNode;
   placeholder?: never;
   icon?: IconNameT;
+  color?: `${ColorVariants}`;
 };
 
 export const Checkbox = ({
@@ -29,6 +51,7 @@ export const Checkbox = ({
   autoComplete = 'off',
   icon = 'checkmark',
   label,
+  color = ColorVariants.Primary,
   /*
    * isDirty = false,
    * isTouched = false,
@@ -36,6 +59,7 @@ export const Checkbox = ({
    * error,
    */
 }: UnControlledComponentProps<CheckboxProps, boolean>) => {
+  const theme = useTheme();
   const id = useMemo(() => crypto.randomUUID(), []);
   const { handlers } = useInputHandlers<HTMLInputElement>({
     onChange: e => setValue(e.target.checked),
@@ -43,10 +67,20 @@ export const Checkbox = ({
     onFocus: onFocus,
   });
 
+  const checkboxColor = getCheckboxColor(theme, color);
+
   return (
-    <CheckboxContainerStyle className={className} style={style}>
+    <CheckboxContainerStyle
+      $color={checkboxColor.color}
+      $colorIcon={checkboxColor.colorIcon}
+      className={className}
+      style={style}
+      onClick={e => e.stopPropagation()}
+    >
       <CheckboxStyle className={value ? 'is-checked' : ''}>
-        <Icon name={icon} className='checkbox-icon' />
+        <CheckboxFillStyle>
+          <Icon name={icon} className='checkbox-icon' />
+        </CheckboxFillStyle>
         <input
           id={id}
           type='checkbox'

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

@@ -3,6 +3,8 @@ import { ContainerDecorator } from '../form.stories.types';
 
 import { Field } from './field';
 
+import { FieldOrientation, FieldVariant } from '@polpo/ui';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 export const FieldSharedArgTypes: Meta<typeof Field>['argTypes'] = {
@@ -10,7 +12,8 @@ export const FieldSharedArgTypes: Meta<typeof Field>['argTypes'] = {
   rightIcon: { options: [undefined, ...IconNames.toSorted()] },
   leftIcon: { options: [undefined, ...IconNames.toSorted()] },
   errorIcon: { options: [undefined, ...IconNames.toSorted()] },
-  variant: { control: 'select', options: [undefined, 'full-border', 'content-border', 'line'] },
+  fieldOrientation: { control: 'inline-radio', options: Object.values(FieldOrientation) },
+  variant: { control: 'select', options: [undefined, ...Object.values(FieldVariant)] },
 };
 
 export const FieldSharedArgs: StoryObj<typeof Field>['args'] = {
@@ -37,6 +40,7 @@ const meta: Meta<typeof Field> = {
     ...FieldSharedArgs,
     leftIcon: 'facebook',
     rightIcon: 'airplane',
+    fieldOrientation: 'vertical',
   },
   decorators: [ContainerDecorator],
 };

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

@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 export const FieldStyle = styled.section`
   display: grid;
+  grid-auto-columns: auto;
   gap: 0.5em;
+  transition: all 200ms ease;
 
   .field-content {
     display: grid;
@@ -76,4 +78,14 @@ export const FieldStyle = styled.section`
       padding: 0 1em;
     }
   }
+
+  &.variant-inline {
+    grid-auto-flow: column;
+    padding: 0.5em 0;
+    align-items: center;
+
+    .field-label {
+      width: auto;
+    }
+  }
 `;

package/src/components/form/field/field.tsx

@@ -4,7 +4,7 @@ import { Icon, IconNameT } from '../../icon';
 import { Typography } from '../../typography';
 
 import { FieldStyle } from './field.style';
-import { FieldProps, FieldVariant } from './field.types';
+import { FieldOrientation, FieldProps, FieldVariant } from './field.types';
 
 import { useClassNames } from '@polpo/hooks';
 
@@ -27,6 +27,7 @@ const FieldComponent = (
     error,
     onClickLeftIcon,
     onClickRightIcon,
+    fieldOrientation = FieldOrientation.VERTICAL,
     children,
     isFocus = false,
     variant,
@@ -39,6 +40,7 @@ const FieldComponent = (
     'variant-content-border': variant === FieldVariant.CONTENT_BORDER,
     'variant-content-line': variant === FieldVariant.CONTENT_LINE,
     'variant-full-border': variant === FieldVariant.FULL_BORDER,
+    'variant-inline': fieldOrientation === FieldOrientation.HORIZONTAL,
   });
 
   const handleClick = (callback?: () => void) => (e: React.MouseEvent) => {

package/src/components/form/field/field.types.ts

@@ -8,6 +8,11 @@ export enum FieldVariant {
   CONTENT_LINE = 'line',
 }
 
+export enum FieldOrientation {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}
+
 type FieldSharedProps = {
   rightIcon?: IconNameT;
   leftIcon?: IconNameT;
@@ -23,6 +28,7 @@ export type FieldProps = FieldSharedProps & {
   id: string;
   error?: string;
   isFocus?: boolean;
+  fieldOrientation?: `${FieldOrientation}`;
 };
 
 export type InputFieldProps<T> = T & FieldSharedProps;

package/src/components/form/input-color/input-color.style.ts

@@ -1,17 +1,20 @@
 import styled from 'styled-components';
 
+import { Modal } from '../../modals';
+
 export const InputColorStyle = styled.section`
   display: grid;
   grid-auto-flow: column;
   align-items: center;
   justify-content: start;
+  gap: 0.5em;
 
   .input-color-value {
     margin-left: 10px;
   }
 
   .color-input {
-    padding: 0 1em;
+    padding-right: 1em;
     border-radius: inherit;
     width: 100%;
     font-size: ${props => props.theme.constants.typography.label.fontSize};
@@ -41,9 +44,7 @@ export const InputColorBoxStyle = styled.section`
   }
 `;
 
-export const InputColorSelectorStyle = styled.section`
-  position: fixed;
-  z-index: 1;
+export const InputColorSelectorStyle = styled(Modal)`
   display: grid;
   gap: 10px;
   background: ${props => props.theme.colors.background.main};

package/src/components/form/input-color/input-color.tsx

@@ -1,17 +1,16 @@
 import Color from 'color';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
 import useEyeDropper from 'use-eye-dropper';
 
 import { Icon } from '../../icon';
-import { Modal } from '../../modals';
 import { Controller } from '../controller';
 import { Field, InputFieldProps } from '../field';
 import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
 
 import { InputColorBoxStyle, InputColorSelectorStyle, InputColorStyle } from './input-color.style';
 
-import { useInputHandlers, useModalInContainer } from '@polpo/hooks';
+import { useInputHandlers } from '@polpo/hooks';
 
 type ColorProps = InputFieldProps<{
   showValueText?: boolean;
@@ -43,6 +42,8 @@ export const InputColor = ({
   const { open, isSupported } = useEyeDropper();
   const [inputValue, setInputValue] = useState<string>(value);
   const id = useMemo(() => crypto.randomUUID(), []);
+  const containerRef = useRef<HTMLElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
   const { handlers, isFocus } = useInputHandlers({
     onChange: e => setInputValue(e.target.value),
     onBlur: e => {
@@ -54,10 +55,6 @@ export const InputColor = ({
       onFocus && onFocus(e);
     },
   });
-  const { modalRef, isVisible, setIsVisible, modalStyle, containerRef } = useModalInContainer({
-    position: 'bottom',
-    distancePercentage: 0,
-  });
 
   const borderColor = useMemo(() => {
     const color = Color(value === '' ? '#000000' : value);
@@ -88,13 +85,7 @@ export const InputColor = ({
 
   return (
     <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
-      <InputColorStyle
-        onClick={e => {
-          e.stopPropagation();
-          setIsVisible(true);
-        }}
-        ref={containerRef}
-      >
+      <InputColorStyle onClick={() => setIsOpen(true)} ref={containerRef}>
         <InputColorBoxStyle
           className={className}
           style={{
@@ -103,36 +94,7 @@ export const InputColor = ({
             color: value,
             ...style,
           }}
-        >
-          <Modal id='input-color' isOpen={isVisible}>
-            <InputColorSelectorStyle ref={modalRef} style={modalStyle}>
-              <HexAlphaColorPicker id={id} color={value} onChange={setValue} />
-              <section className='color-input-container'>
-                {isSupported() ? (
-                  <Icon
-                    name='dropper'
-                    onClick={() => {
-                      void openEyeDropper();
-                    }}
-                  />
-                ) : (
-                  <span />
-                )}
-                <HexColorInput
-                  className='color-input'
-                  id={id}
-                  name={name}
-                  color={value}
-                  placeholder='Type a color'
-                  prefixed
-                  alpha
-                  onChange={setValue}
-                />
-                <span />
-              </section>
-            </InputColorSelectorStyle>
-          </Modal>
-        </InputColorBoxStyle>
+        />
         {showValueText ? (
           <input
             id={id}
@@ -148,6 +110,41 @@ export const InputColor = ({
           />
         ) : null}
       </InputColorStyle>
+
+      <InputColorSelectorStyle
+        id='input-color'
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        position='bottom right'
+        offset={5}
+        backdrop='transparent'
+        containerRef={containerRef}
+      >
+        <HexAlphaColorPicker id={id} color={value} onChange={setValue} />
+        <section className='color-input-container'>
+          {isSupported() ? (
+            <Icon
+              name='dropper'
+              onClick={() => {
+                void openEyeDropper();
+              }}
+            />
+          ) : (
+            <span />
+          )}
+          <HexColorInput
+            className='color-input'
+            id={id}
+            name={name}
+            color={value}
+            placeholder='Type a color'
+            prefixed
+            alpha
+            onChange={setValue}
+          />
+          <span />
+        </section>
+      </InputColorSelectorStyle>
     </Field>
   );
 };

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

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
-import { Grid } from '../../../layouts';
+import { ColorVariants } from '../../../core/variants';
+import { Grid, SectionLayout } from '../../../layouts';
 import { UnControlledComponentArgTypes } from '../form.stories.types';
 
 import { Radio } from './radio';
@@ -15,6 +16,7 @@ const meta: Meta<typeof Radio> = {
     label: { control: 'text' },
     radioValue: { control: false },
     placeholder: { table: { disable: true } },
+    color: { control: { type: 'inline-radio', options: Object.values(ColorVariants) } },
   },
   args: {
     label: 'Option A',
@@ -26,10 +28,10 @@ const meta: Meta<typeof Radio> = {
     return (
       <Grid gap='0.4em'>
         <Radio {...args} name='radio' value={value} radioValue='A' setValue={setValue} />
-        <Radio name='radio' value={value} label='Option B' radioValue='B' setValue={setValue} />
-        <Radio name='radio' value={value} label='Option C' radioValue='C' setValue={setValue} />
-        <Radio name='radio' value={value} label='Option D' radioValue='D' setValue={setValue} />
-        <Radio name='radio' value={value} label='Option E' radioValue='E' setValue={setValue} />
+        <Radio {...args} name='radio' value={value} label='Option B' radioValue='B' setValue={setValue} />
+        <Radio {...args} name='radio' value={value} label='Option C' radioValue='C' setValue={setValue} />
+        <Radio {...args} name='radio' value={value} label='Option D' radioValue='D' setValue={setValue} />
+        <Radio {...args} name='radio' value={value} label='Option E' radioValue='E' setValue={setValue} />
       </Grid>
     );
   },
@@ -41,3 +43,25 @@ type Story = StoryObj<typeof Radio>;
 export const Default: Story = {
   args: {},
 };
+
+export const Colors: Story = {
+  args: {},
+  argTypes: {
+    color: { control: false },
+  },
+  render: args => {
+    const [value, setValue] = useState('Primary');
+
+    return (
+      <SectionLayout>
+        <Radio {...args} color='primary' value={value} setValue={setValue} radioValue='Primary' label='Primary' />
+        <Radio {...args} color='secondary' value={value} setValue={setValue} radioValue='Secondary' label='Secondary' />
+        <Radio {...args} color='tertiary' value={value} setValue={setValue} radioValue='Tertiary' label='Tertiary' />
+        <Radio {...args} color='info' value={value} setValue={setValue} radioValue='Info' label='Info' />
+        <Radio {...args} color='active' value={value} setValue={setValue} radioValue='Active' label='Active' />
+        <Radio {...args} color='warning' value={value} setValue={setValue} radioValue='Warning' label='Warning' />
+        <Radio {...args} color='alert' value={value} setValue={setValue} radioValue='Alert' label='Alert' />
+      </SectionLayout>
+    );
+  },
+};

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

@@ -1,33 +1,24 @@
 import styled from 'styled-components';
 
+export const RadioFillStyle = styled.section`
+  transition: all 200ms ease-out;
+  border-radius: inherit;
+  margin: auto;
+  width: 0;
+  height: 0;
+`;
+
 export const RadioStyle = styled.section`
   border-radius: 50%;
-  background: ${props => props.theme.colors.gray9};
-  color: ${props => props.theme.colors.gray6};
-  border: 2px solid;
+  background: ${props => props.theme.colors.background.paper};
   transition: all 300ms ease;
+  width: 1.4em;
+  height: 1.4em;
+  outline: 2px solid;
+  display: flex;
   position: relative;
   padding: 2px;
 
-  .radio-dot {
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-    display: block;
-    opacity: 0;
-    transition: opacity 300ms ease;
-    background: ${props => props.theme.colors.primary.main};
-  }
-
-  &.is-checked {
-    background: ${props => props.theme.colors.primary.contrast};
-    color: ${props => props.theme.colors.primary.main};
-
-    .radio-dot {
-      opacity: 1;
-    }
-  }
-
   .radio-input {
     position: absolute;
     top: 0;
@@ -40,7 +31,11 @@ export const RadioStyle = styled.section`
   }
 `;
 
-export const RadioContainerStyle = styled.section`
+type RadioContainerStyleProps = {
+  $color: string;
+};
+
+export const RadioContainerStyle = styled.section<RadioContainerStyleProps>`
   display: flex;
   align-items: center;
   gap: 1em;
@@ -51,8 +46,34 @@ export const RadioContainerStyle = styled.section`
     user-select: none;
   }
 
+  ${RadioStyle} {
+    color: ${props => props.$color};
+
+    &.is-checked {
+      ${RadioFillStyle} {
+        width: 100%;
+        height: 100%;
+        background: ${props => props.$color};
+      }
+    }
+  }
+
   ${RadioStyle}:hover,
   &:has(.radio-label:hover) ${RadioStyle} {
-    box-shadow: 0 0 0 0.4em ${props => props.theme.colors.primary.main}88;
+    box-shadow: 0 0 0 0.4em ${props => props.$color}88;
+
+    ${RadioFillStyle} {
+      width: 20%;
+      height: 20%;
+      background: ${props => props.$color}88;
+    }
+
+    &:is(.is-checked) {
+      ${RadioFillStyle} {
+        width: 80%;
+        height: 80%;
+        background: ${props => props.$color};
+      }
+    }
   }
 `;

package/src/components/form/radio/radio.tsx

@@ -1,17 +1,34 @@
 import { useMemo } from 'react';
+import { DefaultTheme, useTheme } from 'styled-components';
 
+import { ColorVariants } from '../../../core/variants';
 import { Typography } from '../../typography';
 import { Controller } from '../controller';
 import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
 
-import { RadioContainerStyle, RadioStyle } from './radio.style';
+import { RadioContainerStyle, RadioFillStyle, RadioStyle } from './radio.style';
 
 import { useInputHandlers } from '@polpo/hooks';
 
+const getRadioColor = (theme: DefaultTheme, color: `${ColorVariants}`): string => {
+  const radioColors: Record<ColorVariants, string> = {
+    [ColorVariants.Primary]: theme.colors.primary.main,
+    [ColorVariants.Secondary]: theme.colors.secondary.main,
+    [ColorVariants.Tertiary]: theme.colors.tertiary.main,
+    [ColorVariants.Info]: theme.colors.info.main,
+    [ColorVariants.Active]: theme.colors.active.main,
+    [ColorVariants.Warning]: theme.colors.warning.main,
+    [ColorVariants.Alert]: theme.colors.alert.main,
+  };
+
+  return radioColors[color] ?? radioColors[ColorVariants.Primary];
+};
+
 type RadioProps = {
   label?: string;
   radioValue: string;
   placeholder?: never;
+  color?: `${ColorVariants}`;
 };
 
 export const Radio = ({
@@ -28,6 +45,7 @@ export const Radio = ({
   autoComplete = 'off',
   radioValue,
   label,
+  color = ColorVariants.Primary,
   /*
    * isDirty = false,
    * isTouched = false,
@@ -35,6 +53,7 @@ export const Radio = ({
    * error,
    */
 }: UnControlledComponentProps<RadioProps, string>) => {
+  const theme = useTheme();
   const id = useMemo(() => crypto.randomUUID(), []);
   const { handlers } = useInputHandlers({
     onChange: e => setValue(e.target.value),
@@ -43,9 +62,9 @@ export const Radio = ({
   });
 
   return (
-    <RadioContainerStyle className={className} style={style}>
+    <RadioContainerStyle $color={getRadioColor(theme, color)} className={className} style={style}>
       <RadioStyle className={radioValue === value ? 'is-checked' : ''}>
-        <span className='radio-dot' />
+        <RadioFillStyle />
         <input
           id={id}
           type='radio'