@regardio/brand 0.2.0 → 0.3.2

package/README.md

@@ -3,115 +3,153 @@
 > **Design system and branding for the Regardio ecosystem**
 
 Regardio Brand provides the visual identity, design tokens, and brand guidelines
-for all Regardio applications. It ensures consistent visual language and user
-experience across the entire toolkit while supporting customization for
-different deployment contexts.
+for all Regardio applications. The package includes both raw SVG files and
+ready-to-use React components.
 
-## What is Regardio Brand?
-
-Regardio Brand delivers comprehensive design system including:
-
-- **Design Tokens** - Colors, typography, spacing, and visual constants
-- **Brand Guidelines** - Logo usage, voice, tone, and visual identity standards
-- **Asset Library** - Icons, illustrations, and branded graphics
-- **Component Specifications** - Design specifications for UI components
-- **Theme Variants** - Light/dark modes and accessibility considerations
-- **Brand Extensions** - Guidelines for custom implementations and
-white-labeling
-
-This package serves as the foundation for visual consistency across all
-Ensemble applications and enables organizations to maintain brand coherence
-while using Ensemble tools.
-
-## Getting Started
-
-### Installation
+## Installation
 
 ```bash
 pnpm add @regardio/brand
 ```
 
-## Included Assets
+## Asset Catalog
 
-The SVG assets live in `src/svg/` and are organized into:
+Run Storybook to browse the complete asset catalog:
 
-- `icons/` — Wordmarks, product marks, and system icons for the Regardio brand
-and the Regardio System
-- `compass-base/` — System primitives and compositions (facets, steps, sparks,
-bridges, pointers) used across product UI and documentation
+```bash
+pnpm storybook
+```
 
-Below are a few representative examples. Files are served directly from this
-package and can be embedded as inline SVGs or referenced via your bundler.
+This opens an interactive catalog at `http://localhost:6006` with all icons,
+logos, colors, and compass sprites.
 
-### Brand Logos
+## Sample Assets
 
 <!-- markdownlint-disable MD033 -->
 <p style="background:#f1eded; display: flex; gap: 16px; align-items: center; padding: 16px;">
-  <img alt="Regardio Logo Color"
-  src="./src/svg/icons/regardio-logo-color.svg" width="120" />
-  <img alt="Regardio Logo Mono"
-  src="./src/svg/icons/regardio-logo-mono.svg" width="120" />
-
+  <img alt="Regardio Logo" src="./src/svg/icons/regardio-logo-color.svg" width="120" />
+  <img alt="Regardio Icon" src="./src/svg/icons/regardio-icon-color.svg" width="48" />
+  <img alt="Ensemble Icon" src="./src/svg/icons/regardio-ensemble-icon-color.svg" width="48" />
+  <img alt="System Icon" src="./src/svg/icons/regardio-system-icon.svg" width="48" />
 </p>
 <!-- markdownlint-enable MD033 -->
 
-### Brand Icons
+## Asset Categories
 
-<!-- markdownlint-disable MD033 -->
-<p style="background:#0f3b50; display: flex; gap: 16px; align-items: center; padding: 16px;">
-  <img alt="Regardio Ensemble Icon Color"
-  src="./src/svg/icons/regardio-ensemble-icon-color.svg" width="120" />
-  <img alt="Regardio Ensemble Icon Mono"
-  src="./src/svg/icons/regardio-ensemble-icon-mono.svg" width="120" />
-  <img alt="Regardio Compass Icon"
-  src="./src/svg/icons/regardio-compass-icon.svg" width="120" />
-  <img alt="Regardio System Icon"
-  src="./src/svg/icons/regardio-system-icon.svg" width="120" />
-</p>
-<!-- markdownlint-enable MD033 -->
+### SVG Files
 
-### System Icons
+Raw SVG assets are available in `src/svg/`:
 
