@sankyu/react-circle-flags 1.4.2 → 1.5.0

package/README.md

@@ -1,22 +1,26 @@
 <div align="center">
-  <img src="./website/public/favicon.svg" alt="@sankyu/react-circle-flags" width="120" height="120" />
+  <a href="https://react-circle-flags.js.org/">
+    <img src="https://raw.githubusercontent.com/SanKyu-Lab/react-circle-flags/main/website/public/favicon.svg" alt="@sankyu/react-circle-flags" width="120" height="120" />
+  </a>
 </div>
 
 <div align="center">
 
-# @sankyu/react-circle-flags
+# `@sankyu/react-circle-flags`
 
-[![npm version](https://img.shields.io/npm/v/%40sankyu%2Freact-circle-flags?style=flat-square&label=%40sankyu%2Freact-circle-flags)](https://www.npmjs.com/package/@sankyu/react-circle-flags) [![npm downloads](https://img.shields.io/npm/dm/@sankyu/react-circle-flags.svg?style=flat-square&label=NPM%20Downloads)](https://www.npmjs.com/package/@sankyu/react-circle-flags) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/@sankyu/react-circle-flags?style=flat-square&label=Bundle%20Size)](https://bundlephobia.com/package/@sankyu/react-circle-flags)
+[![npm version](https://img.shields.io/npm/v/%40sankyu%2Freact-circle-flags?style=flat-square&label=%40sankyu%2Freact-circle-flags)](https://www.npmjs.com/package/@sankyu/react-circle-flags) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/@sankyu/react-circle-flags?style=flat-square&label=Bundle%20Size)](https://bundlephobia.com/package/@sankyu/react-circle-flags) [![npm downloads](https://img.shields.io/npm/dm/@sankyu/react-circle-flags.svg?style=flat-square&label=NPM%20Downloads)](https://www.npmjs.com/package/@sankyu/react-circle-flags) [![Last Commit](https://img.shields.io/github/last-commit/SanKyu-Lab/react-circle-flags?style=flat-square&label=Last%20Commit)](https://github.com/SanKyu-Lab/react-circle-flags/commits/main)
+
+<!-- CI/CD & Quality -->
 
 [![CI](https://github.com/SanKyu-Lab/react-circle-flags/actions/workflows/ci.yml/badge.svg)](https://github.com/SanKyu-Lab/react-circle-flags/actions/workflows/ci.yml) [![Release](https://github.com/SanKyu-Lab/react-circle-flags/actions/workflows/release.yml/badge.svg)](https://github.com/SanKyu-Lab/react-circle-flags/actions/workflows/release.yml) [![codecov](https://codecov.io/gh/SanKyu-Lab/react-circle-flags/branch/main/graph/badge.svg?token=YHZ46T51AG)](https://codecov.io/gh/SanKyu-Lab/react-circle-flags)
 
-[![TypeScript Supported](https://img.shields.io/badge/TypeScript-Supported-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/) [![React Ready](https://img.shields.io/badge/React-%3E%3D16.0.0-61dafb?style=flat-square&logo=react)](https://reactjs.org/) [![MIT License](https://img.shields.io/badge/License-MIT-green?style=flat-square&logo=opensourceinitiative)](./LICENSE)
+[![TypeScript supported](https://img.shields.io/badge/TypeScript-supported-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/) [![React Ready](https://badgen.net/bundlephobia/tree-shaking/@sankyu/react-circle-flags)](https://reactjs.org/) [![MIT License](https://img.shields.io/badge/License-MIT-green?style=flat-square&logo=opensourceinitiative)](./LICENSE)
 
 ---
 
 :star: **Star us on [GitHub](https://github.com/Sankyu-Lab/react-circle-flags)** | :bug: **Report Issues [here](https://github.com/Sankyu-Lab/react-circle-flags/issues)**
 
-:rocket: **Explore the [Demo Gallery](https://sankyu-lab.github.io/react-circle-flags/browse)** | :book: **Read the [Documentation](https://sankyu-lab.github.io/react-circle-flags/docs/guides/getting-started/)**
+:rocket: **Explore the [Demo Gallery](https://react-circle-flags.js.org/browse)** | :book: **Read the [Documentation](https://react-circle-flags.js.org/docs/guides/getting-started/)**
 
 </div>
 
@@ -33,7 +37,7 @@ Perfect for applications that need fast, crisp country flags without external im
 ## ✨ Key Features
 
 > [!TIP]
-> For more information, you may refer to the [Documentation](https://sankyu-lab.github.io/react-circle-flags/docs/guides/getting-started/#-key-features).
+> For more information, you may refer to the [Documentation](https://react-circle-flags.js.org/docs/guides/getting-started/#-key-features).
 
 - 🎯 **Tree-shakable** - Only bundle the flags you use
 - 📦 **TypeScript** - Full type definitions included
@@ -41,7 +45,7 @@ Perfect for applications that need fast, crisp country flags without external im
 - 🎨 **Inline SVG** - No external requests, works offline
 - 🔧 **Fully customizable** - All standard SVG props supported
 - 📱 **SSR compatible** - Works with `Next.js`, `Remix`, etc.
-- 🪶 **Lightweight** - Each flag is ~1-3KB
+- 🪶 **Lightweight** - Each flag is ~1KB
 
 ## 📦 Installation
 
@@ -56,7 +60,7 @@ bun add @sankyu/react-circle-flags
 ```
 
 > [!TIP]
-> For more information, you may refer to the [Installation Guide](https://sankyu-lab.github.io/react-circle-flags/docs/guides/getting-started/installation/).
+> For more information, you may refer to the [Installation Guide](https://react-circle-flags.js.org/docs/guides/getting-started/installation/).
 
 ## 🚀 Usage
 
@@ -76,65 +80,29 @@ export default function App() {
 }
 ```
 
-> [!TIP]
-> For more information, you may refer to the [Usage Guide](https://sankyu-lab.github.io/react-circle-flags/docs/guides/getting-started/usage/).
-
-### With custom styling
+### Other usage examples
 
-```tsx
-import { FlagUs } from '@sankyu/react-circle-flags'
+> [!TIP]
+> For more information, you may refer to the [Usage Guide](https://react-circle-flags.js.org/docs/guides/getting-started/usage/).
 
-export default function StyledFlag() {
-  return (
-    <FlagUs
-      width={64}
-      height={64}
-      className="shadow-lg rounded-full"
-      style={{ border: '2px solid #000' }}
-    />
-  )
-}
-```
+## 📚 API
 
-### Dynamic flag selection
+### Build Meta Information
 
-> [!WARNING]
-> ⚠️ Using `DynamicFlag` or `import * as Flags` will pull all flag components into the bundle, which can reduce tree-shaking efficiency and increase bundle size.
+You can access the library's build meta information from the `buildMeta` export:
 
 ```tsx
-import { DynamicFlag } from '@sankyu/react-circle-flags'
-
-interface CountryFlagProps {
-  countryCode: string
-  size?: number
-}
+import { buildMeta } from '@sankyu/react-circle-flags'
 
-export const CountryFlag = ({ countryCode, size = 48 }: CountryFlagProps) => {
-  return <DynamicFlag code={countryCode} width={size} height={size} />
-}
-
-// Usage
-;<CountryFlag countryCode="us" size={64} />
+console.log(buildMeta.version) // e.g., "1.2.3"
+console.log(buildMeta.builtTimestamp) // e.g., 1760000000000
+console.log(buildMeta.commitHash) // e.g., <example-sha256-hash>
+console.log(buildMeta.circleFlagsCommitHash) // e.g., <example-sha256-hash>
 ```
 
-> [!TIP]
-> For more information, you may refer to the [Dynamic Flag Selection](https://sankyu-lab.github.io/react-circle-flags/docs/guides/getting-started/dynamic-flags/) section in the documentation.
-
-## 📚 API
-
-### Flag Components
+### Other Props
 
-Each flag component accepts all standard SVG props:
-
-```tsx
-interface FlagProps extends SVGProps<SVGSVGElement> {
-  width?: number | string
-  height?: number | string
-  className?: string
-  style?: CSSProperties
-  // ... all other SVG props
-}
-```
+...For more information, you may refer to the [API Reference](https://react-circle-flags.js.org/reference/api/interfaceflagcomponentprops/).
 
 ### Available Flags
 
@@ -146,33 +114,35 @@ Each flag is exported with the pattern `Flag{PascalCase ISO_CODE}` (for example,
 - `FlagJp` - Japan
 - ... and many more
 
-See the [Full list of flags](https://sankyu-lab.github.io/react-circle-flags/browse) in the react-circle-flags gallery.
+See the [Full list of flags](https://react-circle-flags.js.org/browse) in the react-circle-flags gallery.
 
 ## 🎨 Styling
 
 Flag components accept all standard SVG props, making them easy to style with any CSS approach.
 
 > [!TIP]
-> For more information, you may refer to the [Styling Guide](https://sankyu-lab.github.io/react-circle-flags/docs/guides/getting-started/styling/).
+> For more information, you may refer to the [Styling Guide](https://react-circle-flags.js.org/docs/guides/getting-started/styling/).
 
 ## 🔧 TypeScript
 
 All flag components are fully typed with TypeScript, providing autocomplete and type safety out of the box.
 
 > [!TIP]
-> For more information, you may refer to the [TypeScript Guide](https://sankyu-lab.github.io/react-circle-flags/docs/guides/getting-started/typescript/).
+> For more information, you may refer to the [TypeScript Guide](https://react-circle-flags.js.org/docs/guides/getting-started/typescript/).
 
 ## 📖 Examples
 
 > [!TIP]
-> For more information, you may refer to the [Guide - Basic Usage](https://sankyu-lab.github.io/react-circle-flags/docs/guides/getting-started/usage/).
+> For more information, you may refer to the [Guide - Basic Usage](https://react-circle-flags.js.org/docs/guides/getting-started/usage/).
 
 ## 📦 Bundle Size & Tree-shaking
 
-`@sankyu/react-circle-flags` is designed to be tree-shakable. Importing individual flags ensures that only the used flags are included in your bundle.
+`@sankyu/react-circle-flags` is designed to be tree-shakable.
+
+Importing individual flags ensures that only the used flags are included in your bundle.
 
 > [!TIP]
-> For more information, you may refer to the [Bundle Size & Tree-shaking Guide](https://sankyu-lab.github.io/react-circle-flags/docs/guides/getting-started/bundle-size/).
+> For more information, you may refer to the [Bundle Size & Tree-shaking Guide](https://react-circle-flags.js.org/docs/guides/getting-started/bundle-size/).
 
 ## 🤝 Contributing
 

package/dist/index.cjs

@@ -13045,21 +13045,23 @@ var FLAG_REGISTRY = {
 
 // package.json
 var package_default = {
-  version: "1.4.2"};
+  version: "1.5.0"};
 
 // src/meta.ts
 var parseBuiltAt = (source) => {
   const parsed = Number.parseInt(source, 10);
   return Number.isFinite(parsed) ? parsed : Date.now();
 };
-var commit = "dev" ;
+var commit = "221e4aa374259781591a48d199a8a5bdfb636c85" ;
+var circleFlagsCommit = "f803b46170cc7d068b247c6a0993c7882429bb3d" ;
 var builtAt = parseBuiltAt(
-  "1767709251902" 
+  "1767797134425" 
 );
 var buildMeta = {
   version: package_default.version,
-  commit,
-  builtAt
+  commitHash: commit,
+  circleFlagsCommitHash: circleFlagsCommit,
+  builtTimestamp: builtAt
 };
 function codeToEmoji(code) {
   const upperCode = code.toUpperCase().slice(0, 2);

package/dist/index.d.ts

@@ -1296,8 +1296,9 @@ type FlagCode = keyof typeof FLAG_REGISTRY;
 
 interface BuildMeta {
     version: string;
-    commit: string;
-    builtAt: number;
+    commitHash: string;
+    circleFlagsCommitHash: string;
+    builtTimestamp: number;
 }
 declare const buildMeta: BuildMeta;
 

package/dist/index.mjs

@@ -13043,21 +13043,23 @@ var FLAG_REGISTRY = {
 
 // package.json
 var package_default = {
-  version: "1.4.2"};
+  version: "1.5.0"};
 
 // src/meta.ts
 var parseBuiltAt = (source) => {
   const parsed = Number.parseInt(source, 10);
   return Number.isFinite(parsed) ? parsed : Date.now();
 };
-var commit = "dev" ;
+var commit = "221e4aa374259781591a48d199a8a5bdfb636c85" ;
+var circleFlagsCommit = "f803b46170cc7d068b247c6a0993c7882429bb3d" ;
 var builtAt = parseBuiltAt(
-  "1767709251902" 
+  "1767797134425" 
 );
 var buildMeta = {
   version: package_default.version,
-  commit,
-  builtAt
+  commitHash: commit,
+  circleFlagsCommitHash: circleFlagsCommit,
+  builtTimestamp: builtAt
 };
 function codeToEmoji(code) {
   const upperCode = code.toUpperCase().slice(0, 2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankyu/react-circle-flags",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "📦 400+ circular SVG React flags — tree-shakeable, TypeScript-ready, SSR-compatible, zero deps.",
   "type": "module",
   "main": "./dist/index.cjs",