@studiocubics/components 0.0.1 → 0.0.2

package/src/Inputs/PasswordInput/PasswordInput.tsx

@@ -1,229 +0,0 @@
-"use client";
-
-import { cn } from "@studiocubics/utils";
-import {
-  useEffect,
-  useState,
-  type ComponentProps,
-  type ReactNode,
-} from "react";
-import {
-  eventWithRipple,
-  useRipple,
-  type UseRippleProps,
-} from "../../Misc/Ripple/Ripple";
-import styles from "./PasswordInput.module.css";
-import {
-  InputErrors,
-  type InputErrorsProps,
-} from "../../Display/InputErrors/InputErrors";
-import { Button } from "../Button/Button";
-import { PasswordStrength } from "../../Display/PasswordStrength/PasswordStrength";
-import {
-  ALL_PASSWORD_TESTS,
-  PASSWORD_REGEX,
-  usePasswordStrength,
-  type PasswordStrengthProps,
-} from "../../Display/PasswordStrength/usePasswordStrength";
-
-export interface PasswordInputProps
-  extends Omit<ComponentProps<"input">, "size"> {
-  startIcon?: ReactNode;
-  endIcon?: ReactNode;
-  label?: string;
-  error?: string | string[];
-  fullWidth?: boolean;
-  /**
-   * Use inputSize for <input size="10"/>
-   */
-  size?: "sm" | "md" | "lg";
-  inputSize?: ComponentProps<"input">["size"];
-  hideVisibilityToggle?: boolean;
-  disableStrengthMeter?: boolean;
-  disableEndIconGutters?: boolean;
-  disableStartIconGutters?: boolean;
-  slotProps?: {
-    ripple?: UseRippleProps;
-    startIcon?: ComponentProps<"span">;
-    endIcon?: ComponentProps<"span">;
-    root?: ComponentProps<"div">;
-    inputWrapper?: ComponentProps<"div">;
-    label?: ComponentProps<"label">;
-    error?: InputErrorsProps;
-    passwordStrength?: PasswordStrengthProps;
-  };
-}
-
-export function PasswordInput(props: PasswordInputProps) {
-  const {
-    startIcon,
-    endIcon,
-    label,
-    error,
-    fullWidth,
-    hideVisibilityToggle = false,
-    disableStrengthMeter = true,
-    disableEndIconGutters = false,
-    disableStartIconGutters = false,
-    size = "md",
-    inputSize,
-    onTouchStart,
-    onClick,
-    onBlur,
-    slotProps = {},
-    className: inputClass,
-    ...inputProps
-  } = props;
-  const { rippleElements, createRipple } = useRipple(slotProps.ripple);
-  const [isErrored, setIsErrored] = useState(error && !!error.length);
-  const [isVisible, setIsVisible] = useState(false);
-  const passwordStrength = usePasswordStrength({
-    password: typeof props.value == "string" ? props.value : undefined,
-    requiredTests:
-      slotProps.passwordStrength?.requiredTests ?? ALL_PASSWORD_TESTS,
-    disableStrengthMeter,
-  });
-
-  useEffect(() => {
-    setIsErrored(error && !!error.length);
-  }, [error]);
-
-  return (
-    <div
-      {...slotProps.root}
-      className={cn(
-        slotProps.root?.className,
-        styles.root,
-        styles[`size_${size}`],
-        fullWidth ? styles.fullWidth : undefined,
-        isErrored ? styles.errored : undefined,
-      )}
-    >
-      {label && (
-        <label
-          {...slotProps.label}
-          htmlFor={props.id || label}
-          className={cn(slotProps.label?.className, styles.label)}
-        >
-          {label}
-        </label>
-      )}
-      <div
-        {...slotProps.inputWrapper}
-        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}
-      >
-        {startIcon && (
-          <span
-            {...slotProps.startIcon}
-            className={cn(
-              styles.iconContainer,
-              slotProps.startIcon?.className,
-              disableStartIconGutters ? styles.disableGutters : undefined,
-            )}
-          >
-            {startIcon}
-          </span>
-        )}
-        <input
-          type={isVisible ? "text" : "password"}
-          className={cn(inputClass, styles.input)}
-          onTouchStart={eventWithRipple(createRipple, onTouchStart)}
-          onClick={eventWithRipple(createRipple, onClick)}
-          onBlur={(e) => {
-            setIsErrored(false);
-            onBlur?.(e);
-          }}
-          pattern={
-            !disableStrengthMeter
-              ? passwordStrength?.testsPassed
-                  .map((tp) => {
-                    const regex = PASSWORD_REGEX[tp].ex;
-                    return regex instanceof RegExp ? regex.source : regex;
-                  })
-                  .join("&")
-              : undefined
-          }
-          size={inputSize}
-          id={label}
-          {...inputProps}
-        />
-        {!hideVisibilityToggle && (
-          <Button
-            square
-            size="sm"
-            type="button"
-            onClick={() => setIsVisible(!isVisible)}
-          >
-            {isVisible ? (
-              <EyeIcon width={24} height={24} />
-            ) : (
-              <EyeOffIcon width={24} height={24} />
-            )}
-          </Button>
-        )}
-        {endIcon && (
-          <span
-            {...slotProps.endIcon}
-            className={cn(
-              styles.iconContainer,
-              slotProps.endIcon?.className,
-              disableEndIconGutters ? styles.disableGutters : undefined,
-            )}
-          >
-            {endIcon}
-          </span>
-        )}
-        {rippleElements}
-      </div>
-      {!disableStrengthMeter && (
-        <PasswordStrength
-          strength={passwordStrength?.strength}
-          {...slotProps.passwordStrength}
-        />
-      )}
-      {isErrored && (
-        <InputErrors
-          {...slotProps.error}
-          className={cn(slotProps.error?.className, styles.errorText)}
-          error={error}
-        />
-      )}
-    </div>
-  );
-}
-function EyeIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2.3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
-      <circle cx="12" cy="12" r="3" />
-    </svg>
-  );
-}
-function EyeOffIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2.3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
-      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
-      <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
-      <path d="m2 2 20 20" />
-    </svg>
-  );
-}