-<!-- markdownlint-disable MD033 -->
-<p style="display: flex; gap: 16px; align-items: center; padding: 16px;">
-  <img alt="Regardio System Spark Icon"
-  src="./src/svg/icons/regardio-system-spark-icon.svg" width="96" />
-  <img alt="Regardio System Pursuit Icon"
-  src="./src/svg/icons/regardio-system-pursuit-icon.svg" width="96" />
-  <img alt="Regardio System Circle Icon"
-  src="./src/svg/icons/regardio-system-circle-icon.svg" width="96" />
-  <img alt="Regardio System Facet Icon"
-  src="./src/svg/icons/regardio-system-facet-icon.svg" width="96" />
-  <img alt="Regardio System Plan Icon"
-  src="./src/svg/icons/regardio-system-plan-icon.svg" width="96" />
-  <img alt="Regardio System Bridge Icon"
-  src="./src/svg/icons/regardio-system-bridge-icon.svg" width="96" />
-</p>
-<!-- markdownlint-enable MD033 -->
+- **`icons/`** — Regardio logos, icons, and system symbols
+- **`compass-base/`** — Compass sprite components (facets, sparks, bridges, pursuits)
 
-### Compass Card
+### React Components
 
-<!-- markdownlint-disable MD033 -->
-<p style="display: flex; gap: 16px; align-items: center; padding: 16px; ">
-  <img alt="Sparks: Leisure – Calm"
-  src="./src/svg/compass-base/spark.leisure.calm.svg" width="105" />
-  <img alt="Sparks: Motivator – Strength"
-  src="./src/svg/compass-base/spark.motivator.strength.svg" width="148" />
-  <img alt="Facets: Element – Spaces"
-  src="./src/svg/compass-base/facet.element.spaces.svg" width="105" />
-  <img alt="Facets: Step – Signal"
-  src="./src/svg/compass-base/facet.step.signal.bottom.svg" width="105" />
-  <img alt="Bridges: Perspective – Fulfills"
-  src="./src/svg/compass-base/bridge.perspective.fulfills.svg" width="148" />
-  <img alt="Prospects: Pointer"
-  src="./src/svg/compass-base/prospect.pointer.svg" width="105" />
-</p>
-<!-- markdownlint-enable MD033 -->
+Generated React components are exported from the package:
+
+- **Logos** — `@regardio/brand/logos/*`
+- **Icons** — `@regardio/brand/icons/*`
+- **Sprites** — `@regardio/brand/sprites/*`
+
+## Usage
+
+### React Components
+
+```tsx
+import RegardioLogoColor from "@regardio/brand/logos/regardio-logo-color";
+import RegardioIconColor from "@regardio/brand/icons/regardio-color";
+import { CompassSprite } from "@regardio/brand/sprites/compass-sprite";
+import { CompassSpriteProvider } from "@regardio/brand/sprites/compass-sprite-provider";
+
+function App() {
+  return (
+    <CompassSpriteProvider>
+      <RegardioLogoColor style={{ width: 200 }} />
+      <RegardioIconColor style={{ fontSize: 48 }} />
+      <CompassSprite id="spark.leisure.calm" width={80} height={80} />
+    </CompassSpriteProvider>
+  );
+}
+```
+
+### CompassSpriteProvider
+
+The `CompassSpriteProvider` embeds SVG symbol definitions for all compass sprites
+directly into the DOM. Include it **once** at the root of your application:
+
+```tsx
+import { CompassSpriteProvider } from "@regardio/brand/sprites/compass-sprite-provider";
+
+function App() {
+  return (
+    <CompassSpriteProvider>
+      {/* Your app content */}
+    </CompassSpriteProvider>
+  );
+}
+```
+
+Then use `CompassSprite` anywhere in your app to reference sprites by ID:
+
+```tsx
+import { CompassSprite } from "@regardio/brand/sprites/compass-sprite";
+
+<CompassSprite id="spark.leisure.calm" width={80} height={80} />
+<CompassSprite id="facet.element.people" width={60} height={80} />
+<CompassSprite id="bridge.perspective.enables" width={100} height={70} />
+```
+
+### Regardio Color Scheme with Tailwind CSS
+
+Import `colors.css` to use the Regardio color palette with Tailwind CSS v4:
+
+```tsx
+import "@regardio/brand/colors.css";
+```
+
+This provides CSS custom properties using the `@theme` directive, making colors
+available as Tailwind utilities. The palette includes:
+
+- **coral**, **orange**, **yellow**, **olive**, **lime**, **green**, **teal**, **cyan**, **blue**, **purple**, **pink**, **red** — full spectrum
+- **gray** — neutral tones with warm undertones
+- **white**, **black** — base colors
+
+Each color has shades from `50` (lightest) to `950` (darkest):
+
+```html
+<div class="bg-coral-500 text-white">Coral background</div>
+<div class="text-teal-700">Teal text</div>
+<div class="border-purple-300">Purple border</div>
+```
+
+The compass sprites use these colors via Tailwind classes (e.g., `fill-green-300`),
+so the color scheme must be loaded for sprites to render correctly.
+
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+| `pnpm build` | Build TypeScript to `dist/` |
+| `pnpm dev` | Watch mode for development |
+| `pnpm generate` | Regenerate all React components from SVGs |
+| `pnpm storybook` | Launch Storybook asset catalog |
+| `pnpm storybook:build` | Build static Storybook site |
+| `pnpm lint` | Run linting checks |
+| `pnpm fix` | Auto-fix linting issues |
+| `pnpm typecheck` | TypeScript type checking |
+
+## Exports
+
+| Export | Description |
+|--------|-------------|
+| `@regardio/brand/colors.css` | Tailwind v4 theme with Regardio color palette |
+| `@regardio/brand/logos/*` | Logo React components |
+| `@regardio/brand/icons/*` | Icon React components |
+| `@regardio/brand/sprites/*` | Compass sprite components |
 
 ## License
 
