@kelet-ai/feedback-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025, Kelet Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,160 @@
+# Feedback UI
+
+A headless React component to collect feedback for product and AI features.
+
+## Quick Start with shadcn/ui
+
+The easiest way to start is by using the shadcn/ui theme for instant, beautiful results:
+
+```bash
+npx shadcn add https://feedback-ui.kelet.ai/r/vote-feedback.json
+```
+
+```tsx
+import {ShadcnVoteFeedback} from '@/components/ui/vote-feedback';
+
+function App() {
+    return (
+        <ShadcnVoteFeedback
+            identifier="my-feature"
+            onFeedback={(feedback) => console.log(feedback)}
+            variant="outline"
+        />
+    );
+}
+```
+
+## Why Feedback UI?
+
+Perfect for collecting user feedback on:
+
+- **Product features** - Get user reactions to new functionality
+- **AI responses** - Improve AI models with user feedback
+- **Documentation** - Learn what content helps users
+- **UI components** - Validate design decisions
+
+## Two Ways to Use
+
+### 1. Start Fast with shadcn/ui (Recommended)
+
+Get beautiful, production-ready components instantly. Perfect for most use cases:
+
+```tsx
+import {ShadcnVoteFeedback} from '@/components/ui/vote-feedback';
+
+<ShadcnVoteFeedback
+    identifier="my-feature"
+    onFeedback={handleFeedback}
+    variant="outline"
+/>
+```
+
+### 2. Go Headless for Full Control
+
+When you need complete design control, use the headless components:
+
+```tsx
+import {VoteFeedback} from '@kelet-ai/feedback-ui';
+
+<VoteFeedback.Root onFeedback={handleFeedback}>
+    <VoteFeedback.UpvoteButton className="your-styles">
+        👍 Like
+    </VoteFeedback.UpvoteButton>
+    <VoteFeedback.DownvoteButton className="your-styles">
+        👎 Dislike
+    </VoteFeedback.DownvoteButton>
+    <VoteFeedback.Popover className="your-popover">
+        <VoteFeedback.Textarea placeholder="What could be better?"/>
+        <VoteFeedback.SubmitButton>Send</VoteFeedback.SubmitButton>
+    </VoteFeedback.Popover>
+</VoteFeedback.Root>
+```
+
+## Features
+
+- **Accessible**: Full keyboard navigation and ARIA support
+- **TypeScript**: Complete type safety included
+- **Flexible**: Works with any styling solution
+- **Zero Dependencies**: Just React - no other dependencies
+
+## API Reference
+
+### VoteFeedback.Root
+
+| Prop             | Type       | Required | Description                         |
+|------------------|------------|----------|-------------------------------------|
+| `identifier`     | `string`   | ✓        | Unique identifier for tracking      |
+| `onFeedback`     | `function` | ✓        | Callback when feedback is submitted |
+| `extra_metadata` | `object`   |          | Additional metadata to include      |
+
+### Feedback Object
+
+```tsx
+{
+    identifier: string;
+    type: 'upvote' | 'downvote';
+    explanation ? : string;
+    extra_metadata ? : object;
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```tsx
+<VoteFeedback.Root onFeedback={(feedback) => console.log(feedback)}>
+    <VoteFeedback.UpvoteButton>👍</VoteFeedback.UpvoteButton>
+    <VoteFeedback.DownvoteButton>👎</VoteFeedback.DownvoteButton>
+</VoteFeedback.Root>
+```
+
+### With Custom Styling
+
+```tsx
+<VoteFeedback.Root onFeedback={handleFeedback}>
+    <VoteFeedback.UpvoteButton className="btn btn-success">
+        Like
+    </VoteFeedback.UpvoteButton>
+    <VoteFeedback.DownvoteButton className="btn btn-danger">
+        Dislike
+    </VoteFeedback.DownvoteButton>
+    <VoteFeedback.Popover className="popover">
+        <VoteFeedback.Textarea className="textarea"/>
+        <VoteFeedback.SubmitButton className="btn btn-primary">
+            Submit
+        </VoteFeedback.SubmitButton>
+    </VoteFeedback.Popover>
+</VoteFeedback.Root>
+```
+
+### Using asChild Pattern
+
+```tsx
+<VoteFeedback.UpvoteButton asChild>
+    <button className="custom-button">
+        <Icon name="thumbs-up"/>
+        Like
+    </button>
+</VoteFeedback.UpvoteButton>
+```
+
+## Accessibility
+
+- Full keyboard navigation support
+- ARIA labels and roles
+- Focus management
+- Screen reader compatible
+
+## Development
+
+```bash
+bun install
+bun dev  # Start Storybook
+bun test # Run tests
+bun build # Build library
+```
+
+## License
+
+MIT

package/dist/dist/feedback-ui.es.d.ts

@@ -0,0 +1,54 @@
+import { default as be } from 'react';
+declare const L: be.Context<null>;
+declare function _e({ api_key: s, project: o, children: l }: {
+    api_key: any;
+    project: any;
+    children: any;
+}): any;
+declare namespace Se {
+    export { ye as Root };
+    export { ke as UpvoteButton };
+    export { we as DownvoteButton };
+    export { Re as Popover };
+    export { Te as Textarea };
+    export { xe as SubmitButton };
+}
+declare function he(): any;
+declare function Pe(): never;
+declare function ye({ children: s, onFeedback: o, defaultText: l, identifier: t, extra_metadata: r }: {
+    children: any;
+    onFeedback: any;
+    defaultText?: string | undefined;
+    identifier: any;
+    extra_metadata: any;
+}): any;
+declare function ke({ asChild: s, children: o, onClick: l, ...t }: {
+    [x: string]: any;
+    asChild: any;
+    children: any;
+    onClick: any;
+}): any;
+declare function we({ asChild: s, children: o, onClick: l, ...t }: {
+    [x: string]: any;
+    asChild: any;
+    children: any;
+    onClick: any;
+}): any;
+declare function Re({ asChild: s, children: o, ...l }: {
+    [x: string]: any;
+    asChild: any;
+    children: any;
+}): any;
+declare function Te({ asChild: s, value: o, onChange: l, ...t }: {
+    [x: string]: any;
+    asChild: any;
+    value: any;
+    onChange: any;
+}): any;
+declare function xe({ asChild: s, children: o, onClick: l, ...t }: {
+    [x: string]: any;
+    asChild: any;
+    children: any;
+    onClick: any;
+}): any;
+export { L as KeletContext, _e as KeletProvider, Se as VoteFeedback, he as useDefaultFeedbackHandler, Pe as useKelet };

package/dist/dist/feedback-ui.umd.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/eslint.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@typescript-eslint/utils/ts-eslint").FlatConfig.ConfigArray;
+export default _default;

package/dist/feedback-ui.es.js

@@ -0,0 +1,592 @@
+import be, { createContext as ue, useContext as W, useCallback as P, isValidElement as F, cloneElement as I, useState as K, useRef as ae, useId as se } from "react";
+var U = { exports: {} }, O = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var le;
+function me() {
+  if (le) return O;
+  le = 1;
+  var s = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
+  function l(t, r, a) {
+    var d = null;
+    if (a !== void 0 && (d = "" + a), r.key !== void 0 && (d = "" + r.key), "key" in r) {
+      a = {};
+      for (var i in r)
+        i !== "key" && (a[i] = r[i]);
+    } else a = r;
+    return r = a.ref, {
+      $$typeof: s,
+      type: t,
+      key: d,
+      ref: r !== void 0 ? r : null,
+      props: a
+    };
+  }
+  return O.Fragment = o, O.jsx = l, O.jsxs = l, O;
+}
+var N = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ie;
+function ve() {
+  return ie || (ie = 1, process.env.NODE_ENV !== "production" && function() {
+    function s(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === y ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case _:
+          return "Fragment";
+        case M:
+          return "Profiler";
+        case q:
+          return "StrictMode";
+        case z:
+          return "Suspense";
+        case A:
+          return "SuspenseList";
+        case c:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case h:
+            return "Portal";
+          case B:
+            return (e.displayName || "Context") + ".Provider";
+          case w:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case J:
+            var n = e.render;
+            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case G:
+            return n = e.displayName || null, n !== null ? n : s(e.type) || "Memo";
+          case Y:
+            n = e._payload, e = e._init;
+            try {
+              return s(e(n));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function o(e) {
+      return "" + e;
+    }
+    function l(e) {
+      try {
+        o(e);
+        var n = !1;
+      } catch {
+        n = !0;
+      }
+      if (n) {
+        n = console;
+        var f = n.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return f.call(
+          n,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          m
+        ), o(e);
+      }
+    }
+    function t(e) {
+      if (e === _) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === Y)
+        return "<...>";
+      try {
+        var n = s(e);
+        return n ? "<" + n + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function r() {
+      var e = S.A;
+      return e === null ? null : e.getOwner();
+    }
+    function a() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (C.call(e, "key")) {
+        var n = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (n && n.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function i(e, n) {
+      function f() {
+        ee || (ee = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          n
+        ));
+      }
+      f.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: f,
+        configurable: !0
+      });
+    }
+    function b() {
+      var e = s(this.type);
+      return te[e] || (te[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function p(e, n, f, m, g, R, X, Z) {
+      return f = R.ref, e = {
+        $$typeof: x,
+        type: e,
+        key: n,
+        props: R,
+        _owner: g
+      }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: b
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: X
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: Z
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function u(e, n, f, m, g, R, X, Z) {
+      var v = n.children;
+      if (v !== void 0)
+        if (m)
+          if (V(v)) {
+            for (m = 0; m < v.length; m++)
+              T(v[m]);
+            Object.freeze && Object.freeze(v);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else T(v);
+      if (C.call(n, "key")) {
+        v = s(e);
+        var j = Object.keys(n).filter(function(fe) {
+          return fe !== "key";
+        });
+        m = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", ne[v + m] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          m,
+          v,
+          j,
+          v
+        ), ne[v + m] = !0);
+      }
+      if (v = null, f !== void 0 && (l(f), v = "" + f), d(n) && (l(n.key), v = "" + n.key), "key" in n) {
+        f = {};
+        for (var Q in n)
+          Q !== "key" && (f[Q] = n[Q]);
+      } else f = n;
+      return v && i(
+        f,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), p(
+        e,
+        v,
+        R,
+        g,
+        r(),
+        f,
+        X,
+        Z
+      );
+    }
+    function T(e) {
+      typeof e == "object" && e !== null && e.$$typeof === x && e._store && (e._store.validated = 1);
+    }
+    var k = be, x = Symbol.for("react.transitional.element"), h = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), M = Symbol.for("react.profiler"), w = Symbol.for("react.consumer"), B = Symbol.for("react.context"), J = Symbol.for("react.forward_ref"), z = Symbol.for("react.suspense"), A = Symbol.for("react.suspense_list"), G = Symbol.for("react.memo"), Y = Symbol.for("react.lazy"), c = Symbol.for("react.activity"), y = Symbol.for("react.client.reference"), S = k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, V = Array.isArray, H = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    k = {
+      "react-stack-bottom-frame": function(e) {
+        return e();
+      }
+    };
+    var ee, te = {}, re = k["react-stack-bottom-frame"].bind(
+      k,
+      a
+    )(), oe = H(t(a)), ne = {};
+    N.Fragment = _, N.jsx = function(e, n, f, m, g) {
+      var R = 1e4 > S.recentlyCreatedOwnerStacks++;
+      return u(
+        e,
+        n,
+        f,
+        !1,
+        m,
+        g,
+        R ? Error("react-stack-top-frame") : re,
+        R ? H(t(e)) : oe
+      );
+    }, N.jsxs = function(e, n, f, m, g) {
+      var R = 1e4 > S.recentlyCreatedOwnerStacks++;
+      return u(
+        e,
+        n,
+        f,
+        !0,
+        m,
+        g,
+        R ? Error("react-stack-top-frame") : re,
+        R ? H(t(e)) : oe
+      );
+    };
+  }()), N;
+}
+var ce;
+function pe() {
+  return ce || (ce = 1, process.env.NODE_ENV === "production" ? U.exports = me() : U.exports = ve()), U.exports;
+}
+var E = pe();
+const L = ue(null), Ee = "https://api-v0.kelet.ai/", Pe = () => {
+  const s = W(L);
+  if (!s)
+    throw new Error("useKelet must be used within a KeletProvider");
+  return s;
+}, he = () => {
+  const s = W(L);
+  return s ? s.feedback : async () => {
+  };
+}, _e = ({ api_key: s, project: o, children: l }) => {
+  const t = W(L), r = s || t?.api_key;
+  if (!r)
+    throw new Error(
+      "api_key is required either directly or from a parent KeletProvider"
+    );
+  const d = {
+    api_key: r,
+    project: o,
+    feedback: async (i) => {
+      const b = `${Ee}/projects/${o}/feedback`, p = {
+        tx_id: i.identifier,
+        source: "EXPLICIT",
+        vote: i.vote,
+        explanation: i.explanation
+      }, u = await fetch(b, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${r}`
+        },
+        body: JSON.stringify(p)
+      });
+      if (!u.ok)
+        throw new Error(`Failed to submit feedback: ${u.statusText}`);
+    }
+  };
+  return /* @__PURE__ */ E.jsx(L.Provider, { value: d, children: l });
+}, D = (s, o) => {
+  const l = { ...o };
+  for (const t in o) {
+    const r = s[t], a = o[t];
+    /^on[A-Z]/.test(t) ? r && a ? l[t] = (...i) => {
+      a(...i), r(...i);
+    } : r && (l[t] = r) : t === "style" ? l[t] = { ...r, ...a } : t === "className" ? l[t] = [r, a].filter(Boolean).join(" ") : l[t] = a !== void 0 ? a : r;
+  }
+  return { ...s, ...l };
+}, de = ue(
+  null
+), $ = () => {
+  const s = W(de);
+  if (!s)
+    throw new Error(
+      "VoteFeedback components must be used within VoteFeedback.Root"
+    );
+  return s;
+}, ye = ({
+  children: s,
+  onFeedback: o,
+  defaultText: l = "",
+  identifier: t,
+  extra_metadata: r
+}) => {
+  const [a, d] = K(!1), [i, b] = K(l), [p, u] = K(!1), [T, k] = K(null), x = ae(null), h = ae(null), _ = se(), q = se(), M = he(), w = o || M, B = P(async () => {
+    k("upvote");
+    const c = {
+      identifier: t,
+      vote: "upvote",
+      ...r && { extra_metadata: r }
+    };
+    try {
+      u(!0), await w(c);
+    } finally {
+      u(!1);
+    }
+  }, [w, t, r]), J = P(async () => {
+    if (k("downvote"), w) {
+      const c = {
+        identifier: t,
+        vote: "downvote",
+        ...r && { extra_metadata: r }
+      };
+      try {
+        u(!0), await w(c);
+      } finally {
+        u(!1);
+      }
+    }
+    d(!0), setTimeout(() => {
+      x.current?.focus();
+      const c = document.createElement("div");
+      c.setAttribute("aria-live", "polite"), c.setAttribute("aria-atomic", "true"), c.className = "sr-only", c.textContent = "Feedback dialog opened. You can provide additional details about your downvote.", document.body.appendChild(c), setTimeout(() => document.body.removeChild(c), 1e3);
+    }, 0);
+  }, [w, t, r]), z = P(
+    (c) => {
+      b(c.target.value);
+    },
+    []
+  ), A = P(async () => {
+    const c = i.trim().length > 0;
+    if (c) {
+      const y = {
+        identifier: t,
+        vote: "downvote",
+        explanation: i,
+        ...r && { extra_metadata: r }
+      };
+      try {
+        u(!0), await w(y);
+      } finally {
+        u(!1);
+      }
+    }
+    if (d(!1), b(l), h.current?.focus(), c) {
+      const y = document.createElement("div");
+      y.setAttribute("aria-live", "polite"), y.className = "sr-only", y.textContent = "Feedback submitted successfully.", document.body.appendChild(y), setTimeout(() => document.body.removeChild(y), 1e3);
+    }
+  }, [w, i, l, t, r]), G = P(
+    (c) => {
+      if (c.key === "Escape")
+        d(!1), b(l), h.current?.focus();
+      else if ((c.metaKey || c.ctrlKey) && c.key === "Enter")
+        c.preventDefault(), A().then((y) => {
+        });
+      else if (c.key === "Tab" && a) {
+        const y = document.getElementById(_);
+        if (y) {
+          const S = y.querySelectorAll(
+            'button, textarea, input, select, a[href], [tabindex]:not([tabindex="-1"])'
+          ), C = S[0], V = S[S.length - 1];
+          c.shiftKey && document.activeElement === C ? (c.preventDefault(), V?.focus()) : !c.shiftKey && document.activeElement === V && (c.preventDefault(), C?.focus());
+        }
+      }
+    },
+    [A, a, _, l]
+  ), Y = {
+    onFeedback: w,
+    showPopover: a,
+    setShowPopover: d,
+    feedbackText: i,
+    setFeedbackText: b,
+    isSubmitting: p,
+    setIsSubmitting: u,
+    vote: T,
+    handleUpvote: B,
+    handleDownvote: J,
+    handleTextareaChange: z,
+    handleSubmit: A,
+    handleKeyDown: G,
+    textareaRef: x,
+    triggerRef: h,
+    popoverId: _,
+    triggerId: q,
+    identifier: t,
+    extra_metadata: r
+  };
+  return /* @__PURE__ */ E.jsx(de.Provider, { value: Y, children: s });
+}, ke = ({
+  asChild: s,
+  children: o,
+  onClick: l,
+  ...t
+}) => {
+  const { handleUpvote: r, isSubmitting: a, vote: d } = $(), i = P(
+    (u) => {
+      r(), l?.(u);
+    },
+    [r, l]
+  ), b = {
+    ...t,
+    onClick: i,
+    disabled: a || t.disabled,
+    "aria-label": t["aria-label"] || "Upvote feedback",
+    type: "button"
+  }, p = d === "upvote";
+  if (s) {
+    const u = typeof o == "function" ? o({ isSelected: p }) : o;
+    if (F(u))
+      return I(
+        u,
+        D(b, u.props)
+      );
+  }
+  return /* @__PURE__ */ E.jsx("button", { ...b, children: typeof o == "function" ? o({ isSelected: p }) : o });
+}, we = ({
+  asChild: s,
+  children: o,
+  onClick: l,
+  ...t
+}) => {
+  const {
+    handleDownvote: r,
+    showPopover: a,
+    isSubmitting: d,
+    popoverId: i,
+    triggerId: b,
+    triggerRef: p,
+    vote: u
+  } = $(), T = P(
+    (h) => {
+      r(), l?.(h);
+    },
+    [r, l]
+  ), k = {
+    ...t,
+    ref: p,
+    onClick: T,
+    disabled: d || t.disabled,
+    "aria-label": t["aria-label"] || "Downvote feedback",
+    "aria-expanded": a,
+    "aria-controls": i,
+    id: b,
+    type: "button"
+  }, x = u === "downvote";
+  if (s) {
+    const h = typeof o == "function" ? o({ isSelected: x }) : o;
+    if (F(h))
+      return I(h, D(k, h.props));
+    if (h)
+      return h;
+  }
+  return /* @__PURE__ */ E.jsx("button", { ...k, children: typeof o == "function" ? o({ isSelected: x }) : o });
+}, Re = ({ asChild: s, children: o, ...l }) => {
+  const { showPopover: t, handleKeyDown: r, popoverId: a, triggerId: d } = $();
+  if (!t)
+    return null;
+  const i = {
+    ...l,
+    role: "dialog",
+    "aria-labelledby": d,
+    "aria-modal": !0,
+    "aria-describedby": `${a}-description`,
+    id: a,
+    onKeyDown: r,
+    tabIndex: -1
+  };
+  return s && F(o) ? /* @__PURE__ */ E.jsxs(E.Fragment, { children: [
+    I(
+      o,
+      D(i, o.props)
+    ),
+    /* @__PURE__ */ E.jsx("div", { id: `${a}-description`, className: "sr-only", children: "Provide additional feedback for your downvote" })
+  ] }) : /* @__PURE__ */ E.jsxs("div", { ...i, children: [
+    /* @__PURE__ */ E.jsx("div", { id: `${a}-description`, className: "sr-only", children: "Provide additional feedback for your downvote" }),
+    o
+  ] });
+}, Te = ({ asChild: s, value: o, onChange: l, ...t }) => {
+  const {
+    feedbackText: r,
+    handleTextareaChange: a,
+    textareaRef: d,
+    handleKeyDown: i,
+    popoverId: b
+  } = $(), p = {
+    ...t,
+    ref: d,
+    value: o !== void 0 ? o : r,
+    onChange: l || a,
+    onKeyDown: i,
+    placeholder: t.placeholder || "What did we miss?",
+    "aria-label": t["aria-label"] || "Additional feedback",
+    "aria-describedby": `${b}-help`,
+    rows: t.rows || 3
+  };
+  return s && F(t.children) ? I(
+    t.children,
+    D(p, t.children.props)
+  ) : /* @__PURE__ */ E.jsx("textarea", { ...p });
+}, xe = ({
+  asChild: s,
+  children: o,
+  onClick: l,
+  ...t
+}) => {
+  const { handleSubmit: r, isSubmitting: a, feedbackText: d } = $(), i = P(
+    (T) => {
+      r(), l?.(T);
+    },
+    [r, l]
+  ), b = d.trim().length > 0, p = b ? "Submit feedback" : "Close without feedback", u = {
+    ...t,
+    onClick: i,
+    disabled: a || t.disabled,
+    type: "button",
+    "aria-label": t["aria-label"] || p,
+    "aria-describedby": b ? void 0 : "submit-help"
+  };
+  return s && F(o) ? /* @__PURE__ */ E.jsxs(E.Fragment, { children: [
+    I(
+      o,
+      D(u, o.props)
+    ),
+    !b && /* @__PURE__ */ E.jsx("span", { id: "submit-help", className: "sr-only", children: "This will close the dialog without submitting feedback" })
+  ] }) : /* @__PURE__ */ E.jsxs("button", { ...u, children: [
+    o,
+    !b && /* @__PURE__ */ E.jsx("span", { id: "submit-help", className: "sr-only", children: "This will close the dialog without submitting feedback" })
+  ] });
+}, Se = {
+  Root: ye,
+  UpvoteButton: ke,
+  DownvoteButton: we,
+  Popover: Re,
+  Textarea: Te,
+  SubmitButton: xe
+};
+export {
+  L as KeletContext,
+  _e as KeletProvider,
+  Se as VoteFeedback,
+  he as useDefaultFeedbackHandler,
+  Pe as useKelet
+};

