@studiocubics/components 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @studiocubics/components
+
+## 0.0.1
+
+### Patch Changes
+
+- First publish inshallah!
+- Updated dependencies
+  - @studiocubics/hooks@0.0.1
+  - @studiocubics/types@0.0.1
+  - @studiocubics/utils@0.0.1

package/README.md

@@ -0,0 +1,71 @@
+# Components
+
+## Cards
+
+[x] Card
+[x] GlassCard
+[x] CollectionItemCard
+
+## Display
+
+[x] Accordion
+[] AspectRatio
+[] Carousel
+[x] Chip
+[] Code
+[x] IdentityDisplay
+[x] Kbd
+[x] LabeledValue
+[x] List
+[x] Skeleton
+[x] Tooltip
+
+## Forms
+
+[x] ConfirmationForm
+
+## Inputs
+
+[x] Button
+[] ButtonGroup
+[x] Checkbox
+[] Combobox
+[] DateTime
+[] OTP
+[x] Select
+[] Slider
+[x] Switch
+[x] TextAreaInput
+[x] TextInput
+[] ToggleGroup
+
+## Layout
+
+[x] Dialog
+[x] PageLayout
+[x] PageLayoutPagination
+[x] PageLayoutTabs
+[x] Popover
+[x] SectionWrapper
+[x] Sidebar
+[x] Table
+
+## Misc
+
+[x] Cursor
+[x] Logos
+[x] Ripple
+[x] Spinner
+[x] TransitionAnimation
+
+## Navigation
+
+[x] Breadcrumbs
+[x] Pagination
+[x] Tabs
+
+## Typography
+
+[x] ClampedText
+[x] CopyableText
+[x] PageTitle

package/eslint.config.js

