opui-css 5.4.3 → 6.0.0-rc.1

package/components/Drawer/types.ts

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

@@ -1,9 +1,9 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Field Description"
-
-const { class: className, ...rest } = Astro.props
----
-
-<p class:list={["ui-field-description", className]} {...rest}><slot /></p>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Field Description"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<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"
-
-const props = defineProps<Props>()
-defineSlots<Slots>()
-</script>
-
-<template>
-  <p :class="['ui-field-description', props.class]" v-bind="$attrs">
-    <slot></slot>
-  </p>
-</template>
+<script setup lang="ts">
+import type { Props, Slots } from "./types.vue-props"
+
+defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <p :class="['ui-description', $props.class]">
+    <slot></slot>
+  </p>
+</template>

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

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

@@ -1,4 +1,4 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type Props = Base.Props & SvelteHTMLElements["p"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["p"]

package/components/FieldDescription/types.ts

@@ -1 +1 @@
-export type Props = {}
+export type Props = {}

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"
-export const title = "Field Group"
-
-const { class: className, direction, name, ...rest } = Astro.props
-const originalName = Astro.locals.currentFieldName
-if (name) {
-  Astro.locals.currentFieldName = name
-}
-
-let html = ""
-try {
-  html = await Astro.slots.render("default")
-} finally {
-  Astro.locals.currentFieldName = originalName
-}
----
-
-<div
-  class:list={["ui-field-group", direction && `ui-${direction}`, className]}
-  {...rest}
-  role="group"
-  set:html={html}
-/>
+---
+import type { Props } from "./types.astro"
+import { fieldGroupContext } from "./context.astro"
+export const title = "Field Group"
+
+const { class: className, name, orientation, ...rest } = Astro.props
+
+const parent = fieldGroupContext.get()
+const html = await fieldGroupContext.provide(
+  { name: name || parent?.name },
+  () => Astro.slots.render("default"),
+)
+---
+
+<div
+  class:list={[
+    "ui-field-group",
+    orientation && orientation !== "auto" && `ui-${orientation}`,
+    className,
+  ]}
+  {...rest}
+>
+  <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,25 +1,23 @@
-<script setup lang="ts">
-import { provide } from "vue"
-import { CurrentFieldNameKey, type Props, type Slots } from "./types.d.vue"
-
-const props = defineProps<Props>()
-defineSlots<Slots>()
-
-if (props.name) {
-  provide(CurrentFieldNameKey, props.name)
-}
-</script>
-
-<template>
-  <div
-    :class="[
-      'ui-field-group',
-      props.direction && `ui-${props.direction}`,
-      props.class,
-    ]"
-    v-bind="$attrs"
-    role="group"
-  >
-    <slot></slot>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, inject, provide, reactive } from "vue"
+import { FieldGroupKey } from "./context.vue"
+import type { Props, Slots } from "./types.vue-props"
+
+const { name, orientation } = defineProps<Props>()
+defineSlots<Slots>()
+
+const parent = inject(FieldGroupKey, undefined)
+provide(FieldGroupKey, reactive({ name: computed(() => name || parent?.name) }))
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-field-group',
+      orientation && orientation !== 'auto' && `ui-${orientation}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

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

@@ -1,4 +1,6 @@
-export type Props = {
-  direction?: "row" | "column"
-  name?: string
-}
+export type Props = {
+  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.astro

@@ -1,11 +1,11 @@
----
-import type { Props } from "./types.astro"
-export const title = "Field Legend"
-
-const { as: Tag = "legend", class: className, ...rest } = Astro.props
-const isLegend = Tag === "legend"
----
-
-<Tag class:list={[{ "ui-legend": !isLegend }, className]} {...rest}
-  ><slot /></Tag
->
+---
+import type { Props } from "./types.astro"
+export const title = "Field Legend"
+
+const { as: Tag = "legend", class: className, ...rest } = Astro.props
+const isLegend = Tag === "legend"
+---
+
+<Tag class:list={[{ "ui-legend": !isLegend }, className]} {...rest}
+  ><slot /></Tag
+>

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

package/components/FieldLegend/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?: "legend" } & HTMLAttributes<"legend">)
-  | (Base.Props & { as: "p" } & HTMLAttributes<"p">)
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  | (Base.Props & { as?: "legend" } & HTMLAttributes<"legend">)
+  | (Base.Props & { as: "p" } & HTMLAttributes<"p">)

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])
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props =
+  | (Base.Props & { as?: "legend" } & SvelteHTMLElements["legend"])
+  | (Base.Props & { as: "p" } & SvelteHTMLElements["p"])

package/components/FieldLegend/types.ts

@@ -1 +1 @@
-export type Props = {}
+export type Props = {}

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"
-
-const { as: Tag = "fieldset", class: className, ...rest } = Astro.props
----
-
-<Tag class:list={["ui-fieldset", className]} {...rest}>
-  <slot />
-</Tag>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Fieldset"
+
+const { as: Tag = "fieldset", class: className, ...rest } = Astro.props
+---
+
+<Tag
+  class:list={["ui-fieldset", className]}
+  role={Tag === "fieldset" ? undefined : "group"}
+  {...rest}
+>
+  <slot />
+</Tag>

package/components/Fieldset/Fieldset.react.tsx

@@ -0,0 +1,15 @@
+import type { ElementType } from "react"
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function Fieldset({ as, className, ...rest }: Props) {
+  const Tag: ElementType = as || "fieldset"
+
+  return (
+    <Tag
+      className={cx(["ui-fieldset", className])}
+      role={Tag === "fieldset" ? undefined : "group"}
+      {...(rest as object)}
+    />
+  )
+}

package/components/Fieldset/Fieldset.svelte

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