@adea-ai/ui 0.61.1 → 0.63.0

package/src/components/composites/appearance-editor/theme-preview.tsx

@@ -0,0 +1,128 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2026 Wing
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/*
+ * Substantially translated from Zeron crates/ui/src/settings/appearance.rs
+ * `bar`, `miniature`, `miniature_split`, and `palette_preview`, revision
+ * 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59, via Adea's existing
+ * packages/ui/src/components/theme-preview.tsx adaptation.
+ * Retains the sidebar/pane decomposition, exact bar fractions and opacity,
+ * split outer corners, and three-band palette strip. GPUI and Adea's local
+ * ThemeVariant are replaced by Solid and the canonical AdeaTheme schema.
+ * Dynamic inline colors are theme data; no palette is authored here.
+ */
+import type { AdeaTheme } from '@adea-ai/themes'
+import { For } from 'solid-js'
+import { cn } from '#lib/utils'
+
+export type ThemeMiniatureProps = {
+  theme: AdeaTheme
+  corners?: 'all' | 'left' | 'right'
+  class?: string
+}
+
+function Bar(props: { fraction: number; opacity: number; color: string }) {
+  return (
+    <span
+      class="h-[5px] rounded-[3px]"
+      style={{
+        width: `${Math.round(props.fraction * 100)}%`,
+        'background-color': props.color,
+        opacity: props.opacity,
+      }}
+    />
+  )
+}
+
+export function ThemeMiniature(props: ThemeMiniatureProps) {
+  return (
+    <span
+      data-theme-miniature
+      aria-hidden="true"
+      class={cn(
+        'flex size-full overflow-hidden',
+        {
+          'rounded-md': !props.corners || props.corners === 'all',
+          'rounded-l-md': props.corners === 'left',
+          'rounded-r-md': props.corners === 'right',
+        },
+        props.class
+      )}
+      style={{ 'background-color': props.theme.colors.surface }}
+    >
+      <span class="flex h-full w-11 shrink-0 flex-col gap-[7px] overflow-hidden px-2 pt-3.5">
+        <Bar fraction={0.7} opacity={0.34} color={props.theme.colors.foreground} />
+        <Bar fraction={1} opacity={0.22} color={props.theme.colors.foreground} />
+        <Bar fraction={0.85} opacity={0.22} color={props.theme.colors.foreground} />
+        <Bar fraction={1} opacity={0.22} color={props.theme.colors.foreground} />
+      </span>
+      <span
+        class="my-2 mr-2 flex min-w-0 flex-1 flex-col gap-[7px] overflow-hidden rounded-md border border-(--appearance-preview-border) p-2.5"
+        style={{
+          'background-color': props.theme.colors.background,
+          '--appearance-preview-border': props.theme.colors.border,
+        }}
+      >
+        <Bar fraction={0.62} opacity={0.34} color={props.theme.colors.foreground} />
+        <Bar fraction={0.88} opacity={0.22} color={props.theme.colors.foreground} />
+        <Bar fraction={0.76} opacity={0.22} color={props.theme.colors.foreground} />
+        <Bar fraction={0.52} opacity={0.22} color={props.theme.colors.foreground} />
+      </span>
+    </span>
+  )
+}
+
+export function ThemeMiniatureSplit(props: { light: AdeaTheme; dark: AdeaTheme; class?: string }) {
+  return (
+    <span class={cn('flex size-full', props.class)} aria-hidden="true">
+      <span class="h-full w-1/2 overflow-hidden">
+        <ThemeMiniature theme={props.light} corners="left" />
+      </span>
+      <span class="h-full w-1/2 overflow-hidden">
+        <ThemeMiniature theme={props.dark} corners="right" />
+      </span>
+    </span>
+  )
+}
+
+export function PalettePreview(props: { theme: AdeaTheme; class?: string }) {
+  const bands = () => [
+    props.theme.colors.surface,
+    props.theme.colors.background,
+    props.theme.colors.accent,
+  ]
+  return (
+    <span
+      class={cn(
+        'flex h-[18px] w-[30px] shrink-0 overflow-hidden rounded-[5px] border border-(--appearance-preview-border)',
+        props.class
+      )}
+      aria-hidden="true"
+      style={{ '--appearance-preview-border': props.theme.colors.border }}
+    >
+      <For each={bands()}>
+        {(band) => <span class="h-full w-1/3" style={{ 'background-color': band }} />}
+      </For>
+    </span>
+  )
+}

package/src/components/ui/select/select.tsx

@@ -129,11 +129,16 @@ export function SelectValue(props: SelectValueProps) {
  * which is what makes a Select able to render a typed option rather than a
  * string; `children` here is for content above the list, such as a filter hint.
  */
-export function SelectContent(props: ComponentProps<typeof KobalteSelect.Content>) {
-  const [local, rest] = splitProps(props, ['class', 'children'])
+export type SelectContentProps = ComponentProps<typeof KobalteSelect.Content> & {
+  /** Keep a nested menu inside its enclosing modal's accessible subtree. */
+  portalMount?: HTMLElement
+}
+
+export function SelectContent(props: SelectContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'portalMount'])
 
   return (
-    <KobalteSelect.Portal>
+    <KobalteSelect.Portal mount={local.portalMount}>
       <KobalteSelect.Content
         class={cn(
           'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',

package/src/index.ts

@@ -10,8 +10,8 @@
  *   import '@adea-ai/ui/fonts.css'
  *
  * Everything here is covered by the Storybook workshop in `apps/storybook`,
- * which is also where the reasoning behind each component is written down. If a
- * component is not exported here, it is not part of the contract.
+ * which is also where the reasoning behind each component is written down. An
+ * optional-peer component lives on its documented component subpath rather than here.
  */
 
 /* --- Primitives ---------------------------------------------------------- */
@@ -26,8 +26,6 @@ export * from './components/ui/breadcrumb'
 export * from './components/ui/button'
 export * from './components/ui/button-group'
 export * from './components/ui/calendar'
-export * from './components/ui/carousel'
-export * from './components/ui/chart'
 export * from './components/ui/card'
 export * from './components/ui/checkbox'
 export * from './components/ui/collapsible'
@@ -98,6 +96,7 @@ export * from './components/composites/account-menu'
 export * from './components/composites/list-row'
 export * from './components/composites/settings'
 export * from './components/composites/stat'
+export * from './components/composites/appearance-editor'
 export * from './components/composites/update-dialog'
 export * from './components/composites/workspace-mark'
 

package/dist/components/ui/diff-block/diff-block.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=diff-block.test.d.ts.map

package/dist/components/ui/diff-block/diff-block.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"diff-block.test.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/diff-block/diff-block.test.ts"],"names":[],"mappings":""}

package/dist/lib/keyed-rows.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=keyed-rows.test.d.ts.map

package/dist/lib/keyed-rows.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyed-rows.test.d.ts","sourceRoot":"","sources":["../../src/lib/keyed-rows.test.ts"],"names":[],"mappings":""}