opui-css 5.4.2 → 6.0.0-rc.1

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"
+import AnchorContent from "../Anchor/AnchorContent.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-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
+const { color, corner, dot, hideLabel, invisible, label } = defineProps<Props>()
+const slots = defineSlots<Slots>()
 </script>
 
 <template>
   <Anchor
-    :alignment="positionArea"
     :class="[
       'ui-badge',
       {
         'ui-dot': dot,
         'ui-invisible': invisible,
       },
-      alignment && `ui-${alignment}`,
       color && `ui-${color}`,
+      corner && corner !== 'start-end' && `ui-${corner}`,
       $props.class,
     ]"
   >
     <slot></slot>
-    <template #anchored>
-      <span class="ui-badge-indicator" :aria-label="label?.toString()">
-        {{ dot ? "" : label }}
-        <slot v-if="!dot" name="indicator"></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>
-    </template>
+    </AnchorContent>
   </Anchor>
 </template>

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"
+import type { Snippet } from "svelte"
 
-export type Props = Base.Props & SvelteHTMLElements["span"]
+type Snippets = Base.Slots<Snippet>
+
+export type Props = Base.Props & Snippets & SvelteHTMLElements["span"]

package/components/Badge/types.ts

@@ -1,10 +1,10 @@
 export type Props = {
-  [key: string]: any
-  alignment?: "start-start" | "end-start" | "end-end"
   color?: "critical" | "info" | "neutral" | "success" | "warning"
+  corner?: "start-start" | "start-end" | "end-start" | "end-end"
   dot?: boolean
+  hideLabel?: boolean
   invisible?: boolean
-  label?: string | number
+  label?: string
 }
 
 export type Slots<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"
+import type { HTMLAttributes } from "astro/types"
+import { tagAttrs } from "../tag"
 
 export const title = "Button"
 
-const props = Astro.props as Props
 const {
   as,
   class: className,
   color,
-  size,
-  variant,
   disabled,
   href,
+  round,
+  size,
+  variant,
   ...rest
-} = props
+} = Astro.props
 
-const Tag = (as || (href ? "a" : "button")) as any
-const isButton = Tag === "button"
+const Tag = as || (href ? "a" : "button")
 ---
 
 <Tag
   class:list={[
     "ui-button",
-    { "ui-disabled": isButton && disabled },
-    size && `ui-${size}`,
-    variant && `ui-${variant}`,
+    { "ui-round": round },
     color && `ui-${color}`,
+    size && size !== "medium" && `ui-${size}`,
+    variant && variant !== "transparent" && `ui-${variant}`,
     className,
   ]}
-  disabled={isButton ? disabled : undefined}
-  href={href}
-  {...rest as any}
+  {...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,11 +1,12 @@
 <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 { as, color, disabled, href, size, variant } = defineProps<Props>()
+const { as, color, disabled, href, round, size, variant } = defineProps<Props>()
 defineSlots<Slots>()
 
-const Tag = as || (href ? "a" : "button")
-const isButton = Tag === "button"
+const Tag = computed(() => as || (href ? "a" : "button"))
 </script>
 
 <template>
@@ -13,14 +14,13 @@ const isButton = Tag === "button"
     :is="Tag"
     :class="[
       'ui-button',
-      { 'ui-disabled': isButton && disabled },
-      size && `ui-${size}`,
-      variant && `ui-${variant}`,
+      { 'ui-round': round },
       color && `ui-${color}`,
+      size && size !== 'medium' && `ui-${size}`,
+      variant && variant !== 'transparent' && `ui-${variant}`,
       $props.class,
     ]"
-    :disabled="isButton ? disabled : undefined"
-    :href="href"
+    v-bind="tagAttrs(Tag, disabled, href)"
   >
     <slot></slot>
   </component>

package/components/Button/types.astro.ts

