@a2v2ai/uikit 0.0.38 → 0.0.39

package/Typography/Typography.stories.tsx

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

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

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