@purpurds/listbox 0.0.1

package/dist/listbox.d.ts

@@ -0,0 +1,15 @@
+import { ListboxItem } from './listbox-item';
+import { ComponentPropsWithRef, ForwardRefExoticComponent, PropsWithoutRef } from 'react';
+
+export type ListboxProps = Omit<ComponentPropsWithRef<"ul">, "role"> & {
+    "data-testid"?: string;
+    "aria-label": NonNullable<ComponentPropsWithRef<"ul">["aria-label"]>;
+    "aria-expanded": NonNullable<ComponentPropsWithRef<"ul">["aria-expanded"]>;
+};
+type ListboxStatic = {
+    Item: typeof ListboxItem;
+};
+type ListboxComponent = ForwardRefExoticComponent<PropsWithoutRef<ListboxProps>> & ListboxStatic;
+export declare const Listbox: ListboxComponent;
+export type { ListboxItemProps } from './listbox-item';
+//# sourceMappingURL=listbox.d.ts.map

package/dist/listbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../src/listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EAErB,yBAAyB,EACzB,eAAe,EAChB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAiB,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAM5D,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,WAAW,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;IACrE,eAAe,EAAE,WAAW,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC;CAC5E,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,OAAO,WAAW,CAAC;CAC1B,CAAC;AAEF,KAAK,gBAAgB,GAAG,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,GAAG,aAAa,CAAC;AAEjG,eAAO,MAAM,OAAO,EAWf,gBAAgB,CAAC;AAEtB,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/listbox.es.js