@@ -2,5 +2,5 @@ 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">)
+  | (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">)

package/components/Button/types.svelte.ts

@@ -1,6 +1,15 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
 
 export type Props =
-  | (Base.Props & { as?: "button" } & SvelteHTMLElements["button"])
-  | (Base.Props & { as?: "a" } & SvelteHTMLElements["a"])
+  | (Base.Props &
+      Base.Slots<Snippet> & {
+        as?: "button"
+        href?: never
+      } & SvelteHTMLElements["button"])
+  | (Base.Props &
+      Base.Slots<Snippet> & {
+        as?: "a"
+        href: string
+      } & SvelteHTMLElements["a"])

package/components/Button/types.ts

@@ -1,16 +1,32 @@
 export type Props = {
   color?: "critical" | "primary"
-  size?: "x-small" | "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
+  round?: boolean
+  size?: "x-small" | "small" | "medium" | "large"
+  variant?: "filled" | "outlined" | "tonal" | "transparent"
 } & (
   | {
       as?: "a"
+      disabled?: boolean
       href: string
-      disabled?: never
     }
   | {
       as?: "button"
-      href?: never
       disabled?: boolean
+      href?: never
     }
 )
+
+export type Slots<S> =
+  | {
+      "aria-label": string
+      children?: S
+    }
+  | {
+      "aria-labelledby": string
+      children?: S
+    }
+  | {
+      "aria-label"?: string
+      "aria-labelledby"?: string
+      children: S
+    }

package/components/Button/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/ButtonGroup/ButtonGroup.astro

@@ -7,6 +7,7 @@ const {
   class: className,
   color,
   orientation,
+  overflow,
   size,
   variant,
   ...rest
@@ -16,10 +17,13 @@ const {
 <div
   class:list={[
     "ui-button-group",
+    {
+      "ui-vertical": orientation === "vertical",
+    },
     color && `ui-${color}`,
-    size && `ui-${size}`,
-    variant && `ui-${variant}`,
-    orientation && `ui-${orientation}`,
+    overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+    size && size !== "medium" && `ui-${size}`,
+    variant && variant !== "transparent" && `ui-${variant}`,
     className,
   ]}
   role="group"

package/components/ButtonGroup/ButtonGroup.react.tsx

@@ -0,0 +1,30 @@
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function ButtonGroup({
+  className,
+  color,
+  orientation,
+  overflow,
+  size,
+  variant,
+  ...rest
+}: Props) {
+  return (
+    <div
+      className={cx([
+        "ui-button-group",
+        {
+          "ui-vertical": orientation === "vertical",
+        },
+        color && `ui-${color}`,
+        overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+        size && size !== "medium" && `ui-${size}`,
+        variant && variant !== "transparent" && `ui-${variant}`,
+        className,
+      ])}
+      role="group"
+      {...rest}
+    />
+  )
+}

package/components/ButtonGroup/ButtonGroup.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    color,
+    orientation,
+    overflow,
+    size,
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div
+  class={[
+    "ui-button-group",
+    {
+      "ui-vertical": orientation === "vertical",
+    },
+    color && `ui-${color}`,
+    overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+    size && size !== "medium" && `ui-${size}`,
+    variant && variant !== "transparent" && `ui-${variant}`,
+    className,
+  ]}
+  role="group"
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/components/ButtonGroup/ButtonGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const props = defineProps<Props>()
+const { color, orientation, overflow, size, variant } = defineProps<Props>()
 defineSlots<Slots>()
 </script>
 
@@ -9,11 +9,14 @@ defineSlots<Slots>()
   <div
     :class="[
       'ui-button-group',
-      props.color && `ui-${props.color}`,
-      props.size && `ui-${props.size}`,
-      props.variant && `ui-${props.variant}`,
-      props.orientation && `ui-${props.orientation}`,
-      props.class,
+      {
+        'ui-vertical': orientation === 'vertical',
+      },
+      color && `ui-${color}`,
+      overflow && overflow !== 'wrap' && `ui-overflow-${overflow}`,
+      size && size !== 'medium' && `ui-${size}`,
+      variant && variant !== 'transparent' && `ui-${variant}`,
+      $props.class,
     ]"
     role="group"
   >

package/components/ButtonGroup/types.react.ts

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

package/components/ButtonGroup/types.ts

@@ -1,7 +1,7 @@
 export type Props = {
-  [key: string]: any
   color?: "critical" | "primary"
-  orientation?: "vertical"
-  size?: "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
+  orientation?: "horizontal" | "vertical"
+  overflow?: "scroll" | "shrink" | "wrap"
+  size?: "x-small" | "small" | "medium" | "large"
+  variant?: "filled" | "outlined" | "tonal" | "transparent"
 }

package/components/ButtonGroup/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/Callout/Callout.astro

@@ -1,76 +1,24 @@
 ---
 import type { Props } from "./types.astro"
+import { calloutContext } from "./context.astro"
 
 export const title = "Callout"
 
 const { class: className, severity, variant, ...rest } = Astro.props
+
+const html = await calloutContext.provide({ severity }, () =>
+  Astro.slots.render("default"),
+)
 ---
 
 <article
-  role="note"
   class:list={[
     "ui-callout",
-    variant && `ui-${variant}`,
     severity && `ui-${severity}`,
+    variant && variant !== "tonal" && `ui-${variant}`,
     className,
   ]}
   {...rest}
 >
-  <slot name="icon">
-    {
-      severity === "info" && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-        >
-          <path
-            fill="currentColor"
-            d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
-          />
-        </svg>
-      )
-    }
-    {
-      severity === "warning" && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-        >
-          <path
-            fill="currentColor"
-            d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
-          />
-        </svg>
-      )
-    }
-    {
-      severity === "critical" && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 48 48"
-        >
-          <path
-            fill="currentColor"
-            d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
-          />
-        </svg>
-      )
-    }
-  </slot>
-  <div class="ui-content">
-    {
-      Astro.slots.has("title") && (
-        <h3 class="ui-title">
-          <slot name="title" />
-        </h3>
-      )
-    }
-    <slot />
-  </div>
+  <Fragment set:html={html} />
 </article>

package/components/Callout/Callout.react.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { cx } from "../cx"
+import { CalloutContext } from "./context.react"
+import type { Props } from "./types.react"
+
+export default function Callout({
+  className,
+  severity,
+  variant,
+  ...rest
+}: Props) {
+  return (
+    <CalloutContext value={{ severity }}>
+      <article
+        className={cx([
+          "ui-callout",
+          severity && `ui-${severity}`,
+          variant && variant !== "tonal" && `ui-${variant}`,
+          className,
+        ])}
+        {...rest}
+      />
+    </CalloutContext>
+  )
+}

package/components/Callout/Callout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { setCalloutContext } from "./context.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    severity,
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  setCalloutContext({
+    get severity() {
+      return severity
+    },
+  })
+</script>
+
+<article
+  class={[
+    "ui-callout",
+    severity && `ui-${severity}`,
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</article>