@plexui/ui 0.2.0

package/dist/es/components/Avatar/Avatar.module.css

@@ -0,0 +1,168 @@
+@layer components {.Avatar {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: var(--avatar-radius);
+  transition: background-color 0.3s var(--cubic-enter);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  /* Interactive */
+  .Avatar[type="button"] {
+    cursor: pointer;
+  }
+
+    .Avatar[type="button"]:focus-visible {
+      outline: 2px solid var(--avatar-ring-color);
+      outline-offset: 2px;
+    }
+
+  .Avatar[data-variant="soft"] {
+    background-color: var(--avatar-background-color);
+    color: var(--avatar-text-color);
+  }
+
+    .Avatar[data-variant="soft"]:where([data-color="primary"]) {
+      --avatar-background-color: var(--color-background-primary-soft);
+      --avatar-text-color: var(--color-text-primary-soft);
+      --avatar-ring-color: var(--color-ring-primary-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="secondary"]) {
+      --avatar-background-color: var(--color-background-secondary-soft);
+      --avatar-text-color: var(--color-text-secondary-soft);
+      --avatar-ring-color: var(--color-ring-secondary-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="discovery"]) {
+      --avatar-background-color: var(--color-background-discovery-soft);
+      --avatar-text-color: var(--color-text-discovery-soft);
+      --avatar-ring-color: var(--color-ring-discovery-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="info"]) {
+      --avatar-background-color: var(--color-background-info-soft);
+      --avatar-text-color: var(--color-text-info-soft);
+      --avatar-ring-color: var(--color-ring-info-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="success"]) {
+      --avatar-background-color: var(--color-background-success-soft);
+      --avatar-text-color: var(--color-text-success-soft);
+      --avatar-ring-color: var(--color-ring-success-soft);
+    }
+
+    .Avatar[data-variant="soft"]:where([data-color="danger"]) {
+      --avatar-background-color: var(--color-background-danger-soft);
+      --avatar-text-color: var(--color-text-danger-soft);
+      --avatar-ring-color: var(--color-ring-danger-soft);
+    }
+
+  .Avatar[data-variant="solid"] {
+    background-color: var(--avatar-background-color);
+    color: var(--avatar-text-color);
+  }
+
+    .Avatar[data-variant="solid"]:where([data-color="primary"]) {
+      --avatar-background-color: var(--color-background-primary-solid);
+      --avatar-text-color: var(--color-text-primary-solid);
+      --avatar-ring-color: var(--color-ring-primary-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="secondary"]) {
+      --avatar-background-color: var(--color-background-secondary-solid);
+      --avatar-text-color: var(--color-text-secondary-solid);
+      --avatar-ring-color: var(--color-ring-secondary-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="discovery"]) {
+      --avatar-background-color: var(--color-background-discovery-solid);
+      --avatar-text-color: var(--color-text-discovery-solid);
+      --avatar-ring-color: var(--color-ring-discovery-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="info"]) {
+      --avatar-background-color: var(--color-background-info-solid);
+      --avatar-text-color: var(--color-text-info-solid);
+      --avatar-ring-color: var(--color-ring-info-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="success"]) {
+      --avatar-background-color: var(--color-background-success-solid);
+      --avatar-text-color: var(--color-text-success-solid);
+      --avatar-ring-color: var(--color-ring-success-solid);
+    }
+
+    .Avatar[data-variant="solid"]:where([data-color="danger"]) {
+      --avatar-background-color: var(--color-background-danger-solid);
+      --avatar-text-color: var(--color-text-danger-solid);
+      --avatar-ring-color: var(--color-ring-danger-solid);
+    }/*
+ * Images with low contrast backgrounds should have clear edges,
+ * but this border should not impact the size of the image, or
+ * create fringed edges on various background colors. Using a transparency
+ * on top of the image ensures crisp edges while also solving the issue of low contrast backgrounds.
+ */.AvatarImageContainer {
+  border-radius: inherit;
+}
+
+  .AvatarImageContainer::after {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border: 1px solid var(--avatar-image-border-color);
+    border-radius: inherit;
+    content: "";
+    pointer-events: none;
+  }.AvatarImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  -o-object-fit: cover;
+     object-fit: cover;
+  opacity: 0;
+  /* Prevent awkward dragging of the image */
+  pointer-events: none;
+  transition: 0.15s ease;
+}
+
+  .AvatarImage[data-loaded] {
+    opacity: 1;
+  }.AvatarInitial {
+  font-size: calc(var(--avatar-size) * var(--avatar-font-size-scaling));
+  font-weight: var(--font-weight-semibold);
+}.AvatarOverflowCount {
+  font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-three));
+  font-weight: var(--font-weight-semibold);
+}
+
+  .AvatarOverflowCount[data-letter-count="2"] {
+    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-two));
+  }
+
+  .AvatarOverflowCount[data-letter-count="1"] {
+    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-one));
+  }/*
+ * The "+" sits very low in the baseline - this lifts it up 1px per 24px of size
+ */.AvatarOverflowCountSymbol {
+  position: relative;
+  top: calc(-1 * var(--avatar-size) / 24);
+  margin-left: -1px;
+}.AvatarIcon {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: calc(var(--avatar-size) * 0.7);
+}
+}

