@jamesodwyer/gds-figma-vite 1.0.0

package/.claude/settings.local.json

@@ -0,0 +1,21 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:developers.figma.com)",
+      "Bash(find:*)",
+      "Bash(cat:*)",
+      "Bash(npm install:*)",
+      "Bash(npm uninstall:*)",
+      "Bash(npm run build:*)",
+      "Bash(timeout 30 npm run storybook:*)",
+      "WebSearch",
+      "Bash(npm run lint)",
+      "Bash(npm whoami:*)",
+      "Bash(npm publish:*)"
+    ]
+  },
+  "enableAllProjectMcpServers": true,
+  "enabledMcpjsonServers": [
+    "eslint"
+  ]
+}

package/.husky/pre-commit

@@ -0,0 +1 @@
+lint-staged

package/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "eslint": {
+      "command": "npx",
+      "args": ["@eslint/mcp@latest"]
+    }
+  }
+}

package/.nvmrc

@@ -0,0 +1 @@
+24.11.1

package/.stylelintrc.json

@@ -0,0 +1,320 @@
+{
+  "extends": ["stylelint-config-recommended"],
+  "plugins": ["stylelint-order", "stylelint-plugin-logical-css"],
+  "customSyntax": "postcss-styled-syntax",
+  "rules": {
+    "media-query-no-invalid": null,
+    "no-empty-source": null,
+    "string-no-newline": null,
+    "nesting-selector-no-missing-scoping-root": null,
+    "selector-type-no-unknown": [
+      true,
+      {
+        "ignoreTypes": ["/\\$dummyValue/"]
+      }
+    ],
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": ["/\\$dummyValue/"]
+      }
+    ],
+    "plugin/use-logical-properties-and-values": [
+      true,
+      {
+        "severity": "error",
+        "ignore": [
+          "width",
+          "min-width",
+          "max-width",
+          "height",
+          "min-height",
+          "max-height",
+
+          "border-top",
+          "border-top-color",
+          "border-top-style",
+          "border-top-width",
+          "border-bottom",
+          "border-bottom-color",
+          "border-bottom-style",
+          "border-bottom-width",
+
+          "margin-top",
+          "margin-bottom",
+          "padding-top",
+          "padding-bottom",
+          "top",
+          "bottom",
+
+          "overflow-y",
+          "resize",
+
+          "scroll-margin-top",
+          "scroll-margin-bottom",
+          "scroll-padding-top",
+          "scroll-padding-bottom"
+        ]
+      }
+    ],
+    "order/properties-order": [
+      {
+        "groupName": "Special",
+        "properties": ["composes", "@import", "@extend", "@mixin", "@at-root"]
+      },
+      {
+        "groupName": "Positioning",
+        "properties": ["position", "top", "right", "bottom", "left", "z-index"]
+      },
+      {
+        "groupName": "BoxModel",
+        "properties": [
+          "display",
+          "flex",
+          "flex-basis",
+          "flex-direction",
+          "flex-flow",
+          "flex-grow",
+          "flex-shrink",
+          "flex-wrap",
+          "grid",
+          "grid-area",
+          "grid-auto-rows",
+          "grid-auto-columns",
+          "grid-auto-flow",
+          "grid-gap",
+          "grid-row",
+          "grid-row-start",
+          "grid-row-end",
+          "grid-row-gap",
+          "grid-column",
+          "grid-column-start",
+          "grid-column-end",
+          "grid-column-gap",
+          "grid-template",
+          "grid-template-areas",
+          "grid-template-rows",
+          "grid-template-columns",
+          "gap",
+          "align-content",
+          "align-items",
+          "align-self",
+          "justify-content",
+          "justify-items",
+          "justify-self",
+          "order",
+          "float",
+          "clear",
+          "box-sizing",
+          "width",
+          "min-width",
+          "max-width",
+          "height",
+          "min-height",
+          "max-height",
+          "margin",
+          "margin-top",
+          "margin-right",
+          "margin-bottom",
+          "margin-left",
+          "padding",
+          "padding-top",
+          "padding-right",
+          "padding-bottom",
+          "padding-left",
+          "border",
+          "border-color",
+          "border-style",
+          "border-width",
+          "border-top",
+          "border-top-color",
+          "border-top-width",
+          "border-top-style",
+          "border-right",
+          "border-right-color",
+          "border-right-width",
+          "border-right-style",
+          "border-bottom",
+          "border-bottom-color",
+          "border-bottom-width",
+          "border-bottom-style",
+          "border-left",
+          "border-left-color",
+          "border-left-width",
+          "border-left-style",
+          "border-radius",
+          "border-top-left-radius",
+          "border-top-right-radius",
+          "border-bottom-right-radius",
+          "border-bottom-left-radius",
+          "border-image",
+          "border-image-source",
+          "border-image-slice",
+          "border-image-width",
+          "border-image-outset",
+          "border-image-repeat",
+          "border-collapse",
+          "border-spacing",
+          "object-fit",
+          "object-position",
+          "overflow",
+          "overflow-x",
+          "overflow-y"
+        ]
+      },
+      {
+        "groupName": "Typography",
+        "properties": [
+          "color",
+          "font",
+          "font-weight",
+          "font-size",
+          "font-family",
+          "font-style",
+          "font-variant",
+          "font-size-adjust",
+          "font-stretch",
+          "font-effect",
+          "font-emphasize",
+          "font-emphasize-position",
+          "font-emphasize-style",
+          "font-smooth",
+          "line-height",
+          "direction",
+          "letter-spacing",
+          "white-space",
+          "text-align",
+          "text-align-last",
+          "text-transform",
+          "text-decoration",
+          "text-emphasis",
+          "text-emphasis-color",
+          "text-emphasis-style",
+          "text-emphasis-position",
+          "text-indent",
+          "text-justify",
+          "text-outline",
+          "text-wrap",
+          "text-overflow",
+          "text-overflow-ellipsis",
+          "text-overflow-mode",
+          "text-orientation",
+          "text-shadow",
+          "vertical-align",
+          "word-wrap",
+          "word-break",
+          "word-spacing",
+          "overflow-wrap",
+          "tab-size",
+          "hyphens",
+          "unicode-bidi",
+          "columns",
+          "column-count",
+          "column-fill",
+          "column-gap",
+          "column-rule",
+          "column-rule-color",
+          "column-rule-style",
+          "column-rule-width",
+          "column-span",
+          "column-width",
+          "page-break-after",
+          "page-break-before",
+          "page-break-inside",
+          "src"
+        ]
+      },
+      {
+        "groupName": "Visual",
+        "properties": [
+          "list-style",
+          "list-style-position",
+          "list-style-type",
+          "list-style-image",
+          "table-layout",
+          "empty-cells",
+          "caption-side",
+          "background",
+          "background-color",
+          "background-image",
+          "background-repeat",
+          "background-position",
+          "background-position-x",
+          "background-position-y",
+          "background-size",
+          "background-clip",
+          "background-origin",
+          "background-attachment",
+          "background-blend-mode",
+          "outline",
+          "outline-width",
+          "outline-style",
+          "outline-color",
+          "outline-offset",
+          "box-shadow",
+          "box-decoration-break",
+          "transform",
+          "transform-origin",
+          "transform-style",
+          "backface-visibility",
+          "perspective",
+          "perspective-origin",
+          "visibility",
+          "cursor",
+          "opacity",
+          "filter",
+          "isolation",
+          "backdrop-filter",
+          "mix-blend-mode"
+        ]
+      },
+      {
+        "groupName": "Animation",
+        "properties": [
+          "transition",
+          "transition-delay",
+          "transition-timing-function",
+          "transition-duration",
+          "transition-property",
+          "animation",
+          "animation-name",
+          "animation-duration",
+          "animation-play-state",
+          "animation-timing-function",
+          "animation-delay",
+          "animation-iteration-count",
+          "animation-direction",
+          "animation-fill-mode"
+        ]
+      },
+      {
+        "groupName": "Misc",
+        "properties": [
+          "appearance",
+          "content",
+          "clip",
+          "clip-path",
+          "counter-reset",
+          "counter-increment",
+          "resize",
+          "user-select",
+          "nav-index",
+          "nav-up",
+          "nav-right",
+          "nav-down",
+          "nav-left",
+          "pointer-events",
+          "quotes",
+          "touch-action",
+          "will-change",
+          "zoom",
+          "fill",
+          "fill-rule",
+          "clip-rule",
+          "stroke"
+        ]
+      }
+    ]
+  },
+  "ignoreFiles": ["dist/**", "lib/**", "public/**"]
+}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "biome.enabled": false
+}

