opui-css 5.4.2 → 6.0.0-rc.1

package/components/Anchor/AnchorContent.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { getAnchorContext } from "./context.svelte"
+  import type { AnchorContentProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const anchor = getAnchorContext()
+</script>
+
+<span
+  class={["ui-floating", className]}
+  id={anchor?.floatingId}
+  popover={anchor?.popover}
+  {...rest}
+>
+  {@render children?.()}
+</span>

package/components/Anchor/AnchorContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import { AnchorKey } from "./context.vue"
+import type { AnchorContentProps as Props, Slots } from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+
+const anchor = inject(AnchorKey, undefined)
+</script>
+
+<template>
+  <span
+    :class="['ui-floating', $props.class]"
+    :id="anchor?.floatingId"
+    :popover="anchor?.popover"
+  >
+    <slot></slot>
+  </span>
+</template>

package/components/Anchor/context.astro.ts

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

package/components/Anchor/context.react.ts

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

package/components/Anchor/context.svelte.ts

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

package/components/Anchor/context.vue.ts

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

package/components/Anchor/root.ts

@@ -0,0 +1,12 @@
+const roots = new Set(["ui-badge", "ui-tooltip"])
+
+export const extendsAnchor = (value: unknown): boolean => {
+  if (typeof value === "string") {
+    return value.split(/\s+/).some((name) => roots.has(name))
+  }
+  if (Array.isArray(value)) return value.some(extendsAnchor)
+  if (value && typeof value === "object") {
+    return Object.entries(value).some(([name, on]) => on && roots.has(name))
+  }
+  return false
+}

package/components/Anchor/types.astro.ts

@@ -2,3 +2,6 @@ import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props & HTMLAttributes<"span">
+
+export type AnchorContentProps = Base.AnchorContentProps &
+  HTMLAttributes<"span">

package/components/Anchor/types.react.ts

@@ -0,0 +1,7 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & ComponentProps<"span">
+
+export type AnchorContentProps = Base.AnchorContentProps &
+  ComponentProps<"span">

package/components/Anchor/types.svelte.ts

@@ -1,7 +1,7 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
 
-type Snippets = Base.Slots<Snippet>
+export type Props = Base.Props & SvelteHTMLElements["span"]
 
-export type Props = Base.Props & Snippets & SvelteHTMLElements["span"]
+export type AnchorContentProps = Base.AnchorContentProps &
+  SvelteHTMLElements["span"]

package/components/Anchor/types.ts

@@ -1,9 +1,18 @@
 export type Props = {
-  [key: string]: any
-  alignment?: string
-  trigger?: "always" | "hover"
-}
+  positionArea?: string
+} & (
+  | {
+      trigger?: never
+    }
+  | {
+      id: string
+      trigger: "hover"
+    }
+)
+
+export type AnchorContentProps = {}
 
