polpo 0.1.13 → 0.1.16

package/src/components/form/slider/slider.component.tsx

@@ -0,0 +1,117 @@
+import { useMemo } from 'react';
+
+import { useClassNames, useInputHandlers } from '../../../hooks';
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import './slider.styles.css';
+
+type SliderProps = InputFieldProps<{
+  min?: number;
+  max?: number;
+  step?: number;
+  onlySlider?: boolean;
+}>;
+
+export const Slider = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  min,
+  max,
+  step,
+  onlySlider = false,
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = '',
+  autoComplete = 'off',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  ...fieldProps
+}: UnControlledComponentProps<SliderProps, number>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const onBlurInput = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (onBlur) onBlur(e);
+
+    const parsedValue = parseInt(`${value}`);
+
+    if (min !== undefined && parsedValue < min) {
+      setValue(min);
+    }
+
+    if (max !== undefined && parsedValue > max) {
+      setValue(max);
+    }
+
+    setValue(parsedValue);
+  };
+
+  const { isFocus, handlers } = useInputHandlers({
+    onBlur: onBlurInput,
+    onChange: e => setValue(+e.target.value),
+    onFocus: onFocus,
+  });
+
+  const inputSliderClassName = useClassNames({
+    'input-slider': true,
+    'is-focus': isFocus,
+  });
+
+  return (
+    <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
+      <section className={inputSliderClassName}>
+        <input
+          id={id}
+          type='range'
+          name={name}
+          className={`slider ${className}`}
+          style={style}
+          value={value}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
+          placeholder={placeholder}
+          disabled={disabled}
+          readOnly={readOnly}
+          min={min}
+          max={max}
+          step={step}
+          {...handlers}
+        />
+        {!onlySlider && (
+          <input
+            id={id}
+            type='number'
+            name={name}
+            className={`slider-number ${className}`}
+            style={style}
+            value={value}
+            autoComplete={autoComplete}
+            disabled={disabled}
+            readOnly={readOnly}
+            min={min}
+            max={max}
+            step={step}
+            {...handlers}
+          />
+        )}
+      </section>
+    </Field>
+  );
+};
+
+const SliderController = ({ rules, ...props }: ControllerGeneratorProps<SliderProps, number>) => {
+  return <Controller Component={Slider} defaultValue={0} inputProps={props} rules={rules} />;
+};
+
+Slider.Controller = SliderController;

package/src/components/form/slider/slider.styles.css

@@ -0,0 +1,94 @@
+@reference "polpo-tailwind-config/styles";
+
+.input-slider {
+    display: grid;
+    grid-template-columns: 1fr 50px;
+    align-items: center;
+    gap: 10px;
+
+    .slider {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        display: grid;
+        align-items: center;
+
+        &:focus {
+            outline: none;
+        }
+
+        &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 1em;
+            background: var(--color-primary-500);
+            box-shadow: 0 0 0 0 var(--color-gray-500);
+            margin-top: -8px;
+            transition: all 300ms ease;
+            cursor: pointer;
+        }
+
+        &::-webkit-slider-runnable-track {
+            height: 4px;
+            border-radius: 1em;
+            background: hsl(from var(--color-primary-200) h s l / 50%);
+            transition: all 300ms ease;
+        }
+
+        &:focus,
+        &:hover {
+            &::-webkit-slider-thumb {
+                background: var(--color-primary-500);
+                box-shadow: 0 0 0 6px hsl(from var(--color-primary-500) h s l / 50%);
+                cursor: grab;
+            }
+        }
+
+        &:active {
+            &::-webkit-slider-thumb {
+                box-shadow: 0 0 0 12px hsl(from var(--color-primary-500) h s l / 31%);
+                cursor: grabbing;
+            }
+        }
+
+        &:focus {
+            &::-webkit-slider-runnable-track {
+                background: var(--color-primary-300);
+            }
+        }
+    }
+
+    &:has(.slider-number:focus) .slider::-webkit-slider-thumb,
+    &:has(.slider-number:hover) .slider::-webkit-slider-thumb {
+        background: var(--color-primary-500);
+        box-shadow: 0 0 0 6px hsl(from var(--color-primary-500) h s l / 31%);
+    }
+
+    .slider-number {
+        transition: all 300ms ease;
+        border: 1px solid;
+        border-radius: 5px;
+        text-align: center;
+        @apply text-label;
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        width: 100%;
+        padding: 4px 8px;
+        font-weight: bold;
+        color: inherit;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+
+    &.is-focus {
+        .slider-number {
+            color: var(--color-primary-500);
+        }
+    }
+}