package/CLAUDE.md

@@ -0,0 +1,79 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Overview
+
+This is the Ticketmaster Global Design System (GDS) - a shared React component library built with styled-components. It provides reusable UI components, icons, stickers, and theming utilities for Ticketmaster applications.
+
+## Common Commands
+
+```bash
+npm start                    # Start Storybook development server (port 6060)
+npm test                     # Run all Jest tests
+npm run test:watch           # Run tests in watch mode
+npm run lint                 # Run all linters (ESLint + Stylelint)
+npm run typecheck            # TypeScript type checking
+npm run build                # Build both CJS (lib/) and ESM (dist/) outputs
+npm run build:icons          # Regenerate icon components from SVGs
+npm run build:stickers       # Regenerate sticker components from SVGs
+npm run build:flags          # Regenerate flag icon components from SVGs
+```
+
+**ICCP Integration** (for testing changes in ICCP locally):
+```bash
+export ICCP_HOME=/path/to/iccp
+npm run build:iccp:watch     # Watch mode that outputs directly to ICCP node_modules
+```
+
+## Architecture
+
+### Build System
+- **Babel** handles transpilation (not TypeScript compiler)
+- **TypeScript** only generates `.d.ts` declaration files (`emitDeclarationOnly: true`)
+- Dual output: CJS in `lib/` and ESM in `dist/`
+
+### Theming
+Two brand themes available: `TM` (Ticketmaster) and `LN` (Live Nation), exported from `src/themes/`. Each theme defines:
+- Color palette (neptune, cosmos, spotlight, etc.)
+- Spacing scale (venue-based naming: lounge, club, hall, arena, stadium, dome, field)
+- Font size scale (metric-based naming: centi, uno, hecto, kilo, mega, giga, tera, peta, exa)
+- Button, header, footer, and link styling
+- Gradients (mrBlueSky, justLikeAPill, ticketFoil)
+
+### Component Structure
+Components live in `src/components/{ComponentName}/` with:
+- `{ComponentName}.tsx` or `index.tsx` - main component
+- `__stories__/` - Storybook stories
+- `__test__/` - Jest tests
+
+### Adding New Components
+```bash
+node scripts/add-new-component.js ComponentName
+```
+This copies from `src/components/NewComponentTemplate/` and adds the export to `src/index.ts`.
+
+### Icon System
+Three icon types with different build pipelines:
+- **Themeable icons** (`src/icons/`): Built via `pixo` from `src/svg/with-themes/src/`, support theme colors
+- **Colored icons** (`src/icons-with-colours/`): Built via `@svgr/cli` from `src/svg/with-colours/src/`, retain original colors
+- **Flag icons** (`src/flag-icons/`): Country flags built via `@svgr/cli`
+
+### Key Exports
+- Components (Button, Modal, Accordion, etc.)
+- Icons and stickers
+- Themes (`TM`, `LN`)
+- Dimension utilities (`spacing`, `fontSize`, `media`, `breakpoints`, `elevation`)
+- Color utilities (`dark`, `muted`, `light`, `weak`, `barely`)
+- CSS snippets (`buttonreset`, `inputReset`, `visuallyhidden`, `truncatetext`)
+
+## Pre-commit Hooks
+Husky runs lint-staged on commit, which executes:
+- TypeScript type checking
+- Prettier formatting
+- ESLint fixes
+- Stylelint
+- Jest for related tests
+
+## Node Version
+Requires Node 24.11.1 (enforced via `.nvmrc` and `check-node-version`).

