@studiocubics/components 0.0.1

package/src/Inputs/Button/Button.tsx

@@ -0,0 +1,178 @@
+/**
+ * Button is love button is life
+ */
+"use client";
+
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import {
+  type ComponentProps,
+  type CSSProperties,
+  type ElementType,
+  type ReactNode,
+} from "react";
+import {
+  eventWithRipple,
+  useRipple,
+  type UseRippleProps,
+} from "../../Misc/Ripple/Ripple";
+import { cn } from "@studiocubics/utils";
+import styles from "./Button.module.css";
+
+/**
+ * Props specific to the Button component.
+ *
+ * These extend the intrinsic element props of whatever element is passed via `as`.
+ * @group button
+ * @category inputs
+ */
+export interface ButtonBaseProps {
+  /** Renders an icon at the beginning of the button. */
+  startIcon?: ReactNode;
+
+  /** Renders an icon at the end of the button. */
+  endIcon?: ReactNode;
+
+  /** Marks the button as selected. */
+  selected?: boolean;
+
+  /** Visual style variant. */
+  variant?: "contained" | "text" | "outlined";
+
+  /** Expands width to 100%. */
+  fullWidth?: boolean;
+
+  /** Force a 1:1 aspect ratio. */
+  square?: boolean;
+
+  /** Button size. */
+  size?: "sm" | "md" | "lg";
+
+  /** Overrides the CSS `position` property of the root element. */
+  position?: CSSProperties["position"];
+
+  color?: "primary" | "secondary" | "error";
+  /**
+   * Slot props for customizing internal elements.
+   */
+  slotProps?: {
+    /** Props for the ripple effect. */
+    ripple?: UseRippleProps;
+
+    /** Wrapper span for the start icon. */
+    startIcon?: ComponentProps<"span">;
+
+    /** Wrapper span for the end icon. */
+    endIcon?: ComponentProps<"span">;
+  };
+}
+const defaultElement = "button";
+type DefaultElement = typeof defaultElement;
+/**
+ * Polymorphic props for the Button component.
+ *
+ * `C` defines the element type rendered by the component (e.g. `"button"`, `"a"`, `"div"`).
+ * All intrinsic props for `C` are supported unless overridden by `ButtonBaseProps`.
+ *
+ * @group button
+ * @category inputs
+ */
+export type ButtonProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, ButtonBaseProps>;
+
+/**
+ * Base implementation for the Button component.
+ *
+ * This is a polymorphic component that defaults to rendering a `<button>`.
+ * Use the `as` prop to change the underlying element.
+ *
+ * @typeParam C - The intrinsic or custom element type to render.
+ *
+ * @group button
+ * @category inputs
+ */
+export function ButtonBase<C extends ElementType = DefaultElement>(
+  props: ButtonProps<C>
+) {
+  const {
+    as,
+    className,
+    children,
+    variant = "text",
+    size = "md",
+    startIcon,
+    color,
+    endIcon,
+    square,
+    fullWidth = false,
+    onTouchStart,
+    onClick,
+    position,
+    slotProps: _slotProps,
+    ...restProps
+  } = props as ButtonProps<DefaultElement>;
+  const slotProps: NonNullable<ButtonBaseProps["slotProps"]> = _slotProps ?? {};
+  const Component = (as || defaultElement) as ElementType;
+  const { rippleElements, createRipple } = useRipple(slotProps.ripple);
+
+  const componentProps = {
+    className: cn(
+      className,
+      styles.root,
+      square ? styles.square : "",
+      fullWidth ? styles.fullWidth : "",
+      position ? styles[`position_${position}`] : "",
+      styles[`size_${size}`],
+      styles[variant]
+    ),
+    onTouchStart: eventWithRipple(createRipple, onTouchStart),
+    onClick: eventWithRipple(createRipple, onClick),
+    "data-color": color,
+    ...restProps,
+  };
+
+  return (
+    <Component {...componentProps}>
+      {rippleElements}
+      {startIcon && (
+        <span
+          {...slotProps.startIcon}
+          className={cn(styles.iconContainer, slotProps.startIcon?.className)}
+        >
+          {startIcon}
+        </span>
+      )}
+      {children}
+      {endIcon && (
+        <span
+          {...slotProps.endIcon}
+          className={cn(styles.iconContainer, slotProps.endIcon?.className)}
+        >
+          {endIcon}
+        </span>
+      )}
+    </Component>
+  );
+}
+ButtonBase.displayName = "Button";
+
+/**
+ * A polymorphic button component.
+ *
+ * By default it renders a `<button>`, but any element can be used via the `as` prop:
+ *
+ * ```tsx
+ * <Button as="a" href="/docs">Read docs</Button>
+ * ```
+ *
+ * Supports variants, sizes, icons, and ripple effects.
+ *
+ * @group button
+ * @category inputs
+ */
+export const Button = ButtonBase as PolymorphicComponentType<
+  ButtonBaseProps,
+  DefaultElement
+>;

package/src/Inputs/Checkbox/Checkbox.module.css

