@studiocubics/components 0.0.1

package/src/Display/IdentityDisplay/IdentityDisplay.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import { type ElementType, type ComponentProps, type ReactNode } from "react";
+import { cn } from "@studiocubics/utils";
+import styles from "./IdentityDisplay.module.css";
+import {
+  eventWithRipple,
+  useRipple,
+  type UseRippleProps,
+} from "../../Misc/_index";
+
+interface IdentityDisplayBaseProps {
+  profileName: ReactNode;
+  role?: ReactNode;
+  desc?: ReactNode;
+  alt?: string;
+  profileImage?: string | null;
+  variant?: "compact" | "full" | "square" | "image-only";
+  href?: ComponentProps<"a">["href"];
+  slotProps?: {
+    image?: ComponentProps<"div">;
+    ripple?: UseRippleProps;
+  };
+}
+
+const defaultElement = "div";
+type DefaultELement = typeof defaultElement;
+
+export type IdentityDisplayProps<C extends ElementType = DefaultELement> =
+  PolymorphicComponentProps<C, IdentityDisplayBaseProps>;
+
+function IdentityDisplayBase<C extends ElementType = DefaultELement>(
+  props: IdentityDisplayProps<C>
+) {
+  const {
+    as,
+    className,
+    profileName,
+    role,
+    profileImage,
+    desc,
+    variant = "full",
+    onClick,
+    onTouchStart,
+    alt = "Alt text missing",
+    slotProps: _slotProps,
+    ref,
+    ...restProps
+  } = props;
+  const slotProps = {
+    image: _slotProps?.image ?? {},
+    ripple: _slotProps?.ripple ?? {},
+  };
+  const Component = (as ?? defaultElement) as ElementType;
+  const clickable = !!props.onClick || !!props.href;
+  const { rippleElements, createRipple } = useRipple(slotProps.ripple);
+
+  const componentProps = {
+    className: cn(
+      className,
+      styles.root,
+      styles[variant],
+      clickable ? styles.clickable : ""
+    ),
+    onTouchStart: eventWithRipple(createRipple, onTouchStart),
+    onClick: eventWithRipple(createRipple, onClick),
+
+    ref,
+    ...(Component === "a" ? { href: props.href } : {}),
+    ...restProps,
+  };
+
+  return (
+    <Component {...componentProps}>
+      {clickable && rippleElements}
+      <div className={styles.main}>
+        {profileImage && (
+          <div
+            {...slotProps.image}
+            className={cn(styles.image, slotProps.image?.className)}
+          >
+            <img
+              src={profileImage}
+              alt={typeof profileName == "string" ? profileName : alt}
+              width={48}
+              height={48}
+            />
+          </div>
+        )}
+        <div className={styles.details}>
+          {profileName &&
+            (typeof profileName == "string" ? (
+              <h4>{profileName}</h4>
+            ) : (
+              profileName
+            ))}
+          {role && (typeof role == "string" ? <p>{role}</p> : role)}
+        </div>
+      </div>
+      {desc &&
+        (typeof desc == "string" ? (
+          <p className={styles.desc}>{desc}</p>
+        ) : (
+          desc
+        ))}
+    </Component>
+  );
+}
+IdentityDisplayBase.displayName = "IdentityDisplay";
+
+// Type assertion to make it polymorphic
+export const IdentityDisplay = IdentityDisplayBase as PolymorphicComponentType<
+  IdentityDisplayBaseProps,
+  DefaultELement
+>;

package/src/Display/InputErrors/InputErrors.module.css

@@ -0,0 +1,6 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  color: var(--color-error);
+  font-size: 0.9em;
+}

package/src/Display/InputErrors/InputErrors.tsx

@@ -0,0 +1,52 @@
+import { type ElementType } from "react";
+import styles from "./InputErrors.module.css";
+import { cn } from "@studiocubics/utils";
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+
+export interface InputErrorsBaseProps {
+  error?: string | string[];
+  children?: null;
+}
+
+const defaultElement = "p";
+type DefaultElement = typeof defaultElement;
+
+export type InputErrorsProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, InputErrorsBaseProps>;
+
+function InputErrorsBase<C extends ElementType = DefaultElement>(
+  props: InputErrorsProps<C>,
+) {
+  const {
+    as,
+    error: _error,
+    className,
+    ...rest
+  } = props as InputErrorsProps<DefaultElement>;
+  const error = _error?.length == 1 ? _error[0] : _error;
+  if (!error || !error.length) return null;
+  const isStringError = typeof error === "string";
+  const Component = (
+    as || isStringError ? defaultElement : "ul"
+  ) as ElementType;
+  const componentProps = { className: cn(className, styles.root), ...rest };
+  return (
+    <Component {...componentProps}>
+      {isStringError
+        ? error
+        : error.map((c, i) => {
+            return <li key={i}>{c}</li>;
+          })}
+    </Component>
+  );
+}
+
+InputErrorsBase.displayName = "InputErrors";
+
+export const InputErrors = InputErrorsBase as PolymorphicComponentType<
+  InputErrorsBaseProps,
+  DefaultElement
+>;