package/dist/es/components/Avatar/AvatarGroup.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Children, cloneElement, isValidElement } from "react";
+import { toCssVariables } from "../../lib/helpers";
+import s from "./AvatarGroup.module.css";
+export const AvatarGroup = ({ className, stack = "start", size, children }) => {
+    const childrenArray = Children.toArray(children);
+    // Conditionally reverse the array depending on desired stacking priority
+    const maybeReversedChildren = stack === "start" ? childrenArray.slice().reverse() : childrenArray;
+    return (_jsx("div", { className: clsx(s.Group, className), "data-stack": stack, style: toCssVariables({
+            "avatar-size": size,
+        }), children: maybeReversedChildren.map((child) => (isValidElement(child) ? cloneElement(child) : child)) }));
+};
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/es/components/Avatar/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../src/components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAkB,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAexC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAoB,EAAE,EAAE;IAC9F,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;IAChD,yEAAyE;IACzE,MAAM,qBAAqB,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,aAAa,CAAA;IAEjG,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,gBACvB,KAAK,EACjB,KAAK,EAAE,cAAc,CAAC;YACpB,aAAa,EAAE,IAAI;SACpB,CAAC,YAED,qBAAqB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GACxF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport { Children, cloneElement, isValidElement, type ReactNode } from \"react\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport s from \"./AvatarGroup.module.css\"\n\nexport type AvatarGroupProps = {\n  /** Class name passed to the group container */\n  className?: string\n  /**\n   * Determines stacking layer order\n   * @default start\n   */\n  stack?: \"start\" | \"end\"\n  /** Size all avatars in the group, in pixels. */\n  size?: number\n  children: ReactNode\n}\n\nexport const AvatarGroup = ({ className, stack = \"start\", size, children }: AvatarGroupProps) => {\n  const childrenArray = Children.toArray(children)\n  // Conditionally reverse the array depending on desired stacking priority\n  const maybeReversedChildren = stack === \"start\" ? childrenArray.slice().reverse() : childrenArray\n\n  return (\n    <div\n      className={clsx(s.Group, className)}\n      data-stack={stack}\n      style={toCssVariables({\n        \"avatar-size\": size,\n      })}\n    >\n      {maybeReversedChildren.map((child) => (isValidElement(child) ? cloneElement(child) : child))}\n    </div>\n  )\n}\n"]}

package/dist/es/components/Avatar/AvatarGroup.module.css

