@atlaskit/primitives 18.0.1 → 18.1.0

package/primitives.docs.tsx

@@ -0,0 +1,393 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'Anchor',
+		description: 'A primitive Anchor component for navigation links with compiled styling support.',
+		status: 'general-availability',
+		import: {
+			name: 'Anchor',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for navigation links to other pages or sections',
+			'Leverage compiled styling for performance',
+			'Use appropriate link styling and states',
+			'Consider link behavior and target attributes',
+		],
+		contentGuidelines: [
+			'Use clear, descriptive link text',
+			'Maintain consistent link styling',
+			'Consider link context and destination',
+		],
+		accessibilityGuidelines: [
+			'Provide clear link text that describes the destination',
+			'Use appropriate ARIA attributes for links',
+			'Ensure keyboard navigation support',
+			'Provide clear visual indicators for link state',
+			'Use descriptive link text for screen readers',
+		],
+		examples: [
+			{
+				name: 'Anchor',
+				description: 'Anchor example',
+				source: path.resolve(__dirname, './examples/ai/anchor.tsx'),
+			},
+		],
+		keywords: ['anchor', 'link', 'navigation', 'href', 'url', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+	{
+		name: 'Bleed',
+		description:
+			'A primitive Bleed component for extending content beyond container boundaries with compiled styling support.',
+		status: 'general-availability',
+		import: {
+			name: 'Bleed',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for extending content beyond container margins',
+			'Leverage compiled styling for performance',
+			'Use appropriate bleed directions and amounts',
+			'Consider responsive behavior and container constraints',
+		],
+		contentGuidelines: [
+			'Use for appropriate layout bleeding',
+			'Maintain consistent bleeding patterns',
+			'Consider content hierarchy and visual flow',
+		],
+		examples: [
+			{
+				name: 'Bleed',
+				description: 'Bleed example',
+				source: path.resolve(__dirname, './examples/ai/bleed.tsx'),
+			},
+		],
+		keywords: ['bleed', 'layout', 'margin', 'spacing', 'edge', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+	{
+		name: 'Box',
+		description:
+			'A primitive Box component for layout and container purposes with compiled styling support.',
+		status: 'general-availability',
+		import: {
+			name: 'Box',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for basic layout and container needs',
+			'Leverage compiled styling for performance',
+			'Use appropriate spacing and layout props',
+			'Consider semantic HTML when possible',
+		],
+		contentGuidelines: [
+			'Use for appropriate layout purposes',
+			'Maintain consistent spacing and layout patterns',
+			'Consider accessibility and semantic structure',
+		],
+		examples: [
+			{
+				name: 'Box',
+				description: 'Box example',
+				source: path.resolve(__dirname, './examples/ai/box.tsx'),
+			},
+		],
+		keywords: ['box', 'container', 'div', 'layout', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+	{
+		name: 'Flex',
+		description: 'A primitive Flex component for flexbox layout with compiled styling support.',
+		status: 'open-beta',
+		import: {
+			name: 'Flex',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for flexbox layout needs',
+			'Leverage compiled styling for performance',
+			'Use appropriate flex properties and alignment',
+			'Consider responsive behavior',
+		],
+		contentGuidelines: [
+			'Use for appropriate flex layout',
+			'Maintain consistent flex patterns',
+			'Consider content alignment and distribution',
+		],
+		examples: [
+			{
+				name: 'Flex',
+				description: 'Flex example',
+				source: path.resolve(__dirname, './examples/ai/flex.tsx'),
+			},
+		],
+		keywords: ['flex', 'layout', 'flexbox', 'alignment', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+	{
+		name: 'Focusable',
+		description:
+			'A primitive Focusable component for keyboard navigation and focus management with compiled styling support.',
+		status: 'general-availability',
+		import: {
+			name: 'Focusable',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for elements that need keyboard focus',
+			'Leverage compiled styling for performance',
+			'Use appropriate focus management',
+			'Consider keyboard navigation patterns',
+		],
+		contentGuidelines: [
+			'Use for appropriate focusable content',
+			'Maintain consistent focus patterns',
+			'Consider keyboard navigation flow',
+		],
+		accessibilityGuidelines: [
+			'Provide clear focus indicators',
+			'Use appropriate tab order and navigation',
+			'Ensure keyboard accessibility',
+			'Provide clear visual feedback for focus state',
+			'Use appropriate ARIA attributes',
+		],
+		examples: [
+			{
+				name: 'Focusable',
+				description: 'Focusable example',
+				source: path.resolve(__dirname, './examples/ai/focusable.tsx'),
+			},
+		],
+		keywords: [
+			'focusable',
+			'focus',
+			'keyboard',
+			'navigation',
+			'accessibility',
+			'primitive',
+			'compiled',
+		],
+		categories: ['primitive'],
+	},
+	{
+		name: 'Grid',
+		description: 'A primitive Grid component for CSS Grid layout with compiled styling support.',
+		status: 'open-beta',
+		import: {
+			name: 'Grid',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for CSS Grid layout needs',
+			'Leverage compiled styling for performance',
+			'Use appropriate grid properties and alignment',
+			'Consider responsive behavior',
+		],
+		contentGuidelines: [
+			'Use for appropriate grid layout',
+			'Maintain consistent grid patterns',
+			'Consider content alignment and distribution',
+		],
+		examples: [
+			{
+				name: 'Grid',
+				description: 'Grid example',
+				source: path.resolve(__dirname, './examples/ai/grid.tsx'),
+			},
+		],
+		keywords: ['grid', 'layout', 'css-grid', 'alignment', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+	{
+		name: 'Inline',
+		description: 'A primitive Inline component for horizontal layout with consistent spacing.',
+		status: 'general-availability',
+		import: {
+			name: 'Inline',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for horizontal layout needs',
+			'Leverage compiled styling for performance',
+			'Use appropriate spacing and alignment props',
+			'Consider wrapping behavior',
+		],
+		contentGuidelines: [
+			'Use for appropriate horizontal grouping',
+			'Maintain consistent spacing patterns',
+			'Consider content flow and readability',
+		],
+		examples: [
+			{
+				name: 'Inline',
+				description: 'Inline example',
+				source: path.resolve(__dirname, './examples/ai/inline.tsx'),
+			},
+		],
+		keywords: ['inline', 'layout', 'horizontal', 'spacing', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+	{
+		name: 'MetricText',
+		description: 'A primitive Text component for typography with compiled styling support.',
+		status: 'general-availability',
+		import: {
+			name: 'MetricText',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for text content with consistent typography',
+			'Leverage compiled styling for performance',
+			'Use appropriate font size and weight props',
+			'Consider semantic HTML elements',
+		],
+		contentGuidelines: [
+			'Use for appropriate text content',
+			'Maintain consistent typography patterns',
+			'Consider readability and hierarchy',
+		],
+		examples: [
+			{
+				name: 'Metric Text',
+				description: 'Metric Text example',
+				source: path.resolve(__dirname, './examples/ai/metric-text.tsx'),
+			},
+		],
+		keywords: ['text', 'typography', 'font', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+	{
+		name: 'Pressable',
+		description:
+			'A primitive Pressable component for handling touch and click interactions with compiled styling support.',
+		status: 'general-availability',
+		import: {
+			name: 'Pressable',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for interactive elements that need press feedback',
+			'Leverage compiled styling for performance',
+			'Use appropriate press states and feedback',
+			'Consider touch target accessibility',
+		],
+		contentGuidelines: [
+			'Use for appropriate interactive content',
+			'Maintain consistent press patterns',
+			'Consider user interaction expectations',
+		],
+		accessibilityGuidelines: [
+			'Provide clear visual feedback for press states',
+			'Ensure appropriate touch target sizes',
+			'Use appropriate ARIA attributes for interactive elements',
+			'Provide keyboard navigation support',
+		],
+		examples: [
+			{
+				name: 'Pressable',
+				description: 'Pressable example',
+				source: path.resolve(__dirname, './examples/ai/pressable.tsx'),
+			},
+		],
+		keywords: ['pressable', 'interaction', 'touch', 'click', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+	{
+		name: 'Stack',
+		description:
+			'A primitive Stack component for vertical and horizontal layout with consistent spacing.',
+		status: 'general-availability',
+		import: {
+			name: 'Stack',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for consistent vertical or horizontal layouts',
+			'Leverage compiled styling for performance',
+			'Use appropriate spacing and alignment props',
+			'Consider responsive behavior',
+		],
+		contentGuidelines: [
+			'Use for appropriate layout grouping',
+			'Maintain consistent spacing patterns',
+			'Consider content hierarchy and flow',
+		],
+		examples: [
+			{
+				name: 'Stack',
+				description: 'Stack example',
+				source: path.resolve(__dirname, './examples/ai/stack.tsx'),
+			},
+		],
+		keywords: ['stack', 'layout', 'vertical', 'horizontal', 'spacing', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+	{
+		name: 'Text',
+		description: 'A primitive Text component for typography with compiled styling support.',
+		status: 'general-availability',
+		import: {
+			name: 'Text',
+			package: '@atlaskit/primitives/compiled',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for text content with consistent typography',
+			'Leverage compiled styling for performance',
+			'Use appropriate font size and weight props',
+			'Consider semantic HTML elements',
+		],
+		contentGuidelines: [
+			'Use for appropriate text content',
+			'Maintain consistent typography patterns',
+			'Consider readability and hierarchy',
+		],
+		examples: [
+			{
+				name: 'Text',
+				description: 'Text example',
+				source: path.resolve(__dirname, './examples/ai/text.tsx'),
+			},
+		],
+		keywords: ['text', 'typography', 'font', 'primitive', 'compiled'],
+		categories: ['primitive'],
+	},
+];
+
+export default documentation;

package/responsive/build-media-query-css/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/responsive/build-media-query-css",
+  "main": "../../dist/cjs/entry-points/responsive-build-media-query-css.js",
+  "module": "../../dist/esm/entry-points/responsive-build-media-query-css.js",
+  "module:es2019": "../../dist/es2019/entry-points/responsive-build-media-query-css.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/responsive-build-media-query-css.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/responsive-build-media-query-css.d.ts"
+      ]
+    }
+  }
+}

package/responsive/constants/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/responsive/constants",
+  "main": "../../dist/cjs/entry-points/responsive-constants.js",
+  "module": "../../dist/esm/entry-points/responsive-constants.js",
+  "module:es2019": "../../dist/es2019/entry-points/responsive-constants.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/responsive-constants.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/responsive-constants.d.ts"
+      ]
+    }
+  }
+}

package/responsive/hide/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/responsive/hide",
+  "main": "../../dist/cjs/entry-points/responsive-hide.js",
+  "module": "../../dist/esm/entry-points/responsive-hide.js",
+  "module:es2019": "../../dist/es2019/entry-points/responsive-hide.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/responsive-hide.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/responsive-hide.d.ts"
+      ]
+    }
+  }
+}

package/responsive/media-helper/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/responsive/media-helper",
+  "main": "../../dist/cjs/entry-points/responsive-media-helper.js",
+  "module": "../../dist/esm/entry-points/responsive-media-helper.js",
+  "module:es2019": "../../dist/es2019/entry-points/responsive-media-helper.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/responsive-media-helper.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/responsive-media-helper.d.ts"
+      ]
+    }
+  }
+}