package/src/components/form/switch/index.ts

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

package/src/components/form/switch/switch.component.tsx

@@ -0,0 +1,166 @@
+import { useMemo } from 'react';
+import { IconType } from 'react-icons';
+
+import { useClassNames, useInputHandlers } from '../../../hooks';
+import { ColorTypes, SizeTypes } from '../../component.types';
+import { Tooltip } from '../../tooltips';
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import './switch.styles.css';
+
+const DotSizeMap = {
+  [SizeTypes.SMALL]: 1,
+  [SizeTypes.REGULAR]: 1.2,
+  [SizeTypes.LARGE]: 1.4,
+};
+
+const WidthMap = {
+  [SizeTypes.SMALL]: 2,
+  [SizeTypes.REGULAR]: 2.5,
+  [SizeTypes.LARGE]: 3,
+};
+
+type SwitchProps = {
+  leftLabel?: string;
+  rightLabel?: string;
+  label?: string;
+  dotHoverSize?: number;
+  padding?: number;
+  leftIcon?: IconType;
+  rightIcon?: IconType;
+  internalLeftIcon?: IconType;
+  internalRightIcon?: IconType;
+  leftIconTooltip?: string;
+  rightIconTooltip?: string;
+  color?: `${ColorTypes}`;
+  size?: `${SizeTypes}`;
+  width?: `${SizeTypes}`;
+};
+
+export const Switch = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = '',
+  autoComplete = 'off',
+  label,
+  leftLabel,
+  rightLabel,
+  width = SizeTypes.REGULAR,
+  size = SizeTypes.REGULAR,
+  dotHoverSize = 1.3,
+  padding = 0.25,
+  leftIcon: LeftIcon,
+  rightIcon: RightIcon,
+  internalLeftIcon: InternalLeftIcon,
+  internalRightIcon: InternalRightIcon,
+  leftIconTooltip,
+  rightIconTooltip,
+  color,
+  /*
+   * isDirty = false,
+   * isTouched = false,
+   * invalid = false,
+   * error,
+   */
+}: UnControlledComponentProps<SwitchProps, boolean>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const { handlers } = useInputHandlers<HTMLInputElement>({
+    onChange: e => setValue(e.target.checked),
+    onBlur: onBlur,
+    onFocus: onFocus,
+  });
+
+  const switchContainerClassName = useClassNames({
+    'switch-container': true,
+    [className]: Boolean(className),
+    [`color-${color}`]: Boolean(color),
+  });
+
+  const switchClassName = useClassNames({
+    switch: true,
+    'is-checked': value,
+    'is-readonly': !disabled && readOnly,
+  });
+
+  const dotSize = DotSizeMap[size] ?? DotSizeMap[SizeTypes.REGULAR];
+  const _width = (WidthMap[width] ?? WidthMap[SizeTypes.REGULAR]) * dotSize;
+  const _padding = Math.min(padding, dotSize);
+
+  return (
+    <section
+      className={switchContainerClassName}
+      style={
+        {
+          ...style,
+          '--width': `${_width}em`,
+          '--dot-size': `${dotSize}em`,
+          '--dot-hover-size': `${dotSize * Math.min(Math.max(dotHoverSize, 1), 2)}em`,
+          '--padding': `${_padding}em`,
+        } as React.CSSProperties
+      }
+    >
+      {leftLabel ? (
+        <Typography variant='label-form' className='switch-label' htmlFor={id}>
+          {leftLabel}
+        </Typography>
+      ) : null}
+      {LeftIcon !== undefined && (
+        <Tooltip content={leftIconTooltip} disabled={!leftIconTooltip} offset={10}>
+          <LeftIcon size={`${dotSize * 0.7}em`} className='switch-icon' onClick={() => setValue(!value)} />
+        </Tooltip>
+      )}
+      <section className={switchClassName}>
+        {InternalLeftIcon !== undefined && (
+          <span className='switch-internal-left-icon'>
+            <InternalLeftIcon size={`${dotSize * 0.7}em`} />
+          </span>
+        )}
+        {InternalRightIcon !== undefined && (
+          <span className='switch-internal-right-icon'>
+            <InternalRightIcon size={`${dotSize * 0.7}em`} />
+          </span>
+        )}
+        <span className='switch-dot' />
+        <input
+          id={id}
+          type='checkbox'
+          name={name}
+          className={`switch-checkbox ${className}`}
+          style={style}
+          checked={value}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
+          placeholder={placeholder}
+          disabled={disabled || readOnly}
+          {...handlers}
+        />
+      </section>
+      {RightIcon !== undefined && (
+        <Tooltip content={rightIconTooltip} disabled={!rightIconTooltip} offset={10}>
+          <RightIcon size={`${dotSize * 0.7}em`} className='switch-icon' onClick={() => setValue(!value)} />
+        </Tooltip>
+      )}
+      {label || rightLabel ? (
+        <Typography variant='label-form' className='switch-label' htmlFor={id}>
+          {label || rightLabel}
+        </Typography>
+      ) : null}
+    </section>
+  );
+};
+
+const SwitchController = ({ rules, ...props }: ControllerGeneratorProps<SwitchProps, boolean>) => {
+  return <Controller Component={Switch} defaultValue={false} inputProps={props} rules={rules} />;
+};
+
+Switch.Controller = SwitchController;

