@studiocubics/components 0.0.1

package/src/Cards/GlassCard/GlassCard.module.css

@@ -0,0 +1,71 @@
+.root {
+  --glass-tint: var(--color-primary);
+  --glass-border-width: 2px;
+  --glass-border-radius: var(--shape-br-md);
+  --glass-border-color: var(--color-outline);
+  --glass-mouse-pointer-color: color-mix(
+    in srgb,
+    var(--color-primary) 50%,
+    transparent
+  );
+  --glass-shadow: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  --glass-backdrop-blur: 5px;
+  --glass-position: relative;
+
+  isolation: isolate;
+  border-radius: var(--glass-border-radius);
+  position: var(--glass-position);
+  box-shadow: inset 0px 0px 4px var(--glass-shadow);
+  backdrop-filter: blur(var(--glass-backdrop-blur));
+
+  /* Border */
+  &::after {
+    --glass-reflection-i: color-mix(
+      in srgb,
+      var(--glass-tint) 20%,
+      transparent
+    );
+    --glass-reflection: color-mix(in srgb, var(--glass-tint) 40%, transparent);
+    --glass-reflection-w: #ffffff79;
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: var(--glass-border-width);
+    background-image: linear-gradient(
+      var(--gradient-angle, 255deg),
+      var(--glass-reflection-w) 0%,
+      var(--glass-reflection) 0.5%,
+      transparent 30%,
+      transparent 70%,
+      var(--glass-reflection-i) 100%
+    );
+    opacity: var(--glass-reflection-intensity, 1);
+    mask:
+      linear-gradient(#000 0 0) exclude,
+      linear-gradient(#000 0 0) content-box;
+
+    z-index: -2;
+  }
+
+  /* Mouse Pointer Light */
+  &::before {
+    content: "";
+    inset: 0;
+    position: absolute;
+    transition: opacity var(--transition-time);
+    pointer-events: none;
+    opacity: 1;
+    padding: var(--glass-border-width);
+    mask:
+      linear-gradient(#000 0 0) exclude,
+      linear-gradient(#000 0 0) content-box;
+    border-radius: inherit;
+    background: radial-gradient(
+      250px circle at var(--mouse-x) var(--mouse-y),
+      var(--glass-mouse-pointer-color),
+      transparent 40%
+    );
+    z-index: -1;
+  }
+}

package/src/Cards/GlassCard/GlassCard.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useMousePosition } from "@studiocubics/hooks";
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import { mergeRefs, cn } from "@studiocubics/utils";
+import { type ElementType, useRef, useEffect } from "react";
+import styles from "./GlassCard.module.css";
+
+const defaultElement = "div";
+type DefaultElement = typeof defaultElement;
+
+export type GlassCardProps<C extends ElementType = DefaultElement> = Omit<
+  PolymorphicComponentProps<C, object>,
+  "ref"
+>;
+
+// Create the base component with forwardRef
+function GlassCardBase<C extends ElementType = DefaultElement>({
+  as,
+  children,
+  className,
+  ref,
+  ...restProps
+}: GlassCardProps<C>) {
+  const Component = (as || defaultElement) as ElementType;
+  const { mousePosition } = useMousePosition({ includeTouch: false });
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!cardRef.current) return;
+    if (!mousePosition.x || !mousePosition.y) return;
+
+    const rect = cardRef.current.getBoundingClientRect();
+    const x = mousePosition.x - rect.left;
+    const y = mousePosition.y - rect.top;
+    const xCenter = rect.left + rect.width / 2;
+    const yCenter = rect.top + rect.height / 2;
+
+    const dx = (mousePosition.x - xCenter) / rect.width;
+    const dy = (mousePosition.y - yCenter) / rect.height;
+
+    // Angle from card center to mouse
+    const angle = Math.atan2(dy, dx) * (180 / Math.PI) + 270;
+
+    // Distance normalized against window width/height
+    const dxGlobal = mousePosition.x - xCenter;
+    const dyGlobal = mousePosition.y - yCenter;
+    const tX = Math.min(Math.abs(dxGlobal) / window.innerWidth, 1);
+    const tY = Math.min(Math.abs(dyGlobal) / window.innerHeight, 1);
+    const t = Math.min(tX + tY, 1); // Manhattan distance capped at 1
+    const intensity = 1 - 0.8 * t; // maps to 0.2..1
+
+    cardRef.current.style.setProperty("--mouse-x", `${x}px`);
+    cardRef.current.style.setProperty("--mouse-y", `${y}px`);
+    cardRef.current.style.setProperty("--gradient-angle", `${angle}deg`);
+    cardRef.current.style.setProperty(
+      "--glass-reflection-intensity",
+      `${intensity}`
+    );
+  }, [mousePosition]);
+
+  const componentProps = {
+    ref: mergeRefs(ref, cardRef),
+    className: cn(className, styles.root),
+    ...restProps,
+  };
+
+  return <Component {...componentProps}>{children}</Component>;
+}
+
+GlassCardBase.displayName = "GlassCard";
+
+// Type assertion to make it polymorphic
+export const GlassCard = GlassCardBase as PolymorphicComponentType<
+  object,
+  DefaultElement
+>;

