@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.
@@ -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 { ChipColor, ChipVariant } from '@interfaces/chip.types';
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?: DrawerItemChip;
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
- return require$$0.createElement(tag, { className: TEXT_STYLES.root({ variant, color, fontSize, maxLines, underline }) }, children);
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, { label: chip.label, size: '2xs', color: chip.color ?? 'info', icon: chip.icon, variant: chip.variant, disabled: disabled }))] }));
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