opui-css 5.4.3 → 6.0.0-rc.1

package/components/Menu/Menu.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { warnMissingId } from "../dev"
+  import { getMenuContext, setMenuContext } from "./context.svelte"
+  import { tagAttrs } from "../tag"
+  import type { Props } from "./types.svelte"
+
+  let {
+    align,
+    bordered,
+    class: className,
+    dense,
+    id,
+    items,
+    popover = "auto",
+    side,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  untrack(() => warnMissingId("Menu", id))
+  const parent = getMenuContext()
+  const rootId = $derived(parent?.rootId ?? id)
+
+  setMenuContext({
+    get rootId() {
+      return rootId
+    },
+  })
+</script>
+
+<menu
+  class={[
+    "ui-menu",
+    {
+      "ui-align-end": align === "end",
+      "ui-bordered": bordered,
+      "ui-dense": dense,
+    },
+    side && side !== "block-end" && `ui-${side}`,
+    className,
+  ]}
+  {id}
+  popover={popover === "auto" ? "" : popover}
+  {...rest}
+>
+  {#each items ?? [] as { borderTop, color, disabled, href, keepOpen, label, shortcut, ...itemRest }, index (index)}
+    {@const closes = !href && !keepOpen && !disabled}
+    <li class={[{ "ui-border-top": borderTop }, color && `ui-${color}`]}>
+      <svelte:element
+        this={href ? "a" : "button"}
+        {...tagAttrs(href ? "a" : "button", disabled, href)}
+        command={closes ? "hide-popover" : undefined}
+        commandfor={closes ? rootId : undefined}
+        {...itemRest}
+      >
+        <div class="ui-text">
+          <p>{label}</p>
+        </div>
+        {#if shortcut}
+          <div class="ui-end">
+            <kbd>{shortcut}</kbd>
+          </div>
+        {/if}
+      </svelte:element>
+    </li>
+  {/each}
+  {@render children?.()}
+</menu>

package/components/Menu/Menu.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, inject, provide, reactive } from "vue"
+import { warnMissingId } from "../dev"
+import { MenuKey } from "./context.vue"
+import { tagAttrs } from "../tag"
+import type { Props, Slots } from "./types.vue-props"
+
+const {
+  align,
+  bordered,
+  dense,
+  id,
+  items,
+  popover = "auto",
+  side,
+} = defineProps<Props>()
+defineSlots<Slots>()
+
+warnMissingId("Menu", id)
+const parent = inject(MenuKey, undefined)
+const rootId = computed(() => parent?.rootId ?? id)
+provide(MenuKey, reactive({ rootId }))
+</script>
+
+<template>
+  <menu
+    :id="id"
+    :class="[
+      'ui-menu',
+      {
+        'ui-align-end': align === 'end',
+        'ui-bordered': bordered,
+        'ui-dense': dense,
+      },
+      side && side !== 'block-end' && `ui-${side}`,
+      $props.class,
+    ]"
+    :popover="popover === 'auto' ? '' : popover"
+  >
+    <li
+      v-for="(
+        {
+          borderTop,
+          color,
+          disabled,
+          href,
+          keepOpen,
+          label,
+          shortcut,
+          ...itemRest
+        },
+        index
+      ) in items"
+      :key="index"
+      :class="[{ 'ui-border-top': borderTop }, color && `ui-${color}`]"
+    >
+      <component
+        :is="href ? 'a' : 'button'"
+        :command="!href && !keepOpen && !disabled ? 'hide-popover' : undefined"
+        :commandfor="!href && !keepOpen && !disabled ? rootId : undefined"
+        v-bind="{
+          ...tagAttrs(href ? 'a' : 'button', disabled, href),
+          ...itemRest,
+        }"
+      >
+        <div class="ui-text">
+          <p>{{ label }}</p>
+        </div>
+        <div v-if="shortcut" class="ui-end">
+          <kbd>{{ shortcut }}</kbd>
+        </div>
+      </component>
+    </li>
+    <slot></slot>
+  </menu>
+</template>

package/components/Menu/context.astro.ts

@@ -0,0 +1,4 @@
+import { createContext } from "../context.astro"
+import type { Context } from "./types"
+
+export const menuContext = createContext<Context>()

package/components/Menu/context.react.ts

@@ -0,0 +1,8 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import type { Context } from "./types"
+
+export const MenuContext = createContext<Context | undefined>(undefined)
+
+export const useMenuContext = () => useContext(MenuContext)

package/components/Menu/context.svelte.ts

@@ -0,0 +1,7 @@
+import { getContext, setContext } from "svelte"
+import type { Context } from "./types"
+
+const key = Symbol()
+
+export const getMenuContext = () => getContext<Context | undefined>(key)
+export const setMenuContext = (context: Context) => setContext(key, context)

package/components/Menu/context.vue.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue"
+import type { Context } from "./types"
+
+export const MenuKey = Symbol() as InjectionKey<Context>