package/src/Cards/_index.ts

@@ -0,0 +1,3 @@
+export * from "./Card/Card";
+export * from "./CollectionItemCard/_index";
+export * from "./GlassCard/GlassCard";

package/src/Display/Accordion/Accordion.module.css

@@ -0,0 +1,69 @@
+.summary {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap);
+  padding: var(--spacing-gap);
+  border-radius: var(--shape-br-md);
+  position: relative;
+  isolation: isolate;
+  transition: all var(--transition-time) var(--transition-tf);
+  /* background: var(--color-background); */
+  &:hover {
+    background: var(--color-background-faint);
+  }
+}
+.highlight {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+.summaryContent {
+  flex: 1;
+  border-radius: calc(var(--shape-br-md) - var(--spacing-gap));
+  container-type: inline-size;
+  overflow: hidden;
+}
+.marker {
+  flex: 0 0 var(--spacing-gap-4);
+  width: var(--spacing-gap-4);
+  height: var(--spacing-gap-4);
+  position: relative;
+  & > svg {
+    position: absolute;
+    inset: 0;
+  }
+}
+.root {
+  background: var(--color-background);
+  border-radius: var(--shape-br-md);
+  overflow: hidden;
+  transition: margin-block var(--transition-time) var(--transition-tf);
+  margin-block: 0;
+
+  @media (prefers-reduced-motion: no-preference) {
+    interpolate-size: allow-keywords;
+  }
+  &::details-content {
+    overflow: hidden;
+    max-height: 0;
+    transition:
+      content-visibility var(--transition-time) allow-discrete,
+      max-height var(--transition-time) var(--transition-tf);
+  }
+  &[open] {
+    margin-block: var(--spacing-gap-2);
+    & > .summary {
+      background: var(--color-surface);
+    }
+    &::details-content {
+      max-height: 999px;
+      @supports (interpolate-size: allow-keywords) {
+        max-height: auto;
+      }
+    }
+  }
+}
+.content {
+  padding: var(--spacing-gap-3);
+}

package/src/Display/Accordion/Accordion.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+
+interface AccordionContextProps {
+  values: boolean[];
+  register: () => number;
+  update: (index: number, checked: boolean) => void;
+}
+interface AccordionProviderProps {
+  children: ReactNode;
+  exclusive?: boolean;
+  onChange?: (checked: boolean[]) => void;
+}
+
+export const AccordionContext = createContext<AccordionContextProps | null>(
+  null,
+);
+
+export function Accordion({
+  children,
+  exclusive = false,
+  onChange,
+}: AccordionProviderProps) {
+  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) => {
+      console.log("index", index, checked);
+
+      setValues((prev) => {
+        let next =
+          exclusive && checked ? new Array(prev.length).fill(false) : [...prev];
+        next[index] = checked;
+        onChange?.(next);
+        return next;
+      });
+    },
+    [exclusive, onChange],
+  );
+  const context = { values, register, update };
+
+  return (
+    <AccordionContext.Provider value={context}>
+      {children}
+    </AccordionContext.Provider>
+  );
+}