@@ -0,0 +1,26 @@
+@layer components {.Group {
+  display: flex;
+}
+
+  .Group > * ~ * {
+    box-shadow: 0 0 0 var(--avatar-group-cutout-width) var(--avatar-group-cutout-color);
+
+    /*
+     * Mask approach avoids the need to apply a specific color, however:
+     * -radial masks currently have very harsh anti-aliasing
+     * - sizing must be set statically, and cannot use % sizing. You trade one imperative value for another.
+     * mask-image: radial-gradient(circle 22px at -15px, transparent 99%, #fff 100%);
+     */
+  }
+
+  .Group[data-stack="start"] {
+    flex-direction: row-reverse;
+  }
+
+    .Group[data-stack="start"] > * ~ * {
+      margin-inline-end: var(--avatar-group-spacing);
+    }
+    .Group[data-stack="end"] > * ~ * {
+      margin-inline-start: var(--avatar-group-spacing);
+    }
+}

package/dist/es/components/Avatar/index.js

@@ -0,0 +1,3 @@
+export { Avatar } from "./Avatar";
+export { AvatarGroup } from "./AvatarGroup";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA","sourcesContent":["export { Avatar, type AvatarProps } from \"./Avatar\"\nexport { AvatarGroup, type AvatarGroupProps } from \"./AvatarGroup\"\n"]}

package/dist/es/components/Badge/Badge.module.css