package/src/components/form/switch/switch.styles.css

@@ -0,0 +1,165 @@
+@reference "polpo-tailwind-config/styles";
+
+.switch-container {
+    --width: attr(data-width);
+    --dot-size: attr(data-dot-size);
+    --dot-hover-size: attr(data-dot-hover-size);
+    --padding: attr(data-padding);
+    --color: var(--color-gray-500);
+    --color-dark: var(--color-gray-800);
+    --color-contrast: var(--color-gray-50);
+
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    width: fit-content;
+
+    .switch {
+        width: calc(var(--width) + var(--padding) * 2);
+        border-radius: 100em;
+        background: var(--color-background-paper);
+        padding: var(--padding);
+        transition: all 300ms ease;
+        position: relative;
+
+        .switch-dot {
+            width: var(--dot-size);
+            height: var(--dot-size);
+            border-radius: 100em;
+            background: var(--color);
+            display: block;
+            transition: all 300ms ease;
+            margin-left: 0;
+            position: relative;
+            z-index: 1;
+        }
+
+        .switch-icon {
+            cursor: pointer;
+            display: block;
+        }
+
+        .switch-internal-left-icon,
+        .switch-internal-right-icon {
+            width: var(--dot-size);
+            height: var(--dot-size);
+            position: absolute;
+            top: var(--padding);
+            display: grid;
+            place-content: center;
+            color: var(--color-contrast);
+            transition: all 300ms ease;
+        }
+
+        .switch-internal-left-icon {
+            left: var(--padding);
+        }
+
+        .switch-internal-right-icon {
+            right: var(--padding);
+        }
+
+        &.is-checked {
+            background: var(--color);
+
+            .switch-dot {
+                margin-left: calc(var(--width) - var(--dot-size));
+                background: color-mix(in hsl, var(--color), var(--color-contrast) 75%);
+            }
+        }
+
+        &:not(.is-readonly):has(input:disabled) {
+            background: var(--color-background-disabled);
+
+            .switch-dot {
+                background: var(--color-foreground-disabled);
+            }
+
+            .switch-internal-left-icon,
+            .switch-internal-right-icon {
+                color: var(--color-foreground-disabled);
+            }
+
+            &.is-checked {
+                background: var(--color-dark);
+            }
+        }
+
+        .switch-checkbox {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+            opacity: 0;
+            z-index: 3;
+        }
+    }
+
+    .switch-label {
+        cursor: pointer;
+        user-select: none;
+        padding: 0 0.5em;
+    }
+
+    .switch:not(:has(.is-readonly, input:disabled)):hover .switch-dot,
+    &:has(.switch-icon:hover) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot,
+    &:has(.switch-label:hover) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot {
+        box-shadow: 0 0 0 calc(0.3 * var(--dot-size)) color-mix(in hsl, var(--color) 50%, var(--color-contrast));
+    }
+
+    .switch:not(:has(.is-readonly, input:disabled)):active .switch-dot,
+    &:has(.switch-icon:active) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot,
+    &:has(.switch-label:active) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot {
+        width: var(--dot-hover-size);
+    }
+
+    .switch:not(:has(.is-readonly, input:disabled)).is-checked:active .switch-dot,
+    &:has(.switch-icon:active) .switch:not(:has(.is-readonly, input:disabled)).is-checked .switch-dot,
+    &:has(.switch-label:active) .switch:not(:has(.is-readonly, input:disabled)).is-checked .switch-dot {
+        margin-left: calc(var(--width) - var(--dot-hover-size));
+    }
+
+    &.color-primary {
+        --color: var(--color-primary-500);
+        --color-dark: var(--color-primary-700);
+        --color-contrast: var(--color-primary-50);
+    }
+
+    &.color-secondary {
+        --color: var(--color-secondary-500);
+        --color-dark: var(--color-secondary-700);
+        --color-contrast: var(--color-secondary-50);
+    }
+
+    &.color-tertiary {
+        --color: var(--color-tertiary-500);
+        --color-dark: var(--color-tertiary-700);
+        --color-contrast: var(--color-tertiary-50);
+    }
+
+    &.color-active {
+        --color: var(--color-active-500);
+        --color-dark: var(--color-active-700);
+        --color-contrast: var(--color-active-50);
+    }
+
+    &.color-warning {
+        --color: var(--color-warning-500);
+        --color-dark: var(--color-warning-700);
+        --color-contrast: var(--color-warning-50);
+    }
+
+    &.color-alert {
+        --color: var(--color-alert-500);
+        --color-dark: var(--color-alert-700);
+        --color-contrast: var(--color-alert-50);
+    }
+
+    &.color-info {
+        --color: var(--color-info-500);
+        --color-dark: var(--color-info-700);
+        --color-contrast: var(--color-info-50);
+    }
+}

