@farzadbagheri/fb-components 0.1.3 → 0.1.4

package/dist/data.d.cts

@@ -24,9 +24,10 @@ interface RadialProgressProps extends HTMLAttributes<HTMLDivElement> {
     trackColor?: string;
     animated?: boolean;
     label?: string;
+    ariaLabel?: string;
     className?: string;
 }
-declare function RadialProgress({ value, size, strokeWidth, color, trackColor, animated, label, className, style, ...props }: RadialProgressProps): react.JSX.Element;
+declare function RadialProgress({ value, size, strokeWidth, color, trackColor, animated, label, ariaLabel, className, style, ...props }: RadialProgressProps): react.JSX.Element;
 
 interface MetricItem {
     label: string;

package/dist/data.d.ts

@@ -24,9 +24,10 @@ interface RadialProgressProps extends HTMLAttributes<HTMLDivElement> {
     trackColor?: string;
     animated?: boolean;
     label?: string;
+    ariaLabel?: string;
     className?: string;
 }
-declare function RadialProgress({ value, size, strokeWidth, color, trackColor, animated, label, className, style, ...props }: RadialProgressProps): react.JSX.Element;
+declare function RadialProgress({ value, size, strokeWidth, color, trackColor, animated, label, ariaLabel, className, style, ...props }: RadialProgressProps): react.JSX.Element;
 
 interface MetricItem {
     label: string;

package/dist/data.js

@@ -1,3 +1,3 @@
-export { AnimatedCounter, MetricGrid, RadialProgress } from './chunk-O2FP27HX.js';
+export { AnimatedCounter, MetricGrid, RadialProgress } from './chunk-P77GGWU6.js';
 //# sourceMappingURL=data.js.map
 //# sourceMappingURL=data.js.map

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkB5HDPUQK_cjs = require('./chunk-B5HDPUQK.cjs');
-var chunkSQPNHJ6D_cjs = require('./chunk-SQPNHJ6D.cjs');
+var chunk7PUXKRNW_cjs = require('./chunk-7PUXKRNW.cjs');
 var chunkTG7XM34D_cjs = require('./chunk-TG7XM34D.cjs');
 var chunkQTX5BFS6_cjs = require('./chunk-QTX5BFS6.cjs');
 var chunkF4XFUSPM_cjs = require('./chunk-F4XFUSPM.cjs');
@@ -18,15 +18,15 @@ Object.defineProperty(exports, "StartupLanding", {
 });
 Object.defineProperty(exports, "AnimatedCounter", {
   enumerable: true,
-  get: function () { return chunkSQPNHJ6D_cjs.AnimatedCounter; }
+  get: function () { return chunk7PUXKRNW_cjs.AnimatedCounter; }
 });
 Object.defineProperty(exports, "MetricGrid", {
   enumerable: true,
-  get: function () { return chunkSQPNHJ6D_cjs.MetricGrid; }
+  get: function () { return chunk7PUXKRNW_cjs.MetricGrid; }
 });
 Object.defineProperty(exports, "RadialProgress", {
   enumerable: true,
-  get: function () { return chunkSQPNHJ6D_cjs.RadialProgress; }
+  get: function () { return chunk7PUXKRNW_cjs.RadialProgress; }
 });
 Object.defineProperty(exports, "AuroraGrid", {
   enumerable: true,

package/dist/index.js

@@ -1,5 +1,5 @@
 export { StartupLanding } from './chunk-IZJHBS5M.js';
-export { AnimatedCounter, MetricGrid, RadialProgress } from './chunk-O2FP27HX.js';
+export { AnimatedCounter, MetricGrid, RadialProgress } from './chunk-P77GGWU6.js';
 export { AuroraGrid, DotMatrix, GradientMesh, NoiseField, PredictiveArc, SignalParticles } from './chunk-RFI4526D.js';
 export { GlassButton, GlowButton, MagneticButton } from './chunk-ENCZZRVK.js';
 export { BlurReveal, RevealText } from './chunk-YPBGV2B5.js';

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@farzadbagheri/fb-components",
-  "version": "0.1.3",
-  "description": "Production-minded React components for motion, AI interfaces, data visualization and modern product experiences.",
+  "version": "0.1.4",
+  "description": "Production-minded React 18/19 + TypeScript components for motion, AI interfaces, dashboards, data visualization, SaaS heroes, landing pages, and modern product UI.",
   "license": "MIT",
   "author": {
-    "name": "Farzad Bagheri"
+    "name": "Farzad Bagheri",
+    "url": "https://farzadbagheri.fr"
   },
   "repository": {
     "type": "git",
@@ -81,11 +82,14 @@
       "require": "./dist/data.cjs"
     },
     "./data.css": "./dist/data.css",
-    "./styles.css": "./dist/index.css"
+    "./styles.css": "./dist/index.css",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
     "README.md",
+    "COMPONENTS.md",
+    "EXAMPLES.md",
     "LICENSE"
   ],
   "engines": {
@@ -94,18 +98,31 @@
   "keywords": [
     "react",
     "react-components",
+    "react-component-library",
+    "component-library",
     "ui",
     "ui-components",
-    "components",
     "typescript",
+    "typescript-components",
     "animation",
+    "animated-components",
     "motion",
     "ai",
     "ai-ui",
+    "ai-components",
     "dashboard",
+    "dashboard-components",
     "data-visualization",
     "design-system",
-    "frontend"
+    "frontend",
+    "saas",
+    "saas-ui",
+    "landing-page",
+    "hero-section",
+    "glassmorphism",
+    "accessibility",
+    "vite",
+    "nextjs"
   ],
   "publishConfig": {
     "access": "public"
@@ -115,10 +132,13 @@
     "dev": "tsup --watch",
     "clean": "rimraf dist",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "prepublishOnly": "npm run typecheck && npm run build",
     "package:size": "node scripts/check-package-size.mjs",
     "install-test": "node scripts/install-test.mjs",
-    "release:check": "npm run typecheck && npm run build && npm run package:size && npm run install-test",
+    "release:check": "npm run typecheck && npm run test && npm run build && npm run package:size && npm run install-test",
     "release:patch": "npm run release:check && npm version patch",
     "release:minor": "npm run release:check && npm version minor",
     "release:major": "npm run release:check && npm version major"
@@ -131,10 +151,17 @@
     "lucide-react": "^0.468.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitest/coverage-v8": "^4.1.11",
+    "axe-core": "^4.13.0",
+    "jsdom": "^29.1.1",
     "rimraf": "^6.0.0",
     "tsup": "^8.3.5",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.11"
   }
 }

package/dist/chunk-O2FP27HX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/AnimatedCounter.tsx","../src/data/RadialProgress.tsx","../src/data/MetricGrid.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-O2FP27HX.js","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type {\n  HTMLAttributes,\n} from \"react\";\n\nimport \"./AnimatedCounter.css\";\n\nexport interface AnimatedCounterProps\n  extends HTMLAttributes<HTMLDivElement> {\n  value?: number;\n  duration?: number;\n\n  color?: string;\n  accent?: string;\n\n  fontSize?: number;\n\n  prefix?: string;\n  suffix?: string;\n\n  label?: string;\n  delta?: string;\n\n  decimals?: number;\n\n  className?: string;\n}\n\nexport function AnimatedCounter({\n  value = 128,\n  duration = 1.5,\n\n  color = \"#ffffff\",\n  accent = \"#9b7cff\",\n\n  fontSize = 72,\n\n  prefix = \"\",\n  suffix = \"K\",\n\n  label =\n    \"ACTIVE USERS\",\n\n  delta =\n    \"+18.4%\",\n\n  decimals = 0,\n\n  className = \"\",\n  style,\n\n  ...props\n}: AnimatedCounterProps) {\n  const [\n    displayed,\n    setDisplayed,\n  ] =\n    useState(0);\n\n  const frameRef =\n    useRef<number | null>(\n      null\n    );\n\n  useEffect(() => {\n    const start =\n      performance.now();\n\n    const total =\n      Math.max(\n        duration,\n        0.01\n      ) *\n      1000;\n\n    function animate(\n      now: number\n    ) {\n      const progress =\n        Math.min(\n          (\n            now -\n            start\n          ) /\n            total,\n          1\n        );\n\n      const eased =\n        1 -\n        Math.pow(\n          1 -\n            progress,\n          3\n        );\n\n      setDisplayed(\n        value *\n          eased\n      );\n\n      if (\n        progress <\n        1\n      ) {\n        frameRef.current =\n          requestAnimationFrame(\n            animate\n          );\n      }\n    }\n\n    frameRef.current =\n      requestAnimationFrame(\n        animate\n      );\n\n    return () => {\n      if (\n        frameRef.current !==\n        null\n      ) {\n        cancelAnimationFrame(\n          frameRef.current\n        );\n      }\n    };\n  }, [\n    value,\n    duration,\n  ]);\n\n  return (\n    <div\n      {...props}\n      className={`fb-animated-counter ${className}`}\n      style={{\n        ...style,\n\n        color,\n\n        [\"--fb-counter-accent\" as string]:\n          accent,\n\n        [\"--fb-counter-size\" as string]:\n          `${fontSize}px`,\n      }}\n    >\n      <span className=\"fb-animated-counter__label\">\n        {label}\n      </span>\n\n      <strong>\n        {prefix}\n\n        {displayed.toLocaleString(\n          undefined,\n          {\n            minimumFractionDigits:\n              decimals,\n\n            maximumFractionDigits:\n              decimals,\n          }\n        )}\n\n        {suffix}\n      </strong>\n\n      {delta && (\n        <small>\n          {delta}\n        </small>\n      )}\n    </div>\n  );\n}","import type {\n  HTMLAttributes,\n} from \"react\";\n\nimport \"./RadialProgress.css\";\n\nexport interface RadialProgressProps\n  extends HTMLAttributes<HTMLDivElement> {\n  value?: number;\n\n  size?: number;\n  strokeWidth?: number;\n\n  color?: string;\n  trackColor?: string;\n\n  animated?: boolean;\n\n  label?: string;\n\n  className?: string;\n}\n\nexport function RadialProgress({\n  value = 72,\n\n  size = 180,\n  strokeWidth = 10,\n\n  color = \"#9b7cff\",\n  trackColor = \"#24242c\",\n\n  animated = true,\n\n  label =\n    \"COMPLETE\",\n\n  className = \"\",\n  style,\n\n  ...props\n}: RadialProgressProps) {\n  const clamped =\n    Math.min(\n      100,\n      Math.max(\n        0,\n        value\n      )\n    );\n\n  const radius =\n    50 -\n    strokeWidth /\n      2;\n\n  const circumference =\n    2 *\n    Math.PI *\n    radius;\n\n  const offset =\n    circumference *\n    (\n      1 -\n      clamped /\n        100\n    );\n\n  return (\n    <div\n      {...props}\n      className={`fb-radial-progress ${className}`}\n      style={{\n        ...style,\n\n        width:\n          size,\n\n        height:\n          size,\n\n        [\"--fb-radial-color\" as string]:\n          color,\n      }}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={\n        clamped\n      }\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={\n            radius\n          }\n          fill=\"none\"\n          stroke={\n            trackColor\n          }\n          strokeWidth={\n            strokeWidth\n          }\n        />\n\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={\n            radius\n          }\n          fill=\"none\"\n          stroke={\n            color\n          }\n          strokeWidth={\n            strokeWidth\n          }\n          strokeLinecap=\"round\"\n          strokeDasharray={\n            circumference\n          }\n          strokeDashoffset={\n            offset\n          }\n          className={\n            animated\n              ? \"fb-radial-progress__value fb-radial-progress__value--animated\"\n              : \"fb-radial-progress__value\"\n          }\n        />\n      </svg>\n\n      <div className=\"fb-radial-progress__content\">\n        <strong>\n          {Math.round(\n            clamped\n          )}\n          <small>\n            %\n          </small>\n        </strong>\n\n        <span>\n          {label}\n        </span>\n      </div>\n    </div>\n  );\n}","import type {\n  HTMLAttributes,\n} from \"react\";\n\nimport \"./MetricGrid.css\";\n\nexport interface MetricItem {\n  label: string;\n  value: string;\n  delta?: string;\n  positive?: boolean;\n}\n\nexport interface MetricGridProps\n  extends HTMLAttributes<HTMLDivElement> {\n  accent?: string;\n  background?: string;\n\n  columns?: number;\n  radius?: number;\n\n  items?: MetricItem[];\n\n  className?: string;\n}\n\nconst defaultItems:\n  MetricItem[] = [\n    {\n      label:\n        \"Revenue\",\n\n      value:\n        \"$84.2K\",\n\n      delta:\n        \"+12.6%\",\n\n      positive:\n        true,\n    },\n\n    {\n      label:\n        \"Users\",\n\n      value:\n        \"18.4K\",\n\n      delta:\n        \"+8.1%\",\n\n      positive:\n        true,\n    },\n\n    {\n      label:\n        \"Conversion\",\n\n      value:\n        \"7.8%\",\n\n      delta:\n        \"+2.4%\",\n\n      positive:\n        true,\n    },\n\n    {\n      label:\n        \"Latency\",\n\n      value:\n        \"94ms\",\n\n      delta:\n        \"-11%\",\n\n      positive:\n        true,\n    },\n  ];\n\nexport function MetricGrid({\n  accent = \"#9b7cff\",\n  background = \"#111116\",\n\n  columns = 3,\n  radius = 18,\n\n  items =\n    defaultItems,\n\n  className = \"\",\n  style,\n\n  ...props\n}: MetricGridProps) {\n  return (\n    <div\n      {...props}\n      className={`fb-metric-grid ${className}`}\n      style={{\n        ...style,\n\n        gridTemplateColumns:\n          `repeat(${Math.max(\n            1,\n            columns\n          )}, minmax(0, 1fr))`,\n\n        [\"--fb-metric-accent\" as string]:\n          accent,\n\n        [\"--fb-metric-background\" as string]:\n          background,\n\n        [\"--fb-metric-radius\" as string]:\n          `${radius}px`,\n      }}\n    >\n      {items.map(\n        (\n          item\n        ) => (\n          <article\n            key={\n              item.label\n            }\n          >\n            <span>\n              {\n                item.label\n              }\n            </span>\n\n            <strong>\n              {\n                item.value\n              }\n            </strong>\n\n            {item.delta && (\n              <small\n                className={\n                  item.positive ===\n                  false\n                    ? \"is-negative\"\n                    : \"\"\n                }\n              >\n                {\n                  item.delta\n                }\n              </small>\n            )}\n          </article>\n        )\n      )}\n    </div>\n  );\n}"]}

package/dist/chunk-SQPNHJ6D.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/AnimatedCounter.tsx","../src/data/RadialProgress.tsx","../src/data/MetricGrid.tsx"],"names":["useState","useRef","useEffect","jsxs","jsx"],"mappings":"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","file":"chunk-SQPNHJ6D.cjs","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type {\n  HTMLAttributes,\n} from \"react\";\n\nimport \"./AnimatedCounter.css\";\n\nexport interface AnimatedCounterProps\n  extends HTMLAttributes<HTMLDivElement> {\n  value?: number;\n  duration?: number;\n\n  color?: string;\n  accent?: string;\n\n  fontSize?: number;\n\n  prefix?: string;\n  suffix?: string;\n\n  label?: string;\n  delta?: string;\n\n  decimals?: number;\n\n  className?: string;\n}\n\nexport function AnimatedCounter({\n  value = 128,\n  duration = 1.5,\n\n  color = \"#ffffff\",\n  accent = \"#9b7cff\",\n\n  fontSize = 72,\n\n  prefix = \"\",\n  suffix = \"K\",\n\n  label =\n    \"ACTIVE USERS\",\n\n  delta =\n    \"+18.4%\",\n\n  decimals = 0,\n\n  className = \"\",\n  style,\n\n  ...props\n}: AnimatedCounterProps) {\n  const [\n    displayed,\n    setDisplayed,\n  ] =\n    useState(0);\n\n  const frameRef =\n    useRef<number | null>(\n      null\n    );\n\n  useEffect(() => {\n    const start =\n      performance.now();\n\n    const total =\n      Math.max(\n        duration,\n        0.01\n      ) *\n      1000;\n\n    function animate(\n      now: number\n    ) {\n      const progress =\n        Math.min(\n          (\n            now -\n            start\n          ) /\n            total,\n          1\n        );\n\n      const eased =\n        1 -\n        Math.pow(\n          1 -\n            progress,\n          3\n        );\n\n      setDisplayed(\n        value *\n          eased\n      );\n\n      if (\n        progress <\n        1\n      ) {\n        frameRef.current =\n          requestAnimationFrame(\n            animate\n          );\n      }\n    }\n\n    frameRef.current =\n      requestAnimationFrame(\n        animate\n      );\n\n    return () => {\n      if (\n        frameRef.current !==\n        null\n      ) {\n        cancelAnimationFrame(\n          frameRef.current\n        );\n      }\n    };\n  }, [\n    value,\n    duration,\n  ]);\n\n  return (\n    <div\n      {...props}\n      className={`fb-animated-counter ${className}`}\n      style={{\n        ...style,\n\n        color,\n\n        [\"--fb-counter-accent\" as string]:\n          accent,\n\n        [\"--fb-counter-size\" as string]:\n          `${fontSize}px`,\n      }}\n    >\n      <span className=\"fb-animated-counter__label\">\n        {label}\n      </span>\n\n      <strong>\n        {prefix}\n\n        {displayed.toLocaleString(\n          undefined,\n          {\n            minimumFractionDigits:\n              decimals,\n\n            maximumFractionDigits:\n              decimals,\n          }\n        )}\n\n        {suffix}\n      </strong>\n\n      {delta && (\n        <small>\n          {delta}\n        </small>\n      )}\n    </div>\n  );\n}","import type {\n  HTMLAttributes,\n} from \"react\";\n\nimport \"./RadialProgress.css\";\n\nexport interface RadialProgressProps\n  extends HTMLAttributes<HTMLDivElement> {\n  value?: number;\n\n  size?: number;\n  strokeWidth?: number;\n\n  color?: string;\n  trackColor?: string;\n\n  animated?: boolean;\n\n  label?: string;\n\n  className?: string;\n}\n\nexport function RadialProgress({\n  value = 72,\n\n  size = 180,\n  strokeWidth = 10,\n\n  color = \"#9b7cff\",\n  trackColor = \"#24242c\",\n\n  animated = true,\n\n  label =\n    \"COMPLETE\",\n\n  className = \"\",\n  style,\n\n  ...props\n}: RadialProgressProps) {\n  const clamped =\n    Math.min(\n      100,\n      Math.max(\n        0,\n        value\n      )\n    );\n\n  const radius =\n    50 -\n    strokeWidth /\n      2;\n\n  const circumference =\n    2 *\n    Math.PI *\n    radius;\n\n  const offset =\n    circumference *\n    (\n      1 -\n      clamped /\n        100\n    );\n\n  return (\n    <div\n      {...props}\n      className={`fb-radial-progress ${className}`}\n      style={{\n        ...style,\n\n        width:\n          size,\n\n        height:\n          size,\n\n        [\"--fb-radial-color\" as string]:\n          color,\n      }}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={\n        clamped\n      }\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={\n            radius\n          }\n          fill=\"none\"\n          stroke={\n            trackColor\n          }\n          strokeWidth={\n            strokeWidth\n          }\n        />\n\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={\n            radius\n          }\n          fill=\"none\"\n          stroke={\n            color\n          }\n          strokeWidth={\n            strokeWidth\n          }\n          strokeLinecap=\"round\"\n          strokeDasharray={\n            circumference\n          }\n          strokeDashoffset={\n            offset\n          }\n          className={\n            animated\n              ? \"fb-radial-progress__value fb-radial-progress__value--animated\"\n              : \"fb-radial-progress__value\"\n          }\n        />\n      </svg>\n\n      <div className=\"fb-radial-progress__content\">\n        <strong>\n          {Math.round(\n            clamped\n          )}\n          <small>\n            %\n          </small>\n        </strong>\n\n        <span>\n          {label}\n        </span>\n      </div>\n    </div>\n  );\n}","import type {\n  HTMLAttributes,\n} from \"react\";\n\nimport \"./MetricGrid.css\";\n\nexport interface MetricItem {\n  label: string;\n  value: string;\n  delta?: string;\n  positive?: boolean;\n}\n\nexport interface MetricGridProps\n  extends HTMLAttributes<HTMLDivElement> {\n  accent?: string;\n  background?: string;\n\n  columns?: number;\n  radius?: number;\n\n  items?: MetricItem[];\n\n  className?: string;\n}\n\nconst defaultItems:\n  MetricItem[] = [\n    {\n      label:\n        \"Revenue\",\n\n      value:\n        \"$84.2K\",\n\n      delta:\n        \"+12.6%\",\n\n      positive:\n        true,\n    },\n\n    {\n      label:\n        \"Users\",\n\n      value:\n        \"18.4K\",\n\n      delta:\n        \"+8.1%\",\n\n      positive:\n        true,\n    },\n\n    {\n      label:\n        \"Conversion\",\n\n      value:\n        \"7.8%\",\n\n      delta:\n        \"+2.4%\",\n\n      positive:\n        true,\n    },\n\n    {\n      label:\n        \"Latency\",\n\n      value:\n        \"94ms\",\n\n      delta:\n        \"-11%\",\n\n      positive:\n        true,\n    },\n  ];\n\nexport function MetricGrid({\n  accent = \"#9b7cff\",\n  background = \"#111116\",\n\n  columns = 3,\n  radius = 18,\n\n  items =\n    defaultItems,\n\n  className = \"\",\n  style,\n\n  ...props\n}: MetricGridProps) {\n  return (\n    <div\n      {...props}\n      className={`fb-metric-grid ${className}`}\n      style={{\n        ...style,\n\n        gridTemplateColumns:\n          `repeat(${Math.max(\n            1,\n            columns\n          )}, minmax(0, 1fr))`,\n\n        [\"--fb-metric-accent\" as string]:\n          accent,\n\n        [\"--fb-metric-background\" as string]:\n          background,\n\n        [\"--fb-metric-radius\" as string]:\n          `${radius}px`,\n      }}\n    >\n      {items.map(\n        (\n          item\n        ) => (\n          <article\n            key={\n              item.label\n            }\n          >\n            <span>\n              {\n                item.label\n              }\n            </span>\n\n            <strong>\n              {\n                item.value\n              }\n            </strong>\n\n            {item.delta && (\n              <small\n                className={\n                  item.positive ===\n                  false\n                    ? \"is-negative\"\n                    : \"\"\n                }\n              >\n                {\n                  item.delta\n                }\n              </small>\n            )}\n          </article>\n        )\n      )}\n    </div>\n  );\n}"]}