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

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

@@ -0,0 +1,953 @@
+# 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.