opui-css 4.1.0 → 5.0.1

package/components/Anchor/Anchor.astro

@@ -1,51 +1,51 @@
----
-type Props = {
-  [key: string]: any
-  alignment?: string
-  class?: string
-  id?: string
-  trigger?: "always" | "hover"
-}
-
-export const title = "Anchor"
-
-const {
-  alignment,
-  class: className,
-  id: idProp,
-  trigger = "always",
-  ...rest
-} = Astro.props
-
-const isHover = trigger === "hover"
-const id = isHover ? (idProp ?? Astro.locals.$id("anchor")) : undefined
-
-const insetMap: Record<string, string> = {
-  "start start": "auto 100% 100% auto",
-  "start end": "auto auto 100% 100%",
-  "end start": "100% 100% auto auto",
-  "end end": "100% auto auto 100%",
-}
-
-const positionArea = alignment
-  ? {
-      "--anchor-position-area": alignment,
-      "--_anchor-inset": insetMap[alignment],
-    }
-  : {}
----
-
-<span class:list={["anchor", className]} style={positionArea} {...rest}>
-  {
-    isHover ? (
-      <span {...({ interestfor: id } as any)}>
-        <slot />
-      </span>
-    ) : (
-      <slot />
-    )
-  }
-  <span class="anchor-floating" id={id} popover={isHover ? "hint" : undefined}>
-    <slot name="anchored" />
-  </span>
-</span>
+---
+type Props = {
+  [key: string]: any
+  alignment?: string
+  class?: string
+  id?: string
+  trigger?: "always" | "hover"
+}
+
+export const title = "Anchor"
+
+const {
+  alignment,
+  class: className,
+  id: idProp,
+  trigger = "always",
+  ...rest
+} = Astro.props
+
+const isHover = trigger === "hover"
+const id = isHover ? (idProp ?? Astro.locals.$id("anchor")) : undefined
+
+const insetMap: Record<string, string> = {
+  "start start": "auto 100% 100% auto",
+  "start end": "auto auto 100% 100%",
+  "end start": "100% 100% auto auto",
+  "end end": "100% auto auto 100%",
+}
+
+const positionArea = alignment
+  ? {
+      "--anchor-position-area": alignment,
+      "--_anchor-inset": insetMap[alignment],
+    }
+  : {}
+---
+
+<span class:list={["ui-anchor", className]} style={positionArea} {...rest}>
+  {
+    isHover ? (
+      <span {...({ interestfor: id } as any)}>
+        <slot />
+      </span>
+    ) : (
+      <slot />
+    )
+  }
+  <span class="ui-anchor-floating" id={id} popover={isHover ? "hint" : undefined}>
+    <slot name="anchored" />
+  </span>
+</span>

package/components/Avatar/Avatar.astro

@@ -1,44 +1,38 @@
----
-type Props = {
-  [key: string]: any
-  alt?: string
-  as?: "div" | "a" | "button" | string
-  class?: string
-  href?: string
-  isGroup?: boolean
-  spacing?: "small" | "x-small"
-  src?: string
-  variant?: "squared" | "rounded" | "squircle"
-}
-
-export const title = "Avatar"
-
-const {
-  alt,
-  as,
-  class: className,
-  href,
-  isGroup,
-  spacing,
-  src,
-  variant,
-  ...rest
-} = Astro.props
-
-const Tag = as || (href ? "a" : "div")
----
-
-<!-- prettier-ignore -->
-<Tag
-  class:list={[
-    { avatar: !isGroup },
-    !isGroup && variant,
-    {
-      "gap-small": isGroup && spacing === "small",
-      "gap-x-small": isGroup && spacing === "x-small",
-    },
-    className,
-  ]}
-  href={href}
-  role={isGroup ? "group" : undefined}
-  {...rest}>{src ? <img src={src} alt={alt} /> : <slot />}</Tag>
+---
+type Props = {
+  [key: string]: any
+  alt?: string
+  as?: "div" | "a" | "button" | string
+  class?: string
+  href?: string
+  isGroup?: boolean
+  src?: string
+  variant?: "squared" | "rounded" | "squircle"
+}
+
+export const title = "Avatar"
+
+const {
+  alt,
+  as,
+  class: className,
+  href,
+  isGroup,
+  src,
+  variant,
+  ...rest
+} = Astro.props
+
+const Tag = as || (href ? "a" : "div")
+---
+
+<!-- prettier-ignore -->
+<Tag
+  class:list={[
+    { "ui-avatar": !isGroup },
+    !isGroup && variant && `ui-${variant}`,
+    className,
+  ]}
+  href={href}
+  role={isGroup ? "group" : undefined}
+  {...rest}>{src ? <img src={src} alt={alt} /> : <slot />}</Tag>

