opui-css 5.1.2 → 5.2.0

package/components/ListItem/types.svelte.ts

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

package/components/ListItem/types.ts

@@ -0,0 +1,32 @@
+export type Props = {
+  borderTop?: boolean
+  class?: string
+  description?: string
+  for?: string
+  headline?: string
+  inset?: boolean
+  type?: "checkbox" | "radio" | "switch" | "button"
+} & (
+  | {
+      as?: "a"
+      href: string
+      disabled?: never
+    }
+  | {
+      as?: "button"
+      href?: never
+      disabled?: boolean
+    }
+  | {
+      as?: string
+      href?: never
+    }
+)
+
+export type Slots<S> = {
+  description?: string | S
+  end?: string | S
+  headline?: string | S
+  start?: string | S
+  text?: string | S
+}

package/components/Progress/Progress.astro

@@ -1,15 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  "aria-busy"?: "true" | "false" | boolean
-  "aria-describedby"?: string
-  "aria-label"?: string
-  class?: string
-  id?: string
-  max?: number | string
-  value?: number | string
-  variant?: "filled" | "default" | "tonal"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Progress"
 

package/components/Progress/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<"progress">

package/components/Progress/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/Progress/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<HTMLProgressElement>

package/components/Progress/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["progress"]

package/components/Progress/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  [key: string]: any
+  "aria-busy"?: "true" | "false" | boolean
+  "aria-describedby"?: string
+  "aria-label"?: string
+  id?: string
+  max?: number | string
+  value?: number | string
+  variant?: "filled" | "default" | "tonal"
+}

package/components/Radio/Radio.astro

@@ -1,35 +1,17 @@
 ---
+import type { RadioProps as Props } from "./types.astro"
 import RadioInput from "./RadioInput.astro"
 
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  class?: string
-  disabled?: boolean
-  error?: boolean
-  hideLabel?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  size?: "small" | "large"
-  stack?: boolean
-  value?: string
-}
-
 export const title = "Radio"
 
 const {
-  checked,
   class: className,
   disabled,
   error,
   hideLabel,
-  id,
   name,
-  required,
   size,
   stack,
-  value,
   ...rest
 } = Astro.props
 
@@ -50,21 +32,13 @@ const finalName = name || currentFieldName
   ]}
   data-invalid={error || undefined}
 >
-  <RadioInput
-    aria-describedby={endTextId}
-    {checked}
-    {disabled}
-    {id}
-    name={finalName}
-    {required}
-    {value}
-    {...rest}
-  />
-  <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
+  <RadioInput 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/Radio/RadioInput.astro

@@ -1,24 +1,7 @@
 ---
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  disabled?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  value?: string
-}
+import type { RadioInputProps as Props } from "./types.astro"
 
-const { checked, disabled, id, name, required, value, ...rest } = Astro.props
+const { ...props } = Astro.props
 ---
 
-<input
-  type="radio"
-  {checked}
-  {disabled}
-  {id}
-  {name}
-  {required}
-  {value}
-  {...rest}
-/>
+<input type="radio" {...props} />

package/components/Radio/types.astro.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type RadioProps = Base.RadioProps & HTMLAttributes<"input">
+export type RadioInputProps = Base.RadioInputProps &
+  Omit<HTMLAttributes<"input">, "type">

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

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

package/components/Radio/types.solid.ts

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

package/components/Radio/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.RadioSlots<Snippet>
+
+export type RadioInputProps = Base.RadioInputProps &
+  Omit<SvelteHTMLElements["input"], "type">
+
+export type RadioProps = Omit<Base.RadioProps, keyof Snippets> &
+  Snippets &
+  Omit<SvelteHTMLElements["input"], "size">

package/components/Radio/types.ts

@@ -0,0 +1,13 @@
+export type RadioProps = {
+  disabled?: boolean
+  error?: boolean
+  hideLabel?: boolean
+  size?: "small" | "large"
+  stack?: boolean
+}
+
+export type RadioInputProps = {}
+
+export type RadioSlots<S> = {
+  endText?: string | S
+}

