@jamesodwyer/gds-figma-vite 1.0.4 → 1.0.6

package/README.md

@@ -1,17 +1,95 @@
-# Global Design System Component Library
+# Global Design System (GDS)
 
-View the latest build of the GDS documentation site at: <http://global-design-system.git.tmaws.io/gds>
+A shared React component library built with styled-components, optimized for Figma Make integration.
 
-## Contributing
+**Package:** `@jamesodwyer/gds-figma-vite`
 
-### Icons
+## Installation
+
+```bash
+npm install @jamesodwyer/gds-figma-vite styled-components
+```
+
+## Quick Start
+
+All components must be wrapped with `GdsProvider`:
+
+```tsx
+import { GdsProvider, Button } from '@jamesodwyer/gds-figma-vite';
+
+function App() {
+  return (
+    <GdsProvider theme="TM">
+      <Button colorVariant="primary">Click Me</Button>
+    </GdsProvider>
+  );
+}
+```
+
+## Themes
+
+Two brand themes are available:
 
-View the instructions on adding new icons at: <http://global-design-system.git.tmaws.io/gds/?path=/docs/icons--docs#adding-new-themeable-icons>
+- **TM** (Ticketmaster) - Blue primary color (#024ddf)
+- **LN** (Live Nation) - Red primary color (#e21836)
+
+```tsx
+<GdsProvider theme="TM">  {/* or "LN" */}
+  {/* your components */}
+</GdsProvider>
+```
 
-## Storybook
+## Components
 
-Start Storybook locally to preview your components:
+52 components available including:
+
+- **Layout:** Card, Modal, SidePanel, Accordion, Header, Footer
+- **Buttons:** Button, CircleButton, SquareButton, PillButton
+- **Forms:** InputField, TextInput, Checkbox, RadioButton, SelectInput, ToggleSwitch
+- **Feedback:** Toast, AlertBox, LoadingSpinner, Skeleton, Badge, Tooltip
+- **Typography:** DisplayHeading, TitleHeading, SectionHeading, TextStyle, Link
+
+## Design Tokens
+
+```tsx
+import { spacing, fontSize, elevation } from '@jamesodwyer/gds-figma-vite';
+
+// Spacing (venue-themed): lounge(4px), club(8px), hall(12px), arena(32px), stadium(48px)
+// Typography (mountain-themed): everest, kilimanjaro, rainier, etc.
+```
+
+## Icons
+
+153 themeable icons, 35 payment icons, 201 country flags, and 67 stickers included.
+
+```tsx
+import { HeartIcon, CheckmarkIcon, ChevronIcon } from '@jamesodwyer/gds-figma-vite';
+
+<Button startIcon={<HeartIcon />}>Like</Button>
+```
+
+## Figma Make Integration
+
+The `guidelines/` folder contains AI-readable documentation:
+
+- `guidelines/Guidelines.md` - Entry point for AI agents
+- `guidelines/components/*.md` - Component documentation (52 files)
+- `guidelines/design-tokens/*.md` - Colors, typography, spacing, elevation
+
+## NPM
+
+https://www.npmjs.com/package/@jamesodwyer/gds-figma-vite
+
+## Development
 
 ```bash
-npm start
+npm start          # Start Storybook (port 6060)
+npm run build      # Build the package
+npm test           # Run tests
 ```
+
+## Contributing
+
+### Icons
+
+View the instructions on adding new icons in the Storybook documentation.

package/dist/GdsProvider.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+const React = require('react');
+const styledComponents = require('styled-components');
+
+// Import directly from source files to avoid circular dependency
+const TM = require('./index132.cjs');
+const LN = require('./index133.cjs');
+const getGlobalStyles = require('./index118.cjs');
+const typography = require('./index520.cjs');
+
+const GlobalStyles = styledComponents.createGlobalStyle`
+  ${getGlobalStyles.default()}
+
+  html {
+    ${typography.textStyleMobileCustomProperties};
+
+    @media (min-width: 900px) {
+      ${typography.textStyleDesktopCustomProperties};
+    }
+  }
+`;
+
+const themes = {
+  TM: TM.default,
+  LN: LN.default
+};
+
+/**
+ * GdsProvider - Wrapper component that provides theme context and global styles
+ */
+const GdsProvider = ({
+  children,
+  theme = 'TM',
+  includeGlobalStyles = true,
+}) => {
+  const selectedTheme = themes[theme] || themes.TM;
+
+  return React.createElement(
+    styledComponents.ThemeProvider,
+    { theme: selectedTheme },
+    includeGlobalStyles ? React.createElement(GlobalStyles) : null,
+    children
+  );
+};
+
+exports.GdsProvider = GdsProvider;
+exports.default = GdsProvider;

package/dist/GdsProvider.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export interface GdsProviderProps {
+  /** Child components to wrap */
+  children: React.ReactNode;
+  /** Theme to use - 'TM' for Ticketmaster, 'LN' for Live Nation */
+  theme?: 'TM' | 'LN';
+  /** Whether to include global styles (default: true) */
+  includeGlobalStyles?: boolean;
+}
+
+/**
+ * GdsProvider - Wrapper component that provides theme context and global styles
+ *
+ * Combines styled-components ThemeProvider with GDS global styles for easy setup.
+ *
+ * @example
+ * ```tsx
+ * import { GdsProvider, Button } from '@jamesodwyer/gds-figma-vite';
+ *
+ * function App() {
+ *   return (
+ *     <GdsProvider theme="TM">
+ *       <Button colorVariant="primary">Click Me</Button>
+ *     </GdsProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare const GdsProvider: React.FC<GdsProviderProps>;
+export default GdsProvider;

package/dist/GdsProvider.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ThemeProvider, createGlobalStyle } from 'styled-components';
+import TM from './index132.js';
+import LN from './index133.js';
+import getGlobalStyles from './index118.js';
+import { textStyleMobileCustomProperties, textStyleDesktopCustomProperties } from './index520.js';
+
+const GlobalStyles = createGlobalStyle`
+  ${getGlobalStyles()}
+
+  html {
+    ${textStyleMobileCustomProperties};
+
+    @media (min-width: 900px) {
+      ${textStyleDesktopCustomProperties};
+    }
+  }
+`;
+
+const themes = { TM, LN };
+
+/**
+ * GdsProvider - Wrapper component that provides theme context and global styles
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - Child components
+ * @param {'TM' | 'LN'} props.theme - Theme to use (default: 'TM')
+ * @param {boolean} props.includeGlobalStyles - Whether to include global styles (default: true)
+ */
+export const GdsProvider = ({
+  children,
+  theme = 'TM',
+  includeGlobalStyles = true,
+}) => {
+  const selectedTheme = themes[theme] || themes.TM;
+
+  return React.createElement(
+    ThemeProvider,
+    { theme: selectedTheme },
+    includeGlobalStyles ? React.createElement(GlobalStyles) : null,
+    children
+  );
+};
+
+export default GdsProvider;

package/dist/index.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Accordion = require("./index2.cjs");
+const GdsProviderModule = require("./GdsProvider.cjs");
 const index = require("./index3.cjs");
 const index$1 = require("./index4.cjs");
 const index$2 = require("./index5.cjs");
@@ -646,6 +647,7 @@ exports.VenueSticker = VenueSticker.default;
 exports.WalletTicketStickerOnDark = WalletTicketStickerOnDark.default;
 exports.WalletTicketSticker = WalletTicketSticker.default;
 exports.getGlobalStyles = getGlobalStyles.default;
+exports.GdsProvider = GdsProviderModule.GdsProvider;
 exports.browserDefaultFocus = focus.browserDefaultFocus;
 exports.buttonreset = snippets.buttonreset;
 exports.inputReset = snippets.inputReset;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Accordion } from './components/Accordion/Accordion';
+export { GdsProvider, GdsProviderProps } from './GdsProvider';
 export { default as AlertBox } from './components/AlertBox';
 export { default as AlertBoxLegacy } from './components/AlertBoxLegacy';
 export { default as Badge } from './components/Badge';

package/dist/index.js

@@ -1,4 +1,5 @@
 import { default as default2 } from "./index2.js";
+import { GdsProvider } from "./GdsProvider.js";
 import { default as default3 } from "./index3.js";
 import { default as default4 } from "./index4.js";
 import { default as default5 } from "./index5.js";
@@ -1056,6 +1057,7 @@ export {
   elevation,
   fontSize,
   default115 as getGlobalStyles,
+  GdsProvider,
   grid,
   iconSize,
   inputReset,

package/dist/styles/index.css

@@ -0,0 +1 @@
+/* GDS uses styled-components - no standalone CSS needed */