package/README.md

@@ -0,0 +1,17 @@
+# Global Design System Component Library
+
+View the latest build of the GDS documentation site at: <http://global-design-system.git.tmaws.io/gds>
+
+## Contributing
+
+### Icons
+
+View the instructions on adding new icons at: <http://global-design-system.git.tmaws.io/gds/?path=/docs/icons--docs#adding-new-themeable-icons>
+
+## Storybook
+
+Start Storybook locally to preview your components:
+
+```bash
+npm start
+```

package/babel.config.js

@@ -0,0 +1,15 @@
+const { BABEL_ENV, NODE_ENV } = process.env;
+const cjs = BABEL_ENV === "cjs" || NODE_ENV === "test";
+
+module.exports = {
+  presets: [
+    ["@babel/env", { modules: cjs ? "auto" : false }],
+    "@babel/react",
+    "@babel/preset-typescript",
+  ],
+  plugins: [
+    ["@babel/transform-runtime", { useESModules: !cjs }],
+    "babel-plugin-styled-components",
+    cjs && "add-module-exports",
+  ].filter(Boolean),
+};

package/dist/colors/constants.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '../themes/types';
+export declare const mainHeader: ({ theme }: {
+    theme: Theme;
+}) => import('styled-components').FlattenSimpleInterpolation;

