@studiocubics/components 0.0.1 → 0.0.2

package/src/Inputs/Button/Button.tsx

@@ -1,178 +0,0 @@
-/**
- * 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

@@ -1,77 +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);
-  --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

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

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

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

@@ -1,34 +0,0 @@
-"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/PasswordInput/PasswordInput.module.css

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