opui-css 5.4.3 → 6.0.0-rc.1

package/components/Avatar/types.ts

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

@@ -1,51 +1,56 @@
----
-import type { Props } from "./types.astro"
-
-import Anchor from "../Anchor/Anchor.astro"
-
-export const title = "Badge"
-
-const {
-  alignment,
-  class: className,
-  color,
-  dot,
-  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}`,
-  ]}
-  {...rest as any}
->
-  <slot />
-  <span
-    class="ui-badge-indicator"
-    slot="anchored"
-    aria-label={label?.toString()}
-  >
-    {dot ? "" : label}
-    {!dot && <slot name="indicator" />}
-  </span>
-</Anchor>
+---
+import type { Props } from "./types.astro"
+
+import Anchor from "../Anchor/Anchor.astro"
+import AnchorContent from "../Anchor/AnchorContent.astro"
+
+export const title = "Badge"
+
+const {
+  class: className,
+  color,
+  corner,
+  dot,
+  hideLabel,
+  invisible,
+  label,
+  ...rest
+} = Astro.props
+---
+
+<Anchor
+  class:list={[
+    "ui-badge",
+    {
+      "ui-dot": dot,
+      "ui-invisible": invisible,
+    },
+    color && `ui-${color}`,
+    corner && corner !== "start-end" && `ui-${corner}`,
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+  <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>

package/components/Badge/Badge.vue

@@ -1,40 +1,36 @@
-<script setup lang="ts">
-import Anchor from "../Anchor/Anchor.vue"
-import type { Props, Slots } from "./types.d.vue"
-
-const { alignment, color, dot, invisible, label } = defineProps<Props>()
-defineSlots<Slots>()
-
-const positionArea =
-  alignment === "start-start"
-    ? "start start"
-    : alignment === "end-start"
-      ? "end start"
-      : alignment === "end-end"
-        ? "end end"
-        : undefined
-</script>
-
-<template>
-  <Anchor
-    :alignment="positionArea"
-    :class="[
-      'ui-badge',
-      {
-        'ui-dot': dot,
-        'ui-invisible': invisible,
-      },
-      alignment && `ui-${alignment}`,
-      color && `ui-${color}`,
-      $props.class,
-    ]"
-  >
-    <slot></slot>
-    <template #anchored>
-      <span class="ui-badge-indicator" :aria-label="label?.toString()">
-        {{ dot ? "" : label }}
-        <slot v-if="!dot" name="indicator"></slot>
-      </span>
-    </template>
-  </Anchor>
-</template>
+<script setup lang="ts">
+import Anchor from "../Anchor/Anchor.vue"
+import AnchorContent from "../Anchor/AnchorContent.vue"
+import type { Props, Slots } from "./types.vue-props"
+
+const { color, corner, dot, hideLabel, invisible, label } = defineProps<Props>()
+const slots = defineSlots<Slots>()
+</script>
+
+<template>
+  <Anchor
+    :class="[
+      'ui-badge',
+      {
+        'ui-dot': dot,
+        'ui-invisible': invisible,
+      },
+      color && `ui-${color}`,
+      corner && corner !== 'start-end' && `ui-${corner}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+    <AnchorContent>
+      <span class="ui-indicator">
+        <template v-if="dot || hideLabel">
+          <span v-if="!dot && slots.indicator" aria-hidden="true">
+            <slot name="indicator"></slot>
+          </span>
+          <span v-if="label" class="ui-sr-only">{{ label }}</span>
+        </template>
+        <template v-else> {{ label }}<slot name="indicator"></slot> </template>
+      </span>
+    </AnchorContent>
+  </Anchor>
+</template>

package/components/Badge/types.astro.ts

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

package/components/Badge/types.react.ts

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

package/components/Badge/types.svelte.ts

@@ -1,4 +1,7 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type Props = Base.Props & SvelteHTMLElements["span"]
+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 & Snippets & SvelteHTMLElements["span"]

package/components/Badge/types.ts

@@ -1,12 +1,12 @@
-export type Props = {
-  [key: string]: any
-  alignment?: "start-start" | "end-start" | "end-end"
-  color?: "critical" | "info" | "neutral" | "success" | "warning"
-  dot?: boolean
-  invisible?: boolean
-  label?: string | number
-}
-
-export type Slots<S> = {
-  indicator?: S
-}
+export type Props = {
+  color?: "critical" | "info" | "neutral" | "success" | "warning"
+  corner?: "start-start" | "start-end" | "end-start" | "end-end"
+  dot?: boolean
+  hideLabel?: boolean
+  invisible?: boolean
+  label?: string
+}
+
+export type Slots<S> = {
+  indicator?: S
+}

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

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