package/responsive/show/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/responsive/show",
+  "main": "../../dist/cjs/entry-points/responsive-show.js",
+  "module": "../../dist/esm/entry-points/responsive-show.js",
+  "module:es2019": "../../dist/es2019/entry-points/responsive-show.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/responsive-show.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/responsive-show.d.ts"
+      ]
+    }
+  }
+}

package/responsive/types/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/responsive/types",
+  "main": "../../dist/cjs/entry-points/responsive-types.js",
+  "module": "../../dist/esm/entry-points/responsive-types.js",
+  "module:es2019": "../../dist/es2019/entry-points/responsive-types.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/responsive-types.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/responsive-types.d.ts"
+      ]
+    }
+  }
+}

package/responsive/use-media-query/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/responsive/use-media-query",
+  "main": "../../dist/cjs/entry-points/responsive-use-media-query.js",
+  "module": "../../dist/esm/entry-points/responsive-use-media-query.js",
+  "module:es2019": "../../dist/es2019/entry-points/responsive-use-media-query.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/responsive-use-media-query.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/responsive-use-media-query.d.ts"
+      ]
+    }
+  }
+}

package/scripts/color-codegen-template.tsx

@@ -20,14 +20,14 @@ const tokenStyles = {
 		objectName: 'textColor',
 		prefix: 'color.text.',
 		cssProperty: 'color',
-		filterFn: <T extends Token>(t: T) =>
+		filterFn: <T extends Token>(t: T): boolean =>
 			t.token.startsWith(tokenStyles.text.prefix) || t.token.startsWith('color.link'),
 	},
 	background: {
 		objectName: 'backgroundColor',
 		prefix: 'color.background.',
 		cssProperty: 'backgroundColor',
-		filterFn: <T extends Token>(t: T) =>
+		filterFn: <T extends Token>(t: T): boolean =>
 			t.token.startsWith(tokenStyles.background.prefix) ||
 			t.token.startsWith('elevation.surface') ||
 			t.token.startsWith('utility.elevation.surface') ||
@@ -38,13 +38,13 @@ const tokenStyles = {
 		objectName: 'borderColor',
 		prefix: 'color.border.',
 		cssProperty: 'borderColor',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.border.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(tokenStyles.border.prefix),
 	},
 	fill: {
 		objectName: 'fill',
 		prefix: 'color.icon.',
 		cssProperty: 'fill',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.fill.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(tokenStyles.fill.prefix),
 	},
 } as const;
 

