@popsure/dirty-swan 0.64.0 → 0.65.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agent-documentation.md +35 -0
- package/package.json +3 -2
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# Design System Agent Documentation
|
|
2
|
+
|
|
3
|
+
This document describes how to use `@popsure/dirty-swan` to build accessible, responsive, and brand-consistent UIs. It is intended to be read by AI coding agents.
|
|
4
|
+
|
|
5
|
+
## Utility classes over custom SCSS
|
|
6
|
+
|
|
7
|
+
Use dirty-swan utility classes inline whenever possible. Only write custom SCSS modules for styling that cannot be achieved with utilities. Examples (non-exhaustive):
|
|
8
|
+
|
|
9
|
+
- **Spacing (8px increments)**: `mt8`, `p24`, `gap16`
|
|
10
|
+
- **Typography**: `p-h1` through `p-h4`, `p-p`, `p-p--small`, `p-a`, `p--serif`
|
|
11
|
+
- **Display**: `d-flex`, `d-none`, `d-grid`
|
|
12
|
+
- **Flexbox**: `ai-center`, `jc-between`, `fd-column`
|
|
13
|
+
- **Text color**: `tc-neutral-900`, `tc-purple-500`, `tc-red-500`
|
|
14
|
+
- **Background color**: `bg-neutral-50`, `bg-white`, `bg-purple-100`
|
|
15
|
+
- **Border radius**: `br8`, `br-circle`, `br-pill`
|
|
16
|
+
- **Box shadow**: `bs-sm`, `bs-md`, `bs-lg`
|
|
17
|
+
- **Width**: `w-auto`, `w50`, `w100`
|
|
18
|
+
- **Cursor**: `c-pointer`, `c-not-allowed`
|
|
19
|
+
|
|
20
|
+
## Native components and assets
|
|
21
|
+
|
|
22
|
+
- Always prefer dirty-swan components (e.g., `Button`, `Card`, `Input`, `CurrencyInput`, `Radio`, `BottomOrRegularModal`, `ComparisonTable`, `FullScreenModal`) over building custom equivalents.
|
|
23
|
+
- Import icons from `@popsure/dirty-swan` (e.g., `ChevronRightIcon`, `ArrowRightIcon`, `UserIcon`, `HeartIcon`, `ShieldIcon`) instead of adding custom assets, unless specifically requested.
|
|
24
|
+
|
|
25
|
+
## Responsive styling
|
|
26
|
+
|
|
27
|
+
Use dirty-swan SCSS mixins (`@include p-size-mobile`, `@include p-size-tablet`, `@include p-size-desktop`) in module files. Use the `useMediaQuery` hook for JS-based responsive logic.
|
|
28
|
+
|
|
29
|
+
## Hooks
|
|
30
|
+
|
|
31
|
+
The library exports hooks for common UI patterns. Examples: `useMediaQuery` for JS-based responsive logic, `useOnClickOutside` to detect clicks outside an element, `useEscapeKey` to handle escape key presses, and `useFocusWithin` to track focus entering or leaving an element. Check the library exports before writing custom hooks or writing complex logic around the UI.
|
|
32
|
+
|
|
33
|
+
## SCSS variables
|
|
34
|
+
|
|
35
|
+
Import grid/color variables via `@import '@popsure/dirty-swan/dist/grid'` and `@import '@popsure/dirty-swan/dist/colors'`. Access color tokens as `$ds-neutral-900`, `$ds-purple-300`, etc.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@popsure/dirty-swan",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.65.1",
|
|
4
4
|
"author": "Vincent Audoire <vincent@getpopsure.com>",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
"files": [
|
|
22
22
|
"dist",
|
|
23
23
|
"src",
|
|
24
|
-
"Readme.md"
|
|
24
|
+
"Readme.md",
|
|
25
|
+
"agent-documentation.md"
|
|
25
26
|
],
|
|
26
27
|
"dependencies": {
|
|
27
28
|
"@popsure/public-models": "^1.0.1",
|