{"_id":"@168group/brand-family","_rev":"3-0a4aa9d467f889b45524696b66b89eb9","name":"@168group/brand-family","dist-tags":{"latest":"0.2.1"},"versions":{"0.1.0":{"name":"@168group/brand-family","version":"0.1.0","keywords":["168-group","brand-family","marquee","react","nextjs"],"license":"SEE LICENSE IN LICENSE","_id":"@168group/brand-family@0.1.0","maintainers":[{"name":"kerryuu","email":"sebastian-maj@outlook.com"}],"dist":{"shasum":"6997499c3144365d0f60afb72ffcbe8a300cc2be","tarball":"https://registry.npmjs.org/@168group/brand-family/-/brand-family-0.1.0.tgz","fileCount":36,"integrity":"sha512-bleVzCqKwOY0TaPsCWX4TTdvqNyPrLPcQxfKFNphCiP4zL2IaSYcfnayJ/0Zuo1MDIJyyWGlzvmd3sZJDraD1g==","signatures":[{"sig":"MEYCIQD9VtHidxOCh8K4R6vtzjmjN8srTycKaea4DWTS7ilKSgIhAMdCxyz7KKrZn5U+oCe8rXpB9hIGuaPFmhCqeOrwp/Cd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":929049},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"gitHead":"2d0a6a6f89e5a6ad9dd4a8e29c62aa95934f422a","scripts":{"test":"vitest run --config vitest.config.ts","build":"npm run clean && tsc -p tsconfig.build.json && node ./scripts/copy-assets.mjs","check":"npm run test && npm run build","clean":"node ./scripts/clean.mjs","prepack":"npm run check","test:watch":"vitest --config vitest.config.ts"},"_npmUser":{"name":"kerryuu","email":"sebastian-maj@outlook.com"},"_npmVersion":"11.6.2","description":"The accessible, shared 168 Group brand-family rail for React websites.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"22.16.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/brand-family_0.1.0_1787818118332_0.9934398236638953","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@168group/brand-family","version":"0.2.0","keywords":["168-group","brand-family","marquee","react","nextjs"],"license":"SEE LICENSE IN LICENSE","_id":"@168group/brand-family@0.2.0","maintainers":[{"name":"kerryuu","email":"sebastian-maj@outlook.com"}],"homepage":"https://github.com/168Group/168-group-website#readme","bugs":{"url":"https://github.com/168Group/168-group-website/issues"},"dist":{"shasum":"4298f88f4183b3cef5407e569ef1feee96a07941","tarball":"https://registry.npmjs.org/@168group/brand-family/-/brand-family-0.2.0.tgz","fileCount":36,"integrity":"sha512-+OAQmUZJs7vjaUQIlDDKEgZVx0qwjQRZUVYw8NsPDyZySc0VCEkcM3XBgJy0+W3qdnILTlyRCU3TCsYC5GY5fw==","signatures":[{"sig":"MEUCIE9BhxqMp/v5kYD++AtUIB8wWkUs3o41qWrYRWmLRVspAiEAukzaw/HfLEd3G+6fuXJNyyLdKoIgjXODur6xpqjxJmI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":934275},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"gitHead":"ebe0dc263bf2ad456b2fdb733b143b769b7f2442","scripts":{"test":"vitest run --config vitest.config.ts","build":"npm run clean && tsc -p tsconfig.build.json && node ./scripts/copy-assets.mjs","check":"npm run test && npm run build","clean":"node ./scripts/clean.mjs","prepack":"npm run check","test:watch":"vitest --config vitest.config.ts"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:6a998a40-d095-4302-9feb-590431d631b9"}},"repository":{"url":"git+https://github.com/168Group/168-group-website.git","type":"git","directory":"packages/brand-family"},"_npmVersion":"11.17.0","description":"The accessible, shared 168 Group brand-family rail for React websites.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/brand-family_0.2.0_1788046459404_0.19371634336208454","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"_id":"@168group/brand-family@0.2.1","bugs":{"url":"https://github.com/168Group/168-group-website/issues"},"dist":{"shasum":"2e888c3f8b7bc5d78680a88de360c805cf9def32","tarball":"https://registry.npmjs.org/@168group/brand-family/-/brand-family-0.2.1.tgz","fileCount":36,"integrity":"sha512-6QBK2eqAsE9HfKXzTZHVRSNGL0PYjQCbZPK4v+ftug9iTQP9CBO/gvB/i2ixGO40Nke3OAo8Nh3N/194D4XbaQ==","signatures":[{"sig":"MEUCIQCwoz4g2Dt5CcHuVeWL9e1FGULkIqv2vDsJWmqRVqoDIQIgGtYW+iJNbw0DayyslPwvtIEf6XgIrDFVCFpjbVMvEl4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIESBOGiircsDD7eL6jgeckSbJnntOtMsxMrYVZ5A1howAiA2K3TJDkxxe31B1ScqP0AhRsxxB7oUFusercWeDJXGmQ=="}],"unpackedSize":931570},"main":"./dist/index.js","name":"@168group/brand-family","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"gitHead":"eeb3acc58cc850ca6083874aa8744088de6a30c8","license":"SEE LICENSE IN LICENSE","scripts":{"test":"vitest run --config vitest.config.ts","build":"npm run clean && tsc -p tsconfig.build.json && node ./scripts/copy-assets.mjs","check":"npm run test && npm run build","clean":"node ./scripts/clean.mjs","prepack":"npm run check","test:watch":"vitest --config vitest.config.ts"},"version":"0.2.1","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:6a998a40-d095-4302-9feb-590431d631b9"}},"homepage":"https://github.com/168Group/168-group-website#readme","keywords":["168-group","brand-family","marquee","react","nextjs"],"repository":{"url":"git+https://github.com/168Group/168-group-website.git","type":"git","directory":"packages/brand-family"},"_npmVersion":"11.19.0","description":"The accessible, shared 168 Group brand-family rail for React websites.","directories":{},"maintainers":[{"name":"kerryuu","email":"sebastian-maj@outlook.com"}],"sideEffects":["./dist/styles.css"],"_nodeVersion":"24.20.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/brand-family_0.2.1_1789258768789_0.5789458013564948"}}},"time":{"created":"2026-08-27T08:08:38.183Z","modified":"2026-09-13T00:19:29.102Z","0.1.0":"2026-08-27T08:08:38.484Z","0.2.0":"2026-08-29T23:34:19.604Z","0.2.1":"2026-09-13T00:19:28.926Z"},"bugs":{"url":"https://github.com/168Group/168-group-website/issues"},"license":"SEE LICENSE IN LICENSE","homepage":"https://github.com/168Group/168-group-website#readme","keywords":["168-group","brand-family","marquee","react","nextjs"],"repository":{"url":"git+https://github.com/168Group/168-group-website.git","type":"git","directory":"packages/brand-family"},"description":"The accessible, shared 168 Group brand-family rail for React websites.","maintainers":[{"name":"kerryuu","email":"sebastian-maj@outlook.com"}],"readme":"# @168group/brand-family\n\nThe shared, compact 168 Group portfolio rail for React and Next.js websites. It renders\nserver-visible brand links, an accessible pauseable desktop marquee, and a manually\nswipeable touch experience with no Tailwind or animation-library dependency. Its default\npresentation is intentionally short: one family label and the logo rail, with no oversized\nmarketing header or category footer competing with the host website.\n\n## Install\n\n```bash\nnpm install @168group/brand-family\n```\n\nImport the stylesheet once in the host application's global entry:\n\n```tsx\nimport \"@168group/brand-family/styles.css\";\n```\n\nThen place the component on the site's homepage, preferably immediately after the primary\nhero or introductory section. This keeps the family visible without placing a large\nmarketing rail above the main purpose of every inner page:\n\n```tsx\nimport { BrandFamilyRail } from \"@168group/brand-family\";\n\nexport function HomePage() {\n  return (\n    <>\n      <Hero />\n      <BrandFamilyRail\n        currentBrandSlug=\"laopot\"\n        openLinksInNewTab\n      />\n      <HomePageContent />\n    </>\n  );\n}\n```\n\nUse the slug exported in `brandFamily` for `currentBrandSlug`. The current card stays\nvisibly marked and remains a canonical link like every other active brand card.\n\n`openLinksInNewTab` is optional and defaults to `false`. When enabled, linked cards use\n`target=\"_blank\"`, `rel=\"noopener\"`, an external-link arrow, and an accessible new-tab\nannouncement. Opening a new tab can help visitors keep their place on the current brand\nsite, but does not provide additional search-ranking value.\n\nThe `168-group` entry is the lead card in every rail. It links to the main\n`168GroupUSA.com` website and receives a wider, gold-accented treatment plus a visible\n“Main website” badge without reducing the prominence or clickability of the other brands.\n\n## Customization\n\nOverride the package CSS variables on a wrapper or the component itself:\n\n```tsx\n<BrandFamilyRail\n  currentBrandSlug=\"168-asian-mart\"\n  style={{\n    \"--bfr-crimson\": \"#b7182e\",\n    \"--bfr-gold\": \"#d4af37\",\n  } as React.CSSProperties}\n/>\n```\n\nThe `onBrandNavigate` callback can forward click events to the host site's analytics.\nNavigation remains native and continues even if that callback fails.\n\n## Preparing and replacing logos\n\nWhen retained, original supplied artwork lives in `assets/logos/logos/` and is\nintentionally excluded from the published package. The preparation script safely skips\nan original that is no longer present. The web-ready assets in `assets/logos/` use a consistent\ntransparent `600 × 300` canvas—enough for crisp high-density card rendering without\nshipping oversized artwork. To regenerate the supplied marks with Pillow and NumPy:\n\n```bash\npython3 scripts/prepare-logos.py\n```\n\nThe script preserves every original. It removes the edge-connected white matte from\n168 Asian Mart, removes and decontaminates the black JPEG matte from Asian Street Food,\nand—when the full ASF original is present—favors its primary bowl mark over the too-small\ncard tagline. It trims transparent PNGs and presents the flattened Ebisu campaign graphic\nas a rounded tile. Ebisu needs a\nlayered/vector original before its pink rays can be removed without damaging the mascot\nand lettering. The uploaded `icon.png` is retained as the source for the normalized\n`168-nail-supply.png` asset. `fuji.png` is the source for `fuji-buffet.png`, and the\nwhite matte is removed from `rdf_logo.webp` when producing\n`ricky-dong-foundation.png`. A final lower-wordmark pass removes enclosed white matte\nremnants from the Asian Mart and foundation lettering without touching the white artwork\ninside their upper badges.\n\nThe published web-ready logo files live in `assets/logos/`. Replace a file without\nchanging its name, preserve a wide `2:1` canvas when practical, and run:\n\n```bash\nnpm run check --workspace=@168group/brand-family\n```\n\nPrefer clean vector originals. If a brand has only a raster logo, convert it to an\noptimized transparent WebP or PNG and update the matching import in `src/brands.ts`.\nKeep every individual asset small enough for the complete logo set to remain lightweight.\n\n## Release\n\n1. Update the package version according to semantic versioning.\n2. Run the package check and the umbrella site's lint/build.\n3. Inspect the packed contents with `npm pack --dry-run --workspace=@168group/brand-family`.\n4. Publish to public npm. The package pins both `publishConfig.access = \"public\"` and the\n   official npm registry so a developer's user-level scope configuration cannot redirect it.\n5. Let Dependabot/Renovate open tested dependency updates in each brand-site repository.\n\nDo not make consumer sites depend on a mutable Git branch or an unversioned remote\nJavaScript URL.\n\nFor Dependabot, add this to each consumer repository's `.github/dependabot.yml`:\n\n```yaml\nversion: 2\nupdates:\n  - package-ecosystem: npm\n    directory: /\n    schedule:\n      interval: weekly\n```\n\nThe included `publish-brand-family.yml` workflow publishes manually after the package and\nrepository checks pass. npm trusted publishing authorizes that exact GitHub Actions workflow\nthrough OIDC, so the repository does not store a long-lived npm publishing token.\n","readmeFilename":"README.md"}