qstd 0.3.45 → 0.3.46
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/README.md +27 -7
- package/dist/block/tooltip.d.ts.map +1 -1
- package/dist/preset/index.cjs +1 -5
- package/dist/preset/index.d.ts.map +1 -1
- package/dist/preset/index.js +1 -5
- package/dist/react/index.cjs +166 -167
- package/dist/react/index.css +0 -1
- package/dist/react/index.js +162 -163
- package/package.json +1 -1
- package/styled-system/styles.css +0 -1
package/README.md
CHANGED
|
@@ -682,27 +682,47 @@ Block includes several compound components accessible via namespace:
|
|
|
682
682
|
#### Tooltip
|
|
683
683
|
|
|
684
684
|
```tsx
|
|
685
|
-
// Simple tooltip
|
|
685
|
+
// Simple tooltip (string)
|
|
686
686
|
<Block is="btn" tooltip="This is a tooltip">
|
|
687
687
|
Hover me
|
|
688
688
|
</Block>
|
|
689
689
|
|
|
690
|
-
// Custom tooltip
|
|
690
|
+
// Custom tooltip with inline styling
|
|
691
691
|
<Block
|
|
692
692
|
is="btn"
|
|
693
693
|
tooltip={
|
|
694
|
-
<Block.
|
|
695
|
-
bg="blue.900"
|
|
696
|
-
color={{ base: "blue.400", _dark: "red.400" }}
|
|
697
|
-
>
|
|
694
|
+
<Block role="tooltip" bg="blue.900" color="blue.400">
|
|
698
695
|
Custom styled tooltip!
|
|
699
|
-
</Block
|
|
696
|
+
</Block>
|
|
700
697
|
}
|
|
701
698
|
>
|
|
702
699
|
Hover for custom tooltip
|
|
703
700
|
</Block>
|
|
701
|
+
|
|
702
|
+
// Styling tooltips with _tooltip condition
|
|
703
|
+
// Use _tooltip to style all tooltips from a parent element
|
|
704
|
+
<Block
|
|
705
|
+
_tooltip={{
|
|
706
|
+
bg: "violet.900",
|
|
707
|
+
color: "violet.200",
|
|
708
|
+
px: 4,
|
|
709
|
+
py: 2,
|
|
710
|
+
borderRadius: 8,
|
|
711
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
|
|
712
|
+
}}
|
|
713
|
+
>
|
|
714
|
+
<Block is="btn" tooltip="Styled via _tooltip condition">
|
|
715
|
+
Hover me
|
|
716
|
+
</Block>
|
|
717
|
+
</Block>
|
|
704
718
|
```
|
|
705
719
|
|
|
720
|
+
**Styling Tooltips:**
|
|
721
|
+
|
|
722
|
+
- **Simple:** Pass a string to the `tooltip` prop for default styling
|
|
723
|
+
- **Custom Content:** Pass a React element with `role="tooltip"` to customize content and styling
|
|
724
|
+
- **Parent-Level Styling:** Use the `_tooltip` condition from a parent to style all descendant tooltips. The `_tooltip` selector targets elements with `role="tooltip"` or `data-tooltip` attribute.
|
|
725
|
+
|
|
706
726
|
### Common Utility Props
|
|
707
727
|
|
|
708
728
|
```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/block/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,OAAO,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAwCnC,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,KAAK,EAAE,EAAE,CAAC,gBAAgB,GACzB,KAAK,CAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/block/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,OAAO,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAwCnC,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,KAAK,EAAE,EAAE,CAAC,gBAAgB,GACzB,KAAK,CAAC,YAAY,CAkiBpB"}
|
package/dist/preset/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preset/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preset/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,MAAM,EAAE,MAwhBb,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/dist/preset/index.js
CHANGED