opui-css 5.4.3 → 6.0.0-rc.1

package/components/ListItem/ListItem.react.tsx

@@ -0,0 +1,65 @@
+import type { ElementType } from "react"
+import { cx } from "../cx"
+import { tagAttrs } from "../tag"
+import type { Props } from "./types.react"
+
+export default function ListItem({
+  as,
+  borderTop,
+  className,
+  color,
+  disabled,
+  href,
+  htmlFor,
+  inset,
+  type,
+  children,
+  description,
+  end,
+  label,
+  start,
+  submenu,
+  ...rest
+}: Props) {
+  const hasControl =
+    type === "checkbox" || type === "radio" || type === "switch"
+  const Tag: ElementType | undefined = hasControl
+    ? "label"
+    : (as ?? (href ? "a" : undefined))
+  const tagProps = hasControl
+    ? { className: `ui-${type}`, htmlFor }
+    : { ...tagAttrs(Tag as string, disabled, href), ...(rest as object) }
+
+  const body = (
+    <>
+      {start && <div className="ui-start">{start}</div>}
+      {label || description ? (
+        <div className="ui-text">
+          {label && <p>{label}</p>}
+          {description && <p>{description}</p>}
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+      {end && <div className="ui-end">{end}</div>}
+    </>
+  )
+
+  return (
+    <li
+      className={cx([
+        {
+          "ui-border-top": borderTop,
+          "ui-inset": inset,
+        },
+        color && `ui-${color}`,
+        className,
+      ])}
+      {...(hasControl || !Tag ? (rest as object) : {})}
+    >
+      {Tag ? <Tag {...tagProps}>{body}</Tag> : body}
+      {submenu}
+    </li>
+  )
+}

package/components/ListItem/ListItem.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { content } from "../content.svelte"
+  import { tagAttrs } from "../tag"
+  import type { Props } from "./types.svelte"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  let {
+    as,
+    borderTop,
+    class: className,
+    color,
+    disabled,
+    for: htmlFor,
+    href,
+    inset,
+    type,
+
+    // Snippets
+    children,
+    description,
+    end,
+    label,
+    start,
+    submenu,
+    ...rest
+  }: Props = $props()
+
+  const hasControl = $derived(
+    type === "checkbox" || type === "radio" || type === "switch",
+  )
+  const Tag = $derived(hasControl ? "label" : (as ?? (href ? "a" : undefined)))
+  const tagProps = $derived(
+    hasControl
+      ? { class: `ui-${type}`, for: htmlFor }
+      : { ...tagAttrs(Tag ?? "", disabled, href), ...rest },
+  )
+</script>
+
+{#snippet body()}
+  {#if start}
+    <div class="ui-start">
+      {@render start()}
+    </div>
+  {/if}
+  {#if label || description}
+    <div class="ui-text">
+      {#if label}<p>{@render content(label)}</p>{/if}
+      {#if description}<p>{@render content(description)}</p>{/if}
+      {@render children?.()}
+    </div>
+  {:else}
+    {@render children?.()}
+  {/if}
+  {#if end}
+    <div class="ui-end">
+      {@render end()}
+    </div>
+  {/if}
+{/snippet}
+
+<li
+  class={[
+    {
+      "ui-border-top": borderTop,
+      "ui-inset": inset,
+    },
+    color && `ui-${color}`,
+    className,
+  ]}
+  {...(hasControl || !Tag ? rest : {}) as HTMLAttributes<HTMLLIElement>}
+>
+  {#if Tag}
+    <svelte:element this={Tag} {...tagProps as HTMLAttributes<HTMLElement>}>
+      {@render body()}
+    </svelte:element>
+  {:else}
+    {@render body()}
+  {/if}
+  {@render submenu?.()}
+</li>

package/components/ListItem/ListItem.vue

@@ -1,98 +1,93 @@
-<script setup lang="ts">
-import { computed, useAttrs } from "vue"
-import type { Props, Slots } from "./types.d.vue"
-
-const props = defineProps<Props>()
-const slots = defineSlots<Slots>()
-const attrs = useAttrs()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const hasLabel = computed(
-  () =>
-    props.type &&
-    (props.type === "checkbox" ||
-      props.type === "radio" ||
-      props.type === "switch"),
-)
-const labelClass = computed(() => props.type || "")
-const Tag = computed(() => props.as)
-
-const liAttrs = computed(() => (Tag.value ? {} : attrs))
-const innerAttrs = computed(() => (Tag.value ? attrs : {}))
-</script>
-
-<template>
-  <li
-    :class="[
-      {
-        'ui-border-top': props.borderTop,
-        'ui-inset': props.inset,
-      },
-      props.class,
-    ]"
-    v-bind="liAttrs"
-  >
-    <label
-      v-if="hasLabel"
-      :class="labelClass && `ui-${labelClass}`"
-      :for="props.for"
-    >
-      <div v-if="slots.start" class="ui-start">
-        <slot name="start"></slot>
-      </div>
-      <div
-        v-if="slots.text || props.headline || props.description"
-        class="ui-text"
-      >
-        <p v-if="props.headline">{{ props.headline }}</p>
-        <p v-if="props.description">{{ props.description }}</p>
-        <slot name="text"></slot>
-      </div>
-      <div v-if="slots.end" class="ui-end">
-        <slot name="end"></slot>
-      </div>
-      <slot></slot>
-    </label>
-
-    <component :is="Tag" v-else-if="Tag" v-bind="innerAttrs">
-      <div v-if="slots.start" class="ui-start">
-        <slot name="start"></slot>
-      </div>
-      <div
-        v-if="props.headline || props.description || slots.text"
-        class="ui-text"
-      >
-        <p v-if="props.headline">{{ props.headline }}</p>
-        <p v-if="props.description">{{ props.description }}</p>
-        <slot name="text"></slot>
-        <slot></slot>
-      </div>
-      <slot v-else></slot>
-      <div v-if="slots.end" class="ui-end">
-        <slot name="end"></slot>
-      </div>
-    </component>
-
-    <template v-else>
-      <div v-if="slots.start" class="ui-start">
-        <slot name="start"></slot>
-      </div>
-      <div
-        v-if="props.headline || props.description || slots.text"
-        class="ui-text"
-      >
-        <p v-if="props.headline">{{ props.headline }}</p>
-        <p v-if="props.description">{{ props.description }}</p>
-        <slot name="text"></slot>
-        <slot></slot>
-      </div>
-      <slot v-else></slot>
-      <div v-if="slots.end" class="ui-end">
-        <slot name="end"></slot>
-      </div>
-    </template>
-  </li>
-</template>
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import { tagAttrs } from "../tag"
+import type { Props, Slots } from "./types.vue-props"
+
+const {
+  as,
+  borderTop,
+  color,
+  description,
+  disabled,
+  for: htmlFor,
+  href,
+  inset,
+  label,
+  type,
+} = defineProps<Props>()
+const slots = defineSlots<Slots>()
+const attrs = useAttrs()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const hasControl = computed(
+  () => type === "checkbox" || type === "radio" || type === "switch",
+)
+const Tag = computed(() =>
+  hasControl.value ? "label" : (as ?? (href ? "a" : undefined)),
+)
+
+const liAttrs = computed(() => (hasControl.value || !Tag.value ? attrs : {}))
+const tagProps = computed(() =>
+  hasControl.value
+    ? { class: `ui-${type}`, for: htmlFor }
+    : { ...tagAttrs(Tag.value ?? "", disabled, href), ...attrs },
+)
+</script>
+
+<template>
+  <li
+    :class="[
+      {
+        'ui-border-top': borderTop,
+        'ui-inset': inset,
+      },
+      color && `ui-${color}`,
+      $props.class,
+    ]"
+    v-bind="liAttrs"
+  >
+    <component :is="Tag" v-if="Tag" v-bind="tagProps">
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="label || description || slots.label || slots.description"
+        class="ui-text"
+      >
+        <p v-if="label || slots.label">{{ label }}<slot name="label"></slot></p>
+        <p v-if="description || slots.description">
+          {{ description }}<slot name="description"></slot>
+        </p>
+        <slot></slot>
+      </div>
+      <slot v-else></slot>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+    </component>
+
+    <template v-else>
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="label || description || slots.label || slots.description"
+        class="ui-text"
+      >
+        <p v-if="label || slots.label">{{ label }}<slot name="label"></slot></p>
+        <p v-if="description || slots.description">
+          {{ description }}<slot name="description"></slot>
+        </p>
+        <slot></slot>
+      </div>
+      <slot v-else></slot>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+    </template>
+    <slot name="submenu"></slot>
+  </li>
+</template>

package/components/ListItem/types.astro.ts

@@ -1,10 +1,9 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type Props = Base.Props &
-  (
-    | ({ as?: "li" } & HTMLAttributes<"li">)
-    | ({ as: "a" } & HTMLAttributes<"a">)
-    | ({ as: "button" } & HTMLAttributes<"button">)
-    | ({ as: "div" } & HTMLAttributes<"div">)
-  )
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props &
+  (
+    | ({ as?: never; href?: never } & HTMLAttributes<"li">)
+    | ({ as?: "a"; href: string } & HTMLAttributes<"a">)
+    | ({ as: "button" } & HTMLAttributes<"button">)
+  )

package/components/ListItem/types.react.ts

@@ -0,0 +1,17 @@
+import type * as Base from "./types"
+import type { ComponentProps, ReactNode } from "react"
+
+type WithoutFor<T> = T extends unknown
+  ? Omit<T, "description" | "for" | "label">
+  : never
+
+// prettier-ignore
+export type Props =
+  WithoutFor<Base.Props> &
+  { htmlFor?: string } &
+  Base.Slots<ReactNode> &
+  (
+    | ({ as?: never; href?: never } & ComponentProps<"li">)
+    | ({ as?: "a"; href: string } & ComponentProps<"a">)
+    | ({ as: "button" } & ComponentProps<"button">)
+  )

package/components/ListItem/types.svelte.ts

@@ -1,14 +1,17 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
-
-// prettier-ignore
-export type Props =
-  Base.Props &
-  Base.Slots<Snippet> &
-  (
-    | ({ as?: "li" } & SvelteHTMLElements["li"])
-    | ({ as: "a" } & SvelteHTMLElements["a"])
-    | ({ as: "button" } & SvelteHTMLElements["button"])
-    | ({ as: "div" } & SvelteHTMLElements["div"])
-  )
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type WithoutText<T> = T extends unknown
+  ? Omit<T, "description" | "label">
+  : never
+
+// prettier-ignore
+export type Props =
+  WithoutText<Base.Props> &
+  Base.Slots<Snippet> &
+  (
+    | ({ as?: never; href?: never } & SvelteHTMLElements["li"])
+    | ({ as?: "a"; href: string } & SvelteHTMLElements["a"])
+    | ({ as: "button" } & SvelteHTMLElements["button"])
+  )

package/components/ListItem/types.ts

@@ -1,32 +1,35 @@
-export type Props = {
-  borderTop?: boolean
-  class?: string
-  description?: string
-  for?: string
-  headline?: string
-  inset?: boolean
-  type?: "checkbox" | "radio" | "switch" | "button"
-} & (
-  | {
-      as?: "a"
-      href: string
-      disabled?: never
-    }
-  | {
-      as?: "button"
-      href?: never
-      disabled?: boolean
-    }
-  | {
-      as?: string
-      href?: never
-    }
-)
-
-export type Slots<S> = {
-  description?: string | S
-  end?: string | S
-  headline?: string | S
-  start?: string | S
-  text?: string | S
-}
+export type Props = {
+  borderTop?: boolean
+  color?: "critical"
+  description?: string
+  for?: string
+  inset?: boolean
+  label?: string
+} & (
+  | {
+      as?: "a"
+      disabled?: boolean
+      href: string
+      type?: never
+    }
+  | {
+      as: "button"
+      disabled?: boolean
+      href?: never
+      type?: never
+    }
+  | {
+      as?: never
+      disabled?: never
+      href?: never
+      type?: "checkbox" | "radio" | "switch"
+    }
+)
+
+export type Slots<S> = {
+  description?: string | S
+  end?: S
+  label?: string | S
+  start?: S
+  submenu?: S
+}

package/components/ListItem/types.vue-props.ts

@@ -0,0 +1,14 @@
+import type { Slot } from "vue"
+import type { Class } from "../vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & Class
+
+export type Slots = {
+  default?: Slot
+  description?: Slot
+  end?: Slot
+  label?: Slot
+  start?: Slot
+  submenu?: Slot
+}

package/components/Menu/Menu.astro

@@ -0,0 +1,86 @@
+---
+import type { Props } from "./types.astro"
+import { menuContext } from "./context.astro"
+import { warnMissingId } from "../dev"
+import { tagAttrs } from "../tag"
+
+export const title = "Menu"
+
+const {
+  align,
+  bordered,
+  class: className,
+  dense,
+  id,
+  items,
+  popover = "auto",
+  side,
+  ...rest
+} = Astro.props
+
+warnMissingId("Menu", id)
+const rootId = menuContext.get()?.rootId ?? id
+const html = await menuContext.provide({ rootId }, () =>
+  Astro.slots.render("default"),
+)
+---
+
+<menu
+  class:list={[
+    "ui-menu",
+    {
+      "ui-align-end": align === "end",
+      "ui-bordered": bordered,
+      "ui-dense": dense,
+    },
+    side && side !== "block-end" && `ui-${side}`,
+    className,
+  ]}
+  id={id}
+  popover={popover === "auto" ? "" : popover}
+  {...rest}
+>
+  {
+    items?.map(
+      ({
+        borderTop,
+        color,
+        disabled,
+        href,
+        keepOpen,
+        label,
+        shortcut,
+        ...itemRest
+      }) => {
+        const Tag = href ? "a" : "button"
+        const closes = !href && !keepOpen && !disabled
+
+        return (
+          <li
+            class:list={[
+              { "ui-border-top": borderTop },
+              color && `ui-${color}`,
+            ]}
+          >
+            <Tag
+              {...tagAttrs(Tag, disabled, href)}
+              command={closes ? "hide-popover" : undefined}
+              commandfor={closes ? rootId : undefined}
+              {...itemRest}
+            >
+              <div class="ui-text">
+                <p>{label}</p>
+              </div>
+              {shortcut && (
+                <div class="ui-end">
+                  <kbd>{shortcut}</kbd>
+                </div>
+              )}
+            </Tag>
+          </li>
+        )
+      },
+    )
+  }
+  <Fragment set:html={html} />
+</menu>

package/components/Menu/Menu.react.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { cx } from "../cx"
+import { warnMissingId } from "../dev"
+import { tagAttrs } from "../tag"
+import { MenuContext, useMenuContext } from "./context.react"
+import type { Props } from "./types.react"
+
+export default function Menu({
+  align,
+  bordered,
+  className,
+  dense,
+  id,
+  items,
+  popover = "auto",
+  side,
+  children,
+  ...rest
+}: Props) {
+  warnMissingId("Menu", id)
+  const rootId = useMenuContext()?.rootId ?? id
+
+  return (
+    <menu
+      className={cx([
+        "ui-menu",
+        {
+          "ui-align-end": align === "end",
+          "ui-bordered": bordered,
+          "ui-dense": dense,
+        },
+        side && side !== "block-end" && `ui-${side}`,
+        className,
+      ])}
+      id={id}
+      popover={popover === "auto" ? "" : popover}
+      {...rest}
+    >
+      {items?.map(
+        (
+          {
+            borderTop,
+            color,
+            disabled,
+            href,
+            keepOpen,
+            label,
+            shortcut,
+            ...itemRest
+          },
+          index,
+        ) => {
+          const Tag = href ? "a" : "button"
+          const closes = !href && !keepOpen && !disabled
+
+          return (
+            <li
+              className={cx([
+                { "ui-border-top": borderTop },
+                color && `ui-${color}`,
+              ])}
+              key={index}
+            >
+              <Tag
+                {...tagAttrs(Tag, disabled, href)}
+                command={closes ? "hide-popover" : undefined}
+                commandfor={closes ? rootId : undefined}
+                {...itemRest}
+              >
+                <div className="ui-text">
+                  <p>{label}</p>
+                </div>
+                {shortcut && (
+                  <div className="ui-end">
+                    <kbd>{shortcut}</kbd>
+                  </div>
+                )}
+              </Tag>
+            </li>
+          )
+        },
+      )}
+      <MenuContext value={{ rootId }}>{children}</MenuContext>
+    </menu>
+  )
+}