package/components/Range/Range.astro

@@ -1,27 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  disabled?: boolean
-  endText?: string
-  id?: string
-  label?: string
-  max?: number | string
-  min?: number | string
-  name?: string
-  spread?: boolean
-  startText?: string
-  step?: number | string
-  value?: number | string
-  valueSuffix?: string
-  variant?: "filled" | "default" | "tonal"
-} & (
-  | { list?: never; options?: never }
-  | {
-      list: string
-      options: (string | number | { value: string | number; label?: string })[]
-    }
-)
+import type { RangeProps as Props } from "./types.astro"
 
 export const title = "Range"
 
@@ -57,14 +35,24 @@ const labelId = hasLabel ? $id("range-label") : undefined
 const startTextId = hasStartText ? $id("range-start") : undefined
 const endTextId = hasEndText ? $id("range-end") : undefined
 
-const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefined
+const describedBy =
+  [startTextId, endTextId].filter(Boolean).join(" ") || undefined
 ---
 
-<label class:list={["ui-range", variant && `ui-${variant}`, { "ui-spread": spread }, className]}>
+<label
+  class:list={[
+    "ui-range",
+    variant && `ui-${variant}`,
+    { "ui-spread": spread },
+    className,
+  ]}
+>
   {
     hasLabel && (
-      <!-- prettier-ignore -->
-      <span class="ui-label" id={labelId}>{label}<slot /></span>
+      <span class="ui-label" id={labelId}>
+        {label}
+        <slot />
+      </span>
     )
   }
   {
@@ -77,7 +65,8 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
   {
     hasStartText && (
       <span class="ui-start-text" id={startTextId}>
-        {startText}<slot name="start-text" />
+        {startText}
+        <slot name="start-text" />
       </span>
     )
   }
@@ -103,7 +92,7 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
             <option value={option.value} label={option.label} />
           ) : (
             <option value={option} />
-          )
+          ),
         )}
         <slot name="datalist" />
       </datalist>
@@ -112,7 +101,8 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
   {
     hasEndText && (
       <span class="ui-end-text" id={endTextId}>
-        {endText}<slot name="end-text" />
+        {endText}
+        <slot name="end-text" />
       </span>
     )
   }
