@studiocubics/components 0.0.1

package/src/Inputs/Switch/Switch.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import {
+  type ChangeEvent,
+  type ComponentProps,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import styles from "./Switch.module.css";
+import { cn, mergeRefs } from "@studiocubics/utils";
+
+/**
+ * Props for the Switch component
+ *
+ * @group switch
+ * @category inputs
+ */
+export interface SwitchProps
+  extends Omit<ComponentProps<"input">, "defaultValue" | "value" | "onChange"> {
+  /**
+   * Default value of the switch in boolean
+   */
+  defaultValue?: boolean;
+  /**
+   * Value of the switch in boolean
+   */
+  value?: boolean | null;
+  /**
+   * Event handler for when the value of the switch changes
+   */
+  onChange?: (e: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+  /**
+   * Label for the switch
+   */
+  label?: string;
+  /**
+   * Icon to render in the thumb of the switch
+   */
+  icon?: ReactNode;
+  /**
+   * Switch slots props
+   */
+  slotProps?: {
+    inputWrapper?: ComponentProps<"div">;
+    label?: ComponentProps<"label">;
+  };
+  // TODO add size
+  // TODO add color
+}
+
+/**
+ * A switch can be used to show on/off state for form inputs, theme toggles etc.
+ *
+ * @group switch
+ * @category inputs
+ */
+export function Switch(props: SwitchProps) {
+  const {
+    value,
+    defaultValue,
+    type = "checkbox",
+    onChange,
+    className,
+    ref,
+    label,
+    "aria-label": ariaLabel,
+    icon,
+    disabled,
+    slotProps = {},
+    ...rest
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const thumbRef = useRef<HTMLSpanElement>(null);
+  const [checked, setChecked] = useState(value);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartX = useRef(0);
+  const dragStartChecked = useRef(false);
+
+  useEffect(() => {
+    setChecked(value);
+  }, [value]);
+
+  const handleDragStart = (clientX: number) => {
+    if (disabled) return;
+    setIsDragging(true);
+    dragStartX.current = clientX;
+    dragStartChecked.current = checked ?? false;
+  };
+
+  const handleDragMove = (clientX: number) => {
+    if (!isDragging || disabled) return;
+
+    const delta = clientX - dragStartX.current;
+    const threshold = 10; // Minimum drag distance to trigger change
+
+    if (Math.abs(delta) > threshold) {
+      const newChecked = delta > 0;
+      if (newChecked !== checked) {
+        setChecked(newChecked);
+        if (inputRef.current && onChange) {
+          inputRef.current.checked = newChecked;
+          const event = new Event("change", { bubbles: true }) as any;
+          Object.defineProperty(event, "currentTarget", {
+            value: inputRef.current,
+          });
+          onChange(event, newChecked);
+        }
+      }
+    }
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => handleDragMove(e.clientX);
+    const handleTouchMove = (e: TouchEvent) =>
+      handleDragMove(e.touches[0].clientX);
+    const handleMouseUp = () => handleDragEnd();
+    const handleTouchEnd = () => handleDragEnd();
+
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("touchmove", handleTouchMove);
+      document.addEventListener("touchend", handleTouchEnd);
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [isDragging, checked]);
+
+  return (
+    <div
+      className={cn(className, styles.root, disabled ? styles.disabled : "")}
+    >
+      <div
+        {...slotProps.inputWrapper}
+        className={cn(styles.inputWrapper, slotProps.inputWrapper?.className)}
+      >
+        <input
+          {...rest}
+          id={label}
+          type={type}
+          ref={mergeRefs(ref, inputRef)}
+          className={styles.input}
+          role="switch"
+          aria-checked={checked ?? false}
+          aria-label={ariaLabel || label}
+          disabled={disabled}
+          onChange={(e) => {
+            const c = e.currentTarget.checked;
+            setChecked(c);
+            if (onChange) onChange(e, c);
+          }}
+        />
+        <span
+          className={cn(
+            styles.switch,
+            checked ? styles.checked : "",
+            isDragging ? styles.dragging : ""
+          )}
+          onClick={() => !isDragging && inputRef.current?.click()}
+          aria-hidden="true"
+        >
+          <span
+            ref={thumbRef}
+            className={styles.thumb}
+            onMouseDown={(e) => handleDragStart(e.clientX)}
+            onTouchStart={(e) => handleDragStart(e.touches[0].clientX)}
+          >
+            {icon}
+          </span>
+        </span>
+      </div>
+      {label && (
+        <label
+          {...slotProps.label}
+          htmlFor={props.id || label}
+          className={cn(slotProps.label?.className, styles.label)}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+}

package/src/Inputs/TextAreaInput/TextAreaInput.module.css

@@ -0,0 +1,65 @@
+.root {
+  --input-border: var(--color-outline);
+  --input-color: var(--color-on-surface);
+  --input-fs: var(--fs-body2);
+  --input-background: var(--color-background-faint);
+  --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 {
+      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);
+}
+.input {
+  flex: 1 1 100%;
+  font-family: var(--font-p);
+  padding: calc(1.618 * var(--spacing-gap-2));
+  font-size: inherit;
+  border: none;
+  background: none;
+  color: var(--input-color);
+  &:focus {
+    outline: none;
+  }
+  &.disableResize {
+    resize: none;
+  }
+}
+
+.errored {
+  --input-border: var(--color-error);
+  --input-color: var(--color-error);
+  & > .inputWrapper {
+    outline: 1px solid var(--input-border);
+  }
+  & > .label {
+    color: var(--input-color);
+  }
+}

package/src/Inputs/TextAreaInput/TextAreaInput.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { cn } from "@studiocubics/utils";
+import { useEffect, useState, type ComponentProps } from "react";
+import {
+  eventWithRipple,
+  useRipple,
+  type UseRippleProps,
+} from "../../Misc/Ripple/Ripple";
+import styles from "./TextAreaInput.module.css";
+import { InputErrors, type InputErrorsProps } from "../../Display/_index";
+
+export interface TextAreaInputProps extends ComponentProps<"textarea"> {
+  label?: string;
+  error?: string | string[];
+  disableResize?: boolean;
+  fullWidth?: boolean;
+  slotProps?: {
+    ripple?: UseRippleProps;
+    root?: ComponentProps<"div">;
+    inputWrapper?: ComponentProps<"div">;
+    label?: ComponentProps<"label">;
+    error?: InputErrorsProps;
+  };
+}
+
+export function TextAreaInput(props: TextAreaInputProps) {
+  const {
+    label,
+    error,
+    fullWidth,
+    disableResize = false,
+    onTouchStart,
+    onClick,
+    onBlur,
+    slotProps = {},
+    className: inputClass,
+    ...inputProps
+  } = props;
+
+  const { rippleElements, createRipple } = useRipple(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={props.id || label}
+          className={cn(slotProps.label?.className, styles.label)}
+        >
+          {label}
+        </label>
+      )}
+      <div
+        {...slotProps.inputWrapper}
+        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}
+      >
+        <textarea
+          className={cn(
+            inputClass,
+            styles.input,
+            disableResize ? styles.disableResize : undefined
+          )}
+          onTouchStart={eventWithRipple(createRipple, onTouchStart)}
+          onClick={eventWithRipple(createRipple, onClick)}
+          onBlur={(e) => {
+            setIsErrored(false);
+            onBlur?.(e);
+          }}
+          id={label}
+          {...inputProps}
+        />
+        {rippleElements}
+      </div>
+      {isErrored && (
+        <InputErrors
+          {...slotProps.error}
+          className={cn(slotProps.error?.className, styles.errorText)}
+          error={error}
+        />
+      )}
+    </div>
+  );
+}

package/src/Inputs/TextInput/TextInput.module.css

@@ -0,0 +1,112 @@
+.root {
+  --input-border: var(--color-outline);
+  --input-color: var(--color-on-surface);
+  --input-fs: var(--fs-body2);
+  --input-background: var(--color-background-alpha);
+  --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 {
+      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 {
+  color: var(--color-on-background-faint);
+  margin-left: var(--spacing-gap);
+  width: max-content;
+  cursor: pointer;
+}
+.input {
+  flex: 1 1 100%;
+  font-family: var(--font-p);
+  font-size: inherit;
+  border: none;
+  background: none;
+  color: var(--input-color);
+  &:focus {
+    outline: none;
+  }
+}
+.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);
+  }
+}
+
+.size_sm {
+  .label {
+    font-size: 0.8em;
+  }
+  .input {
+    padding: var(--spacing-gap) calc(1.618 * var(--spacing-gap));
+  }
+}
+.size_md {
+  .label {
+    font-size: 0.9em;
+  }
+  .input {
+    padding: var(--spacing-gap-2) calc(1.618 * var(--spacing-gap-2));
+  }
+}
+.size_lg {
+  .label {
+    font-size: 1em;
+  }
+  .input {
+    padding: var(--spacing-gap-3) calc(1.618 * var(--spacing-gap-3));
+  }
+}

package/src/Inputs/TextInput/TextInput.tsx

@@ -0,0 +1,142 @@
+"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 "./TextInput.module.css";
+import {
+  InputErrors,
+  type InputErrorsProps,
+} from "../../Display/InputErrors/InputErrors";
+
+export interface TextInputProps 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"];
+  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 TextInput(props: TextInputProps) {
+  const {
+    startIcon,
+    endIcon,
+    label,
+    error,
+    fullWidth,
+    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);
+
+  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="text"
+          className={cn(inputClass, styles.input)}
+          onTouchStart={eventWithRipple(createRipple, onTouchStart)}
+          onClick={eventWithRipple(createRipple, onClick)}
+          onBlur={(e) => {
+            setIsErrored(false);
+            onBlur?.(e);
+          }}
+          size={inputSize}
+          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/ThemeToggle/ThemeToggleListItem.tsx

@@ -0,0 +1,80 @@
+import { useAnchorElement } from "@studiocubics/hooks";
+import {
+    List,
+  type ListItemProps,
+  ListItem,
+} from "../../Display/List/List";
+import { type PopoverProps, Popover } from "../../Layout/Popover/Popover";
+import type { MouseEvent, ReactNode } from "react";
+
+export type ThemeObject = Record<
+  "dark" | "light" | "system",
+  {
+    text?: string;
+    icon?: ReactNode;
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+  }
+>;
+
+export interface ThemeToggleListItemProps
+  extends Omit<ListItemProps, "slotProps"> {
+  themeObject?: Partial<ThemeObject>;
+  currentTheme: keyof ThemeObject;
+  slotProps?: ListItemProps["slotProps"] & {
+    popover?: PopoverProps;
+  };
+}
+
+export function ThemeToggleListItem(props: ThemeToggleListItemProps) {
+  const { currentTheme, themeObject = {}, slotProps = {}, ...rest } = props;
+  const { open, anchorEl, handleClick, handleClose } = useAnchorElement();
+  const { popover = {}, ...listItemSlotProps } = slotProps;
+  const sanitisedThemeObject: ThemeObject = {
+    dark: {
+      text: "Dark Mode",
+      icon: <>🌚</>,
+      onClick: (e) => {
+        if (themeObject.dark?.onClick) themeObject.dark?.onClick(e);
+        if (open) handleClose();
+        else handleClick(e);
+      },
+      ...themeObject.dark,
+    },
+    light: { text: "Light Mode", icon: <>🌞</>, ...themeObject.light },
+    system: { text: "System Color", icon: <>💻</>, ...themeObject.system },
+  };
+
+  return (
+    <>
+      <ListItem
+        slotProps={listItemSlotProps}
+        startIcon={sanitisedThemeObject[currentTheme].icon}
+        onClick={open ? handleClose : handleClick}
+        {...rest}
+      >
+        {sanitisedThemeObject[currentTheme].text}
+      </ListItem>
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorPosition={{ vertical: "top", horizontal: "right" }}
+        transformOrigin={{ vertical: "bottom", horizontal: "left" }}
+        {...slotProps.popover}
+      >
+        <List className={"surfaceContainer"}>
+          {Object.entries(sanitisedThemeObject).map(([key, value]) => (
+            <ListItem
+              selected={currentTheme == key}
+              startIcon={value.icon}
+              key={key}
+              onClick={value.onClick}
+            >
+              {value.text}
+            </ListItem>
+          ))}
+        </List>
+      </Popover>
+    </>
+  );
+}

package/src/Inputs/ThemeToggle/_index.ts

@@ -0,0 +1 @@
+export * from "./ThemeToggleListItem"

package/src/Inputs/_index.ts

@@ -0,0 +1,8 @@
+export * from "./Button/Button";
+export * from "./Checkbox/_index";
+export * from "./PasswordInput/PasswordInput";
+export * from "./Select/Select";
+export * from "./Switch/Switch";
+export * from "./TextInput/TextInput";
+export * from "./TextAreaInput/TextAreaInput";
+export * from "./ThemeToggle/_index";