@zentauri-ui/zentauri-components 1.4.6 → 1.4.41

package/src/ui/typography/list-base.tsx

@@ -1,88 +0,0 @@
-import { cn } from "../../lib/utils";
-
-import type { ListProps, ListItemProps } from "./types";
-import {
-  orderedListVariants,
-  typographyToneVariants,
-  unorderedListMarkerVariants,
-} from "./variants";
-
-export function ListBase(props: ListProps) {
-  if ("ordered" in props && props.ordered === true) {
-    const {
-      tone,
-      className,
-      children,
-      ref,
-      ordered,
-      marker,
-      ...rest
-    } = props;
-
-    void ordered;
-    void marker;
-
-    return (
-      <ol
-        ref={ref}
-        data-slot="typography-list"
-        data-list-type="ordered"
-        className={cn(
-          typographyToneVariants({ tone }),
-          orderedListVariants(),
-          className,
-        )}
-        {...rest}
-      >
-        {children}
-      </ol>
-    );
-  }
-
-  const {
-    marker = "disc",
-    tone,
-    className,
-    children,
-    ref,
-    ordered,
-    ...rest
-  } = props;
-
-  void ordered;
-
-  return (
-    <ul
-      ref={ref}
-      data-slot="typography-list"
-      data-list-type="unordered"
-      className={cn(
-        typographyToneVariants({ tone }),
-        unorderedListMarkerVariants({ marker }),
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </ul>
-  );
-}
-
-ListBase.displayName = "List";
-
-export function ListItemBase(props: ListItemProps) {
-  const { className, children, ref, ...rest } = props;
-
-  return (
-    <li
-      ref={ref}
-      data-slot="typography-list-item"
-      className={cn("leading-relaxed", className)}
-      {...rest}
-    >
-      {children}
-    </li>
-  );
-}
-
-ListItemBase.displayName = "ListItem";

package/src/ui/typography/list.tsx

@@ -1,15 +0,0 @@
-import type { ListProps } from "./types";
-
-import { ListBase, ListItemBase } from "./list-base";
-
-export const ListItem = ListItemBase;
-
-function ListRoot(props: ListProps) {
-  return <ListBase {...props} />;
-}
-
-export const List = Object.assign(ListRoot, {
-  Item: ListItem,
-});
-
-ListRoot.displayName = "List";

package/src/ui/typography/text-base.tsx

@@ -1,43 +0,0 @@
-import { cn } from "../../lib/utils";
-
-import type { TextProps } from "./types";
-import { textSizeVariants, typographyToneVariants } from "./variants";
-
-export const TextBase = (props: TextProps) => {
-    const {
-      as = "p",
-      size = "base",
-      tone,
-      bold,
-      italic,
-      underline,
-      strikethrough,
-      highlight,
-      className,
-      children,
-      ...rest
-    } = props;
-
-    const Component = as;
-
-    return (
-      <Component
-        data-slot="typography-text"
-        className={cn(
-          typographyToneVariants({ tone }),
-          textSizeVariants({ size }),
-          bold && "font-semibold",
-          italic && "italic",
-          underline && "underline underline-offset-2",
-          strikethrough && "line-through",
-          highlight && "rounded bg-amber-400/15 px-0.5",
-          className,
-        )}
-        {...rest}
-      >
-        {children}
-      </Component>
-    );
-};
-
-TextBase.displayName = "Text";

package/src/ui/typography/text.tsx

@@ -1,8 +0,0 @@
-import { TextBase } from "./text-base";
-import type { TextProps } from "./types";
-
-export const Text = (props: TextProps) => {
-  return <TextBase {...props} />;
-};
-
-Text.displayName = "Text";

package/src/ui/typography/types.ts

@@ -1,90 +0,0 @@
-import type { VariantProps } from "class-variance-authority";
-import type {
-  ComponentProps,
-  HTMLAttributes,
-  RefObject,
-} from "react";
-
-import type {
-  textSizeVariants,
-  typographyToneVariants,
-  unorderedListMarkerVariants,
-} from "./variants";
-
-export type TypographyTone = NonNullable<
-  VariantProps<typeof typographyToneVariants>["tone"]
->;
-
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-
-export type HeadingProps = Omit<
-  ComponentProps<"h1">,
-  "color"
-> & {
-  level: HeadingLevel;
-  /** Visual scale; defaults to `level`. */
-  displayLevel?: HeadingLevel;
-  tone?: TypographyTone;
-  bold?: boolean;
-  italic?: boolean;
-  underline?: boolean;
-  strikethrough?: boolean;
-  ref?: RefObject<HTMLHeadingElement>;
-};
-
-export type TextElement = "p" | "span" | "div" | "label";
-
-export type TextProps = Omit<HTMLAttributes<HTMLElement>, "color"> & {
-  as?: TextElement;
-  size?: NonNullable<VariantProps<typeof textSizeVariants>["size"]>;
-  tone?: TypographyTone;
-  bold?: boolean;
-  italic?: boolean;
-  underline?: boolean;
-  strikethrough?: boolean;
-  highlight?: boolean;
-};
-
-export type UnorderedMarker = NonNullable<
-  VariantProps<typeof unorderedListMarkerVariants>["marker"]
->;
-
-export type ListProps =
-  | (Omit<ComponentProps<"ul">, "color"> & {
-      ordered?: false;
-      marker?: UnorderedMarker;
-      tone?: TypographyTone;
-    })
-  | (Omit<ComponentProps<"ol">, "color"> & {
-      ordered: true;
-      marker?: undefined;
-      tone?: TypographyTone;
-    });
-
-export type ListItemProps = ComponentProps<"li"> & {
-  ref?: RefObject<HTMLLIElement>;
-};
-
-export type BlockquoteProps = ComponentProps<"blockquote"> & {
-  tone?: TypographyTone;
-  /** Attribution label shown in a footer (distinct from the HTML `cite` URL attribute). */
-  attribution?: string;
-  ref?: RefObject<HTMLQuoteElement>;
-};
-
-export type InlineCodeProps = Omit<
-  ComponentProps<"code">,
-  "color"
-> & {
-  tone?: TypographyTone;
-};
-
-export type CodeBlockProps = Omit<
-  ComponentProps<"pre">,
-  "color"
-> & {
-  tone?: TypographyTone;
-  /** Hint for stacked highlighting stacks / aria-labels. */
-  language?: string;
-  ref?: RefObject<HTMLPreElement>;
-};

package/src/ui/typography/typography.test.tsx

@@ -1,80 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import {
-  Blockquote,
-  CodeBlock,
-  Heading,
-  InlineCode,
-  List,
-  ListItem,
-  Text,
-} from "./index";
-
-describe("Typography primitives", () => {
-  it("should render Heading as the requested level with displayName", () => {
-    render(<Heading level={2}>Section</Heading>);
-    expect(
-      screen.getByRole("heading", { level: 2, name: "Section" }),
-    ).toBeInTheDocument();
-    expect(Heading.displayName).toBe("Heading");
-  });
-
-  it("should apply tone classes on Text", () => {
-    const { container } = render(
-      <Text tone="muted" data-testid="muted-text">
-        Body
-      </Text>,
-    );
-    const node = container.querySelector('[data-testid="muted-text"]');
-    expect(node?.className).toMatch(/text-slate-400/);
-  });
-
-  it("should render unordered List with list marker utilities", () => {
-    const { container } = render(
-      <List>
-        <ListItem>Alpha</ListItem>
-      </List>,
-    );
-    const ul = container.querySelector('[data-slot="typography-list"]');
-    expect(ul?.tagName).toBe("UL");
-    expect(ul?.className).toMatch(/list-disc/);
-  });
-
-  it("should render ordered List as ol", () => {
-    const { container } = render(
-      <List ordered>
-        <ListItem>One</ListItem>
-      </List>,
-    );
-    const ol = container.querySelector('[data-slot="typography-list"]');
-    expect(ol?.tagName).toBe("OL");
-    expect(ol?.className).toMatch(/list-decimal/);
-  });
-
-  it("should render Blockquote with optional attribution footer", () => {
-    render(
-      <Blockquote attribution="Source">
-        <p>Quoted</p>
-      </Blockquote>,
-    );
-    expect(screen.getByText("Quoted")).toBeInTheDocument();
-    expect(screen.getByText("Source")).toBeInTheDocument();
-  });
-
-  it("should render InlineCode with monospace styling token", () => {
-    const { container } = render(<InlineCode>npm i</InlineCode>);
-    const code = container.querySelector('[data-slot="typography-inline-code"]');
-    expect(code?.tagName).toBe("CODE");
-    expect(code?.className).toMatch(/font-mono/);
-  });
-
-  it("should render CodeBlock with nested code element", () => {
-    const { container } = render(
-      <CodeBlock language="tsx">{`const x = 1;`}</CodeBlock>,
-    );
-    const pre = container.querySelector('[data-slot="typography-code-block"]');
-    expect(pre?.tagName).toBe("PRE");
-    expect(pre?.querySelector("code")?.textContent).toContain("const x");
-  });
-});

package/src/ui/typography/variants.ts

@@ -1,72 +0,0 @@
-import { cva } from "class-variance-authority";
-
-/** Semantic text colors aligned with slate/cyan/violet accents used across the kit (dark-first). */
-export const typographyToneVariants = cva("", {
-  variants: {
-    tone: {
-      default: "text-slate-50 border-white/15",
-      muted: "text-slate-400 border-white/15",
-      primary: "text-cyan-300 border-cyan-300/40",
-      secondary: "text-slate-300 border-white/15",
-      accent: "text-violet-300 border-violet-300/40",
-      destructive: "text-rose-400 border-rose-300/40",
-      info: "text-sky-300 border-sky-300/40",
-      success: "text-emerald-300 border-emerald-300/40",
-      warning: "text-amber-300 border-amber-300/40",
-      error: "text-red-300 border-red-300/40",
-      "gradient-pink-violet": "bg-linear-to-r from-pink-400 to-violet-400 bg-clip-text text-transparent w-fit",
-      "gradient-cyan-violet": "bg-linear-to-r from-cyan-400 to-violet-400 bg-clip-text text-transparent w-fit",
-      "gradient-cyan-blue": "bg-linear-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent w-fit",
-      "gradient-cyan-green": "bg-linear-to-r from-cyan-400 to-green-400 bg-clip-text text-transparent w-fit",
-      "gradient-cyan-orange": "bg-linear-to-r from-cyan-400 to-orange-400 bg-clip-text text-transparent w-fit",
-      "gradient-cyan-red": "bg-linear-to-r from-cyan-400 to-red-400 bg-clip-text text-transparent w-fit",
-      "gradient-cyan-purple": "bg-linear-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent w-fit",
-      "gradient-cyan-pink": "bg-linear-to-r from-cyan-400 to-pink-400 bg-clip-text text-transparent w-fit",
-    },
-  },
-  defaultVariants: {
-    tone: "default",
-  },
-});
-
-export const headingLevelVariants = cva("scroll-m-20", {
-  variants: {
-    level: {
-      1: "text-4xl font-bold tracking-tight md:text-5xl",
-      2: "text-3xl font-semibold tracking-tight",
-      3: "text-2xl font-semibold tracking-tight",
-      4: "text-xl font-semibold tracking-tight",
-      5: "text-lg font-medium",
-      6: "text-base font-medium",
-    },
-  },
-});
-
-export const textSizeVariants = cva("", {
-  variants: {
-    size: {
-      sm: "text-sm leading-relaxed",
-      base: "text-base leading-relaxed",
-      lg: "text-lg leading-relaxed",
-    },
-  },
-  defaultVariants: {
-    size: "base",
-  },
-});
-
-/** Marker style for unordered lists; ignored when `ordered` is true (decimal numbering). */
-export const unorderedListMarkerVariants = cva("space-y-2 pl-5", {
-  variants: {
-    marker: {
-      disc: "list-disc",
-      circle: "[list-style-type:circle]",
-      none: "list-none pl-0",
-    },
-  },
-  defaultVariants: {
-    marker: "disc",
-  },
-});
-
-export const orderedListVariants = cva("list-decimal space-y-2 pl-5");