@studiocubics/components 0.0.1 → 0.0.2

package/src/Inputs/Switch/Switch.tsx

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

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

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

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

@@ -1,142 +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 "./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

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

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

package/src/Layout/Dialog/Dialog.module.css

@@ -1,15 +0,0 @@
-.root[open] {
-  background-color: var(--color-surface);
-  width: 50%;
-  max-height: 80%;
-  max-width: 45rem;
-  min-width: 350px;
-  backdrop-filter: var(--backdrop-blur);
-  margin: auto;
-  border-radius: var(--shape-br-lg);
-  overflow: hidden;
-  padding: var(--spacing-gap-6);
-}
-.root::backdrop {
-  backdrop-filter: var(--backdrop-blur);
-}