@@ -0,0 +1,77 @@
+.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);
+  --input-checked-color: var(--color-surface);
+  --input-checked-background: var(--color-on-surface);
+  --input-indeterminate-color: var(--color-surface);
+  --input-indeterminate-background: var(--color-on-surface);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-2);
+}
+
+.inputWrapper {
+  position: relative;
+  height: fit-content;
+  display: flex;
+  border-radius: var(--shape-br-xs);
+  overflow: hidden;
+
+  & > input[type="checkbox"] {
+    font: inherit;
+    color: var(--input-color);
+    background: var(--input-background);
+    width: var(--spacing-gap-4);
+    height: var(--spacing-gap-4);
+    border: 2.3px solid var(--input-border);
+    border-radius: inherit;
+    cursor: pointer;
+    transition: all var(--transition-time) var(--transition-tf);
+  }
+
+  &:has(input[type="checkbox"]:checked) {
+    --input-color: var(--input-checked-color);
+    --input-background: var(--input-checked-background);
+  }
+
+  &:has(input[type="checkbox"]:indeterminate) {
+    --input-color: var(--input-indeterminate-color);
+    --input-background: var(--input-indeterminate-background);
+  }
+}
+.inputWrapper > span {
+  position: absolute;
+  inset: 0;
+  color: var(--input-color);
+  pointer-events: none;
+  height: 100%;
+  & > svg {
+    position: absolute;
+  }
+}
+.show {
+  display: block;
+  /* opacity: 1; */
+}
+.hide {
+  display: none;
+}
+.show path {
+  stroke-dasharray: 45; /* path length, adjust per path */
+  stroke-dashoffset: 45; /* start hidden */
+  animation: draw-check var(--transition-time) var(--transition-tf) forwards;
+}
+.hide path {
+  animation: draw-check var(--transition-time) var(--transition-tf) reverse;
+}
+@keyframes draw-check {
+  to {
+    stroke-dashoffset: 0; /* reveal path */
+  }
+}
+.label {
+  cursor: pointer;
+}

package/src/Inputs/Checkbox/Checkbox.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import {
+  type ComponentProps,
+  type ReactElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { CheckboxGroupContext } from "./CheckboxGroup/CheckboxGroup";
+
+import { cn } from "@studiocubics/utils";
+import styles from "./Checkbox.module.css";
+import {
+  eventWithRipple,
+  useRipple,
+  type UseRippleProps,
+} from "../../Misc/Ripple/Ripple";
+
+interface CheckboxProps
+  extends Omit<ComponentProps<"input">, "onChange" | "type"> {
+  label?: string;
+  checked?: boolean;
+  indeterminate?: boolean;
+  onChange?: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ) => void;
+  checkedIcon?: ReactElement<
+    Required<Pick<CheckboxProps, "checked">> & ComponentProps<"svg">
+  >;
+  indeterminateIcon?: ReactElement<
+    Required<Pick<CheckboxProps, "indeterminate">> & ComponentProps<"svg">
+  >;
+  slotProps?: {
+    ripple?: UseRippleProps;
+    startIcon?: ComponentProps<"span">;
+    endIcon?: ComponentProps<"span">;
+    root?: ComponentProps<"div">;
+    inputWrapper?: ComponentProps<"div">;
+    label?: ComponentProps<"label">;
+    error?: ComponentProps<"p">;
+  };
+  /** INTERNAL: prevent group registration */
+  skipGroup?: boolean;
+  // TODO add size
+  // TODO add color
+}
+
+export function Checkbox(props: CheckboxProps) {
+  const {
+    label,
+    checked,
+    indeterminate = false,
+    skipGroup,
+    checkedIcon,
+    indeterminateIcon,
+    slotProps = {},
+    "aria-label": ariaLabel,
+    onChange,
+    onTouchStart,
+    onClick,
+    ...inputProps
+  } = props;
+  const group = useContext(CheckboxGroupContext);
+  const [index, setIndex] = useState<number | null>(null);
+  const [selfChecked, setSelfChecked] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isRegistered = useRef(false);
+
+  const { rippleElements, createRipple } = useRipple();
+
+  const isChecked =
+    group && !skipGroup && index !== null
+      ? group.values[index]
+      : (checked ?? selfChecked);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const next = e.target.checked;
+    if (group && !skipGroup && index !== null) {
+      group.update(index, next);
+    } else {
+      setSelfChecked(next);
+    }
+    onChange?.(e, next);
+  };
+  // Register with group if present
+  useEffect(() => {
+    if (!group || skipGroup || isRegistered.current) return;
+    isRegistered.current = true;
+    setIndex(group.register());
+  }, [group, skipGroup, index]);
+
+  // Set indeterminate state
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  return (
+    <div
+      {...slotProps.root}
+      className={cn(styles.root, slotProps.root?.className)}
+    >
+      <div
+        {...slotProps.inputWrapper}
+        className={cn(styles.inputWrapper, slotProps.inputWrapper?.className)}
+      >
+        {rippleElements}
+        <input
+          ref={inputRef}
+          type="checkbox"
+          checked={isChecked}
+          aria-checked={isChecked ?? false}
+          aria-label={ariaLabel || label}
+          onChange={handleChange}
+          id={label}
+          onTouchStart={eventWithRipple(createRipple, onTouchStart)}
+          onClick={eventWithRipple(createRipple, onClick)}
+          {...inputProps}
+        />
+        <span>
+          {checkedIcon ?? <CheckboxCheckedIcon checked={isChecked} />}
+          {indeterminateIcon ?? (
+            <CheckboxIndeterminateIcon indeterminate={indeterminate} />
+          )}
+        </span>
+      </div>
+      {label && (
+        <label
+          {...slotProps.label}
+          htmlFor={label}
+          className={cn(slotProps.label?.className, styles.label)}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+}
+function CheckboxCheckedIcon(
+  props: Required<Pick<CheckboxProps, "checked">> & ComponentProps<"svg">,
+) {
+  const { checked, className, ...rest } = props;
+  return (
+    <svg
+      {...rest}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn(
+        checked ? styles.show : styles.hide,
+        styles.checked,
+        className,
+      )}
+    >
+      <path d="M4 12 9 17l11 -11" />
+    </svg>
+  );
+}
+
+function CheckboxIndeterminateIcon(
+  props: Required<Pick<CheckboxProps, "indeterminate">> & ComponentProps<"svg">,
+) {
+  const { indeterminate, className, ...rest } = props;
+  return (
+    <svg
+      {...rest}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(
+        indeterminate ? styles.show : styles.hide,
+        styles.indeterminate,
+        className,
+      )}
+      stroke="currentColor"
+      strokeWidth="2.3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M5 12h14" />
+    </svg>
+  );
+}

