opui-css 5.4.3 → 6.0.0-rc.1

package/components/Fieldset/Fieldset.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.vue-props"
+
+const { as = "fieldset" } = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <component
+    :is="as"
+    :class="['ui-fieldset', $props.class]"
+    :role="as === 'fieldset' ? undefined : 'group'"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </component>
+</template>

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

package/components/Fieldset/types.react.ts

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

package/components/Fieldset/types.svelte.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props =
+  | (Base.Props & { as?: "fieldset" } & SvelteHTMLElements["fieldset"])
+  | (Base.Props & { as: "div" } & SvelteHTMLElements["div"])

package/components/Fieldset/types.ts

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

package/components/Fieldset/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?: "div" | "fieldset"
+  }
+
+export type Slots = DefaultSlots

package/components/Form/Form.astro

@@ -1,10 +1,10 @@
----
-import type { Props } from "./types.astro"
-export const title = "Form"
-
-const { as: Tag = "form", class: className, ...rest } = Astro.props
----
-
-<Tag class:list={["ui-form", className]} {...rest}>
-  <slot />
-</Tag>
+---
+import type { Props } from "./types.astro"
+export const title = "Form"
+
+const { as: Tag = "form", class: className, ...rest } = Astro.props
+---
+
+<Tag class:list={["ui-form", className]} {...rest}>
+  <slot />
+</Tag>

package/components/Form/Form.react.tsx

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

package/components/Form/Form.svelte

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

package/components/Form/Form.vue

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

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

package/components/Form/types.react.ts

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

package/components/Form/types.svelte.ts

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

package/components/Form/types.ts

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

package/components/Form/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?: "div" | "form"
+  }
+
+export type Slots = DefaultSlots

package/components/List/List.astro

