@atlaskit/primitives

[ { "name": "Anchor", "package": "@atlaskit/primitives", "import": { "name": "Anchor", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["anchor", "link", "navigation", "href", "url", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Anchor component for navigation links with compiled styling support.", "status": "general-availability", "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" ], "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" ], "examples": ["./examples/ai/anchor.tsx"] }, { "name": "Bleed", "package": "@atlaskit/primitives", "import": { "name": "Bleed", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["bleed", "layout", "margin", "spacing", "edge", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Bleed component for extending content beyond container boundaries with compiled styling support.", "status": "general-availability", "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": ["./examples/ai/bleed.tsx"] }, { "name": "Box", "package": "@atlaskit/primitives", "import": { "name": "Box", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["box", "container", "div", "layout", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Box component for layout and container purposes with compiled styling support.", "status": "general-availability", "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": ["./examples/ai/box.tsx"] }, { "name": "Flex", "package": "@atlaskit/primitives", "import": { "name": "Flex", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["flex", "layout", "flexbox", "alignment", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Flex component for flexbox layout with compiled styling support.", "status": "general-availability", "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": ["./examples/ai/flex.tsx"] }, { "name": "Focusable", "package": "@atlaskit/primitives", "import": { "name": "Focusable", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["focusable", "focus", "keyboard", "navigation", "accessibility", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Focusable component for keyboard navigation and focus management with compiled styling support.", "status": "general-availability", "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" ], "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" ], "examples": ["./examples/ai/focusable.tsx"] }, { "name": "Grid", "package": "@atlaskit/primitives", "import": { "name": "Grid", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["grid", "layout", "css-grid", "alignment", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Grid component for CSS Grid layout with compiled styling support.", "status": "general-availability", "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": ["./examples/ai/grid.tsx"] }, { "name": "Inline", "package": "@atlaskit/primitives", "import": { "name": "Inline", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["inline", "layout", "horizontal", "spacing", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Inline component for horizontal layout with consistent spacing.", "status": "general-availability", "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": ["./examples/ai/inline.tsx"] }, { "name": "MetricText", "package": "@atlaskit/primitives", "import": { "name": "MetricText", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["text", "typography", "font", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Text component for typography with compiled styling support.", "status": "general-availability", "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": ["./examples/ai/metric-text.tsx"] }, { "name": "Pressable", "package": "@atlaskit/primitives", "import": { "name": "Pressable", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["pressable", "interaction", "touch", "click", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Pressable component for handling touch and click interactions with compiled styling support.", "status": "general-availability", "accessibilityGuidelines": [ "Provide clear visual feedback for press states", "Ensure appropriate touch target sizes", "Use appropriate ARIA attributes for interactive elements", "Provide keyboard navigation support" ], "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" ], "examples": ["./examples/ai/pressable.tsx"] }, { "name": "Stack", "package": "@atlaskit/primitives", "import": { "name": "Stack", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["stack", "layout", "vertical", "horizontal", "spacing", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Stack component for vertical and horizontal layout with consistent spacing.", "status": "general-availability", "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": ["./examples/ai/stack.tsx"] }, { "name": "Text", "package": "@atlaskit/primitives", "import": { "name": "Text", "package": "@atlaskit/primitives/compiled", "type": "named" }, "keywords": ["text", "typography", "font", "primitive", "compiled"], "categories": ["primitive"], "shortDescription": "A primitive Text component for typography with compiled styling support.", "status": "general-availability", "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" ], "generativeInstructions": "./docs/ai/text-instructions.md", "examples": ["./examples/ai/text.tsx"] } ]