Merge branch 'main' into 711_search_box

.changeset/little-llamas-brake.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+Enable select item indicator styling by passing down properties

.changeset/pink-pans-melt.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+We are adding the final set of popover tests. With this we should now have full coverage for both current and legacy browsers.

.changeset/rich-windows-admire.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: Only run single modal close step

.changeset/tiny-cups-teach.md

@@ -0,0 +1,6 @@
+---
+'qwik-ui': patch
+---
+
+FIX: now installing `tailwindcss-animate`, `class-variance-authority`
+and `@qwikest/icons` during the cli init

.github/actions/setup/action.yml

@@ -23,9 +23,9 @@ runs:
         git config --global user.email 'qwik-ui@users.noreply.github.com'
 
     - name: Setup pnpm
-      uses: pnpm/action-setup@v2.2.4
+      uses: pnpm/action-setup@v4
       with:
-        version: 8
+        version: 9.3.0
 
     - name: Use Node
       uses: actions/setup-node@v4

.github/workflows/test.yml

@@ -32,14 +32,14 @@ jobs:
 
   continuous-release:
     runs-on: ubuntu-latest
-
+    if: github.event_name == 'pull_request'
     steps:
       - uses: actions/checkout@v3
       - name: Setup
         uses: ./.github/actions/setup
         with:
           node_version: 20
-      - run: pnpm build.headless
-      - run: pnpx pkg-pr-new publish ./dist/packages/kit-headless
+      - run: pnpm release.prepare --parallel=false
+      - run: pnpm dlx pkg-pr-new@^0.0.9 publish --pnpm ./dist/packages/kit-headless ./dist/packages/kit-styled ./dist/packages/cli ./dist/packages/utils
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKEN is provided automatically in any repository

.gitignore

@@ -13,6 +13,7 @@ node_modules
 .rollup.cache
 tsconfig.tsbuildinfo
 .nx/cache