-**Creative Commons Attribution-ShareAlike 4.0 International** (CC BY-SA 4.0):
-Regardio Brand assets and guidelines are freely available for use and adaptation.
+**CC BY-SA 4.0** — Regardio Brand assets are freely available for use and adaptation.
 
 ---
 

package/dist/stories/Colors.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+export declare const PrimaryColors: StoryObj;
+export declare const SecondaryColors: StoryObj;
+export declare const NeutralColors: StoryObj;
+//# sourceMappingURL=Colors.stories.d.ts.map

package/dist/stories/Colors.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Colors.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAsC5D,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,aAAa,EAAE,QAiB3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAiB7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAiD3B,CAAC"}

package/dist/stories/Colors.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ColorSwatch = ({ name, cssVar }) => (_jsxs("div", { style: {
+        border: '1px solid #e5e5e5',
+        borderRadius: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+    }, children: [_jsx("div", { style: {
+                background: `var(${cssVar})`,
+                height: '80px',
+            } }), _jsxs("div", { style: { padding: '12px' }, children: [_jsx("div", { style: { fontSize: '14px', fontWeight: 600 }, children: name }), _jsx("div", { style: { color: '#666', fontFamily: 'monospace', fontSize: '12px' }, children: cssVar })] })] }));
+const ColorGrid = ({ children }) => (_jsx("div", { style: {
+        display: 'grid',
+        gap: '16px',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+        padding: '24px',
+    }, children: children }));
+const meta = {
+    parameters: {
+        layout: 'fullscreen',
+    },
+    title: 'Brand/Colors',
+};
+export default meta;
+export const PrimaryColors = {
+    render: () => (_jsxs(ColorGrid, { children: [_jsx(ColorSwatch, { cssVar: "--color-primary", name: "Primary" }), _jsx(ColorSwatch, { cssVar: "--color-primary-light", name: "Primary Light" }), _jsx(ColorSwatch, { cssVar: "--color-primary-dark", name: "Primary Dark" })] })),
+};
+export const SecondaryColors = {
+    render: () => (_jsxs(ColorGrid, { children: [_jsx(ColorSwatch, { cssVar: "--color-secondary", name: "Secondary" }), _jsx(ColorSwatch, { cssVar: "--color-secondary-light", name: "Secondary Light" }), _jsx(ColorSwatch, { cssVar: "--color-secondary-dark", name: "Secondary Dark" })] })),
+};
+export const NeutralColors = {
+    render: () => (_jsxs(ColorGrid, { children: [_jsx(ColorSwatch, { cssVar: "--color-white", name: "White" }), _jsx(ColorSwatch, { cssVar: "--color-gray-100", name: "Gray 100" }), _jsx(ColorSwatch, { cssVar: "--color-gray-200", name: "Gray 200" }), _jsx(ColorSwatch, { cssVar: "--color-gray-300", name: "Gray 300" }), _jsx(ColorSwatch, { cssVar: "--color-gray-400", name: "Gray 400" }), _jsx(ColorSwatch, { cssVar: "--color-gray-500", name: "Gray 500" }), _jsx(ColorSwatch, { cssVar: "--color-gray-600", name: "Gray 600" }), _jsx(ColorSwatch, { cssVar: "--color-gray-700", name: "Gray 700" }), _jsx(ColorSwatch, { cssVar: "--color-gray-800", name: "Gray 800" }), _jsx(ColorSwatch, { cssVar: "--color-gray-900", name: "Gray 900" }), _jsx(ColorSwatch, { cssVar: "--color-black", name: "Black" })] })),
+};

