opui-css 5.1.1 → 5.2.0

package/components/Callout/types.solid.ts

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

package/components/Callout/types.svelte.ts

@@ -0,0 +1,7 @@
+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 & Snippets & SvelteHTMLElements["article"]

package/components/Callout/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  [key: string]: any
+  severity?: "critical" | "info" | "neutral" | "success" | "warning"
+  variant?: "tonal" | "outlined"
+}
+
+export type Slots<S> = {
+  icon?: S
+  title?: S
+}

package/components/Card/Card.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  actionsAlign?: "start" | "end"
-  variant?: "text" | "outlined" | "elevated" | "tonal"
-  [key: string]: any
-}
+import type { Props } from "./types.astro"
 
 export const title = "Card"
 

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

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

package/components/Card/types.svelte.ts

@@ -0,0 +1,7 @@
+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 & Snippets & SvelteHTMLElements["div"]

package/components/Card/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  actionsAlign?: "start" | "end"
+  variant?: "text" | "outlined" | "elevated" | "tonal"
+}
+
+export type Slots<S> = {
+  actions?: S
+  content?: S
+  header?: S
+}

package/components/Checkbox/Checkbox.astro

@@ -1,39 +1,18 @@
 ---
+import type { CheckboxProps as Props } from "./types.astro"
 import CheckboxInput from "./CheckboxInput.astro"
 
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  class?: string
-  error?: boolean
-  disabled?: boolean
-  hideLabel?: boolean
-  id?: string
-  indeterminate?: boolean
-  name?: string
-  required?: boolean
-  size?: "small" | "large"
-  spread?: boolean
-  stack?: boolean
-  value?: string
-}
-
 export const title = "Checkbox"
 
 const {
-  checked,
   class: className,
   error,
   disabled,
   hideLabel,
-  id,
-  indeterminate,
   name,
-  required,
   size,
   spread,
   stack,
-  value,
   ...rest
 } = Astro.props
 
@@ -55,22 +34,13 @@ const finalName = name || currentFieldName
   ]}
   data-invalid={error || undefined}
 >
-  <CheckboxInput
-    aria-describedby={endTextId}
-    {checked}
-    {disabled}
-    {id}
-    {indeterminate}
-    name={finalName}
-    {required}
-    {value}
-    {...rest}
-  />
-  <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
+  <CheckboxInput aria-describedby={endTextId} name={finalName} {...rest} />
+  <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
   {
     Astro.slots.has("end-text") && (
-      <!-- prettier-ignore -->
-      <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
+      <span id={endTextId} class="ui-end-text">
+        <slot name="end-text" />
+      </span>
     )
   }
 </label>

package/components/Checkbox/CheckboxInput.astro

@@ -1,28 +1,12 @@
 ---
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  disabled?: boolean
-  id?: string
-  indeterminate?: boolean
-  name?: string
-  required?: boolean
-  value?: string
-}
+import type { CheckboxInputProps as Props } from "./types.astro"
 
-const { checked, disabled, id, indeterminate, name, required, value, ...rest } =
-  Astro.props
+const { indeterminate, ...rest } = Astro.props as Props
 ---
 
 <input
   type="checkbox"
   data-indeterminate={indeterminate || undefined}
-  {checked}
-  {disabled}
-  {id}
-  {name}
-  {required}
-  {value}
   {...rest}
 />
 

package/components/Checkbox/types.astro.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type CheckboxProps = Base.CheckboxProps &
+  Omit<HTMLAttributes<"input">, "size">
+
+export type CheckboxInputProps = Base.CheckboxInputProps &
+  HTMLAttributes<"input">

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

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

package/components/Checkbox/types.solid.ts

@@ -0,0 +1,9 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type CheckboxInputProps = Base.CheckboxInputProps &
+  JSX.InputHTMLAttributes<HTMLInputElement>
+
+export type CheckboxProps = Base.CheckboxProps &
+  Partial<Base.CheckboxSlots<JSX.Element>> &
+  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size">

package/components/Checkbox/types.svelte.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.CheckboxSlots<Snippet>
+
+export type CheckboxProps = Omit<Base.CheckboxProps, keyof Snippets> &
+  Snippets &
+  Omit<SvelteHTMLElements["input"], "size">
+
+export type CheckboxInputProps = Base.CheckboxInputProps &
+  SvelteHTMLElements["input"]

package/components/Checkbox/types.ts

@@ -0,0 +1,17 @@
+export type CheckboxProps = {
+  disabled?: boolean
+  error?: boolean
+  hideLabel?: boolean
+  indeterminate?: boolean
+  size?: "small" | "large"
+  spread?: boolean
+  stack?: boolean
+}
+
+export type CheckboxSlots<S> = {
+  endText?: string | S
+}
+
+export type CheckboxInputProps = {
+  indeterminate?: boolean
+}

package/components/Chip/Chip.astro

@@ -1,13 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  as?: "a" | "button" | "div" | string
-  class?: string
-  label?: string
-  multiline?: boolean
-  size?: "small"
-  variant?: "tonal" | "outlined"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Chip"
 
@@ -22,7 +14,6 @@ const {
 } = Astro.props
 ---
 