@@ -0,0 +1,196 @@
+@layer components {.Badge {
+  --indicator-size: var(--badge-indicator-size);
+
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+  height: var(--badge-size);
+  padding: 0 var(--badge-gutter);
+  border-radius: var(--badge-radius);
+  font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  letter-spacing: var(--badge-tracking);
+  white-space: nowrap;
+}
+
+  .Badge svg {
+    font-size: var(--badge-icon-font-size);
+  }
+
+    :where(.Badge svg:first-child:not(:only-child)) {
+      margin-left: var(--badge-icon-offset, -1px);
+    }
+
+    :where(.Badge svg:last-child:not(:only-child)) {
+      margin-right: var(--badge-icon-offset, -1px);
+    }
+
+  /* =============================================
+    Variants
+  ============================================= */
+  .Badge[data-variant="soft"] {
+    background-color: var(--badge-background-color);
+    color: var(--badge-text-color);
+  }
+
+    .Badge[data-variant="soft"]:where([data-color="secondary"]) {
+      --badge-background-color: var(--color-background-secondary-soft-alpha);
+      --badge-text-color: var(--color-text-secondary-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="success"]) {
+      --badge-background-color: var(--color-background-success-soft-alpha);
+      --badge-text-color: var(--color-text-success-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="warning"]) {
+      --badge-background-color: var(--color-background-warning-soft-alpha);
+      --badge-text-color: var(--color-text-warning-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="danger"]) {
+      --badge-background-color: var(--color-background-danger-soft-alpha);
+      --badge-text-color: var(--color-text-danger-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="info"]) {
+      --badge-background-color: var(--color-background-info-soft-alpha);
+      --badge-text-color: var(--color-text-info-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="discovery"]) {
+      --badge-background-color: var(--color-background-discovery-soft-alpha);
+      --badge-text-color: var(--color-text-discovery-soft);
+    }
+
+    .Badge[data-variant="soft"]:where([data-color="caution"]) {
+      --badge-background-color: var(--color-background-caution-soft-alpha);
+      --badge-text-color: var(--color-text-caution-soft);
+    }
+
+  .Badge[data-variant="solid"] {
+    background-color: var(--badge-background-color);
+    color: var(--badge-text-color);
+  }
+
+    .Badge[data-variant="solid"]:where([data-color="secondary"]) {
+      --badge-background-color: var(--color-background-secondary-solid);
+      --badge-text-color: var(--color-text-secondary-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="success"]) {
+      --badge-background-color: var(--color-background-success-solid);
+      --badge-text-color: var(--color-text-success-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="warning"]) {
+      --badge-background-color: var(--color-background-warning-solid);
+      --badge-text-color: var(--color-text-warning-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="danger"]) {
+      --badge-background-color: var(--color-background-danger-solid);
+      --badge-text-color: var(--color-text-danger-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="info"]) {
+      --badge-background-color: var(--color-background-info-solid);
+      --badge-text-color: var(--color-text-info-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="discovery"]) {
+      --badge-background-color: var(--color-background-discovery-solid);
+      --badge-text-color: var(--color-text-discovery-solid);
+    }
+
+    .Badge[data-variant="solid"]:where([data-color="caution"]) {
+      --badge-background-color: var(--color-background-caution-solid);
+      --badge-text-color: var(--color-text-caution-solid);
+    }
+
+  .Badge[data-variant="outline"] {
+    /* Avoids additive `width` compared to other variants */
+    box-shadow: 0 0 0 1px var(--badge-border-color) inset;
+    color: var(--badge-text-color);
+  }
+
+    .Badge[data-variant="outline"]:where([data-color="secondary"]) {
+      --badge-border-color: var(--color-border-secondary-outline);
+      --badge-text-color: var(--color-text-secondary-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="success"]) {
+      --badge-border-color: var(--color-border-success-outline);
+      --badge-text-color: var(--color-text-success-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="warning"]) {
+      --badge-border-color: var(--color-border-warning-outline);
+      --badge-text-color: var(--color-text-warning-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="danger"]) {
+      --badge-border-color: var(--color-border-danger-outline);
+      --badge-text-color: var(--color-text-danger-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="info"]) {
+      --badge-border-color: var(--color-border-info-outline);
+      --badge-text-color: var(--color-text-info-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="discovery"]) {
+      --badge-border-color: var(--color-border-discovery-outline);
+      --badge-text-color: var(--color-text-discovery-outline);
+    }
+
+    .Badge[data-variant="outline"]:where([data-color="caution"]) {
+      --badge-border-color: var(--color-border-caution-outline);
+      --badge-text-color: var(--color-text-caution-outline);
+    }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  .Badge:where([data-size="sm"]) {
+    --badge-size: var(--badge-size-sm);
+    --badge-gutter: var(--badge-gutter-sm);
+    --badge-font-size: var(--badge-font-size-sm);
+    --badge-font-weight: var(--badge-font-weight-sm);
+    --badge-tracking: var(--badge-tracking-sm);
+    --badge-radius: var(--badge-radius-sm);
+    --badge-icon-font-size: var(--badge-icon-font-size-sm);
+    --badge-indicator-size: var(--badge-indicator-size-sm);
+  }
+
+  .Badge:where([data-size="md"]) {
+    --badge-size: var(--badge-size-md);
+    --badge-gutter: var(--badge-gutter-md);
+    --badge-font-size: var(--badge-font-size-md);
+    --badge-font-weight: var(--badge-font-weight-md);
+    --badge-tracking: var(--badge-tracking-md);
+    --badge-radius: var(--badge-radius-md);
+    --badge-icon-font-size: var(--badge-icon-font-size-md);
+    --badge-indicator-size: var(--badge-indicator-size-md);
+  }
+
+  .Badge:where([data-size="lg"]) {
+    --badge-size: var(--badge-size-lg);
+    --badge-gutter: var(--badge-gutter-lg);
+    --badge-font-size: var(--badge-font-size-lg);
+    --badge-font-weight: var(--badge-font-weight-lg);
+    --badge-tracking: var(--badge-tracking-lg);
+    --badge-radius: var(--badge-radius-lg);
+    --badge-icon-font-size: var(--badge-icon-font-size-lg);
+    --badge-indicator-size: var(--badge-indicator-size-lg);
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  .Badge:where([data-pill]) {
+    --badge-radius: var(--radius-full);
+
+    padding: 0 calc(var(--badge-gutter) * var(--control-gutter-pill-scaling));
+  }
+}

package/dist/es/components/Badge/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import { wrapTextNodeSiblings } from "../../lib/renderHelpers";
+import {} from "../../types";
+import s from "./Badge.module.css";
+export const Badge = ({ children, className, variant = "soft", color = "secondary", size = "sm", pill, ...restMaybeAsChildProps }) => {
+    return (_jsx("div", { className: clsx(s.Badge, className), "data-color": color, "data-size": size, "data-pill": pill ? "" : undefined, "data-variant": variant, ...restMaybeAsChildProps, children: wrapTextNodeSiblings(children) }));
+};
+//# sourceMappingURL=index.js.map

package/dist/es/components/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Badge/index.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAkD,MAAM,aAAa,CAAA;AAC5E,OAAO,CAAC,MAAM,oBAAoB,CAAA;AAmClC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,WAAW,EACnB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,GAAG,qBAAqB,EACb,EAAE,EAAE;IACf,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,gBACvB,KAAK,eACN,IAAI,eACJ,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAClB,OAAO,KACjB,qBAAqB,YAExB,oBAAoB,CAAC,QAAQ,CAAC,GAC3B,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport { type ReactNode } from \"react\"\nimport { wrapTextNodeSiblings } from \"../../lib/renderHelpers\"\nimport { type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport s from \"./Badge.module.css\"\n\nexport type BadgeProps = {\n  /** Content rendered inside the badge */\n  children: ReactNode\n  /** Class applied to the badge */\n  className?: string\n  /**\n   * Visual style of the badge\n   * @default soft\n   */\n  variant?: Variants<\"solid\" | \"soft\" | \"outline\">\n  /**\n   * Size scale of the badge\n   *\n   * | sm      | md      | lg      |\n   * | ------- | ------- | ------- |\n   * | `20px`  | `22px`  | `24px`  |\n   * @default sm\n   */\n  size?: Sizes<\"sm\" | \"md\" | \"lg\">\n  /**\n   * Determines if the badge should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Color of the badge, related to its meaning or intent\n   * @default secondary\n   */\n  color?: SemanticColors<\n    \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"discovery\" | \"caution\"\n  >\n}\n\nexport const Badge = ({\n  children,\n  className,\n  variant = \"soft\",\n  color = \"secondary\",\n  size = \"sm\",\n  pill,\n  ...restMaybeAsChildProps\n}: BadgeProps) => {\n  return (\n    <div\n      className={clsx(s.Badge, className)}\n      data-color={color}\n      data-size={size}\n      data-pill={pill ? \"\" : undefined}\n      data-variant={variant}\n      {...restMaybeAsChildProps}\n    >\n      {wrapTextNodeSiblings(children)}\n    </div>\n  )\n}\n"]}