@@ -0,0 +1,277 @@
+import { jsx as s, jsxs as O } from "react/jsx-runtime";
+import { forwardRef as g, isValidElement as P, Children as S } from "react";
+function L(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var f = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(t) {
+  (function() {
+    var i = {}.hasOwnProperty;
+    function a() {
+      for (var r = "", e = 0; e < arguments.length; e++) {
+        var p = arguments[e];
+        p && (r = n(r, u.call(this, p)));
+      }
+      return r;
+    }
+    function u(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return this && this[r] || r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return a.apply(this, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var e = "";
+      for (var p in r)
+        i.call(r, p) && r[p] && (e = n(e, this && this[p] || p));
+      return e;
+    }
+    function n(r, e) {
+      return e ? r ? r + " " + e : r + e : r;
+    }
+    t.exports ? (a.default = a, t.exports = a) : window.classNames = a;
+  })();
+})(f);
+var R = f.exports;
+const v = /* @__PURE__ */ L(R), b = {
+  "purpur-listbox": "_purpur-listbox_qhoi7_1",
+  "purpur-listbox-item": "_purpur-listbox-item_qhoi7_15",
+  "purpur-listbox-item--hovered": "_purpur-listbox-item--hovered_qhoi7_29",
+  "purpur-listbox-item--highlighted": "_purpur-listbox-item--highlighted_qhoi7_37",
+  "purpur-listbox-item--noninteractive": "_purpur-listbox-item--noninteractive_qhoi7_41",
+  "purpur-listbox-item--disabled": "_purpur-listbox-item--disabled_qhoi7_44",
+  "purpur-listbox-item__icon": "_purpur-listbox-item__icon_qhoi7_51"
+};
+function j(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var x = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(t) {
+  (function() {
+    var i = {}.hasOwnProperty;
+    function a() {
+      for (var r = "", e = 0; e < arguments.length; e++) {
+        var p = arguments[e];
+        p && (r = n(r, u.call(this, p)));
+      }
+      return r;
+    }
+    function u(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return this && this[r] || r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return a.apply(this, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var e = "";
+      for (var p in r)
+        i.call(r, p) && r[p] && (e = n(e, this && this[p] || p));
+      return e;
+    }
+    function n(r, e) {
+      return e ? r ? r + " " + e : r + e : r;
+    }
+    t.exports ? (a.default = a, t.exports = a) : window.classNames = a;
+  })();
+})(x);
+var q = x.exports;
+const I = /* @__PURE__ */ j(q), E = {
+  "purpur-icon": "_purpur-icon_8u1lq_1",
+  "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
+  "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
+  "purpur-icon--sm": "_purpur-icon--sm_8u1lq_12",
+  "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
+  "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
+  "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
+}, M = {
+  name: "checkmark",
+  svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M21.06 3.795a.9.9 0 0 1 .145 1.264l-11.5 14.5a.9.9 0 0 1-1.341.077l-6-6a.9.9 0 0 1 1.272-1.272l5.286 5.286L19.795 3.94a.9.9 0 0 1 1.264-.145Z" clip-rule="evenodd"/></svg>',
+  keywords: ["checkmark"],
+  category: "utility"
+}, y = (t) => /* @__PURE__ */ s(
+  G,
+  {
+    ...t,
+    svg: M
+  }
+);
+y.displayName = "IconCheckmark";
+const D = I.bind(E), _ = "purpur-icon", H = "md", B = (t) => t.filter((i) => Object.keys(i).length >= 1).map((i) => `${i.name}="${i.value}"`).join(" "), C = ({ content: t = "", title: i } = {}) => {
+  const a = [
+    { name: "xmlns", value: "http://www.w3.org/2000/svg" },
+    { name: "fill", value: "currentColor" },
+    { name: "viewBox", value: "0 0 24 24" },
+    i ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
+  ], u = i ? `<title>${i}</title>` : "";
+  return `<svg ${B(a)}>${u}${t}</svg>`;
+}, k = (t) => t.replace(/<(\/?)svg([^>]*)>/g, "").trim(), G = ({
+  ["data-testid"]: t,
+  svg: i,
+  allyTitle: a,
+  className: u,
+  size: n = H,
+  ...r
+}) => {
+  const e = C({
+    content: k(i.svg),
+    title: a
+  }), p = D(u, _, `${_}--${n}`);
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      "aria-label": a,
+      className: p,
+      "data-testid": t,
+      dangerouslySetInnerHTML: { __html: e },
+      ...r
+    }
+  );
+};
+function T(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var A = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(t) {
+  (function() {
+    var i = {}.hasOwnProperty;
+    function a() {
+      for (var r = "", e = 0; e < arguments.length; e++) {
+        var p = arguments[e];
+        p && (r = n(r, u(p)));
+      }
+      return r;
+    }
+    function u(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return a.apply(null, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var e = "";
+      for (var p in r)
+        i.call(r, p) && r[p] && (e = n(e, p));
+      return e;
+    }
+    function n(r, e) {
+      return e ? r ? r + " " + e : r + e : r;
+    }
+    t.exports ? (a.default = a, t.exports = a) : window.classNames = a;
+  })();
+})(A);
+var V = A.exports;
+const z = /* @__PURE__ */ T(V), l = {
+  "purpur-paragraph": "_purpur-paragraph_1rh57_1",
+  "purpur-paragraph--disabled": "_purpur-paragraph--disabled_1rh57_7",
+  "purpur-paragraph--hyphens": "_purpur-paragraph--hyphens_1rh57_10",
+  "purpur-paragraph--negative": "_purpur-paragraph--negative_1rh57_13",
+  "purpur-paragraph--paragraph-100": "_purpur-paragraph--paragraph-100_1rh57_16",
+  "purpur-paragraph--paragraph-100-medium": "_purpur-paragraph--paragraph-100-medium_1rh57_22",
+  "purpur-paragraph--paragraph-100-bold": "_purpur-paragraph--paragraph-100-bold_1rh57_29",
+  "purpur-paragraph--paragraph-200": "_purpur-paragraph--paragraph-200_1rh57_36",
+  "purpur-paragraph--preamble-100": "_purpur-paragraph--preamble-100_1rh57_42",
+  "purpur-paragraph--preamble-200": "_purpur-paragraph--preamble-200_1rh57_48",
+  "purpur-paragraph--additional-100": "_purpur-paragraph--additional-100_1rh57_54",
+  "purpur-paragraph--additional-100-medium": "_purpur-paragraph--additional-100-medium_1rh57_60",
+  "purpur-paragraph--overline-100": "_purpur-paragraph--overline-100_1rh57_67",
+  "purpur-paragraph--overline-200": "_purpur-paragraph--overline-200_1rh57_75"
+}, U = {
+  PARAGRAPH100: "paragraph-100",
+  PARAGRAPH100MEDIUM: "paragraph-100-medium",
+  PARAGRAPH100BOLD: "paragraph-100-bold",
+  PARAGRAPH200: "paragraph-200",
+  PREAMBLE100: "preamble-100",
+  PREAMBLE200: "preamble-200",
+  ADDITIONAL100: "additional-100",
+  ADDITIONAL100MEDIUM: "additional-100-medium",
+  OVERLINE100: "overline-100",
+  OVERLINE200: "overline-200"
+}, h = "purpur-paragraph", $ = ({
+  ["data-testid"]: t,
+  children: i,
+  className: a,
+  disabled: u,
+  enableHyphenation: n = !1,
+  negative: r = !1,
+  variant: e = U.PARAGRAPH100,
+  ...p
+}) => {
+  const c = z([
+    a,
+    l[h],
+    l[`${h}--${e}`],
+    {
+      [l[`${h}--hyphens`]]: n,
+      [l[`${h}--disabled`]]: u,
+      [l[`${h}--negative`]]: r
+    }
+  ]);
+  return /* @__PURE__ */ s("p", { ...p, className: c, "data-testid": t, children: i });
+};
+$.displayName = "Paragraph";
+const m = v.bind(b), o = "purpur-listbox", d = g(
+  (t, i) => {
+    const { disabled: a, highlighted: u, hovered: n, selected: r, children: e, noninteractive: p, ...c } = t, w = m(`${o}-item`, c.className, {
+      [`${o}-item--highlighted`]: u,
+      [`${o}-item--selected`]: r,
+      [`${o}-item--hovered`]: n,
+      [`${o}-item--disabled`]: a,
+      [`${o}-item--noninteractive`]: p
+    });
+    return /* @__PURE__ */ O(
+      "li",
+      {
+        ...c,
+        ref: i,
+        className: w,
+        "aria-selected": !!r,
+        role: "option",
+        "aria-disabled": !!a,
+        children: [
+          typeof e == "string" ? /* @__PURE__ */ s($, { children: e }) : e,
+          r && /* @__PURE__ */ s(y, { size: "xs", className: m(`${o}-item__icon`) })
+        ]
+      }
+    );
+  }
+), F = (t) => P(t) && (t == null ? void 0 : t.type) === d;
+d.displayName = "ListBoxItem";
+const J = v.bind(b), X = "purpur-listbox", N = g(
+  ({ children: t, ...i }, a) => /* @__PURE__ */ s(
+    "ul",
+    {
+      ...i,
+      ref: a,
+      className: J(X, i.className),
+      role: "listbox",
+      children: S.toArray(t).filter(F)
+    }
+  )
+);
+N.Item = d;
+N.displayName = "ListBox";
+export {
+  N as Listbox
+};
+//# sourceMappingURL=listbox.es.js.map