@studiocubics/components 0.0.1

package/src/Display/List/List.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import {
+  type ComponentProps,
+  createContext,
+  type ElementType,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import styles from "./List.module.css";
+import { cn, mergeRefs } from "@studiocubics/utils";
+import {
+  eventWithRipple,
+  useRipple,
+  type UseRippleProps,
+} from "../../Misc/_index";
+import { useDisclosure } from "@studiocubics/hooks";
+import { GlassCard, type GlassCardProps } from "../../Cards/_index";
+import type { SetState } from "@studiocubics/types";
+
+interface ListContextProps {
+  activeListItem: HTMLLIElement | null;
+  setActiveListItem: SetState<HTMLLIElement | null>;
+}
+export type ListProps = {
+  ordered?: boolean;
+  className?: string;
+  secondary?: boolean;
+  renderMarker?: boolean;
+
+  slotProps?: {
+    marker?: GlassCardProps;
+  };
+} & (
+  | {
+      listData?: ListItemProps[];
+      children?: undefined;
+      listItemProps?: ListItemProps;
+    }
+  | {
+      children?: ReactNode;
+      listData?: undefined;
+      listItemProps?: undefined;
+    }
+);
+
+const ListContext = createContext<ListContextProps | null>(null);
+
+export function useList() {
+  const c = useContext(ListContext);
+  if (!c) throw new Error("Components must be wrapped in <List/>");
+  return c;
+}
+
+export function List(props: ListProps) {
+  const {
+    children,
+    ordered = false,
+    secondary = false,
+    listData = [],
+    slotProps = {},
+    className,
+    renderMarker = true,
+    listItemProps = {},
+  } = props;
+  const [activeListItem, setActiveListItem] =
+    useState<ListContextProps["activeListItem"]>(null);
+  const markerRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLOListElement>(null);
+
+  const rootClass = cn(
+    styles.root,
+    className,
+    secondary ? styles.secondary : "",
+  );
+  const body = listData.length
+    ? listData.map((ld, i) => <ListItem key={i} {...listItemProps} {...ld} />)
+    : children;
+
+  const marker = renderMarker ? (
+    <GlassCard
+      {...slotProps.marker}
+      ref={markerRef}
+      className={cn(styles.marker, slotProps.marker?.className)}
+    />
+  ) : null;
+  const Component = ordered ? "ol" : "ul";
+
+  useEffect(() => {
+    if (!rootRef.current || !markerRef.current || !activeListItem) return;
+
+    const updateMarkerPosition = () => {
+      if (!rootRef.current || !markerRef.current || !activeListItem) return;
+
+      const marker = markerRef.current;
+      const tabRect = activeListItem.getBoundingClientRect();
+      const rootRect = rootRef.current.getBoundingClientRect();
+
+      // Account for scroll offset
+      const scrollLeft = rootRef.current.scrollLeft;
+      const scrollTop = rootRef.current.scrollTop;
+
+      marker.style.display = "block";
+      marker.style.width = `${tabRect.width}px`;
+      marker.style.height = `${tabRect.height}px`;
+      marker.style.left = `${tabRect.left - rootRect.left + scrollLeft}px`;
+      marker.style.top = `${tabRect.top - rootRect.top + scrollTop}px`;
+    };
+
+    updateMarkerPosition();
+
+    const container = rootRef.current;
+
+    // Update marker position when container resizes
+    const resizeObserver = new ResizeObserver(updateMarkerPosition);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [activeListItem]);
+  return (
+    <ListContext.Provider value={{ activeListItem, setActiveListItem }}>
+      <Component ref={rootRef} className={rootClass}>
+        {body}
+        {marker}
+      </Component>
+    </ListContext.Provider>
+  );
+}
+
+export interface ListItemProps extends ComponentProps<"li"> {
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+  dropDownIcon?: ReactNode;
+  selected?: boolean;
+  shortened?: boolean;
+  shortenedIcon?: "start" | "end";
+  href?: ComponentProps<"a">["href"];
+  disabled?: boolean;
+  color?: "primary" | "secondary" | "error";
+  slotProps?: {
+    ripple?: UseRippleProps;
+    content?: ComponentProps<"span">;
+    startIcon?: ComponentProps<"span">;
+    endIcon?: ComponentProps<"span">;
+    dropDownIcon?: ComponentProps<"span">;
+    linkComponent?: ComponentProps<"a">;
+  };
+  childNodes?: Array<ListItemProps>;
+  LinkComponent?: ElementType<ComponentProps<any>>;
+}
+function ChevronDown() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-chevron-down-icon lucide-chevron-down"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+// Create the base component with forwardRef
+export function ListItem(props: ListItemProps) {
+  const {
+    className,
+    children,
+    onTouchStart,
+    onClick,
+    shortened = false,
+    shortenedIcon = "start",
+    selected = false,
+    dropDownIcon = <ChevronDown />,
+    color,
+    startIcon,
+    endIcon,
+    disabled,
+    childNodes = [],
+    href,
+    LinkComponent = "a",
+    slotProps: _slotProps,
+    ref,
+    ...restProps
+  } = props;
+  const slotProps: NonNullable<ListItemProps["slotProps"]> = _slotProps ?? {};
+  const { setActiveListItem } = useList();
+  const listItemRef = useRef<HTMLLIElement>(null);
+
+  const { rippleElements, createRipple } = useRipple(slotProps.ripple);
+  const { open, handleToggle } = useDisclosure();
+
+  const clickable =
+    !disabled && (!!href || !!onClick || (!shortened && !!childNodes.length));
+
+  const componentProps = {
+    className: cn(
+      className,
+      styles.listItem,
+      shortened ? styles.shortened : "",
+      selected ? styles.selected : "",
+      clickable ? styles.clickable : "",
+      disabled ? styles.disabled : "",
+    ),
+    onTouchStart: disabled
+      ? undefined
+      : eventWithRipple(createRipple, onTouchStart, handleToggle),
+    onClick: disabled
+      ? undefined
+      : eventWithRipple(createRipple, onClick, handleToggle),
+    "data-color": color,
+    ref: mergeRefs(ref, listItemRef),
+    ...restProps,
+  };
+
+  const body = (
+    <>
+      {clickable && rippleElements}
+      {startIcon && (
+        <span
+          {...slotProps.startIcon}
+          className={cn(
+            styles.iconContainer,
+            shortenedIcon == "start" ? styles.primaryIcon : "",
+            slotProps.startIcon?.className,
+          )}
+        >
+          {startIcon}
+        </span>
+      )}
+      <span
+        {...slotProps.content}
+        className={cn(styles.content, slotProps.content?.className)}
+      >
+        {children}
+      </span>
+      {endIcon && (
+        <span
+          {...slotProps.endIcon}
+          className={cn(
+            styles.iconContainer,
+            shortenedIcon == "end" ? styles.primaryIcon : "",
+            slotProps.endIcon?.className,
+          )}
+        >
+          {endIcon}
+        </span>
+      )}
+      {!!childNodes.length && (
+        <span
+          {...slotProps.dropDownIcon}
+          className={cn(
+            styles.iconContainer,
+            styles.dropDownIcon,
+            slotProps.dropDownIcon?.className,
+            open ? styles.openSublist : "",
+          )}
+        >
+          {dropDownIcon}
+        </span>
+      )}
+    </>
+  );
+
+  useEffect(() => {
+    if (!listItemRef.current) return;
+    if (selected) setActiveListItem(listItemRef.current);
+  }, [selected]);
+
+  return (
+    <>
+      {href ? (
+        <LinkComponent href={href} disabled={disabled} {...componentProps}>
+          {body}
+        </LinkComponent>
+      ) : (
+        <li {...componentProps}>{body}</li>
+      )}
+      {!!childNodes.length && !shortened && open && (
+        <List secondary>
+          {childNodes.map((c, i) => (
+            <ListItem key={i} {...c} />
+          ))}
+        </List>
+      )}
+    </>
+  );
+}

package/src/Display/PasswordStrength/PasswordStrength.module.css

@@ -0,0 +1,45 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap);
+  flex-wrap: wrap;
+  padding-inline: var(--spacing-gap);
+  scale: 1 0;
+  transition: scale var(--transition-time) var(--transition-tf);
+}
+.title {
+  font-size: 0.5rem;
+  flex: 0 0 auto;
+}
+.strengthBars {
+  flex: 1 1 50%;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-gap);
+}
+.bar {
+  transition: all var(--transition-time) var(--transition-tf);
+  background-color: currentColor;
+  scale: 0 0;
+  flex: 1 1 25%;
+  transform-origin: top left;
+  border-radius: 999px;
+}
+.weak {
+  height: 3px;
+  opacity: 0.3;
+}
+.medium {
+  height: 5px;
+  opacity: 0.5;
+}
+.good {
+  height: 7px;
+  opacity: 0.8;
+}
+.strong {
+  height: 9px;
+}
+.show {
+  scale: 1 1;
+}

