@studiocubics/components 0.0.1 → 0.0.2

package/dist/index.js

@@ -0,0 +1,64 @@
+export { Card } from './Cards/Card/Card.js';
+export { CollectionItemCard } from './Cards/CollectionItemCard/CollectionItemCard.js';
+export { CollectionItemCardActions } from './Cards/CollectionItemCard/CollectionItemCardActions.js';
+export { GlassCard } from './Cards/GlassCard/GlassCard.js';
+export { Accordion, AccordionContext } from './Display/Accordion/Accordion.js';
+export { AccordionItem } from './Display/Accordion/AccordionItem.js';
+export { Chip } from './Display/Chip/Chip.js';
+export { IdentityDisplay } from './Display/IdentityDisplay/IdentityDisplay.js';
+export { InputErrors } from './Display/InputErrors/InputErrors.js';
+export { Kbd } from './Display/Kbd/Kbd.js';
+export { buttonList } from './Display/Kbd/buttonList.js';
+export { LabeledValue } from './Display/LabeledValue/LabeledValue.js';
+export { List, ListItem, useList } from './Display/List/List.js';
+export { Skeleton } from './Display/Skeleton/Skeleton.js';
+export { Toaster } from './Display/Toast/Toaster.js';
+export { dismiss, subscribe, toast } from './Display/Toast/toast.js';
+export { Tooltip } from './Display/Tooltip/Tooltip.js';
+export { useTooltip } from './Display/Tooltip/useTooltip.js';
+export { ConfirmationForm } from './Forms/ConfirmationForm/ConfirmationForm.js';
+export { Button, ButtonBase } from './Inputs/Button/Button.js';
+export { Checkbox } from './Inputs/Checkbox/Checkbox.js';
+export { CheckboxSelectAll } from './Inputs/Checkbox/CheckboxSelectAll.js';
+export { CheckboxGroup, CheckboxGroupContext } from './Inputs/Checkbox/CheckboxGroup/CheckboxGroup.js';
+export { PasswordInput } from './Inputs/PasswordInput/PasswordInput.js';
+export { Select } from './Inputs/Select/Select.js';
+export { Switch } from './Inputs/Switch/Switch.js';
+export { TextInput } from './Inputs/TextInput/TextInput.js';
+export { TextAreaInput } from './Inputs/TextAreaInput/TextAreaInput.js';
+export { ThemeToggleListItem } from './Inputs/ThemeToggle/ThemeToggleListItem.js';
+export { Dialog } from './Layout/Dialog/Dialog.js';
+export { PageLayout } from './Layout/PageLayout/PageLayout.js';
+export { PageLayoutPagination } from './Layout/PageLayoutPagination/PageLayoutPagination.js';
+export { PageLayoutTabs } from './Layout/PageLayoutTabs/PageLayoutTabs.js';
+export { Popover } from './Layout/Popover/Popover.js';
+export { SectionWrapper } from './Layout/SectionWrapper/SectionWrapper.js';
+export { SIDEBAR_COOKIE, SIDEBAR_COOKIE_MAX_AGE, Sidebar, useSidebar } from './Layout/Sidebar/Sidebar.js';
+export { SidebarBody } from './Layout/Sidebar/SidebarBody/SidebarBody.js';
+export { SidebarDrawer } from './Layout/Sidebar/SidebarDrawer/SidebarDrawer.js';
+export { SidebarFooter } from './Layout/Sidebar/SidebarFooter/SidebarFooter.js';
+export { SidebarHeader } from './Layout/Sidebar/SidebarHeader/SidebarHeader.js';
+export { SidebarViewport } from './Layout/Sidebar/SidebarViewport/SidebarViewport.js';
+export { Table, TableCell, renderCell, useTable } from './Layout/Table/Table.js';
+export { TableFooter } from './Layout/Table/TableFooter.js';
+export { TableHeader } from './Layout/Table/TableHeader.js';
+export { getColumnCount, isAOA, isAOO, isOCR, isOOA } from './Layout/Table/tableUtils.js';
+export { eventWithRipple, useRipple } from './Misc/Ripple/Ripple.js';
+export { PoweredByBanner } from './Misc/PoweredByBanner/PoweredByBanner.js';
+export { Cursor } from './Misc/Cursor/Cursor.js';
+export { CubicsUILogo, StudioCubicsLogo } from './Misc/Logos.js';
+export { Spinner } from './Misc/Spinner/Spinner.js';
+export { TransitionAnimation } from './Misc/TransitionAnimation/TransitionAnimation.js';
+export { Pagination } from './Navigation/Pagination/Pagination.js';
+export { PaginationItem } from './Navigation/Pagination/PaginationItem.js';
+export { usePagination } from './Navigation/Pagination/usePagination.js';
+export { Breadcrumbs, ChevronRightIcon, EllipsisIcon } from './Navigation/Breadcrumbs/Breadcrumbs.js';
+export { BreadcrumbsItem } from './Navigation/Breadcrumbs/BreadcrumbsItem.js';
+export { useBreadcrumbs } from './Navigation/Breadcrumbs/useBreadcrumbs.js';
+export { Tabs, useTabs } from './Navigation/Tabs/Tabs.js';
+export { Tab } from './Navigation/Tabs/Tab/Tab.js';
+export { TabsBar } from './Navigation/Tabs/TabsBar/TabsBar.js';
+export { PageTitle } from './Typography/PageTitle/PageTitle.js';
+export { ClampedText } from './Typography/ClampedText/ClampedText.js';
+export { CopyIcon, CopyableText } from './Typography/CopyableText/CopyableText.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -5,7 +5,7 @@
     "access": "public"
   },
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "keywords": [
     "@studiocubics",
     "cubics",
@@ -35,9 +35,9 @@
     "react-dom": ">= 19"
   },
   "dependencies": {
-    "@studiocubics/hooks": "^0.0.1",
-    "@studiocubics/utils": "^0.0.1",
-    "@studiocubics/types": "^0.0.1"
+    "@studiocubics/utils": "^0.0.2",
+    "@studiocubics/hooks": "^0.0.2",
+    "@studiocubics/types": "^0.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

package/CHANGELOG.md

@@ -1,11 +0,0 @@
-# @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/eslint.config.js

@@ -1,21 +0,0 @@
-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/src/Cards/Card/Card.module.css

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

@@ -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 "./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

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

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

@@ -1,85 +0,0 @@
-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/GlassCard/GlassCard.module.css

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