opui-css 5.0.0 → 5.1.0

package/components/Dialog/Dialog.astro

@@ -1,41 +1,43 @@
----
-type Props = {
-  [key: string]: any
-  actionsAlign?: "start" | "end"
-  class?: string
-  closedby?: "any" | "closerequest" | "none"
-}
-
-export const title = "Dialog"
-
-const { actionsAlign, class: className, closedby, ...rest } = Astro.props
----
-
-<dialog
-  class:list={["ui-dialog ui-card ui-elevated", className]}
-  closedby={closedby}
-  {...rest}
->
-  {
-    Astro.slots.has("header") && (
-      <hgroup>
-        <slot name="header" />
-      </hgroup>
-    )
-  }
-  {
-    Astro.slots.has("content") && (
-      <div class="ui-content">
-        <slot name="content" />
-      </div>
-    )
-  }
-  <slot />
-  {
-    Astro.slots.has("actions") && (
-      <div class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}>
-        <slot name="actions" />
-      </div>
-    )
-  }
-</dialog>
+---
+type Props = {
+  [key: string]: any
+  actionsAlign?: "start" | "end"
+  class?: string
+  closedby?: "any" | "closerequest" | "none"
+}
+
+export const title = "Dialog"
+
+const { actionsAlign, class: className, closedby, ...rest } = Astro.props
+---
+
+<dialog
+  class:list={["ui-dialog ui-card ui-elevated", className]}
+  closedby={closedby}
+  {...rest}
+>
+  {
+    Astro.slots.has("header") && (
+      <hgroup>
+        <slot name="header" />
+      </hgroup>
+    )
+  }
+  {
+    Astro.slots.has("content") && (
+      <div class="ui-content">
+        <slot name="content" />
+      </div>
+    )
+  }
+  <slot />
+  {
+    Astro.slots.has("actions") && (
+      <div
+        class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}
+      >
+        <slot name="actions" />
+      </div>
+    )
+  }
+</dialog>

package/components/Divider/Divider.astro

@@ -1,17 +1,17 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-  variant?: "tonal" | "filled" | "primary"
-}
-
-export const title = "Divider"
-
-const { class: className, variant, ...rest } = Astro.props
-const variantClass = variant ? `border-${variant}` : ""
----
-
-<hr
-  class:list={["ui-divider", className, variantClass && `ui-${variantClass}`]}
-  {...rest}
-/>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  variant?: "tonal" | "filled" | "primary"
+}
+
+export const title = "Divider"
+
+const { class: className, variant, ...rest } = Astro.props
+const variantClass = variant ? `border-${variant}` : ""
+---
+
+<hr
+  class:list={["ui-divider", className, variantClass && `ui-${variantClass}`]}
+  {...rest}
+/>

package/components/Drawer/Drawer.astro

@@ -1,49 +1,49 @@
----
-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"
-}
-
-export const title = "Drawer"
-
-const {
-  backdrop = "blurred",
-  class: className,
-  closedby = "any",
-  id,
-  scrollLock = true,
-  side = "inline-start",
-  ...rest
-} = Astro.props
-
-const { $id } = Astro.locals
-const drawerId = id || $id("drawer")
----
-
-<dialog
-  closedby={closedby}
-  class:list={[
-    "ui-drawer",
-    side && `ui-${side}`,
-    {
-      "ui-backdrop-transparent": backdrop === "transparent",
-      "ui-scroll-lock": scrollLock,
-    },
-    className,
-  ]}
-  id={drawerId}
-  {...rest}
->
-  {Astro.slots.has("header") && <slot name="header" />}
-
-  <div class="ui-content">
-    <slot name="content" />
-  </div>
-
-  {Astro.slots.has("footer") && <slot name="footer" />}
-</dialog>
+---
+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"
+}
+
+export const title = "Drawer"
+
+const {
+  backdrop = "blurred",
+  class: className,
+  closedby = "any",
+  id,
+  scrollLock = true,
+  side = "inline-start",
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+const drawerId = id || $id("drawer")
+---
+
+<dialog
+  closedby={closedby}
+  class:list={[
+    "ui-drawer",
+    side && `ui-${side}`,
+    {
+      "ui-backdrop-transparent": backdrop === "transparent",
+      "ui-scroll-lock": scrollLock,
+    },
+    className,
+  ]}
+  id={drawerId}
+  {...rest}
+>
+  {Astro.slots.has("header") && <slot name="header" />}
+
+  <div class="ui-content">
+    <slot name="content" />
+  </div>
+
+  {Astro.slots.has("footer") && <slot name="footer" />}
+</dialog>

package/components/Drawer/DrawerFooter.astro

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

package/components/Drawer/DrawerHeader.astro

@@ -1,31 +1,31 @@
----
-import IconButton from "../IconButton/IconButton.astro"
-
-type Props = {
-  [key: string]: any
-  class?: string
-  heading?: string
-}
-
-export const title = "Drawer Header"
-
-const { class: className, heading, ...rest } = Astro.props
----
-
-<div class:list={["ui-header", className]} {...rest}>
-  {heading && <span>{heading}</span>}
-  <slot />
-  <IconButton onclick="this.closest('dialog').close()" title="Close">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
-    >
-      <path
-        fill="currentColor"
-        d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z"
-      ></path>
-    </svg>
-  </IconButton>
-</div>
+---
+import IconButton from "../IconButton/IconButton.astro"
+
+type Props = {
+  [key: string]: any
+  class?: string
+  heading?: string
+}
+
+export const title = "Drawer Header"
+
+const { class: className, heading, ...rest } = Astro.props
+---
+
+<div class:list={["ui-header", className]} {...rest}>
+  {heading && <span>{heading}</span>}
+  <slot />
+  <IconButton onclick="this.closest('dialog').close()" title="Close">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+    >
+      <path
+        fill="currentColor"
+        d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z"
+      ></path>
+    </svg>
+  </IconButton>
+</div>

package/components/FieldDescription/FieldDescription.astro

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

@@ -1,31 +1,31 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-  direction?: "row" | "column"
-  name?: string
-}
-
-export const title = "Field Group"
-
-const { class: className, direction, name, ...rest } = Astro.props
-
-const originalName = Astro.locals.currentFieldName
-if (name) {
-  Astro.locals.currentFieldName = name
-}
-
-let html = ""
-try {
-  html = await Astro.slots.render("default")
-} finally {
-  Astro.locals.currentFieldName = originalName
-}
----
-
-<div
-  class:list={["ui-field-group", direction && `ui-${direction}`, className]}
-  {...rest}
-  role="group"
-  set:html={html}
-/>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  direction?: "row" | "column"
+  name?: string
+}
+
+export const title = "Field Group"
+
+const { class: className, direction, name, ...rest } = Astro.props
+
+const originalName = Astro.locals.currentFieldName
+if (name) {
+  Astro.locals.currentFieldName = name
+}
+
+let html = ""
+try {
+  html = await Astro.slots.render("default")
+} finally {
+  Astro.locals.currentFieldName = originalName
+}
+---
+
+<div
+  class:list={["ui-field-group", direction && `ui-${direction}`, className]}
+  {...rest}
+  role="group"
+  set:html={html}
+/>