package/dist/stories/CompassSprites.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+export declare const LeisureSparks: StoryObj;
+export declare const MotivatorSparks: StoryObj;
+export declare const FacetElements: StoryObj;
+export declare const FacetSteps: StoryObj;
+export declare const BridgePerspectives: StoryObj;
+export declare const AllSprites: StoryObj;
+//# sourceMappingURL=CompassSprites.stories.d.ts.map

package/dist/stories/CompassSprites.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompassSprites.stories.d.ts","sourceRoot":"","sources":["../../src/stories/CompassSprites.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAmG5D,QAAA,MAAM,IAAI,EAAE,IAaX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,aAAa,EAAE,QAa3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAa7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAa3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAaxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAahC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAWxB,CAAC"}

package/dist/stories/CompassSprites.stories.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CompassSprite } from '../generated/sprites/CompassSprite';
+import { CompassSpriteProvider } from '../generated/sprites/CompassSpriteProvider';
+const spriteIds = [
+    'spark.leisure.breeze',
+    'spark.leisure.calm',
+    'spark.leisure.contemplation',
+    'spark.leisure.distance',
+    'spark.leisure.indulgence',
+    'spark.leisure.inspiration',
+    'spark.leisure.movement',
+    'spark.leisure.nearness',
+    'spark.leisure.nourishment',
+    'spark.leisure.refreshment',
+    'spark.leisure.relaxation',
+    'spark.leisure.relief',
+    'spark.motivator.flexibility',
+    'spark.motivator.orientation',
+    'spark.motivator.pathways',
+    'spark.motivator.possibilities',
+    'spark.motivator.strength',
+    'spark.motivator.structure',
+    'sparks.leisure',
+    'sparks.motivators',
+    'facet.element.means',
+    'facet.element.notions',
+    'facet.element.people',
+    'facet.element.spaces',
+    'facet.element.things',
+    'facet.element.times',
+    'facet.step.accord.bottom',
+    'facet.step.accord.top',
+    'facet.step.action.bottom',
+    'facet.step.action.top',
+    'facet.step.effect.bottom',
+    'facet.step.effect.top',
+    'facet.step.essence.bottom',
+    'facet.step.essence.top',
+    'facet.step.impulse.bottom',
+    'facet.step.impulse.top',
+    'facet.step.signal.bottom',
+    'facet.step.signal.top',
+    'facets.elements',
+    'facets.steps',
+    'bridge.perspective.contradicts',
+    'bridge.perspective.enables',
+    'bridge.perspective.extends',
+    'bridge.perspective.fulfills',
+    'bridge.perspective.matches',
+    'bridge.perspective.supports',
+    'bridges.perspectives',
+    'prospect.pointer',
+    'pursuits.flourishing',
+];
+const SpriteGrid = ({ children }) => (_jsx("div", { style: {
+        display: 'grid',
+        gap: '16px',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+        padding: '24px',
+    }, children: children }));
+const SpriteCard = ({ id, size = 80 }) => (_jsxs("div", { style: {
+        alignItems: 'center',
+        border: '1px solid #e5e5e5',
+        borderRadius: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        padding: '12px',
+    }, children: [_jsx(CompassSprite, { height: size, id: id, width: size }), _jsx("span", { style: {
+                color: '#666',
+                fontSize: '10px',
+                textAlign: 'center',
+                wordBreak: 'break-word',
+            }, children: id })] }));
+const meta = {
+    decorators: [
+        (Story) => (_jsxs(_Fragment, { children: [_jsx(CompassSpriteProvider, {}), _jsx(Story, {})] })),
+    ],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    title: 'Brand/Compass Sprites',
+};
+export default meta;
+export const LeisureSparks = {
+    render: () => (_jsx(SpriteGrid, { children: spriteIds
+            .filter((id) => id.startsWith('spark.leisure.'))
+            .map((id) => (_jsx(SpriteCard, { id: id }, id))) })),
+};
+export const MotivatorSparks = {
+    render: () => (_jsx(SpriteGrid, { children: spriteIds
+            .filter((id) => id.startsWith('spark.motivator.'))
+            .map((id) => (_jsx(SpriteCard, { id: id }, id))) })),
+};
+export const FacetElements = {
+    render: () => (_jsx(SpriteGrid, { children: spriteIds
+            .filter((id) => id.startsWith('facet.element.'))
+            .map((id) => (_jsx(SpriteCard, { id: id }, id))) })),
+};
+export const FacetSteps = {
+    render: () => (_jsx(SpriteGrid, { children: spriteIds
+            .filter((id) => id.startsWith('facet.step.'))
+            .map((id) => (_jsx(SpriteCard, { id: id }, id))) })),
+};
+export const BridgePerspectives = {
+    render: () => (_jsx(SpriteGrid, { children: spriteIds
+            .filter((id) => id.startsWith('bridge.perspective.'))
+            .map((id) => (_jsx(SpriteCard, { id: id }, id))) })),
+};
+export const AllSprites = {
+    render: () => (_jsx(SpriteGrid, { children: spriteIds.map((id) => (_jsx(SpriteCard, { id: id }, id))) })),
+};