package/components/Button/Button.astro

@@ -1,36 +1,36 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Button"
-
-const props = Astro.props as Props
-const {
-  as,
-  class: className,
-  color,
-  size,
-  variant,
-  disabled,
-  href,
-  ...rest
-} = props
-
-const Tag = (as || (href ? "a" : "button")) as any
-const isButton = Tag === "button"
----
-
-<Tag
-  class:list={[
-    "ui-button",
-    { "ui-disabled": isButton && disabled },
-    size && `ui-${size}`,
-    variant && `ui-${variant}`,
-    color && `ui-${color}`,
-    className,
-  ]}
-  disabled={isButton ? disabled : undefined}
-  href={href}
-  {...rest as any}
->
-  <slot />
-</Tag>
+---
+import type { Props } from "./types.astro"
+import type { HTMLAttributes } from "astro/types"
+import { tagAttrs } from "../tag"
+
+export const title = "Button"
+
+const {
+  as,
+  class: className,
+  color,
+  disabled,
+  href,
+  round,
+  size,
+  variant,
+  ...rest
+} = Astro.props
+
+const Tag = as || (href ? "a" : "button")
+---
+
+<Tag
+  class:list={[
+    "ui-button",
+    { "ui-round": round },
+    color && `ui-${color}`,
+    size && size !== "medium" && `ui-${size}`,
+    variant && variant !== "transparent" && `ui-${variant}`,
+    className,
+  ]}
+  {...tagAttrs(Tag, disabled, href)}
+  {...rest as HTMLAttributes<"button">}
+>
+  <slot />
+</Tag>

package/components/Button/Button.react.tsx

@@ -0,0 +1,33 @@
+import type { ElementType } from "react"
+import { cx } from "../cx"
+import { tagAttrs } from "../tag"
+import type { Props } from "./types.react"
+
+export default function Button({
+  as,
+  className,
+  color,
+  disabled,
+  href,
+  round,
+  size,
+  variant,
+  ...rest
+}: Props) {
+  const Tag: ElementType = as || (href ? "a" : "button")
+
+  return (
+    <Tag
+      className={cx([
+        "ui-button",
+        { "ui-round": round },
+        color && `ui-${color}`,
+        size && size !== "medium" && `ui-${size}`,
+        variant && variant !== "transparent" && `ui-${variant}`,
+        className,
+      ])}
+      {...tagAttrs(Tag as string, disabled, href)}
+      {...(rest as object)}
+    />
+  )
+}

package/components/Button/Button.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { tagAttrs } from "../tag"
+  import type { Props } from "./types.svelte"
+
+  let {
+    as,
+    class: className,
+    color,
+    disabled,
+    href,
+    round,
+    size,
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const Tag = $derived(as || (href ? "a" : "button"))
+</script>
+
+<svelte:element
+  this={Tag}
+  class={[
+    "ui-button",
+    { "ui-round": round },
+    color && `ui-${color}`,
+    size && size !== "medium" && `ui-${size}`,
+    variant && variant !== "transparent" && `ui-${variant}`,
+    className,
+  ]}
+  {...tagAttrs(Tag, disabled, href)}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/components/Button/Button.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
-
-const { as, color, disabled, href, size, variant } = defineProps<Props>()
-defineSlots<Slots>()
-
-const Tag = as || (href ? "a" : "button")
-const isButton = Tag === "button"
-</script>
-
-<template>
-  <component
-    :is="Tag"
-    :class="[
-      'ui-button',
-      { 'ui-disabled': isButton && disabled },
-      size && `ui-${size}`,
-      variant && `ui-${variant}`,
-      color && `ui-${color}`,
-      $props.class,
-    ]"
-    :disabled="isButton ? disabled : undefined"
-    :href="href"
-  >
-    <slot></slot>
-  </component>
-</template>
+<script setup lang="ts">
+import { computed } from "vue"
+import { tagAttrs } from "../tag"
+import type { Props, Slots } from "./types.vue-props"
+
+const { as, color, disabled, href, round, size, variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+const Tag = computed(() => as || (href ? "a" : "button"))
+</script>
+
+<template>
+  <component
+    :is="Tag"
+    :class="[
+      'ui-button',
+      { 'ui-round': round },
+      color && `ui-${color}`,
+      size && size !== 'medium' && `ui-${size}`,
+      variant && variant !== 'transparent' && `ui-${variant}`,
+      $props.class,
+    ]"
+    v-bind="tagAttrs(Tag, disabled, href)"
+  >
+    <slot></slot>
+  </component>
+</template>

package/components/Button/types.astro.ts

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

package/components/Button/types.react.ts

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