package/dist/colors/gradients.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '../themes/types';
+type Props = {
+    theme: Theme;
+};
+export declare const getGradient: (key: keyof NonNullable<Theme["gradients"]>, fallback: string) => ({ theme }: Props) => string | import('polished/lib/types/style').Styles;
+export declare const oldGreyWhistleTest: ({ theme }: Props) => import('styled-components').FlattenSimpleInterpolation;
+export declare const justLikeAPill: (angle?: string) => ({ theme }: Props) => ({ theme }?: Partial<Props>) => import('styled-components').FlattenSimpleInterpolation | import('polished/lib/types/style').Styles;
+export declare const mrBlueSky: (angle?: string) => ({ theme }: Props) => ({ theme }?: Partial<Props>) => import('styled-components').FlattenSimpleInterpolation | import('polished/lib/types/style').Styles;
+export declare const ticketFoil: ({ theme }: Props) => ({ theme }?: Partial<Props>) => import('styled-components').FlattenSimpleInterpolation | import('polished/lib/types/style').Styles;
+export {};

package/dist/colors/index.d.ts

@@ -0,0 +1,4 @@
+export { justLikeAPill, mrBlueSky, oldGreyWhistleTest, ticketFoil, } from './gradients';
+export { mainHeader } from './constants';
+export { dark, darker, muted, light, weak, weaker, weakest, barely, } from './modifiers';
+export { rgbToHex, hexToRgb, isColorDark } from './parsers';

package/dist/colors/modifiers.d.ts

@@ -0,0 +1,8 @@
+export declare const dark: (colour: string) => string;
+export declare const darker: (colour: string) => string;
+export declare const muted: (colour: string) => string;
+export declare const light: (colour: string) => string;
+export declare const weak: (colour: string) => string;
+export declare const weaker: (colour: string) => string;
+export declare const weakest: (colour: string) => string;
+export declare const barely: (colour: string) => string;

package/dist/colors/parsers.d.ts

@@ -0,0 +1,15 @@
+export declare const rgbToHex: (red: number, green: number, blue: number) => string;
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Returns true if the color is dark,
+ * so you can add a light text on top
+ */
+export declare const isColorDark: (color: string | {
+    r: number;
+    g: number;
+    b: number;
+}) => boolean;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,44 @@
+import { default as React, ReactElement } from 'react';
+import { AccordionType } from './types';
+type AccordionProps = {
+    children: React.ReactElement | React.ReactElement[];
+    /**
+     * The opening type of Accordion
+     * single: Only one accordion item can be opened at a time.
+     * multi: Multiple accordion items can be opened at a time.
+     *
+     * @default `single`
+     */
+    type?: AccordionType;
+    showTopBorder?: boolean;
+    showBottomBorder?: boolean;
+};
+declare const Accordion: {
+    ({ type, children, showBottomBorder, showTopBorder, }: AccordionProps): React.JSX.Element;
+    Item: ({ children, id }: AccordionItemProps) => React.JSX.Element;
+    Header: ({ leadingIcon, children, maxContentWidth, onClick, }: {
+        leadingIcon?: React.ReactElement;
+        children: React.ReactNode;
+        maxContentWidth?: string;
+        onClick?: () => void;
+    }) => React.JSX.Element;
+    Panel: ({ children, maxContentWidth, }: {
+        children: React.ReactNode;
+        maxContentWidth?: string;
+    }) => React.JSX.Element;
+};
+type AccordionItemProps = {
+    children: ReactElement[];
+    /**
+     * Indicates whether the accordion item is open by default.
+     *
+     * @default `false`
+     */
+    defaultOpen?: boolean;
+    /**
+     * Optional unique identifier for the accordion item.
+     * If not provided, a generated id will be used.
+     */
+    id?: string;
+};
+export default Accordion;

package/dist/components/Accordion/AccordionContext.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { AccordionType } from './types';
+type AccordionContext = {
+    toggle: (id: string) => void;
+    openIds: Set<string>;
+};
+export declare const AccordionContext: React.Context<AccordionContext | undefined>;
+export declare const AccordionProvider: ({ type, children, defaultOpenIds, }: {
+    type: AccordionType;
+    children: React.ReactElement;
+    defaultOpenIds: string[];
+}) => React.JSX.Element;
+export declare function useAccordionContext(): AccordionContext;
+export {};

