@papernote/ui 1.10.18 → 1.10.20

package/src/components/Tabs.tsx

@@ -18,6 +18,12 @@ export interface Tab {
   badgeVariant?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
   /** Whether this individual tab can be closed (overrides global closeable) */
   closeable?: boolean;
+  /**
+   * Custom data attributes to spread on the tab trigger element.
+   * Useful for product tours (e.g., Driver.js) and E2E testing (Playwright, Cypress).
+   * @example { 'data-tour': 'tab-settings', 'data-testid': 'settings-tab' }
+   */
+  dataAttributes?: Record<string, string>;
 }
 
 export interface TabsProps {
@@ -274,6 +280,12 @@ export interface TabsTriggerProps {
   badgeVariant?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
   /** Additional class name */
   className?: string;
+  /**
+   * Custom data attributes to spread on the tab trigger element.
+   * Useful for product tours (e.g., Driver.js) and E2E testing (Playwright, Cypress).
+   * @example { 'data-tour': 'tab-settings', 'data-testid': 'settings-tab' }
+   */
+  dataAttributes?: Record<string, string>;
 }
 
 /**
@@ -287,6 +299,7 @@ export function TabsTrigger({
   badge,
   badgeVariant = 'info',
   className = '',
+  dataAttributes,
 }: TabsTriggerProps) {
   const { activeTab, setActiveTab, variant, orientation, size, registerTab, unregisterTab } = useTabsContext();
   const isActive = activeTab === value;
@@ -332,6 +345,8 @@ export function TabsTrigger({
         focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-1
         ${className}
       `}
+      data-testid={dataAttributes?.['data-testid'] || `tab-${value}`}
+      {...dataAttributes}
     >
       {icon && <span className={`flex-shrink-0 ${sizeClasses[size].icon}`}>{icon}</span>}
       <span>{children}</span>
@@ -660,6 +675,8 @@ export default function Tabs({
                 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-1
                 group
               `}
+              data-testid={tab.dataAttributes?.['data-testid'] || `tab-${tab.id}`}
+              {...tab.dataAttributes}
             >
               {tab.icon && <span className={`flex-shrink-0 ${sizeClasses[size].icon}`}>{tab.icon}</span>}
               <span className={isTabCloseable ? 'mr-1' : ''}>{tab.label}</span>

package/src/components/Text.stories.tsx

@@ -16,7 +16,7 @@ Text component for consistent typography across the application.
 - **Semantic elements**: Render as p, span, div, h1-h6, or label
 - **Size scale**: xs, sm, base, lg, xl, 2xl
 - **Weight options**: normal, medium, semibold, bold
-- **Color variants**: primary, secondary, muted, accent, error, success, warning
+- **Color variants**: primary, secondary, muted, accent, error, success, warning, caution
 - **Text alignment**: left, center, right
 - **Truncation**: Single line truncate or multi-line clamp (1-6 lines)
 - **Transform**: uppercase, lowercase, capitalize
@@ -61,7 +61,7 @@ import { Text } from 'notebook-ui';
     },
     color: {
       control: 'select',
-      options: ['primary', 'secondary', 'muted', 'accent', 'error', 'success', 'warning'],
+      options: ['primary', 'secondary', 'muted', 'accent', 'error', 'success', 'warning', 'caution'],
       description: 'Text color',
     },
     align: {
@@ -120,7 +120,9 @@ export const Weights: Story = {
 };
 
 /**
- * All available color variants including the new `warning` color.
+ * All available color variants including `warning` and `caution` colors.
+ * - **warning**: Urgent attention needed (brighter amber)
+ * - **caution**: Informational, exploratory states like sandbox/demo mode (darker, subdued amber)
  */
 export const Colors: Story = {
   render: () => (
@@ -130,15 +132,16 @@ export const Colors: Story = {
       <Text color="muted">Muted - Subdued text</Text>
       <Text color="accent">Accent - Branded color</Text>
       <Text color="success">Success - Positive feedback</Text>
-      <Text color="warning">Warning - Caution messages</Text>
+      <Text color="warning">Warning - Urgent attention</Text>
+      <Text color="caution">Caution - Informational, exploratory</Text>
       <Text color="error">Error - Error messages</Text>
     </Stack>
   ),
 };
 
 /**
- * The warning color is useful for displaying caution messages,
- * threshold alerts, or status indicators that need attention.
+ * The warning color is useful for urgent alerts, threshold warnings,
+ * or status indicators that need immediate attention.
  */
 export const WarningColor: Story = {
   render: () => (
@@ -156,6 +159,27 @@ export const WarningColor: Story = {
   ),
 };
 
+/**
+ * The caution color is for informational states that need context but aren't alarming.
+ * Use for demo/sandbox modes, wash sale notices, or exploratory features.
+ * It's calmer than warning - inviting users to explore safely.
+ */
+export const CautionColor: Story = {
+  render: () => (
+    <Stack spacing="md">
+      <Text color="caution" size="lg" weight="semibold">
+        Demo Mode: Changes will not be saved
+      </Text>
+      <Text color="caution">
+        This is a sandbox environment for testing
+      </Text>
+      <Text color="caution" size="sm">
+        Wash sale: Cost basis adjusted for tax purposes
+      </Text>
+    </Stack>
+  ),
+};
+
 export const Alignment: Story = {
   render: () => (
     <Stack spacing="sm" style={{ width: '300px' }}>

package/src/components/Text.tsx

@@ -23,7 +23,7 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'colo
   /** Weight variant */
   weight?: 'normal' | 'medium' | 'semibold' | 'bold';
   /** Color variant */
-  color?: 'primary' | 'secondary' | 'muted' | 'accent' | 'error' | 'success' | 'warning';
+  color?: 'primary' | 'secondary' | 'muted' | 'accent' | 'error' | 'success' | 'warning' | 'caution';
   /** Text alignment */
   align?: 'left' | 'center' | 'right';
   /** Truncate text with ellipsis (single line) */
@@ -54,9 +54,10 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'colo
  * <Text size="lg" weight="semibold" color="primary">
  *   Hello World
  * </Text>
- * 
+ *
  * <Text color="warning">Warning message</Text>
- * 
+ * <Text color="caution">Caution message (informational, not alarming)</Text>
+ *
  * // With ref
  * const textRef = useRef<HTMLParagraphElement>(null);
  * <Text ref={textRef}>Measurable text</Text>
@@ -130,6 +131,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
     error: 'text-error-600',
     success: 'text-success-600',
     warning: 'text-warning-600',
+    caution: 'text-warning-700',
   };
 
   const alignClasses = {