@studiocubics/components 0.0.1 → 0.0.2

package/src/Cards/GlassCard/GlassCard.tsx

@@ -1,80 +0,0 @@
-"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/Display/Accordion/Accordion.module.css

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

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

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

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

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

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