Merge pull request #131 from kobaltedev/develop

chore: changeset v0.7.0
kobaltedev · Mar 7, 2023 · bd9f66a · bd9f66a
2 parents fa0f86b + 081b3be
commit bd9f66a
Show file tree

Hide file tree

Showing 218 changed files with 5,070 additions and 7,381 deletions.
diff --git a/.changeset/rude-meals-press.md b/.changeset/rude-meals-press.md
@@ -0,0 +1,9 @@
+---
+"@kobalte/vanilla-extract": minor
+"@kobalte/tailwindcss": minor
+"@kobalte/tests": minor
+"@kobalte/utils": minor
+"@kobalte/core": minor
+---
+
+New Select and Polymorphism API
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -2,7 +2,6 @@ name: Build and Test
 
 on:
   push:
-    branches: [main]
   pull_request:
     branches: [main]
 

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -34,39 +34,40 @@
     "@kobalte/core": "0.6.2",
     "@solidjs/meta": "0.28.2",
     "@solidjs/router": "0.7.0",
+    "@tanstack/solid-virtual": "3.0.0-beta.6",
     "clsx": "1.2.1"
   },
   "devDependencies": {
     "@kobalte/tailwindcss": "0.4.2",
-    "@mdx-js/mdx": "2.1.3",
-    "@mdx-js/rollup": "2.1.3",
-    "@tailwindcss/typography": "0.5.8",
+    "@mdx-js/mdx": "2.3.0",
+    "@mdx-js/rollup": "2.3.0",
+    "@tailwindcss/typography": "0.5.9",
     "acorn": "8.8.2",
     "autoprefixer": "10.4.13",
-    "babel-preset-solid": "1.6.10",
+    "babel-preset-solid": "1.6.12",
     "encoding": "0.1.13",
-    "github-slugger": "1.4.0",
+    "github-slugger": "1.5.0",
     "iconv-lite": "0.6.3",
-    "node-fetch": "2.6.7",
+    "node-fetch": "2.6.9",
     "postcss": "8.4.21",
-    "rehype-pretty-code": "0.9.2",
+    "rehype-pretty-code": "0.9.4",
     "rehype-raw": "6.1.1",
     "rehype-slug": "5.1.0",
     "remark-code-extra": "1.0.1",
     "remark-gfm": "3.0.1",
-    "remark-shiki-twoslash": "3.1.0",
+    "remark-shiki-twoslash": "3.1.1",
     "safer-buffer": "2.1.2",
-    "shiki": "0.14.0",
-    "solid-js": "1.6.10",
+    "shiki": "0.14.1",
+    "solid-js": "1.6.12",
     "solid-mdx": "0.0.6",
-    "solid-start": "0.2.20",
-    "solid-start-netlify": "0.2.20",
-    "solid-start-node": "0.2.20",
-    "tailwindcss": "3.2.4",
-    "typescript": "4.8.3",
+    "solid-start": "0.2.23",
+    "solid-start-netlify": "0.2.23",
+    "solid-start-node": "0.2.23",
+    "tailwindcss": "3.2.7",
+    "typescript": "4.9.5",
     "undici": "5.20.0",
     "unist-util-visit": "4.1.2",
-    "vite": "3.2.4"
+    "vite": "3.2.5"
   },
   "engines": {
     "node": ">=16"

diff --git a/apps/docs/src/VERSIONS.ts b/apps/docs/src/VERSIONS.ts
@@ -8,6 +8,9 @@ export const CORE_VERSIONS = [
   "0.6.0",
   "0.6.1",
   "0.6.2",
+  "0.7.0",
 ].reverse();
 
 export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;
+
+export const LATEST_CORE_VERSION_NAME = `v${CORE_VERSIONS[0]}`;
diff --git a/apps/docs/src/components/header.tsx b/apps/docs/src/components/header.tsx
@@ -2,7 +2,7 @@ import { Link, useMatch } from "@solidjs/router";
 import { clsx } from "clsx";
 
 import { NavSection } from "../model/navigation";
-import { LATEST_CORE_CHANGELOG_URL } from "../VERSIONS";
+import { LATEST_CORE_CHANGELOG_URL, LATEST_CORE_VERSION_NAME } from "../VERSIONS";
 import { GitHubIcon } from "./icons";
 import { MobileNavigation } from "./mobile-navigation";
 import { ThemeSelector } from "./theme-selector";
@@ -32,7 +32,7 @@ export function Header(props: HeaderProps) {
           <span class="text-3xl leading-[0] text-sky-600">.</span>
         </Link>
         <span class="rounded bg-zinc-100 px-1.5 py-1 text-sm leading-none dark:bg-zinc-800 dark:text-zinc-300">
-          v0.6.2
+          {LATEST_CORE_VERSION_NAME}
         </span>
       </div>
 

diff --git a/apps/docs/src/components/mobile-navigation.tsx b/apps/docs/src/components/mobile-navigation.tsx
@@ -4,7 +4,7 @@ import { clsx } from "clsx";
 import { ComponentProps, createComputed, splitProps } from "solid-js";
 
 import { NavSection } from "../model/navigation";
-import { LATEST_CORE_CHANGELOG_URL } from "../VERSIONS";
+import { LATEST_CORE_CHANGELOG_URL, LATEST_CORE_VERSION_NAME } from "../VERSIONS";
 import { CrossIcon, HamburgerMenuIcon } from "./icons";
 import { Navigation } from "./navigation";
 
@@ -43,7 +43,7 @@ export function MobileNavigation(props: MobileNavigationProps) {
                   <span class="text-3xl leading-[0] text-sky-600">.</span>
                 </Link>
                 <span class="rounded bg-zinc-100 px-1.5 py-1 text-sm leading-none dark:bg-zinc-800 dark:text-zinc-300">
-                  v0.6.2
+                  {LATEST_CORE_VERSION_NAME}
                 </span>
               </div>
               <button

diff --git a/apps/docs/src/components/prose.tsx b/apps/docs/src/components/prose.tsx
@@ -1,14 +1,11 @@
-import { createPolymorphicComponent } from "@kobalte/core";
 import { clsx } from "clsx";
-import { splitProps } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { ComponentProps, splitProps } from "solid-js";
 
-export const Prose = createPolymorphicComponent<"div">(props => {
-  const [local, others] = splitProps(props, ["as", "class"]);
+export function Prose(props: ComponentProps<"div">) {
+  const [local, others] = splitProps(props, ["class"]);
 
   return (
-    <Dynamic
-      component={local.as ?? "div"}
+    <div
       class={clsx(
         local.class,
         "prose prose-zinc max-w-none dark:prose-invert dark:text-zinc-400",
@@ -26,4 +23,4 @@ export const Prose = createPolymorphicComponent<"div">(props => {
       {...others}
     />
   );
-});
+}
diff --git a/apps/docs/src/components/theme-selector.tsx b/apps/docs/src/components/theme-selector.tsx
@@ -1,61 +1,65 @@
 import { ConfigColorMode, Select, useColorMode } from "@kobalte/core";
-import { clsx } from "clsx";
-import { ComponentProps, Show, splitProps } from "solid-js";
+import { ComponentProps, JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
 
 import { DesktopIcon, MoonIcon, SunIcon } from "./icons";
 
-function Item(props: ComponentProps<typeof Select.Item>) {
-  const [local, others] = splitProps(props, ["class"]);
+const THEME_OPTIONS = [
+  {
+    value: "light",
+    label: "Light",
+    icon: () => <SunIcon class="h-4 w-4" />,
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    icon: () => <MoonIcon class="h-4 w-4" />,
+  },
+  {
+    value: "system",
+    label: "System",
+    icon: () => <DesktopIcon class="h-4 w-4" />,
+  },
+];
 
-  return (
-    <Select.Item
-      class={clsx(
-        "flex items-center space-x-2 px-3 py-1 text-sm outline-none ui-selected:text-sky-700 ui-highlighted:bg-zinc-100 transition-colors cursor-default dark:ui-selected:text-sky-400 dark:ui-highlighted:bg-zinc-700",
-        local.class
-      )}
-      {...others}
-    />
-  );
-}
-
-export function ThemeSelector(props: ComponentProps<typeof Select.Root>) {
+export function ThemeSelector() {
   const { colorMode, setColorMode } = useColorMode();
 
   return (
     <Select.Root
+      options={THEME_OPTIONS}
+      optionValue="value"
+      optionTextValue="label"
       defaultValue={colorMode()}
       onValueChange={value => setColorMode(value as ConfigColorMode)}
       gutter={8}
       sameWidth={false}
       placement="bottom"
-      {...props}
+      renderValue={selectedOption => (
+        <Dynamic
+          component={selectedOption().value === "dark" ? MoonIcon : SunIcon}
+          class="h-5 w-5"
+        />
+      )}
+      renderItem={item => (
+        <Select.Item
+          item={item()}
+          class="flex items-center space-x-2 px-3 py-1 text-sm outline-none ui-selected:text-sky-700 ui-highlighted:bg-zinc-100 transition-colors cursor-default dark:ui-selected:text-sky-400 dark:ui-highlighted:bg-zinc-700"
+        >
+          {item().rawValue.icon}
+          <Select.ItemLabel>{item().rawValue.label}</Select.ItemLabel>
+        </Select.Item>
+      )}
     >
       <Select.Trigger
         aria-label="toggle color mode"
         class="flex p-4 items-center justify-center transition rounded text-zinc-700 hover:text-zinc-800 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:text-zinc-200 dark:hover:bg-zinc-800"
       >
-        <Select.Value>
-          <Show when={colorMode() === "dark"} fallback={<SunIcon class="h-5 w-5" />}>
-            <MoonIcon class="h-5 w-5" />
-          </Show>
-        </Select.Value>
+        <Select.Value />
       </Select.Trigger>
       <Select.Portal>
         <Select.Content class="bg-white border border-zinc-300 rounded shadow-md py-1 z-50 dark:text-zinc-300 dark:bg-zinc-800 dark:border-none dark:shadow-none">
-          <Select.Listbox>
-            <Item value="light">
-              <SunIcon class="h-4 w-4" />
-              <Select.ItemLabel>Light</Select.ItemLabel>
-            </Item>
-            <Item value="dark">
-              <MoonIcon class="h-4 w-4" />
-              <Select.ItemLabel>Dark</Select.ItemLabel>
-            </Item>
-            <Item value="system">
-              <DesktopIcon class="h-4 w-4" />
-              <Select.ItemLabel>System</Select.ItemLabel>
-            </Item>
-          </Select.Listbox>
+          <Select.Listbox />
         </Select.Content>
       </Select.Portal>
     </Select.Root>

diff --git a/apps/docs/src/examples/select.module.css b/apps/docs/src/examples/select.module.css
@@ -64,6 +64,12 @@
   border-radius: 6px;
   border: 1px solid hsl(240 6% 90%);
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  transform-origin: var(--kb-select-content-transform-origin);
+  animation: contentHide 250ms ease-in forwards;
+}
+
+.select__content[data-expanded] {
+  animation: contentShow 250ms ease-out;
 }
 
 .select__listbox {
@@ -72,6 +78,10 @@
   padding: 8px;
 }
 
+.select__listbox:focus {
+  outline: none;
+}
+
 .select__item {
   font-size: 16px;
   line-height: 1;
@@ -98,19 +108,13 @@
   color: white;
 }
 
-.select__group-label {
+.select__section {
   padding: 0 24px;
   font-size: 14px;
   line-height: 32px;
   color: hsl(240 4% 46%);
 }
 
-.select__separator {
-  height: 1px;
-  border-top: 1px solid hsl(240 6% 90%);
-  margin: 6px;
-}
-
 .select__item-indicator {
   position: absolute;
   left: 0;
@@ -121,6 +125,28 @@
   justify-content: center;
 }
 
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
 [data-kb-theme="dark"] .select__trigger {
   background-color: hsl(240 4% 16%);
   border: 1px solid hsl(240 5% 34%);
@@ -146,18 +172,14 @@
   box-shadow: none;
 }
 
-[data-kb-theme="dark"] .select__group-label {
+[data-kb-theme="dark"] .select__section {
   color: hsl(0 100% 100% / 0.7);
 }
 
 [data-kb-theme="dark"] .select__item {
   color: hsl(0 100% 100% / 0.9);
 }
 
-[data-kb-theme="dark"] .select__separator {
-  border-color: hsl(240 5% 34%);
-}
-
 [data-kb-theme="dark"] .select__description {
   color: hsl(0 100% 100% / 0.7);
 }