package/src/Inputs/Select/Select.module.css

@@ -1,138 +0,0 @@
-.root {
-  --input-border: var(--color-outline);
-  --input-color: var(--color-on-surface);
-  --input-fs: var(--fs-body2);
-  --input-background: var(--color-surface);
-  --input-focus-background: var(--color-background);
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap);
-  font-size: var(--input-fs);
-
-  &.fullWidth {
-    width: 100%;
-  }
-  &:has(.inputWrapper > .input:focus, .inputWrapper > .input:open) {
-    & > .inputWrapper {
-      outline: none;
-      background: var(--input-focus-background);
-    }
-    .label {
-      color: var(--input-color);
-    }
-  }
-  &:has(.inputWrapper > .input:disabled) {
-    opacity: 0.5;
-  }
-}
-
-.inputWrapper {
-  position: relative;
-  display: flex;
-  border-radius: var(--shape-br-sm);
-  outline: 1px solid var(--input-border);
-  background: var(--input-background);
-}
-.label {
-  font-size: 0.9em;
-  color: var(--color-on-background-faint);
-  margin-left: var(--spacing-gap);
-  width: fit-content;
-  cursor: pointer;
-}
-.input {
-  flex: 1 1 100%;
-  font-family: var(--font-p);
-  padding: var(--spacing-gap-2) calc(1.618 * var(--spacing-gap-2));
-  font-size: inherit;
-  border: none;
-  cursor: pointer;
-  background-color: var(--input-background);
-  color: var(--input-color);
-  border-radius: var(--shape-br-sm);
-  appearance: base-select;
-  transition: all var(--transition-time) var(--transition-tf);
-
-  &:focus,
-  &:open {
-    outline: none;
-    background-color: var(--input-focus-background);
-  }
-  & > option {
-    appearance: base-select;
-    cursor: pointer;
-    background-color: var(--input-background);
-    font-family: var(--font-p), sans-serif;
-    padding: var(--spacing-gap);
-    border-radius: var(--shape-br-sm);
-    transition: all var(--transition-time) var(--transition-tf);
-    &:hover {
-      background-color: var(--input-focus-background);
-    }
-    &:checked {
-      background-color: var(--color-primary-container);
-      color: var(--color-on-primary-container);
-      font-weight: bold;
-      transition: all var(--transition-time) var(--transition-tf);
-      &:hover {
-        background-color: var(--color-primary);
-        color: var(--color-on-primary);
-      }
-    }
-
-    &::checkmark {
-      display: none;
-    }
-  }
-}
-.input::picker(select) {
-  appearance: base-select;
-  border-radius: var(--shape-br-sm);
-  background-color: var(--input-background);
-  border: 1px solid var(--color-outline);
-  padding: var(--spacing-gap);
-}
-.input::picker-icon {
-  transition: rotate var(--transition-time) var(--transition-tf);
-}
-.input:open::picker-icon {
-  rotate: 180deg;
-
-  /* background-image: url('data:image/svg+xml;utf8,<svg fill="#FF0000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); */
-}
-.iconContainer {
-  display: flex;
-  justify-content: center;
-  font-size: inherit;
-  align-items: center;
-  color: var(--color-on-background-faint);
-  /* Start Icon */
-  &:nth-of-type(1) {
-    margin-left: var(--spacing-gap-2);
-    &.disableGutters {
-      margin-left: 0;
-    }
-  }
-  /* End Icon */
-  &:nth-of-type(2) {
-    margin-right: var(--spacing-gap-2);
-    &.disableGutters {
-      margin-right: 0;
-    }
-  }
-}
-
-.errored {
-  --input-border: var(--color-error);
-  --input-color: var(--color-error);
-  & > .inputWrapper {
-    outline: 1px solid var(--input-border);
-    & > .iconContainer {
-      color: var(--input-color);
-    }
-  }
-  & > .label {
-    color: var(--input-color);
-  }
-}