@@ -1,29 +1,29 @@
----
-import type { Props } from "./types.astro"
-export const title = "List"
-
-const {
-  bordered,
-  class: className,
-  dense,
-  gutterless,
-  variant,
-  ...rest
-} = Astro.props
----
-
-<ul
-  class:list={[
-    "ui-list",
-    {
-      "ui-bordered": bordered,
-      "ui-dense": dense,
-      "ui-gutterless": gutterless,
-    },
-    variant && `ui-${variant}`,
-    className,
-  ]}
-  {...rest}
->
-  <slot />
-</ul>
+---
+import type { Props } from "./types.astro"
+export const title = "List"
+
+const {
+  bordered,
+  class: className,
+  dense,
+  flush,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<ul
+  class:list={[
+    "ui-list",
+    {
+      "ui-bordered": bordered,
+      "ui-dense": dense,
+      "ui-flush": flush,
+    },
+    variant && variant !== "filled" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</ul>

package/components/List/List.react.tsx

@@ -0,0 +1,27 @@
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function List({
+  bordered,
+  className,
+  dense,
+  flush,
+  variant,
+  ...rest
+}: Props) {
+  return (
+    <ul
+      className={cx([
+        "ui-list",
+        {
+          "ui-bordered": bordered,
+          "ui-dense": dense,
+          "ui-flush": flush,
+        },
+        variant && variant !== "filled" && `ui-${variant}`,
+        className,
+      ])}
+      {...rest}
+    />
+  )
+}

package/components/List/List.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Props } from "./types.svelte"
+
+  let {
+    bordered,
+    class: className,
+    dense,
+    flush,
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<ul
+  class={[
+    "ui-list",
+    {
+      "ui-bordered": bordered,
+      "ui-dense": dense,
+      "ui-flush": flush,
+    },
+    variant && variant !== "filled" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</ul>

package/components/List/List.vue

@@ -1,28 +1,23 @@
-<script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
-
-const { bordered, dense, gutterless, variant } = defineProps<Props>()
-defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-</script>
-
-<template>
-  <ul
-    :class="[
-      'ui-list',
-      {
-        'ui-bordered': bordered,
-        'ui-dense': dense,
-        'ui-gutterless': gutterless,
-      },
-      variant && `ui-${variant}`,
-      $props.class,
-    ]"
-    v-bind="$attrs"
-  >
-    <slot></slot>
-  </ul>
-</template>
+<script setup lang="ts">
+import type { Props, Slots } from "./types.vue-props"
+
+const { bordered, dense, flush, variant } = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <ul
+    :class="[
+      'ui-list',
+      {
+        'ui-bordered': bordered,
+        'ui-dense': dense,
+        'ui-flush': flush,
+      },
+      variant && variant !== 'filled' && `ui-${variant}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+  </ul>
+</template>

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

package/components/List/types.react.ts

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

package/components/List/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["ul"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["ul"]

package/components/List/types.ts

@@ -1,7 +1,6 @@
-export type Props = {
-  bordered?: boolean
-  dense?: boolean
-  divided?: boolean
-  gutterless?: boolean
-  variant?: "default" | "tonal" | "transparent"
-}
+export type Props = {
+  bordered?: boolean
+  dense?: boolean
+  flush?: boolean
+  variant?: "filled" | "tonal" | "transparent"
+}

package/components/List/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/ListItem/ListItem.astro

@@ -1,108 +1,115 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "List Item"
-
-const {
-  as: Tag,
-  borderTop,
-  class: className,
-  description,
-  for: htmlFor,
-  headline,
-  inset,
-  type,
-  ...rest
-} = Astro.props
-
-const hasLabel =
-  type && (type === "checkbox" || type === "radio" || type === "switch")
-const labelClass = type || ""
-const liProps = Tag ? {} : rest
-const innerProps = Tag ? rest : {}
----
-
-<li
-  class:list={[
-    {
-      "ui-border-top": borderTop,
-      "ui-inset": inset,
-    },
-    className,
-  ]}
-  {...liProps as any}
->
-  {
-    // Label + checkbox/radio/switch
-    hasLabel ? (
-      <label class={labelClass && `ui-${labelClass}`} for={htmlFor}>
-        {Astro.slots.start && (
-          <div class="ui-start">
-            <slot name="start" />
-          </div>
-        )}
-        {Astro.slots.text || headline || description ? (
-          <div class="ui-text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
-          </div>
-        ) : null}
-        {Astro.slots.end && (
-          <div class="ui-end">
-            <slot name="end" />
-          </div>
-        )}
-        <slot />
-      </label>
-    ) : // With custom tag
-    Tag ? (
-      <Tag {...(innerProps as any)}>
-        {Astro.slots.start && (
-          <div class="ui-start">
-            <slot name="start" />
-          </div>
-        )}
-        {headline || description || Astro.slots.text ? (
-          <div class="ui-text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
-            <slot />
-          </div>
-        ) : (
-          <slot />
-        )}
-        {Astro.slots.end && (
-          <div class="ui-end">
-            <slot name="end" />
-          </div>
-        )}
-      </Tag>
-    ) : (
-      // Without custom tag
-      <>
-        {Astro.slots.start && (
-          <div class="ui-start">
-            <slot name="start" />
-          </div>
-        )}
-        {headline || description || Astro.slots.text ? (
-          <div class="ui-text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
-            <slot />
-          </div>
-        ) : (
-          <slot />
-        )}
-        {Astro.slots.end && (
-          <div class="ui-end">
-            <slot name="end" />
-          </div>
-        )}
-      </>
-    )
-  }
-</li>
+---
+import type { Props } from "./types.astro"
+import type { HTMLAttributes } from "astro/types"
+import { tagAttrs } from "../tag"
+
+export const title = "List Item"
+
+const {
+  as = Astro.props.href ? "a" : undefined,
+  borderTop,
+  class: className,
+  color,
+  description,
+  disabled,
+  for: htmlFor,
+  href,
+  inset,
+  label,
+  type,
+  ...rest
+} = Astro.props
+
+const hasControl = type === "checkbox" || type === "radio" || type === "switch"
+const Tag = hasControl ? "label" : as
+const liProps = Tag && !hasControl ? {} : rest
+const hasLabel = !!label || Astro.slots.has("label")
+const hasDescription = !!description || Astro.slots.has("description")
+const tagProps = hasControl
+  ? { class: `ui-${type}`, for: htmlFor }
+  : { ...tagAttrs(Tag ?? "", disabled, href), ...rest }
+---
+
+<li
+  class:list={[
+    {
+      "ui-border-top": borderTop,
+      "ui-inset": inset,
+    },
+    color && `ui-${color}`,
+    className,
+  ]}
+  {...liProps as HTMLAttributes<"li">}
+>
+  {
+    // Label + checkbox/radio/switch
+    // With custom tag
+    Tag ? (
+      <Tag {...tagProps}>
+        {Astro.slots.start && (
+          <div class="ui-start">
+            <slot name="start" />
+          </div>
+        )}
+        {hasLabel || hasDescription ? (
+          <div class="ui-text">
+            {hasLabel && (
+              <p>
+                {label}
+                <slot name="label" />
+              </p>
+            )}
+            {hasDescription && (
+              <p>
+                {description}
+                <slot name="description" />
+              </p>
+            )}
+            <slot />
+          </div>
+        ) : (
+          <slot />
+        )}
+        {Astro.slots.end && (
+          <div class="ui-end">
+            <slot name="end" />
+          </div>
+        )}
+      </Tag>
+    ) : (
+      // Without custom tag
+      <>
+        {Astro.slots.start && (
+          <div class="ui-start">
+            <slot name="start" />
+          </div>
+        )}
+        {hasLabel || hasDescription ? (
+          <div class="ui-text">
+            {hasLabel && (
+              <p>
+                {label}
+                <slot name="label" />
+              </p>
+            )}
+            {hasDescription && (
+              <p>
+                {description}
+                <slot name="description" />
+              </p>
+            )}
+            <slot />
+          </div>
+        ) : (
+          <slot />
+        )}
+        {Astro.slots.end && (
+          <div class="ui-end">
+            <slot name="end" />
+          </div>
+        )}
+      </>
+    )
+  }
+  <slot name="submenu" />
+</li>