@farzadbagheri/fb-components 0.1.3 → 0.1.4

package/README.md

@@ -2,16 +2,27 @@
 
 [![npm version](https://img.shields.io/npm/v/@farzadbagheri/fb-components.svg)](https://www.npmjs.com/package/@farzadbagheri/fb-components)
 [![npm downloads](https://img.shields.io/npm/dm/@farzadbagheri/fb-components.svg)](https://www.npmjs.com/package/@farzadbagheri/fb-components)
+[![CI](https://github.com/BAGHERIFarzad/fb-components/actions/workflows/ci.yml/badge.svg)](https://github.com/BAGHERIFarzad/fb-components/actions/workflows/ci.yml)
 [![license](https://img.shields.io/npm/l/@farzadbagheri/fb-components.svg)](./LICENSE)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-61DAFB?logo=react)](https://react.dev/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-ready-3178C6?logo=typescript)](https://www.typescriptlang.org/)
+[![Node](https://img.shields.io/badge/Node-%3E%3D18-339933?logo=node.js&logoColor=white)](https://nodejs.org/)
 
-**Production-minded React components for motion, AI interfaces, data visualization, and modern product experiences.**
+**Production-minded React components for motion, AI interfaces, modern landing pages, data visualization, and polished product experiences.**
 
 FB Components is a modern React component library built for polished product interfaces. It includes reusable components with TypeScript declarations, ESM/CommonJS builds, category-based entry points, and category-specific CSS so you can import only what you need.
 
+## Documentation
+
+- [Component API Reference](./COMPONENTS.md)
+- [Usage Examples](./EXAMPLES.md)
+- [Development Guide](./DEVELOPMENT.md)
+- [Contributing](./CONTRIBUTING.md)
+- [Release Guide](./RELEASING.md)
+- [Security Policy](./SECURITY.md)
+
 - **npm:** `@farzadbagheri/fb-components`
-- **Current release:** `0.1.0`
+- **Current release:** `0.1.3`
 - **Website:** https://farzadbagheri.fr/en/components
 - **GitHub:** https://github.com/BAGHERIFarzad/fb-components
 - **License:** MIT
@@ -29,7 +40,8 @@ FB Components is a modern React component library built for polished product int
 - Category-specific CSS exports
 - Root convenience import
 - Modern UI, motion, AI, data, hero, landing, and background components
-- Simple installation and CSS setup
+- Accessibility-conscious APIs
+- Automated release validation
 
 ---
 
@@ -85,9 +97,25 @@ The root JavaScript entry remains tree-shaking friendly, while `styles.css` incl
 
 ---
 
-## Components
+## Component catalog
+
+FB Components currently includes **22 free public components** across nine categories.
 
-### Backgrounds
+| Category | Components |
+|---|---|
+| Backgrounds | PredictiveArc, SignalParticles, DotMatrix, GradientMesh, AuroraGrid, NoiseField |
+| Buttons | MagneticButton, GlowButton, GlassButton |
+| Text | RevealText, BlurReveal |
+| UI | SpotlightCard, GlassCard |
+| Motion | GlowCursor, MagneticCursor |
+| AI | AiPromptBox, StreamingResponse |
+| Heroes | SaasLaunchHero |
+| Landing | StartupLanding |
+| Data | AnimatedCounter, RadialProgress, MetricGrid |
+
+---
+
+## Backgrounds
 
 ```tsx
 import {
@@ -96,7 +124,7 @@ import {
   DotMatrix,
   GradientMesh,
   AuroraGrid,
-  NoiseField
+  NoiseField,
 } from "@farzadbagheri/fb-components/backgrounds";
 
 import "@farzadbagheri/fb-components/backgrounds.css";
@@ -111,13 +139,26 @@ Available components:
 - `AuroraGrid`
 - `NoiseField`
 
-### Buttons
+Example:
+
+```tsx
+<PredictiveArc
+  color="#9b7cff"
+  size={70}
+  thickness={3}
+  glow={16}
+/>
+```
+
+---
+
+## Buttons
 
 ```tsx
 import {
   MagneticButton,
   GlowButton,
-  GlassButton
+  GlassButton,
 } from "@farzadbagheri/fb-components/buttons";
 
 import "@farzadbagheri/fb-components/buttons.css";
@@ -129,12 +170,26 @@ Available components:
 - `GlowButton`
 - `GlassButton`
 
-### Text Animation
+Example:
+
+```tsx
+<GlassButton
+  tint="#9b7cff"
+  opacity={0.12}
+  blur={18}
+>
+  Explore
+</GlassButton>
+```
+
+---
+
+## Text animation
 
 ```tsx
 import {
   RevealText,
-  BlurReveal
+  BlurReveal,
 } from "@farzadbagheri/fb-components/text";
 
 import "@farzadbagheri/fb-components/text.css";
@@ -145,12 +200,22 @@ Available components:
 - `RevealText`
 - `BlurReveal`
 
-### UI
+Example:
+
+```tsx
+<RevealText>
+  Build better interfaces.
+</RevealText>
+```
+
+---
+
+## UI
 
 ```tsx
 import {
   SpotlightCard,
-  GlassCard
+  GlassCard,
 } from "@farzadbagheri/fb-components/ui";
 
 import "@farzadbagheri/fb-components/ui.css";
@@ -161,12 +226,23 @@ Available components:
 - `SpotlightCard`
 - `GlassCard`
 
-### Motion
+Example:
+
+```tsx
+<SpotlightCard>
+  <h3>AI Platform</h3>
+  <p>Build modern AI experiences.</p>
+</SpotlightCard>
+```
+
+---
+
+## Motion
 
 ```tsx
 import {
   GlowCursor,
-  MagneticCursor
+  MagneticCursor,
 } from "@farzadbagheri/fb-components/motion";
 
 import "@farzadbagheri/fb-components/motion.css";
@@ -177,12 +253,27 @@ Available components:
 - `GlowCursor`
 - `MagneticCursor`
 
-### AI
+Example:
+
+```tsx
+<MagneticCursor>
+  <button
+    type="button"
+    data-magnetic-target
+  >
+    Explore
+  </button>
+</MagneticCursor>
+```
+
+---
+
+## AI
 
 ```tsx
 import {
   AiPromptBox,
-  StreamingResponse
+  StreamingResponse,
 } from "@farzadbagheri/fb-components/ai";
 
 import "@farzadbagheri/fb-components/ai.css";
@@ -193,7 +284,21 @@ Available components:
 - `AiPromptBox`
 - `StreamingResponse`
 
-### Heroes
+Example:
+
+```tsx
+<AiPromptBox
+  modelLabel="FB AI · Fast"
+  placeholder="Describe your task"
+  onSubmit={(value) => {
+    console.log(value);
+  }}
+/>
+```
+
+---
+
+## Heroes
 
 ```tsx
 import { SaasLaunchHero } from "@farzadbagheri/fb-components/heroes";
@@ -204,7 +309,20 @@ Available component:
 
 - `SaasLaunchHero`
 
-### Landing Pages
+Example:
+
+```tsx
+<SaasLaunchHero
+  eyebrow="BUILT FOR MODERN TEAMS"
+  title={"Ship faster.\nScale smarter."}
+  primaryLabel="Start free"
+  secondaryLabel="See demo"
+/>
+```
+
+---
+
+## Landing
 
 ```tsx
 import { StartupLanding } from "@farzadbagheri/fb-components/landing";
@@ -215,13 +333,25 @@ Available component:
 
 - `StartupLanding`
 
-### Data
+Example:
+
+```tsx
+<StartupLanding
+  accent="#7d63ff"
+  showMetrics
+  showFeatures
+/>
+```
+
+---
+
+## Data
 
 ```tsx
 import {
   AnimatedCounter,
   RadialProgress,
-  MetricGrid
+  MetricGrid,
 } from "@farzadbagheri/fb-components/data";
 
 import "@farzadbagheri/fb-components/data.css";
@@ -233,6 +363,25 @@ Available components:
 - `RadialProgress`
 - `MetricGrid`
 
+Examples:
+
+```tsx
+<AnimatedCounter
+  value={128}
+  suffix="K"
+  label="ACTIVE USERS"
+  delta="+18.4%"
+/>
+
+<RadialProgress
+  value={72}
+  label="COMPLETE"
+  ariaLabel="Profile completion"
+/>
+
+<MetricGrid />
+```
+
 ---
 
 ## All root exports
@@ -262,7 +411,7 @@ import {
   SignalParticles,
   SpotlightCard,
   StartupLanding,
-  StreamingResponse
+  StreamingResponse,
 } from "@farzadbagheri/fb-components";
 ```
 
@@ -318,12 +467,36 @@ import { RadialProgress } from "@farzadbagheri/fb-components/data";
 import "@farzadbagheri/fb-components/data.css";
 
 export function ProgressExample() {
-  return <RadialProgress value={72} />;
+  return (
+    <RadialProgress
+      value={72}
+      ariaLabel="Profile completion"
+    />
+  );
 }
 ```
 
 ---
 
+## React compatibility
+
+Supported versions:
+
+```text
+React 18
+React 19
+```
+
+Peer dependency range:
+
+```text
+>=18 <20
+```
+
+FB Components uses standard React APIs and can be integrated into Vite, React Router applications, Next.js client components, and other standard React build systems.
+
+---
+
 ## ESM and CommonJS
 
 ### ESM
@@ -357,26 +530,66 @@ The root JavaScript entry can still be tree-shaken by modern bundlers, while the
 
 ---
 
-## Example: AI interface
+## Accessibility
 
-```tsx
-import {
-  AiPromptBox,
-  StreamingResponse
-} from "@farzadbagheri/fb-components/ai";
+Accessibility is treated as part of the public component API.
 
-import "@farzadbagheri/fb-components/ai.css";
+Examples include:
 
-export function AiExample() {
-  return (
-    <div>
-      <AiPromptBox />
-      <StreamingResponse />
-    </div>
-  );
-}
+- semantic native buttons
+- explicit button types
+- progressbar ARIA semantics
+- descriptive labels where required
+- decorative elements hidden from assistive technology
+- keyboard-compatible native controls
+- accessibility-focused automated tests
+
+Applications should still test complete pages in their own accessibility context.
+
+---
+
+## Testing and quality
+
+The public component library is covered by automated tests across:
+
+- rendering
+- component props
+- interactions
+- keyboard behavior
+- visual configuration
+- accessibility
+- public exports
+- animation behavior
+- lifecycle cleanup
+- edge cases
+- fresh package installation
+
+The project also validates:
+
+```text
+TypeScript
+Tests
+Build
+Package size
+Fresh consumer installation
 ```
 
+before release.
+
+---
+
+## Package size guard
+
+Current release guard limits:
+
+```text
+Packed package:   <= 100 kB
+Unpacked package: <= 600 kB
+Files:            <= 150
+```
+
+This helps prevent accidental package growth.
+
 ---
 
 ## Documentation and live previews
@@ -433,6 +646,8 @@ Issues, bug reports, ideas, and feedback are welcome:
 
 https://github.com/BAGHERIFarzad/fb-components/issues
 
+See `CONTRIBUTING.md` before submitting larger changes.
+
 When reporting a problem, please include:
 
 - component name
@@ -445,9 +660,65 @@ When reporting a problem, please include:
 
 ---
 
+## Development
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Run tests:
+
+```bash
+npm run test
+```
+
+Run coverage:
+
+```bash
+npm run test:coverage
+```
+
+Run type checking:
+
+```bash
+npm run typecheck
+```
+
+Build the package:
+
+```bash
+npm run build
+```
+
+Run complete release validation:
+
+```bash
+npm run release:check
+```
+
+---
+
 ## Security
 
-Please do not publish secrets, credentials, tokens, or private application data in public issues.
+Please do not publish secrets, credentials, tokens, API keys, or private application data in public issues.
+
+See `SECURITY.md` for security reporting guidance.
+
+---
+
+## Developer Documentation
+
+For deeper technical documentation:
+
+- [Component API Reference](./COMPONENTS.md)
+- [Usage Examples](./EXAMPLES.md)
+- [Development Guide](./DEVELOPMENT.md)
+- [Contributing Guide](./CONTRIBUTING.md)
+- [Release Guide](./RELEASING.md)
+- [Branch Protection](./BRANCH-PROTECTION.md)
+- [Security Policy](./SECURITY.md)
 
 ---
 

package/dist/{chunk-SQPNHJ6D.cjs → chunk-7PUXKRNW.cjs}

@@ -101,6 +101,7 @@ function RadialProgress({
   trackColor = "#24242c",
   animated = true,
   label = "COMPLETE",
+  ariaLabel = "Progress",
   className = "",
   style,
   ...props
@@ -127,15 +128,18 @@ function RadialProgress({
         ["--fb-radial-color"]: color
       },
       role: "progressbar",
+      "aria-label": ariaLabel,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": clamped,
+      "aria-valuetext": `${Math.round(clamped)}%`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
             viewBox: "0 0 100 100",
             "aria-hidden": "true",
+            focusable: "false",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "circle",
@@ -168,9 +172,7 @@ function RadialProgress({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fb-radial-progress__content", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
-            Math.round(
-              clamped
-            ),
+            Math.round(clamped),
             /* @__PURE__ */ jsxRuntime.jsx("small", { children: "%" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
@@ -256,5 +258,5 @@ function MetricGrid({
 exports.AnimatedCounter = AnimatedCounter;
 exports.MetricGrid = MetricGrid;
 exports.RadialProgress = RadialProgress;
-//# sourceMappingURL=chunk-SQPNHJ6D.cjs.map
-//# sourceMappingURL=chunk-SQPNHJ6D.cjs.map
+//# sourceMappingURL=chunk-7PUXKRNW.cjs.map
+//# sourceMappingURL=chunk-7PUXKRNW.cjs.map

package/dist/chunk-7PUXKRNW.cjs.map

@@ -0,0 +1 @@
+{"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-7PUXKRNW.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  ariaLabel?: 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 = \"COMPLETE\",\n\n  ariaLabel = \"Progress\",\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-label={ariaLabel}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={clamped}\n      aria-valuetext={`${Math.round(clamped)}%`}\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          fill=\"none\"\n          stroke={trackColor}\n          strokeWidth={strokeWidth}\n        />\n\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\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(clamped)}\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-O2FP27HX.js → chunk-P77GGWU6.js}

@@ -99,6 +99,7 @@ function RadialProgress({
   trackColor = "#24242c",
   animated = true,
   label = "COMPLETE",
+  ariaLabel = "Progress",
   className = "",
   style,
   ...props
@@ -125,15 +126,18 @@ function RadialProgress({
         ["--fb-radial-color"]: color
       },
       role: "progressbar",
+      "aria-label": ariaLabel,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": clamped,
+      "aria-valuetext": `${Math.round(clamped)}%`,
       children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
             viewBox: "0 0 100 100",
             "aria-hidden": "true",
+            focusable: "false",
             children: [
               /* @__PURE__ */ jsx(
                 "circle",
@@ -166,9 +170,7 @@ function RadialProgress({
         ),
         /* @__PURE__ */ jsxs("div", { className: "fb-radial-progress__content", children: [
           /* @__PURE__ */ jsxs("strong", { children: [
-            Math.round(
-              clamped
-            ),
+            Math.round(clamped),
             /* @__PURE__ */ jsx("small", { children: "%" })
           ] }),
           /* @__PURE__ */ jsx("span", { children: label })
@@ -252,5 +254,5 @@ function MetricGrid({
 }
 
 export { AnimatedCounter, MetricGrid, RadialProgress };
-//# sourceMappingURL=chunk-O2FP27HX.js.map
-//# sourceMappingURL=chunk-O2FP27HX.js.map
+//# sourceMappingURL=chunk-P77GGWU6.js.map
+//# sourceMappingURL=chunk-P77GGWU6.js.map

package/dist/chunk-P77GGWU6.js.map

@@ -0,0 +1 @@
+{"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-P77GGWU6.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  ariaLabel?: 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 = \"COMPLETE\",\n\n  ariaLabel = \"Progress\",\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-label={ariaLabel}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={clamped}\n      aria-valuetext={`${Math.round(clamped)}%`}\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          fill=\"none\"\n          stroke={trackColor}\n          strokeWidth={strokeWidth}\n        />\n\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\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(clamped)}\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/data.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
-var chunkSQPNHJ6D_cjs = require('./chunk-SQPNHJ6D.cjs');
+var chunk7PUXKRNW_cjs = require('./chunk-7PUXKRNW.cjs');
 
 
 
 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; }
 });
 //# sourceMappingURL=data.cjs.map
 //# sourceMappingURL=data.cjs.map