Bump version to 0.12.74

Author: edadma

packages/asterui/CHANGELOG.md

@@ -7,6 +7,13 @@ description: All notable changes to AsterUI
 
 All notable changes to AsterUI are documented here.
 
+## v0.12.74 (2025-12-26)
+
+### Components
+
+- Added closable functionality to Alert component with onClose, closeIcon, and afterClose callbacks
+- Added 'xs' size support to Typography.Text component
+
 ## v0.12.73 (2025-12-25)
 
 ### Documentation

packages/asterui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asterui",
-  "version": "0.12.73",
+  "version": "0.12.74",
   "description": "React UI component library with DaisyUI",
   "homepage": "https://asterui.com",
   "repository": {

packages/asterui/src/components/Alert.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 // DaisyUI classes
 const dAlert = 'alert'
@@ -11,13 +11,20 @@ const dAlertDash = 'alert-dash'
 const dAlertSoft = 'alert-soft'
 const dAlertVertical = 'alert-vertical'
 
+export interface ClosableType {
+  onClose?: () => void
+  closeIcon?: React.ReactNode
+  afterClose?: () => void
+}
+
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode
   type?: 'info' | 'success' | 'warning' | 'error'
   outline?: boolean
   dash?: boolean
   soft?: boolean
   vertical?: boolean
+  closable?: boolean | ClosableType
   /** Test ID for testing */
   'data-testid'?: string
 }