package/dist/stories/Icons.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+export declare const RegardioIcons: StoryObj;
+export declare const EnsembleIcons: StoryObj;
+export declare const CompassIcon: StoryObj;
+export declare const AllIcons: StoryObj;
+//# sourceMappingURL=Icons.stories.d.ts.map

package/dist/stories/Icons.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Icons.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAuC5D,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,aAAa,EAAE,QAc3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAc3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,QAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QA0BtB,CAAC"}

package/dist/stories/Icons.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import RegardioCompassIcon from '../generated/icons/RegardioCompassIcon';
+import RegardioEnsembleIconColor from '../generated/icons/RegardioEnsembleIconColor';
+import RegardioEnsembleIconColorFull from '../generated/icons/RegardioEnsembleIconColorFull';
+import RegardioEnsembleIconMono from '../generated/icons/RegardioEnsembleIconMono';
+import RegardioIconColor from '../generated/icons/RegardioIconColor';
+import RegardioIconColorFull from '../generated/icons/RegardioIconColorFull';
+import RegardioIconMono from '../generated/icons/RegardioIconMono';
+const IconGrid = ({ children }) => (_jsx("div", { style: {
+        display: 'grid',
+        gap: '24px',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+        padding: '24px',
+    }, children: children }));
+const IconCard = ({ name, children }) => (_jsxs("div", { style: {
+        alignItems: 'center',
+        border: '1px solid #e5e5e5',
+        borderRadius: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        padding: '16px',
+    }, children: [_jsx("div", { style: { fontSize: '64px', lineHeight: 1 }, children: children }), _jsx("span", { style: { color: '#666', fontSize: '12px', textAlign: 'center' }, children: name })] }));
+const meta = {
+    parameters: {
+        layout: 'fullscreen',
+    },
+    title: 'Brand/Icons',
+};
+export default meta;
+export const RegardioIcons = {
+    render: () => (_jsxs(IconGrid, { children: [_jsx(IconCard, { name: "RegardioIconColor", children: _jsx(RegardioIconColor, {}) }), _jsx(IconCard, { name: "RegardioIconColorFull", children: _jsx(RegardioIconColorFull, {}) }), _jsx(IconCard, { name: "RegardioIconMono", children: _jsx(RegardioIconMono, {}) })] })),
+};
+export const EnsembleIcons = {
+    render: () => (_jsxs(IconGrid, { children: [_jsx(IconCard, { name: "EnsembleIconColor", children: _jsx(RegardioEnsembleIconColor, {}) }), _jsx(IconCard, { name: "EnsembleIconColorFull", children: _jsx(RegardioEnsembleIconColorFull, {}) }), _jsx(IconCard, { name: "EnsembleIconMono", children: _jsx(RegardioEnsembleIconMono, {}) })] })),
+};
+export const CompassIcon = {
+    render: () => (_jsx(IconGrid, { children: _jsx(IconCard, { name: "CompassIcon", children: _jsx(RegardioCompassIcon, {}) }) })),
+};
+export const AllIcons = {
+    render: () => (_jsxs(IconGrid, { children: [_jsx(IconCard, { name: "RegardioIconColor", children: _jsx(RegardioIconColor, {}) }), _jsx(IconCard, { name: "RegardioIconColorFull", children: _jsx(RegardioIconColorFull, {}) }), _jsx(IconCard, { name: "RegardioIconMono", children: _jsx(RegardioIconMono, {}) }), _jsx(IconCard, { name: "EnsembleIconColor", children: _jsx(RegardioEnsembleIconColor, {}) }), _jsx(IconCard, { name: "EnsembleIconColorFull", children: _jsx(RegardioEnsembleIconColorFull, {}) }), _jsx(IconCard, { name: "EnsembleIconMono", children: _jsx(RegardioEnsembleIconMono, {}) }), _jsx(IconCard, { name: "CompassIcon", children: _jsx(RegardioCompassIcon, {}) })] })),
+};