package/src/Display/Accordion/AccordionItem.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import {
+  type ComponentProps,
+  type ReactNode,
+  type ToggleEvent,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { AccordionContext } from "./Accordion";
+import styles from "./Accordion.module.css";
+import { cn, mergeRefs } from "@studiocubics/utils";
+import { GlassCard } from "../../Cards/GlassCard/GlassCard";
+
+export type AccordionProps = {
+  summary: ReactNode;
+  onToggle?: (e: ToggleEvent<HTMLDetailsElement>, current: boolean) => void;
+  openMarker?: ReactNode;
+  closeMarker?: ReactNode;
+  highlightOpen?: boolean;
+  slotProps?: {
+    marker?: ComponentProps<"span">;
+    summary?: ComponentProps<"summary">;
+    summaryContent?: ComponentProps<"div">;
+    content?: ComponentProps<"div">;
+  };
+} & ComponentProps<"details">;
+
+export function AccordionItem(props: AccordionProps) {
+  const {
+    summary,
+    open: htmlOpen,
+    children,
+    className,
+    onToggle,
+    highlightOpen = true,
+    openMarker = <OpenMarkerIcon />,
+    closeMarker = <CloseMarkerIcon />,
+    slotProps = {},
+    ref,
+    ...rest
+  } = props;
+
+  const [index, setIndex] = useState<number | null>(null);
+  const isRegistered = useRef(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(!!htmlOpen);
+  const itemRef = useRef<HTMLDetailsElement | null>(null);
+  const group = useContext(AccordionContext);
+
+  const open = group && index !== null ? group.values[index] : uncontrolledOpen;
+
+  const handleToggle = async (e: ToggleEvent<HTMLDetailsElement>) => {
+    const next = e.currentTarget.open;
+    if (group && index !== null) group.update(index, next);
+    else setUncontrolledOpen(next);
+    onToggle?.(e, next);
+    if (next) {
+      itemRef.current?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "smooth",
+      });
+    }
+  };
+
+  const componentProps = {
+    open,
+    onToggle: handleToggle,
+    className: cn(className, styles.root, open ? styles.open : ""),
+    ref: mergeRefs(ref, itemRef),
+    ...rest,
+  };
+  // Register with group if present
+  useEffect(() => {
+    if (!group || isRegistered.current) return;
+    isRegistered.current = true;
+    setIndex(group.register());
+  }, [group]);
+
+  return (
+    <details {...componentProps}>
+      <summary className={cn(className, styles.summary)}>
+        {open && highlightOpen && <GlassCard className={styles.highlight} />}
+        <div
+          {...slotProps.summaryContent}
+          className={cn(
+            styles.summaryContent,
+            slotProps.summaryContent?.className,
+          )}
+        >
+          {summary}
+        </div>
+        <span {...slotProps.marker} className={cn(styles.marker)}>
+          {open ? closeMarker : openMarker}
+        </span>
+      </summary>
+      <div
+        {...slotProps.content}
+        className={cn(styles.content, slotProps.content?.className)}
+      >
+        {children}
+      </div>
+    </details>
+  );
+}
+function OpenMarkerIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      strokeWidth="2.3"
+      stroke="currentColor"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+function CloseMarkerIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      strokeWidth="2.3"
+      stroke="currentColor"
+    >
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+  );
+}

package/src/Display/Accordion/_index.ts

@@ -0,0 +1,2 @@
+export * from "./Accordion";
+export * from "./AccordionItem";

package/src/Display/Chip/Chip.module.css

@@ -0,0 +1,64 @@
+.root {
+  --badge-outline-color: var(--color-outline);
+  --badge-color: var(--color-on-surface);
+  --badge-background: var(--color-surface);
+  color: var(--badge-color);
+  border: 1px solid var(--badge-outline-color);
+  background: var(--badge-background);
+  width: fit-content;
+  font-size: 0.9em;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap);
+}
+.outlined {
+  background: none;
+}
+.contained {
+  border: none;
+}
+.size_sm {
+  padding: calc(var(--spacing-gap) / 2) calc(1.618 * (var(--spacing-gap) / 2));
+  font-size: 0.8em;
+  border-radius: var(--shape-br-xs);
+}
+.size_md {
+  padding: calc(var(--spacing-gap-2) / 2)
+    calc(1.618 * (var(--spacing-gap-2) / 2));
+  border-radius: var(--shape-br-sm);
+}
+
+.size_lg {
+  padding: calc(var(--spacing-gap-3) / 2)
+    calc(1.618 * (var(--spacing-gap-3) / 2));
+  font-size: 1em;
+  border-radius: var(--shape-br-sm);
+}
+.root[data-color="primary"] {
+  --badge-color: var(--color-primary);
+  --badge-background: none;
+  --badge-outline-color: var(--color-primary);
+}
+.root[data-color="secondary"] {
+  --badge-color: var(--color-secondary);
+  --badge-background: none;
+  --badge-outline-color: var(--color-secondary);
+}
+.root[data-color="error"] {
+  --badge-color: var(--color-error);
+  --badge-background: none;
+  --badge-outline-color: var(--color-error);
+}
+.contained[data-color="primary"] {
+  --badge-color: var(--color-on-primary);
+  --badge-background: var(--color-primary);
+}
+.contained[data-color="secondary"] {
+  --badge-color: var(--color-on-secondary);
+  --badge-background: var(--color-secondary);
+}
+.contained[data-color="error"] {
+  --badge-color: var(--color-on-error);
+  --badge-background: var(--color-error);
+}

