@aurora-ds/components 0.4.0 → 0.5.0

package/dist/cjs/utils/ui/components/text/parseTextWithBold.utils.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+/**
+ * Parses text content and converts **bold** syntax to <strong> elements
+ * @param children - The content to parse (string or ReactNode)
+ * @returns Parsed content with bold text wrapped in <strong> elements
+ */
+export declare const parseTextWithBold: (children: ReactNode) => ReactNode;

package/dist/esm/components/layout/text/Text.d.ts

@@ -14,6 +14,7 @@ import { TextProps } from '@components/layout/text/Text.props.ts';
  * - Theme-aware colors
  * - Text truncation with `maxLines`
  * - Underline support
+ * - Bold text with **double asterisks** syntax
  */
 declare const Text: FC<TextProps>;
 export default Text;

package/dist/esm/components/layout/text/Text.props.d.ts

@@ -8,6 +8,8 @@ export type TextProps = PropsWithChildren<{
     color?: keyof Theme['colors'];
     /** Font size from theme (overrides variant fontSize if provided) */
     fontSize?: keyof Theme['fontSize'];
+    /** Font family override (CSS value) */
+    fontFamily?: string;
     /** Maximum number of lines before truncation with ellipsis */
     maxLines?: number;
     /** Add underline text decoration */
@@ -17,6 +19,7 @@ export type TextStyleParams = {
     variant?: TextVariants;
     color?: keyof Theme['colors'];
     fontSize?: keyof Theme['fontSize'];
+    fontFamily?: string;
     maxLines?: number;
     underline?: boolean;
 };

package/dist/esm/components/navigation/drawer-item/DrawerItem.props.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ChipColor, ChipVariant } from '@interfaces/chip.types';
+import { ChipProps } from '@/components';
 export type DrawerItemProps = {
     /** DrawerItem text label */
     label: string;
@@ -14,19 +14,8 @@ export type DrawerItemProps = {
     /** Disabled state */
     disabled?: boolean;
     /** Optional chip to display */
-    chip?: DrawerItemChip;
-};
-type DrawerItemChip = {
-    /** Chip text label */
-    label?: string;
-    /** Chip icon */
-    icon?: ReactNode;
-    /** Chip color */
-    color?: ChipColor;
-    /** Chip variant */
-    variant?: ChipVariant;
+    chip?: Omit<ChipProps, 'size' | 'disabled'>;
 };
 export type DrawerItemStyleParams = {
     selected?: boolean;
 };
-export {};

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import require$$0, { useContext, createContext, useMemo, createElement, useState } from 'react';
+import require$$0, { useContext, createContext, createElement, Fragment, useMemo, useState } from 'react';
 
 var jsxRuntime = {exports: {}};
 
@@ -1641,13 +1641,14 @@ const getTruncateTextStyles = (maxLines) => (maxLines === 1
 const TEXT_STYLES = pr((theme) => {
     const variantStyles = getTextVariantStyles(theme);
     return {
-        root: ({ variant = 'span', color, fontSize, maxLines, underline }) => ({
+        root: ({ variant = 'span', color, fontSize, fontFamily, maxLines, underline }) => ({
             margin: 0,
             fontSize: fontSize ? theme.fontSize[fontSize] : variantStyles[variant].fontSize,
             fontWeight: variantStyles[variant].fontWeight,
             lineHeight: variantStyles[variant].lineHeight,
             color: color ? theme.colors[color] : 'inherit',
             cursor: 'inherit',
+            ...(fontFamily && { fontFamily }),
             ...(underline && {
                 textDecoration: 'underline',
                 textUnderlineOffset: '3px',
@@ -1657,6 +1658,35 @@ const TEXT_STYLES = pr((theme) => {
     };
 });
 
+/**
+ * Parses text content and converts **bold** syntax to <strong> elements
+ * @param children - The content to parse (string or ReactNode)
+ * @returns Parsed content with bold text wrapped in <strong> elements
+ */
+const parseTextWithBold = (children) => {
+    if (typeof children !== 'string' || !children.includes('**')) {
+        return children;
+    }
+    const boldPattern = /\*\*(.+?)\*\*/g;
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+    while ((match = boldPattern.exec(children)) !== null) {
+        if (match.index > lastIndex) {
+            parts.push(children.slice(lastIndex, match.index));
+        }
+        parts.push(createElement('strong', { key: match.index }, match[1]));
+        lastIndex = match.index + match[0].length;
+    }
+    if (parts.length === 0) {
+        return children;
+    }
+    if (lastIndex < children.length) {
+        parts.push(children.slice(lastIndex));
+    }
+    return createElement(Fragment, null, ...parts);
+};
+
 /**
  * Text component - Renders semantic HTML elements based on variant
  *
@@ -1671,12 +1701,14 @@ const TEXT_STYLES = pr((theme) => {
  * - Theme-aware colors
  * - Text truncation with `maxLines`
  * - Underline support
+ * - Bold text with **double asterisks** syntax
  */
-const Text = ({ children, variant = 'span', color, fontSize, maxLines, underline, }) => {
+const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLines, underline, }) => {
     const theme = rr();
     const variantStyles = useMemo(() => getTextVariantStyles(theme), [theme]);
     const tag = variantStyles[variant].tag;
-    return createElement(tag, { className: TEXT_STYLES.root({ variant, color, fontSize, maxLines, underline }) }, children);
+    const parsedChildren = useMemo(() => parseTextWithBold(children), [children]);
+    return createElement(tag, { className: TEXT_STYLES.root({ variant, color, fontSize, fontFamily, maxLines, underline }) }, parsedChildren);
 };
 Text.displayName = 'Text';
 
@@ -2058,7 +2090,7 @@ const DRAWER_ITEM_STYLES = pr((theme) => ({
  * Similar to a text button with selected state support.
  */
 const DrawerItem = ({ label, startIcon, endIcon, selected = false, onClick, disabled, chip }) => {
-    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 }))] }));
+    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 }))] }));
 };
 DrawerItem.displayName = 'DrawerItem';