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

package/index.d.ts

@@ -0,0 +1,309 @@
+// 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>;
+
+// ============ 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>;
+
+// ============ Detailed Component Types ============
+
+export interface ButtonProps {
+  attrs?: Record<string, unknown>;
+  label?: string;
+  url?: string | null;
+  theme?: 'brandCrowd' | 'crazyDomains' | string | null;
+  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 | null;
+  size?: 'small' | 'small-wide' | 'small-medium' | 'medium' | 'large' | string | null;
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+  icon?: string | null;
+  iconViewBox?: string | null;
+  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 | null;
+}
+
+export interface ButtonEmits {
+  'on-click': [event: Event];
+}
+
+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 interface IconProps {
+  viewBox?: string;
+  name: string;  // required
+  altText?: string | null;
+  color?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full' | 'button-icon' | string;
+  classes?: string;
+}
+
+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 interface TextareaProps {
+  // Same as TextInput mixin props
+  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 interface CheckboxProps {
+  modelValue: boolean;  // required
+  id: string;  // required
+  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 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 interface SelectOption {
+  $isDisabled?: boolean;
+  isCustom?: boolean;
+  label?: string;
+  [key: string]: unknown;
+}
+
+export interface SelectProps {
+  // From selectMixin
+  isInternalSearch?: boolean;
+  options: SelectOption[] | string[];  // required
+  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];
+}
+
+// Loader has no props - it's a simple SVG spinner
+export interface LoaderProps {}
+
+// ============ Atom Components (Stubs) ============
+export const Button: DefineComponent<ButtonProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, ButtonEmits>;
+export const ButtonGroup: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+export const Dropdown: DefineComponent<DropdownProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, DropdownEmits>;
+export const DropdownItem: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+export const Icon: DefineComponent<IconProps, Record<string, unknown>, unknown>;
+export const DcomIcon: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+export const Modal: DefineComponent<ModalProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, ModalEmits>;
+export const Loader: DefineComponent<LoaderProps>;
+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 TextInput: DefineComponent<TextInputProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, TextInputEmits>;
+export const TextCopyField: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+export const Textarea: DefineComponent<TextareaProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, TextInputEmits>;
+export const Toggle: DefineComponent<CheckboxProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, CheckboxEmits>;
+export const Checkbox: DefineComponent<CheckboxProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, CheckboxEmits>;
+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 Select: DefineComponent<SelectProps, Record<string, unknown>, unknown, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, SelectEmits>;
+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>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.20-ast-icons-1",
+  "version": "1.5.20-dts-upgrades",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -99,6 +99,7 @@
   },
   "exports": {
     ".": {
+      "types": "./index.d.ts",
       "require": "./index.cjs",
       "import": "./index.js"
     },

package/src/atoms/components/Icon/Icon.stories.js

@@ -261,8 +261,6 @@ export const IconSample = () => {
           { name: 'watchlist-filled' },
           { name: 'watchlist-hollow' },
           { name: 'watchlist-hollow-alt' },
-          { name: 'link-in-bio-filled' },
-          { name: 'digital-business-card-filled' },
           { name: 'website-filled' },
           { name: 'website' },
           { name: 'wholesale' },

package/src/atoms/components/Icon/Icon.vue

@@ -304,8 +304,6 @@ import IconWatchlistFilled from './icons/watchlist-filled.vue';
 import IconWatchlistHollowAlt from './icons/watchlist-hollow-alt.vue';
 import IconWatchlistHollow from './icons/watchlist-hollow.vue';
 import IconWebsiteFilled from './icons/website-filled.vue';
-import IconDigitalBusinessCardFilled from './icons/digital-business-card-filled.vue';
-import IconLinkInBioFilled from './icons/link-in-bio-filled.vue';
 import IconWebsite from './icons/website.vue';
 import IconWholesale from './icons/wholesale.vue';
 import IconZoomIn from './icons/zoom-in.vue';
@@ -685,8 +683,6 @@ export default {
     IconWatchlistHollow,
     IconWatchlistHollowAlt,
     IconWebsite,
-    IconDigitalBusinessCardFilled,
-    IconLinkInBioFilled,
     IconWebsiteFilled,
     IconWholesale,
     IconZoom,

package/src/useSharedLibTranslate.js

@@ -7,8 +7,10 @@ const relativePathsToTranslationFiles = {
   'en-US': () => import('./bundles/bundled-translations.json'),
   'de-DE': () => import('./bundles/bundled-translations.de-DE.json'),
   'fr-FR': () => import('./bundles/bundled-translations.fr-FR.json'),
+  'fr-CA': () => import('./bundles/bundled-translations.fr-CA.json'),
   'es-ES': () => import('./bundles/bundled-translations.es-ES.json'),
   'pt-PT': () => import('./bundles/bundled-translations.pt-PT.json'),
+  'pt-BR': () => import('./bundles/bundled-translations.pt-BR.json'),
 };
 
 const setSharedLibLocaleAsync = async (locale = 'en-US') => {

package/types-test/all-components.test.ts

@@ -0,0 +1,81 @@
+// 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,
+];

package/types-test/basic-imports.test.ts

@@ -0,0 +1,16 @@
+// 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' });
+}

package/types-test/button-props.test.ts

@@ -0,0 +1,63 @@
+// types-test/button-props.test.ts
+// This file tests that ButtonProps interface is properly exported and typed
+
+import { Button, type ButtonProps } from '..';
+
+// Test that ButtonProps can be used as a type
+const props: ButtonProps = {
+  label: 'Click me',
+  variant: 'primary',
+  disabled: false,
+};
+
+// Test that props have specific types (these should compile without errors)
+const label: ButtonProps['label'] = 'test';
+const variant: ButtonProps['variant'] = 'primary';
+const disabled: ButtonProps['disabled'] = true;
+const size: ButtonProps['size'] = 'medium';
+const theme: ButtonProps['theme'] = 'brandCrowd';
+const fullWidth: ButtonProps['fullWidth'] = true;
+const iconLeft: ButtonProps['iconLeft'] = 'chevron-left';
+const iconRight: ButtonProps['iconRight'] = 'chevron-right';
+const isBusy: ButtonProps['isBusy'] = false;
+const target: ButtonProps['target'] = '_blank';
+const type: ButtonProps['type'] = 'submit';
+
+// Test that Button component is typed
+const _button: typeof Button = Button;
+
+// Test that all known variants are accepted
+const variantProps: ButtonProps = {
+  variant: 'outline-primary',
+};
+
+const variantProps2: ButtonProps = {
+  variant: 'success',
+};
+
+const variantProps3: ButtonProps = {
+  variant: 'warning',
+};
+
+// Test size values
+const sizeProps: ButtonProps = {
+  size: 'small',
+};
+
+const sizeProps2: ButtonProps = {
+  size: 'large',
+};
+
+// Test classes can be string or object
+const classesString: ButtonProps = {
+  classes: 'custom-class',
+};
+
+const classesObject: ButtonProps = {
+  classes: { 'custom-class': true },
+};
+
+// Test that attrs accepts Record<string, unknown>
+const attrsProps: ButtonProps = {
+  attrs: { 'data-testid': 'button-test' },
+};

package/types-test/checkbox-toggle-props.test.ts

@@ -0,0 +1,78 @@
+// types-test/checkbox-toggle-props.test.ts
+// This file tests that CheckboxProps and CheckboxEmits interfaces are properly exported and typed
+
+import { Checkbox, Toggle, type CheckboxProps, type CheckboxEmits } from '..';
+
+// Test that CheckboxProps can be used as a type
+const props: CheckboxProps = {
+  modelValue: true,
+  id: 'checkbox-1',
+  label: 'Accept terms',
+};
+
+// Test required props
+const modelValue: CheckboxProps['modelValue'] = true;
+const id: CheckboxProps['id'] = 'checkbox-id';
+
+// Test optional props
+const label: CheckboxProps['label'] = 'Remember me';
+const showLabelScreenReaderOnly: CheckboxProps['showLabelScreenReaderOnly'] = true;
+const inline: CheckboxProps['inline'] = true;
+const required: CheckboxProps['required'] = true;
+const disabled: CheckboxProps['disabled'] = false;
+const showBorder: CheckboxProps['showBorder'] = true;
+
+// Test color variants
+const colorSuccess: CheckboxProps = { modelValue: true, id: 'cb', color: 'success' };
+const colorInfo: CheckboxProps = { modelValue: true, id: 'cb', color: 'info' };
+const colorError: CheckboxProps = { modelValue: true, id: 'cb', color: 'error' };
+const colorWarning: CheckboxProps = { modelValue: true, id: 'cb', color: 'warning' };
+const colorPrimary: CheckboxProps = { modelValue: true, id: 'cb', color: 'primary' };
+
+// Test size variants
+const sizeSm: CheckboxProps = { modelValue: true, id: 'cb', size: 'sm' };
+const sizeMd: CheckboxProps = { modelValue: true, id: 'cb', size: 'md' };
+
+// Test classes can be string or object
+const classesString: CheckboxProps = {
+  modelValue: true,
+  id: 'cb',
+  classes: 'custom-class',
+};
+
+const classesObject: CheckboxProps = {
+  modelValue: true,
+  id: 'cb',
+  classes: { 'custom-class': true },
+};
+
+// Test that Checkbox component is typed
+const _checkbox: typeof Checkbox = Checkbox;
+
+// Test that Toggle component uses same props
+const _toggle: typeof Toggle = Toggle;
+
+// Toggle with same props as Checkbox
+const toggleProps: CheckboxProps = {
+  modelValue: false,
+  id: 'toggle-1',
+  label: 'Dark mode',
+  color: 'primary',
+  size: 'md',
+  inline: true,
+};
+
+// Test complete props object
+const fullProps: CheckboxProps = {
+  modelValue: true,
+  id: 'terms-checkbox',
+  label: 'I accept the terms and conditions',
+  showLabelScreenReaderOnly: false,
+  inline: false,
+  required: true,
+  disabled: false,
+  color: 'success',
+  size: 'md',
+  showBorder: true,
+  classes: 'my-checkbox',
+};

package/types-test/dropdown-props.test.ts

@@ -0,0 +1,36 @@
+import { Dropdown, type DropdownProps, type DropdownEmits } from '..';
+
+// Test DropdownProps interface
+const dropdownProps: DropdownProps = {
+  menuAlign: 'right',
+  title: 'Select an option',
+  elementClasses: 'tw-custom-class',
+  menuElementClasses: 'tw-menu-class',
+  disabled: false,
+  show: false,
+  iconSize: 'sm',
+  tooltip: 'Click to open',
+};
+
+// Test with minimal props
+const minimalProps: DropdownProps = {};
+
+// Test menu alignment options
+const leftAligned: DropdownProps = { menuAlign: 'left' };
+const rightAligned: DropdownProps = { menuAlign: 'right' };
+const customAlign: DropdownProps = { menuAlign: 'center' }; // string allows custom values
+
+// Test icon sizes
+const xsIcon: DropdownProps = { iconSize: 'xs' };
+const smIcon: DropdownProps = { iconSize: 'sm' };
+const mdIcon: DropdownProps = { iconSize: 'md' };
+const lgIcon: DropdownProps = { iconSize: 'lg' };
+
+// Test disabled state
+const disabledDropdown: DropdownProps = { disabled: true };
+
+// Test show state (v-model:show)
+const visibleDropdown: DropdownProps = { show: true };
+
+// Verify component type includes props and emits
+type DropdownComponent = typeof Dropdown;