opui-css 5.1.1 → 5.2.0

package/components/Drawer/Drawer.astro

@@ -1,13 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  backdrop?: "transparent" | "blurred"
-  class?: string
-  closedby?: "any" | "closerequest" | "none"
-  id?: string
-  scrollLock?: boolean
-  side?: "inline-start" | "inline-end" | "block-start" | "block-end"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Drawer"
 

package/components/Drawer/DrawerFooter.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { DrawerFooterProps as Props } from "./types.astro"
 
 export const title = "Drawer Footer"
 

package/components/Drawer/DrawerHeader.astro

@@ -1,11 +1,7 @@
 ---
 import IconButton from "../IconButton/IconButton.astro"
 
-type Props = {
-  [key: string]: any
-  class?: string
-  heading?: string
-}
+import type { DrawerHeaderProps as Props } from "./types.astro"
 
 export const title = "Drawer Header"
 

package/components/Drawer/types.astro.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"dialog">
+
+export type DrawerHeaderProps = Base.DrawerHeaderProps & HTMLAttributes<"div">
+
+export type DrawerFooterProps = Base.DrawerFooterProps & HTMLAttributes<"div">

package/components/Drawer/types.d.vue.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type {
+  DrawerFooterProps as BaseDrawerFooterProps,
+  DrawerHeaderProps as BaseDrawerHeaderProps,
+  Props as BaseProps,
+  Slots as BaseSlots,
+} from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type DrawerHeaderProps = BaseDrawerHeaderProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type DrawerFooterProps = BaseDrawerFooterProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type DrawerSlots = BaseSlots<Slot>
+
+export type DrawerHeaderSlots = {
+  default?: Slot
+}
+
+export type DrawerFooterSlots = {
+  default?: Slot
+}

package/components/Drawer/types.solid.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Omit<JSX.DialogHtmlAttributes<HTMLDialogElement>, "id"> &
+  Partial<Base.Slots<JSX.Element>>
+
+export type DrawerFooterProps = Base.DrawerFooterProps &
+  JSX.HTMLAttributes<HTMLDivElement>
+
+export type DrawerHeaderProps = Base.DrawerHeaderProps &
+  JSX.HTMLAttributes<HTMLDivElement>

package/components/Drawer/types.svelte.ts

@@ -0,0 +1,15 @@
+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
+
+export type DrawerFooterProps = Base.DrawerFooterProps &
+  SvelteHTMLElements["div"]
+
+export type DrawerHeaderProps = Base.DrawerHeaderProps &
+  SvelteHTMLElements["div"]

package/components/Drawer/types.ts

@@ -0,0 +1,19 @@
+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> = {
+  content?: S
+  footer?: S
+  header?: S
+}

package/components/FieldDescription/FieldDescription.astro

@@ -1,13 +1,9 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Field Description"
 
 const { class: className, ...rest } = Astro.props
 ---
 
-<!-- prettier-ignore -->
 <p class:list={["ui-field-description", className]} {...rest}><slot /></p>

package/components/FieldDescription/types.astro.ts

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

package/components/FieldDescription/types.d.vue.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/FieldDescription/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/FieldDescription/types.svelte.ts

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

package/components/FieldDescription/types.ts

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

package/components/FieldGroup/FieldGroup.astro

@@ -1,15 +1,8 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  direction?: "row" | "column"
-  name?: string
-}
-
+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

package/components/FieldGroup/types.astro.ts

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

package/components/FieldGroup/types.d.vue.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, InjectionKey, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}
+
+export const CurrentFieldNameKey = Symbol() as InjectionKey<string>

package/components/FieldGroup/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/FieldGroup/types.svelte.ts

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

package/components/FieldGroup/types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  direction?: "row" | "column"
+  name?: string
+}

package/components/FieldLegend/FieldLegend.astro

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

package/components/FieldLegend/types.astro.ts

@@ -0,0 +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">)

package/components/FieldLegend/types.d.vue.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  as?: string
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/FieldLegend/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/FieldLegend/types.svelte.ts

@@ -0,0 +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])

package/components/FieldLegend/types.ts

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

package/components/FieldSet/FieldSet.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  as?: "fieldset" | "div" | string
-  class?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Field Set"
 

package/components/FieldSet/types.astro.ts

@@ -0,0 +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">)

package/components/FieldSet/types.d.vue.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  as?: string
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/FieldSet/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/FieldSet/types.svelte.ts

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

package/components/FieldSet/types.ts

@@ -0,0 +1,5 @@
+export type Props = {}
+export type Context = {
+  name?: string | null
+  description?: string | null
+}

package/components/Form/Form.astro

@@ -1,10 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  as?: "form" | "div" | string
-  class?: string
-}
-
+import type { Props } from "./types.astro"
 export const title = "Form"
 
 const { as: Tag = "form", class: className, ...rest } = Astro.props

package/components/Form/types.astro.ts