package/src/Inputs/Select/Select.tsx

@@ -1,136 +0,0 @@
-"use client";
-
-import { cn } from "@studiocubics/utils";
-import {
-  useEffect,
-  useState,
-  type ComponentProps,
-  type ReactNode,
-} from "react";
-import styles from "./Select.module.css";
-import {
-  eventWithRipple,
-  useRipple,
-  type UseRippleProps,
-} from "../../Misc/Ripple/Ripple";
-import {
-  InputErrors,
-  type InputErrorsProps,
-} from "../../Display/InputErrors/InputErrors";
-
-export interface SelectProps extends ComponentProps<"select"> {
-  startIcon?: ReactNode;
-  endIcon?: ReactNode;
-  label?: string;
-  error?: string | string[];
-  fullWidth?: boolean;
-  disableEndIconGutters?: boolean;
-  disableStartIconGutters?: boolean;
-  slotProps?: {
-    ripple?: UseRippleProps;
-    startIcon?: ComponentProps<"span">;
-    endIcon?: ComponentProps<"span">;
-    root?: ComponentProps<"div">;
-    inputWrapper?: ComponentProps<"div">;
-    label?: ComponentProps<"label">;
-    error?: InputErrorsProps;
-  };
-}
-
-export function Select(props: SelectProps) {
-  const {
-    startIcon,
-    endIcon,
-    label,
-    error,
-    fullWidth,
-    disableEndIconGutters = false,
-    disableStartIconGutters = false,
-    onTouchStart,
-    onClick,
-    onBlur,
-    slotProps: _slotProps,
-    className: inputClass,
-    ...inputProps
-  } = props;
-  const slotProps: NonNullable<SelectProps["slotProps"]> = _slotProps ?? {};
-  const { rippleElements, createRipple } = useRipple<HTMLSelectElement>(
-    slotProps.ripple,
-  );
-  const [isErrored, setIsErrored] = useState(error && !!error.length);
-
-  useEffect(() => {
-    setIsErrored(error && !!error.length);
-  }, [error]);
-
-  return (
-    <div
-      {...slotProps.root}
-      className={cn(
-        slotProps.root?.className,
-        styles.root,
-        fullWidth ? styles.fullWidth : undefined,
-        isErrored ? styles.errored : undefined,
-      )}
-    >
-      {label && (
-        <label
-          {...slotProps.label}
-          htmlFor={label}
-          className={cn(slotProps.label?.className, styles.label)}
-        >
-          {label}
-        </label>
-      )}
-      <div
-        {...slotProps.inputWrapper}
-        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}
-      >
-        {startIcon && (
-          <span
-            {...slotProps.startIcon}
-            className={cn(
-              styles.iconContainer,
-              slotProps.startIcon?.className,
-              disableStartIconGutters ? styles.disableGutters : undefined,
-            )}
-          >
-            {startIcon}
-          </span>
-        )}
-        <select
-          className={cn(inputClass, styles.input)}
-          onTouchStart={eventWithRipple(createRipple, onTouchStart)}
-          //TODO Causes issue on Firefox where the ripple fires after closing the dropdown
-          onClick={eventWithRipple(createRipple, onClick)}
-          onBlur={(e) => {
-            setIsErrored(false);
-            onBlur?.(e);
-          }}
-          id={label}
-          {...inputProps}
-        />
-        {endIcon && (
-          <span
-            {...slotProps.endIcon}
-            className={cn(
-              styles.iconContainer,
-              slotProps.endIcon?.className,
-              disableEndIconGutters ? styles.disableGutters : undefined,
-            )}
-          >
-            {endIcon}
-          </span>
-        )}
-        {rippleElements}
-      </div>
-      {isErrored && (
-        <InputErrors
-          {...slotProps.error}
-          className={cn(slotProps.error?.className, styles.errorText)}
-          error={error}
-        />
-      )}
-    </div>
-  );
-}

