opui-css 5.0.0 → 5.0.1

package/components/Checkbox/Checkbox.astro

@@ -1,76 +1,76 @@
----
-import CheckboxInput from "./CheckboxInput.astro"
-
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  class?: string
-  critical?: 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,
-  critical,
-  disabled,
-  hideLabel,
-  id,
-  indeterminate,
-  name,
-  required,
-  size,
-  spread,
-  stack,
-  value,
-  ...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={critical || 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>
-  {
-    Astro.slots.has("end-text") && (
-      <!-- prettier-ignore -->
-      <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
-    )
-  }
-</label>
+---
+import CheckboxInput from "./CheckboxInput.astro"
+
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  class?: string
+  critical?: 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,
+  critical,
+  disabled,
+  hideLabel,
+  id,
+  indeterminate,
+  name,
+  required,
+  size,
+  spread,
+  stack,
+  value,
+  ...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={critical || 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>
+  {
+    Astro.slots.has("end-text") && (
+      <!-- prettier-ignore -->
+      <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
+    )
+  }
+</label>

package/components/Checkbox/CheckboxInput.astro

@@ -1,32 +1,32 @@
----
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  disabled?: boolean
-  id?: string
-  indeterminate?: boolean
-  name?: string
-  required?: boolean
-  value?: string
-}
-
-const { checked, disabled, id, indeterminate, name, required, value, ...rest } =
-  Astro.props
----
-
-<input
-  type="checkbox"
-  data-indeterminate={indeterminate || undefined}
-  {checked}
-  {disabled}
-  {id}
-  {name}
-  {required}
-  {value}
-  {...rest}
-/>
-
-<script>
-  import { initCheckbox } from "../../css/js/checkbox.js"
-  initCheckbox()
-</script>
+---
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  disabled?: boolean
+  id?: string
+  indeterminate?: boolean
+  name?: string
+  required?: boolean
+  value?: string
+}
+
+const { checked, disabled, id, indeterminate, name, required, value, ...rest } =
+  Astro.props
+---
+
+<input
+  type="checkbox"
+  data-indeterminate={indeterminate || undefined}
+  {checked}
+  {disabled}
+  {id}
+  {name}
+  {required}
+  {value}
+  {...rest}
+/>
+
+<script>
+  import { initCheckbox } from "../../css/js/checkbox.js"
+  initCheckbox()
+</script>

package/components/Chip/Chip.astro

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

package/components/ClassicSelect/ClassicSelect.astro