package/components/Menu/types.astro.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type MenuItem = Base.MenuItem &
+  Omit<
+    HTMLAttributes<"a"> & HTMLAttributes<"button">,
+    keyof Base.MenuItem | "children"
+  >
+
+export type Props = Omit<Base.Props, "items"> & {
+  items?: MenuItem[]
+} & Omit<HTMLAttributes<"menu">, "id" | "popover">

package/components/Menu/types.react.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type MenuItem = Base.MenuItem &
+  Omit<
+    ComponentProps<"a"> & ComponentProps<"button">,
+    keyof Base.MenuItem | "children"
+  >
+
+export type Props = Omit<Base.Props, "items"> & {
+  items?: MenuItem[]
+} & Omit<ComponentProps<"menu">, "id" | "popover">

package/components/Menu/types.svelte.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type MenuItem = Base.MenuItem &
+  Omit<
+    SvelteHTMLElements["a"] & SvelteHTMLElements["button"],
+    keyof Base.MenuItem | "children"
+  >
+
+export type Props = Omit<Base.Props, "items"> & {
+  items?: MenuItem[]
+} & Omit<SvelteHTMLElements["menu"], "id" | "popover">

package/components/Menu/types.ts

@@ -0,0 +1,23 @@
+export type MenuItem = {
+  borderTop?: boolean
+  color?: "critical"
+  disabled?: boolean
+  href?: string
+  keepOpen?: boolean
+  label: string
+  shortcut?: string
+}
+
+export type Props = {
+  align?: "start" | "end"
+  bordered?: boolean
+  dense?: boolean
+  id: string
+  items?: MenuItem[]
+  popover?: "auto" | "manual"
+  side?: "block-end" | "block-start" | "inline-end" | "inline-start"
+}
+
+export type Context = {
+  rootId?: string
+}

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

@@ -0,0 +1,16 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from "vue"
+import type { Class, DefaultSlots } from "../vue"
+import type { MenuItem as BaseMenuItem, Props as BaseProps } from "./types"
+
+export type MenuItem = BaseMenuItem &
+  Omit<
+    AnchorHTMLAttributes & ButtonHTMLAttributes,
+    keyof BaseMenuItem | "children"
+  >
+
+export type Props = Omit<BaseProps, "items"> &
+  Class & {
+    items?: MenuItem[]
+  }
+
+export type Slots = DefaultSlots

package/components/Progress/Progress.astro