package/scripts/elevation-codegen-template.tsx

@@ -16,24 +16,43 @@ type Token = {
 };
 
 // NB: Fallback CSS variables can be deleted when tokens are no longer behind a feature flag
-const tokenStyles = {
+const tokenStyles: {
+	readonly opacity: {
+		readonly objectName: 'opacity';
+		readonly prefix: 'opacity.';
+		readonly cssProperty: 'opacity';
+		readonly filterFn: <T extends Token>(t: T) => boolean;
+	};
+	readonly shadow: {
+		readonly objectName: 'shadow';
+		readonly prefix: 'elevation.shadow.';
+		readonly cssProperty: 'boxShadow';
+		readonly filterFn: <T extends Token>(t: T) => boolean;
+	};
+	readonly surface: {
+		readonly objectName: 'surfaceColor';
+		readonly prefix: 'elevation.surface.';
+		readonly cssProperty: '--ds-elevation-surface-current';
+		readonly filterFn: <T extends Token>(t: T) => boolean;
+	};
+} = {
 	opacity: {
 		objectName: 'opacity',
 		prefix: 'opacity.',
 		cssProperty: 'opacity',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.opacity.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(tokenStyles.opacity.prefix),
 	},
 	shadow: {
 		objectName: 'shadow',
 		prefix: 'elevation.shadow.',
 		cssProperty: 'boxShadow',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.shadow.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(tokenStyles.shadow.prefix),
 	},
 	surface: {
 		objectName: 'surfaceColor',
 		prefix: 'elevation.surface.',
 		cssProperty: CURRENT_SURFACE_CSS_VAR,
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.surface.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(tokenStyles.surface.prefix),
 	},
 } as const;
 

package/scripts/shape-codegen-template.tsx

@@ -14,14 +14,15 @@ const tokenStyles = {
 		objectName: 'borderWidth',
 		filterPrefix: 'border.width',
 		cssProperty: 'borderWidth',
-		filterFn: <T extends Token>(t: T) =>
+		filterFn: <T extends Token>(t: T): boolean =>
 			t.token.startsWith(tokenStyles.width.filterPrefix) && !t.isDeprecated,
 	},
 	radius: {
 		objectName: 'borderRadius',
 		filterPrefix: 'radius',
 		cssProperty: 'borderRadius',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.radius.filterPrefix),
+		filterFn: <T extends Token>(t: T): boolean =>
+			t.token.startsWith(tokenStyles.radius.filterPrefix),
 	},
 } as const;
 

package/stack/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@atlaskit/primitives/stack",
-  "main": "../dist/cjs/components/stack.js",
-  "module": "../dist/esm/components/stack.js",
-  "module:es2019": "../dist/es2019/components/stack.js",
+  "main": "../dist/cjs/entry-points/stack.js",
+  "module": "../dist/esm/entry-points/stack.js",
+  "module:es2019": "../dist/es2019/entry-points/stack.js",
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/components/stack.d.ts",
+  "types": "../dist/types/entry-points/stack.d.ts",
   "typesVersions": {
     ">=4.5 <5.9": {
       "*": [
-        "../dist/types-ts4.5/components/stack.d.ts"
+        "../dist/types-ts4.5/entry-points/stack.d.ts"
       ]
     }
   }

package/surface-provider/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/surface-provider",
+  "main": "../dist/cjs/entry-points/surface-provider.js",
+  "module": "../dist/esm/entry-points/surface-provider.js",
+  "module:es2019": "../dist/es2019/entry-points/surface-provider.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/surface-provider.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/surface-provider.d.ts"
+      ]
+    }
+  }
+}