package/dist/stories/Logos.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+export declare const ColorLogos: StoryObj;
+export declare const MonoLogos: StoryObj;
+export declare const AllLogos: StoryObj;
+//# sourceMappingURL=Logos.stories.d.ts.map

package/dist/stories/Logos.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logos.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Logos.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAyC5D,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,UAAU,EAAE,QAiBxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAevB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QAuBtB,CAAC"}

package/dist/stories/Logos.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import RegardioLogoColor from '../generated/icons/RegardioLogoColor';
+import RegardioLogoColorLight from '../generated/icons/RegardioLogoColorLight';
+import RegardioLogoMono from '../generated/icons/RegardioLogoMono';
+import RegardioLogoMonoLight from '../generated/icons/RegardioLogoMonoLight';
+const LogoContainer = ({ children, background, }) => (_jsx("div", { style: {
+        alignItems: 'center',
+        background: background || 'transparent',
+        borderRadius: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+        padding: '32px',
+    }, children: children }));
+const LogoGrid = ({ children }) => (_jsx("div", { style: {
+        display: 'grid',
+        gap: '24px',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        padding: '24px',
+    }, children: children }));
+const meta = {
+    parameters: {
+        layout: 'fullscreen',
+    },
+    title: 'Brand/Logos',
+};
+export default meta;
+export const ColorLogos = {
+    render: () => (_jsxs(LogoGrid, { children: [_jsxs(LogoContainer, { background: "#ffffff", children: [_jsx(RegardioLogoColor, { style: { height: 'auto', width: 200 } }), _jsx("span", { style: { color: '#666', fontSize: '12px' }, children: "RegardioLogoColor (light background)" })] }), _jsxs(LogoContainer, { background: "#0f3b50", children: [_jsx(RegardioLogoColorLight, { style: { height: 'auto', width: 200 } }), _jsx("span", { style: { color: '#ccc', fontSize: '12px' }, children: "RegardioLogoColorLight (dark background)" })] })] })),
+};
+export const MonoLogos = {
+    render: () => (_jsxs(LogoGrid, { children: [_jsxs(LogoContainer, { background: "#ffffff", children: [_jsx(RegardioLogoMono, { style: { height: 'auto', width: 200 } }), _jsx("span", { style: { color: '#666', fontSize: '12px' }, children: "RegardioLogoMono (light background)" })] }), _jsxs(LogoContainer, { background: "#0f3b50", children: [_jsx(RegardioLogoMonoLight, { style: { height: 'auto', width: 200 } }), _jsx("span", { style: { color: '#ccc', fontSize: '12px' }, children: "RegardioLogoMonoLight (dark background)" })] })] })),
+};
+export const AllLogos = {
+    render: () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: _jsxs(LogoGrid, { children: [_jsxs(LogoContainer, { background: "#ffffff", children: [_jsx(RegardioLogoColor, { style: { height: 'auto', width: 200 } }), _jsx("span", { style: { color: '#666', fontSize: '12px' }, children: "RegardioLogoColor" })] }), _jsxs(LogoContainer, { background: "#0f3b50", children: [_jsx(RegardioLogoColorLight, { style: { height: 'auto', width: 200 } }), _jsx("span", { style: { color: '#ccc', fontSize: '12px' }, children: "RegardioLogoColorLight" })] }), _jsxs(LogoContainer, { background: "#ffffff", children: [_jsx(RegardioLogoMono, { style: { height: 'auto', width: 200 } }), _jsx("span", { style: { color: '#666', fontSize: '12px' }, children: "RegardioLogoMono" })] }), _jsxs(LogoContainer, { background: "#0f3b50", children: [_jsx(RegardioLogoMonoLight, { style: { height: 'auto', width: 200 } }), _jsx("span", { style: { color: '#ccc', fontSize: '12px' }, children: "RegardioLogoMonoLight" })] })] }) })),
+};