@@ -0,0 +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">)

package/components/Form/types.d.vue.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  as?: string
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/Form/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  JSX.HTMLAttributes<any> & { as?: keyof JSX.IntrinsicElements }

package/components/Form/types.svelte.ts

@@ -0,0 +1,7 @@
+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])

package/components/Form/types.ts

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

package/components/IconButton/IconButton.astro

@@ -1,26 +1,24 @@
 ---
-type Props = {
-  [key: string]: any
-  as?: "a" | "button" | string
-  class?: string
-  color?: "critical" | "primary"
-  href?: string
-  size?: "small"
-  variant?: "outlined" | "tonal" | "filled"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Icon Button"
 
-const {
-  as: Tag = Astro.props.href ? "a" : "button",
-  class: className,
-  color,
-  href,
-  size,
-  variant,
-  ...rest
-} = Astro.props
+const props = Astro.props as Props
+const { as, class: className, color, size, variant, href, ...rest } = props
+
+const Tag = as || (href ? "a" : "button")
 ---
 
-<!-- prettier-ignore -->
-<Tag class:list={["ui-icon-button", size && `ui-${size}`, variant && `ui-${variant}`, color && `ui-${color}`, className]} href={href} {...rest}><slot /></Tag>
+<Tag
+  class:list={[
+    "ui-icon-button",
+    size && `ui-${size}`,
+    variant && `ui-${variant}`,
+    color && `ui-${color}`,
+    className,
+  ]}
+  href={href}
+  {...rest as any}
+>
+  <slot />
+</Tag>

package/components/IconButton/types.astro.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  | (Base.Props & { as?: "button" } & HTMLAttributes<"button">)
+  | (Base.Props & { as?: "a" } & HTMLAttributes<"a">)

package/components/IconButton/types.d.vue.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/IconButton/types.solid.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  (
+    | ({ as?: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
+    | ({ as: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
+  )

package/components/IconButton/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?: "button" } & SvelteHTMLElements["button"])
+  | (Base.Props & { as?: "a" } & SvelteHTMLElements["a"])

package/components/IconButton/types.ts

@@ -0,0 +1,16 @@
+export type Props = {
+  color?: "critical" | "primary"
+  size?: "small"
+  variant?: "outlined" | "tonal" | "filled"
+} & (
+  | {
+      as: "a"
+      href: string
+      disabled?: never
+    }
+  | {
+      as?: "button"
+      href?: never
+      disabled?: boolean
+    }
+)

package/components/List/List.astro

@@ -1,12 +1,5 @@
 ---
-type Props = {
-  bordered?: boolean
-  dense?: boolean
-  gutterless?: boolean
-  variant?: "default" | "tonal" | "transparent"
-  [key: string]: any
-}
-
+import type { Props } from "./types.astro"
 export const title = "List"
 
 const {

package/components/List/types.astro.ts

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

package/components/List/types.d.vue.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/List/types.solid.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLUListElement>

package/components/List/types.svelte.ts

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

package/components/List/types.ts

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

package/components/ListItem/ListItem.astro

@@ -1,15 +1,5 @@
 ---
-type Props = {
-  as?: "a" | "button" | "div"
-  borderTop?: boolean
-  class?: string
-  description?: string
-  for?: string
-  headline?: string
-  inset?: boolean
-  type?: "checkbox" | "radio" | "switch"
-  [key: string]: any
-}
+import type { Props } from "./types.astro"
 
 export const title = "List Item"
 
@@ -40,7 +30,7 @@ const innerProps = Tag ? rest : {}
     },
     className,
   ]}
-  {...liProps}
+  {...liProps as any}
 >
   {
     // Label + checkbox/radio/switch
@@ -67,7 +57,7 @@ const innerProps = Tag ? rest : {}
       </label>
     ) : // With custom tag
     Tag ? (
-      <Tag {...innerProps}>
+      <Tag {...(innerProps as any)}>
         {Astro.slots.start && (
           <div class="ui-start">
             <slot name="start" />

package/components/ListItem/types.astro.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props &
+  (
+    | ({ as?: "li" } & HTMLAttributes<"li">)
+    | ({ as: "a" } & HTMLAttributes<"a">)
+    | ({ as: "button" } & HTMLAttributes<"button">)
+    | ({ as: "div" } & HTMLAttributes<"div">)
+  )

package/components/ListItem/types.d.vue.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps, Slots as BaseSlots } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = BaseSlots<Slot> & {
+  default?: Slot
+}

package/components/ListItem/types.solid.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+// prettier-ignore
+export type Props = Base.Props &
+  Base.Slots<JSX.Element> &
+  (
+    | ({ as?: "li" } & JSX.HTMLAttributes<HTMLLIElement>)
+    | ({ as: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
+    | ({ as: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
+    | ({ as: "div" } & JSX.HTMLAttributes<HTMLDivElement>)
+  )