{"version":3,"sources":["../src/components/heading/heading.tsx","../src/components/title/title.tsx"],"names":["React","Title","level","size","color","id","styles","ui","children","className","props","ref","dataTitle","ui_default","title_default","Heading","type","heading_default"],"mappings":"yCAAA,OAAOA,MAAW,QCAlB,OAAOA,MAAW,QAuOlB,IAAMC,EAAQD,EAAM,KAClBA,EAAM,WACJ,CACE,CACE,MAAAE,EAAQ,KACR,KAAAC,EACA,MAAAC,EACA,GAAAC,EACA,OAAAC,EACA,GAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAEH,IAAMC,EAAY,CAACT,EAAMC,CAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAE7D,OACEJ,EAAA,cAACa,EAAA,CACC,GAAIX,EACJ,GAAIG,EACJ,OAAQC,EACR,UAASC,EACT,aAAYK,EACZ,QAASH,EACT,IAAKE,EACJ,GAAGD,GAEHF,CACH,CAEJ,CACF,CACF,EAEAP,EAAM,YAAc,QAEpB,IAAOa,EAAQb,EDtMf,IAAMc,EAAUf,EAAM,WACpB,CAAC,CAAE,KAAAgB,EAAO,KAAM,GAAGN,CAAM,EAAGC,KAEtB,QAAQ,IAAI,WAAa,eAE3B,QAAQ,KACN;AAAA,4BAE6BK,CAAI,2BAAsBA,CAAI;AAAA,sDAE7D,EAIKhB,EAAA,cAACc,EAAA,CAAM,MAAOE,EAAM,IAAKL,EAAM,GAAGD,EAAO,EAEpD,EAEAK,EAAQ,YAAc,uBAEtB,IAAOE,EAAQF","sourcesContent":["import React from \"react\";\nimport Title from \"#components/title/title\";\n\n/**\n * @deprecated Use `Title` component instead. This component will be removed in v3.0.0.\n *\n * @remarks\n * The `Heading` component has been deprecated in favor of the new `Title` component\n * which offers improved API design and better accessibility features.\n *\n * **Migration Guide:**\n * - Rename `Heading` → `Title`\n * - Rename prop `type` → `level`\n * - Default level changed from `h3` → `h2` (update if you relied on the default)\n *\n * @example\n * // Before (deprecated):\n * <Heading type=\"h2\">Section Title</Heading>\n *\n * // After:\n * <Title level=\"h2\">Section Title</Title>\n *\n * @see {@link Title} for the new component\n */\nexport type TitleProps = {\n  /**\n   * @deprecated Use `level` prop on the `Title` component instead.\n   */\n  children: React.ReactNode;\n\n  /**\n   * @deprecated Use `level` prop on the `Title` component instead.\n   */\n  type?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n  /**\n   * @deprecated Use `ui` prop on the `Title` component.\n   */\n  ui?: string;\n} & Omit<React.ComponentPropsWithoutRef<typeof Title>, 'level'>;\n\n/**\n * Heading - Deprecated component wrapper for Title.\n *\n * @deprecated Use {@link Title} component instead. Will be removed in v3.0.0.\n *\n * This component provides backwards compatibility for existing code using\n * the old `Heading` component API. It forwards all props to the new `Title`\n * component with appropriate prop name mapping.\n *\n * **Breaking Changes in v3.0.0:**\n * - This component will be removed\n * - Migrate to `Title` component before upgrading\n *\n * **Migration Steps:**\n * 1. Replace all `<Heading>` imports with `<Title>`\n * 2. Rename `type` prop to `level`\n * 3. Review default behavior (default changed from h3 to h2)\n *\n * @example\n * // Old API (still works but deprecated):\n * import { Heading } from '@fpkit/acss';\n * <Heading type=\"h2\">Section</Heading>\n *\n * @example\n * // New API (recommended):\n * import { Title } from '@fpkit/acss';\n * <Title level=\"h2\">Section</Title>\n *\n * @param {TitleProps} props - Component props (maps old API to new)\n * @returns {React.ReactElement} The rendered Title component\n */\nconst Heading = React.forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ type = \"h3\", ...props }, ref) => {\n    // Development warning for deprecated usage\n    if (process.env.NODE_ENV === \"development\") {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `[@fpkit/acss] Heading component is deprecated and will be removed in v3.0.0. ` +\n        `Please use the Title component instead.\\n` +\n        `Migration: <Heading type=\"${type}\"> → <Title level=\"${type}\">\\n` +\n        `See documentation: https://fpkit.dev/components/title`\n      );\n    }\n\n    // Map old 'type' prop to new 'level' prop\n    return <Title level={type} ref={ref} {...props} />;\n  }\n);\n\nHeading.displayName = \"Heading (Deprecated)\";\n\nexport default Heading;\n","import React from \"react\";\nimport UI from \"#components/ui\";\n\n/**\n * Valid HTML heading levels for semantic document structure.\n *\n * @remarks\n * Heading levels establish the document outline and hierarchy for screen readers.\n * Always maintain proper heading order (don't skip levels) for WCAG 2.1 compliance.\n *\n * @example\n * // ✅ GOOD: Proper heading hierarchy\n * <Title level=\"h1\">Main Page Title</Title>\n * <Title level=\"h2\">Section Heading</Title>\n * <Title level=\"h3\">Subsection Heading</Title>\n *\n * @example\n * // ❌ BAD: Skipping heading levels\n * <Title level=\"h1\">Main Title</Title>\n * <Title level=\"h4\">Skipped h2 and h3</Title>\n */\nexport type HeadingLevel = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n/**\n * Visual size variants for Title component.\n * Independent of semantic heading level for flexible design.\n */\nexport type TitleSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\n/**\n * Color variants for Title component.\n * All variants meet WCAG 2.1 AA contrast requirements (4.5:1 minimum).\n */\nexport type TitleColor = \"primary\" | \"secondary\" | \"accent\" | \"muted\" | \"inherit\";\n\n/**\n * Props for the Title component.\n *\n * @typeParam TLevel - The heading level to render (h1-h6)\n *\n * @property {HeadingLevel} level - The semantic heading level (h1-h6). Defaults to \"h2\".\n * @property {React.ReactNode} children - The text or elements to render inside the heading.\n * @property {string} [id] - Unique identifier for the heading, useful for anchor links.\n * @property {React.CSSProperties} [styles] - Inline styles to apply to the heading.\n * @property {string} [ui] - Data attribute for UI framework styling hooks.\n * @property {string} [className] - CSS class names to apply.\n *\n * @remarks\n * This interface extends the polymorphic UI component props, providing full access\n * to native HTML heading attributes and ARIA properties for accessibility.\n *\n * For AI assistants: This component ensures semantic HTML structure for document\n * outlines, which is critical for screen reader navigation and SEO.\n */\nexport type TitleProps = {\n  /**\n   * The semantic heading level to render.\n   *\n   * @default \"h2\"\n   *\n   * @remarks\n   * Choose the appropriate level based on your document structure:\n   * - h1: Page title (typically one per page)\n   * - h2: Major sections\n   * - h3-h6: Subsections and nested content\n   *\n   * WCAG 2.1 requires proper heading hierarchy for screen reader users.\n   */\n  level?: HeadingLevel;\n\n  /**\n   * The content to display in the heading.\n   *\n   * @remarks\n   * Can be text, elements, or a combination. Ensure text content is meaningful\n   * and descriptive for users navigating with screen readers.\n   */\n  children: React.ReactNode;\n\n  /**\n   * Unique identifier for the heading element.\n   *\n   * @remarks\n   * Useful for:\n   * - Creating anchor links to sections\n   * - ARIA relationships (aria-labelledby, aria-describedby)\n   * - Testing and automation\n   */\n  id?: string;\n\n  /**\n   * Data attribute for UI framework styling hooks.\n   *\n   * @remarks\n   * Used by fpkit's CSS system to apply component-specific styles.\n   * Automatically prefixed with \"data-ui\" when rendered.\n   */\n  ui?: string;\n\n  /**\n   * CSS class names to apply to the heading.\n   *\n   * @remarks\n   * Prefer using the `ui` prop for fpkit styling, and this for\n   * utility classes or custom overrides.\n   */\n  className?: string;\n\n  /**\n   * Visual size variant (independent of semantic heading level).\n   *\n   * @default undefined (uses browser default or custom CSS)\n   *\n   * @remarks\n   * Choose the appropriate visual size based on design needs:\n   * - xs: 0.75rem (12px) - Very small accent headings\n   * - sm: 0.875rem (14px) - Small headings\n   * - md: 1rem (16px) - Medium headings\n   * - lg: 1.5rem (24px) - Large headings\n   * - xl: 2rem (32px) - Extra large headings\n   * - 2xl: 2.5rem (40px) - Largest headings\n   *\n   * Visual size is independent of semantic level, allowing design\n   * flexibility while maintaining proper document structure.\n   */\n  size?: TitleSize;\n\n  /**\n   * Color variant for the title text.\n   *\n   * @default undefined (inherits color from parent)\n   *\n   * @remarks\n   * All color variants meet WCAG 2.1 Level AA contrast requirements (4.5:1 minimum):\n   * - primary: Dark blue (#1e3a8a) - 8.59:1 contrast\n   * - secondary: Gray (#4b5563) - 7.56:1 contrast\n   * - accent: Purple (#7c3aed) - 4.62:1 contrast\n   * - muted: Light gray (#6b7280) - 5.49:1 contrast\n   * - inherit: Inherits color from parent element\n   */\n  color?: TitleColor;\n} & React.ComponentPropsWithoutRef<typeof UI>;\n\n/**\n * Title - A semantic heading component for document structure and hierarchy.\n *\n * The Title component renders semantic HTML headings (h1-h6) with proper\n * accessibility support. It ensures WCAG 2.1 AA compliance by maintaining\n * semantic document structure for screen readers and assistive technologies.\n *\n * ## Key Features\n *\n * - **Semantic HTML**: Renders actual heading elements (h1-h6) for proper document outline\n * - **Accessibility**: Full ARIA support and keyboard navigation\n * - **Flexible Styling**: Supports fpkit's UI system, custom classes, and inline styles\n * - **Type Safety**: Fully typed with TypeScript for developer experience\n * - **Performance**: Memoized to prevent unnecessary re-renders\n *\n * ## Accessibility Considerations\n *\n * ### WCAG 2.1 AA Compliance\n *\n * - **1.3.1 Info and Relationships (Level A)**: Semantic heading elements preserve\n *   document structure for screen readers\n * - **2.4.6 Headings and Labels (Level AA)**: Headings should be descriptive and\n *   properly ordered\n * - **2.4.10 Section Headings (Level AAA)**: Use headings to organize content\n *\n * ### Best Practices\n *\n * 1. **Maintain Heading Hierarchy**: Don't skip levels (e.g., h1 → h3)\n * 2. **One h1 Per Page**: Use h1 for the main page title only\n * 3. **Descriptive Text**: Headings should clearly describe the following content\n * 4. **Avoid Empty Headings**: Always provide meaningful text content\n *\n * ## Usage Examples\n *\n * @example\n * // Basic usage with default h2\n * <Title>Section Heading</Title>\n *\n * @example\n * // Page title with explicit h1\n * <Title level=\"h1\">Welcome to Our Application</Title>\n *\n * @example\n * // Subsection with custom styling\n * <Title\n *   level=\"h3\"\n *   id=\"getting-started\"\n *   className=\"text-primary\"\n * >\n *   Getting Started\n * </Title>\n *\n * @example\n * // With fpkit UI data attribute\n * <Title level=\"h2\" ui=\"section-title\">\n *   Features Overview\n * </Title>\n *\n * @example\n * // Accessible heading with aria-label for context\n * <Title level=\"h2\" aria-label=\"User dashboard overview\">\n *   Dashboard\n * </Title>\n *\n * @example\n * // Complex heading with mixed content\n * <Title level=\"h2\" id=\"stats\">\n *   <Icon name=\"chart\" aria-hidden=\"true\" />\n *   <span>Statistics</span>\n * </Title>\n *\n * @example\n * // ✅ GOOD: Proper heading hierarchy\n * <Title level=\"h1\">Page Title</Title>\n * <Title level=\"h2\">Main Section</Title>\n * <Title level=\"h3\">Subsection</Title>\n *\n * @example\n * // ❌ BAD: Skipping heading levels (accessibility violation)\n * <Title level=\"h1\">Page Title</Title>\n * <Title level=\"h4\">Skipped h2 and h3</Title>\n *\n * @param {TitleProps} props - Component props\n * @returns {React.ReactElement} A semantic heading element\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html WCAG 1.3.1}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html WCAG 2.4.6}\n */\nconst Title = React.memo(\n  React.forwardRef<HTMLHeadingElement, TitleProps>(\n    (\n      {\n        level = \"h2\",\n        size,\n        color,\n        id,\n        styles,\n        ui,\n        children,\n        className,\n        ...props\n      }: TitleProps,\n      ref\n    ) => {\n      // Construct space-separated data-title attribute\n      const dataTitle = [size, color].filter(Boolean).join(\" \") || undefined;\n\n      return (\n        <UI\n          as={level}\n          id={id}\n          styles={styles}\n          data-ui={ui}\n          data-title={dataTitle}\n          classes={className}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </UI>\n      );\n    }\n  )\n);\n\nTitle.displayName = \"Title\";\n\nexport default Title;\n"]}