opui-css 5.4.2 → 6.0.0-rc.1

package/components/Drawer/DrawerHeader.vue

@@ -1,36 +1,35 @@
 <script setup lang="ts">
-import IconButton from "../IconButton/IconButton.vue"
-import type { DrawerHeaderProps, DrawerHeaderSlots } from "./types.d.vue"
+import { computed, inject } from "vue"
+import Button from "../Button/Button.vue"
+import { DrawerKey } from "./context.vue"
+import { closePath } from "./icons"
+import type { DrawerHeaderProps, Slots } from "./types.vue-props"
 
-const { heading } = defineProps<DrawerHeaderProps>()
-defineSlots<DrawerHeaderSlots>()
+const { closeLabel = "Close", commandfor } = defineProps<DrawerHeaderProps>()
+defineSlots<Slots>()
 
-defineOptions({
-  inheritAttrs: false,
-})
+const drawer = inject(DrawerKey, undefined)
 
-const closeDrawer = (event: MouseEvent) => {
-  const target = event.currentTarget as HTMLElement | null
-  target?.closest("dialog")?.close()
-}
+const closeAttrs = computed(() =>
+  commandfor || drawer
+    ? { command: "close", commandfor: commandfor ?? drawer?.id }
+    : { onclick: "this.closest('dialog')?.close()" },
+)
 </script>
 
 <template>
-  <div :class="['ui-header', $props.class]" v-bind="$attrs">
-    <span v-if="heading">{{ heading }}</span>
+  <div :class="['ui-header', $props.class]">
     <slot></slot>
-    <IconButton title="Close" @click="closeDrawer">
+    <Button :aria-label="closeLabel" round size="small" v-bind="closeAttrs">
       <svg
+        aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"
         width="32"
         height="32"
         viewBox="0 0 32 32"
       >
-        <path
-          fill="currentColor"
-          d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z"
-        ></path>
+        <path fill="currentColor" :d="closePath"></path>
       </svg>
-    </IconButton>
+    </Button>
   </div>
 </template>

package/components/Drawer/DrawerTitle.astro

@@ -0,0 +1,14 @@
+---
+import type { DrawerTitleProps as Props } from "./types.astro"
+import { drawerContext } from "./context.astro"
+import { warnReplacedId } from "../dev"
+
+const { class: className, id, ...rest } = Astro.props
+
+const drawer = drawerContext.get()
+warnReplacedId("DrawerTitle", "Drawer", id, drawer?.titleId)
+---
+
+<h2 class:list={[className]} id={drawer?.titleId ?? id} {...rest}>
+  <slot />
+</h2>

package/components/Drawer/DrawerTitle.react.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { cx } from "../cx"
+import { warnReplacedId } from "../dev"
+import { useDrawerContext } from "./context.react"
+import type { DrawerTitleProps as Props } from "./types.react"
+
+export default function DrawerTitle({ className, id, ...rest }: Props) {
+  const drawer = useDrawerContext()
+  warnReplacedId("DrawerTitle", "Drawer", id, drawer?.titleId)
+
+  return <h2 className={cx([className])} id={drawer?.titleId ?? id} {...rest} />
+}