package/dist/components/Accordion/AccordionItemContext.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+type AccordionItemContext = {
+    id: string;
+    isOpen: boolean;
+};
+export declare const AccordionItemContext: React.Context<AccordionItemContext | undefined>;
+export declare const AccordionItemProvider: ({ id, children, }: {
+    id: string;
+    children: React.ReactElement;
+}) => React.JSX.Element;
+export declare function useAccordionItemContext(): AccordionItemContext;
+export {};

package/dist/components/Accordion/types.d.ts

@@ -0,0 +1 @@
+export type AccordionType = "single" | "multi";

package/dist/components/AlertBox/index.d.ts

@@ -0,0 +1,14 @@
+import { default as React, ComponentPropsWithoutRef } from 'react';
+type Variant = "info" | "success" | "warning" | "danger" | "error";
+type AriaRole = "status" | "alert" | "log";
+export type Props = {
+    title: React.ReactNode;
+    variant?: Variant;
+    nested?: boolean;
+    children?: React.ReactNode;
+    ariaLabelledById?: string;
+    ariaDescribedById?: string;
+    role?: AriaRole;
+} & Omit<ComponentPropsWithoutRef<"div">, "role" | "title">;
+declare const AlertBox: ({ title, variant, nested, children, ariaLabelledById, ariaDescribedById, role, ...rest }: Props) => React.JSX.Element;
+export default AlertBox;

package/dist/components/AlertBoxLegacy/index.d.ts

@@ -0,0 +1,17 @@
+import { default as React, ComponentPropsWithoutRef } from 'react';
+type Props = {
+    variant?: "info" | "success" | "warning" | "danger";
+    size?: "moderate" | "normal";
+    title: React.ReactNode;
+    children?: React.ReactNode;
+    dismissable?: {
+        onDismiss: () => void;
+        dismissLabel: string;
+        dismissRef?: React.Ref<HTMLButtonElement>;
+    };
+    ariaLabelledById?: string;
+    ariaDescribedById?: string;
+} & ComponentPropsWithoutRef<"div">;
+/** @deprecated in favour of AlertBox */
+declare const AlertBoxLegacy: ({ variant, size, title, children, dismissable: { onDismiss, dismissLabel, dismissRef }, ariaLabelledById, ariaDescribedById, ...rest }: Props) => React.JSX.Element;
+export default AlertBoxLegacy;

package/dist/components/AlertBoxLegacy/index.styles.d.ts

@@ -0,0 +1,38 @@
+import { spacing } from '../../dimensions';
+export declare const Item: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {}, never>;
+declare const variants: {
+    info: import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<import('styled-components').DefaultTheme>>;
+    success: import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<import('styled-components').DefaultTheme>>;
+    warning: import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<import('styled-components').DefaultTheme>>;
+    danger: import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<import('styled-components').DefaultTheme>>;
+};
+export declare const TitleWrapper: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {
+    $variant: keyof typeof variants;
+    $size: keyof typeof spacing;
+    $isTitleOnly?: boolean;
+}, never>;
+export declare const Title: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {}, never>;
+export declare const InfoICircledFilled: import('styled-components').StyledComponent<({ size, rotate, css, fillColor, ...rest }: {
+    size?: string | number;
+    rotate?: string | number;
+    css?: import('styled-components').CSSProp;
+    fillColor?: string;
+} & Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element, import('styled-components').DefaultTheme, {}, never>;
+export declare const ExclamationMarkCircledFilled: import('styled-components').StyledComponent<({ size, rotate, css, fillColor, ...rest }: {
+    size?: string | number;
+    rotate?: string | number;
+    css?: import('styled-components').CSSProp;
+    fillColor?: string;
+} & Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element, import('styled-components').DefaultTheme, {}, never>;
+export declare const CheckmarkCircledFilled: import('styled-components').StyledComponent<({ size, rotate, css, fillColor, ...rest }: {
+    size?: string | number;
+    rotate?: string | number;
+    css?: import('styled-components').CSSProp;
+    fillColor?: string;
+} & Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element, import('styled-components').DefaultTheme, {}, never>;
+export declare const DismissButton: import('styled-components').StyledComponent<"button", import('styled-components').DefaultTheme, {}, never>;
+export declare const DismissA11yLabel: import('styled-components').StyledComponent<"span", import('styled-components').DefaultTheme, {}, never>;
+export declare const Message: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {
+    $size: keyof typeof spacing;
+}, never>;
+export {};