package/src/components/form/textarea/index.ts

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

package/src/components/form/textarea/textarea.component.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+
+import { useClassNames, useInputHandlers } from '../../../hooks';
+import { Controller } from '../controller';
+import { Field, InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+import './textarea.styles.css';
+
+type TextareaProps = InputFieldProps<{
+  rows?: number;
+  resize?: React.CSSProperties['resize'];
+  leftIcon?: never;
+  rightIcon?: never;
+}>;
+
+export const Textarea = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  rows = 4,
+  resize = 'vertical',
+  className = '',
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = '',
+  autoComplete = 'off',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  ...fieldProps
+}: UnControlledComponentProps<TextareaProps, string>) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const { handlers, isFocus } = useInputHandlers<HTMLTextAreaElement>({
+    onBlur: onBlur,
+    onChange: e => setValue(e.target.value),
+    onFocus: onFocus,
+  });
+
+  const textareaClassName = useClassNames({
+    textarea: true,
+    [className]: Boolean(className),
+  });
+
+  return (
+    <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
+      <textarea
+        id={id}
+        name={name}
+        className={textareaClassName}
+        style={{
+          resize: resize,
+          ...style,
+        }}
+        value={value}
+        rows={rows}
+        {...handlers}
+        autoFocus={autoFocus}
+        autoComplete={autoComplete}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+    </Field>
+  );
+};
+
+const TextareaController = ({ rules, ...props }: ControllerGeneratorProps<TextareaProps, string>) => {
+  return <Controller Component={Textarea} defaultValue='' inputProps={props} rules={rules} />;
+};
+
+Textarea.Controller = TextareaController;

package/src/components/form/textarea/textarea.styles.css

@@ -0,0 +1,7 @@
+@reference "polpo-tailwind-config/styles";
+
+.textarea {
+    border: 0;
+    outline: 0;
+    field-sizing: content;
+}

package/src/components/image/image.tsx

@@ -0,0 +1,7 @@
+import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+
+type ImageProps = DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> & {};
+
+export const Image = ({ alt = '', loading = 'eager', ...props }: ImageProps) => {
+  return <img loading={loading} alt={alt} {...props} width='100%' />;
+};

package/src/components/image/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,15 @@
+export * from './accordion';
+export * from './button';
+export * from './cards';
+export * from './cursor';
+export * from './form';
+export * from './image';
+export * from './infinity-scroll';
+export * from './line';
+export * from './modals';
+export * from './ripple';
+export * from './smart-table';
+export * from './tabs';
+export * from './tag';
+export * from './tooltips';
+export * from './typography';

package/src/components/infinity-scroll/index.ts

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