package/components/Badge/Badge.astro

@@ -1,54 +1,59 @@
----
-import Anchor from "../Anchor/Anchor.astro"
-
-type Props = {
-  [key: string]: any
-  alignment?: "start-start" | "end-start" | "end-end"
-  class?: string
-  color?: "critical" | "info" | "neutral" | "success" | "warning"
-  dot?: boolean
-  invisible?: boolean
-  label?: string | number
-}
-
-export const title = "Badge"
-
-const {
-  alignment,
-  class: className,
-  color,
-  dot,
-  invisible,
-  label,
-  ...rest
-} = Astro.props
-
-const positionArea =
-  alignment === "start-start"
-    ? "start start"
-    : alignment === "end-start"
-      ? "end start"
-      : alignment === "end-end"
-        ? "end end"
-        : undefined
----
-
-<Anchor
-  alignment={positionArea}
-  class:list={[
-    "badge",
-    {
-      dot,
-      invisible,
-    },
-    alignment,
-    className,
-    color,
-  ]}
-  {...rest}
->
-  <slot />
-  <span class="badge-indicator" slot="anchored" aria-label={label?.toString()}
-    >{dot ? "" : label}</span
-  >
-</Anchor>
+---
+import Anchor from "../Anchor/Anchor.astro"
+
+type Props = {
+  [key: string]: any
+  alignment?: "start-start" | "end-start" | "end-end"
+  class?: string
+  color?: "critical" | "info" | "neutral" | "success" | "warning"
+  dot?: boolean
+  invisible?: boolean
+  label?: string | number
+}
+
+export const title = "Badge"
+
+const {
+  alignment,
+  class: className,
+  color,
+  dot,
+  invisible,
+  label,
+  ...rest
+} = Astro.props
+
+const positionArea =
+  alignment === "start-start"
+    ? "start start"
+    : alignment === "end-start"
+      ? "end start"
+      : alignment === "end-end"
+        ? "end end"
+        : undefined
+---
+
+<Anchor
+  alignment={positionArea}
+  class:list={[
+    "ui-badge",
+    {
+      "ui-dot": dot,
+      "ui-invisible": invisible,
+    },
+    alignment && `ui-${alignment}`,
+    className,
+    color && `ui-${color}`,
+  ]}
+  {...rest}
+>
+  <slot />
+  <span
+    class="ui-badge-indicator"
+    slot="anchored"
+    aria-label={label?.toString()}
+  >
+    {dot ? "" : label}
+    {!dot && <slot name="indicator" />}
+  </span>
+</Anchor>

package/components/Button/Button.astro

@@ -1,45 +1,45 @@
----
-type CommonProps = {
-  [key: string]: any
-  as?: string
-  class?: string
-  color?: "critical" | "primary"
-  size?: "x-small" | "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
-}
-
-type AnchorProps = CommonProps & {
-  disabled?: never
-  href: string
-}
-
-type ButtonProps = CommonProps & {
-  disabled?: boolean
-  href?: undefined
-}
-
-type Props = AnchorProps | ButtonProps
-
-export const title = "Button"
-
-const {
-  as,
-  class: className,
-  color,
-  disabled,
-  href,
-  size,
-  variant,
-  ...rest
-} = Astro.props
-
-const Tag = as || (href ? "a" : "button")
-const isButton = Tag === "button"
----
-
-<!-- prettier-ignore -->
-<Tag
-  class:list={["button", { disabled: isButton && disabled }, size, variant, color, className]}
-  disabled={isButton ? disabled : undefined}
-  href={href}
-  {...rest}><slot /></Tag>
+---
+type CommonProps = {
+  [key: string]: any
+  as?: string
+  class?: string
+  color?: "critical" | "primary"
+  size?: "x-small" | "small" | "large"
+  variant?: "outlined" | "tonal" | "filled"
+}
+
+type AnchorProps = CommonProps & {
+  disabled?: never
+  href: string
+}
+
+type ButtonProps = CommonProps & {
+  disabled?: boolean
+  href?: undefined
+}
+
+type Props = AnchorProps | ButtonProps
+
+export const title = "Button"
+
+const {
+  as,
+  class: className,
+  color,
+  disabled,
+  href,
+  size,
+  variant,
+  ...rest
+} = Astro.props
+
+const Tag = as || (href ? "a" : "button")
+const isButton = Tag === "button"
+---
+
+<!-- prettier-ignore -->
+<Tag
+  class:list={["ui-button", { "ui-disabled": isButton && disabled }, size && `ui-${size}`, variant && `ui-${variant}`, color && `ui-${color}`, className]}
+  disabled={isButton ? disabled : undefined}
+  href={href}
+  {...rest}><slot /></Tag>