@@ -1,31 +1,20 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Progress"
-
-const {
-  "aria-busy": ariaBusy,
-  "aria-describedby": ariaDescribedby,
-  "aria-label": ariaLabel,
-  class: className,
-  id,
-  max,
-  value,
-  variant,
-  ...rest
-} = Astro.props
----
-
-<div class:list={["ui-progress", className, variant && `ui-${variant}`]}>
-  <progress
-    aria-busy={ariaBusy}
-    aria-describedby={ariaDescribedby}
-    aria-label={ariaLabel}
-    id={id}
-    max={max}
-    value={value}
-    {...rest}
-  >
-    <slot />
-  </progress>
-</div>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Progress"
+
+const { class: className, max, style, value, variant, ...rest } = Astro.props
+---
+
+<div
+  class:list={[
+    "ui-progress",
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
+  style={style}
+>
+  <progress max={max} value={value} {...rest}>
+    <slot />
+  </progress>
+</div>

package/components/Progress/Progress.react.tsx

@@ -0,0 +1,27 @@
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function Progress({
+  className,
+  max,
+  style,
+  value,
+  variant,
+  children,
+  ...rest
+}: Props) {
+  return (
+    <div
+      className={cx([
+        "ui-progress",
+        variant && variant !== "tonal" && `ui-${variant}`,
+        className,
+      ])}
+      style={style}
+    >
+      <progress max={max} value={value} {...rest}>
+        {children}
+      </progress>
+    </div>
+  )
+}

package/components/Progress/Progress.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    max,
+    style,
+    value,
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div
+  class={[
+    "ui-progress",
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
+  {style}
+>
+  {#key value == null}
+    <progress {max} {value} {...rest}>
+      {@render children?.()}
+    </progress>
+  {/key}
+</div>

package/components/Progress/Progress.vue

@@ -1,34 +1,30 @@
-<script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineSlots<Slots>()
-const {
-  "aria-busy": ariaBusy,
-  "aria-describedby": ariaDescribedby,
-  "aria-label": ariaLabel,
-  id,
-  max,
-  value,
-  variant,
-} = defineProps<Props>()
-</script>
-
-<template>
-  <div :class="['ui-progress', variant && `ui-${variant}`, $props.class]">
-    <progress
-      v-bind="$attrs"
-      :aria-busy="ariaBusy"
-      :aria-describedby="ariaDescribedby"
-      :aria-label="ariaLabel"
-      :id="id"
-      :max="max"
-      :value="value"
-    >
-      <slot></slot>
-    </progress>
-  </div>
-</template>
+<script setup lang="ts">
+import { useAttrs } from "vue"
+import { useInputAttrs } from "../vue"
+import type { Props, Slots } from "./types.vue-props"
+
+const { max, value, variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+const progressAttrs = useInputAttrs()
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-progress',
+      variant && variant !== 'tonal' && `ui-${variant}`,
+      $props.class,
+    ]"
+    :style="$attrs.style"
+  >
+    <progress v-bind="progressAttrs" :max="max" :value="value">
+      <slot></slot>
+    </progress>
+  </div>
+</template>

package/components/Progress/types.astro.ts

@@ -1,4 +1,5 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type Props = Base.Props & HTMLAttributes<"progress">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props &
+  Omit<HTMLAttributes<"progress">, "max" | "value">

package/components/Progress/types.react.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props &
+  Omit<ComponentProps<"progress">, "max" | "value">

package/components/Progress/types.svelte.ts

@@ -1,4 +1,5 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type Props = Base.Props & SvelteHTMLElements["progress"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props &
+  Omit<SvelteHTMLElements["progress"], "max" | "value">

package/components/Progress/types.ts

@@ -1,10 +1,5 @@
-export type Props = {
-  [key: string]: any
-  "aria-busy"?: "true" | "false" | boolean
-  "aria-describedby"?: string
-  "aria-label"?: string
-  id?: string
-  max?: number | string
-  value?: number | string
-  variant?: "filled" | "default" | "tonal"
-}
+export type Props = {
+  max?: number | string
+  value?: number | string
+  variant?: "filled" | "tonal"
+}

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

@@ -0,0 +1,6 @@
+import type { Class, DefaultSlots } from "../vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & Class
+
+export type Slots = DefaultSlots

package/components/Radio/Radio.astro

@@ -1,44 +1,58 @@
----
-import type { RadioProps as Props } from "./types.astro"
-import RadioInput from "./RadioInput.astro"
-
-export const title = "Radio"
-
-const {
-  class: className,
-  disabled,
-  error,
-  hideLabel,
-  name,
-  size,
-  stack,
-  ...rest
-} = Astro.props
-
-const { $id, currentFieldName } = Astro.locals
-const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
-
-const finalName = name || currentFieldName
----
-
-<label
-  class:list={[
-    "ui-radio",
-    size && `ui-${size}`,
-    {
-      "ui-stack": stack,
-    },
-    className,
-  ]}
-  data-invalid={error || undefined}
->
-  <RadioInput aria-describedby={endTextId} name={finalName} {...rest} />
-  <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
-  {
-    Astro.slots.has("end-text") && (
-      <span id={endTextId} class="ui-end-text">
-        <slot name="end-text" />
-      </span>
-    )
-  }
-</label>
+---
+import type { Props } from "./types.astro"
+import { hasName, warnUnnamed } from "../dev"
+import RadioInput from "./RadioInput.astro"
+
+export const title = "Radio"
+
+const {
+  "aria-invalid": ariaInvalid,
+  card,
+  class: className,
+  endText,
+  error,
+  hideLabel,
+  label,
+  orientation,
+  size,
+  spread,
+  style,
+  variant,
+  ...rest
+} = Astro.props
+
+warnUnnamed("Radio", hasName(Astro.props, Astro.slots.has("default")))
+---
+
+<label
+  class:list={[
+    "ui-radio",
+    {
+      "ui-card": card,
+      "ui-spread": spread,
+    },
+    card && variant && variant !== "outlined" && `ui-${variant}`,
+    orientation && orientation !== "horizontal" && `ui-${orientation}`,
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  style={style}
+>
+  <RadioInput {...rest} aria-invalid={error ? "true" : ariaInvalid} />
+  {
+    (label || Astro.slots.has("default")) && (
+      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}>
+        {label}
+        <slot />
+      </span>
+    )
+  }
+  {
+    (endText || Astro.slots.has("end-text")) && (
+      <span class="ui-end-text">
+        {endText}
+        <slot name="end-text" />
+      </span>
+    )
+  }
+</label>

package/components/Radio/Radio.react.tsx

@@ -0,0 +1,51 @@
+import { cx } from "../cx"
+import { hasName, warnUnnamed } from "../dev"
+import RadioInput from "./RadioInput.react"
+import type { Props } from "./types.react"
+
+export default function Radio({
+  card,
+  className,
+  error,
+  hideLabel,
+  label,
+  orientation,
+  size,
+  spread,
+  style,
+  variant,
+  children,
+  endText,
+  ...rest
+}: Props) {
+  warnUnnamed("Radio", hasName({ ...rest, label }, children))
+
+  return (
+    <label
+      className={cx([
+        "ui-radio",
+        {
+          "ui-card": card,
+          "ui-spread": spread,
+        },
+        card && variant && variant !== "outlined" && `ui-${variant}`,
+        orientation && orientation !== "horizontal" && `ui-${orientation}`,
+        size && size !== "medium" && `ui-${size}`,
+        className,
+      ])}
+      style={style}
+    >
+      <RadioInput
+        {...rest}
+        aria-invalid={error ? "true" : rest["aria-invalid"]}
+      />
+      {(label || children) && (
+        <span className={hideLabel ? "ui-sr-only" : "ui-label"}>
+          {label}
+          {children}
+        </span>
+      )}
+      {endText && <span className="ui-end-text">{endText}</span>}
+    </label>
+  )
+}