opui-css 5.4.2 → 5.4.3

package/components/Checkbox/Checkbox.astro

@@ -1,46 +1,46 @@
----
-import type { CheckboxProps as Props } from "./types.astro"
-import CheckboxInput from "./CheckboxInput.astro"
-
-export const title = "Checkbox"
-
-const {
-  class: className,
-  error,
-  disabled,
-  hideLabel,
-  name,
-  size,
-  spread,
-  stack,
-  ...rest
-} = Astro.props
-
-const { $id, currentFieldName } = Astro.locals
-const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
-
-const finalName = name || currentFieldName
----
-
-<label
-  class:list={[
-    "ui-checkbox",
-    size && `ui-${size}`,
-    {
-      "ui-stack": stack,
-      "ui-spread": spread,
-    },
-    className,
-  ]}
-  data-invalid={error || undefined}
->
-  <CheckboxInput aria-describedby={endTextId} name={finalName} {...rest} />
-  <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
-  {
-    Astro.slots.has("end-text") && (
-      <span id={endTextId} class="ui-end-text">
-        <slot name="end-text" />
-      </span>
-    )
-  }
-</label>
+---
+import type { CheckboxProps as Props } from "./types.astro"
+import CheckboxInput from "./CheckboxInput.astro"
+
+export const title = "Checkbox"
+
+const {
+  class: className,
+  error,
+  disabled,
+  hideLabel,
+  name,
+  size,
+  spread,
+  stack,
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
+
+const finalName = name || currentFieldName
+---
+
+<label
+  class:list={[
+    "ui-checkbox",
+    size && `ui-${size}`,
+    {
+      "ui-stack": stack,
+      "ui-spread": spread,
+    },
+    className,
+  ]}
+  data-invalid={error || undefined}
+>
+  <CheckboxInput aria-describedby={endTextId} name={finalName} {...rest} />
+  <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
+  {
+    Astro.slots.has("end-text") && (
+      <span id={endTextId} class="ui-end-text">
+        <slot name="end-text" />
+      </span>
+    )
+  }
+</label>

package/components/Checkbox/Checkbox.vue

@@ -1,43 +1,43 @@
-<script setup lang="ts">
-import CheckboxInput from "./CheckboxInput.vue"
-import type { CheckboxProps, Slots } from "./types.d.vue"
-import { useId } from "vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<CheckboxProps>()
-defineSlots<Slots>()
-const modelValue = defineModel<boolean | (string | number)[]>()
-
-const endTextId = useId()
-</script>
-
-<template>
-  <label
-    :class="[
-      'ui-checkbox',
-      props.size && `ui-${props.size}`,
-      {
-        'ui-stack': props.stack,
-        'ui-spread': props.spread,
-      },
-      props.class,
-    ]"
-    :data-invalid="props.error || undefined"
-  >
-    <CheckboxInput
-      v-bind="$attrs"
-      v-model="modelValue"
-      :aria-describedby="$slots['end-text'] ? endTextId : undefined"
-      :indeterminate="props.indeterminate"
-    />
-    <span :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
-      ><slot></slot
-    ></span>
-    <span :id="endTextId" class="ui-end-text" v-if="$slots['end-text']">
-      <slot name="end-text"></slot>
-    </span>
-  </label>
-</template>
+<script setup lang="ts">
+import CheckboxInput from "./CheckboxInput.vue"
+import type { CheckboxProps, Slots } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<CheckboxProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-checkbox',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-stack': props.stack,
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <CheckboxInput
+      v-bind="$attrs"
+      v-model="modelValue"
+      :aria-describedby="$slots['end-text'] ? endTextId : undefined"
+      :indeterminate="props.indeterminate"
+    />
+    <span :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+      ><slot></slot
+    ></span>
+    <span :id="endTextId" class="ui-end-text" v-if="$slots['end-text']">
+      <slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

package/components/Checkbox/CheckboxInput.astro

@@ -1,16 +1,16 @@
----
-import type { CheckboxInputProps as Props } from "./types.astro"
-
-const { indeterminate, ...rest } = Astro.props as Props
----
-
-<input
-  type="checkbox"
-  data-indeterminate={indeterminate || undefined}
-  {...rest}
-/>
-
-<script>
-  import { initCheckbox } from "../../css/js/checkbox.js"
-  initCheckbox()
-</script>
+---
+import type { CheckboxInputProps as Props } from "./types.astro"
+
+const { indeterminate, ...rest } = Astro.props as Props
+---
+
+<input
+  type="checkbox"
+  data-indeterminate={indeterminate || undefined}
+  {...rest}
+/>
+
+<script>
+  import { initCheckbox } from "../../css/js/checkbox.js"
+  initCheckbox()
+</script>

package/components/Checkbox/CheckboxInput.vue