package/dist/es/components/Button/Button.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCallback, } from "react";
+import { handlePressableMouseEnter } from "../../lib/helpers";
+import { wrapTextNodeSiblings } from "../../lib/renderHelpers";
+import {} from "../../types";
+import { LoadingIndicator } from "../Indicator";
+import { useLinkComponent } from "../PlexUIProvider/internal";
+import { TransitionGroup } from "../Transition/TransitionGroup";
+import s from "./Button.module.css";
+export const Button = (props) => {
+    const { type = "button", color = "primary", variant = "solid", pill = true, uniform = false, size = "md", iconSize, gutterSize, loading, selected, block, opticallyAlign, children, className, onClick, disabled, disabledTone, 
+    // Defaults to `loading` state
+    inert = loading, ...restProps } = props;
+    const isInert = disabled || inert;
+    const handleClick = useCallback((e) => {
+        if (disabled) {
+            return;
+        }
+        onClick?.(e);
+    }, [onClick, disabled]);
+    return (_jsxs("button", { type: type, className: clsx(s.Button, className), "data-color": color, "data-variant": variant, "data-pill": pill ? "" : undefined, "data-uniform": uniform ? "" : undefined, "data-size": size, "data-gutter-size": gutterSize, "data-icon-size": iconSize, "data-loading": loading ? "" : undefined, "data-selected": selected ? "" : undefined, "data-block": block ? "" : undefined, "data-optically-align": opticallyAlign, onPointerEnter: handlePressableMouseEnter, 
+        // Non-visual, accessible disablement
+        // NOTE: Do not use literal `inert` because that is incorrect semantically
+        disabled: isInert, "aria-disabled": isInert, tabIndex: isInert ? -1 : undefined, "data-disabled": disabled ? "" : undefined, "data-disabled-tone": disabled ? disabledTone : undefined, onClick: handleClick, ...restProps, children: [_jsx(TransitionGroup, { className: s.ButtonLoader, enterDuration: 250, exitDuration: 150, children: loading && _jsx(LoadingIndicator, {}, "loader") }), _jsx("span", { className: s.ButtonInner, children: wrapTextNodeSiblings(children) })] }));
+};
+export const ButtonLink = ((props) => {
+    const { color = "primary", variant = "solid", pill = true, size = "md", gutterSize, iconSize, external, block, opticallyAlign, children, className, disabled, disabledTone, onClick, onPointerEnter, as: OverrideComponent, href, to, ...restProps } = props;
+    const isExternal = external ?? /^https?:\/\//.test(href ?? to ?? "");
+    const DefaultComponent = useLinkComponent();
+    const LinkComponent = OverrideComponent || (isExternal ? "a" : DefaultComponent);
+    const sharedProps = {
+        "className": clsx(s.Button, className),
+        disabled,
+        "aria-disabled": disabled,
+        "tabIndex": disabled ? -1 : undefined,
+        // Visual disablement (inert not supported in links, always applied)
+        "data-disabled": disabled ? "" : undefined,
+        "data-disabled-tone": disabled ? disabledTone : undefined,
+        "data-color": color,
+        "data-variant": variant,
+        "data-pill": pill ? "" : undefined,
+        "data-block": block ? "" : undefined,
+        "data-optically-align": opticallyAlign,
+        "data-size": size,
+        "data-gutter-size": gutterSize,
+        "data-icon-size": iconSize,
+        "onClick": disabled ? undefined : onClick,
+        "onPointerEnter": (evt) => {
+            handlePressableMouseEnter(evt);
+            onPointerEnter?.(evt);
+        },
+    };
+    if (disabled) {
+        // Don't thread down stuff that isn't valid for a span - just keep the event handlers
+        const eventProps = Object.fromEntries(Object.entries(restProps).filter(([key, value]) => key.startsWith("on") && typeof value === "function"));
+        return (_jsx("span", { role: "link", ...sharedProps, ...eventProps, children: _jsx("span", { className: s.ButtonInner, children: wrapTextNodeSiblings(children) }) }));
+    }
+    const linkProps = {
+        ...(isExternal
+            ? { target: "_blank", rel: "noopener noreferrer", href: href ?? to }
+            : { href, to }),
+        ...sharedProps,
+        ...restProps,
+    };
+    return (_jsx(LinkComponent, { ...linkProps, children: _jsx("span", { className: s.ButtonInner, children: wrapTextNodeSiblings(children) }) }));
+});
+//# sourceMappingURL=Button.js.map