package/dist/feedback-ui.umd.js

@@ -0,0 +1,22 @@
+(function(w,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],a):(w=typeof globalThis<"u"?globalThis:w||self,a(w["@kelet-ai/feedback-ui"]={},w.React))})(this,function(w,a){"use strict";var Y={exports:{}},A={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Q;function le(){if(Q)return A;Q=1;var l=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function c(t,n,s){var f=null;if(s!==void 0&&(f=""+s),n.key!==void 0&&(f=""+n.key),"key"in n){s={};for(var i in n)i!=="key"&&(s[i]=n[i])}else s=n;return n=s.ref,{$$typeof:l,type:t,key:f,ref:n!==void 0?n:null,props:s}}return A.Fragment=o,A.jsx=c,A.jsxs=c,A}var O={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var q;function ce(){return q||(q=1,process.env.NODE_ENV!=="production"&&function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===y?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case _:return"Fragment";case L:return"Profiler";case B:return"StrictMode";case J:return"Suspense";case D:return"SuspenseList";case u:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case h:return"Portal";case M:return(e.displayName||"Context")+".Provider";case T:return(e._context.displayName||"Context")+".Consumer";case W:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case z:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case K:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function o(e){return""+e}function c(e){try{o(e);var r=!1}catch{r=!0}if(r){r=console;var b=r.error,v=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return b.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",v),o(e)}}function t(e){if(e===_)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===K)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function n(){var e=C.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function f(e){if(V.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function i(e,r){function b(){ne||(ne=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}b.isReactWarning=!0,Object.defineProperty(e,"key",{get:b,configurable:!0})}function m(){var e=l(this.type);return oe[e]||(oe[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function k(e,r,b,v,S,x,G,X){return b=x.ref,e={$$typeof:P,type:e,key:r,props:x,_owner:S},(b!==void 0?b:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:m}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:G}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,r,b,v,S,x,G,X){var p=r.children;if(p!==void 0)if(v)if(U(p)){for(v=0;v<p.length;v++)g(p[v]);Object.freeze&&Object.freeze(p)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(p);if(V.call(r,"key")){p=l(e);var j=Object.keys(r).filter(function(me){return me!=="key"});v=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",se[p+v]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,v,p,j,p),se[p+v]=!0)}if(p=null,b!==void 0&&(c(b),p=""+b),f(r)&&(c(r.key),p=""+r.key),"key"in r){b={};for(var Z in r)Z!=="key"&&(b[Z]=r[Z])}else b=r;return p&&i(b,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,p,x,S,n(),b,G,X)}function g(e){typeof e=="object"&&e!==null&&e.$$typeof===P&&e._store&&(e._store.validated=1)}var R=a,P=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),L=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),M=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),J=Symbol.for("react.suspense"),D=Symbol.for("react.suspense_list"),z=Symbol.for("react.memo"),K=Symbol.for("react.lazy"),u=Symbol.for("react.activity"),y=Symbol.for("react.client.reference"),C=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V=Object.prototype.hasOwnProperty,U=Array.isArray,H=console.createTask?console.createTask:function(){return null};R={"react-stack-bottom-frame":function(e){return e()}};var ne,oe={},re=R["react-stack-bottom-frame"].bind(R,s)(),ae=H(t(s)),se={};O.Fragment=_,O.jsx=function(e,r,b,v,S){var x=1e4>C.recentlyCreatedOwnerStacks++;return d(e,r,b,!1,v,S,x?Error("react-stack-top-frame"):re,x?H(t(e)):ae)},O.jsxs=function(e,r,b,v,S){var x=1e4>C.recentlyCreatedOwnerStacks++;return d(e,r,b,!0,v,S,x?Error("react-stack-top-frame"):re,x?H(t(e)):ae)}}()),O}var $;function ie(){return $||($=1,process.env.NODE_ENV==="production"?Y.exports=le():Y.exports=ce()),Y.exports}var E=ie();const N=a.createContext(null),ue="https://api-v0.kelet.ai/",de=()=>{const l=a.useContext(N);if(!l)throw new Error("useKelet must be used within a KeletProvider");return l},ee=()=>{const l=a.useContext(N);return l?l.feedback:async()=>{}},fe=({api_key:l,project:o,children:c})=>{const t=a.useContext(N),n=l||t?.api_key;if(!n)throw new Error("api_key is required either directly or from a parent KeletProvider");const f={api_key:n,project:o,feedback:async i=>{const m=`${ue}/projects/${o}/feedback`,k={tx_id:i.identifier,source:"EXPLICIT",vote:i.vote,explanation:i.explanation},d=await fetch(m,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${n}`},body:JSON.stringify(k)});if(!d.ok)throw new Error(`Failed to submit feedback: ${d.statusText}`)}};return E.jsx(N.Provider,{value:f,children:c})},F=(l,o)=>{const c={...o};for(const t in o){const n=l[t],s=o[t];/^on[A-Z]/.test(t)?n&&s?c[t]=(...i)=>{s(...i),n(...i)}:n&&(c[t]=n):t==="style"?c[t]={...n,...s}:t==="className"?c[t]=[n,s].filter(Boolean).join(" "):c[t]=s!==void 0?s:n}return{...l,...c}},te=a.createContext(null),I=()=>{const l=a.useContext(te);if(!l)throw new Error("VoteFeedback components must be used within VoteFeedback.Root");return l},be={Root:({children:l,onFeedback:o,defaultText:c="",identifier:t,extra_metadata:n})=>{const[s,f]=a.useState(!1),[i,m]=a.useState(c),[k,d]=a.useState(!1),[g,R]=a.useState(null),P=a.useRef(null),h=a.useRef(null),_=a.useId(),B=a.useId(),L=ee(),T=o||L,M=a.useCallback(async()=>{R("upvote");const u={identifier:t,vote:"upvote",...n&&{extra_metadata:n}};try{d(!0),await T(u)}finally{d(!1)}},[T,t,n]),W=a.useCallback(async()=>{if(R("downvote"),T){const u={identifier:t,vote:"downvote",...n&&{extra_metadata:n}};try{d(!0),await T(u)}finally{d(!1)}}f(!0),setTimeout(()=>{P.current?.focus();const u=document.createElement("div");u.setAttribute("aria-live","polite"),u.setAttribute("aria-atomic","true"),u.className="sr-only",u.textContent="Feedback dialog opened. You can provide additional details about your downvote.",document.body.appendChild(u),setTimeout(()=>document.body.removeChild(u),1e3)},0)},[T,t,n]),J=a.useCallback(u=>{m(u.target.value)},[]),D=a.useCallback(async()=>{const u=i.trim().length>0;if(u){const y={identifier:t,vote:"downvote",explanation:i,...n&&{extra_metadata:n}};try{d(!0),await T(y)}finally{d(!1)}}if(f(!1),m(c),h.current?.focus(),u){const y=document.createElement("div");y.setAttribute("aria-live","polite"),y.className="sr-only",y.textContent="Feedback submitted successfully.",document.body.appendChild(y),setTimeout(()=>document.body.removeChild(y),1e3)}},[T,i,c,t,n]),z=a.useCallback(u=>{if(u.key==="Escape")f(!1),m(c),h.current?.focus();else if((u.metaKey||u.ctrlKey)&&u.key==="Enter")u.preventDefault(),D().then(y=>{});else if(u.key==="Tab"&&s){const y=document.getElementById(_);if(y){const C=y.querySelectorAll('button, textarea, input, select, a[href], [tabindex]:not([tabindex="-1"])'),V=C[0],U=C[C.length-1];u.shiftKey&&document.activeElement===V?(u.preventDefault(),U?.focus()):!u.shiftKey&&document.activeElement===U&&(u.preventDefault(),V?.focus())}}},[D,s,_,c]),K={onFeedback:T,showPopover:s,setShowPopover:f,feedbackText:i,setFeedbackText:m,isSubmitting:k,setIsSubmitting:d,vote:g,handleUpvote:M,handleDownvote:W,handleTextareaChange:J,handleSubmit:D,handleKeyDown:z,textareaRef:P,triggerRef:h,popoverId:_,triggerId:B,identifier:t,extra_metadata:n};return E.jsx(te.Provider,{value:K,children:l})},UpvoteButton:({asChild:l,children:o,onClick:c,...t})=>{const{handleUpvote:n,isSubmitting:s,vote:f}=I(),i=a.useCallback(d=>{n(),c?.(d)},[n,c]),m={...t,onClick:i,disabled:s||t.disabled,"aria-label":t["aria-label"]||"Upvote feedback",type:"button"},k=f==="upvote";if(l){const d=typeof o=="function"?o({isSelected:k}):o;if(a.isValidElement(d))return a.cloneElement(d,F(m,d.props))}return E.jsx("button",{...m,children:typeof o=="function"?o({isSelected:k}):o})},DownvoteButton:({asChild:l,children:o,onClick:c,...t})=>{const{handleDownvote:n,showPopover:s,isSubmitting:f,popoverId:i,triggerId:m,triggerRef:k,vote:d}=I(),g=a.useCallback(h=>{n(),c?.(h)},[n,c]),R={...t,ref:k,onClick:g,disabled:f||t.disabled,"aria-label":t["aria-label"]||"Downvote feedback","aria-expanded":s,"aria-controls":i,id:m,type:"button"},P=d==="downvote";if(l){const h=typeof o=="function"?o({isSelected:P}):o;if(a.isValidElement(h))return a.cloneElement(h,F(R,h.props));if(h)return h}return E.jsx("button",{...R,children:typeof o=="function"?o({isSelected:P}):o})},Popover:({asChild:l,children:o,...c})=>{const{showPopover:t,handleKeyDown:n,popoverId:s,triggerId:f}=I();if(!t)return null;const i={...c,role:"dialog","aria-labelledby":f,"aria-modal":!0,"aria-describedby":`${s}-description`,id:s,onKeyDown:n,tabIndex:-1};return l&&a.isValidElement(o)?E.jsxs(E.Fragment,{children:[a.cloneElement(o,F(i,o.props)),E.jsx("div",{id:`${s}-description`,className:"sr-only",children:"Provide additional feedback for your downvote"})]}):E.jsxs("div",{...i,children:[E.jsx("div",{id:`${s}-description`,className:"sr-only",children:"Provide additional feedback for your downvote"}),o]})},Textarea:({asChild:l,value:o,onChange:c,...t})=>{const{feedbackText:n,handleTextareaChange:s,textareaRef:f,handleKeyDown:i,popoverId:m}=I(),k={...t,ref:f,value:o!==void 0?o:n,onChange:c||s,onKeyDown:i,placeholder:t.placeholder||"What did we miss?","aria-label":t["aria-label"]||"Additional feedback","aria-describedby":`${m}-help`,rows:t.rows||3};return l&&a.isValidElement(t.children)?a.cloneElement(t.children,F(k,t.children.props)):E.jsx("textarea",{...k})},SubmitButton:({asChild:l,children:o,onClick:c,...t})=>{const{handleSubmit:n,isSubmitting:s,feedbackText:f}=I(),i=a.useCallback(g=>{n(),c?.(g)},[n,c]),m=f.trim().length>0,k=m?"Submit feedback":"Close without feedback",d={...t,onClick:i,disabled:s||t.disabled,type:"button","aria-label":t["aria-label"]||k,"aria-describedby":m?void 0:"submit-help"};return l&&a.isValidElement(o)?E.jsxs(E.Fragment,{children:[a.cloneElement(o,F(d,o.props)),!m&&E.jsx("span",{id:"submit-help",className:"sr-only",children:"This will close the dialog without submitting feedback"})]}):E.jsxs("button",{...d,children:[o,!m&&E.jsx("span",{id:"submit-help",className:"sr-only",children:"This will close the dialog without submitting feedback"})]})}};w.KeletContext=N,w.KeletProvider=fe,w.VoteFeedback=be,w.useDefaultFeedbackHandler=ee,w.useKelet=de,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/ui/button.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/src/components/ui/popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/src/components/ui/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Textarea({ className, ...props }: React.ComponentProps<'textarea'>): import("react/jsx-runtime").JSX.Element;
+export { Textarea };

package/dist/src/components/vote-feedback.d.ts

@@ -0,0 +1,10 @@
+import { DownvoteButtonProps, PopoverProps, SubmitButtonProps, TextareaProps, UpvoteButtonProps, VoteFeedbackRootProps } from '../types';
+export declare const VoteFeedback: {
+    Root: ({ children, onFeedback, defaultText, identifier, extra_metadata, }: VoteFeedbackRootProps) => import("react/jsx-runtime").JSX.Element;
+    UpvoteButton: ({ asChild, children, onClick, ...props }: UpvoteButtonProps) => import("react/jsx-runtime").JSX.Element;
+    DownvoteButton: ({ asChild, children, onClick, ...props }: DownvoteButtonProps) => string | number | bigint | true | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+    Popover: ({ asChild, children, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element | null;
+    Textarea: ({ asChild, value, onChange, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+    SubmitButton: ({ asChild, children, onClick, ...props }: SubmitButtonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { VoteFeedback as default };

package/dist/src/components/vote-feedback.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { VoteFeedback } from './vote-feedback';
+declare const meta: Meta<typeof VoteFeedback.Root>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const HeadlessBasic: Story;
+export declare const HeadlessCustomStyling: Story;
+export declare const HeadlessMinimal: Story;
+export declare const AsChildPattern: Story;
+export declare const CompleteWorkflow: Story;

package/dist/src/contexts/kelet.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { FeedbackData } from '../types';
+interface KeletContextValue {
+    api_key: string;
+    project: string;
+    feedback: (data: FeedbackData) => Promise<void>;
+}
+interface KeletProviderProps {
+    api_key?: string;
+    project: string;
+}
+export declare const KeletContext: React.Context<KeletContextValue | null>;
+export declare const useKelet: () => KeletContextValue;
+export declare const useDefaultFeedbackHandler: () => ((data: FeedbackData) => Promise<void>);
+export declare const KeletProvider: React.FC<React.PropsWithChildren<KeletProviderProps>>;
+export {};

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export { VoteFeedback } from './components/vote-feedback';
+export type { FeedbackData, VoteFeedbackRootProps, UpvoteButtonProps, DownvoteButtonProps, PopoverProps, TextareaProps, SubmitButtonProps, } from './types';
+export { KeletProvider, KeletContext, useKelet, useDefaultFeedbackHandler } from './contexts/kelet';

package/dist/src/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/src/types/index.d.ts

@@ -0,0 +1,64 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+/**
+ * Feedback data structure returned by the component
+ */
+export interface FeedbackData {
+    identifier: string;
+    extra_metadata?: Record<string, any>;
+    vote: 'upvote' | 'downvote';
+    explanation?: string;
+}
+/**
+ * Props for the root VoteFeedback component
+ * This is a headless component - no styling included
+ */
+export interface VoteFeedbackRootProps {
+    children: ReactNode;
+    onFeedback?: (data: FeedbackData) => void | Promise<void>;
+    defaultText?: string;
+    identifier: string;
+    extra_metadata?: Record<string, any>;
+}
+/**
+ * Props for the upvote button
+ * Headless - you provide your own styling and content
+ */
+export interface UpvoteButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    asChild?: boolean;
+    children: ReactNode | (({ isSelected }: {
+        isSelected: boolean;
+    }) => ReactNode);
+}
+/**
+ * Props for the downvote button
+ * Headless - you provide your own styling and content
+ */
+export interface DownvoteButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    asChild?: boolean;
+    children: ReactNode | (({ isSelected }: {
+        isSelected: boolean;
+    }) => ReactNode);
+}
+/**
+ * Props for the popover container
+ * Headless - you control the positioning and styling
+ */
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+    children: ReactNode;
+}
+/**
+ * Props for the textarea input
+ * Headless - you provide your own styling
+ */
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    asChild?: boolean;
+}
+/**
+ * Props for the submit button
+ * Headless - you provide your own styling and content
+ */
+export interface SubmitButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    children: ReactNode;
+}

package/dist/src/ui/shadcn/index.d.ts

@@ -0,0 +1,2 @@
+export { ShadcnVoteFeedback } from './vote-feedback';
+export type { ShadcnVoteFeedbackProps } from './vote-feedback';

package/dist/src/ui/shadcn/vote-feedback.d.ts

@@ -0,0 +1,13 @@
+import { VoteFeedbackRootProps } from '../../types';
+import * as React from 'react';
+interface ShadcnVoteFeedbackProps extends VoteFeedbackRootProps {
+    variant?: 'default' | 'outline' | 'ghost' | 'secondary';
+    size?: 'default' | 'sm' | 'lg' | 'icon';
+    title?: string;
+    description?: string;
+    placeholder?: string;
+    className?: string;
+}
+declare const ShadcnVoteFeedback: React.ForwardRefExoticComponent<ShadcnVoteFeedbackProps & React.RefAttributes<HTMLDivElement>>;
+export { ShadcnVoteFeedback };
+export type { ShadcnVoteFeedbackProps };

package/dist/src/ui/shadcn/vote-feedback.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ShadcnVoteFeedback } from './vote-feedback';
+declare const meta: Meta<typeof ShadcnVoteFeedback>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Ghost: Story;
+export declare const Secondary: Story;
+export declare const DefaultFilled: Story;
+export declare const CustomContent: Story;
+export declare const InlineUsage: Story;

package/dist/tailwind.config.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    content: string[];
+    theme: {
+        extend: {};
+    };
+    plugins: string[];
+};
+export default _default;

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/dist/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Record<string, any>;
+export default _default;

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@kelet-ai/feedback-ui",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kelet-ai/feedback-ui.git"
+  },
+  "main": "./dist/feedback-ui.umd.js",
+  "module": "./dist/feedback-ui.es.js",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.1",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@storybook/addon-a11y": "^9.0.17",
+    "@storybook/addon-docs": "^9.0.17",
+    "@storybook/addon-themes": "^9.0.17",
+    "@storybook/addon-vitest": "^9.0.17",
+    "@storybook/builder-vite": "^9.0.17",
+    "@storybook/react-vite": "^9.0.17",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/vite": "^4.1.11",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/bun": "latest",
+    "@types/node": "^24.0.14",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "ajv": "^8.17.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "eslint": "^9.31.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "9.0.17",
+    "jsdom": "^26.1.0",
+    "lucide-react": "^0.525.0",
+    "playwright": "^1.54.1",
+    "prettier": "^3.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "shadcn": "^2.9.0",
+    "storybook": "^9.0.17",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.37.0",
+    "vite": "^7.0.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/feedback-ui.es.js",
+      "require": "./dist/feedback-ui.umd.js"
+    }
+  },
+  "description": "A React component library for feedback UI components",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "components",
+    "feedback",
+    "ui",
+    "typescript"
+  ],
+  "license": "APACHE-2.0",
+  "scripts": {
+    "dev": "NODE_NO_WARNINGS=1 storybook dev -p 6006",
+    "build": "vite build",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test:storybook": "vitest --project=storybook",
+    "test:storybook:coverage": "vitest --project=storybook --coverage",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "preview": "vite preview",
+    "prepublishOnly": "bun run build",
+    "storybook": "NODE_NO_WARNINGS=1 storybook dev -p 6006",
+    "registry:build": "bun shadcn build"
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts"
+}