@studiocubics/components 0.0.1

package/src/Inputs/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,229 @@
+"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

@@ -0,0 +1,138 @@
+.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

@@ -0,0 +1,136 @@
+"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

@@ -0,0 +1,119 @@
+.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%;
+  }
+}