@designcrowd/fe-shared-lib 1.5.20-dts-upgrades-2 → 1.5.20

package/docs/plans/2026-01-19-typescript-declarations-tdd-plan.md

@@ -1,953 +0,0 @@
-# TypeScript Declarations TDD Implementation Plan
-
-> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
-
-**Goal:** Add TypeScript declaration files to `@designcrowd/fe-shared-lib` so consumers get type checking and IDE autocomplete without converting the library to TypeScript.
-
-**Architecture:** Create a single `index.d.ts` file at package root that declares all exports from `index.js`. Use detailed prop interfaces for the 10 most-used components and generic `DefineComponent<{}, {}, any>` stubs for the rest. Update `package.json` exports to include the types field.
-
-**Tech Stack:** TypeScript declarations, Vue 3 `DefineComponent` type from `vue`
-
----
-
-## TDD Approach for Type Declarations
-
-For TypeScript declarations, "tests" are **compilation tests** - TypeScript files that:
-- Import from the package
-- Use the types in ways that should succeed (positive tests)
-- Optionally test that invalid usage fails to compile (negative tests)
-
-**RED** = Test file fails to compile (because types don't exist yet)
-**GREEN** = Test file compiles successfully (types are correct)
-
----
-
-## Task 1: Set Up Type Test Infrastructure
-
-**Files:**
-- Create: `types-test/tsconfig.json`
-- Create: `types-test/basic-imports.test.ts`
-
-**Step 1: Create tsconfig for type tests**
-
-```json
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "noEmit": true,
-    "skipLibCheck": true,
-    "types": ["node"]
-  },
-  "include": ["*.test.ts"],
-  "references": [{ "path": ".." }]
-}
-```
-
-**Step 2: Write failing test for basic imports**
-
-```typescript
-// types-test/basic-imports.test.ts
-// This file tests that basic imports work - compilation = pass
-
-import { Button, Modal, Icon, setSharedLibLocaleAsync, tr } from '..';
-
-// If this file compiles, the basic exports are typed
-const _button: typeof Button = Button;
-const _modal: typeof Modal = Modal;
-const _icon: typeof Icon = Icon;
-
-// Test utility function types
-async function testUtils() {
-  await setSharedLibLocaleAsync('en-US');
-  const translated: string = tr('key');
-  const translatedWithParams: string = tr('key', { name: 'test' });
-}
-```
-
-**Step 3: Run test to verify it fails (RED)**
-
-```bash
-cd /home/zknowles/repos/fe-shared-lib && npx tsc -p types-test/tsconfig.json --noEmit
-```
-
-Expected: FAIL with `TS7016: Could not find a declaration file for module`
-
-**Step 4: Commit test infrastructure**
-
-```bash
-git add types-test/
-git commit -m "$(cat <<'EOF'
-test: add type test infrastructure for TDD
-
-Sets up TypeScript compilation tests to verify declaration files work correctly.
-
-Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
-EOF
-)"
-```
-
----
-
-## Task 2: Create Minimal index.d.ts Skeleton
-
-**Files:**
-- Create: `index.d.ts`
-
-**Step 1: The test from Task 1 is already failing (RED)**
-
-Verify it still fails:
-```bash
-cd /home/zknowles/repos/fe-shared-lib && npx tsc -p types-test/tsconfig.json --noEmit
-```
-
-**Step 2: Write minimal declaration file to make test pass (GREEN)**
-
-```typescript
-// index.d.ts
-import { DefineComponent } from 'vue';
-
-// ============ Utility Functions ============
-export function setSharedLibLocaleAsync(locale?: string): Promise<void>;
-export function tr(key: string, params?: Record<string, unknown>): string;
-
-// ============ API Clients ============
-export const brandPageApiClient: unknown;
-export const brandCrowdApiClient: unknown;
-
-// ============ Constants ============
-export const WEBSITE_UPGRADE_CONTEXT_TYPES: Record<string, string>;
-
-// ============ Components (Stubs) ============
-// These will be refined in subsequent tasks
-
-export const Button: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Modal: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Icon: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-
-// ... all other components as stubs (added in Task 3)
-```
-
-**Step 3: Run test to verify it passes (GREEN)**
-
-```bash
-cd /home/zknowles/repos/fe-shared-lib && npx tsc -p types-test/tsconfig.json --noEmit
-```
-
-Expected: PASS (no output, exit code 0)
-
-**Step 4: Commit**
-
-```bash
-git add index.d.ts
-git commit -m "$(cat <<'EOF'
-feat: add minimal TypeScript declaration skeleton
-
-Initial index.d.ts with utility functions and component stubs.
-
-Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
-EOF
-)"
-```
-
----
-
-## Task 3: Add All Component Stub Declarations
-
-**Files:**
-- Modify: `index.d.ts`
-- Create: `types-test/all-components.test.ts`
-
-**Step 1: Write failing test for all component imports (RED)**
-
-```typescript
-// types-test/all-components.test.ts
-import {
-  // Experiences
-  UploadYourLogoDropzone,
-  UploadYourLogoApplication,
-  UploadedLogoSearchResultCard,
-  SignUpModal,
-  SignUp,
-  SignIn,
-  ForgotPasswordModal,
-  ForgotPassword,
-  ResetPasswordModal,
-  ResetPassword,
-  ResetPasswordSuccessModal,
-  PaymentConfigList,
-  PaymentConfigDropdown,
-  SellDomainNameListModal,
-  SellDomainNameList,
-  SellDomainNameWidget,
-  PublishBrandPageModal,
-  PublishBrandPageCard,
-  WebsiteContextualUpgradeModal,
-  // Atoms
-  Button,
-  ButtonGroup,
-  Dropdown,
-  DropdownItem,
-  Icon,
-  DcomIcon,
-  Modal,
-  Loader,
-  Tooltip,
-  Picture,
-  HelloBar,
-  PromoCard,
-  SearchBar,
-  StarRating,
-  TabMenu,
-  TextInput,
-  TextCopyField,
-  Textarea,
-  Toggle,
-  Checkbox,
-  ColorPicker,
-  Carousel,
-  Checktile,
-  Pill,
-  PillBar,
-  Notice,
-  Masonry,
-  CollapsiblePanel,
-  Slider,
-  Price,
-  HashRouteModal,
-  Select,
-  NumberStepper,
-  CopyToClipboardText,
-  SparkleIcon,
-  // Utilities
-  setSharedLibLocaleAsync,
-  tr,
-  brandPageApiClient,
-  brandCrowdApiClient,
-  WEBSITE_UPGRADE_CONTEXT_TYPES,
-} from '..';
-
-// All imports should be defined
-const components = [
-  UploadYourLogoDropzone,
-  UploadYourLogoApplication,
-  UploadedLogoSearchResultCard,
-  SignUpModal,
-  SignUp,
-  SignIn,
-  ForgotPasswordModal,
-  ForgotPassword,
-  ResetPasswordModal,
-  ResetPassword,
-  ResetPasswordSuccessModal,
-  PaymentConfigList,
-  PaymentConfigDropdown,
-  SellDomainNameListModal,
-  SellDomainNameList,
-  SellDomainNameWidget,
-  PublishBrandPageModal,
-  PublishBrandPageCard,
-  WebsiteContextualUpgradeModal,
-  Button,
-  ButtonGroup,
-  Dropdown,
-  DropdownItem,
-  Icon,
-  DcomIcon,
-  Modal,
-  Loader,
-  Tooltip,
-  Picture,
-  HelloBar,
-  PromoCard,
-  SearchBar,
-  StarRating,
-  TabMenu,
-  TextInput,
-  TextCopyField,
-  Textarea,
-  Toggle,
-  Checkbox,
-  ColorPicker,
-  Carousel,
-  Checktile,
-  Pill,
-  PillBar,
-  Notice,
-  Masonry,
-  CollapsiblePanel,
-  Slider,
-  Price,
-  HashRouteModal,
-  Select,
-  NumberStepper,
-  CopyToClipboardText,
-  SparkleIcon,
-];
-```
-
-**Step 2: Run test to verify it fails (RED)**
-
-```bash
-cd /home/zknowles/repos/fe-shared-lib && npx tsc -p types-test/tsconfig.json --noEmit
-```
-
-Expected: FAIL with errors for missing exports
-
-**Step 3: Add all component stubs to index.d.ts (GREEN)**
-
-Add to `index.d.ts`:
-
-```typescript
-// ============ Experience Components (Stubs) ============
-export const UploadYourLogoDropzone: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const UploadYourLogoApplication: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const UploadedLogoSearchResultCard: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const SignUpModal: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const SignUp: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const SignIn: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const ForgotPasswordModal: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const ForgotPassword: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const ResetPasswordModal: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const ResetPassword: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const ResetPasswordSuccessModal: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const PaymentConfigList: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const PaymentConfigDropdown: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const SellDomainNameListModal: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const SellDomainNameList: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const SellDomainNameWidget: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const PublishBrandPageModal: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const PublishBrandPageCard: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const WebsiteContextualUpgradeModal: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-
-// ============ Atom Components (Stubs) ============
-export const ButtonGroup: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Dropdown: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const DropdownItem: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const DcomIcon: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Loader: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Tooltip: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Picture: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const HelloBar: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const PromoCard: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const SearchBar: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const StarRating: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const TabMenu: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const TextCopyField: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const ColorPicker: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Carousel: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Checktile: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Pill: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const PillBar: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Notice: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Masonry: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const CollapsiblePanel: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Slider: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Price: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const HashRouteModal: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const NumberStepper: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const CopyToClipboardText: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const SparkleIcon: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-
-// Detailed components (will be typed in subsequent tasks)
-export const TextInput: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Textarea: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Toggle: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Checkbox: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-export const Select: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-```
-
-**Step 4: Run test to verify it passes (GREEN)**
-
-```bash
-cd /home/zknowles/repos/fe-shared-lib && npx tsc -p types-test/tsconfig.json --noEmit
-```
-
-Expected: PASS
-
-**Step 5: Commit**
-
-```bash
-git add index.d.ts types-test/all-components.test.ts
-git commit -m "$(cat <<'EOF'
-feat: add stub declarations for all components
-
-All 55 exported components now have TypeScript declarations (as generic stubs).
-
-Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
-EOF
-)"
-```
-
----
-
-## Task 4: Add Detailed Button Props Interface
-
-**Files:**
-- Modify: `index.d.ts`
-- Create: `types-test/button-props.test.ts`
-
-**Step 1: Write failing test for Button props (RED)**
-
-```typescript
-// types-test/button-props.test.ts
-import { Button } from '..';
-import type { ComponentProps } from 'vue';
-
-// Test that Button accepts specific props
-// This will fail until we add detailed ButtonProps
-
-type ButtonProps = ComponentProps<typeof Button>;
-
-// These should all be valid
-const validProps: ButtonProps = {
-  label: 'Click me',
-  variant: 'primary',
-  size: 'medium',
-  disabled: false,
-  isBusy: true,
-  fullWidth: false,
-  icon: 'chevron-right',
-  url: 'https://example.com',
-  theme: 'brandCrowd',
-};
-
-// Test specific prop types
-const label: ButtonProps['label'] = 'test';
-const variant: ButtonProps['variant'] = 'primary';
-const disabled: ButtonProps['disabled'] = true;
-```
-
-**Step 2: Run test to verify it fails (RED)**
-
-```bash
-cd /home/zknowles/repos/fe-shared-lib && npx tsc -p types-test/tsconfig.json --noEmit
-```
-
-Expected: FAIL - props are typed as `unknown` so specific assignments fail
-
-**Step 3: Add detailed ButtonProps interface (GREEN)**
-
-Update `index.d.ts` - replace the Button stub with:
-
-```typescript
-// ============ Detailed Component Types ============
-
-export interface ButtonProps {
-  attrs?: Record<string, unknown>;
-  label?: string;
-  url?: string;
-  theme?: 'brandCrowd' | 'crazyDomains' | string;
-  variant?: 'primary' | 'secondary' | 'success' | 'outline' | 'outline-primary' | 'outline-success' | 'outline-no-hover' | 'warning' | 'info' | 'info-filled' | 'gray' | 'no-border' | 'flat' | 'pill' | 'dark-mode-pill' | 'ai' | 'primary-with-icon' | string;
-  size?: 'small' | 'small-wide' | 'small-medium' | 'medium' | 'large' | string | null;
-  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
-  icon?: string;
-  iconViewBox?: string;
-  iconLeft?: string;
-  iconLeftSize?: string;
-  iconRight?: string;
-  iconRightSize?: string;
-  iconTop?: string;
-  iconTopSize?: string;
-  iconColor?: string;
-  fullWidth?: boolean;
-  fullHeight?: boolean;
-  classes?: string | Record<string, boolean>;
-  containerClasses?: string;
-  greyOutLeft?: boolean;
-  white?: boolean;
-  rounded?: boolean;
-  roundedLeft?: boolean;
-  roundedRight?: boolean;
-  disabled?: boolean;
-  isBusy?: boolean;
-  isBusyLabel?: string;
-  download?: string;
-  active?: boolean;
-  target?: '_self' | '_blank' | '_parent' | '_top' | string;
-  justify?: 'center' | 'between' | string;
-  type?: 'button' | 'submit' | 'reset' | string;
-  showLabel?: boolean;
-  dataAttribute?: string;
-  altText?: string;
-}
-
-export interface ButtonEmits {
-  'on-click': [event: Event];
-}
-
-export const Button: DefineComponent<ButtonProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, ButtonEmits>;
-```
-
-**Step 4: Run test to verify it passes (GREEN)**
-
-```bash
-cd /home/zknowles/repos/fe-shared-lib && npx tsc -p types-test/tsconfig.json --noEmit
-```
-
-Expected: PASS
-
-**Step 5: Commit**
-
-```bash
-git add index.d.ts types-test/button-props.test.ts
-git commit -m "$(cat <<'EOF'
-feat: add detailed ButtonProps interface
-
-Button component now has full prop type definitions with IDE autocomplete.
-
-Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
-EOF
-)"
-```
-
----
-
-## Task 5: Add Detailed Modal Props Interface
-
-**Files:**
-- Modify: `index.d.ts`
-- Create: `types-test/modal-props.test.ts`
-
-**Step 1: Write failing test for Modal props (RED)**
-
-```typescript
-// types-test/modal-props.test.ts
-import { Modal } from '..';
-import type { ComponentProps } from 'vue';
-
-type ModalProps = ComponentProps<typeof Modal>;
-
-const validProps: ModalProps = {
-  visible: true,
-  mandatory: false,
-  size: 'md',
-  closeOnEsc: true,
-};
-
-const visible: ModalProps['visible'] = true;
-const size: ModalProps['size'] = 'xl';
-```
-
-**Step 2: Run test to verify RED, then add ModalProps (GREEN)**
-
-```typescript
-export interface ModalProps {
-  simple?: boolean;
-  removeHorizontalMargin?: boolean;
-  removeHorizontalPadding?: boolean;
-  visible?: boolean;
-  mandatory?: boolean;
-  mode?: 'image' | string;
-  classes?: string | Record<string, boolean>;
-  contentClasses?: string[];
-  size?: 'md' | 'xl' | string;
-  fullScreenBreakpoint?: 'sm' | string;
-  closeOnEsc?: boolean;
-  hideScrollbar?: boolean;
-  showModalBackgroundImage?: boolean;
-  disableBodyScrollOnVisible?: boolean;
-  darkOverlay?: boolean;
-  transparentModal?: boolean;
-}
-
-export interface ModalEmits {
-  'close-modal': [event?: Event];
-}
-
-export const Modal: DefineComponent<ModalProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, ModalEmits>;
-```
-
-**Step 3: Run test, verify pass, commit**
-
-```bash
-git add index.d.ts types-test/modal-props.test.ts
-git commit -m "$(cat <<'EOF'
-feat: add detailed ModalProps interface
-
-Modal component now has full prop type definitions.
-
-Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
-EOF
-)"
-```
-
----
-
-## Task 6: Add Detailed Icon Props Interface
-
-**Files:**
-- Modify: `index.d.ts`
-- Create: `types-test/icon-props.test.ts`
-
-**Step 1: Write failing test, then implement (RED → GREEN)**
-
-```typescript
-// types-test/icon-props.test.ts
-import { Icon } from '..';
-import type { ComponentProps } from 'vue';
-
-type IconProps = ComponentProps<typeof Icon>;
-
-const validProps: IconProps = {
-  name: 'chevron-right',
-  size: 'md',
-  color: 'primary-500',
-};
-```
-
-**Step 2: Add IconProps interface**
-
-```typescript
-export interface IconProps {
-  viewBox?: string;
-  name: string;
-  altText?: string | null;
-  color?: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full' | 'button-icon' | string;
-  classes?: string;
-}
-
-export const Icon: DefineComponent<IconProps>;
-```
-
-**Step 3: Commit**
-
----
-
-## Task 7: Add Detailed TextInput Props Interface
-
-**Files:**
-- Modify: `index.d.ts`
-- Create: `types-test/text-input-props.test.ts`
-
-**Step 1: Write test then implement**
-
-```typescript
-export interface TextInputProps {
-  // From FormControlMixin
-  attrs?: Record<string, unknown>;
-  modelValue?: string | number;
-  id?: string;
-  placeholder?: string;
-  size?: 'sm' | string;
-  label?: string;
-  showLabelScreenReaderOnly?: boolean;
-  icon?: string;
-  required?: boolean;
-  error?: boolean;
-  warning?: boolean;
-  success?: boolean;
-  disabled?: boolean;
-  readonly?: boolean;
-  name?: string;
-  maxlength?: number;
-  minlength?: number;
-  isSpaceDisabled?: boolean;
-  requiredMessage?: string;
-  // TextInput-specific
-  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | string;
-  enableClear?: boolean;
-  enableClearConfirmation?: boolean;
-  borderLeft?: boolean;
-  borderRight?: boolean;
-  prefixText?: string;
-  elementClasses?: string;
-}
-
-export interface TextInputEmits {
-  'update:modelValue': [value: string | number];
-  'input': [value: string | number];
-  'keyup': [value: string | number];
-  'keydown': [value: string | number];
-  'focus': [value: string | number];
-  'blur': [value: string | number];
-  'enter-key-up': [value: string | number];
-  'on-clear': [];
-  'on-clear-confirmation': [];
-}
-
-export const TextInput: DefineComponent<TextInputProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, TextInputEmits>;
-```
-
----
-
-## Task 8: Add Detailed Textarea Props Interface
-
-**Step 1: Add TextareaProps (extends FormControlMixin props + textarea-specific)**
-
-```typescript
-export interface TextareaProps {
-  // From FormControlMixin (same as TextInput)
-  attrs?: Record<string, unknown>;
-  modelValue?: string | number;
-  id?: string;
-  placeholder?: string;
-  size?: 'sm' | 'md' | 'lg' | string;
-  label?: string;
-  showLabelScreenReaderOnly?: boolean;
-  icon?: string;
-  required?: boolean;
-  error?: boolean;
-  warning?: boolean;
-  success?: boolean;
-  disabled?: boolean;
-  readonly?: boolean;
-  name?: string;
-  maxlength?: number;
-  minlength?: number;
-  isSpaceDisabled?: boolean;
-  requiredMessage?: string;
-  // Textarea-specific
-  resize?: boolean;
-  shouldAutoFitContent?: boolean;
-  elementClasses?: string;
-}
-
-export const Textarea: DefineComponent<TextareaProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, TextInputEmits>;
-```
-
----
-
-## Task 9: Add Detailed Checkbox and Toggle Props Interfaces
-
-```typescript
-export interface CheckboxProps {
-  modelValue: boolean;
-  id: string;
-  label?: string;
-  showLabelScreenReaderOnly?: boolean;
-  inline?: boolean;
-  required?: boolean;
-  disabled?: boolean;
-  color?: 'success' | 'info' | 'error' | 'warning' | 'primary' | string;
-  size?: 'sm' | 'md' | string;
-  showBorder?: boolean;
-  classes?: string | Record<string, boolean>;
-}
-
-export interface CheckboxEmits {
-  'update:modelValue': [value: boolean];
-}
-
-export const Checkbox: DefineComponent<CheckboxProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, CheckboxEmits>;
-
-// Toggle uses same props as Checkbox
-export const Toggle: DefineComponent<CheckboxProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, CheckboxEmits>;
-```
-
----
-
-## Task 10: Add Detailed Dropdown Props Interface
-
-```typescript
-export interface DropdownProps {
-  menuAlign?: 'left' | 'right' | string;
-  title?: string;
-  elementClasses?: string;
-  menuElementClasses?: string;
-  disabled?: boolean;
-  show?: boolean;
-  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | string;
-  tooltip?: string;
-}
-
-export interface DropdownEmits {
-  'update:show': [value: boolean];
-}
-
-export const Dropdown: DefineComponent<DropdownProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, DropdownEmits>;
-```
-
----
-
-## Task 11: Add Detailed Select Props Interface
-
-```typescript
-export interface SelectOption {
-  $isDisabled?: boolean;
-  isCustom?: boolean;
-  label?: string;
-  [key: string]: unknown;
-}
-
-export interface SelectProps {
-  // From selectMixin
-  isInternalSearch?: boolean;
-  options: SelectOption[] | string[];
-  modelValue?: string | SelectOption | null;
-  trackBy?: string | null;
-  label?: string;
-  imageUrlField?: string | null;
-  isSearchable?: boolean;
-  shouldHideSelected?: boolean;
-  placeholder?: string;
-  shouldAllowEmpty?: boolean;
-  shouldResetAfter?: boolean;
-  shouldCloseOnSelect?: boolean;
-  customLabel?: (option: SelectOption | string, label?: string) => string;
-  shouldAllowCustom?: boolean;
-  customPlaceholder?: string;
-  customPosition?: 'top' | 'bottom' | string;
-  id?: string | null;
-  optionsLimit?: number;
-  shouldPreserveSearch?: boolean;
-  shouldPreselectFirst?: boolean;
-  shouldPreventAutofocus?: boolean;
-  isDisabled?: boolean;
-  // From Select.vue
-  name?: string;
-  selectLabel?: string;
-  selectedLabel?: string;
-  deselectLabel?: string;
-  shouldShowLabels?: boolean;
-  maxHeight?: number;
-  isLoading?: boolean;
-  openDirection?: 'above' | 'below' | 'top' | 'bottom' | string;
-  shouldShowNoResults?: boolean;
-  tabindex?: number;
-  shouldSelectExactMatchOnBlur?: boolean;
-  isInvalid?: boolean;
-}
-
-export interface SelectEmits {
-  'update:modelValue': [option: SelectOption | string | null, id?: string | null];
-  'search-change': [search: string, id?: string | null];
-  'remove': [option: SelectOption | string, id?: string | null];
-  'open': [id?: string | null];
-  'close': [value: SelectOption | string | null, id?: string | null];
-  'custom': [label: string, id?: string | null];
-}
-
-export const Select: DefineComponent<SelectProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, SelectEmits>;
-```
-
----
-
-## Task 12: Add Loader Props Interface
-
-```typescript
-// Loader has no props - it's a simple SVG spinner
-export interface LoaderProps {}
-
-export const Loader: DefineComponent<LoaderProps>;
-```
-
----
-
-## Task 13: Update package.json Exports
-
-**Files:**
-- Modify: `package.json`
-
-**Step 1: Write failing test that verifies types field is recognized**
-
-The test infrastructure already validates this - if the types field is missing, the imports would fail.
-
-**Step 2: Update package.json exports**
-
-Add `"types"` field to the exports:
-
-```json
-{
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "require": "./index.cjs",
-      "import": "./index.js"
-    },
-    "./src/*.vue": {
-      "import": "./src/*.vue"
-    },
-    "./src/*.js": {
-      "import": "./src/*.js"
-    }
-  }
-}
-```
-
-**Step 3: Run all type tests to verify (GREEN)**
-
-```bash
-cd /home/zknowles/repos/fe-shared-lib && npx tsc -p types-test/tsconfig.json --noEmit
-```
-
-**Step 4: Commit**
-
-```bash
-git add package.json
-git commit -m "$(cat <<'EOF'
-feat: add types field to package.json exports
-
-Consumers will now automatically get TypeScript declarations.
-
-Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
-EOF
-)"
-```
-
----
-
-## Task 14: Final Verification and Cleanup
-
-**Step 1: Run full type check**
-
-```bash
-cd /home/zknowles/repos/fe-shared-lib && npx tsc -p types-test/tsconfig.json --noEmit
-```
-
-**Step 2: Verify lint passes**
-
-```bash
-npm run lint
-```
-
-**Step 3: Final commit combining all declaration files**
-
-```bash
-git add -A
-git commit -m "$(cat <<'EOF'
-feat: complete TypeScript declarations for fe-shared-lib
-
-- Full prop interfaces for 10 most-used components (Button, Modal, Icon,
-  TextInput, Textarea, Checkbox, Toggle, Dropdown, Select, Loader)
-- Generic stubs for remaining 45+ components
-- Type-safe utility functions (setSharedLibLocaleAsync, tr)
-- Comprehensive type tests validating all exports
-
-Resolves TS7016 errors in consuming projects like BrandCrowd.Nuxt.
-
-Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
-EOF
-)"
-```
-
----
-
-## Verification Checklist
-
-Before marking complete:
-
-- [ ] `index.d.ts` exists at package root
-- [ ] All 55 exports from `index.js` have declarations
-- [ ] 10 most-used components have detailed prop interfaces
-- [ ] `package.json` has `"types": "./index.d.ts"` in exports
-- [ ] All type tests pass: `npx tsc -p types-test/tsconfig.json --noEmit`
-- [ ] Lint passes: `npm run lint`
-- [ ] Each task had a failing test before implementation
-
----
-
-## Post-Implementation: Consumer Testing
-
-After publishing, verify in BrandCrowd.Nuxt:
-
-```bash
-# In BrandCrowd.Nuxt directory
-npm link ../fe-shared-lib
-npx vue-tsc --noEmit
-```
-
-Expected: TS7016 errors for `@designcrowd/fe-shared-lib` should be resolved.