package/dist/es/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport {\n  type ButtonHTMLAttributes,\n  type ComponentProps,\n  type ComponentType,\n  type MouseEventHandler,\n  type ReactNode,\n  useCallback,\n} from \"react\"\nimport { handlePressableMouseEnter } from \"../../lib/helpers\"\nimport { wrapTextNodeSiblings } from \"../../lib/renderHelpers\"\nimport { type ControlSize, type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport { LoadingIndicator } from \"../Indicator\"\nimport { useLinkComponent } from \"../PlexUIProvider/internal\"\nimport { TransitionGroup } from \"../Transition/TransitionGroup\"\nimport s from \"./Button.module.css\"\n\ntype CommonProps = {\n  /**\n   * Color for the button\n   * @default secondary\n   */\n  color: SemanticColors<\n    \"primary\" | \"secondary\" | \"danger\" | \"success\" | \"info\" | \"discovery\" | \"caution\" | \"warning\"\n  >\n  /**\n   * Style variant for the Button\n   * @default \"solid\"\n   */\n  variant?: Variants<\"solid\" | \"soft\" | \"outline\" | \"ghost\">\n  /**\n   * Determines if the button should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Disables the button visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Controls the visual tone when the button is disabled. \"relaxed\" will use a default cursor instead of not-allowed.\n   */\n  disabledTone?: \"relaxed\"\n  /**\n   * Determines if the button should take up 100% of available width\n   * @default false\n   */\n  block?: boolean\n  /**\n   * Applies a negative margin using the current gutter to optically align the button\n   * with surrounding content.\n   */\n  opticallyAlign?: \"start\" | \"end\"\n  /**\n   * Controls size of the button, specifically height, but also includes defaults for `gutterSize`, `iconSize`, `font-size`, etc.\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   * @default md\n   */\n  size?: ControlSize\n  /**\n   * Controls the size of icons within the button, defaults to value from `size`.\n   *\n   * | xs     | sm     | md     | lg     | xl     | 2xl    |\n   * | ------ | ------ | ------ | ------ | ------ | ------ |\n   * | `14px` | `16px` | `18px` | `20px` | `22px` | `24px` |\n   */\n  iconSize?: Sizes<\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\">\n  /**\n   * Controls gutter on the edges of the button, defaults to value from `size`.\n   *\n   * | 3xs    | 2xs    | xs     | sm     | md     | lg     | xl     |\n   * | ------ | ------ | ------ | ------ | ------ | ------ | ------ |\n   * | `4px`  | `6px`  | `8px`  | `10px` | `12px` | `14px` | `16px` |\n   */\n  gutterSize?: Sizes<\"3xs\" | \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n  /** Custom class applied to the Button element */\n  className?: string\n  /** Content rendered inside of the Button */\n  children: React.ReactNode\n}\n\nexport type ButtonProps = CommonProps & {\n  /**\n   * Determines if the button should have matching width and height, based on the `size`.\n   * @default false\n   */\n  uniform?: boolean\n  /**\n   * Displays selected styles on the button, varying by `variant\n   * @default false\n   */\n  selected?: boolean\n  /**\n   * Displays loading indicator on top of button contents\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * Determines whether the button should be made inert, without introducing visual change.\n   * @default false\n   */\n  inert?: boolean\n  /** Ref for the button */\n  ref?: React.Ref<HTMLButtonElement | null>\n} & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const Button = (props: ButtonProps) => {\n  const {\n    type = \"button\",\n    color = \"primary\",\n    variant = \"solid\",\n    pill = true,\n    uniform = false,\n    size = \"md\",\n    iconSize,\n    gutterSize,\n    loading,\n    selected,\n    block,\n    opticallyAlign,\n    children,\n    className,\n    onClick,\n    disabled,\n    disabledTone,\n    // Defaults to `loading` state\n    inert = loading,\n    ...restProps\n  } = props\n\n  const isInert = disabled || inert\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      if (disabled) {\n        return\n      }\n      onClick?.(e)\n    },\n    [onClick, disabled],\n  )\n\n  return (\n    <button\n      type={type}\n      className={clsx(s.Button, className)}\n      data-color={color}\n      data-variant={variant}\n      data-pill={pill ? \"\" : undefined}\n      data-uniform={uniform ? \"\" : undefined}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      data-icon-size={iconSize}\n      data-loading={loading ? \"\" : undefined}\n      data-selected={selected ? \"\" : undefined}\n      data-block={block ? \"\" : undefined}\n      data-optically-align={opticallyAlign}\n      onPointerEnter={handlePressableMouseEnter}\n      // Non-visual, accessible disablement\n      // NOTE: Do not use literal `inert` because that is incorrect semantically\n      disabled={isInert}\n      aria-disabled={isInert}\n      tabIndex={isInert ? -1 : undefined}\n      // Visual disablement\n      data-disabled={disabled ? \"\" : undefined}\n      data-disabled-tone={disabled ? disabledTone : undefined}\n      onClick={handleClick}\n      {...restProps}\n    >\n      <TransitionGroup className={s.ButtonLoader} enterDuration={250} exitDuration={150}>\n        {loading && <LoadingIndicator key=\"loader\" />}\n      </TransitionGroup>\n      <span className={s.ButtonInner}>{wrapTextNodeSiblings(children)}</span>\n    </button>\n  )\n}\n\ntype ButtonLink = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends ComponentType<any> | \"a\" = PlexUI.LinkComponent,\n>(\n  props: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> &\n    CommonProps & {\n      /**\n       * Explicity specify that the link is an external link. This should be\n       * automatically detected based on the URL, but in some cases (e.g.\n       * my-app://foo) you may want to explicitly set this.\n       */\n      external?: boolean\n      /**\n       * Override the default component used for the link. This is useful for\n       * using a routing library, or SSR rendering.\n       * purposes.\n       *\n       * @default 'a'\n       */\n      as?: T\n    } & ComponentProps<T>,\n) => ReactNode\n\nexport const ButtonLink = ((\n  props: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> &\n    CommonProps & {\n      href?: string\n      to?: string\n      external?: boolean\n      as?: PlexUI.LinkComponent\n    },\n) => {\n  const {\n    color = \"primary\",\n    variant = \"solid\",\n    pill = true,\n    size = \"md\",\n    gutterSize,\n    iconSize,\n    external,\n    block,\n    opticallyAlign,\n    children,\n    className,\n    disabled,\n    disabledTone,\n    onClick,\n    onPointerEnter,\n    as: OverrideComponent,\n    href,\n    to,\n    ...restProps\n  } = props\n\n  const isExternal = external ?? /^https?:\\/\\//.test(href ?? to ?? \"\")\n  const DefaultComponent = useLinkComponent()\n  const LinkComponent = OverrideComponent || (isExternal ? \"a\" : DefaultComponent)\n\n  const sharedProps = {\n    \"className\": clsx(s.Button, className),\n    disabled,\n    \"aria-disabled\": disabled,\n    \"tabIndex\": disabled ? -1 : undefined,\n    // Visual disablement (inert not supported in links, always applied)\n    \"data-disabled\": disabled ? \"\" : undefined,\n    \"data-disabled-tone\": disabled ? disabledTone : undefined,\n    \"data-color\": color,\n    \"data-variant\": variant,\n    \"data-pill\": pill ? \"\" : undefined,\n    \"data-block\": block ? \"\" : undefined,\n    \"data-optically-align\": opticallyAlign,\n    \"data-size\": size,\n    \"data-gutter-size\": gutterSize,\n    \"data-icon-size\": iconSize,\n    \"onClick\": disabled ? undefined : onClick,\n    \"onPointerEnter\": (evt: React.PointerEvent<HTMLAnchorElement>) => {\n      handlePressableMouseEnter(evt)\n      onPointerEnter?.(evt)\n    },\n  }\n\n  if (disabled) {\n    // Don't thread down stuff that isn't valid for a span - just keep the event handlers\n    const eventProps = Object.fromEntries(\n      Object.entries(restProps).filter(\n        ([key, value]) => key.startsWith(\"on\") && typeof value === \"function\",\n      ),\n    )\n    return (\n      <span role=\"link\" {...sharedProps} {...eventProps}>\n        <span className={s.ButtonInner}>{wrapTextNodeSiblings(children)}</span>\n      </span>\n    )\n  }\n\n  const linkProps = {\n    ...(isExternal\n      ? { target: \"_blank\", rel: \"noopener noreferrer\", href: href ?? to }\n      : { href, to }),\n    ...sharedProps,\n    ...restProps,\n  }\n\n  return (\n    <LinkComponent {...linkProps}>\n      <span className={s.ButtonInner}>{wrapTextNodeSiblings(children)}</span>\n    </LinkComponent>\n  )\n}) as ButtonLink\n"]}