package/dist/stories/SystemIcons.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+export declare const AllSystemIcons: StoryObj;
+export declare const SystemIconSizes: StoryObj;
+//# sourceMappingURL=SystemIcons.stories.d.ts.map

package/dist/stories/SystemIcons.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemIcons.stories.d.ts","sourceRoot":"","sources":["../../src/stories/SystemIcons.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAuC5D,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc,EAAE,QA0B5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAa7B,CAAC"}

package/dist/stories/SystemIcons.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import RegardioSystemBridgeIcon from '../generated/icons/RegardioSystemBridgeIcon';
+import RegardioSystemCircleIcon from '../generated/icons/RegardioSystemCircleIcon';
+import RegardioSystemFacetIcon from '../generated/icons/RegardioSystemFacetIcon';
+import RegardioSystemIcon from '../generated/icons/RegardioSystemIcon';
+import RegardioSystemPlanIcon from '../generated/icons/RegardioSystemPlanIcon';
+import RegardioSystemPursuitIcon from '../generated/icons/RegardioSystemPursuitIcon';
+import RegardioSystemSparkIcon from '../generated/icons/RegardioSystemSparkIcon';
+const IconGrid = ({ children }) => (_jsx("div", { style: {
+        display: 'grid',
+        gap: '24px',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+        padding: '24px',
+    }, children: children }));
+const IconCard = ({ name, children }) => (_jsxs("div", { style: {
+        alignItems: 'center',
+        border: '1px solid #e5e5e5',
+        borderRadius: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        padding: '16px',
+    }, children: [_jsx("div", { style: { fontSize: '64px', lineHeight: 1 }, children: children }), _jsx("span", { style: { color: '#666', fontSize: '12px', textAlign: 'center' }, children: name })] }));
+const meta = {
+    parameters: {
+        layout: 'fullscreen',
+    },
+    title: 'Brand/System Icons',
+};
+export default meta;
+export const AllSystemIcons = {
+    render: () => (_jsxs(IconGrid, { children: [_jsx(IconCard, { name: "SystemIcon", children: _jsx(RegardioSystemIcon, {}) }), _jsx(IconCard, { name: "SparkIcon", children: _jsx(RegardioSystemSparkIcon, {}) }), _jsx(IconCard, { name: "PursuitIcon", children: _jsx(RegardioSystemPursuitIcon, {}) }), _jsx(IconCard, { name: "CircleIcon", children: _jsx(RegardioSystemCircleIcon, {}) }), _jsx(IconCard, { name: "FacetIcon", children: _jsx(RegardioSystemFacetIcon, {}) }), _jsx(IconCard, { name: "PlanIcon", children: _jsx(RegardioSystemPlanIcon, {}) }), _jsx(IconCard, { name: "BridgeIcon", children: _jsx(RegardioSystemBridgeIcon, {}) })] })),
+};
+export const SystemIconSizes = {
+    render: () => (_jsxs("div", { style: { padding: '24px' }, children: [_jsx("h3", { style: { marginBottom: '16px' }, children: "System Icon at different sizes" }), _jsxs("div", { style: { alignItems: 'center', display: 'flex', gap: '24px' }, children: [_jsx(RegardioSystemIcon, { style: { fontSize: '24px' } }), _jsx(RegardioSystemIcon, { style: { fontSize: '32px' } }), _jsx(RegardioSystemIcon, { style: { fontSize: '48px' } }), _jsx(RegardioSystemIcon, { style: { fontSize: '64px' } }), _jsx(RegardioSystemIcon, { style: { fontSize: '96px' } })] })] })),
+};

