@crfrsr/ui 1.0.0

package/dist/typography/Heading.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+export interface HeadingProps {
+    children: React.ReactNode;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    color?: 'text' | 'textSecondary' | 'primary' | 'secondary';
+    align?: 'left' | 'center' | 'right';
+    lineHeight?: 'tight' | 'normal' | 'relaxed';
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Heading({ children, level, weight, color, align, lineHeight, style, className, }: HeadingProps): React.JSX.Element;

package/dist/typography/Heading.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTheme } from '../ThemeProvider';
+const variantMap = {
+    1: '4xl',
+    2: '3xl',
+    3: '2xl',
+    4: 'xl',
+    5: 'lg',
+    6: 'base',
+};
+export function Heading({ children, level, weight, color, align, lineHeight, style, className, }) {
+    const { theme } = useTheme();
+    const variant = variantMap[level];
+    const Component = `h${level}`;
+    const headingStyle = {
+        // fontFamily is set globally, no need to set it here
+        // fontSize is set based on level (heading semantic sizing)
+        fontSize: theme.typography.fontSize[variant],
+        // Only set fontWeight if weight is explicitly provided
+        ...(weight && { fontWeight: theme.typography.fontWeight[weight] }),
+        // Only set lineHeight if explicitly provided
+        ...(lineHeight && { lineHeight: theme.typography.lineHeight[lineHeight] }),
+        // Only set color if explicitly provided (defaults to body text color)
+        ...(color && { color: theme.colors[color] }),
+        // Only set textAlign if explicitly provided
+        ...(align && { textAlign: align }),
+        margin: 0,
+        ...style,
+    };
+    return (React.createElement(Component, { style: headingStyle, className: className }, children));
+}

package/dist/typography/Text.d.ts

@@ -0,0 +1,13 @@
+import React, { CSSProperties } from 'react';
+export interface TextProps {
+    children: React.ReactNode;
+    variant?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    color?: 'text' | 'textSecondary' | 'textDisabled' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    align?: 'left' | 'center' | 'right' | 'justify';
+    lineHeight?: 'tight' | 'normal' | 'relaxed';
+    as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Text({ children, variant, weight, color, align, lineHeight, as: Component, style, className, }: TextProps): React.JSX.Element;

package/dist/typography/Text.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTheme } from '../ThemeProvider';
+export function Text({ children, variant, weight, color, align, lineHeight, as: Component = 'p', style, className, }) {
+    const { theme } = useTheme();
+    const textStyle = {
+        // fontFamily is set globally, no need to set it here
+        // Only set fontSize if variant is explicitly provided
+        ...(variant && { fontSize: theme.typography.fontSize[variant] }),
+        // Only set fontWeight if weight is explicitly provided
+        ...(weight && { fontWeight: theme.typography.fontWeight[weight] }),
+        // Only set lineHeight if explicitly provided
+        ...(lineHeight && { lineHeight: theme.typography.lineHeight[lineHeight] }),
+        // Only set color if explicitly provided (defaults to body text color)
+        ...(color && { color: theme.colors[color] }),
+        // Only set textAlign if explicitly provided
+        ...(align && { textAlign: align }),
+        margin: 0,
+        ...style,
+    };
+    return (React.createElement(Component, { style: textStyle, className: className }, children));
+}

package/dist/typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Text';
+export * from './Heading';

package/dist/typography/index.js

@@ -0,0 +1,2 @@
+export * from './Text';
+export * from './Heading';

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@crfrsr/ui",
+  "version": "1.0.0",
+  "description": "crfrsr Design System components for React (web)",
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "typography",
+    "theme",
+    "dark-mode",
+    "crfrsr"
+  ],
+  "author": "Cristian Fraser",
+  "license": "MIT",
+  "homepage": "https://github.com/cristianfraser/crfrsr#readme",
+  "bugs": {
+    "url": "https://github.com/cristianfraser/crfrsr/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cristianfraser/crfrsr.git",
+    "directory": "packages/react"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./reset.css": "./dist/styles/reset.css",
+    "./tokens.css": "./dist/styles/tokens.css",
+    "./styles.css": "./dist/styles/styles.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc && node scripts/copy-styles.mjs",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@crfrsr/core": "^1.0.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@tanstack/react-virtual": "^3.10.8",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}