@aurora-ds/components 0.4.0 → 0.5.0
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/dist/cjs/components/layout/text/Text.d.ts +1 -0
- package/dist/cjs/components/layout/text/Text.props.d.ts +3 -0
- package/dist/cjs/components/navigation/drawer-item/DrawerItem.props.d.ts +2 -13
- package/dist/cjs/index.js +36 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/utils/ui/components/text/parseTextWithBold.utils.d.ts +7 -0
- package/dist/esm/components/layout/text/Text.d.ts +1 -0
- package/dist/esm/components/layout/text/Text.props.d.ts +3 -0
- package/dist/esm/components/navigation/drawer-item/DrawerItem.props.d.ts +2 -13
- package/dist/esm/index.js +37 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/ui/components/text/parseTextWithBold.utils.d.ts +7 -0
- package/dist/index.d.ts +4 -11
- package/package.json +1 -1
|
@@ -14,6 +14,7 @@ import { TextProps } from '@components/layout/text/Text.props.ts';
|
|
|
14
14
|
* - Theme-aware colors
|
|
15
15
|
* - Text truncation with `maxLines`
|
|
16
16
|
* - Underline support
|
|
17
|
+
* - Bold text with **double asterisks** syntax
|
|
17
18
|
*/
|
|
18
19
|
declare const Text: FC<TextProps>;
|
|
19
20
|
export default Text;
|
|
@@ -8,6 +8,8 @@ export type TextProps = PropsWithChildren<{
|
|
|
8
8
|
color?: keyof Theme['colors'];
|
|
9
9
|
/** Font size from theme (overrides variant fontSize if provided) */
|
|
10
10
|
fontSize?: keyof Theme['fontSize'];
|
|
11
|
+
/** Font family override (CSS value) */
|
|
12
|
+
fontFamily?: string;
|
|
11
13
|
/** Maximum number of lines before truncation with ellipsis */
|
|
12
14
|
maxLines?: number;
|
|
13
15
|
/** Add underline text decoration */
|
|
@@ -17,6 +19,7 @@ export type TextStyleParams = {
|
|
|
17
19
|
variant?: TextVariants;
|
|
18
20
|
color?: keyof Theme['colors'];
|
|
19
21
|
fontSize?: keyof Theme['fontSize'];
|
|
22
|
+
fontFamily?: string;
|
|
20
23
|
maxLines?: number;
|
|
21
24
|
underline?: boolean;
|
|
22
25
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ChipProps } from '@/components';
|
|
3
3
|
export type DrawerItemProps = {
|
|
4
4
|
/** DrawerItem text label */
|
|
5
5
|
label: string;
|
|
@@ -14,19 +14,8 @@ export type DrawerItemProps = {
|
|
|
14
14
|
/** Disabled state */
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
/** Optional chip to display */
|
|
17
|
-
chip?:
|
|
18
|
-
};
|
|
19
|
-
type DrawerItemChip = {
|
|
20
|
-
/** Chip text label */
|
|
21
|
-
label?: string;
|
|
22
|
-
/** Chip icon */
|
|
23
|
-
icon?: ReactNode;
|
|
24
|
-
/** Chip color */
|
|
25
|
-
color?: ChipColor;
|
|
26
|
-
/** Chip variant */
|
|
27
|
-
variant?: ChipVariant;
|
|
17
|
+
chip?: Omit<ChipProps, 'size' | 'disabled'>;
|
|
28
18
|
};
|
|
29
19
|
export type DrawerItemStyleParams = {
|
|
30
20
|
selected?: boolean;
|
|
31
21
|
};
|
|
32
|
-
export {};
|
package/dist/cjs/index.js
CHANGED
|
@@ -1643,13 +1643,14 @@ const getTruncateTextStyles = (maxLines) => (maxLines === 1
|
|
|
1643
1643
|
const TEXT_STYLES = pr((theme) => {
|
|
1644
1644
|
const variantStyles = getTextVariantStyles(theme);
|
|
1645
1645
|
return {
|
|
1646
|
-
root: ({ variant = 'span', color, fontSize, maxLines, underline }) => ({
|
|
1646
|
+
root: ({ variant = 'span', color, fontSize, fontFamily, maxLines, underline }) => ({
|
|
1647
1647
|
margin: 0,
|
|
1648
1648
|
fontSize: fontSize ? theme.fontSize[fontSize] : variantStyles[variant].fontSize,
|
|
1649
1649
|
fontWeight: variantStyles[variant].fontWeight,
|
|
1650
1650
|
lineHeight: variantStyles[variant].lineHeight,
|
|
1651
1651
|
color: color ? theme.colors[color] : 'inherit',
|
|
1652
1652
|
cursor: 'inherit',
|
|
1653
|
+
...(fontFamily && { fontFamily }),
|
|
1653
1654
|
...(underline && {
|
|
1654
1655
|
textDecoration: 'underline',
|
|
1655
1656
|
textUnderlineOffset: '3px',
|
|
@@ -1659,6 +1660,35 @@ const TEXT_STYLES = pr((theme) => {
|
|
|
1659
1660
|
};
|
|
1660
1661
|
});
|
|
1661
1662
|
|
|
1663
|
+
/**
|
|
1664
|
+
* Parses text content and converts **bold** syntax to <strong> elements
|
|
1665
|
+
* @param children - The content to parse (string or ReactNode)
|
|
1666
|
+
* @returns Parsed content with bold text wrapped in <strong> elements
|
|
1667
|
+
*/
|
|
1668
|
+
const parseTextWithBold = (children) => {
|
|
1669
|
+
if (typeof children !== 'string' || !children.includes('**')) {
|
|
1670
|
+
return children;
|
|
1671
|
+
}
|
|
1672
|
+
const boldPattern = /\*\*(.+?)\*\*/g;
|
|
1673
|
+
const parts = [];
|
|
1674
|
+
let lastIndex = 0;
|
|
1675
|
+
let match;
|
|
1676
|
+
while ((match = boldPattern.exec(children)) !== null) {
|
|
1677
|
+
if (match.index > lastIndex) {
|
|
1678
|
+
parts.push(children.slice(lastIndex, match.index));
|
|
1679
|
+
}
|
|
1680
|
+
parts.push(require$$0.createElement('strong', { key: match.index }, match[1]));
|
|
1681
|
+
lastIndex = match.index + match[0].length;
|
|
1682
|
+
}
|
|
1683
|
+
if (parts.length === 0) {
|
|
1684
|
+
return children;
|
|
1685
|
+
}
|
|
1686
|
+
if (lastIndex < children.length) {
|
|
1687
|
+
parts.push(children.slice(lastIndex));
|
|
1688
|
+
}
|
|
1689
|
+
return require$$0.createElement(require$$0.Fragment, null, ...parts);
|
|
1690
|
+
};
|
|
1691
|
+
|
|
1662
1692
|
/**
|
|
1663
1693
|
* Text component - Renders semantic HTML elements based on variant
|
|
1664
1694
|
*
|
|
@@ -1673,12 +1703,14 @@ const TEXT_STYLES = pr((theme) => {
|
|
|
1673
1703
|
* - Theme-aware colors
|
|
1674
1704
|
* - Text truncation with `maxLines`
|
|
1675
1705
|
* - Underline support
|
|
1706
|
+
* - Bold text with **double asterisks** syntax
|
|
1676
1707
|
*/
|
|
1677
|
-
const Text = ({ children, variant = 'span', color, fontSize, maxLines, underline, }) => {
|
|
1708
|
+
const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLines, underline, }) => {
|
|
1678
1709
|
const theme = rr();
|
|
1679
1710
|
const variantStyles = require$$0.useMemo(() => getTextVariantStyles(theme), [theme]);
|
|
1680
1711
|
const tag = variantStyles[variant].tag;
|
|
1681
|
-
|
|
1712
|
+
const parsedChildren = require$$0.useMemo(() => parseTextWithBold(children), [children]);
|
|
1713
|
+
return require$$0.createElement(tag, { className: TEXT_STYLES.root({ variant, color, fontSize, fontFamily, maxLines, underline }) }, parsedChildren);
|
|
1682
1714
|
};
|
|
1683
1715
|
Text.displayName = 'Text';
|
|
1684
1716
|
|
|
@@ -2060,7 +2092,7 @@ const DRAWER_ITEM_STYLES = pr((theme) => ({
|
|
|
2060
2092
|
* Similar to a text button with selected state support.
|
|
2061
2093
|
*/
|
|
2062
2094
|
const DrawerItem = ({ label, startIcon, endIcon, selected = false, onClick, disabled, chip }) => {
|
|
2063
|
-
return (jsxRuntimeExports.jsxs("button", { onClick: onClick, disabled: disabled, type: 'button', className: DRAWER_ITEM_STYLES.root({ selected }), children: [jsxRuntimeExports.jsxs(Stack, { children: [startIcon && (jsxRuntimeExports.jsx(Icon, { children: startIcon })), jsxRuntimeExports.jsx(Text, { variant: 'label', maxLines: 1, children: label }), endIcon && (jsxRuntimeExports.jsx(Icon, { children: endIcon }))] }), chip && !selected && (jsxRuntimeExports.jsx(Chip, {
|
|
2095
|
+
return (jsxRuntimeExports.jsxs("button", { onClick: onClick, disabled: disabled, type: 'button', className: DRAWER_ITEM_STYLES.root({ selected }), children: [jsxRuntimeExports.jsxs(Stack, { children: [startIcon && (jsxRuntimeExports.jsx(Icon, { children: startIcon })), jsxRuntimeExports.jsx(Text, { variant: 'label', maxLines: 1, children: label }), endIcon && (jsxRuntimeExports.jsx(Icon, { children: endIcon }))] }), chip && !selected && (jsxRuntimeExports.jsx(Chip, { ...chip, size: '2xs', color: chip.color ?? 'info', disabled: disabled }))] }));
|
|
2064
2096
|
};
|
|
2065
2097
|
DrawerItem.displayName = 'DrawerItem';
|
|
2066
2098
|
|