opui-css 5.4.3 → 6.0.0-rc.1

package/components/Button/types.svelte.ts

@@ -1,6 +1,15 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type Props =
-  | (Base.Props & { as?: "button" } & SvelteHTMLElements["button"])
-  | (Base.Props & { as?: "a" } & SvelteHTMLElements["a"])
+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> & {
+        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"
-} & (
-  | {
-      as?: "a"
-      href: string
-      disabled?: never
-    }
-  | {
-      as?: "button"
-      href?: never
-      disabled?: boolean
-    }
-)
+export type Props = {
+  color?: "critical" | "primary"
+  round?: boolean
+  size?: "x-small" | "small" | "medium" | "large"
+  variant?: "filled" | "outlined" | "tonal" | "transparent"
+} & (
+  | {
+      as?: "a"
+      disabled?: boolean
+      href: string
+    }
+  | {
+      as?: "button"
+      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

@@ -1,29 +1,33 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Button Group"
-
-const {
-  class: className,
-  color,
-  orientation,
-  size,
-  variant,
-  ...rest
-} = Astro.props
----
-
-<div
-  class:list={[
-    "ui-button-group",
-    color && `ui-${color}`,
-    size && `ui-${size}`,
-    variant && `ui-${variant}`,
-    orientation && `ui-${orientation}`,
-    className,
-  ]}
-  role="group"
-  {...rest}
->
-  <slot />
-</div>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Button Group"
+
+const {
+  class: className,
+  color,
+  orientation,
+  overflow,
+  size,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<div
+  class:list={[
+    "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}
+>
+  <slot />
+</div>

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,22 +1,25 @@
-<script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
-
-const props = defineProps<Props>()
-defineSlots<Slots>()
-</script>
-
-<template>
-  <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,
-    ]"
-    role="group"
-  >
-    <slot></slot>
-  </div>
-</template>
+<script setup lang="ts">
+import type { Props, Slots } from "./types.vue-props"
+
+const { color, orientation, overflow, size, variant } = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <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}`,
+      $props.class,
+    ]"
+    role="group"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/ButtonGroup/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<"div">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"div">

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.svelte.ts

@@ -1,4 +1,4 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type Props = Base.Props & SvelteHTMLElements["div"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["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"
-}
+export type Props = {
+  color?: "critical" | "primary"
+  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"
-
-export const title = "Callout"
-
-const { class: className, severity, variant, ...rest } = Astro.props
----
-
-<article
-  role="note"
-  class:list={[
-    "ui-callout",
-    variant && `ui-${variant}`,
-    severity && `ui-${severity}`,
-    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>
-</article>
+---
+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
+  class:list={[
+    "ui-callout",
+    severity && `ui-${severity}`,
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  <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>

package/components/Callout/Callout.vue

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