@@ -30,8 +37,11 @@ export const Alert: React.FC<AlertProps> = ({
   dash = false,
   soft = false,
   vertical = false,
+  closable = false,
   ...rest
 }) => {
+  const [visible, setVisible] = useState(true)
+
   const typeClasses = {
     info: dAlertInfo,
     success: dAlertSuccess,
@@ -51,9 +61,40 @@ export const Alert: React.FC<AlertProps> = ({
     .filter(Boolean)
     .join(' ')
 
+  // Determine close config from props
+  const isClosable = closable !== false
+  const closableConfig = typeof closable === 'object' ? closable : {}
+  const handleClose = closableConfig.onClose
+  const afterClose = closableConfig.afterClose
+  const closeIcon = closableConfig.closeIcon
+
+  const handleCloseClick = () => {
+    if (handleClose) {
+      handleClose()
+    }
+    setVisible(false)
+    if (afterClose) {
+      afterClose()
+    }
+  }
+
+  if (!visible) {
+    return null
+  }
+
   return (
     <div role="alert" className={classes} {...rest}>
       {children}
+      {isClosable && (
+        <button
+          type="button"
+          className="btn btn-sm btn-circle ml-auto opacity-70 hover:opacity-100"
+          onClick={handleCloseClick}
+          aria-label="Close"
+        >
+          {closeIcon || '✕'}
+        </button>
+      )}
     </div>
   )
 }

packages/asterui/src/components/Typography.tsx

@@ -7,7 +7,7 @@ const dBtnXs = 'btn-xs'
 const dLink = 'link'
 const dLinkPrimary = 'link-primary'
 
-export type TypographySize = 'sm' | 'base' | 'lg' | 'xl' | '2xl'
+export type TypographySize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl'
 export type TitleLevel = 1 | 2 | 3 | 4 | 5
 
 export interface TypographyProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -42,6 +42,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   underline?: boolean
   delete?: boolean
   type?: 'default' | 'secondary' | 'success' | 'warning' | 'error'
+  size?: TypographySize
   copyable?: boolean
   'data-testid'?: string
 }
@@ -94,6 +95,7 @@ function CopyButton({ text, 'data-testid': testId }: { text: string; 'data-testi
 
 function TypographyRoot({ children, size = 'base', className = '', 'data-testid': testId, ...rest }: TypographyProps) {
   const sizeClasses = {
+    xs: 'prose-xs text-xs',
     sm: 'prose-sm text-sm',
     base: 'prose-base text-base',
     lg: 'prose-lg text-lg',
@@ -223,6 +225,7 @@ function Text({
   underline,
   delete: del,
   type = 'default',
+  size,
   copyable,
   className = '',
   'data-testid': testId,
@@ -267,7 +270,18 @@ function Text({
     content = <del className="line-through opacity-70">{content}</del>
   }
 
-  const classes = `group inline ${typeClasses[type]} ${className}`.trim()
+  const classes = [
+    'group',
+    'inline',
+    typeClasses[type],
+    size === 'xs' && 'text-xs',
+    size === 'sm' && 'text-sm',
+    size === 'base' && 'text-base',
+    size === 'lg' && 'text-lg',
+    size === 'xl' && 'text-xl',
+    size === '2xl' && 'text-2xl',
+    className,
+  ].filter(Boolean).join(' ')
 
   return (
     <span className={classes} data-testid={testId} {...rest}>

packages/docs/public/docs/alert.md

@@ -112,14 +112,62 @@ const App: React.FC = () => (
 export default App
 ```
 
+### Closable Alert
+
+Alert with close button and callbacks.
+
+```tsx
+import React from 'react'
+import { Alert, Space, message } from 'asterui'
+import {
+  InformationCircleIcon,
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+} from '@aster-ui/icons'
+
+const App: React.FC = () => (
+  <Space direction="vertical" size="sm">
+    <Alert type="info" closable>
+      <InformationCircleIcon size="lg" className="shrink-0" />
+      <span>Closable alert with default close button</span>
+    </Alert>
+
+    <Alert
+      type="success"
+      closable={{
+        onClose: () => message.success('Success alert closed'),
+        afterClose: () => message.info('After close callback executed'),
+      }}
+    >
+      <CheckCircleIcon size="lg" className="shrink-0" />
+      <span>Closable with onClose and afterClose callbacks</span>
+    </Alert>
+
+    <Alert
+      type="warning"
+      closable={{
+        closeIcon: <span className="text-lg font-bold">×</span>,
+        onClose: () => message.warning('Custom close icon clicked'),
+      }}
+    >
+      <ExclamationTriangleIcon size="lg" className="shrink-0" />
+      <span>Closable with custom close icon</span>
+    </Alert>
+  </Space>
+)
+
+export default App
+```
+
 ## API
 
 ### Alert
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|
 | `children` | Alert content | `React.ReactNode` | `-` |
-| `type` | Alert color variant | `info' \| 'success' \| 'warning' \| 'error` | `-` |
+| `type` | Alert color variant | `'info' \| 'success' \| 'warning' \| 'error'` | `-` |
+| `closable` | Show close button | `boolean \| { onClose?: () => void; closeIcon?: ReactNode; afterClose?: () => void }` | `false` |
 | `outline` | Outline style | `boolean` | `false` |
 | `dash` | Dash outline style | `boolean` | `false` |
 | `soft` | Soft style | `boolean` | `false` |

packages/docs/public/docs/typography.md

@@ -150,6 +150,7 @@ export default App
 | `code` | Code style | `boolean` | `false` |
 | `mark` | Highlighted text | `boolean` | `false` |
 | `keyboard` | Keyboard style | `boolean` | `false` |
+| `size` | Text size | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'` | `-` |
 | `className` | Additional CSS classes | `string` | `-` |
 | `data-testid` | Test ID for testing | `string` | - |
 
@@ -159,7 +160,7 @@ export default App
 |----------|-------------|------|---------|
 | `copyable` | Enable copy to clipboard | `boolean \| { text?: string }` | `-` |
 | `ellipsis` | Truncate with ellipsis | `boolean \| { rows?: number }` | `-` |
-| `size` | Text size | `'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'` | `-` |
+| `size` | Text size | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'` | `-` |
 | `align` | Text alignment | `'left' \| 'center' \| 'right'` | `-` |
 | `className` | Additional CSS classes | `string` | `-` |
 | `data-testid` | Test ID for testing | `string` | - |
@@ -169,7 +170,7 @@ export default App
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|
 | `href` | Link URL | `string` | `'#'` |
-| `size` | Text size | `'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'` | `-` |
+| `size` | Text size | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'` | `-` |
 | `external` | Open in new tab with external icon | `boolean` | `false` |
 | `className` | Additional CSS classes | `string` | `-` |
 | `data-testid` | Test ID for testing | `string` | - |

packages/docs/src/components/AlertDemo.tsx

@@ -1,4 +1,4 @@
-import { Alert, Space, Button } from '@aster-ui/prefixed'
+import { Alert, Space, Button, message } from '@aster-ui/prefixed'
 import { InformationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon, XCircleIcon } from '@aster-ui/icons-prefixed'
 import { Demo } from './Demo'
 
@@ -132,3 +132,42 @@ export function SoftDemo() {
     </Demo>
   )
 }
+
+// @example-imports: { Alert, Space, message } from 'asterui'
+// @example-imports: { InformationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon } from '@aster-ui/icons'
+export function ClosableDemo() {
+  return (
+    <Demo>
+      {/* @example-return */}
+      <Space direction="vertical" size="sm">
+        <Alert type="info" closable>
+          <InformationCircleIcon size="lg" className="shrink-0" />
+          <span>Closable alert with default close button</span>
+        </Alert>
+
+        <Alert
+          type="success"
+          closable={{
+            onClose: () => message.success('Success alert closed'),
+            afterClose: () => message.info('After close callback executed')
+          }}
+        >
+          <CheckCircleIcon size="lg" className="shrink-0" />
+          <span>Closable with onClose and afterClose callbacks</span>
+        </Alert>
+
+        <Alert
+          type="warning"
+          closable={{
+            closeIcon: <span className="text-lg font-bold">×</span>,
+            onClose: () => message.warning('Custom close icon clicked')
+          }}
+        >
+          <ExclamationTriangleIcon size="lg" className="shrink-0" />
+          <span>Closable with custom close icon</span>
+        </Alert>
+      </Space>
+      {/* @example-return-end */}
+    </Demo>
+  )
+}

packages/docs/src/content/docs/changelog.md

@@ -7,6 +7,13 @@ description: All notable changes to AsterUI
 
 All notable changes to AsterUI are documented here.
 
+## v0.12.74 (2025-12-26)
+
+### Components
+
+- Added closable functionality to Alert component with onClose, closeIcon, and afterClose callbacks
+- Added 'xs' size support to Typography.Text component
+
 ## v0.12.73 (2025-12-25)
 
 ### Documentation

packages/docs/src/content/docs/components/alert.mdx

@@ -11,6 +11,7 @@ import {
   OutlineDemo,
   DashDemo,
   SoftDemo,
+  ClosableDemo,
 } from '../../../components/AlertDemo'
 import AlertDemoSource from '../../../components/AlertDemo.tsx?raw'
 import Example from '../../../components/Example.astro'
@@ -51,6 +52,10 @@ import { Alert } from 'asterui'
   <SoftDemo client:load slot="demo" />
 </Example>
 
+<Example title="Closable Alert" description="Alert with close button and callbacks." source={AlertDemoSource} fn="ClosableDemo">
+  <ClosableDemo client:load slot="demo" />
+</Example>
+
 </div>
 
 ## API
@@ -61,6 +66,7 @@ import { Alert } from 'asterui'
 |----------|-------------|------|---------|
 | `children` | Alert content | `ReactNode` | - |
 | `type` | Alert color variant | `'info' \| 'success' \| 'warning' \| 'error'` | - |
+| `closable` | Show close button | `boolean \| { onClose?: () => void; closeIcon?: ReactNode; afterClose?: () => void }` | `false` |
 | `outline` | Outline style | `boolean` | `false` |
 | `dash` | Dash outline style | `boolean` | `false` |
 | `soft` | Soft style | `boolean` | `false` |

packages/docs/src/content/docs/components/typography.mdx

@@ -84,7 +84,7 @@ const { Title, Paragraph, Text, Link } = Typography
 | `code` | Code style - Text only | `boolean` | `false` |
 | `mark` | Highlighted text - Text only | `boolean` | `false` |
 | `keyboard` | Keyboard style - Text only | `boolean` | `false` |
-| `size` | Text size - Paragraph and Link | `'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'` | - |
+| `size` | Text size - Text, Paragraph, and Link | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'` | - |
 | `align` | Text alignment - Paragraph only | `'left' \| 'center' \| 'right'` | - |
 | `href` | Link URL - Link only | `string` | `'#'` |
 | `external` | Open in new tab with external icon - Link only | `boolean` | `false` |