@papernote/ui 1.10.14 → 1.10.16

package/dist/styles.css

@@ -2734,6 +2734,10 @@ input:checked + .slider:before{
   cursor: grabbing;
 }
 
+.cursor-help{
+  cursor: help;
+}
+
 .cursor-move{
   cursor: move;
 }
@@ -5501,6 +5505,11 @@ input:checked + .slider:before{
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-error-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-error-200:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
@@ -5576,6 +5585,11 @@ input:checked + .slider:before{
   background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-primary-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-primary-200:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
@@ -5636,6 +5650,11 @@ input:checked + .slider:before{
   background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-warning-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-warning-200:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
@@ -5798,6 +5817,11 @@ input:checked + .slider:before{
   color: rgb(127 29 29 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-warning-700:hover{
+  --tw-text-opacity: 1;
+  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
+}
+
 .hover\:underline:hover{
   text-decoration-line: underline;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.10.14",
+  "version": "1.10.16",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/CollapsibleSection.tsx

@@ -0,0 +1,219 @@
+import React, { useState, useRef, useEffect, ReactNode } from 'react';
+import { ChevronDown, ExternalLink } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import Badge from './Badge';
+
+export interface CollapsibleSectionProps {
+  /** Section title displayed in the header */
+  title: string;
+  /** Optional icon displayed before the title */
+  icon?: ReactNode;
+  /** Badge content shown next to title (typically a count) */
+  badge?: number | string;
+  /** Badge color variant */
+  badgeVariant?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  /** URL for "View All" link (uses react-router Link) */
+  viewAllHref?: string;
+  /** Custom label for the view all link */
+  viewAllLabel?: string;
+  /** Callback when "View All" is clicked (alternative to href) */
+  onViewAll?: () => void;
+  /** Initial open state (uncontrolled) */
+  defaultOpen?: boolean;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes (for persistence) */
+  onOpenChange?: (open: boolean) => void;
+  /** Section content */
+  children: ReactNode;
+  /** Additional CSS classes for the container */
+  className?: string;
+}
+
+/**
+ * CollapsibleSection - A card-style collapsible container for dashboard sections
+ * 
+ * Wraps content with a styled header that includes title, optional icon, badge count,
+ * and "View All" navigation. Supports both controlled and uncontrolled modes for
+ * localStorage persistence via onOpenChange callback.
+ * 
+ * @example Basic usage
+ * ```tsx
+ * <CollapsibleSection 
+ *   title="Upcoming Bills" 
+ *   badge={5} 
+ *   badgeVariant="warning"
+ *   viewAllHref="/bills"
+ * >
+ *   <BillsList bills={upcomingBills} />
+ * </CollapsibleSection>
+ * ```
+ * 
+ * @example With localStorage persistence
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(() => 
+ *   localStorage.getItem('section-open') !== 'false'
+ * );
+ * 
+ * <CollapsibleSection
+ *   title="Pending Items"
+ *   badge={pendingCount}
+ *   open={isOpen}
+ *   onOpenChange={(open) => {
+ *     setIsOpen(open);
+ *     localStorage.setItem('section-open', String(open));
+ *   }}
+ * >
+ *   {children}
+ * </CollapsibleSection>
+ * ```
+ */
+export function CollapsibleSection({
+  title,
+  icon,
+  badge,
+  badgeVariant = 'neutral',
+  viewAllHref,
+  viewAllLabel = 'View All',
+  onViewAll,
+  defaultOpen = true,
+  open: controlledOpen,
+  onOpenChange,
+  children,
+  className = '',
+}: CollapsibleSectionProps) {
+  const isControlled = controlledOpen !== undefined;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number>(0);
+
+  const handleToggle = () => {
+    const newOpen = !isOpen;
+
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+
+    onOpenChange?.(newOpen);
+  };
+
+  const handleViewAllClick = (e: React.MouseEvent) => {
+    if (onViewAll) {
+      e.preventDefault();
+      onViewAll();
+    }
+  };
+
+  // Update height when content changes or open state changes
+  useEffect(() => {
+    if (!contentRef.current) return;
+
+    if (isOpen) {
+      const contentHeight = contentRef.current.scrollHeight;
+      setHeight(contentHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [isOpen, children]);
+
+  // Recalculate height when window resizes
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleResize = () => {
+      if (contentRef.current) {
+        setHeight(contentRef.current.scrollHeight);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isOpen]);
+
+  const ViewAllContent = (
+    <>
+      <span>{viewAllLabel}</span>
+      <ExternalLink className="h-3.5 w-3.5" />
+    </>
+  );
+
+  return (
+    <div
+      className={`
+        bg-white bg-subtle-grain border-2 border-paper-300 rounded-xl shadow-sm
+        ${className}
+      `}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-4 border-b border-paper-200">
+        {/* Left side: Toggle + Icon + Title + Badge */}
+        <button
+          type="button"
+          onClick={handleToggle}
+          className="flex items-center gap-3 text-left flex-1 min-w-0 group"
+          aria-expanded={isOpen}
+        >
+          <ChevronDown
+            className={`
+              h-5 w-5 text-ink-400 transition-transform duration-200 flex-shrink-0
+              group-hover:text-ink-600
+              ${isOpen ? 'rotate-0' : '-rotate-90'}
+            `}
+          />
+          
+          {icon && (
+            <span className="flex-shrink-0 text-ink-500">
+              {icon}
+            </span>
+          )}
+          
+          <span className="font-medium text-ink-900 truncate">
+            {title}
+          </span>
+          
+          {badge !== undefined && (
+            <Badge variant={badgeVariant} size="sm" pill>
+              {badge}
+            </Badge>
+          )}
+        </button>
+
+        {/* Right side: View All link */}
+        {(viewAllHref || onViewAll) && (
+          viewAllHref ? (
+            <Link
+              to={viewAllHref}
+              onClick={onViewAll ? handleViewAllClick : undefined}
+              className="flex items-center gap-1.5 text-sm text-primary-600 hover:text-primary-700 font-medium flex-shrink-0 ml-4"
+            >
+              {ViewAllContent}
+            </Link>
+          ) : (
+            <button
+              onClick={onViewAll}
+              className="flex items-center gap-1.5 text-sm text-primary-600 hover:text-primary-700 font-medium flex-shrink-0 ml-4"
+            >
+              {ViewAllContent}
+            </button>
+          )
+        )}
+      </div>
+
+      {/* Content */}
+      <div
+        ref={contentRef}
+        className="overflow-hidden transition-all duration-300 ease-in-out"
+        style={{ height: `${height}px` }}
+        aria-hidden={!isOpen}
+      >
+        <div className="p-5">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CollapsibleSection;

package/src/components/HelpTooltip.stories.tsx

@@ -0,0 +1,200 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import HelpTooltip from './HelpTooltip';
+import Input from './Input';
+import Stack from './Stack';
+import Text from './Text';
+
+const meta = {
+  title: 'Feedback/HelpTooltip',
+  component: HelpTooltip,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A convenience component that combines a help icon with a tooltip for providing contextual help.
+
+## Features
+- **Two icon variants**: HelpCircle (?) or Info (i) icon
+- **Three sizes**: sm, md, lg
+- **Accessible**: Includes proper ARIA labels and keyboard focus
+- **Hover states**: Subtle color transition on hover
+
+## Usage
+
+\`\`\`tsx
+import { HelpTooltip, Text, Stack } from 'notebook-ui';
+
+// Basic usage
+<Stack direction="horizontal" gap="sm" align="center">
+  <Text weight="medium">Email</Text>
+  <HelpTooltip content="We'll never share your email" />
+</Stack>
+
+// With info icon variant
+<HelpTooltip content="Additional information" icon="info" />
+
+// Different sizes
+<HelpTooltip content="Small help" size="sm" />
+<HelpTooltip content="Large help" size="lg" />
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      control: 'text',
+      description: 'The help text to display in the tooltip',
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    icon: {
+      control: 'select',
+      options: ['help', 'info'],
+      description: 'Icon variant to display',
+      table: {
+        type: { summary: 'help | info' },
+        defaultValue: { summary: 'help' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the icon',
+      table: {
+        type: { summary: 'sm | md | lg' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+    position: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Position of the tooltip relative to the icon',
+      table: {
+        type: { summary: 'top | bottom | left | right' },
+        defaultValue: { summary: 'top' },
+      },
+    },
+  },
+} satisfies Meta<typeof HelpTooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: 'This is helpful information',
+  },
+};
+
+export const HelpIcon: Story = {
+  args: {
+    content: 'Need help? This explains the feature.',
+    icon: 'help',
+  },
+};
+
+export const InfoIcon: Story = {
+  args: {
+    content: 'Additional information about this field.',
+    icon: 'info',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <Stack direction="horizontal" gap="lg" align="center">
+      <Stack direction="horizontal" gap="xs" align="center">
+        <Text size="sm">Small</Text>
+        <HelpTooltip content="Small size tooltip" size="sm" />
+      </Stack>
+      <Stack direction="horizontal" gap="xs" align="center">
+        <Text size="sm">Medium</Text>
+        <HelpTooltip content="Medium size tooltip" size="md" />
+      </Stack>
+      <Stack direction="horizontal" gap="xs" align="center">
+        <Text size="sm">Large</Text>
+        <HelpTooltip content="Large size tooltip" size="lg" />
+      </Stack>
+    </Stack>
+  ),
+};
+
+export const Positions: Story = {
+  render: () => (
+    <Stack direction="horizontal" gap="xl" align="center">
+      <Stack direction="horizontal" gap="xs" align="center">
+        <Text size="sm">Top</Text>
+        <HelpTooltip content="Tooltip on top" position="top" />
+      </Stack>
+      <Stack direction="horizontal" gap="xs" align="center">
+        <Text size="sm">Bottom</Text>
+        <HelpTooltip content="Tooltip on bottom" position="bottom" />
+      </Stack>
+      <Stack direction="horizontal" gap="xs" align="center">
+        <Text size="sm">Left</Text>
+        <HelpTooltip content="Tooltip on left" position="left" />
+      </Stack>
+      <Stack direction="horizontal" gap="xs" align="center">
+        <Text size="sm">Right</Text>
+        <HelpTooltip content="Tooltip on right" position="right" />
+      </Stack>
+    </Stack>
+  ),
+};
+
+export const WithFormField: Story = {
+  render: () => (
+    <Stack gap="md" style={{ width: '300px' }}>
+      <Stack gap="xs">
+        <Stack direction="horizontal" gap="xs" align="center">
+          <Text as="label" size="sm" weight="medium">
+            Email Address
+          </Text>
+          <HelpTooltip
+            content="We'll never share your email with anyone else"
+            size="sm"
+          />
+        </Stack>
+        <Input placeholder="you@example.com" />
+      </Stack>
+      <Stack gap="xs">
+        <Stack direction="horizontal" gap="xs" align="center">
+          <Text as="label" size="sm" weight="medium">
+            API Key
+          </Text>
+          <HelpTooltip
+            content="Your API key is used for authentication. Keep it secret!"
+            icon="info"
+            size="sm"
+          />
+        </Stack>
+        <Input type="password" placeholder="sk-..." />
+      </Stack>
+    </Stack>
+  ),
+};
+
+export const InlineWithText: Story = {
+  render: () => (
+    <Text>
+      This feature requires a subscription
+      <HelpTooltip
+        content="Premium subscriptions include unlimited access to all features"
+        size="sm"
+        className="ml-1"
+      />
+    </Text>
+  ),
+};
+
+export const LongContent: Story = {
+  args: {
+    content:
+      'This is a longer help message that provides more detailed information about the feature. It can span multiple lines if needed.',
+    position: 'right',
+  },
+};

package/src/components/HelpTooltip.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { HelpCircle, Info } from 'lucide-react';
+import Tooltip from './Tooltip';
+
+export interface HelpTooltipProps {
+  /** The help text to display in the tooltip */
+  content: React.ReactNode;
+  /** Icon variant to display */
+  icon?: 'help' | 'info';
+  /** Size of the icon */
+  size?: 'sm' | 'md' | 'lg';
+  /** Position of the tooltip relative to the icon */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /** Additional CSS classes for the icon container */
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-3.5 w-3.5',
+  md: 'h-4 w-4',
+  lg: 'h-5 w-5',
+};
+
+export default function HelpTooltip({
+  content,
+  icon = 'help',
+  size = 'md',
+  position = 'top',
+  className = '',
+}: HelpTooltipProps) {
+  const IconComponent = icon === 'info' ? Info : HelpCircle;
+
+  return (
+    <Tooltip content={content} position={position}>
+      <span
+        className={`inline-flex items-center justify-center text-ink-400 hover:text-ink-600 cursor-help transition-colors ${className}`}
+        role="button"
+        aria-label="Help"
+        tabIndex={0}
+      >
+        <IconComponent className={sizeClasses[size]} />
+      </span>
+    </Tooltip>
+  );
+}