package/src/Display/Kbd/Kbd.module.css

@@ -0,0 +1,29 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap);
+}
+.kbd {
+  --kbd-size-x: 1;
+  --kbd-size-y: 1;
+  --kbd-base: 30px;
+  width: calc(var(--kbd-size-x) * var(--kbd-base));
+  height: calc(var(--kbd-size-y) * var(--kbd-base));
+  padding: 0.2em;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.1em;
+  text-align: center;
+  font-size: 60%;
+    /* font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; */
+  font-family:
+    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  /* font-weight: bold; */
+
+  &.surface {
+    color: #ebd6dc;
+    background: #313133;
+    border-radius: 0.4em;
+  }
+}

package/src/Display/Kbd/Kbd.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@studiocubics/utils";
+import { type CSSProperties, Fragment, type ComponentProps } from "react";
+import styles from "./Kbd.module.css";
+import { type ButtonList, buttonList, type ButtonSpec } from "./buttonList";
+
+export type KeyboardKey = keyof ButtonList;
+export type KeyCombo = KeyboardKey[];
+export interface KbdProps extends Omit<ComponentProps<"div">, "children"> {
+  buttons: KeyCombo;
+}
+
+export function Kbd(props: KbdProps) {
+  const { className, buttons, ...rest } = props;
+
+  return (
+    <div className={cn(styles.root, className)} {...rest}>
+      {buttons.map((b, i) => {
+        const button: ButtonSpec = buttonList[b];
+        return (
+          <Fragment key={i}>
+            <kbd
+              className={cn(styles.kbd, styles.surface)}
+              style={
+                {
+                  "--kbd-size-x": button.sizeX ?? 1,
+                  "--kbd-size-y": button.sizeY ?? 1,
+                } as CSSProperties
+              }
+            >
+              {button.content}
+            </kbd>
+
+            {i >= 0 && i < buttons.length - 1 && "+"}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}

package/src/Display/Kbd/_index.ts

@@ -0,0 +1,2 @@
+export * from "./Kbd";
+export * from "./buttonList";

package/src/Display/Kbd/buttonList.tsx

@@ -0,0 +1,246 @@
+import type { ReactNode } from "react";
+
+export type ButtonSpec = {
+  content: ReactNode;
+  sizeX?: number;
+  sizeY?: number;
+};
+
+export const buttonList = {
+  A: { content: <>A</> },
+  B: { content: <>B</> },
+  C: { content: <>C</> },
+  D: { content: <>D</> },
+  E: { content: <>E</> },
+  F: { content: <>F</> },
+  G: { content: <>G</> },
+  H: { content: <>H</> },
+  I: { content: <>I</> },
+  J: { content: <>J</> },
+  K: { content: <>K</> },
+  L: { content: <>L</> },
+  M: { content: <>M</> },
+  N: { content: <>N</> },
+  O: { content: <>O</> },
+  P: { content: <>P</> },
+  Q: { content: <>Q</> },
+  R: { content: <>R</> },
+  S: { content: <>S</> },
+  T: { content: <>T</> },
+  U: { content: <>U</> },
+  V: { content: <>V</> },
+  W: { content: <>W</> },
+  X: { content: <>X</> },
+  Y: { content: <>Y</> },
+  Z: { content: <>Z</> },
+
+  "0": { content: <>0</> },
+  "1": { content: <>1</> },
+  "2": { content: <>2</> },
+  "3": { content: <>3</> },
+  "4": { content: <>4</> },
+  "5": { content: <>5</> },
+  "6": { content: <>6</> },
+  "7": { content: <>7</> },
+  "8": { content: <>8</> },
+  "9": { content: <>9</> },
+
+  "`": { content: <>`</> },
+  "-": { content: <>-</> },
+  "=": { content: <>=</> },
+  "[": { content: <>{"["}</> },
+  "]": { content: <>{"]"}</> },
+  Backslash: {
+    content: <>\</>,
+  },
+  ";": { content: <>;</> },
+  "'": {
+    content: <>&apos;</>,
+  },
+  ",": { content: <>,</> },
+  ".": { content: <>.</> },
+  Forwardslash: {
+    content: <>/</>,
+  },
+
+  "~": { content: <>~</> },
+  "!": { content: <>!</> },
+  "@": { content: <>@</> },
+  "#": { content: <>#</> },
+  $: { content: <>$</> },
+  "%": { content: <>%</> },
+  "^": { content: <>^</> },
+  "&": { content: <>&</> },
+  "*": { content: <>*</> },
+  "(": { content: <>{"("}</> },
+  ")": { content: <>{")"}</> },
+  _: { content: <>_</> },
+  "+": { content: <>+</> },
+
+  "{": {
+    content: <>{"{"}</>,
+  },
+  "}": {
+    content: <>{"}"}</>,
+  },
+  "|": { content: <>|</> },
+  ":": { content: <>:</> },
+  '"': {
+    content: <>&quot;</>,
+  },
+  "<": {
+    content: <>{"<"}</>,
+  },
+  ">": {
+    content: <>{">"}</>,
+  },
+  "?": { content: <>?</> },
+
+  Space: {
+    content: <>Space</>,
+  },
+  Enter: {
+    content: <>Enter</>,
+  },
+  Backspace: {
+    content: <>Backspace</>,
+  },
+  Esc: {
+    content: <>Esc</>,
+  },
+  Shift: {
+    content: <>Shift</>,
+  },
+  Ctrl: {
+    content: <>Ctrl</>,
+  },
+  Alt: {
+    content: <>Alt</>,
+  },
+
+  Tab: {
+    content: (
+      <>
+        Tab
+        <br />↹
+      </>
+    ),
+  },
+
+  CapsLock: {
+    content: (
+      <>
+        Caps
+        <br />
+        Lock
+      </>
+    ),
+  },
+  Fn: { content: <>Fn</> },
+  UpArrow: {
+    content: <>↑</>,
+  },
+  DownArrow: {
+    content: <>↓</>,
+  },
+  LeftArrow: {
+    content: <>←</>,
+  },
+  RightArrow: {
+    content: <>→</>,
+  },
+
+  Insert: {
+    content: <>Insert</>,
+  },
+  Delete: {
+    content: <>Delete</>,
+  },
+  Home: {
+    content: <>Home</>,
+  },
+  End: {
+    content: <>End</>,
+  },
+  PageUp: {
+    content: <>Pg Up</>,
+  },
+  PageDown: {
+    content: <>Pg Dn</>,
+  },
+
+  PrintScreen: {
+    content: (
+      <>
+        Print
+        <br />
+        Scr
+      </>
+    ),
+  },
+
+  ScrollLock: {
+    content: (
+      <>
+        Scrl
+        <br />
+        Lock
+      </>
+    ),
+  },
+
+  Pause: {
+    content: <>Pause</>,
+  },
+
+  NumLock: {
+    content: (
+      <>
+        Num
+        <br />
+        Lock
+      </>
+    ),
+  },
+
+  "⌘": { content: <>⌘</> },
+
+  "⏮": {
+    content: <>⏮</>,
+  },
+  "▶": {
+    content: <>▶</>,
+  },
+  "⏸": {
+    content: <>⏸</>,
+  },
+  "⏯": {
+    content: <>⏯</>,
+  },
+  "⏹": {
+    content: <>⏹</>,
+  },
+  "⏭": {
+    content: <>⏭</>,
+  },
+  "⏪": {
+    content: <>⏪</>,
+  },
+  "⏩": {
+    content: <>⏩</>,
+  },
+  "🔈": {
+    content: <>🔈</>,
+  },
+  "🔉": {
+    content: <>🔉</>,
+  },
+  "🔊": {
+    content: <>🔊</>,
+  },
+  "🔇": {
+    content: <>🔇</>,
+  },
+} satisfies Record<string, ButtonSpec>;
+
+export type ButtonList = typeof buttonList;

package/src/Display/LabeledValue/LabeledValue.module.css

@@ -0,0 +1,32 @@
+.root {
+  display: flex;
+  flex-direction: row;
+  padding-block: var(--spacing-gap);
+  align-items: center;
+  /* padding-inline: var(--spacing-gap-4); */
+  /* & > label, */
+  & > .content {
+    flex: 1;
+  }
+  & > label {
+    padding-right: var(--spacing-gap-2);
+    font-size: 0.9em;
+    color: var(--color-on-background-faint);
+  }
+  & > .content {
+    padding-left: var(--spacing-gap-2);
+    border-left: 1px solid var(--color-outline);
+  }
+}
+@container (max-width:400px) {
+  .root {
+    flex-direction: column;
+    & > label {
+      padding-right: 0;
+    }
+    & > .content {
+      padding-left: 0;
+      border-left: none;
+    }
+  }
+}

package/src/Display/LabeledValue/LabeledValue.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from "react";
+import styles from "./LabeledValue.module.css";
+import { cn } from "@studiocubics/utils";
+export interface LabeledValueProps extends ComponentProps<"div"> {
+  label: ReactNode;
+  slotProps?: {
+    label?: ComponentProps<"label">;
+    content?: ComponentProps<"span">;
+  };
+}
+
+export function LabeledValue(props: LabeledValueProps) {
+  const { label, children, className, ...rest } = props;
+  return (
+    <div className={cn(styles.root, className)} {...rest}>
+      <label>{label}</label>
+      <span className={styles.content}>{children}</span>
+    </div>
+  );
+}

package/src/Display/List/List.module.css

@@ -0,0 +1,143 @@
+.root {
+  list-style-type: none;
+  padding-inline: var(--spacing-gap-3);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.root:has(.shortened) {
+  padding: 0;
+}
+.secondary {
+  border-left: 1px solid var(--color-outline);
+  margin-left: var(--spacing-gap-3);
+  padding-inline: var(--spacing-gap);
+  margin-block: var(--spacing-gap-2);
+}
+.listItem {
+  --list-color: var(--color-on-background);
+  --list-background: transparent;
+  --list-hover-color: var(--color-on-background);
+  --list-hover-background: var(--color-background-faint);
+  --list-selected-color: var(--color-primary);
+  --list-selected-background: none;
+  --list-selected-hover-color: var(--color-on-background);
+  --list-selected-hover-background: none;
+  padding: calc(var(--spacing-gap-3) / 1.75)
+    calc(1.618 * var(--spacing-gap-3) / 1.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-gap);
+  overflow: hidden;
+  position: relative;
+  border-radius: var(--shape-br-sm);
+  color: var(--list-color);
+  transition: all var(--transition-time) var(--transition-tf);
+  background: var(--list-background);
+}
+
+.listItem.clickable {
+  cursor: pointer;
+}
+.listItem.clickable:not(.selected):not(:disabled):hover {
+  background: color-mix(in srgb, var(--list-hover-background) 50%, transparent);
+  color: var(--list-hover-color);
+}
+.listItem:focus-visible {
+  outline: var(--focus-ring);
+}
+.selected {
+  background: var(--list-selected-background);
+  color: var(--list-selected-color);
+  &:hover {
+    background: var(--list-selected-hover-background);
+    color: var(--list-selected-hover-color);
+  }
+}
+.disabled {
+  cursor: not-allowed;
+  background: var(--color-background-faint);
+  color: var(--color-on-background-faint);
+}
+.shortened {
+  gap: 0;
+  & > *:not(.primaryIcon) {
+    max-width: 0;
+  }
+}
+.content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  max-width: 50ch;
+  color: inherit;
+  font-weight: bold;
+  transition: max-width var(--transition-time) var(--transition-tf);
+  overflow: hidden;
+}
+
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  max-width: 50ch;
+  transition: max-width var(--transition-time) var(--transition-tf);
+}
+
+.dropDownIcon {
+  position: relative;
+  display: block;
+}
+.dropDownIcon.openSublist {
+  rotate: 180deg;
+}
+
+.marker {
+  display: none;
+  position: absolute;
+  left: 0;
+  width: 0;
+  z-index: -1;
+  transition:
+    width 0s linear,
+    top var(--transition-time) var(--transition-tf),
+    left var(--transition-time) var(--transition-tf);
+  --glass-border-radius: var(--shape-br-sm);
+  background-color: color-mix(
+    in srgb,
+    var(--color-background) 50%,
+    transparent
+  );
+}
+.listItem[data-color="primary"] {
+  --list-color: var(--color-primary);
+  --list-background: transparent;
+  --list-hover-color: var(--color-on-primary-container);
+  --list-hover-background: var(--color-primary-container);
+  --list-selected-color: none;
+  --list-selected-background: none;
+  --list-selected-hover-color: var(--color-on-background);
+  --list-selected-hover-background: none;
+}
+.listItem[data-color="secondary"] {
+  --list-color: var(--color-secondary);
+  --list-background: transparent;
+  --list-hover-color: var(--color-on-secondary-container);
+  --list-hover-background: var(--color-secondary-container);
+  --list-selected-color: none;
+  --list-selected-background: none;
+  --list-selected-hover-color: var(--color-on-background);
+  --list-selected-hover-background: none;
+}
+.listItem[data-color="error"] {
+  --list-color: var(--color-error);
+  --list-background: transparent;
+  --list-hover-color: var(--color-on-error-container);
+  --list-hover-background: var(--color-error-container);
+  --list-selected-color: none;
+  --list-selected-background: none;
+  --list-selected-hover-color: var(--color-on-secondary);
+  --list-selected-hover-background: none;
+}