package/components/FieldLegend/FieldLegend.astro

@@ -1,15 +1,15 @@
----
-type Props = {
-  [key: string]: any
-  as?: "legend" | "p" | string
-  class?: string
-}
-
-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>
+---
+type Props = {
+  [key: string]: any
+  as?: "legend" | "p" | string
+  class?: string
+}
+
+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>

package/components/FieldSet/FieldSet.astro

@@ -1,15 +1,15 @@
----
-type Props = {
-  [key: string]: any
-  as?: "fieldset" | "div" | string
-  class?: string
-}
-
-export const title = "Field Set"
-
-const { as: Tag = "fieldset", class: className, ...rest } = Astro.props
----
-
-<Tag class:list={["ui-fieldset", className]} {...rest}>
-  <slot />
-</Tag>
+---
+type Props = {
+  [key: string]: any
+  as?: "fieldset" | "div" | string
+  class?: string
+}
+
+export const title = "Field Set"
+
+const { as: Tag = "fieldset", class: className, ...rest } = Astro.props
+---
+
+<Tag class:list={["ui-fieldset", className]} {...rest}>
+  <slot />
+</Tag>

package/components/Form/Form.astro

@@ -1,15 +1,15 @@
----
-type Props = {
-  [key: string]: any
-  as?: "form" | "div" | string
-  class?: string
-}
-
-export const title = "Form"
-
-const { as: Tag = "form", class: className, ...rest } = Astro.props
----
-
-<Tag class:list={["ui-form", className]} {...rest}>
-  <slot />
-</Tag>
+---
+type Props = {
+  [key: string]: any
+  as?: "form" | "div" | string
+  class?: string
+}
+
+export const title = "Form"
+
+const { as: Tag = "form", class: className, ...rest } = Astro.props
+---
+
+<Tag class:list={["ui-form", className]} {...rest}>
+  <slot />
+</Tag>

package/components/IconButton/IconButton.astro

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

package/components/List/List.astro

@@ -1,36 +1,36 @@
----
-type Props = {
-  bordered?: boolean
-  dense?: boolean
-  gutterless?: boolean
-  variant?: "default" | "tonal" | "transparent"
-  [key: string]: any
-}
-
-export const title = "List"
-
-const {
-  bordered,
-  class: className,
-  dense,
-  gutterless,
-  variant,
-  ...rest
-} = Astro.props
----
-
-<ul
-  class:list={[
-    "ui-list",
-    {
-      "ui-bordered": bordered,
-      "ui-dense": dense,
-      "ui-gutterless": gutterless,
-    },
-    variant && `ui-${variant}`,
-    className,
-  ]}
-  {...rest}
->
-  <slot />
-</ul>
+---
+type Props = {
+  bordered?: boolean
+  dense?: boolean
+  gutterless?: boolean
+  variant?: "default" | "tonal" | "transparent"
+  [key: string]: any
+}
+
+export const title = "List"
+
+const {
+  bordered,
+  class: className,
+  dense,
+  gutterless,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<ul
+  class:list={[
+    "ui-list",
+    {
+      "ui-bordered": bordered,
+      "ui-dense": dense,
+      "ui-gutterless": gutterless,
+    },
+    variant && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</ul>