chore(qwikintrinsicelements): replace it by PropsOf

Author: maiieul

apps/website/src/components/code-copy/code-copy.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@qwik-ui/utils';
-import { PropsOf, QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
+import { PropsOf, component$, useSignal } from '@builder.io/qwik';
 import { Button } from '@qwik-ui/fluffy';
 import copy from 'clipboard-copy';
 
@@ -32,7 +32,7 @@ export const CodeCopy = component$(({ code = '', class: outsideClass, ...props }
   );
 });
 
-export function CopyIcon(props: QwikIntrinsicElements['svg'], key: string) {
+export function CopyIcon(props: PropsOf<'svg'>, key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -54,7 +54,7 @@ export function CopyIcon(props: QwikIntrinsicElements['svg'], key: string) {
   );
 }
 
-export function ClipboardCheck(props: QwikIntrinsicElements['svg'], key: string) {
+export function ClipboardCheck(props: PropsOf<'svg'>, key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

apps/website/src/components/code-snippet/code-snippet.tsx

@@ -1,4 +1,4 @@
-import { QwikIntrinsicElements, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import { PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
 import { isDev } from '@builder.io/qwik/build';
 import { Highlight } from '../highlight/highlight';
@@ -14,7 +14,7 @@ const codeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*',
   eager: isDev ? false : true,
 });
 
-type CodeSnippetProps = QwikIntrinsicElements['div'] & {
+type CodeSnippetProps = PropsOf<'div'> & {
   name: string;
 };
 

apps/website/src/components/highlight/highlight.tsx

@@ -1,14 +1,14 @@
 import {
   ClassList,
-  QwikIntrinsicElements,
+  PropsOf,
   component$,
   useSignal,
   useVisibleTask$,
 } from '@builder.io/qwik';
 import { OmitSignalClass } from '@qwik-ui/utils';
 import { CodeCopy } from '../code-copy/code-copy';
 
-export type HighlightProps = OmitSignalClass<QwikIntrinsicElements['div']> & {
+export type HighlightProps = OmitSignalClass<PropsOf<'div'>> & {
   code: string;
   copyCodeClass?: ClassList;
   language?: 'tsx' | 'html' | 'css';

apps/website/src/components/icons/Check.tsx

@@ -1,6 +1,6 @@
-import { QwikIntrinsicElements } from '@builder.io/qwik';
+import { PropsOf } from '@builder.io/qwik';
 
-export function CheckIcon(props: QwikIntrinsicElements['svg'], key: string) {
+export function CheckIcon(props: PropsOf<'svg'>, key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

apps/website/src/components/icons/CollapsibleIcon.tsx

@@ -1,6 +1,6 @@
-import { type QwikIntrinsicElements } from '@builder.io/qwik';
+import { PropsOf } from '@builder.io/qwik';
 
-export function CollapsibleIcon(props: QwikIntrinsicElements['svg']) {
+export function CollapsibleIcon(props: PropsOf<'svg'>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

apps/website/src/components/mdx-components/index.tsx

@@ -1,4 +1,4 @@
-import { QwikIntrinsicElements, Slot, component$ } from '@builder.io/qwik';
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { StatusBanner } from '../status-banner/status-banner';
 import { AnatomyTable } from '../anatomy-table/anatomy-table';
 import { APITable } from '../api-table/api-table';
@@ -12,14 +12,14 @@ import { cn } from '@qwik-ui/utils';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const components: Record<string, any> = {
-  p: component$<QwikIntrinsicElements['p']>(({ ...props }) => {
+  p: component$<PropsOf<'p'>>(({ ...props }) => {
     return (
       <p {...props} class={[cn('mb-6 last:mb-0', props.class)]}>
         <Slot />
       </p>
     );
   }),
-  h1: component$<QwikIntrinsicElements['h1']>(({ ...props }) => {
+  h1: component$<PropsOf<'h1'>>(({ ...props }) => {
     return (
       <h1
         {...props}
@@ -29,7 +29,7 @@ export const components: Record<string, any> = {
       </h1>
     );
   }),
-  h2: component$<QwikIntrinsicElements['h2']>(({ ...props }) => {
+  h2: component$<PropsOf<'h2'>>(({ ...props }) => {
     return (
       <h2
         {...props}
@@ -44,21 +44,21 @@ export const components: Record<string, any> = {
       </h2>
     );
   }),
-  h3: component$<QwikIntrinsicElements['h3']>(({ ...props }) => {
+  h3: component$<PropsOf<'h3'>>(({ ...props }) => {
     return (
       <h3 {...props} class={[cn('mb-6 mt-8 text-xl font-semibold', props.class)]}>
         <Slot />
       </h3>
     );
   }),
-  h4: component$<QwikIntrinsicElements['h4']>(({ ...props }) => {
+  h4: component$<PropsOf<'h4'>>(({ ...props }) => {
     return (
       <h4 {...props} class={[cn('mb-4 mt-6 text-lg font-medium', props.class)]}>
         <Slot />
       </h4>
     );
   }),
-  h5: component$<QwikIntrinsicElements['h5']>(({ ...props }) => {
+  h5: component$<PropsOf<'h5'>>(({ ...props }) => {
     return (
       <h5 {...props} class={[cn('text-base font-[700]', props.class)]}>
         <Slot />
@@ -72,22 +72,22 @@ export const components: Record<string, any> = {
       </Note>
     );
   }),
-  ul: component$<QwikIntrinsicElements['ul']>(({ ...props }) => {
+  ul: component$<PropsOf<'ul'>>(({ ...props }) => {
     return (
       <ul {...props} class={[cn('mb-4 list-disc px-6 font-medium', props.class)]}>
         <Slot />
       </ul>
     );
   }),
-  li: component$<QwikIntrinsicElements['li']>(({ ...props }) => {
+  li: component$<PropsOf<'li'>>(({ ...props }) => {
     return (
       <li {...props} class={[cn('py-2', props.class)]}>
         <Slot />
       </li>
     );
   }),
   pre: component$<
-    QwikIntrinsicElements['div'] & {
+    PropsOf<'div'> & {
       __rawString__?: string;
     }
   >(({ __rawString__, ...props }) => {
@@ -116,7 +116,7 @@ export const components: Record<string, any> = {
       </div>
     );
   }),
-  code: component$<QwikIntrinsicElements['code']>(() => {
+  code: component$<PropsOf<'code'>>(() => {
     return (
       <code class="whitespace-pre-wrap">
         <Slot />

apps/website/src/components/note/note.tsx

@@ -1,4 +1,4 @@
-import { component$, Slot, QwikIntrinsicElements } from '@builder.io/qwik';
+import { component$, PropsOf, Slot } from '@builder.io/qwik';
 
 export enum NoteStatus {
   Info = 'info',
@@ -56,7 +56,7 @@ export const Note = component$<NoteProps>(({ status, ...props }) => {
   );
 });
 
-export function InfoIcon(props: QwikIntrinsicElements['svg'], key: string) {
+export function InfoIcon(props: PropsOf<'svg'>, key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -74,7 +74,7 @@ export function InfoIcon(props: QwikIntrinsicElements['svg'], key: string) {
   );
 }
 
-export function WarningIcon(props: QwikIntrinsicElements['svg'], key: string) {
+export function WarningIcon(props: PropsOf<'svg'>, key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -92,7 +92,7 @@ export function WarningIcon(props: QwikIntrinsicElements['svg'], key: string) {
   );
 }
 
-export function CautionIcon(props: QwikIntrinsicElements['svg'], key: string) {
+export function CautionIcon(props: PropsOf<'svg'>, key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

apps/website/src/components/showcase/showcase.tsx

@@ -1,10 +1,4 @@
-import {
-  Component,
-  QwikIntrinsicElements,
-  component$,
-  useSignal,
-  useTask$,
-} from '@builder.io/qwik';
+import { Component, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
 import { useLocation } from '@builder.io/qwik-city';
 import { isDev } from '@builder.io/qwik/build';
@@ -33,7 +27,7 @@ const rawComponents: Record<string, any> = import.meta.glob(
   },
 );
 
-type ShowcaseProps = QwikIntrinsicElements['div'] & {
+type ShowcaseProps = PropsOf<'div'> & {
   name?: string;
 };
 

apps/website/src/routes/docs/headless/accordion/examples/focused-index.tsx

@@ -15,7 +15,7 @@ export default component$(() => {
       <div class="flex w-full flex-col items-center gap-4">
         <AccordionRoot
           class="w-[min(400px,_100%)]"
-          onFocusIndexChange$={(index) => {
+          onFocusIndexChange$={(index: number) => {
             focusedIndexSig.value = index;
           }}
         >

apps/website/src/routes/docs/headless/accordion/examples/selected-index.tsx

@@ -15,7 +15,7 @@ export default component$(() => {
       <div class="flex w-full flex-col items-center gap-4">
         <AccordionRoot
           class="w-[min(400px,_100%)]"
-          onSelectedIndexChange$={(index) => {
+          onSelectedIndexChange$={(index: number) => {
             selectedIndexSig.value = index;
           }}
         >