@@ -0,0 +1,21 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@studiocubics/components",
+  "description": "Package containing UI components by Studio Cubics",
+  "publishConfig": {
+    "access": "public"
+  },
+  "private": false,
+  "version": "0.0.1",
+  "keywords": [
+    "@studiocubics",
+    "cubics",
+    "studio",
+    "components",
+    "ui",
+    "design"
+  ],
+  "author": {
+    "name": "Studio Cubics",
+    "email": "studiocubics7@gmail.com",
+    "url": "https://studio-cubics.vercel.app"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "development": "./src/index.ts",
+      "production": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "peerDependencies": {
+    "react": ">= 19",
+    "react-dom": ">= 19"
+  },
+  "dependencies": {
+    "@studiocubics/hooks": "^0.0.1",
+    "@studiocubics/utils": "^0.0.1",
+    "@studiocubics/types": "^0.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "postcss-modules": "^6.0.1",
+    "rollup": "^4.53.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-preserve-directives": "^1.1.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "clean:build": "rimraf dist node_modules && rollup -c",
+    "lint": "eslint .",
+    "clean": "rimraf dist node_modules"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,34 @@
+import { defineConfig } from "rollup";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import terser from "@rollup/plugin-terser";
+import preserveDirectives from "rollup-preserve-directives";
+
+export default defineConfig({
+  input: "src/index.ts",
+  output: {
+    preserveModules: true,
+    preserveModulesRoot: "src",
+    dir: "dist",
+    format: "esm",
+    sourcemap: true,
+  },
+  plugins: [
+    preserveDirectives(),
+    postcss({
+      include: "**/*.module.css",
+      modules: true,
+      extract: true,
+      // minimize: true,
+    }),
+    typescript({ tsconfig: "./tsconfig.json" }),
+    // terser({ compress: { directives: false } }),
+  ],
+  external: [
+    "react/jsx-runtime",
+    "react",
+    "react-dom",
+    "@studiocubics/utils",
+    "@studiocubics/hooks",
+  ],
+});

package/src/Cards/Card/Card.module.css

@@ -0,0 +1,27 @@
+.square {
+  aspect-ratio: 1;
+}
+.fullWidth {
+  width: 100%;
+}
+
+.size_sm {
+  padding: var(--spacing-gap-2);
+  border-radius: var(--shape-br-sm);
+}
+.size_md {
+  padding: var(--spacing-gap-4);
+  border-radius: var(--shape-br-md);
+}
+.size_lg {
+  padding: var(--spacing-gap-6);
+  border-radius: var(--shape-br-lg);
+}
+
+.outlined {
+  border: 1px solid var(--color-outline);
+  background: none;
+}
+.contained {
+  background: var(--color-surface-alpha);
+}

package/src/Cards/Card/Card.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 "./Card.module.css";
+
+/**
+ * Props specific to the Card component.
+ *
+ * These extend the intrinsic element props of whatever element is passed via `as`.
+ * @group Card
+ * @category inputs
+ */
+export interface CardBaseProps {
+  /** Visual style variant.
+   * @default "contained"
+   */
+  variant?: "contained" | "outlined";
+
+  /** Expands width to 100%. */
+  fullWidth?: boolean;
+
+  /** Force a 1:1 aspect ratio. */
+  square?: boolean;
+
+  /** Card size.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+}
+const defaultElement = "div";
+type DefaultElement = typeof defaultElement;
+/**
+ * Polymorphic props for the Card component.
+ *
+ * `C` defines the element type rendered by the component (e.g. `"Card"`, `"a"`, `"div"`).
+ * All intrinsic props for `C` are supported unless overridden by `CardBaseProps`.
+ *
+ * @group Card
+ * @category inputs
+ */
+export type CardProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, CardBaseProps>;
+
+/**
+ * Base implementation for the Card component.
+ *
+ * This is a polymorphic component that defaults to rendering a `<Card>`.
+ * Use the `as` prop to change the underlying element.
+ *
+ * @typeParam C - The intrinsic or custom element type to render.
+ *
+ * @group Card
+ * @category inputs
+ */
+function CardBase<C extends ElementType = DefaultElement>(props: CardProps<C>) {
+  const {
+    as,
+    className,
+    variant = "contained",
+    size = "md",
+    fullWidth = false,
+    square,
+    ref,
+    ...restProps
+  } = props;
+  const Component = (as || defaultElement) as ElementType;
+
+  const componentProps = {
+    className: cn(
+      className,
+      square ? styles.square : "",
+      fullWidth ? styles.fullWidth : "",
+      styles[`size_${size}`],
+      styles[variant]
+    ),
+    ref,
+    ...restProps,
+  };
+
+  return <Component {...componentProps} />;
+}
+CardBase.displayName = "Card";
+
+/**
+ * A polymorphic Card component.
+ *
+ * By default it renders a `<Card>`, but any element can be used via the `as` prop:
+ *
+ * ```tsx
+ * <Card as="a" href="/docs">Read docs</Card>
+ * ```
+ *
+ * @group Card
+ * @category inputs
+ */
+export const Card = CardBase as PolymorphicComponentType<
+  CardBaseProps,
+  DefaultElement
+>;

package/src/Cards/CollectionItemCard/CollectionItemCard.module.css

@@ -0,0 +1,84 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: hidden;
+  border-radius: var(--shape-br-md);
+  background-color: var(--color-background);
+  pointer-events: none;
+}
+.image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 20svh;
+  overflow: hidden;
+  & > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1618em;
+  padding: var(--spacing-gap-2) calc(1.618 * var(--spacing-gap-2));
+  overflow: hidden;
+  transition: all var(--transition-time) var(--transition-tf);
+  color: var(--color-on-surface);
+  pointer-events: all;
+  border-radius: calc(var(--shape-br-md) - var(--spacing-gap));
+  margin: var(--spacing-gap);
+  & > p {
+    display: flex;
+    align-items: center;
+  }
+}
+.description {
+  color: var(--color-on-background-faint);
+  font-size: 0.8em;
+}
+.subtitle {
+  color: var(--color-on-background-faint);
+  font-size: 1em;
+}
+.clickable {
+  transition: all var(--transition-time) var(--transition-tf);
+  & > .main {
+    cursor: pointer;
+    background: var(--color-background);
+  }
+  &:has(.main:hover) {
+    background: var(--color-background-faint);
+  }
+}
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-2);
+  & > h4 {
+    flex: 1;
+    font-size: 1.2em;
+  }
+}
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  pointer-events: all;
+}
+
+@container (min-width:600px) {
+  .root {
+    flex-direction: row;
+    & > .image {
+      width: 10vw;
+      height: auto;
+      aspect-ratio: 1;
+      min-width: 3rem;
+      max-width: 6rem;
+    }
+  }
+}