package/src/Display/PasswordStrength/PasswordStrength.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import styles from "./PasswordStrength.module.css";
+import { cn, remap } from "@studiocubics/utils";
+import type { ComponentProps } from "react";
+
+export const STRENGTH_MESSAGES = ["", "Weak", "Medium", "Good", "Strong"];
+
+const Bar = ({ className, ...rest }: ComponentProps<"span">) => {
+  return <span className={cn(styles.bar, className)} {...rest} />;
+};
+
+export function PasswordStrength({ strength }: { strength?: number | null }) {
+  const remappedStrength = strength ? remap(strength, [1, 5], [1, 4]) : 0;
+  const strengthMsg = STRENGTH_MESSAGES[remappedStrength];
+  return (
+    <div className={cn(styles.root, !!strength ? styles.show : "")}>
+      <p className={cn(styles.title)}>{strengthMsg}</p>
+      <div className={cn(styles.strengthBars)}>
+        <Bar
+          className={cn(styles.weak, remappedStrength >= 1 ? styles.show : "")}
+        />
+        <Bar
+          className={cn(
+            styles.medium,
+            remappedStrength >= 2 ? styles.show : "",
+          )}
+        />
+        <Bar
+          className={cn(styles.good, remappedStrength >= 3 ? styles.show : "")}
+        />
+        <Bar
+          className={cn(
+            styles.strong,
+            remappedStrength == 4 ? styles.show : "",
+          )}
+        />
+      </div>
+    </div>
+  );
+}