package/package.json

@@ -1,20 +1,31 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
-  "authors": ["Bernd Matzner <bernd.matzner@regard.io>"],
+  "author": "Bernd Matzner <bernd.matzner@regard.io>",
+  "bugs": {
+    "url": "https://github.com/regardio/brand/issues"
+  },
   "description": "Regardio Brand Assets",
   "devDependencies": {
-    "@regardio/dev": "1.7.0",
+    "@regardio/dev": "1.9.1",
+    "@storybook/react-vite": "10.1.11",
     "@svgr/cli": "8.1.0",
     "@svgr/plugin-jsx": "8.1.0",
     "@svgr/plugin-svgo": "8.1.0",
+    "@tailwindcss/vite": "4.1.18",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/node": "25.0.3",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.2",
     "linkedom": "0.18.12",
     "node-html-parser": "7.0.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "storybook": "10.1.11",
     "svgo": "4.0.0",
-    "typescript": "5.9.3"
+    "tailwindcss": "4.1.18",
+    "typescript": "5.9.3",
+    "vite": "7.3.0"
   },
   "exports": {
     "./colors.css": {
@@ -101,33 +112,43 @@
       "types": "./dist/generated/sprites/CompassSpriteProvider.d.ts"
     }
   },
-  "files": ["dist", "src/styles/colors.css"],
+  "files": [
+    "dist",
+    "src/styles/colors.css"
+  ],
+  "homepage": "https://github.com/regardio/brand#readme",
   "license": "CC BY-SA 4.0",
   "name": "@regardio/brand",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/regardio/brand"
+  },
   "scripts": {
     "build": "exec-tsc --project tsconfig.build.json",
     "clean": "exec-clean .turbo dist src/generated",
     "dev": "exec-tsc --project tsconfig.build.json --watch",
     "fix": "exec-p fix:*",
     "fix:biome": "lint-biome check --write --unsafe .",
-    "fix:md": "lint-md --fix \"**/*.md\" \"**/*.mdx\" \"!**/node_modules/**\" \"!**/dist/**\"",
+    "fix:md": "lint-md --fix \"**/*.md\" \"**/*.mdx\"",
     "generate": "exec-s generate:* fix:*",
     "generate:compass-base-sprite": "exec-ts scripts/convert-svgs-to-sprite.ts ./src/svg/compass-base ./src/generated/sprites/compass-base.svg",
     "generate:compass-base-sprites-components": "exec-ts scripts/build-compass-base-sprites.ts",
     "generate:icons": "svgr --icon --out-dir ./src/generated/icons -- ./src/svg/icons",
     "lint": "exec-p lint:*",
     "lint:biome": "lint-biome check .",
-    "lint:md": "lint-md \"**/*.md\" \"**/*.mdx\" \"!**/node_modules/**\" \"!**/dist/**\"",
+    "lint:md": "lint-md \"**/*.md\" \"**/*.mdx\"",
     "prepare": "exec-husky",
     "release": "flow-release",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static",
     "typecheck": "exec-tsc --noEmit",
-    "version": "pnpm changeset version"
+    "version": "flow-changeset version"
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.2.0"
+  "version": "0.3.2"
 }