package/src/Cards/CollectionItemCard/CollectionItemCard.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import type { ComponentProps, ElementType, ReactNode } from "react";
+import styles from "./CollectionItemCard.module.css";
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import { cn } from "@studiocubics/utils";
+import {
+  ClampedText,
+  type ClampedTextProps,
+} from "../../Typography/ClampedText/ClampedText";
+import { Chip, type ChipProps } from "../../Display/Chip/Chip";
+/**
+ * Props specific to the CollectionItemCard component.
+ *
+ * These extend the intrinsic element props of whatever element is passed via `as`.
+ * @group CollectionItemCard
+ * @category inputs
+ */
+export interface CollectionItemCardBaseProps {
+  thumbnail?: ReactNode;
+  title: ReactNode;
+  chip?: ReactNode;
+  subtitle?: ReactNode;
+  description?: ReactNode;
+  footer?: ReactNode;
+  slotProps?: {
+    root?: ComponentProps<"div">;
+    chip?: ChipProps;
+    thumbnail?: ComponentProps<"div">;
+    titleContainer?: ComponentProps<"div">;
+    title?: ClampedTextProps;
+    subtitle?: ClampedTextProps;
+    description?: ClampedTextProps;
+    footerContainer?: ComponentProps<"div">;
+  };
+}
+const defaultElement = "a";
+type DefaultElement = typeof defaultElement;
+/**
+ * Polymorphic props for the CollectionItemCard component.
+ *
+ * `C` defines the element type rendered by the component (e.g. `"CollectionItemCard"`, `"a"`, `"div"`).
+ * All intrinsic props for `C` are supported unless overridden by `CollectionItemCardBaseProps`.
+ *
+ * @group CollectionItemCard
+ * @category inputs
+ */
+export type CollectionItemCardProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, CollectionItemCardBaseProps>;
+
+/**
+ * Base implementation for the CollectionItemCard component.
+ *
+ * This is a polymorphic component that defaults to rendering a `<CollectionItemCard>`.
+ * Use the `as` prop to change the underlying element.
+ *
+ * @typeParam C - The intrinsic or custom element type to render.
+ *
+ * @group CollectionItemCard
+ * @category inputs
+ */
+function CollectionItemCardBase<C extends ElementType = DefaultElement>(
+  props: CollectionItemCardProps<C>,
+) {
+  const {
+    as,
+    className,
+    ref,
+    thumbnail,
+    title,
+    chip,
+    subtitle,
+    description,
+    footer,
+    slotProps = {},
+    ...restProps
+  } = props;
+  const Component = as || defaultElement;
+
+  const clickable = !!props.href || !!props.onClick;
+  const componentProps = {
+    className: cn(className, styles.main),
+    ref,
+    ...restProps,
+  };
+
+  return (
+    <div
+      {...slotProps.root}
+      className={cn(
+        styles.root,
+        clickable ? styles.clickable : "",
+        slotProps.root?.className,
+      )}
+    >
+      {thumbnail && (
+        <div
+          {...slotProps.thumbnail}
+          className={cn(styles.image, slotProps.thumbnail?.className)}
+        >
+          {thumbnail}
+        </div>
+      )}
+      <Component {...componentProps}>
+        <div
+          {...slotProps.titleContainer}
+          className={cn(styles.title, slotProps.titleContainer?.className)}
+        >
+          {chip &&
+            (typeof chip == "string" ? (
+              <Chip size="sm" {...slotProps.chip}>
+                {chip}
+              </Chip>
+            ) : (
+              chip
+            ))}
+          <ClampedText as="h4" {...slotProps.title}>
+            {title}
+          </ClampedText>
+        </div>
+        {subtitle && (
+          <ClampedText
+            {...slotProps.subtitle}
+            className={cn(styles.subtitle, slotProps.subtitle?.className)}
+          >
+            {subtitle}
+          </ClampedText>
+        )}
+        {description && (
+          <ClampedText
+            {...slotProps.description}
+            className={cn(styles.description, slotProps.description?.className)}
+          >
+            {description}
+          </ClampedText>
+        )}
+      </Component>
+      {footer && (
+        <div
+          {...slotProps.footerContainer}
+          className={cn(styles.footer, slotProps.footerContainer?.className)}
+        >
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}
+CollectionItemCardBase.displayName = "CollectionItemCard";
+
+/**
+ * A polymorphic CollectionItemCard component.
+ *
+ * By default it renders a `<CollectionItemCard>`, but any element can be used via the `as` prop:
+ *
+ * ```tsx
+ * <CollectionItemCard as="a" href="/docs">Read docs</CollectionItemCard>
+ * ```
+ *
+ * @group CollectionItemCard
+ * @category inputs
+ */
+export const CollectionItemCard =
+  CollectionItemCardBase as PolymorphicComponentType<
+    CollectionItemCardBaseProps,
+    DefaultElement
+  >;

package/src/Cards/CollectionItemCard/CollectionItemCardActions.tsx

@@ -0,0 +1,85 @@
+import { useAnchorElement } from "@studiocubics/hooks";
+import {
+  type ElementType,
+  type ReactNode,
+  type MouseEvent,
+  Fragment,
+} from "react";
+import { Button, type ButtonProps } from "../../Inputs/Button/Button";
+import { Tooltip } from "../../Display/Tooltip/Tooltip";
+import { Popover } from "../../Layout/Popover/Popover";
+
+export type DocumentAction<C extends ElementType = "a"> = {
+  label?: string;
+} & (
+  | ({
+      actionType: "popover";
+      popoverChildren: ReactNode;
+      icon: ReactNode;
+    } & ButtonProps<C>)
+  | { actionType: "node"; children: ReactNode }
+  | ({
+      actionType: "link";
+      href: string;
+      icon: ReactNode;
+    } & ButtonProps) //TODO Avoid 'as' conflict
+);
+export function CollectionItemCardActions({
+  actions,
+}: {
+  actions: DocumentAction[];
+}) {
+  return (
+    <>
+      {actions.map((action, i) => {
+        switch (action.actionType) {
+          case "popover":
+            return <PopoverTypeAction key={i} action={action} />;
+          case "link":
+            return <LinkTypeAction key={i} action={action} />;
+          default:
+            return <Fragment key={i}>{action.children}</Fragment>;
+        }
+      })}
+    </>
+  );
+}
+
+function PopoverTypeAction({
+  action,
+}: {
+  action: DocumentAction & { actionType: "popover" };
+}) {
+  const { actionType: _, icon, popoverChildren, onClick, ...rest } = action;
+  const { anchorEl, open, handleClick, handleClose } = useAnchorElement();
+  return (
+    <>
+      <Tooltip renderArrow title={action.label}>
+        <Button
+          {...rest}
+          onClick={(e: MouseEvent<HTMLAnchorElement>) => {
+            handleClick(e);
+            onClick?.(e);
+          }}
+        >
+          {icon}
+        </Button>
+      </Tooltip>
+      <Popover open={open} anchorEl={anchorEl} onClose={handleClose}>
+        {popoverChildren}
+      </Popover>
+    </>
+  );
+}
+function LinkTypeAction({
+  action,
+}: {
+  action: DocumentAction & { actionType: "link" };
+}) {
+  const { actionType: _, icon, ...rest } = action;
+  return (
+    <Tooltip renderArrow title={action.label}>
+      <Button {...rest}>{icon}</Button>
+    </Tooltip>
+  );
+}

package/src/Cards/CollectionItemCard/_index.ts

@@ -0,0 +1,2 @@
+export * from "./CollectionItemCard";
+export * from "./CollectionItemCardActions";