@@ -1,32 +1,32 @@
-<script setup lang="ts">
-import type { CheckboxInputProps } from "./types"
-import { useAttrs, useTemplateRef, watchPostEffect } from "vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const attrs = useAttrs()
-const props = defineProps<CheckboxInputProps>()
-const modelValue = defineModel<boolean | (string | number)[]>()
-
-const input = useTemplateRef<HTMLInputElement>("input")
-
-if (modelValue.value === undefined && attrs.checked !== undefined) {
-  modelValue.value = attrs.checked !== false
-}
-
-watchPostEffect(() => {
-  if (input.value) input.value.indeterminate = Boolean(props.indeterminate)
-})
-</script>
-
-<template>
-  <input
-    ref="input"
-    type="checkbox"
-    :data-indeterminate="props.indeterminate || undefined"
-    v-bind="$attrs"
-    v-model="modelValue"
-  />
-</template>
+<script setup lang="ts">
+import type { CheckboxInputProps } from "./types"
+import { useAttrs, useTemplateRef, watchPostEffect } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+const props = defineProps<CheckboxInputProps>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const input = useTemplateRef<HTMLInputElement>("input")
+
+if (modelValue.value === undefined && attrs.checked !== undefined) {
+  modelValue.value = attrs.checked !== false
+}
+
+watchPostEffect(() => {
+  if (input.value) input.value.indeterminate = Boolean(props.indeterminate)
+})
+</script>
+
+<template>
+  <input
+    ref="input"
+    type="checkbox"
+    :data-indeterminate="props.indeterminate || undefined"
+    v-bind="$attrs"
+    v-model="modelValue"
+  />
+</template>

package/components/Checkbox/types.astro.ts

@@ -1,8 +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">
+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

@@ -1,11 +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
-}
+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

@@ -1,9 +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">
+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

@@ -1,12 +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"]
+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

@@ -1,16 +1,16 @@
-export type CheckboxProps = {
-  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
-}
+export type CheckboxProps = {
+  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,31 +1,31 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Chip"
-
-const {
-  as: Tag = Astro.props.href ? "a" : "div",
-  class: className,
-  label,
-  multiline,
-  size,
-  variant = "tonal",
-  ...rest
-} = Astro.props
----
-
-<Tag
-  class:list={[
-    "ui-chip",
-    {
-      "ui-multiline": multiline,
-    },
-    size && `ui-${size}`,
-    variant && `ui-${variant}`,
-    className,
-  ]}
-  {...rest as any}
-  ><slot name="start" /><slot />{
-    label && <span class="ui-text">{label}</span>
-  }<slot name="end" /></Tag
->
+---
+import type { Props } from "./types.astro"
+
+export const title = "Chip"
+
+const {
+  as: Tag = Astro.props.href ? "a" : "div",
+  class: className,
+  label,
+  multiline,
+  size,
+  variant = "tonal",
+  ...rest
+} = Astro.props
+---
+
+<Tag
+  class:list={[
+    "ui-chip",
+    {
+      "ui-multiline": multiline,
+    },
+    size && `ui-${size}`,
+    variant && `ui-${variant}`,
+    className,
+  ]}
+  {...rest as any}
+  ><slot name="start" /><slot />{
+    label && <span class="ui-text">{label}</span>
+  }<slot name="end" /></Tag
+>

package/components/Chip/Chip.vue

@@ -1,37 +1,37 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import type { Props, Slots } from "./types.d.vue"
-
-const {
-  as,
-  label,
-  multiline,
-  size,
-  variant = "tonal",
-  href,
-} = defineProps<Props>()
-defineSlots<Slots>()
-
-const tag = computed(() => as || (href ? "a" : "div"))
-</script>
-
-<template>
-  <component
-    :is="tag"
-    :class="[
-      'ui-chip',
-      {
-        'ui-multiline': multiline,
-      },
-      size && `ui-${size}`,
-      variant && `ui-${variant}`,
-      $props.class,
-    ]"
-    :href="tag === 'a' ? href : undefined"
-  >
-    <slot name="start"></slot>
-    <slot></slot>
-    <span v-if="label" class="ui-text">{{ label }}</span>
-    <slot name="end"></slot>
-  </component>
-</template>
+<script setup lang="ts">
+import { computed } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const {
+  as,
+  label,
+  multiline,
+  size,
+  variant = "tonal",
+  href,
+} = defineProps<Props>()
+defineSlots<Slots>()
+
+const tag = computed(() => as || (href ? "a" : "div"))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="[
+      'ui-chip',
+      {
+        'ui-multiline': multiline,
+      },
+      size && `ui-${size}`,
+      variant && `ui-${variant}`,
+      $props.class,
+    ]"
+    :href="tag === 'a' ? href : undefined"
+  >
+    <slot name="start"></slot>
+    <slot></slot>
+    <span v-if="label" class="ui-text">{{ label }}</span>
+    <slot name="end"></slot>
+  </component>
+</template>

package/components/Chip/types.astro.ts

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

@@ -1,10 +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
-}
+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

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

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

@@ -1,13 +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
-}
+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
+}