-export type Slots<S> = {
-  anchored?: S
+export type Context = {
+  floatingId?: string
+  popover?: "hint"
 }

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "vue"
+import type { Class, DefaultSlots } from "../vue"
+import type {
+  AnchorContentProps as BaseAnchorContentProps,
+  Props as BaseProps,
+} from "./types"
+
+export type Props = BaseProps &
+  Class & {
+    id?: HTMLAttributes["id"]
+  }
+
+export type AnchorContentProps = BaseAnchorContentProps & Class
+
+export type Slots = DefaultSlots

package/components/Avatar/Avatar.astro

@@ -1,5 +1,7 @@
 ---
 import type { Props } from "./types.astro"
+import type { HTMLAttributes } from "astro/types"
+import { tagAttrs } from "../tag"
 
 export const title = "Avatar"
 
@@ -7,23 +9,25 @@ const {
   alt,
   as,
   class: className,
+  disabled,
   href,
-  isGroup,
+  shape,
+  size,
   src,
-  variant,
   ...rest
 } = Astro.props
 
-const Tag = (as || (href ? "a" : "div")) as any
+const Tag = as || (href ? "a" : "div")
 ---
 
 <Tag
   class:list={[
-    { "ui-avatar": !isGroup },
-    !isGroup && variant && `ui-${variant}`,
+    "ui-avatar",
+    shape && shape !== "circle" && `ui-${shape}`,
+    size && size !== "medium" && `ui-${size}`,
     className,
   ]}
-  href={href}
-  role={isGroup ? "group" : undefined}
-  {...rest}>{src ? <img src={src} alt={alt} /> : <slot />}</Tag
+  {...tagAttrs(Tag, disabled, href)}
+  {...rest as HTMLAttributes<"button">}
+  >{src ? <img src={src} alt={alt ?? ""} /> : <slot />}</Tag
 >

package/components/Avatar/Avatar.react.tsx

@@ -0,0 +1,34 @@
+import type { ElementType } from "react"
+import { cx } from "../cx"
+import { tagAttrs } from "../tag"
+import type { Props } from "./types.react"
+
+export default function Avatar({
+  alt,
+  as,
+  className,
+  disabled,
+  href,
+  shape,
+  size,
+  src,
+  children,
+  ...rest
+}: Props) {
+  const Tag: ElementType = as || (href ? "a" : "div")
+
+  return (
+    <Tag
+      className={cx([
+        "ui-avatar",
+        shape && shape !== "circle" && `ui-${shape}`,
+        size && size !== "medium" && `ui-${size}`,
+        className,
+      ])}
+      {...tagAttrs(Tag as string, disabled, href)}
+      {...(rest as object)}
+    >
+      {src ? <img src={src} alt={alt ?? ""} /> : children}
+    </Tag>
+  )
+}

package/components/Avatar/Avatar.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { tagAttrs } from "../tag"
+  import type { Props } from "./types.svelte"
+
+  let {
+    alt,
+    as,
+    class: className,
+    disabled,
+    href,
+    shape,
+    size,
+    src,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const Tag = $derived(as || (href ? "a" : "div"))
+</script>
+
+<svelte:element
+  this={Tag}
+  class={[
+    "ui-avatar",
+    shape && shape !== "circle" && `ui-${shape}`,
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  {...tagAttrs(Tag, disabled, href)}
+  {...rest}
+>
+  {#if src}
+    <img {src} alt={alt ?? ""} />
+  {:else}
+    {@render children?.()}
+  {/if}
+</svelte:element>

package/components/Avatar/Avatar.vue

@@ -1,24 +1,26 @@
 <script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
+import { computed } from "vue"
+import { tagAttrs } from "../tag"
+import type { Props, Slots } from "./types.vue-props"
 
-const { alt, as, href, isGroup, src, variant } = defineProps<Props>()
+const { alt, as, disabled, href, shape, size, src } = defineProps<Props>()
 defineSlots<Slots>()
 
-const Tag = as || (href ? "a" : "div")
+const Tag = computed(() => as || (href ? "a" : "div"))
 </script>
 
 <template>
   <component
     :is="Tag"
     :class="[
-      { 'ui-avatar': !isGroup },
-      !isGroup && variant && `ui-${variant}`,
+      'ui-avatar',
+      shape && shape !== 'circle' && `ui-${shape}`,
+      size && size !== 'medium' && `ui-${size}`,
       $props.class,
     ]"
-    :href="href"
-    :role="isGroup ? 'group' : undefined"
+    v-bind="tagAttrs(Tag, disabled, href)"
   >
-    <img v-if="src" :src="src" :alt="alt" />
+    <img v-if="src" :src="src" :alt="alt ?? ''" />
     <slot v-else></slot>
   </component>
 </template>

package/components/Avatar/AvatarGroup.astro

@@ -0,0 +1,9 @@
+---
+import type { AvatarGroupProps as Props } from "./types.astro"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={["ui-avatar-group", className]} role="group" {...rest}>
+  <slot />
+</div>

package/components/Avatar/AvatarGroup.react.tsx

@@ -0,0 +1,12 @@
+import { cx } from "../cx"
+import type { AvatarGroupProps as Props } from "./types.react"
+
+export default function AvatarGroup({ className, ...rest }: Props) {
+  return (
+    <div
+      className={cx(["ui-avatar-group", className])}
+      role="group"
+      {...rest}
+    />
+  )
+}

package/components/Avatar/AvatarGroup.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { AvatarGroupProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div class={["ui-avatar-group", className]} role="group" {...rest}>
+  {@render children?.()}
+</div>

package/components/Avatar/AvatarGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarGroupProps as Props, Slots } from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div :class="['ui-avatar-group', $props.class]" role="group">
+    <slot></slot>
+  </div>
+</template>

package/components/Avatar/types.astro.ts

@@ -2,9 +2,10 @@ import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props &
-  Pick<HTMLAttributes<"img">, Base.ImageProps> &
   (
     | ({ as?: "div" } & HTMLAttributes<"div">)
-    | ({ as?: "button" } & HTMLAttributes<"button">)
+    | ({ as: "button" } & HTMLAttributes<"button">)
     | ({ as?: "a" } & HTMLAttributes<"a">)
   )
+
+export type AvatarGroupProps = Base.AvatarGroupProps & HTMLAttributes<"div">

package/components/Avatar/types.react.ts

@@ -0,0 +1,11 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props &
+  (
+    | ({ as?: "div" } & ComponentProps<"div">)
+    | ({ as: "button" } & ComponentProps<"button">)
+    | ({ as?: "a" } & ComponentProps<"a">)
+  )
+
+export type AvatarGroupProps = Base.AvatarGroupProps & ComponentProps<"div">

package/components/Avatar/types.svelte.ts

@@ -1,12 +1,11 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
 
 export type Props = Base.Props &
-  Base.Slots<Snippet> &
-  Pick<SvelteHTMLElements["img"], Base.ImageProps> &
   (
     | ({ as?: "div" } & SvelteHTMLElements["div"])
-    | ({ as?: "button" } & SvelteHTMLElements["button"])
+    | ({ as: "button" } & SvelteHTMLElements["button"])
     | ({ as?: "a" } & SvelteHTMLElements["a"])
   )
+
+export type AvatarGroupProps = Base.AvatarGroupProps & SvelteHTMLElements["div"]

package/components/Avatar/types.ts

@@ -1,29 +1,32 @@
 export type Props = {
-  command?: string
-  commandfor?: string
-  interestfor?: string
-  isGroup?: boolean
-  variant?: "squared" | "rounded" | "squircle"
+  shape?: "circle" | "rounded" | "squared" | "squircle"
+  size?: "x-small" | "small" | "medium" | "large"
 } & (
   | {
       as?: "div"
-      href: never
       disabled?: never
+      href?: never
     }
   | {
       as?: "a"
+      disabled?: boolean
       href: string
-      disabled?: never
     }
   | {
-      as?: "button"
-      href?: never
+      as: "button"
       disabled?: boolean
+      href?: never
     }
-)
-
-export type Slots<S> = {
-  children?: S
-}
+) &
+  (
+    | {
+        alt: string
+        src: string
+      }
+    | {
+        alt?: never
+        src?: never
+      }
+  )
 
-export type ImageProps = "src" | "alt"
+export type AvatarGroupProps = {}

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

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

package/components/Badge/Badge.astro

@@ -2,50 +2,55 @@
 import type { Props } from "./types.astro"
 
 import Anchor from "../Anchor/Anchor.astro"
+import AnchorContent from "../Anchor/AnchorContent.astro"
 
 export const title = "Badge"
 
 const {
-  alignment,
   class: className,
   color,
+  corner,
   dot,
+  hideLabel,
   invisible,
   label,
   ...rest
 } = Astro.props
-
-const positionArea =
-  alignment === "start-start"
-    ? "start start"
-    : alignment === "end-start"
-      ? "end start"
-      : alignment === "end-end"
-        ? "end end"
-        : undefined
 ---
 
 <Anchor
-  alignment={positionArea}
   class:list={[
     "ui-badge",
     {
       "ui-dot": dot,
       "ui-invisible": invisible,
     },
-    alignment && `ui-${alignment}`,
-    className,
     color && `ui-${color}`,
+    corner && corner !== "start-end" && `ui-${corner}`,
+    className,
   ]}
-  {...rest as any}
+  {...rest}
 >
   <slot />
-  <span
-    class="ui-badge-indicator"
-    slot="anchored"
-    aria-label={label?.toString()}
-  >
-    {dot ? "" : label}
-    {!dot && <slot name="indicator" />}
-  </span>
+  <AnchorContent>
+    <span class="ui-indicator">
+      {
+        dot || hideLabel ? (
+          <>
+            {!dot && Astro.slots.has("indicator") && (
+              <span aria-hidden="true">
+                <slot name="indicator" />
+              </span>
+            )}
+            {label && <span class="ui-sr-only">{label}</span>}
+          </>
+        ) : (
+          <>
+            {label}
+            <slot name="indicator" />
+          </>
+        )
+      }
+    </span>
+  </AnchorContent>
 </Anchor>

package/components/Badge/Badge.react.tsx

@@ -0,0 +1,50 @@
+import Anchor from "../Anchor/Anchor.react"
+import AnchorContent from "../Anchor/AnchorContent.react"
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function Badge({
+  className,
+  color,
+  corner,
+  dot,
+  hideLabel,
+  invisible,
+  label,
+  children,
+  indicator,
+  ...rest
+}: Props) {
+  return (
+    <Anchor
+      className={cx([
+        "ui-badge",
+        {
+          "ui-dot": dot,
+          "ui-invisible": invisible,
+        },
+        color && `ui-${color}`,
+        corner && corner !== "start-end" && `ui-${corner}`,
+        className,
+      ])}
+      {...rest}
+    >
+      {children}
+      <AnchorContent>
+        <span className="ui-indicator">
+          {dot || hideLabel ? (
+            <>
+              {!dot && indicator && <span aria-hidden="true">{indicator}</span>}
+              {label && <span className="ui-sr-only">{label}</span>}
+            </>
+          ) : (
+            <>
+              {label}
+              {indicator}
+            </>
+          )}
+        </span>
+      </AnchorContent>
+    </Anchor>
+  )
+}

package/components/Badge/Badge.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import Anchor from "../Anchor/Anchor.svelte"
+  import AnchorContent from "../Anchor/AnchorContent.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    color,
+    corner,
+    dot,
+    hideLabel,
+    invisible,
+    label,
+
+    // Snippets
+    children,
+    indicator,
+    ...rest
+  }: Props = $props()
+</script>
+
+<Anchor
+  class={[
+    "ui-badge",
+    {
+      "ui-dot": dot,
+      "ui-invisible": invisible,
+    },
+    color && `ui-${color}`,
+    corner && corner !== "start-end" && `ui-${corner}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+  <AnchorContent>
+    <span class="ui-indicator">
+      {#if dot || hideLabel}
+        {#if !dot && indicator}<span aria-hidden="true"
+            >{@render indicator()}</span
+          >{/if}
+        {#if label}<span class="ui-sr-only">{label}</span>{/if}
+      {:else}
+        {label}{@render indicator?.()}
+      {/if}
+    </span>
+  </AnchorContent>
+</Anchor>