package/src/Display/PasswordStrength/usePasswordStrength.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+
+export const PASSWORD_REGEX = {
+  ASCII_NO_SPACE: { ex: /^[!-~]+$/, score: 0.5 },
+  LOWERCASE: { ex: /[a-z]/, score: 0.5 },
+  UPPERCASE: { ex: /[A-Z]/, score: 1 },
+  DIGIT: { ex: /\d/, score: 1 },
+  SPECIAL: { ex: /[!@#$%^&*()_\-+=\[\]{};:'",.<>/?\\|`~]/, score: 1 },
+  NO_TRIPLE_REPEAT: { ex: /^(?!.*(.)\1\1).*$/, score: 1 },
+} as const;
+
+export type PasswordTest = keyof typeof PASSWORD_REGEX;
+
+export const ALL_PASSWORD_TESTS: PasswordTest[] = [
+  "ASCII_NO_SPACE",
+  "DIGIT",
+  "LOWERCASE",
+  "NO_TRIPLE_REPEAT",
+  "SPECIAL",
+  "UPPERCASE",
+];
+export interface PasswordStrengthProps {
+  password?: string;
+  requiredTests?: PasswordTest[];
+  disableStrengthMeter?: boolean;
+  /**
+   * Minimum length of the password when it should start checking,
+   * before reaching the minimum length the strength will always be 1
+   */
+  minLength?: number;
+}
+
+export function usePasswordStrength({
+  password,
+  requiredTests = [],
+  disableStrengthMeter = true,
+  minLength = 8,
+}: PasswordStrengthProps) {
+  const [strength, setStrength] = useState<number | null>(null);
+  const [testsPassed, setPassed] = useState<PasswordTest[]>([]);
+
+  useEffect(() => {
+    if (!password) {
+      setStrength(null);
+      setPassed([]);
+      return;
+    }
+
+    const results: PasswordTest[] = [];
+
+    for (const [key, regex] of Object.entries(PASSWORD_REGEX)) {
+      if (regex.ex.test(password)) results.push(key as PasswordTest);
+    }
+
+    setPassed(results);
+
+    // REQUIRED TESTS GATE
+    const allRequiredPassed = results.every((test) =>
+      requiredTests.includes(test),
+    );
+
+    if (!allRequiredPassed || password.length < minLength) {
+      setStrength(1); // Weak
+      return;
+    }
+
+    // Otherwise score by total passed tests
+    const totalScore = Object.entries(PASSWORD_REGEX).reduce(
+      (acc, [key, value]) =>
+        results.includes(key as PasswordTest) ? acc + value.score : acc,
+      0,
+    );
+    setStrength(totalScore);
+  }, [password, requiredTests]);
+
+  if (!disableStrengthMeter) return { strength, testsPassed };
+}

package/src/Display/Skeleton/Skeleton.module.css

@@ -0,0 +1,54 @@
+.root {
+  --skeleton-color-main: var(--color-surface);
+  --skeleton-color-wave: color-mix(
+    in srgb,
+    var(--color-surface) 80%,
+    var(--color-primary) 10%
+  );
+
+  background-image: linear-gradient(
+    to right,
+    var(--skeleton-color-main) 0%,
+    var(--skeleton-color-wave) 50%,
+    var(--skeleton-color-main) 100%
+  );
+  background-size: 1000px 1000px;
+  background-repeat: repeat-x;
+  animation: throb 2s var(--transition-tf) infinite;
+  /* animation: wave 0.8s linear infinite forwards; */
+  border-radius: var(--shape-br-md);
+}
+.large {
+  font-size: 2rem;
+}
+.medium {
+  font-size: 1.2rem;
+}
+.small {
+  font-size: 0.75rem;
+}
+
+@keyframes wave {
+  0% {
+    background-position: 0% 0%;
+  }
+
+  100% {
+    background-position: -200% 0%;
+  }
+}
+@keyframes throb {
+  0% {
+    background: var(--color-surface);
+  }
+  50% {
+    background: color-mix(
+      in srgb,
+      var(--color-primary) 10%,
+      var(--color-surface) 100%
+    );
+  }
+  100% {
+    background: var(--color-surface);
+  }
+}

package/src/Display/Skeleton/Skeleton.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps, CSSProperties } from "react";
+import styles from "./Skeleton.module.css";
+import { cn } from "@studiocubics/utils";
+export interface SkeletonProps extends ComponentProps<"span"> {
+  type?: "text" | "card";
+  size?: "small" | "medium" | "large";
+  width?: CSSProperties["width"];
+  height?: CSSProperties["height"];
+}
+
+export function Skeleton(props: SkeletonProps) {
+  const {
+    className,
+    style,
+    type = "text",
+    size = "medium",
+    width = "100%",
+    height = "1.5em",
+    ...rest
+  } = props;
+  return (
+    <span
+      className={cn(className, styles.root, styles[size], styles[type])}
+      style={{ width, height, ...style }}
+      {...rest}
+    ></span>
+  );
+}

package/src/Display/Toast/Toaster.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { subscribe, dismiss, type Toast } from "./toast";
+
+export function Toaster() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  useEffect(() => {
+    return () => {
+      subscribe(setToasts);
+    };
+  }, []);
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div style={containerStyle}>
+      {toasts.map((t) => (
+        <div key={t.id} style={toastStyle}>
+          <span>{t.message}</span>
+          <button onClick={() => dismiss(t.id)} style={closeStyle}>
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const containerStyle: React.CSSProperties = {
+  position: "fixed",
+  top: 16,
+  right: 16,
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  zIndex: 1000,
+};
+
+const toastStyle: React.CSSProperties = {
+  background: "#111",
+  color: "#fff",
+  padding: "12px 16px",
+  borderRadius: 6,
+  minWidth: 200,
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+};
+
+const closeStyle: React.CSSProperties = {
+  background: "transparent",
+  border: "none",
+  color: "#fff",
+  fontSize: 16,
+  cursor: "pointer",
+};

package/src/Display/Toast/_index.ts

@@ -0,0 +1,2 @@
+export * from "./Toaster";
+export * from "./toast";

package/src/Display/Toast/toast.ts

@@ -0,0 +1,44 @@
+export type Toast = {
+  id: string;
+  message: string;
+  duration?: number;
+};
+
+type Listener = (toasts: Toast[]) => void;
+
+let toasts: Toast[] = [];
+const listeners = new Set<Listener>();
+
+function emit() {
+  listeners.forEach((l) => l(toasts));
+}
+
+export function subscribe(listener: Listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function toast(message: string, options?: { duration?: number }) {
+  const id = crypto.randomUUID();
+
+  const t: Required<Toast> = {
+    id,
+    message,
+    duration: options?.duration ?? 3000,
+  };
+
+  toasts = [...toasts, t];
+  emit();
+
+  // Its a toast not a lecture!
+  if (t.duration <= 20000) {
+    setTimeout(() => {
+      dismiss(id);
+    }, t.duration);
+  }
+}
+
+export function dismiss(id: string) {
+  toasts = toasts.filter((t) => t.id !== id);
+  emit();
+}