@studiocubics/components 0.0.1 → 0.0.2

package/src/Display/IdentityDisplay/IdentityDisplay.tsx

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

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

package/src/Display/InputErrors/InputErrors.tsx

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

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

@@ -1,39 +0,0 @@
-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/buttonList.tsx

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

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

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

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