@@ -124,7 +114,9 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
   // without a value display.
   for (const range of document.querySelectorAll<HTMLElement>(".ui-range")) {
     const input = range.querySelector<HTMLInputElement>('input[type="range"]')
-    const output = range.querySelector<HTMLOutputElement>(":scope > output.ui-value")
+    const output = range.querySelector<HTMLOutputElement>(
+      ":scope > output.ui-value",
+    )
     if (!input || !output) continue
     const suffix = output.dataset.suffix ?? ""
     const update = () => {

package/components/Range/types.astro.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type RangeProps = Base.RangeProps &
+  HTMLAttributes<"label"> &
+  HTMLAttributes<"input">

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

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { RangeProps as BaseRangeProps } from "./types"
+
+export type RangeProps = BaseRangeProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  datalist?: Slot
+  default?: Slot
+  "end-text"?: Slot
+  "start-text"?: Slot
+  value?: Slot
+}

package/components/Range/types.solid.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type RangeProps = Base.RangeProps &
+  Partial<Base.RangeSlots<JSX.Element>> &
+  JSX.InputHTMLAttributes<HTMLInputElement>

package/components/Range/types.svelte.ts

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

package/components/Range/types.ts

@@ -0,0 +1,30 @@
+export type RangeProps = {
+  [key: string]: any
+  disabled?: boolean
+  endText?: string
+  id?: string
+  label?: string
+  max?: number | string
+  min?: number | string
+  name?: string
+  spread?: boolean
+  startText?: string
+  step?: number | string
+  value?: number | string
+  valueSuffix?: string
+  variant?: "filled" | "default" | "tonal"
+} & (
+  | { list?: never; options?: never }
+  | {
+      list: string
+      options: (string | number | { value: string | number; label?: string })[]
+    }
+)
+
+export type RangeSlots<S> = {
+  datalist?: S
+  endText?: string | S
+  startText?: string | S
+  valueSuffix?: string | S
+  valueText?: S
+}

package/components/Select/Select.astro

@@ -1,27 +1,5 @@
 ---
-type Item = {
-  text: string
-  value: any
-}
-
-type Props = {
-  [key: string]: any
-  class?: string
-  description?: string
-  disabled?: boolean
-  error?: boolean
-  dense?: boolean
-  id?: string
-  items?: Item[]
-  label?: string
-  name?: string
-  spread?: boolean
-  required?: boolean
-  size?: "small"
-  endText?: string
-  value?: any
-  variant?: "outlined" | "filled"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Select"
 
@@ -36,9 +14,9 @@ const {
   label,
   name,
   spread,
-  required,
   size,
   endText,
+  required,
   value,
   variant = "outlined",
   ...rest
@@ -64,14 +42,18 @@ const labelId = $id("select-label")
 >
   {
     (label || Astro.slots.has("label")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-label" id={labelId}>{label}<slot name="label" /></span>
+      <span class="ui-label" id={labelId}>
+        {label}
+        <slot name="label" />
+      </span>
     )
   }
   {
     (description || Astro.slots.has("description")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-start-text">{description}<slot name="description" /></span>
+      <span class="ui-start-text">
+        {description}
+        <slot name="description" />
+      </span>
     )
   }
   <span class="ui-field">
@@ -92,15 +74,41 @@ const labelId = $id("select-label")
         <slot />
       </div>
     </select>
-    {Astro.slots.has("prefix") && <span class="ui-prefix"><slot name="prefix" /></span>}
-    {Astro.slots.has("suffix") && <span class="ui-suffix"><slot name="suffix" /></span>}
-    {Astro.slots.has("header") && <span class="ui-header"><slot name="header" /></span>}
-    {Astro.slots.has("footer") && <span class="ui-footer"><slot name="footer" /></span>}
+    {
+      Astro.slots.has("prefix") && (
+        <span class="ui-prefix">
+          <slot name="prefix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("suffix") && (
+        <span class="ui-suffix">
+          <slot name="suffix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("header") && (
+        <span class="ui-header">
+          <slot name="header" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("footer") && (
+        <span class="ui-footer">
+          <slot name="footer" />
+        </span>
+      )
+    }
   </span>
   {
     (endText || Astro.slots.has("end-text")) && (
-      <!-- prettier-ignore -->
-      <span id={$id("end-text")} class="ui-end-text">{endText}<slot name="end-text" /></span>
+      <span id={$id("end-text")} class="ui-end-text">
+        {endText}
+        <slot name="end-text" />
+      </span>
     )
   }
 </label>

package/components/Select/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<"select">

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

@@ -0,0 +1,17 @@
+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
+  description?: Slot
+  "end-text"?: Slot
+  footer?: Slot
+  header?: Slot
+  label?: Slot
+  prefix?: Slot
+  suffix?: Slot
+}

package/components/Select/types.solid.ts

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

package/components/Select/types.svelte.ts

@@ -0,0 +1,7 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+export type Props = Omit<Base.Props, keyof Base.Slots<Snippet>> &
+  Base.Slots<Snippet> &
+  Omit<SvelteHTMLElements["select"], "prefix" | "size">

package/components/Select/types.ts

@@ -0,0 +1,27 @@
+export type Props = {
+  error?: boolean
+  dense?: boolean
+  description?: string
+  items?: Item[]
+  label?: string
+  spread?: boolean
+  size?: "small"
+  endText?: string
+  variant?: "outlined" | "filled"
+}
+
+export type Item = {
+  text: string
+  value: any
+}
+
+export type Slots<S> = {
+  children?: S
+  description?: string | S
+  endText?: string | S
+  footer?: string | S
+  header?: string | S
+  label?: string | S
+  prefix?: string | S
+  suffix?: string | S
+}