@studiocubics/components 0.0.1 → 0.0.2

package/src/Typography/ClampedText/ClampedText.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import type {
-  PolymorphicComponentProps,
-  PolymorphicComponentType,
-} from "@studiocubics/types";
-import { cn } from "@studiocubics/utils";
-import type { ElementType } from "react";
-import styles from "./ClampedText.module.css";
-
-/**
- * Props specific to the ClampedText component.
- *
- * These extend the intrinsic element props of whatever element is passed via `as`.
- * @group ClampedText
- * @category inputs
- */
-export interface ClampedTextBaseProps {
-  lineCount?: number;
-}
-const defaultElement = "p";
-type DefaultElement = typeof defaultElement;
-/**
- * Polymorphic props for the ClampedText component.
- *
- * `C` defines the element type rendered by the component (e.g. `"ClampedText"`, `"a"`, `"div"`).
- * All intrinsic props for `C` are supported unless overridden by `ClampedTextBaseProps`.
- *
- * @group ClampedText
- * @category inputs
- */
-export type ClampedTextProps<C extends ElementType = DefaultElement> =
-  PolymorphicComponentProps<C, ClampedTextBaseProps>;
-
-/**
- * Base implementation for the ClampedText component.
- *
- * This is a polymorphic component that defaults to rendering a `<ClampedText>`.
- * Use the `as` prop to change the underlying element.
- *
- * @typeParam C - The intrinsic or custom element type to render.
- *
- * @group ClampedText
- * @category inputs
- */
-function ClampedTextBase<C extends ElementType = DefaultElement>(
-  props: ClampedTextProps<C>,
-) {
-  const { as, className, lineCount = 1, style, ...restProps } = props;
-  const Component = (as || defaultElement) as ElementType;
-
-  const componentProps = {
-    className: cn(className, styles.root),
-    style: { WebkitLineClamp: `${lineCount}`, ...style },
-    ...restProps,
-  };
-
-  return <Component {...componentProps} />;
-}
-ClampedTextBase.displayName = "ClampedText";
-
-/**
- * A polymorphic ClampedText component.
- *
- * By default it renders a `<ClampedText>`, but any element can be used via the `as` prop:
- *
- * ```tsx
- * <ClampedText as="a" href="/docs">Read docs</ClampedText>
- * ```
- *
- * @group ClampedText
- * @category inputs
- */
-export const ClampedText = ClampedTextBase as PolymorphicComponentType<
-  ClampedTextBaseProps,
-  DefaultElement
->;

package/src/Typography/CopyableText/CopyableText.module.css

@@ -1,21 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-gap);
-  & > span {
-    background-color: var(--color-surface);
-    border-radius: var(--shape-br-sm);
-    padding: var(--spacing-gap);
-    overflow: auto hidden;
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 0.9em;
-    flex: 1;
-    &::-webkit-scrollbar {
-      /* Hide scrollbar for Chrome, Safari, and Opera */
-      display: none;
-    }
-  }
-}