+.nx/workspace-data
 
 # IDE - VSCode
 .vscode/*

.npmignore

@@ -1,3 +1,4 @@
 node_modules
 .nx/cache
+.nx/workspace-data
 coverage

.npmrc

@@ -1,4 +1,5 @@
 save-exact = true
 auto-install-peers=true
 dedupe-peer-dependents=true
-public-hoist-pattern[]=@types*
+public-hoist-pattern[]=@types*
+link-workspace-packages=true

apps/component-tests/src/components/showcase-test/showcase-test.tsx

@@ -22,7 +22,7 @@ export const ShowcaseTest = component$(() => {
 
   return (
     <>
-      <section class="flex flex-col items-center">
+      <section class="flex w-full flex-col items-center">
         {MetaGlobComponentSig.value && <MetaGlobComponentSig.value />}
       </section>
     </>

apps/component-tests/tailwind.config.cjs

@@ -8,6 +8,7 @@ module.exports = {
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
     join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
     join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
+    join(__dirname, '../../packages/kit-headless/src/**/*.{js,ts,jsx,tsx,mdx}'),
   ],
   plugins: [
     // PLUGIN-START

apps/website/adapters/cloudflare-pages/vite.config.ts

@@ -14,6 +14,7 @@ export default extendConfig(baseConfig, () => {
       cloudflarePagesAdapter({
         ssg: {
           include: ['/*'],
+          origin: 'https://qwikui.com'
         },
       }),
     ],

apps/website/src/_state/component-statuses.ts

@@ -38,11 +38,13 @@ export const statusByComponent: ComponentKitsStatuses = {
     Carousel: ComponentStatus.Draft,
     Collapsible: ComponentStatus.Beta,
     Combobox: ComponentStatus.Beta,
+    Checkbox: ComponentStatus.Draft,
+    Dropdown: ComponentStatus.Draft,
     Label: ComponentStatus.Draft,
     Modal: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Beta,
-    Progress: ComponentStatus.Draft,
+    Progress: ComponentStatus.Beta,
     Select: ComponentStatus.Beta,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,

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

@@ -4,7 +4,7 @@ export const MenuIcon = () => (
     fill="none"
     stroke-linecap="round"
     aria-hidden="true"
-    class="h-6 w-6 stroke-black hover:bg-gray-100 dark:stroke-white dark:hover:bg-slate-600"
+    class="h-6 w-6 stroke-foreground"
   >
     <path d="M.5 1h9M.5 8h9M.5 4.5h9" />
   </svg>

apps/website/src/components/toc/toc.tsx

@@ -1,33 +1,128 @@
-import {
-  $,
-  QwikIntrinsicElements,
-  component$,
-  useSignal,
-  useVisibleTask$,
-} from '@builder.io/qwik';
 import { ContentHeading } from '@builder.io/qwik-city';
 import { cn } from '@qwik-ui/utils';
+import { component$, useSignal, useVisibleTask$, $ } from '@builder.io/qwik';
 
 export const DashboardTableOfContents = component$(
   ({ headings }: { headings: ContentHeading[] }) => {
-    const itemIds = headings.map((item) => item.id);
-    const activeHeading = useActiveItem(itemIds);
-
     if (headings.length === 0) {
       return null;
     }
-
     return (
       <div class="space-y-2">
         <div class="font-medium">On This Page</div>
-        <Tree headings={headings} activeItem={activeHeading.value} />
+        <TableOfContent headings={headings} />
       </div>
     );
   },
 );
 
+type TableOfContentProps = { headings: ContentHeading[] };
+interface Node extends ContentHeading {
+  level: number;
+  children: Array<Node>;
+  activeItem: string;
+}
+type Tree = Array<Node>;
+export const TableOfContent = component$<TableOfContentProps>((props) => {
+  const inifiniteStopper = props.headings.map((heading) => {
+    return { text: heading.text, id: heading.id, level: heading.level };
+  });
+  const itemIds = props.headings.map((item) => item.id);
+  const activeHeading = useActiveItem(itemIds);
+  const tree = getTree(inifiniteStopper);
+  return <RecursiveJSX tree={tree[0]} activeItem={activeHeading.value} />;
+});
+
+function deltaToStrg(
+  currNode: Node,
+  nextNode: Node,
+): 'same level' | 'down one level' | 'up one level' | 'upwards discontinuous' {
+  const delta = currNode.level - nextNode.level;
+  if (delta > 1) {
+    return 'upwards discontinuous';
+  }
+  if (delta === 1) {
+    return 'up one level';
+  }
+  if (delta === 0) {
+    return 'same level';
+  }
+  if (delta === -1) {
+    return 'down one level';
+  }
+
+  throw new Error(
+    `bad headings: are downwards discontinous from: #${currNode.id} to #${nextNode.id} bc from ${currNode.level} to ${nextNode.level}`,
+  );
+}
+function getTree(nodes: ContentHeading[]) {
+  let currNode = nodes[0] as Node;
+  currNode.children = [];
+  const tree = [currNode];
+  const childrenMap = new Map<number, Tree>();
+  childrenMap.set(currNode.level, currNode.children);
+  for (let index = 1; index < nodes.length; index++) {
+    const nextNode = nodes[index] as Node;
+    nextNode.children = [];
+    childrenMap.set(nextNode.level, nextNode.children);
+    const deltaStrg = deltaToStrg(currNode, nextNode);
+    switch (deltaStrg) {
+      case 'upwards discontinuous': {
+        const delta = currNode.level - nextNode.level;
+        if (childrenMap.has(delta - 1)) {
+          const nthParent = childrenMap.get(delta - 1);
+          nthParent?.push(nextNode);
+        }
+        break;
+      }
+      case 'up one level': {
+        const grandParent = childrenMap.get(currNode.level - 2);
+        grandParent?.push(nextNode);
+        break;
+      }
+      case 'same level': {
+        const parent = childrenMap.get(currNode.level - 1);
+        parent?.push(nextNode);
+        break;
+      }
+      case 'down one level': {
+        currNode.children.push(nextNode);
+        break;
+      }
+      default:
+        break;
+    }
+    currNode = nextNode;
+  }
+  return tree;
+}
+type RecursiveJSXProps = {
+  tree: Node;
+  activeItem: string;
+  limit?: number;
+};
+const RecursiveJSX = component$<RecursiveJSXProps>(({ tree, activeItem, limit = 3 }) => {
+  const currNode: Node = tree;
+  return currNode?.children?.length && currNode.level < limit ? (
+    <ul class={cn('m-0 list-none', { 'pl-4': currNode.level !== 1 })}>
+      {currNode.children.map((childNode) => {
+        return (
+          <li key={currNode.id} class={cn('mt-0 list-none pt-2')}>
+            <Anchor node={childNode} activeItem={activeItem} />
+            {childNode.children.length ? (
+              <>
+                <RecursiveJSX tree={childNode} activeItem={activeItem} />
+              </>
+            ) : null}
+          </li>
+        );
+      })}
+    </ul>
+  ) : null;
+});
+
 const useActiveItem = (itemIds: string[]) => {
-  const activeId = useSignal<string>();
+  const activeId = useSignal<string>('');
 
   useVisibleTask$(({ cleanup }) => {
     const observer = new IntersectionObserver(
@@ -60,45 +155,35 @@ const useActiveItem = (itemIds: string[]) => {
 
   return activeId;
 };
-
-type TreeProps = QwikIntrinsicElements['ul'] & {
-  headings: ContentHeading[];
-  level?: number;
-  activeItem?: string;
+type AnchorThingProps = {
+  node: Node;
+  activeItem: string;
 };
-
-const Tree = component$<TreeProps>(({ headings, level = 1, activeItem }) => {
-  return headings.length > 0 && level < 3 ? (
-    <ul class={cn('m-0 list-none', { 'pl-4': level !== 1 })}>
-      {headings.map((heading) => {
-        return (
-          <li key={heading.id} class={cn('mt-0 pt-2')}>
-            <a
-              href={`#${heading.id}`}
-              onClick$={[
-                $(() => {
-                  const element = document.getElementById(heading.id);
-                  if (element) {
-                    const navbarHeight = 90;
-                    const elementPosition =
-                      element.getBoundingClientRect().top + window.scrollY - navbarHeight;
-                    window.scrollTo({ top: elementPosition, behavior: 'auto' });
-                  }
-                }),
-              ]}
-              class={cn(
-                heading.level > 2 ? 'ml-4' : null,
-                'inline-block no-underline transition-colors hover:text-foreground',
-                heading.id === `${activeItem}`
-                  ? 'font-medium text-foreground'
-                  : 'text-muted-foreground',
-              )}
-            >
-              {heading.text}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
-  ) : null;
+export const Anchor = component$<AnchorThingProps>((props) => {
+  const currNode = props.node;
+  const activeItem = props.activeItem;
+  const isActiveItem = currNode.id === `${activeItem}`;
+  return (
+    <a
+      href={`#${currNode.id}`}
+      onClick$={[
+        $(() => {
+          const element = document.getElementById(currNode.id);
+          if (element) {
+            const navbarHeight = 90;
+            const elementPosition =
+              element.getBoundingClientRect().top + window.scrollY - navbarHeight;
+            window.scrollTo({ top: elementPosition, behavior: 'auto' });
+          }
+        }),
+      ]}
+      class={cn(
+        currNode.level > 2 ? 'ml-4' : null,
+        'inline-block no-underline transition-colors hover:text-foreground',
+        isActiveItem ? 'font-medium text-foreground' : 'text-muted-foreground',
+      )}
+    >
+      {currNode.text}
+    </a>
+  );
 });

apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx

@@ -0,0 +1,42 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox } from '@qwik-ui/headless';
+export default component$(() => {
+  const initialVal1 = false;
+  const controlledSig1 = useSignal(initialVal1);
+  const initialVal2 = true;
+  const controlledSig2 = useSignal(initialVal2);
+  return (
+    <>
+      <div class="flex gap-8">
+        <div class="flex flex-col gap-3">
+          <Checkbox.Root
+            bind:checked={controlledSig1}
+            id="test"
+            class="flex items-center gap-3 border-2 border-black p-2 "
+          >
+            <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+              ✅
+            </Checkbox.Indicator>
+            Toggle Value
+          </Checkbox.Root>
+          <p>The initial value was: {`${initialVal1}`}</p>
+          <p>The current value is: {`${controlledSig1.value}`}</p>
+        </div>
+        <div class="flex flex-col gap-3">
+          <Checkbox.Root
+            bind:checked={controlledSig2}
+            id="test"
+            class="flex items-center gap-3 border-2 border-black p-2 "
+          >
+            <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+              ✅
+            </Checkbox.Indicator>
+            Toggle Value
+          </Checkbox.Root>
+          <p>The initial value was: {`${initialVal2}`}</p>
+          <p>The current value is: {`${controlledSig2.value}`}</p>
+        </div>
+      </div>
+    </>
+  );
+});