package/src/Display/Chip/Chip.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import { type ElementType } from "react";
+
+import { cn } from "@studiocubics/utils";
+import styles from "./Chip.module.css";
+
+const defaultElement = "span";
+type DefaultElement = typeof defaultElement;
+
+/**
+ * Props specific to the Chip component.
+ *
+ * These extend the intrinsic element props of whatever element is passed via `as`.
+ * @group Chip
+ * @category inputs
+ */
+export interface ChipBaseProps {
+  /** Visual style variant.
+   * @default "outlined"
+   */
+  variant?: "contained" | "outlined";
+
+  /** Expands width to 100%. */
+  fullWidth?: boolean;
+
+  /** Chip size.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+
+  color?: "primary" | "secondary" | "error";
+}
+
+/**
+ * Polymorphic props for the Chip component.
+ *
+ * `C` defines the element type rendered by the component (e.g. `"Chip"`, `"a"`, `"div"`).
+ * All intrinsic props for `C` are supported unless overridden by `ChipBaseProps`.
+ *
+ * @group Chip
+ * @category inputs
+ */
+export type ChipProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, ChipBaseProps>;
+
+/**
+ * Base implementation for the Chip component.
+ *
+ * This is a polymorphic component that defaults to rendering a `<Chip>`.
+ * Use the `as` prop to change the underlying element.
+ *
+ * @typeParam C - The intrinsic or custom element type to render.
+ *
+ * @group Chip
+ * @category inputs
+ */
+function ChipBase<C extends ElementType = DefaultElement>(props: ChipProps<C>) {
+  const {
+    as,
+    className,
+    variant = "outlined",
+    size = "md",
+    fullWidth = false,
+    color,
+    square,
+    ...restProps
+  } = props;
+  const Component = (as || defaultElement) as ElementType;
+
+  const componentProps = {
+    className: cn(
+      className,
+      styles.root,
+      square ? styles.square : "",
+      fullWidth ? styles.fullWidth : "",
+      styles[`size_${size}`],
+      styles[variant]
+    ),
+    "data-color": color,
+    ...restProps,
+  };
+
+  return <Component {...componentProps} />;
+}
+ChipBase.displayName = "Chip";
+
+/**
+ * A polymorphic Chip component.
+ *
+ * ```tsx
+ * <Chip as="a" href="/docs">Read docs</Chip>
+ * ```
+ *
+ * @group Chip
+ * @category inputs
+ */
+export const Chip = ChipBase as PolymorphicComponentType<
+  ChipBaseProps,
+  DefaultElement
+>;

package/src/Display/IdentityDisplay/IdentityDisplay.module.css

@@ -0,0 +1,95 @@
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-gap-2);
+  border-radius: var(--shape-br-md);
+  overflow: hidden;
+  transition:
+    padding var(--transition-time) var(--transition-tf),
+    width 0.1s var(--transition-time) var(--transition-tf),
+    color var(--transition-time) var(--transition-tf),
+    background var(--transition-time) var(--transition-tf);
+}
+.clickable {
+  cursor: pointer;
+  &:hover {
+    color: var(--color-on-primary-container);
+    background: var(--color-primary-container);
+  }
+}
+.main {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-2);
+}
+.image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  & > img {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+}
+.details {
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  & h4 {
+    font-weight: bold;
+    font-size: 1.1em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: left;
+  }
+  & > p {
+    text-align: left;
+    font-size: 0.9em;
+    font-weight: 400;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--color-on-background-faint);
+  }
+}
+.desc {
+  font-size: 0.9em;
+}
+.image-only {
+  padding: 0;
+  & .main,
+  & .image {
+    width: 100%;
+  }
+  .details {
+    display: none;
+  }
+  .desc {
+    display: none;
+  }
+}
+.square {
+  .main {
+    flex-direction: column;
+    align-items: center;
+  }
+  .details {
+    & > h4,
+    & > p {
+      text-align: center;
+    }
+  }
+  .desc {
+    display: none;
+  }
+}
+.compact {
+  .desc {
+    display: none;
+  }
+}