package/src/Typography/CopyableText/CopyableText.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import type {
-  PolymorphicComponentProps,
-  PolymorphicComponentType,
-} from "@studiocubics/types";
-import { cn } from "@studiocubics/utils";
-import {
-  type ComponentProps,
-  type MouseEvent,
-  useEffect,
-  useState,
-  type ElementType,
-} from "react";
-import styles from "./CopyableText.module.css";
-import { useDelayedAction } from "@studiocubics/hooks";
-import { Button, type ButtonProps } from "../../Inputs/Button/Button";
-
-export interface CopyableTextBaseProps {
-  children: string;
-  disabled?: boolean;
-  slotProps?: {
-    button?: ButtonProps;
-  };
-}
-
-const defaultElement = "div";
-type DefaultElement = typeof defaultElement;
-
-export type CopyableTextProps<C extends ElementType = DefaultElement> =
-  PolymorphicComponentProps<C, CopyableTextBaseProps>;
-
-function CopyableTextBase<C extends ElementType = DefaultElement>(
-  props: CopyableTextProps<C>,
-) {
-  const {
-    as,
-    children,
-    className,
-    disabled = false,
-    slotProps = {},
-    ...rest
-  } = props as CopyableTextProps<DefaultElement>;
-
-  const [copied, setCopied] = useState(false);
-  const delay = useDelayedAction();
-  const Component = (as || defaultElement) as ElementType;
-  const componentProps = { ...rest, className: cn(className, styles.root) };
-
-  async function handleCopy(e: MouseEvent<HTMLButtonElement>) {
-    await navigator.clipboard.writeText(children);
-    setCopied(true);
-    slotProps.button?.onClick?.(e);
-  }
-  useEffect(() => {
-    if (copied) {
-      delay(() => setCopied(false), 2000);
-    }
-  }, [delay, copied]);
-  return (
-    <Component {...componentProps}>
-      <span>{children}</span>
-      <Button
-        disabled={disabled}
-        square
-        size="sm"
-        {...slotProps.button}
-        onClick={handleCopy}
-      >
-        {copied ? (
-          <CheckIcon width={24} height={24} />
-        ) : (
-          <CopyIcon width={24} height={24} />
-        )}
-      </Button>
-    </Component>
-  );
-}
-
-CopyableTextBase.displayName = "CopyableText";
-
-export const CopyableText = CopyableTextBase as PolymorphicComponentType<
-  CopyableTextBaseProps,
-  DefaultElement
->;
-
-export function CopyIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2.3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-    </svg>
-  );
-}
-// TODO convert to animated check icon
-function CheckIcon(props: ComponentProps<"svg">) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2.3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M4 12 9 17l11 -11" />
-    </svg>
-  );
-}

package/src/Typography/PageTitle/PageTitle.module.css

@@ -1,47 +0,0 @@
-.root {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding: var(--spacing-gap-4);
-  border-bottom: 1px solid var(--color-outline);
-  gap: var(--spacing-gap-3);
-  & h1 {
-    font-size: var(--fs-h2);
-  }
-  & h2 {
-    font-weight: normal;
-    color: var(--color-on-background-faint);
-    font-size: var(--fs-body2);
-  }
-}
-.noBorder {
-  border-bottom: none;
-}
-.size_lg {
-  padding: var(--spacing-gap-6);
-  & h1 {
-    font-size: var(--fs-h1);
-  }
-  & h2 {
-    font-size: var(--fs-body);
-  }
-}
-.size_sm {
-  padding: var(--spacing-gap-2);
-  & h1 {
-    font-size: var(--fs-h4);
-  }
-}
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-gap-2);
-  align-items: center;
-  flex: 1;
-  overflow: hidden;
-}

package/src/Typography/PageTitle/PageTitle.tsx

@@ -1,35 +0,0 @@
-import type { ReactNode } from "react";
-import styles from "./PageTitle.module.css";
-import { cn } from "@studiocubics/utils";
-
-export interface PageTitleProps {
-  title: ReactNode;
-  actions?: ReactNode;
-  subtitle?: ReactNode;
-  size?: "sm" | "md" | "lg";
-  noBorders?: boolean;
-}
-
-export function PageTitle({
-  title,
-  subtitle,
-  actions,
-  size = "md",
-  noBorders = false,
-}: PageTitleProps) {
-  return (
-    <div
-      className={cn(
-        styles.root,
-        styles[`size_${size}`],
-        noBorders ? styles.noBorder : ""
-      )}
-    >
-      <div className={styles.main}>
-        <h1>{title}</h1>
-        <h2>{subtitle}</h2>
-      </div>
-      {actions && <div className={styles.actions}>{actions}</div>}
-    </div>
-  );
-}

package/src/declaration.d.ts

@@ -1,4 +0,0 @@
-declare module "*.module.css" {
-  const classes: { [key: string]: string };
-  export default classes;
-}

package/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    // Output
-    "declaration": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["./src"]
-}