@a2v2ai/uikit 0.0.36 → 0.0.38

package/Typography/Typography.stories.tsx

@@ -0,0 +1,425 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "./Typography"
+
+const meta: Meta<typeof Typography> = {
+  title: "Components/Typography",
+  component: Typography,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "subtitle1",
+        "subtitle2",
+        "subtitle3",
+        "body1",
+        "body2",
+        "body3",
+        "caption",
+        "subtitle1Medium",
+        "subtitle1Bold",
+        "subtitle1SemiBold",
+        "subtitle2Medium",
+        "subtitle2Bold",
+        "subtitle2SemiBold",
+        "subtitle3Medium",
+        "subtitle3Bold",
+        "subtitle3SemiBold",
+        "body1Medium",
+        "body1Bold",
+        "body1SemiBold",
+        "body2Medium",
+        "body2Bold",
+        "body2SemiBold",
+        "body3Medium",
+        "body3Bold",
+        "body3SemiBold",
+        "captionMedium",
+        "captionBold",
+        "captionSemiBold",
+      ],
+    },
+    color: {
+      control: "select",
+      options: [
+        "default",
+        "main-50", "main-100", "main-200", "main-300", "main-400", "main-500", "main-600", "main-700", "main-800", "main-900", "main-950",
+        "success-50", "success-100", "success-200", "success-300", "success-400", "success-500", "success-600", "success-700", "success-800", "success-900", "success-950",
+        "accent-50", "accent-100", "accent-200", "accent-300", "accent-400", "accent-500", "accent-600", "accent-700", "accent-800", "accent-900", "accent-950",
+        "error-50", "error-100", "error-200", "error-300", "error-400", "error-500", "error-600", "error-700", "error-800", "error-900", "error-950",
+        "warning-50", "warning-100", "warning-200", "warning-300", "warning-400", "warning-500", "warning-600", "warning-700", "warning-800", "warning-900", "warning-950",
+        "grey-50", "grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "grey-950",
+      ],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Typography>
+
+export const Default: Story = {
+  args: {
+    variant: "body1",
+    color: "default",
+    children: "The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex  gap={6}>
+      <Typography variant="h1">Typography / h1</Typography>
+      <Typography variant="h2">Typography / h2</Typography>
+      <Typography variant="h3">Typography / h3</Typography>
+      <Typography variant="h4">Typography / h4</Typography>
+      <Typography variant="h5">Typography / h5</Typography>
+      <Typography variant="h6">Typography / h6</Typography>
+      <Typography variant="subtitle1">Typography / Subtitle 1</Typography>
+      <Typography variant="subtitle2">Typography / Subtitle 2</Typography>
+      <Typography variant="body1">Typography / Body 1</Typography>
+      <Typography variant="body2">Typography / Body 2</Typography>
+      <Typography variant="body3">Typography / Body 3</Typography>
+      <Typography variant="caption">Typography / Caption</Typography>
+      <Typography variant="subtitle1Medium">Typography / Subtitle 1 Medium</Typography>
+      <Typography variant="subtitle1Bold">Typography / Subtitle 1 Bold</Typography>
+      <Typography variant="subtitle1SemiBold">Typography / Subtitle 1 SemiBold</Typography>
+      <Typography variant="subtitle2Medium">Typography / Subtitle 2 Medium</Typography>
+      <Typography variant="subtitle2Bold">Typography / Subtitle 2 Bold</Typography>
+      <Typography variant="subtitle2SemiBold">Typography / Subtitle 2 SemiBold</Typography>
+      <Typography variant="subtitle3Medium">Typography / Subtitle 3 Medium</Typography>
+      <Typography variant="subtitle3Bold">Typography / Subtitle 3 Bold</Typography>
+      <Typography variant="subtitle3SemiBold">Typography / Subtitle 3 SemiBold</Typography>
+      <Typography variant="body1Medium">Typography / Body 1 Medium</Typography>
+      <Typography variant="body1Bold">Typography / Body 1 Bold</Typography>
+      <Typography variant="body1SemiBold">Typography / Body 1 SemiBold</Typography>
+      <Typography variant="body2Medium">Typography / Body 2 Medium</Typography>
+      <Typography variant="body2Bold">Typography / Body 2 Bold</Typography>
+      <Typography variant="body2SemiBold">Typography / Body 2 SemiBold</Typography>
+      <Typography variant="body3Medium">Typography / Body 3 Medium</Typography>
+      <Typography variant="body3Bold">Typography / Body 3 Bold</Typography>
+      <Typography variant="body3SemiBold">Typography / Body 3 SemiBold</Typography>
+      <Typography variant="captionMedium">Typography / Caption Medium</Typography>
+      <Typography variant="captionBold">Typography / Caption Bold</Typography>
+      <Typography variant="captionSemiBold">Typography / Caption SemiBold</Typography>
+    </Flex>
+  ),
+}
+
+export const Colors: Story = {
+  render: () => (
+    <Flex  gap={8}>
+      {/* Default / Foreground */}
+      <Flex  gap={2}>
+        <Typography variant="h5">Default (Foreground)</Typography>
+        <Typography variant="body1" color="default">
+          The quick brown fox jumps over the lazy dog
+        </Typography>
+      </Flex>
+
+      {/* Main Colors */}
+      <Flex  gap={2}>
+        <Typography variant="h5">Main Colors</Typography>
+        <Flex  gap={1}>
+          <Typography variant="body1" color="main-950">Main 950</Typography>
+          <Typography variant="body1" color="main-900">Main 900</Typography>
+          <Typography variant="body1" color="main-800">Main 800</Typography>
+          <Typography variant="body1" color="main-700">Main 700</Typography>
+          <Typography variant="body1" color="main-600">Main 600</Typography>
+          <Typography variant="body1" color="main-500">Main 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Success Colors */}
+      <Flex  gap={2}>
+        <Typography variant="h5">Success Colors</Typography>
+        <Flex  gap={1}>
+          <Typography variant="body1" color="success-700">Success 700</Typography>
+          <Typography variant="body1" color="success-600">Success 600</Typography>
+          <Typography variant="body1" color="success-500">Success 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Accent Colors */}
+      <Flex  gap={2}>
+        <Typography variant="h5">Accent Colors</Typography>
+        <Flex  gap={1}>
+          <Typography variant="body1" color="accent-700">Accent 700</Typography>
+          <Typography variant="body1" color="accent-600">Accent 600</Typography>
+          <Typography variant="body1" color="accent-500">Accent 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Error Colors */}
+      <Flex  gap={2}>
+        <Typography variant="h5">Error Colors</Typography>
+        <Flex  gap={1}>
+          <Typography variant="body1" color="error-700">Error 700</Typography>
+          <Typography variant="body1" color="error-600">Error 600</Typography>
+          <Typography variant="body1" color="error-500">Error 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Warning Colors */}
+      <Flex  gap={2}>
+        <Typography variant="h5">Warning Colors</Typography>
+        <Flex  gap={1}>
+          <Typography variant="body1" color="warning-700">Warning 700</Typography>
+          <Typography variant="body1" color="warning-600">Warning 600</Typography>
+          <Typography variant="body1" color="warning-500">Warning 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Grey Colors */}
+      <Flex  gap={2}>
+        <Typography variant="h5">Grey Colors</Typography>
+        <Flex  gap={1}>
+          <Typography variant="body1" color="grey-900">Grey 900</Typography>
+          <Typography variant="body1" color="grey-700">Grey 700</Typography>
+          <Typography variant="body1" color="grey-500">Grey 500</Typography>
+          <Typography variant="body1" color="grey-400">Grey 400</Typography>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const H1: Story = {
+  args: {
+    variant: "h1",
+    children: "Heading 1",
+  },
+}
+
+export const H2: Story = {
+  args: {
+    variant: "h2",
+    children: "Heading 2",
+  },
+}
+
+export const H3: Story = {
+  args: {
+    variant: "h3",
+    children: "Heading 3",
+  },
+}
+
+export const H4: Story = {
+  args: {
+    variant: "h4",
+    children: "Heading 4",
+  },
+}
+
+export const H5: Story = {
+  args: {
+    variant: "h5",
+    children: "Heading 5",
+  },
+}
+
+export const H6: Story = {
+  args: {
+    variant: "h6",
+    children: "Heading 6",
+  },
+}
+
+export const Subtitle1: Story = {
+  args: {
+    variant: "subtitle1",
+    children: "Subtitle 1",
+  },
+}
+
+export const Subtitle2: Story = {
+  args: {
+    variant: "subtitle2",
+    children: "Subtitle 2",
+  },
+}
+
+export const Body1: Story = {
+  args: {
+    variant: "body1",
+    children: "Body 1 - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body2: Story = {
+  args: {
+    variant: "body2",
+    children: "Body 2 - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body3: Story = {
+  args: {
+    variant: "body3",
+    children: "Body 3 - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Caption: Story = {
+  args: {
+    variant: "caption",
+    children: "Caption - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Subtitle1Medium: Story = {
+  args: {
+    variant: "subtitle1Medium",
+    children: "Subtitle 1 Medium",
+  },
+}
+
+export const Subtitle1Bold: Story = {
+  args: {
+    variant: "subtitle1Bold",
+    children: "Subtitle 1 Bold",
+  },
+}
+
+export const Subtitle1SemiBold: Story = {
+  args: {
+    variant: "subtitle1SemiBold",
+    children: "Subtitle 1 SemiBold",
+  },
+}
+
+export const Subtitle2Medium: Story = {
+  args: {
+    variant: "subtitle2Medium",
+    children: "Subtitle 2 Medium",
+  },
+}
+
+export const Subtitle2Bold: Story = {
+  args: {
+    variant: "subtitle2Bold",
+    children: "Subtitle 2 Bold",
+  },
+}
+
+export const Subtitle2SemiBold: Story = {
+  args: {
+    variant: "subtitle2SemiBold",
+    children: "Subtitle 2 SemiBold",
+  },
+}
+
+export const Subtitle3Medium: Story = {
+  args: {
+    variant: "subtitle3Medium",
+    children: "Subtitle 3 Medium",
+  },
+}
+
+export const Subtitle3Bold: Story = {
+  args: {
+    variant: "subtitle3Bold",
+    children: "Subtitle 3 Bold",
+  },
+}
+
+export const Subtitle3SemiBold: Story = {
+  args: {
+    variant: "subtitle3SemiBold",
+    children: "Subtitle 3 SemiBold",
+  },
+}
+
+export const Body1Medium: Story = {
+  args: {
+    variant: "body1Medium",
+    children: "Body 1 Medium - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body1Bold: Story = {
+  args: {
+    variant: "body1Bold",
+    children: "Body 1 Bold - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body1SemiBold: Story = {
+  args: {
+    variant: "body1SemiBold",
+    children: "Body 1 SemiBold - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body2Medium: Story = {
+  args: {
+    variant: "body2Medium",
+    children: "Body 2 Medium - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body2Bold: Story = {
+  args: {
+    variant: "body2Bold",
+    children: "Body 2 Bold - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body2SemiBold: Story = {
+  args: {
+    variant: "body2SemiBold",
+    children: "Body 2 SemiBold - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body3Medium: Story = {
+  args: {
+    variant: "body3Medium",
+    children: "Body 3 Medium - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body3Bold: Story = {
+  args: {
+    variant: "body3Bold",
+    children: "Body 3 Bold - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body3SemiBold: Story = {
+  args: {
+    variant: "body3SemiBold",
+    children: "Body 3 SemiBold - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const CaptionMedium: Story = {
+  args: {
+    variant: "captionMedium",
+    children: "Caption Medium - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const CaptionBold: Story = {
+  args: {
+    variant: "captionBold",
+    children: "Caption Bold - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const CaptionSemiBold: Story = {
+  args: {
+    variant: "captionSemiBold",
+    children: "Caption SemiBold - The quick brown fox jumps over the lazy dog",
+  },
+}

package/Typography/Typography.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import {
+  type TextVariant,
+  type TextColor,
+  textVariantClasses,
+  textColorClasses,
+} from "../lib/typography-types";
+
+const typographyVariants = cva("", {
+  variants: {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify",
+    },
+    variant: textVariantClasses,
+    color: textColorClasses,
+  },
+  defaultVariants: {
+    variant: "body1",
+    color: "default",
+  },
+});
+
+type TypographyVariant = TextVariant;
+type TypographyColor = TextColor;
+type TypographyAlign = "left" | "center" | "right" | "justify";
+
+const variantElementMap: Record<
+  TypographyVariant,
+  keyof React.JSX.IntrinsicElements
+> = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "p",
+  subtitle2: "p",
+  subtitle3: "p",
+  body1: "p",
+  body2: "p",
+  body3: "p",
+  caption: "span",
+  subtitle1Medium: "p",
+  subtitle1Bold: "p",
+  subtitle1SemiBold: "p",
+  subtitle2Medium: "p",
+  subtitle2Bold: "p",
+  subtitle2SemiBold: "p",
+  subtitle3Medium: "p",
+  subtitle3Bold: "p",
+  subtitle3SemiBold: "p",
+  body1Medium: "p",
+  body1Bold: "p",
+  body1SemiBold: "p",
+  body2Medium: "p",
+  body2Bold: "p",
+  body2SemiBold: "p",
+  body3Medium: "p",
+  body3Bold: "p",
+  body3SemiBold: "p",
+  captionMedium: "span",
+  captionBold: "span",
+  captionSemiBold: "span",
+};
+
+type TypographyProps<T extends React.ElementType = "p"> = {
+  as?: T;
+  asChild?: boolean;
+  variant?: TypographyVariant;
+  color?: TypographyColor;
+  align?: TypographyAlign;
+} & Omit<
+  React.ComponentPropsWithoutRef<T>,
+  "as" | "asChild" | "color" | "variant" | "align"
+>;
+
+function Typography<T extends React.ElementType = "p">({
+  className,
+  variant = "body1",
+  color = "default",
+  align,
+  as,
+  asChild = false,
+  ...props
+}: TypographyProps<T>) {
+  const defaultElement = variant ? variantElementMap[variant] : "p";
+  const Component = asChild ? Slot : as ?? defaultElement;
+
+  return (
+    <Component
+      data-slot="typography"
+      className={cn(typographyVariants({ variant, color, align, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Typography, typographyVariants };
+export type { TypographyVariant, TypographyColor, TypographyAlign };

package/helpers.ts

@@ -0,0 +1,5 @@
+// Helpers (re-exported utilities)
+export { cn, copyToClipboard } from "./lib/utils"
+export { clsx, type ClassValue } from "clsx"
+export { twMerge } from "tailwind-merge"
+export { cva, type VariantProps } from "class-variance-authority"

package/{icons.js → icons.ts}

@@ -1,2 +1,2 @@
 // Re-export all icons from lucide-react
-export * from "lucide-react";
+export * from "lucide-react"