A design system in a box.
hip-ui.tngl.io/docs/introduction
breadcrumbs
+333
-15
+5
-3
.cursor/rules/hip-component.mdc
+5
-3
.cursor/rules/hip-component.mdc
···
2
2
alwaysApply: false
3
3
---
4
4
5
+
You are an expert design system engineer who is well versed in both https://stylexjs.com/ and https://react-spectrum.adobe.com/react-aria/getting-started.html. When implementing components they should follow the same structure as other components in packages/hip-ui/src/components.
6
+
5
7
To create a new hip component follow these steps:
6
8
7
9
1. First ask if there is some docs for a headless component to look at
8
10
2. create a component in packages/hip-ui/src/components
9
11
3. Create a config for that component
10
-
4. Write it's config in the new component's dir
12
+
4. Write its config in the new component's dir
11
13
5. Add the config to packages/hip-ui/src/cli/install
12
14
6. Run the build
13
15
7. Run `pnpm hip install --all` in the apps/docs dir
···
15
17
16
18
## Rules
17
19
18
-
- Prefer using packages/hip-ui/src/components/flex and packages/hip-ui/src/components/grid over css
20
+
- Prefer using packages/hip-ui/src/components/flex and packages/hip-ui/src/components/grid over css for things layout related
19
21
- Use icon from lucide-react
20
-
- Prefer re-using existing component rather than redefining them inside each component
22
+
- Prefer re-using existing component rather than redefining them
+9
-4
README.md
+9
-4
README.md
···
20
20
- [ ] Alert / Callout
21
21
- [ ] Carousel
22
22
- [ ] Empty
23
-
- [ ] Input Group
24
23
- [ ] Input OTP
25
24
- [ ] Resizable
26
25
- [ ] Skeleton
···
36
35
- [ ] Drawer
37
36
- [ ] Sheet
38
37
39
-
- [ ] Breadcrumb
40
38
- [ ] Disclosure
41
39
- [ ] Disclosure Group
42
-
- [ ] Field
43
40
- [ ] Form
44
41
- [ ] Grid List
45
-
- [ ] Item
46
42
- [ ] Menubar
47
43
- [ ] Navigation Menu
48
44
- [ ] Spinner
···
50
46
- [ ] Toolbar
51
47
- [ ] Toast
52
48
49
+
### Maybe
50
+
51
+
- [ ] Field
52
+
- [ ] Item
53
+
54
+
### Done
55
+
56
+
- [x] Input Group
57
+
- [x] Breadcrumb
53
58
- [x] Range Date Picker
54
59
- [x] Date Picker
55
60
- [x] Calendar
+14
-4
apps/docs/src/components/link/index.tsx
+14
-4
apps/docs/src/components/link/index.tsx
···
5
5
Link as AriaLink,
6
6
} from "react-aria-components";
7
7
8
-
import { primaryColor } from "../theme/semantic-color.stylex";
8
+
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
9
+
import { spacing } from "../theme/spacing.stylex";
9
10
import { StyleXComponentProps } from "../theme/types";
10
11
import { fontFamily, fontWeight } from "../theme/typography.stylex";
11
12
import { LinkContext } from "./link-context";
12
13
13
14
const styles = stylex.create({
14
15
link: {
15
-
color: primaryColor.text2,
16
-
cursor: "pointer",
16
+
color: {
17
+
default: primaryColor.text2,
18
+
":is([data-breadcrumb] *)": uiColor.text1,
19
+
":is([data-breadcrumb][data-current] *)": uiColor.text2,
20
+
},
21
+
cursor: {
22
+
default: "default",
23
+
":is([data-hovered])": "pointer",
24
+
},
17
25
fontFamily: fontFamily["sans"],
18
26
fontWeight: fontWeight["normal"],
19
27
textDecoration: {
20
28
default: "none",
21
-
":hover": "underline",
29
+
":is([data-hovered])": "underline",
30
+
":is([data-breadcrumb] *)": "none",
22
31
},
32
+
textUnderlineOffset: spacing["1"],
23
33
},
24
34
});
25
35
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
12
12
import { aspectRatioConfig } from "../components/aspect-ratio/aspect-ratio-config.js";
13
13
import { avatarConfig } from "../components/avatar/avatar-config.js";
14
14
import { badgeConfig } from "../components/badge/badge-config.js";
15
+
import { breadcrumbsConfig } from "../components/breadcrumbs/breadcrumbs-config.js";
15
16
import { buttonGroupConfig } from "../components/button-group/button-group-config.js";
16
17
import { buttonConfig } from "../components/button/button-config.js";
17
18
import { calendarConfig } from "../components/calendar/calendar-config.js";
···
106
107
dialogConfig,
107
108
avatarConfig,
108
109
badgeConfig,
110
+
breadcrumbsConfig,
109
111
gridConfig,
110
112
switchConfig,
111
113
aspectRatioConfig,
+14
-4
packages/hip-ui/src/components/link/index.tsx
+14
-4
packages/hip-ui/src/components/link/index.tsx
···
5
5
Link as AriaLink,
6
6
} from "react-aria-components";
7
7
8
-
import { primaryColor } from "../theme/semantic-color.stylex";
8
+
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
9
+
import { spacing } from "../theme/spacing.stylex";
9
10
import { StyleXComponentProps } from "../theme/types";
10
11
import { fontFamily, fontWeight } from "../theme/typography.stylex";
11
12
import { LinkContext } from "./link-context";
12
13
13
14
const styles = stylex.create({
14
15
link: {
15
-
color: primaryColor.text2,
16
-
cursor: "pointer",
16
+
color: {
17
+
default: primaryColor.text2,
18
+
":is([data-breadcrumb] *)": uiColor.text1,
19
+
":is([data-breadcrumb][data-current] *)": uiColor.text2,
20
+
},
21
+
cursor: {
22
+
default: "default",
23
+
":is([data-hovered])": "pointer",
24
+
},
17
25
fontFamily: fontFamily["sans"],
18
26
fontWeight: fontWeight["normal"],
19
27
textDecoration: {
20
28
default: "none",
21
-
":hover": "underline",
29
+
":is([data-hovered])": "underline",
30
+
":is([data-breadcrumb] *)": "none",
22
31
},
32
+
textUnderlineOffset: spacing["1"],
23
33
},
24
34
});
25
35