@regardio/brand 0.7.7 → 0.8.1

package/README.md

@@ -2,9 +2,12 @@
 
 > **Design system and branding for the Regardio ecosystem**
 
-Regardio Brand provides the visual identity, design tokens, and brand guidelines
-for all Regardio applications. The package includes both raw SVG files and
-ready-to-use React components.
+Regardio Brand provides the visual identity, design tokens, brand guidelines,
+and branded components for all Regardio applications. The package includes:
+
+- **Design system** - Colors, typography, tokens, grid layout system
+- **Branded components** - Button and other UI components with Regardio visual identity
+- **Brand assets** - SVG files and React components for logos, icons, sprites
 
 ## Installation
 
@@ -12,6 +15,16 @@ ready-to-use React components.
 pnpm add @regardio/brand
 ```
 
+## Branded Components
+
+Regardio branded components represent the Regardio visual identity (flat blue, no border, ample padding, Georama bold font). Use these consistently across all Regardio applications.
+
+```tsx
+import { Button } from '@regardio/brand/button';
+
+<Button variant="primary">Click me</Button>
+```
+
 ## Asset Catalog
 
 Run Storybook to browse the complete asset catalog:
@@ -102,8 +115,8 @@ import { CompassSprite } from "@regardio/brand/sprites/compass-sprite";
 
 Import `colors.css` to use the Regardio color palette with Tailwind CSS v4:
 
-```tsx
-import "@regardio/brand/colors.css";
+```css
+@import "@regardio/brand/styles/colors.css";
 ```
 
 This provides CSS custom properties using the `@theme` directive, making colors
@@ -124,6 +137,39 @@ Each color has shades from `50` (lightest) to `950` (darkest):
 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.
 
+### Design System Styles
+
+Import the complete design system (colors, tokens, typography, base styles, grid):
+
+```css
+@import "@regardio/brand/styles/index.css";
+```
+
+Or import individual style modules:
+
+```css
+@import "@regardio/brand/styles/colors.css";
+@import "@regardio/brand/styles/tokens.css";
+@import "@regardio/brand/styles/typography.css";
+@import "@regardio/brand/styles/base.css";
+@import "@regardio/brand/styles/grid.css";
+```
+
+### Grid System
+
+Regardio's standard container and grid layout utilities:
+
+```html
+<div class="u-container">
+  <div class="u-grid">
+    <div class="u-grid-half">Column 1</div>
+    <div class="u-grid-half">Column 2</div>
+  </div>
+</div>
+```
+
+See [Grid System documentation](./docs/grid-system.md) for complete usage guide.
+
 ## Scripts
 
 | Script | Description |
@@ -141,7 +187,8 @@ so the color scheme must be loaded for sprites to render correctly.
 
 | Export | Description |
 |--------|-------------|
-| `@regardio/brand/colors.css` | Tailwind v4 theme with Regardio color palette |
+| `@regardio/brand/button` | Branded button component |
+| `@regardio/brand/styles/*` | Design system CSS modules (index, colors, tokens, typography, base, grid) |
 | `@regardio/brand/icons/*` | Icon and logo React components |
 | `@regardio/brand/sprites/*` | Compass sprite components |
 

package/dist/components/button.d.mts

@@ -0,0 +1,21 @@
+import { Button as Button$1, ButtonVariant } from "@regardio/react/button";
+import { ComponentProps } from "react";
+
+//#region src/components/button.d.ts
+/**
+* Regardio branded button component
+*
+* Design: Flat blue, no border, ample padding, Georama bold font
+* This represents the Regardio visual identity and should be used
+* consistently across all Regardio applications.
+*/
+interface ButtonProps extends ComponentProps<typeof Button$1> {
+  className?: string;
+}
+declare const Button: ({
+  children,
+  className,
+  ...props
+}: ButtonProps) => React.JSX.Element;
+//#endregion
+export { Button, ButtonProps, type ButtonVariant };

package/dist/components/button.mjs

@@ -0,0 +1,13 @@
+import { Button as Button$1 } from "@regardio/react/button";
+import { cn } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button.tsx
+const Button = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Button$1, {
+		className: cn("px-6", "py-3", "text-base", "font-bold", "rounded-lg", "focus-visible:ring-2", "focus-visible:ring-ring", "focus-visible:ring-offset-2", className),
+		...props,
+		children
+	});
+};
+//#endregion
+export { Button };