fds-vue-core 2.0.88 → 2.1.0

package/src/components/Typography/FdsSeparator/FdsSeparator.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsSeparator from './FdsSeparator.vue'
+
+const meta: Meta<typeof FdsSeparator> = {
+  title: 'FDS/Typography/FdsSeparator',
+  component: FdsSeparator,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { FdsSeparator },
+    template: `
+      <div>
+        <p>Text above separator</p>
+        <FdsSeparator />
+        <p>Text below separator</p>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<FdsSeparator />`,
+      },
+    },
+  },
+}

package/src/components/Typography/FdsSeparator/FdsSeparator.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <hr class="block border-0 h-px w-full bg-black/12 my-4" />
+</template>

package/src/components/Typography/FdsText/FdsText.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsText from './FdsText.vue'
+
+const meta: Meta<typeof FdsText> = {
+  title: 'FDS/Typography/FdsText',
+  component: FdsText,
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: { type: 'radio' }, options: ['default', 'lead', 'meta'] },
+  },
+  args: {
+    type: 'default',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const textTransform = (storyContext: { args?: { type?: string } }) => {
+  const args = storyContext?.args || {}
+  const attrsStr = args.type && args.type !== 'default' ? ` type="${args.type}"` : ''
+  return `<FdsText${attrsStr}>Text content</FdsText>`
+}
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsText },
+    setup: () => ({ args }),
+    template: `<FdsText :type="args.type">Text content</FdsText>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: textTransform,
+      },
+    },
+  },
+}
+
+export const Lead: Story = {
+  render: () => ({
+    components: { FdsText },
+    template: `<FdsText type="lead">Lead text with larger font size and lighter weight</FdsText>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<FdsText type="lead">Lead text with larger font size and lighter weight</FdsText>`,
+      },
+    },
+  },
+}
+
+export const MetaType: Story = {
+  render: () => ({
+    components: { FdsText },
+    template: `<FdsText type="meta">Meta text with lighter font weight</FdsText>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<FdsText type="meta">Meta text with lighter font weight</FdsText>`,
+      },
+    },
+  },
+}

package/src/components/Typography/FdsText/FdsText.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FdsTextProps } from './types'
+
+const props = withDefaults(defineProps<FdsTextProps>(), {
+  type: 'default',
+})
+
+const textClasses = computed(() => {
+  const baseClasses = 'inline-block'
+
+  if (props.type === 'lead') {
+    return `${baseClasses} font-light text-lg`
+  }
+
+  if (props.type === 'meta') {
+    return `${baseClasses} font-light`
+  }
+
+  return baseClasses
+})
+</script>
+
+<template>
+  <span :class="textClasses">
+    <slot />
+  </span>
+</template>

package/src/components/Typography/FdsText/types.ts

@@ -0,0 +1,3 @@
+export interface FdsTextProps {
+  type?: 'default' | 'lead' | 'meta'
+}

package/src/composables/useBoldQuery.ts

@@ -0,0 +1,29 @@
+import type { Ref } from 'vue'
+
+/**
+ * Composable for bolding search query matches in text
+ * @param searchTerm - Reactive search term (Ref<string>)
+ * @returns Function that takes text and returns HTML with matched query bolded
+ */
+export function useBoldQuery(searchTerm: Ref<string>) {
+  const boldQuery = (text: string): string => {
+    const query = searchTerm.value.trim()
+    if (!query) return text
+
+    const lowerText = text.toLowerCase()
+    const lowerQuery = query.toLowerCase()
+    const matchIndex = lowerText.indexOf(lowerQuery)
+
+    if (matchIndex === -1) return text
+
+    const beforeMatch = text.substring(0, matchIndex)
+    const match = text.substring(matchIndex, matchIndex + query.length)
+    const afterMatch = text.substring(matchIndex + query.length)
+
+    return `${beforeMatch}<b>${match}</b>${afterMatch}`
+  }
+
+  return {
+    boldQuery,
+  }
+}

package/src/composables/useElementFinalSize.ts

@@ -0,0 +1,24 @@
+import { watchEffect, type Ref } from 'vue'
+
+export function useElementFinalSize(
+  elementRef: Ref<HTMLElement | null>,
+  onFinalSize: (height: number) => void,
+  delay = 100,
+) {
+  watchEffect((onCleanup) => {
+    const { value: element } = elementRef
+    if (!element) return
+
+    // Wait for next frame after a short delay, then measure
+    const timeoutId = setTimeout(() => {
+      requestAnimationFrame(() => {
+        const { height } = element.getBoundingClientRect()
+        if (height > 0) {
+          onFinalSize(height)
+        }
+      })
+    }, delay)
+
+    onCleanup(() => clearTimeout(timeoutId))
+  })
+}

package/src/composables/useHasSlots.ts

@@ -0,0 +1,17 @@
+import { Comment, computed, useSlots, type VNode } from 'vue'
+
+/**
+ * Check if a slot has any real content (ignores comment nodes)
+ * @param name Slot name, default is "default"
+ */
+export function useHasSlot(name: string = 'default') {
+  const slots = useSlots()
+
+  return computed(() => {
+    const slotFn = slots[name]
+    if (!slotFn) return false
+
+    const vnodes: VNode[] = slotFn()
+    return vnodes.some((vnode) => vnode.type !== Comment)
+  })
+}

package/src/composables/useIsPid.ts

@@ -0,0 +1,48 @@
+import { computed, type Ref } from 'vue'
+
+/**
+ * Check if a string looks like a personnummer (Swedish personal identity number)
+ * @param value - String value to check
+ * @returns Boolean indicating if the value looks like a personnummer
+ */
+export function isPidString(value: string): boolean {
+  const digitsOnly = value.replace(/\D/g, '')
+
+  // Personnummer has 12 digits total (8 digits before dash, 4 after)
+  // Activate detection when user has typed 6+ digits (likely a date yyyymmdd)
+  // This avoids detecting phone numbers which typically start with +46, 0, or have different patterns
+  if (digitsOnly.length < 6) {
+    return false
+  }
+
+  // Check if it looks like a date (first 6 digits should be reasonable year + month)
+  // Years are typically 19xx-20xx, months 01-12
+  const firstSix = digitsOnly.substring(0, 6)
+  const year = parseInt(firstSix.substring(0, 4))
+  const month = parseInt(firstSix.substring(4, 6))
+
+  // Valid year range (1900-2099) and valid month (01-12)
+  if (year >= 1900 && year <= 2099 && month >= 1 && month <= 12) {
+    return true
+  }
+
+  // If user has typed 8+ digits, assume it's a personnummer
+  if (digitsOnly.length >= 8) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Composable for detecting if a string looks like a personnummer (Swedish personal identity number)
+ * @param value - Reactive string value to check (Ref<string>)
+ * @returns Computed boolean indicating if the value looks like a personnummer
+ */
+export function useIsPid(value: Ref<string>) {
+  const isPid = computed(() => isPidString(value.value))
+
+  return {
+    isPid,
+  }
+}

package/src/docs/Start/Start.mdx

@@ -0,0 +1,12 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks'
+
+<Meta title="Start" />
+
+<div className="sb-container">
+  <div className="sb-section-title">
+    <h1>Welcome to Feelgood Design System</h1>
+    <fds-text type="lead">
+      Everything you'll eventually need to build great and accessible solutions for Feelgood.
+    </fds-text>
+  </div>
+</div>

package/src/docs/Usage.md

@@ -0,0 +1,117 @@
+# FDS Vue Core - Usage Guide
+
+## Installation
+
+### From npm
+
+Install the package from npm:
+
+```bash
+yarn add fds-vue-core
+```
+
+### Local Development with yarn link
+
+For local development, you can link the package to your project:
+
+1. In the `fds-vue-core` directory, create a global link:
+
+```bash
+yarn link
+```
+
+2. In your consuming project, link to the local package:
+
+```bash
+yarn link fds-vue-core
+```
+
+3. To unlink when you're done:
+
+```bash
+# In your consuming project
+yarn unlink fds-vue-core
+
+# In the fds-vue-core directory
+yarn unlink
+```
+
+**Note:** After making changes to `fds-vue-core`, you may need to rebuild the package for changes to take effect:
+
+```bash
+yarn build
+```
+
+## Basic Usage
+
+### Global Registration
+
+Import and register all components globally in your Vue app:
+
+```javascript
+import { createApp } from 'vue'
+import App from './App.vue'
+import FDS from 'fds-vue-core'
+
+const app = createApp(App)
+app.use(FDS)
+app.mount('#app')
+```
+
+### Individual Component Import
+
+Import specific components as needed:
+
+```javascript
+import { FdsButton, FdsInput, FdsModal } from 'fds-vue-core'
+```
+
+Register them locally:
+
+```javascript
+export default {
+  components: {
+    FdsButton,
+    FdsInput,
+    FdsModal,
+  },
+}
+```
+
+## Tailwind CSS Configuration
+
+All components use Tailwind CSS classes. Make sure your Tailwind configuration includes the necessary utilities.
+
+### tailwind.config.js
+
+```javascript
+import preset from 'fds-vue-core/tailwind.preset.cjs'
+
+export default {
+  presets: [preset],
+  // Your other Tailwind configuration
+}
+```
+
+### style.css
+
+```css
+@import 'fds-vue-core/tokens.css';
+@import 'tailwindcss';
+@source '../node_modules/fds-vue-core';
+@import 'fds-vue-core/slot-styles.css';
+@import 'fds-vue-core/apply.css';
+@import 'fds-vue-core/fonts.css';
+```
+
+## TypeScript Support
+
+All components are fully typed. Type definitions are included in the package.
+
+## Further Documentation
+
+For detailed component API documentation and examples, see Storybook:
+
+```bash
+yarn storybook
+```

package/src/fonts.css

@@ -0,0 +1,28 @@
+@font-face {
+  font-family: 'IBM-Plex-Sans';
+  src:
+    url('assets/fonts/IBMPlexSans-Light.woff2') format('woff2'),
+    url('assets/fonts/IBMPlexSans-Light.woff') format('woff');
+  font-weight: 100 399;
+}
+@font-face {
+  font-family: 'IBM-Plex-Sans';
+  src:
+    url('assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
+    url('assets/fonts/IBMPlexSans-Regular.woff') format('woff');
+  font-weight: 400 599;
+}
+@font-face {
+  font-family: 'IBM-Plex-Sans';
+  src:
+    url('assets/fonts/IBMPlexSans-Bold.woff2') format('woff2'),
+    url('assets/fonts/IBMPlexSans-Bold.woff') format('woff');
+  font-weight: 600 800;
+}
+@font-face {
+  font-family: 'Raleway';
+  src:
+    url('assets/fonts/Raleway-ExtraBold.woff2') format('woff2'),
+    url('assets/fonts/Raleway-ExtraBold.woff') format('woff');
+  font-weight: 100 800;
+}

package/src/global-components.ts

@@ -0,0 +1,38 @@
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    FdsTreeView: (typeof import('./components/FdsTreeView/FdsTreeView.vue'))['default']
+    FdsButtonPrimary: (typeof import('./components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'))['default']
+    FdsButtonSecondary: (typeof import('./components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'))['default']
+    FdsButtonMinor: (typeof import('./components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'))['default']
+    FdsButtonIcon: (typeof import('./components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'))['default']
+    FdsButtonCopy: (typeof import('./components/Buttons/FdsButtonCopy/FdsButtonCopy.vue'))['default']
+    FdsButtonDownload: (typeof import('./components/Buttons/FdsButtonDownload/FdsButtonDownload.vue'))['default']
+    FdsIcon: (typeof import('./components/FdsIcon/FdsIcon.vue'))['default']
+    FdsSpinner: (typeof import('./components/FdsSpinner/FdsSpinner.vue'))['default']
+    FdsRadio: (typeof import('./components/Form/FdsRadio/FdsRadio.vue'))['default']
+    FdsInput: (typeof import('./components/Form/FdsInput/FdsInput.vue'))['default']
+    FdsCheckbox: (typeof import('./components/Form/FdsCheckbox/FdsCheckbox.vue'))['default']
+    FdsTextarea: (typeof import('./components/Form/FdsTextarea/FdsTextarea.vue'))['default']
+    FdsSelect: (typeof import('./components/Form/FdsSelect/FdsSelect.vue'))['default']
+    FdsTable: (typeof import('./components/Table/FdsTable/FdsTable.vue'))['default']
+    FdsTableHead: (typeof import('./components/Table/FdsTableHead/FdsTableHead.vue'))['default']
+    FdsBlockContent: (typeof import('./components/Blocks/FdsBlockContent/FdsBlockContent.vue'))['default']
+    FdsBlockInfo: (typeof import('./components/Blocks/FdsBlockInfo/FdsBlockInfo.vue'))['default']
+    FdsBlockAlert: (typeof import('./components/Blocks/FdsBlockAlert/FdsBlockAlert.vue'))['default']
+    FdsBlockExpander: (typeof import('./components/Blocks/FdsBlockExpander/FdsBlockExpander.vue'))['default']
+    FdsBlockLink: (typeof import('./components/Blocks/FdsBlockLink/FdsBlockLink.vue'))['default']
+    FdsSticker: (typeof import('./components/FdsSticker/FdsSticker.vue'))['default']
+    FdsTabs: (typeof import('./components/Tabs/FdsTabs/FdsTabs.vue'))['default']
+    FdsTabsItem: (typeof import('./components/Tabs/FdsTabsItem/FdsTabsItem.vue'))['default']
+    FdsModal: (typeof import('./components/FdsModal/FdsModal.vue'))['default']
+    FdsPagination: (typeof import('./components/FdsPagination/FdsPagination.vue'))['default']
+    FdsSearchSelect: (typeof import('./components/FdsSearchSelect/FdsSearchSelect.vue'))['default']
+    FdsTruncatedText: (typeof import('./components/FdsTruncatedText/FdsTruncatedText.vue'))['default']
+    FdsHeading: (typeof import('./components/Typography/FdsHeading/FdsHeading.vue'))['default']
+    FdsSeparator: (typeof import('./components/Typography/FdsSeparator/FdsSeparator.vue'))['default']
+    FdsText: (typeof import('./components/Typography/FdsText/FdsText.vue'))['default']
+    FdsListHeading: (typeof import('./components/Typography/FdsListHeading/FdsListHeading.vue'))['default']
+  }
+}
+
+export {}

package/src/index.ts

@@ -0,0 +1,180 @@
+// App type imported inline below to avoid TS plugin issues in some environments
+
+// Import styles
+import './global-components'
+import './style.css'
+
+// Import all components
+import FdsButtonCopy from '@/components/Buttons/FdsButtonCopy/FdsButtonCopy.vue'
+import FdsButtonDownload from '@/components/Buttons/FdsButtonDownload/FdsButtonDownload.vue'
+import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsButtonMinor from '@/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'
+import FdsButtonPrimary from '@/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'
+import FdsButtonSecondary from '@/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
+import FdsTreeView from '@/components/FdsTreeView/FdsTreeView.vue'
+import FdsCheckbox from '@/components/Form/FdsCheckbox/FdsCheckbox.vue'
+import FdsInput from '@/components/Form/FdsInput/FdsInput.vue'
+import FdsRadio from '@/components/Form/FdsRadio/FdsRadio.vue'
+import FdsSelect from '@/components/Form/FdsSelect/FdsSelect.vue'
+import FdsTextarea from '@/components/Form/FdsTextarea/FdsTextarea.vue'
+import FdsTable from '@/components/Table/FdsTable/FdsTable.vue'
+import FdsTableHead from '@/components/Table/FdsTableHead/FdsTableHead.vue'
+// Block components
+import FdsBlockAlert from '@/components/Blocks/FdsBlockAlert/FdsBlockAlert.vue'
+import FdsBlockContent from '@/components/Blocks/FdsBlockContent/FdsBlockContent.vue'
+import FdsBlockExpander from '@/components/Blocks/FdsBlockExpander/FdsBlockExpander.vue'
+import FdsBlockInfo from '@/components/Blocks/FdsBlockInfo/FdsBlockInfo.vue'
+import FdsBlockLink from '@/components/Blocks/FdsBlockLink/FdsBlockLink.vue'
+import FdsModal from '@/components/FdsModal/FdsModal.vue'
+import FdsPagination from '@/components/FdsPagination/FdsPagination.vue'
+import FdsSearchSelect from '@/components/FdsSearchSelect/FdsSearchSelect.vue'
+import FdsSticker from '@/components/FdsSticker/FdsSticker.vue'
+import FdsTruncatedText from '@/components/FdsTruncatedText/FdsTruncatedText.vue'
+import FdsTabs from '@/components/Tabs/FdsTabs/FdsTabs.vue'
+import FdsTabsItem from '@/components/Tabs/FdsTabsItem/FdsTabsItem.vue'
+import FdsHeading from '@/components/Typography/FdsHeading/FdsHeading.vue'
+import FdsListHeading from '@/components/Typography/FdsListHeading/FdsListHeading.vue'
+import FdsSeparator from '@/components/Typography/FdsSeparator/FdsSeparator.vue'
+import FdsText from '@/components/Typography/FdsText/FdsText.vue'
+
+// Import composables
+import useTreeState from '@/components/FdsTreeView/useTreeState'
+import { useBoldQuery } from '@/composables/useBoldQuery'
+import { isPidString, useIsPid } from '@/composables/useIsPid'
+
+// Export individual components
+export {
+  FdsBlockAlert,
+  FdsBlockContent,
+  FdsBlockExpander,
+  FdsBlockInfo,
+  FdsBlockLink,
+  FdsButtonCopy,
+  FdsButtonDownload,
+  FdsButtonIcon,
+  FdsButtonMinor,
+  FdsButtonPrimary,
+  FdsButtonSecondary,
+  FdsCheckbox,
+  FdsHeading,
+  FdsIcon,
+  FdsInput,
+  FdsListHeading,
+  FdsModal,
+  FdsPagination,
+  FdsRadio,
+  FdsSearchSelect,
+  FdsSelect,
+  FdsSeparator,
+  FdsSpinner,
+  FdsSticker,
+  FdsTable,
+  FdsTableHead,
+  FdsTabs,
+  FdsTabsItem,
+  FdsText,
+  FdsTextarea,
+  FdsTreeView,
+  FdsTruncatedText,
+}
+
+// Export composables
+export { isPidString, useBoldQuery, useIsPid, useTreeState }
+
+// Export component library plugin
+type AppLike = { component: (name: string, comp: unknown) => unknown }
+
+const FdsVueCorePlugin = {
+  install(app: AppLike) {
+    // Register all components globally
+    app.component('FdsTreeView', FdsTreeView)
+    // Register button variants with direct names
+    app.component('FdsButtonPrimary', FdsButtonPrimary)
+    app.component('FdsButtonSecondary', FdsButtonSecondary)
+    app.component('FdsButtonMinor', FdsButtonMinor)
+    app.component('FdsButtonIcon', FdsButtonIcon)
+    app.component('FdsButtonCopy', FdsButtonCopy)
+    app.component('FdsButtonDownload', FdsButtonDownload)
+    app.component('FdsIcon', FdsIcon)
+    app.component('FdsSpinner', FdsSpinner)
+    app.component('FdsRadio', FdsRadio)
+    app.component('FdsCheckbox', FdsCheckbox)
+    app.component('FdsTextarea', FdsTextarea)
+    app.component('FdsSelect', FdsSelect)
+    app.component('FdsTable', FdsTable)
+    app.component('FdsTableHead', FdsTableHead)
+    app.component('FdsInput', FdsInput)
+    app.component('FdsBlockContent', FdsBlockContent)
+    app.component('FdsBlockInfo', FdsBlockInfo)
+    app.component('FdsBlockAlert', FdsBlockAlert)
+    app.component('FdsBlockExpander', FdsBlockExpander)
+    app.component('FdsBlockLink', FdsBlockLink)
+    app.component('FdsSticker', FdsSticker)
+    app.component('FdsTabs', FdsTabs)
+    app.component('FdsTabsItem', FdsTabsItem)
+    app.component('FdsModal', FdsModal)
+    app.component('FdsPagination', FdsPagination)
+    app.component('FdsSearchSelect', FdsSearchSelect)
+    app.component('FdsTruncatedText', FdsTruncatedText)
+    app.component('FdsHeading', FdsHeading)
+    app.component('FdsSeparator', FdsSeparator)
+    app.component('FdsText', FdsText)
+    app.component('FdsListHeading', FdsListHeading)
+  },
+}
+
+export default FdsVueCorePlugin
+
+// Export all component types
+// TreeView types (only consumer-facing types)
+export type { FdsNodeShape, FdsTreeNode, FdsTreeViewProps, FdsTreeViewStyles } from '@/components/FdsTreeView/types'
+
+// Button component types
+export type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
+export type { FdsCopyButtonProps } from '@/components/Buttons/FdsButtonCopy/types'
+export type { FdsIconButtonProps } from '@/components/Buttons/FdsButtonIcon/types'
+
+// Button components that use FdsButtonBaseProps
+import type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
+export type FdsButtonPrimaryProps = FdsButtonBaseProps
+export type FdsButtonSecondaryProps = FdsButtonBaseProps
+export type FdsButtonMinorProps = FdsButtonBaseProps
+export type FdsButtonDownloadProps = FdsButtonBaseProps
+
+// Form component types
+export type { FdsCheckboxProps } from '@/components/Form/FdsCheckbox/types'
+export type { FdsInputProps } from '@/components/Form/FdsInput/types'
+export type { FdsRadioProps } from '@/components/Form/FdsRadio/types'
+export type { FdsSelectProps } from '@/components/Form/FdsSelect/types'
+export type { FdsTextareaProps } from '@/components/Form/FdsTextarea/types'
+
+// Table component types
+export type { FdsTableProps } from '@/components/Table/FdsTable/types'
+export type { FdsTableHeadProps } from '@/components/Table/FdsTableHead/types'
+
+// Block component types
+export type { FdsAlertBlockProps } from '@/components/Blocks/FdsBlockAlert/types'
+export type { FdsContentBlockProps } from '@/components/Blocks/FdsBlockContent/types'
+export type { FdsExpanderBlockProps } from '@/components/Blocks/FdsBlockExpander/types'
+export type { FdsBlockInfoProps } from '@/components/Blocks/FdsBlockInfo/types'
+export type { FdsInteractionBlockProps } from '@/components/Blocks/FdsBlockLink/types'
+
+// Tab component types
+export type { FdsTabsProps } from '@/components/Tabs/FdsTabs/types'
+export type { FdsTabsItemProps } from '@/components/Tabs/FdsTabsItem/types'
+
+// Typography component types
+export type { FdsHeadingProps } from '@/components/Typography/FdsHeading/types'
+export type { FdsListHeadingProps } from '@/components/Typography/FdsListHeading/types'
+export type { FdsTextProps } from '@/components/Typography/FdsText/types'
+
+// Other component types
+export type { FdsIconName, FdsIconProps } from '@/components/FdsIcon/types'
+export type { FdsModalProps } from '@/components/FdsModal/types'
+export type { FdsPaginationProps } from '@/components/FdsPagination/types'
+export type { FdsSearchSelectProps } from '@/components/FdsSearchSelect/types'
+export type { FdsSpinnerProps } from '@/components/FdsSpinner/types'
+export type { FdsStickerProps } from '@/components/FdsSticker/types'
+export type { FdsTruncatedTextProps } from '@/components/FdsTruncatedText/types'

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+
+// Create and mount the Vue app
+const app = createApp(App)
+app.mount('#app')