opui-css 5.4.2 → 6.0.0-rc.1

package/components/Callout/Callout.vue

@@ -1,63 +1,23 @@
 <script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
+import { computed, provide, reactive } from "vue"
+import { CalloutKey } from "./context.vue"
+import type { Props, Slots } from "./types.vue-props"
 
 const { severity, variant } = defineProps<Props>()
-const slots = defineSlots<Slots>()
+defineSlots<Slots>()
+
+provide(CalloutKey, reactive({ severity: computed(() => severity) }))
 </script>
 
 <template>
   <article
-    role="note"
     :class="[
       'ui-callout',
-      variant && `ui-${variant}`,
       severity && `ui-${severity}`,
+      variant && variant !== 'tonal' && `ui-${variant}`,
       $props.class,
     ]"
   >
-    <slot name="icon">
-      <svg
-        v-if="severity === 'info'"
-        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>
-      <svg
-        v-if="severity === 'warning'"
-        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>
-      <svg
-        v-if="severity === 'critical'"
-        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">
-      <h3 v-if="slots.title" class="ui-title">
-        <slot name="title"></slot>
-      </h3>
-      <slot></slot>
-    </div>
+    <slot></slot>
   </article>
 </template>

package/components/Callout/CalloutContent.astro

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

package/components/Callout/CalloutContent.react.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../cx"
+import type { CalloutContentProps as Props } from "./types.react"
+
+export default function CalloutContent({ className, ...rest }: Props) {
+  return <div className={cx(["ui-content", className])} {...rest} />
+}

package/components/Callout/CalloutContent.svelte

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

package/components/Callout/CalloutContent.vue

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

package/components/Callout/CalloutIcon.astro

@@ -0,0 +1,25 @@
+---
+import type { CalloutIconProps as Props } from "./types.astro"
+import { calloutContext } from "./context.astro"
+import { iconFor } from "./icons"
+
+const { class: className, ...rest } = Astro.props
+
+const icon = iconFor(calloutContext.get()?.severity)
+---
+
+{
+  icon && (
+    <svg
+      aria-hidden="true"
+      class:list={[className]}
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox={icon.viewBox}
+      {...rest}
+    >
+      <path fill="currentColor" d={icon.d} />
+    </svg>
+  )
+}

package/components/Callout/CalloutIcon.react.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { cx } from "../cx"
+import { useCalloutContext } from "./context.react"
+import { iconFor } from "./icons"
+import type { CalloutIconProps as Props } from "./types.react"
+
+export default function CalloutIcon({ className, ...rest }: Props) {
+  const icon = iconFor(useCalloutContext()?.severity)
+
+  if (!icon) return null
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cx([className])}
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox={icon.viewBox}
+      {...rest}
+    >
+      <path fill="currentColor" d={icon.d} />
+    </svg>
+  )
+}

package/components/Callout/CalloutIcon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { getCalloutContext } from "./context.svelte"
+  import { iconFor } from "./icons"
+  import type { CalloutIconProps as Props } from "./types.svelte"
+
+  let { class: className, ...rest }: Props = $props()
+
+  const callout = getCalloutContext()
+  const icon = $derived(iconFor(callout?.severity))
+</script>
+
+{#if icon}
+  <svg
+    aria-hidden="true"
+    class={[className]}
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox={icon.viewBox}
+    {...rest}
+  >
+    <path fill="currentColor" d={icon.d} />
+  </svg>
+{/if}

package/components/Callout/CalloutIcon.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, inject } from "vue"
+import { CalloutKey } from "./context.vue"
+import { iconFor } from "./icons"
+import type { CalloutIconProps as Props } from "./types.vue-props"
+
+defineProps<Props>()
+
+const callout = inject(CalloutKey, undefined)
+const icon = computed(() => iconFor(callout?.severity))
+</script>
+
+<template>
+  <svg
+    v-if="icon"
+    aria-hidden="true"
+    :class="[$props.class]"
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    :viewBox="icon.viewBox"
+  >
+    <path fill="currentColor" :d="icon.d" />
+  </svg>
+</template>

package/components/Callout/context.astro.ts

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

package/components/Callout/context.react.ts

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

package/components/Callout/context.svelte.ts

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

package/components/Callout/context.vue.ts

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

package/components/Callout/icons.ts

@@ -0,0 +1,23 @@
+import type { Props } from "./types"
+
+const icons = {
+  critical: {
+    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",
+    viewBox: "0 0 48 48",
+  },
+  info: {
+    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",
+    viewBox: "0 0 32 32",
+  },
+  success: {
+    d: "M22.707 12.707a1 1 0 0 0-1.414-1.414L14.5 18.086l-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0zM16 2C8.268 2 2 8.268 2 16s6.268 14 14 14s14-6.268 14-14S23.732 2 16 2M4 16C4 9.373 9.373 4 16 4s12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16",
+    viewBox: "0 0 32 32",
+  },
+  warning: {
+    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",
+    viewBox: "0 0 32 32",
+  },
+}
+
+export const iconFor = (severity: Props["severity"]) =>
+  severity && severity !== "neutral" ? icons[severity] : undefined

package/components/Callout/types.astro.ts

@@ -2,3 +2,8 @@ import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props & HTMLAttributes<"article">
+
+export type CalloutContentProps = Base.CalloutContentProps &
+  HTMLAttributes<"div">
+
+export type CalloutIconProps = Base.CalloutIconProps & HTMLAttributes<"svg">

package/components/Callout/types.react.ts

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

package/components/Callout/types.svelte.ts

@@ -1,7 +1,9 @@
 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["article"]
 
