Merge pull request #385 from shairez/pr-fluffy-panda-experiment

Author: shairez

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install commitlint --edit $1
+pnpm exec commitlint --edit $1

.prettierignore

@@ -5,4 +5,5 @@
 dist
 node_modules
 coverage
-**/*.mdx
+**/*.mdx
+discussion

apps/website/src/routes/docs.css

@@ -3,9 +3,9 @@
     @apply lg:ml-80 w-full lg:max-w-4xl xl:max-w-6xl py-8 px-8 lg:px-16;
   }
 
-  /* 
+  /*
     Styles that are direct descendents of .docs
-    this should not affect the styles inside of the tabpanel 
+    this should not affect the styles inside of the tabpanel
     A.K.A the components
   */
   & > {
@@ -31,11 +31,11 @@
     }
 
     h3 {
-      @apply text-xl font-bold  mb-6;
+      @apply text-xl font-bold mt-4 mb-6;
     }
 
     h4 {
-      @apply text-lg mb-6;
+      @apply text-lg mt-4 mb-6;
     }
 
     h5 {

apps/website/src/routes/docs/_components/api-table/api-table.tsx

@@ -12,7 +12,7 @@ type APITableProps = {
 export const APITable = component$(({ propDescriptors }: APITableProps) => {
   return (
     <div class="overflow-auto">
-      <table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full">
+      <table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full mb-6">
         <tbody class="divide-y divide-gray-700">
           <tr class="w-1/4 dark:text-white ">
             <td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">

apps/website/src/routes/docs/headless/(components)/tabs/examples.tsx

@@ -102,9 +102,9 @@ export const AutomaticBehaviorTabsExample = component$(() => {
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent" class="tabs-example mr-auto">
+        <h3>Danish Composers</h3>
+        <h4>(Hover over the tabs)</h4>
         <Tabs behavior="automatic">
-          <h3>Danish Composers</h3>
-          <h4>(Hover over the tabs)</h4>
           <TabList>
             <Tab>Maria Ahlefeldt</Tab>
             <Tab>Carl Andersen</Tab>
@@ -203,7 +203,7 @@ export const OnSelectedIndexChangeTabsExample = component$(() => {
     <PreviewCodeExample>
       <div q:slot="actualComponent" class="tabs-example mr-auto">
         <Tabs
-          onSelectedIndexChange$={(index) => {
+          onSelectedIndexChange$={(index: number) => {
             selectedIndexSig.value = index;
           }}
         >
@@ -234,6 +234,42 @@ export const OnSelectedIndexChangeTabsExample = component$(() => {
   );
 });
 
+export const SelectedTabIdExample = component$(() => {
+  const selectedTabIdSig = useSignal<string | undefined>();
+
+  return (
+    <PreviewCodeExample>
+      <div q:slot="actualComponent" class="tabs-example mr-auto">
+        <Tabs bind:selectedTabId={selectedTabIdSig}>
+          <h3>Danish Composers</h3>
+          <TabList>
+            <Tab tabId="Maria">Maria Ahlefeldt</Tab>
+            <Tab tabId="Carl">Carl Andersen</Tab>
+            <Tab tabId="Ida">Ida Henriette da Fonseca</Tab>
+          </TabList>
+          <TabPanel>
+            <p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a ...</p>
+          </TabPanel>
+          <TabPanel>
+            <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
+          </TabPanel>
+          <TabPanel>
+            <p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...</p>
+          </TabPanel>
+        </Tabs>
+        <br />
+        <p>
+          <strong>Selected Tab Id</strong>: {selectedTabIdSig.value}
+        </p>
+      </div>
+
+      <div q:slot="codeExample">
+        <Slot />
+      </div>
+    </PreviewCodeExample>
+  );
+});
+
 export const OnClickTabsExample = component$(() => {
   const tabsClickedCountSig = useSignal(0);
 
@@ -272,3 +308,34 @@ export const OnClickTabsExample = component$(() => {
     </PreviewCodeExample>
   );
 });
+
+export const SelectedPropExample = component$(() => {
+  return (
+    <PreviewCodeExample>
+      <div q:slot="actualComponent" class="tabs-example mr-auto">
+        <h3>Danish Composers</h3>
+
+        <Tabs>
+          <TabList>
+            <Tab>Maria Ahlefeldt</Tab>
+            <Tab selected>Carl Andersen</Tab>
+            <Tab>Ida Henriette da Fonseca</Tab>
+          </TabList>
+          <TabPanel>
+            <p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a ...</p>
+          </TabPanel>
+          <TabPanel>
+            <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
+          </TabPanel>
+          <TabPanel>
+            <p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...</p>
+          </TabPanel>
+        </Tabs>
+      </div>
+
+      <div q:slot="codeExample">
+        <Slot />
+      </div>
+    </PreviewCodeExample>
+  );
+});