@stackshift-ui/text 6.0.2 → 6.0.3

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/text",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -33,8 +34,8 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2"
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/scripts": "6.0.2"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./text";

package/src/text.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Text } from "./text";
+
+describe.concurrent("text", () => {
+  afterEach(cleanup);
+
+  test("Common: Text - test if renders without errors", ({ expect }) => {
+    const clx = "text-class";
+    render(<Text className={clx} />);
+    expect(screen.getByTestId("p").classList).toContain(clx);
+  });
+});

package/src/text.tsx

@@ -0,0 +1,91 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import cn from "classnames";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+
+type VariantType = "p";
+type fontSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
+type Weight =
+  | "thin"
+  | "extralight"
+  | "light"
+  | "normal"
+  | "semibold"
+  | "bold"
+  | "medium"
+  | "extrabold"
+  | "black";
+
+export interface TextProps extends Omit<HTMLProps<HTMLElement>, "as"> {
+  type?: string;
+  style?: React.CSSProperties;
+  muted?: boolean;
+  weight?: Weight;
+  fontSize?: fontSize;
+  [key: string]: any;
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+const displayName = "Text";
+
+export const Text: React.FC<TextProps> = ({
+  type = "p",
+  style,
+  muted = false,
+  weight = "normal",
+  fontSize = "base",
+  children,
+  className,
+  as = "p",
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const fontSizeMap = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl",
+  };
+
+  const fontWeightMap = {
+    thin: "font-thin",
+    extralight: "font-extralight",
+    light: "font-light",
+    normal: "font-normal",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    medium: "font-mediun",
+    extrabold: "font-extrabold",
+    black: "font-black",
+  };
+  const size = fontSizeMap[fontSize] || "text-base";
+  const fontWeight = fontWeightMap[weight] || "font-normal";
+  const commonClass = `${size} ${fontWeight} ${muted && "text-gray-500"}`;
+
+  const variants: Record<VariantType, string> = {
+    p: commonClass,
+  };
+
+  const variantClass = variants[type as VariantType] ?? variants.p;
+
+  return (
+    <Component
+      as={as}
+      className={cn(variantClass, className)}
+      style={style}
+      {...props}
+      data-testid={displayName}>
+      {children}
+    </Component>
+  );
+};
+
+Text.displayName = displayName;