package/src/Inputs/Checkbox/CheckboxGroup/CheckboxGroup.module.css

@@ -0,0 +1,10 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+  padding-top: var(--spacing-gap-3);
+}
+.legend {
+  font-weight: bold;
+  font-family: var(--font-h);
+}

package/src/Inputs/Checkbox/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./CheckboxGroup.module.css";
+
+interface CheckboxGroupContextProps {
+  values: boolean[];
+  register: () => number;
+  update: (index: number, checked: boolean) => void;
+  setAll: (checked: boolean) => void;
+}
+
+interface CheckboxGroupProps {
+  children: ReactNode;
+  onChange?: (checked: boolean[]) => void;
+  label?: string;
+}
+
+export const CheckboxGroupContext =
+  createContext<CheckboxGroupContextProps | null>(null);
+
+export function CheckboxGroup({
+  children,
+  onChange,
+  label,
+}: CheckboxGroupProps) {
+  const [values, setValues] = useState<boolean[]>([]);
+  const indexRef = useRef(-1);
+
+  const register = useCallback(() => {
+    const index = indexRef.current++;
+    setValues((prev) => [...prev, false]);
+    return index;
+  }, []);
+
+  const update = useCallback(
+    (index: number, checked: boolean) => {
+      setValues((prev) => {
+        const next = [...prev];
+        next[index] = checked;
+        onChange?.(next);
+        return next;
+      });
+    },
+    [onChange]
+  );
+
+  const setAll = useCallback(
+    (checked: boolean) => {
+      setValues((prev) => {
+        const next = prev.map(() => checked);
+        onChange?.(next);
+        return next;
+      });
+    },
+    [onChange]
+  );
+
+  const context = useMemo(
+    () => ({ values, register, update, setAll }),
+    [values, register, update, setAll]
+  );
+
+  return (
+    <fieldset className={styles.root}>
+      {label && (
+        <legend className={styles.legend} id={label}>
+          {label}
+        </legend>
+      )}
+      <CheckboxGroupContext.Provider value={context}>
+        {children}
+      </CheckboxGroupContext.Provider>
+    </fieldset>
+  );
+}

package/src/Inputs/Checkbox/CheckboxSelectAll.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useContext } from "react";
+import { Checkbox } from "./Checkbox";
+import { CheckboxGroupContext } from "./CheckboxGroup/CheckboxGroup";
+
+interface CheckboxSelectAllProps {
+  label: string;
+}
+
+export function CheckboxSelectAll({ label }: CheckboxSelectAllProps) {
+  const group = useContext(CheckboxGroupContext);
+
+  if (!group) {
+    throw new Error(
+      "<CheckboxSelectAll/> must be used inside <CheckboxGroup/>",
+    );
+  }
+
+  const { values, setAll } = group;
+
+  const allChecked = values.length > 0 && values.every(Boolean);
+  const someChecked = values.some(Boolean);
+
+  return (
+    <Checkbox
+      label={label}
+      checked={allChecked}
+      indeterminate={!allChecked && someChecked}
+      onChange={(_, checked) => setAll(checked)}
+      skipGroup
+    />
+  );
+}

package/src/Inputs/Checkbox/_index.ts

@@ -0,0 +1,3 @@
+export * from "./Checkbox";
+export * from "./CheckboxSelectAll";
+export * from "./CheckboxGroup/CheckboxGroup";

package/src/Inputs/PasswordInput/PasswordInput.module.css

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