-<!-- prettier-ignore -->
 <Tag
   class:list={[
     "ui-chip",
@@ -33,5 +24,8 @@ const {
     variant && `ui-${variant}`,
     className,
   ]}
-  {...rest}
-><slot name="start" /><slot />{label && <span class="ui-text">{label}</span>}<slot name="end" /></Tag>
+  {...rest as any}
+  ><slot name="start" /><slot />{
+    label && <span class="ui-text">{label}</span>
+  }<slot name="end" /></Tag
+>

package/components/Chip/types.astro.ts

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

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

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

package/components/Chip/types.svelte.ts

@@ -0,0 +1,14 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.Slots<Snippet>
+
+// prettier-ignore
+export type Props = Base.Props &
+  Snippets &
+  (
+    | ({ as?: "a" } & SvelteHTMLElements["a"])
+    | ({ as?: "button" } & SvelteHTMLElements["button"])
+    | ({ as?: "div" } & SvelteHTMLElements["div"])
+  )

package/components/Chip/types.ts

@@ -0,0 +1,13 @@
+export type Props = {
+  [key: string]: any
+  as?: "a" | "button" | "div" | string
+  label?: string
+  multiline?: boolean
+  size?: "small"
+  variant?: "tonal" | "outlined"
+}
+
+export type Slots<S> = {
+  end?: S
+  start?: S
+}

package/components/ClassicSelect/ClassicSelect.astro

@@ -1,24 +1,5 @@
 ---
-type Item = {
-  text: string
-  value: any
-}
-
-type Props = {
-  [key: string]: any
-  class?: string
-  disabled?: boolean
-  error?: boolean
-  id?: string
-  items?: Item[]
-  label?: string
-  name?: string
-  required?: boolean
-  size?: "small"
-  endText?: string
-  value?: any
-  variant?: "outlined" | "filled"
-}
+import type { ClassicSelectProps as Props } from "./types.astro"
 
 export const title = "Classic Select"
 
@@ -56,8 +37,9 @@ const labelId = $id("select-label")
 >
   {
     label && (
-      <!-- prettier-ignore -->
-      <span class="ui-label" id={labelId}>{label}</span>
+      <span class="ui-label" id={labelId}>
+        {label}
+      </span>
     )
   }
   <span class="ui-field">
@@ -74,10 +56,5 @@ const labelId = $id("select-label")
       <slot />
     </select>
   </span>
-  {
-    endText && (
-      <!-- prettier-ignore -->
-      <span class="ui-end-text">{endText}</span>
-    )
-  }
+  {endText && <span class="ui-end-text">{endText}</span>}
 </label>

package/components/ClassicSelect/types.astro.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type { Item } from "./types"
+
+export type ClassicSelectProps = Base.ClassicSelectProps &
+  HTMLAttributes<"label"> &
+  HTMLAttributes<"select">

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

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

package/components/ClassicSelect/types.solid.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type ClassicSelectProps = Base.ClassicSelectProps &
+  Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, "size">

package/components/ClassicSelect/types.svelte.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type ClassicSelectProps = Base.ClassicSelectProps &
+  Omit<SvelteHTMLElements["select"], "size">

package/components/ClassicSelect/types.ts

@@ -0,0 +1,19 @@
+export type Item = {
+  text: string
+  value: any
+}
+
+export type ClassicSelectProps = {
+  [key: string]: any
+  disabled?: boolean
+  error?: boolean
+  id?: string
+  items?: Item[]
+  label?: string
+  name?: string
+  required?: boolean
+  size?: "small"
+  endText?: string
+  value?: any
+  variant?: "outlined" | "filled"
+}

package/components/DescriptionList/Description.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { DescriptionProps as Props } from "./types.astro"
 
 const { class: className, ...rest } = Astro.props
 ---

package/components/DescriptionList/DescriptionList.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  bordered?: boolean | "dotted"
-  class?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Description List"
 

package/components/DescriptionList/Item.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { ItemProps as Props } from "./types.astro"
 
 const { class: className, ...rest } = Astro.props
 ---

package/components/DescriptionList/Term.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-}
+import type { TermProps as Props } from "./types.astro"
 
 const { class: className, ...rest } = Astro.props
 ---

package/components/DescriptionList/types.astro.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"dl">
+
+export type TermProps = Base.Props & HTMLAttributes<"dt">
+
+export type DescriptionProps = Base.Props & HTMLAttributes<"dd">
+
+export type ItemProps = Base.Props & HTMLAttributes<"div">

package/components/DescriptionList/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/DescriptionList/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<HTMLDListElement>

package/components/DescriptionList/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["dl"]

package/components/DescriptionList/types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+  bordered?: boolean | "dotted"
+}

package/components/Dialog/Dialog.astro

@@ -1,10 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  actionsAlign?: "start" | "end"
-  class?: string
-  closedby?: "any" | "closerequest" | "none"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Dialog"
 

package/components/Dialog/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<"dialog">

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

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Partial<Base.Slots<JSX.Element>> &
+  JSX.DialogHtmlAttributes<HTMLDialogElement> & {
+    closedby?: "any" | "none" | "closerequest"
+  }

package/components/Dialog/types.svelte.ts

@@ -0,0 +1,7 @@
+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 & Snippets & SvelteHTMLElements["dialog"]

package/components/Dialog/types.ts

@@ -0,0 +1,9 @@
+export type Props = {
+  actionsAlign?: "start" | "end"
+}
+
+export type Slots<S> = {
+  actions?: S
+  content?: S
+  header?: string | S
+}

package/components/Divider/Divider.astro

@@ -1,11 +1,6 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  variant?: "tonal" | "filled" | "primary"
-}
-
 export const title = "Divider"
+import type { Props } from "./types.astro"
 
 const { class: className, variant, ...rest } = Astro.props
 const variantClass = variant ? `border-${variant}` : ""

package/components/Divider/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<"hr">

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

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

package/components/Divider/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<HTMLHRElement>

package/components/Divider/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["hr"]

package/components/Divider/types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+  variant?: "tonal" | "filled" | "primary"
+}