opui-css 5.4.2 → 6.0.0-rc.1

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>

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

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])
+export type Props =
+  | (Base.Props & { as?: "form" } & SvelteHTMLElements["form"])
+  | (Base.Props & { as: "div" } & SvelteHTMLElements["div"])

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

@@ -6,7 +6,7 @@ const {
   bordered,
   class: className,
   dense,
-  gutterless,
+  flush,
   variant,
   ...rest
 } = Astro.props
@@ -18,9 +18,9 @@ const {
     {
       "ui-bordered": bordered,
       "ui-dense": dense,
-      "ui-gutterless": gutterless,
+      "ui-flush": flush,
     },
-    variant && `ui-${variant}`,
+    variant && variant !== "filled" && `ui-${variant}`,
     className,
   ]}
   {...rest}

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,12 +1,8 @@
 <script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const { bordered, dense, gutterless, variant } = defineProps<Props>()
+const { bordered, dense, flush, variant } = defineProps<Props>()
 defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
 </script>
 
 <template>
@@ -16,12 +12,11 @@ defineOptions({
       {
         'ui-bordered': bordered,
         'ui-dense': dense,
-        'ui-gutterless': gutterless,
+        'ui-flush': flush,
       },
-      variant && `ui-${variant}`,
+      variant && variant !== 'filled' && `ui-${variant}`,
       $props.class,
     ]"
-    v-bind="$attrs"
   >
     <slot></slot>
   </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.ts

@@ -1,7 +1,6 @@
 export type Props = {
   bordered?: boolean
   dense?: boolean
-  divided?: boolean
-  gutterless?: boolean
-  variant?: "default" | "tonal" | "transparent"
+  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,25 +1,33 @@
 ---
 import type { Props } from "./types.astro"
+import type { HTMLAttributes } from "astro/types"
+import { tagAttrs } from "../tag"
 
 export const title = "List Item"
 
 const {
-  as: Tag,
+  as = Astro.props.href ? "a" : undefined,
   borderTop,
   class: className,
+  color,
   description,
+  disabled,
   for: htmlFor,
-  headline,
+  href,
   inset,
+  label,
   type,
   ...rest
 } = Astro.props
 
-const hasLabel =
-  type && (type === "checkbox" || type === "radio" || type === "switch")
-const labelClass = type || ""
-const liProps = Tag ? {} : rest
-const innerProps = Tag ? rest : {}
+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
@@ -28,46 +36,35 @@ const innerProps = Tag ? rest : {}
       "ui-border-top": borderTop,
       "ui-inset": inset,
     },
+    color && `ui-${color}`,
     className,
   ]}
-  {...liProps as any}
+  {...liProps as HTMLAttributes<"li">}
 >
   {
     // 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
+    // With custom tag
     Tag ? (
-      <Tag {...(innerProps as any)}>
+      <Tag {...tagProps}>
         {Astro.slots.start && (
           <div class="ui-start">
             <slot name="start" />
           </div>
         )}
-        {headline || description || Astro.slots.text ? (
+        {hasLabel || hasDescription ? (
           <div class="ui-text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
+            {hasLabel && (
+              <p>
+                {label}
+                <slot name="label" />
+              </p>
+            )}
+            {hasDescription && (
+              <p>
+                {description}
+                <slot name="description" />
+              </p>
+            )}
             <slot />
           </div>
         ) : (
@@ -87,11 +84,20 @@ const innerProps = Tag ? rest : {}
             <slot name="start" />
           </div>
         )}
-        {headline || description || Astro.slots.text ? (
+        {hasLabel || hasDescription ? (
           <div class="ui-text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
+            {hasLabel && (
+              <p>
+                {label}
+                <slot name="label" />
+              </p>
+            )}
+            {hasDescription && (
+              <p>
+                {description}
+                <slot name="description" />
+              </p>
+            )}
             <slot />
           </div>
         ) : (
@@ -105,4 +111,5 @@ const innerProps = Tag ? rest : {}
       </>
     )
   }
+  <slot name="submenu" />
 </li>

package/components/ListItem/ListItem.react.tsx

@@ -0,0 +1,65 @@
+import type { ElementType } from "react"
+import { cx } from "../cx"
+import { tagAttrs } from "../tag"
+import type { Props } from "./types.react"
+
+export default function ListItem({
+  as,
+  borderTop,
+  className,
+  color,
+  disabled,
+  href,
+  htmlFor,
+  inset,
+  type,
+  children,
+  description,
+  end,
+  label,
+  start,
+  submenu,
+  ...rest
+}: Props) {
+  const hasControl =
+    type === "checkbox" || type === "radio" || type === "switch"
+  const Tag: ElementType | undefined = hasControl
+    ? "label"
+    : (as ?? (href ? "a" : undefined))
+  const tagProps = hasControl
+    ? { className: `ui-${type}`, htmlFor }
+    : { ...tagAttrs(Tag as string, disabled, href), ...(rest as object) }
+
+  const body = (
+    <>
+      {start && <div className="ui-start">{start}</div>}
+      {label || description ? (
+        <div className="ui-text">
+          {label && <p>{label}</p>}
+          {description && <p>{description}</p>}
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+      {end && <div className="ui-end">{end}</div>}
+    </>
+  )
+
+  return (
+    <li
+      className={cx([
+        {
+          "ui-border-top": borderTop,
+          "ui-inset": inset,
+        },
+        color && `ui-${color}`,
+        className,
+      ])}
+      {...(hasControl || !Tag ? (rest as object) : {})}
+    >
+      {Tag ? <Tag {...tagProps}>{body}</Tag> : body}
+      {submenu}
+    </li>
+  )
+}

package/components/ListItem/ListItem.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { content } from "../content.svelte"
+  import { tagAttrs } from "../tag"
+  import type { Props } from "./types.svelte"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  let {
+    as,
+    borderTop,
+    class: className,
+    color,
+    disabled,
+    for: htmlFor,
+    href,
+    inset,
+    type,
+
+    // Snippets
+    children,
+    description,
+    end,
+    label,
+    start,
+    submenu,
+    ...rest
+  }: Props = $props()
+
+  const hasControl = $derived(
+    type === "checkbox" || type === "radio" || type === "switch",
+  )
+  const Tag = $derived(hasControl ? "label" : (as ?? (href ? "a" : undefined)))
+  const tagProps = $derived(
+    hasControl
+      ? { class: `ui-${type}`, for: htmlFor }
+      : { ...tagAttrs(Tag ?? "", disabled, href), ...rest },
+  )
+</script>
+
+{#snippet body()}
+  {#if start}
+    <div class="ui-start">
+      {@render start()}
+    </div>
+  {/if}
+  {#if label || description}
+    <div class="ui-text">
+      {#if label}<p>{@render content(label)}</p>{/if}
+      {#if description}<p>{@render content(description)}</p>{/if}
+      {@render children?.()}
+    </div>
+  {:else}
+    {@render children?.()}
+  {/if}
+  {#if end}
+    <div class="ui-end">
+      {@render end()}
+    </div>
+  {/if}
+{/snippet}
+
+<li
+  class={[
+    {
+      "ui-border-top": borderTop,
+      "ui-inset": inset,
+    },
+    color && `ui-${color}`,
+    className,
+  ]}
+  {...(hasControl || !Tag ? rest : {}) as HTMLAttributes<HTMLLIElement>}
+>
+  {#if Tag}
+    <svelte:element this={Tag} {...tagProps as HTMLAttributes<HTMLElement>}>
+      {@render body()}
+    </svelte:element>
+  {:else}
+    {@render body()}
+  {/if}
+  {@render submenu?.()}
+</li>