package/src/Inputs/Switch/Switch.module.css

@@ -1,119 +0,0 @@
-.root {
-  --switch-track-width: 54px;
-  --switch-track-height: 30px;
-  --switch-thumb-width: 60%;
-  --switch-track-color: var(--color-background-alpha);
-  --switch-track-checked-color: var(--color-background);
-  --switch-thumb-color: var(--color-primary-container);
-  --switch-thumb-checked-color: var(--color-primary);
-  --switch-thumb-text-color: var(--color-on-primary-container);
-  --switch-thumb-checked-text-color: var(--color-on-primary);
-  display: flex;
-  gap: var(--spacing-gap-2);
-  align-items: center;
-  &:not(.disabled) .switch:hover .thumb {
-    scale: 1;
-  }
-}
-.inputWrapper {
-  width: var(--switch-track-width);
-  height: var(--switch-track-height);
-  position: relative;
-  overflow: hidden;
-  padding-inline: 0.2em;
-}
-.disabled {
-  --switch-thumb-color: var(--color-surface-alpha);
-  --switch-thumb-text-color: var(--color-on-surface);
-  --switch-thumb-checked-color: var(--color-background-faint);
-  --switch-thumb-checked-text-color: var(--color-on-background-faint);
-
-  & .switch,
-  & .label {
-    cursor: not-allowed;
-  }
-}
-.input {
-  /* visibility: hidden; */
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  /* left: 99999px; */
-}
-.inputWrapper:has(.input:focus) .switch {
-  border: var(--focus-ring);
-  background: var(--switch-track-checked-color);
-}
-.switch {
-  display: block;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  position: relative;
-  background-color: var(--switch-track-color);
-  border: 1px solid var(--color-outline);
-  border-radius: var(--shape-br-md);
-  &.checked {
-    background: var(--switch-track-checked-color);
-    & .thumb {
-      left: 50%;
-      color: var(--switch-thumb-checked-text-color);
-      animation: checkon var(--transition-time) var(--transition-tf) forwards;
-      background-color: var(--switch-thumb-checked-color);
-    }
-  }
-}
-.thumb {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  translate: 0% -50%;
-  width: var(--switch-thumb-width);
-  height: 100%;
-  background-color: var(--switch-thumb-color);
-  transition: all var(--transition-time) var(--transition-tf);
-  color: var(--switch-thumb-text-color);
-  border-radius: var(--shape-br-md);
-  scale: 80%;
-  animation: checkoff var(--transition-time) var(--transition-tf) forwards;
-}
-.label {
-  cursor: pointer;
-}
-@keyframes checkon {
-  0% {
-    left: 0%;
-    width: var(--switch-thumb-width);
-    height: 100%;
-  }
-  50% {
-    left: 0;
-    width: 100%;
-    height: 80%;
-  }
-  100% {
-    left: calc(100% - var(--switch-thumb-width));
-    width: var(--switch-thumb-width);
-    height: 100%;
-  }
-}
-@keyframes checkoff {
-  0% {
-    left: 50%;
-    width: var(--switch-thumb-width);
-    height: 100%;
-  }
-  50% {
-    left: 0;
-    width: 100%;
-    height: 80%;
-  }
-  100% {
-    left: 0;
-    width: var(--switch-thumb-width);
-    height: 100%;
-  }
-}