@@ -1,83 +1,83 @@
----
-type Item = {
-  text: string
-  value: any
-}
-
-type Props = {
-  [key: string]: any
-  class?: string
-  disabled?: boolean
-  critical?: boolean
-  id?: string
-  items?: Item[]
-  label?: string
-  name?: string
-  required?: boolean
-  size?: "small"
-  endText?: string
-  value?: any
-  variant?: "outlined" | "filled"
-}
-
-export const title = "Classic Select"
-
-const {
-  class: className,
-  disabled,
-  critical,
-  id,
-  items = [],
-  label,
-  name,
-  required,
-  size,
-  endText,
-  value,
-  variant = "outlined",
-  ...rest
-} = Astro.props
-
-const { $id } = Astro.locals
-const selectId = id || $id("select")
-const labelId = $id("select-label")
----
-
-<label
-  class:list={[
-    "ui-select",
-    size && `ui-${size}`,
-    {
-      "ui-filled": variant === "filled",
-    },
-    className,
-  ]}
-  data-invalid={critical || undefined}
->
-  {
-    label && (
-      <!-- prettier-ignore -->
-      <span class="ui-label" id={labelId}>{label}</span>
-    )
-  }
-  <span class="ui-field">
-    <select
-      aria-labelledby={label ? labelId : undefined}
-      disabled={disabled}
-      id={selectId}
-      name={name}
-      required={required}
-      value={value}
-      {...rest}
-    >
-      {items.map((item) => <option value={item.value}>{item.text}</option>)}
-      <slot />
-    </select>
-  </span>
-  {
-    endText && (
-      <!-- prettier-ignore -->
-      <span class="ui-end-text">{endText}</span>
-    )
-  }
-</label>
+---
+type Item = {
+  text: string
+  value: any
+}
+
+type Props = {
+  [key: string]: any
+  class?: string
+  disabled?: boolean
+  critical?: boolean
+  id?: string
+  items?: Item[]
+  label?: string
+  name?: string
+  required?: boolean
+  size?: "small"
+  endText?: string
+  value?: any
+  variant?: "outlined" | "filled"
+}
+
+export const title = "Classic Select"
+
+const {
+  class: className,
+  disabled,
+  critical,
+  id,
+  items = [],
+  label,
+  name,
+  required,
+  size,
+  endText,
+  value,
+  variant = "outlined",
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+const selectId = id || $id("select")
+const labelId = $id("select-label")
+---
+
+<label
+  class:list={[
+    "ui-select",
+    size && `ui-${size}`,
+    {
+      "ui-filled": variant === "filled",
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+>
+  {
+    label && (
+      <!-- prettier-ignore -->
+      <span class="ui-label" id={labelId}>{label}</span>
+    )
+  }
+  <span class="ui-field">
+    <select
+      aria-labelledby={label ? labelId : undefined}
+      disabled={disabled}
+      id={selectId}
+      name={name}
+      required={required}
+      value={value}
+      {...rest}
+    >
+      {items.map((item) => <option value={item.value}>{item.text}</option>)}
+      <slot />
+    </select>
+  </span>
+  {
+    endText && (
+      <!-- prettier-ignore -->
+      <span class="ui-end-text">{endText}</span>
+    )
+  }
+</label>

package/components/DescriptionList/Description.astro

@@ -1,12 +1,12 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-}
-
-const { class: className, ...rest } = Astro.props
----
-
-<dd class:list={["ui-description", className]} {...rest}>
-  <slot />
-</dd>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<dd class:list={["ui-description", className]} {...rest}>
+  <slot />
+</dd>

package/components/DescriptionList/DescriptionList.astro

@@ -1,22 +1,22 @@
----
-type Props = {
-  [key: string]: any
-  bordered?: boolean | "dotted"
-  class?: string
-}
-
-export const title = "Description List"
-
-const { bordered, class: className, ...rest } = Astro.props
----
-
-<dl
-  class:list={[
-    "ui-description-list",
-    { "ui-bordered": bordered, "ui-dotted": bordered === "dotted" },
-    className,
-  ]}
-  {...rest}
->
-  <slot />
-</dl>
+---
+type Props = {
+  [key: string]: any
+  bordered?: boolean | "dotted"
+  class?: string
+}
+
+export const title = "Description List"
+
+const { bordered, class: className, ...rest } = Astro.props
+---
+
+<dl
+  class:list={[
+    "ui-description-list",
+    { "ui-bordered": bordered, "ui-dotted": bordered === "dotted" },
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</dl>

package/components/DescriptionList/Item.astro

@@ -1,12 +1,12 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-}
-
-const { class: className, ...rest } = Astro.props
----
-
-<div class:list={["ui-item", className]} {...rest}>
-  <slot />
-</div>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={["ui-item", className]} {...rest}>
+  <slot />
+</div>

package/components/DescriptionList/Term.astro

@@ -1,12 +1,12 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-}
-
-const { class: className, ...rest } = Astro.props
----
-
-<dt class:list={["ui-term", className]} {...rest}>
-  <slot />
-</dt>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<dt class:list={["ui-term", className]} {...rest}>
+  <slot />
+</dt>

package/components/DescriptionList/index.ts

@@ -1,12 +1,12 @@
-import DescriptionList from "./DescriptionList.astro"
-import Item from "./Item.astro"
-import Term from "./Term.astro"
-import Description from "./Description.astro"
-
-export { Item, Term, Description }
-
-export default Object.assign(DescriptionList, {
-  Item,
-  Term,
-  Description,
-})
+import DescriptionList from "./DescriptionList.astro"
+import Item from "./Item.astro"
+import Term from "./Term.astro"
+import Description from "./Description.astro"
+
+export { Item, Term, Description }
+
+export default Object.assign(DescriptionList, {
+  Item,
+  Term,
+  Description,
+})