package/components/ButtonGroup/ButtonGroup.astro

@@ -1,29 +1,29 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-  color?: "critical" | "primary"
-  orientation?: "vertical"
-  size?: "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
-}
-
-export const title = "Button Group"
-
-const {
-  class: className,
-  color,
-  orientation,
-  size,
-  variant,
-  ...rest
-} = Astro.props
----
-
-<div
-  class:list={["button-group", color, size, variant, orientation, className]}
-  role="group"
-  {...rest}
->
-  <slot />
-</div>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  color?: "critical" | "primary"
+  orientation?: "vertical"
+  size?: "small" | "large"
+  variant?: "outlined" | "tonal" | "filled"
+}
+
+export const title = "Button Group"
+
+const {
+  class: className,
+  color,
+  orientation,
+  size,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<div
+  class:list={["ui-button-group", color && `ui-${color}`, size && `ui-${size}`, variant && `ui-${variant}`, orientation && `ui-${orientation}`, className]}
+  role="group"
+  {...rest}
+>
+  <slot />
+</div>

package/components/Callout/Callout.astro

@@ -1,75 +1,75 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-  severity?: "critical" | "info" | "neutral" | "success" | "warning"
-  variant?: "tonal" | "outlined"
-}
-
-export const title = "Callout"
-
-const { class: className, severity, variant, ...rest } = Astro.props
----
-
-<article
-  role="note"
-  class:list={["callout", variant, severity, className]}
-  {...rest}
->
-  <slot name="icon">
-    {
-      severity === "info" && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-        >
-          <path
-            fill="currentColor"
-            d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
-          />
-        </svg>
-      )
-    }
-    {
-      severity === "warning" && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-        >
-          <path
-            fill="currentColor"
-            d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
-          />
-        </svg>
-      )
-    }
-    {
-      severity === "critical" && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 48 48"
-        >
-          <path
-            fill="currentColor"
-            d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
-          />
-        </svg>
-      )
-    }
-  </slot>
-  <div class="content">
-    {
-      Astro.slots.has("title") && (
-        <!-- prettier-ignore -->
-        <h3 class="title"><slot name="title" /></h3>
-      )
-    }
-    <slot />
-  </div>
-</article>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  severity?: "critical" | "info" | "neutral" | "success" | "warning"
+  variant?: "tonal" | "outlined"
+}
+
+export const title = "Callout"
+
+const { class: className, severity, variant, ...rest } = Astro.props
+---
+
+<article
+  role="note"
+  class:list={["ui-callout", variant && `ui-${variant}`, severity && `ui-${severity}`, className]}
+  {...rest}
+>
+  <slot name="icon">
+    {
+      severity === "info" && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <path
+            fill="currentColor"
+            d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
+          />
+        </svg>
+      )
+    }
+    {
+      severity === "warning" && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <path
+            fill="currentColor"
+            d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
+          />
+        </svg>
+      )
+    }
+    {
+      severity === "critical" && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 48 48"
+        >
+          <path
+            fill="currentColor"
+            d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
+          />
+        </svg>
+      )
+    }
+  </slot>
+  <div class="ui-content">
+    {
+      Astro.slots.has("title") && (
+        <!-- prettier-ignore -->
+        <h3 class="ui-title"><slot name="title" /></h3>
+      )
+    }
+    <slot />
+  </div>
+</article>

package/components/Card/Card.astro

@@ -1,36 +1,36 @@
----
-type Props = {
-  actionsAlign?: "start" | "end"
-  variant?: "text" | "outlined" | "elevated" | "tonal"
-  [key: string]: any
-}
-
-export const title = "Card"
-
-const { variant, actionsAlign, class: className, ...rest } = Astro.props
----
-
-<div class:list={["card", variant, className]} {...rest}>
-  {
-    Astro.slots.has("header") && (
-      <hgroup>
-        <slot name="header" />
-      </hgroup>
-    )
-  }
-  {
-    Astro.slots.has("content") && (
-      <div class="content">
-        <slot name="content" />
-      </div>
-    )
-  }
-  <slot />
-  {
-    Astro.slots.has("actions") && (
-      <div class:list={["actions", actionsAlign && `align-${actionsAlign}`]}>
-        <slot name="actions" />
-      </div>
-    )
-  }
-</div>
+---
+type Props = {
+  actionsAlign?: "start" | "end"
+  variant?: "text" | "outlined" | "elevated" | "tonal"
+  [key: string]: any
+}
+
+export const title = "Card"
+
+const { variant, actionsAlign, class: className, ...rest } = Astro.props
+---
+
+<div class:list={["ui-card", variant && `ui-${variant}`, className]} {...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>
+    )
+  }
+</div>