-export type Props = Base.Props & Snippets & SvelteHTMLElements["article"]
+export type CalloutContentProps = Base.CalloutContentProps &
+  SvelteHTMLElements["div"]
+
+export type CalloutIconProps = Base.CalloutIconProps & SvelteHTMLElements["svg"]

package/components/Callout/types.ts

@@ -1,10 +1,10 @@
 export type Props = {
-  [key: string]: any
   severity?: "critical" | "info" | "neutral" | "success" | "warning"
   variant?: "tonal" | "outlined"
 }
 
-export type Slots<S> = {
-  icon?: S
-  title?: S
-}
+export type CalloutContentProps = {}
+
+export type CalloutIconProps = {}
+
+export type Context = Pick<Props, "severity">

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

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

package/components/Card/Card.astro

@@ -3,32 +3,16 @@ import type { Props } from "./types.astro"
 
 export const title = "Card"
 
-const { variant, actionsAlign, class: className, ...rest } = Astro.props
+const { class: className, variant, ...rest } = Astro.props
 ---
 
-<div class:list={["ui-card", variant && `ui-${variant}`, className]} {...rest}>
-  {
-    Astro.slots.has("header") && (
-      <hgroup>
-        <slot name="header" />
-      </hgroup>
-    )
-  }
-  {
-    Astro.slots.has("content") && (
-      <div class="ui-content">
-        <slot name="content" />
-      </div>
-    )
-  }
+<div
+  class:list={[
+    "ui-card",
+    variant && variant !== "plain" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
   <slot />
-  {
-    Astro.slots.has("actions") && (
-      <div
-        class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}
-      >
-        <slot name="actions" />
-      </div>
-    )
-  }
 </div>

package/components/Card/Card.react.tsx

@@ -0,0 +1,15 @@
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function Card({ className, variant, ...rest }: Props) {
+  return (
+    <div
+      className={cx([
+        "ui-card",
+        variant && variant !== "plain" && `ui-${variant}`,
+        className,
+      ])}
+      {...rest}
+    />
+  )
+}

package/components/Card/Card.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div
+  class={[
+    "ui-card",
+    variant && variant !== "plain" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/components/Card/Card.vue

@@ -1,28 +1,18 @@
 <script setup lang="ts">
-import { useSlots } from "vue"
-import type { Props, Slots } from "./types.d.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const { actionsAlign, variant } = defineProps<Props>()
-const slots = defineSlots<Slots>()
+const { variant } = defineProps<Props>()
+defineSlots<Slots>()
 </script>
 
 <template>
-  <div :class="['ui-card', variant && `ui-${variant}`, $props.class]">
-    <hgroup v-if="slots.header">
-      <slot name="header"></slot>
-    </hgroup>
-
-    <div v-if="slots.content" class="ui-content">
-      <slot name="content"></slot>
-    </div>
-
+  <div
+    :class="[
+      'ui-card',
+      variant && variant !== 'plain' && `ui-${variant}`,
+      $props.class,
+    ]"
+  >
     <slot></slot>
-
-    <div
-      v-if="slots.actions"
-      :class="['ui-actions', actionsAlign && `ui-align-${actionsAlign}`]"
-    >
-      <slot name="actions"></slot>
-    </div>
   </div>
 </template>

package/components/Card/CardActions.astro

@@ -0,0 +1,16 @@
+---
+import type { CardActionsProps as Props } from "./types.astro"
+
+const { align, class: className, ...rest } = Astro.props
+---
+
+<div
+  class:list={[
+    "ui-actions",
+    align && align !== "end" && `ui-align-${align}`,
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</div>

package/components/Card/CardActions.react.tsx

@@ -0,0 +1,15 @@
+import { cx } from "../cx"
+import type { CardActionsProps as Props } from "./types.react"
+
+export default function CardActions({ align, className, ...rest }: Props) {
+  return (
+    <div
+      className={cx([
+        "ui-actions",
+        align && align !== "end" && `ui-align-${align}`,
+        className,
+      ])}
+      {...rest}
+    />
+  )
+}

package/components/Card/CardActions.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { CardActionsProps as Props } from "./types.svelte"
+
+  let {
+    align,
+    class: className,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div
+  class={[
+    "ui-actions",
+    align && align !== "end" && `ui-align-${align}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/components/Card/CardActions.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { CardActionsProps as Props, Slots } from "./types.vue-props"
+
+const { align } = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-actions',
+      align && align !== 'end' && `ui-align-${align}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/Card/CardContent.astro

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

package/components/Card/CardContent.react.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../cx"
+import type { CardContentProps as Props } from "./types.react"
+
+export default function CardContent({ className, ...rest }: Props) {
+  return <div className={cx(["ui-content", className])} {...rest} />
+}

package/components/Card/CardContent.svelte

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

package/components/Card/CardContent.vue

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

package/components/Card/CardHeader.astro

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

package/components/Card/CardHeader.react.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../cx"
+import type { CardHeaderProps as Props } from "./types.react"
+
+export default function CardHeader({ className, ...rest }: Props) {
+  return <hgroup className={cx(["ui-header", className])} {...rest} />
+}

package/components/Card/CardHeader.svelte

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

package/components/Card/CardHeader.vue

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

package/components/Card/types.astro.ts

@@ -2,3 +2,9 @@ import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props & HTMLAttributes<"div">
+
+export type CardActionsProps = Base.CardActionsProps & HTMLAttributes<"div">
+
+export type CardContentProps = Base.CardContentProps & HTMLAttributes<"div">
+
+export type CardHeaderProps = Base.CardHeaderProps & HTMLAttributes<"hgroup">