package/components/Drawer/DrawerTitle.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { warnReplacedId } from "../dev"
+  import { getDrawerContext } from "./context.svelte"
+  import type { DrawerTitleProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+    id,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const drawer = getDrawerContext()
+
+  untrack(() => warnReplacedId("DrawerTitle", "Drawer", id, drawer?.titleId))
+</script>
+
+<h2 class={[className]} id={drawer?.titleId ?? id} {...rest}>
+  {@render children?.()}
+</h2>

package/components/Drawer/DrawerTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import { warnReplacedId } from "../dev"
+import { DrawerKey } from "./context.vue"
+import type { DrawerTitleProps as Props, Slots } from "./types.vue-props"
+
+const { id } = defineProps<Props>()
+defineSlots<Slots>()
+
+const drawer = inject(DrawerKey, undefined)
+warnReplacedId("DrawerTitle", "Drawer", id, drawer?.titleId)
+</script>
+
+<template>
+  <h2 :class="[$props.class]" :id="drawer?.titleId ?? id">
+    <slot></slot>
+  </h2>
+</template>

package/components/Drawer/context.astro.ts

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

package/components/Drawer/context.react.ts

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

package/components/Drawer/context.svelte.ts

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

package/components/Drawer/context.vue.ts

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

package/components/Drawer/icons.ts

@@ -0,0 +1,2 @@
+export const closePath =
+  "M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z"

package/components/Drawer/types.astro.ts

@@ -3,6 +3,10 @@ import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props & HTMLAttributes<"dialog">
 
-export type DrawerHeaderProps = Base.DrawerHeaderProps & HTMLAttributes<"div">
+export type DrawerContentProps = Base.DrawerContentProps & HTMLAttributes<"div">
 
 export type DrawerFooterProps = Base.DrawerFooterProps & HTMLAttributes<"div">
+
+export type DrawerHeaderProps = Base.DrawerHeaderProps & HTMLAttributes<"div">
+
+export type DrawerTitleProps = Base.DrawerTitleProps & HTMLAttributes<"h2">

package/components/Drawer/types.react.ts

@@ -0,0 +1,13 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props &
+  Omit<ComponentProps<"dialog">, "closedby" | "id">
+
+export type DrawerContentProps = Base.DrawerContentProps & ComponentProps<"div">
+
+export type DrawerFooterProps = Base.DrawerFooterProps & ComponentProps<"div">
+
+export type DrawerHeaderProps = Base.DrawerHeaderProps & ComponentProps<"div">
+
+export type DrawerTitleProps = Base.DrawerTitleProps & ComponentProps<"h2">

package/components/Drawer/types.svelte.ts

@@ -1,15 +1,16 @@
 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 &
-  Omit<SvelteHTMLElements["dialog"], "id"> &
-  Snippets
+  Omit<SvelteHTMLElements["dialog"], "closedby" | "id">
+
+export type DrawerContentProps = Base.DrawerContentProps &
+  SvelteHTMLElements["div"]
 
 export type DrawerFooterProps = Base.DrawerFooterProps &
   SvelteHTMLElements["div"]
 
 export type DrawerHeaderProps = Base.DrawerHeaderProps &
   SvelteHTMLElements["div"]
+
+export type DrawerTitleProps = Base.DrawerTitleProps & SvelteHTMLElements["h2"]

package/components/Drawer/types.ts

@@ -1,20 +1,25 @@
 export type Props = {
-  backdrop?: "transparent" | "blurred"
+  backdrop?: "blurred" | "transparent"
   closedby?: "any" | "closerequest" | "none"
-  id?: string
+  id: string
   scrollLock?: boolean
-  side?: "inline-start" | "inline-end" | "block-start" | "block-end"
+  side?: "block-end" | "block-start" | "inline-end" | "inline-start"
+}
+
+export type DrawerContentProps = {}
+
+export type DrawerFooterProps = {
+  align?: "start" | "end"
 }
 
 export type DrawerHeaderProps = {
-  heading?: string
+  closeLabel?: string
+  commandfor?: string
 }
 
-export type DrawerFooterProps = {}
+export type DrawerTitleProps = {}
 
-export type Slots<S> = {
-  children?: S
-  content?: S
-  footer?: S
-  header?: S
+export type Context = {
+  id: string
+  titleId?: string
 }

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

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "vue"
+import type { Class, DefaultSlots } from "../vue"
+import type {
+  DrawerContentProps as BaseDrawerContentProps,
+  DrawerFooterProps as BaseDrawerFooterProps,
+  DrawerHeaderProps as BaseDrawerHeaderProps,
+  DrawerTitleProps as BaseDrawerTitleProps,
+  Props as BaseProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type DrawerContentProps = BaseDrawerContentProps & Class
+
+export type DrawerFooterProps = BaseDrawerFooterProps & Class
+
+export type DrawerHeaderProps = BaseDrawerHeaderProps & Class
+
+export type DrawerTitleProps = BaseDrawerTitleProps &
+  Class & {
+    id?: HTMLAttributes["id"]
+  }
+
+export type Slots = DefaultSlots

package/components/FieldDescription/FieldDescription.astro

@@ -6,4 +6,4 @@ export const title = "Field Description"
 const { class: className, ...rest } = Astro.props
 ---
 
-<p class:list={["ui-field-description", className]} {...rest}><slot /></p>
+<p class:list={["ui-description", className]} {...rest}><slot /></p>

package/components/FieldDescription/FieldDescription.react.tsx

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

package/components/FieldDescription/FieldDescription.svelte

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

package/components/FieldDescription/FieldDescription.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const props = defineProps<Props>()
+defineProps<Props>()
 defineSlots<Slots>()
 </script>
 
 <template>
-  <p :class="['ui-field-description', props.class]" v-bind="$attrs">
+  <p :class="['ui-description', $props.class]">
     <slot></slot>
   </p>
 </template>

package/components/FieldDescription/types.react.ts

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

package/components/FieldDescription/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/FieldGroup/FieldGroup.astro

@@ -1,24 +1,24 @@
 ---
 import type { Props } from "./types.astro"
+import { fieldGroupContext } from "./context.astro"
 export const title = "Field Group"
 
-const { class: className, direction, name, ...rest } = Astro.props
-const originalName = Astro.locals.currentFieldName
-if (name) {
-  Astro.locals.currentFieldName = name
-}
+const { class: className, name, orientation, ...rest } = Astro.props
 
-let html = ""
-try {
-  html = await Astro.slots.render("default")
-} finally {
-  Astro.locals.currentFieldName = originalName
-}
+const parent = fieldGroupContext.get()
+const html = await fieldGroupContext.provide(
+  { name: name || parent?.name },
+  () => Astro.slots.render("default"),
+)
 ---
 
 <div
-  class:list={["ui-field-group", direction && `ui-${direction}`, className]}
+  class:list={[
+    "ui-field-group",
+    orientation && orientation !== "auto" && `ui-${orientation}`,
+    className,
+  ]}
   {...rest}
-  role="group"
-  set:html={html}
-/>
+>
+  <Fragment set:html={html} />
+</div>

package/components/FieldGroup/FieldGroup.react.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { cx } from "../cx"
+import { FieldGroupContext, useFieldGroupContext } from "./context.react"
+import type { Props } from "./types.react"
+
+export default function FieldGroup({
+  className,
+  name,
+  orientation,
+  ...rest
+}: Props) {
+  const parent = useFieldGroupContext()
+
+  return (
+    <FieldGroupContext value={{ name: name || parent?.name }}>
+      <div
+        className={cx([
+          "ui-field-group",
+          orientation && orientation !== "auto" && `ui-${orientation}`,
+          className,
+        ])}
+        {...rest}
+      />
+    </FieldGroupContext>
+  )
+}

package/components/FieldGroup/FieldGroup.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getFieldGroupContext, setFieldGroupContext } from "./context.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    name,
+    orientation,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const parent = getFieldGroupContext()
+  setFieldGroupContext({
+    get name() {
+      return name || parent?.name
+    },
+  })
+</script>
+
+<div
+  class={[
+    "ui-field-group",
+    orientation && orientation !== "auto" && `ui-${orientation}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/components/FieldGroup/FieldGroup.vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { provide } from "vue"
-import { CurrentFieldNameKey, type Props, type Slots } from "./types.d.vue"
+import { computed, inject, provide, reactive } from "vue"
+import { FieldGroupKey } from "./context.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const props = defineProps<Props>()
+const { name, orientation } = defineProps<Props>()
 defineSlots<Slots>()
 
-if (props.name) {
-  provide(CurrentFieldNameKey, props.name)
-}
+const parent = inject(FieldGroupKey, undefined)
+provide(FieldGroupKey, reactive({ name: computed(() => name || parent?.name) }))
 </script>
 
 <template>
   <div
     :class="[
       'ui-field-group',
-      props.direction && `ui-${props.direction}`,
-      props.class,
+      orientation && orientation !== 'auto' && `ui-${orientation}`,
+      $props.class,
     ]"
-    v-bind="$attrs"
-    role="group"
   >
     <slot></slot>
   </div>

package/components/FieldGroup/context.astro.ts

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

package/components/FieldGroup/context.react.ts

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

package/components/FieldGroup/context.svelte.ts

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

package/components/FieldGroup/context.vue.ts

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

package/components/FieldGroup/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/FieldGroup/types.ts

@@ -1,4 +1,6 @@
 export type Props = {
-  direction?: "row" | "column"
   name?: string
+  orientation?: "auto" | "horizontal" | "vertical"
 }
+
+export type Context = Pick<Props, "name">

package/components/FieldGroup/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/FieldLegend/FieldLegend.react.tsx

@@ -0,0 +1,14 @@
+import type { ElementType } from "react"
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function FieldLegend({ as, className, ...rest }: Props) {
+  const Tag: ElementType = as || "legend"
+
+  return (
+    <Tag
+      className={cx([{ "ui-legend": Tag !== "legend" }, className])}
+      {...(rest as object)}
+    />
+  )
+}

package/components/FieldLegend/FieldLegend.svelte

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

package/components/FieldLegend/FieldLegend.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const props = withDefaults(defineProps<Props>(), {
-  as: "legend",
-})
+const { as = "legend" } = defineProps<Props>()
 defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
 </script>
 
 <template>
   <component
-    :is="props.as"
-    :class="[{ 'ui-legend': props.as !== 'legend' }, props.class]"
+    :is="as"
+    :class="[{ 'ui-legend': as !== 'legend' }, $props.class]"
     v-bind="$attrs"
   >
     <slot></slot>

package/components/FieldLegend/types.react.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props =
+  | (Base.Props & { as?: "legend" } & ComponentProps<"legend">)
+  | (Base.Props & { as: "p" } & ComponentProps<"p">)

package/components/FieldLegend/types.svelte.ts

@@ -1,6 +1,6 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 
-// prettier-ignore
-export type Props<T extends keyof SvelteHTMLElements= "legend"> =
-  | (Base.Props & { as?: T } & SvelteHTMLElements[T])
+export type Props =
+  | (Base.Props & { as?: "legend" } & SvelteHTMLElements["legend"])
+  | (Base.Props & { as: "p" } & SvelteHTMLElements["p"])

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

@@ -0,0 +1,9 @@
+import type { Class, DefaultSlots } from "../vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps &
+  Class & {
+    as?: "legend" | "p"
+  }
+
+export type Slots = DefaultSlots

package/components/{FieldSet/FieldSet.astro → Fieldset/Fieldset.astro}

@@ -1,11 +1,15 @@
 ---
 import type { Props } from "./types.astro"
 
-export const title = "Field Set"
+export const title = "Fieldset"
 
 const { as: Tag = "fieldset", class: className, ...rest } = Astro.props
 ---
 
-<Tag class:list={["ui-fieldset", className]} {...rest}>
+<Tag
+  class:list={["ui-fieldset", className]}
+  role={Tag === "fieldset" ? undefined : "group"}
+  {...rest}
+>
   <slot />
 </Tag>