@photoroom/ui 0.1.1

package/index97.mjs

@@ -0,0 +1,34 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { cn as l } from "./index7.mjs";
+const b = d(
+  ({ icon: o, label: e, onClick: t, "aria-label": n, className: i, ...c }, s) => /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      onClick: t,
+      "aria-label": n ?? e,
+      ...c,
+      ref: s,
+      className: l(
+        "size-[200px]",
+        "bg-background-transparent rounded-400 border border-dashed border-misc-border",
+        "flex flex-col items-center justify-center gap-2",
+        "cursor-pointer",
+        "hover:border-content-accent-hover active:border-content-accent-down",
+        "outline-none focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
+        "disabled:pointer-events-none disabled:opacity-30",
+        i
+      ),
+      children: [
+        /* @__PURE__ */ r(o, { className: "text-content-tertiary icon-size-600" }),
+        /* @__PURE__ */ r("span", { className: "text-200 text-content-tertiary", children: e })
+      ]
+    }
+  )
+);
+b.displayName = "PlaceholderTile";
+export {
+  b as PlaceholderTile
+};
+//# sourceMappingURL=index97.mjs.map

package/index98.mjs

@@ -0,0 +1,93 @@
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { ArrowRightIcon as w } from "@photoroom/icons/lib/monochromes";
+import { clsx as a } from "./index296.mjs";
+import { useRef as y } from "react";
+import { TextAreaAutosize as g } from "./index346.mjs";
+import C from "./index347.mjs";
+import { Button as v } from "./index10.mjs";
+const N = ({
+  value: n,
+  buttonLabel: i,
+  disabled: r = !1,
+  loading: s = !1,
+  autoFocus: c = !1,
+  placeholder: m,
+  className: l,
+  onChange: u,
+  onSubmit: f,
+  onKeyDown: p,
+  onFocus: d,
+  ...x
+}) => {
+  const o = y(null);
+  C(() => {
+    c && o.current && setTimeout(() => {
+      var e;
+      (e = o.current) == null || e.focus();
+    }, 0);
+  });
+  const h = () => {
+    var e;
+    r || (e = o.current) == null || e.focus();
+  };
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: a(
+        "box-border flex w-[320px] items-center gap-2 rounded-area-500 bg-surface-high py-2 pl-3 pr-2",
+        "border border-misc-border-box transition duration-200",
+        "hover:border-neutral-4",
+        "focus-within:border-content-accent focus-within:ring focus-within:ring-misc-focus-indicator-subdued",
+        r && "cursor-not-allowed opacity-30"
+      ),
+      onClick: h,
+      children: [
+        /* @__PURE__ */ t(
+          g,
+          {
+            ref: o,
+            value: n,
+            disabled: r,
+            placeholder: m,
+            onChange: u,
+            onKeyDown: p,
+            onFocus: d,
+            className: a(
+              "flex-1 resize-none bg-transparent p-0",
+              "text-sm text-content-primary placeholder:text-content-tertiary",
+              "caret-content-secondary",
+              "overflow-y-auto",
+              l
+            ),
+            style: {
+              border: "none",
+              outline: "none",
+              boxShadow: "none"
+            },
+            minRows: 1,
+            maxRows: 3,
+            ...x
+          }
+        ),
+        /* @__PURE__ */ t(
+          v,
+          {
+            onClick: f,
+            disabled: r || !n.trim(),
+            loading: s,
+            className: "h-10 w-10 shrink-0 self-end",
+            icon: /* @__PURE__ */ t(w, { className: "-rotate-90 icon-size-500" }),
+            density: "compact",
+            variant: "accent",
+            "aria-label": i
+          }
+        )
+      ]
+    }
+  );
+};
+N.displayName = "CanvasInput";
+export {
+  N as CanvasInput
+};
+//# sourceMappingURL=index98.mjs.map

package/index99.mjs

@@ -0,0 +1,41 @@
+import { jsx as e } from "react/jsx-runtime";
+import { CheckSmallIcon as r } from "@photoroom/icons/lib/monochromes";
+import { Checkbox as i, CheckboxIndicator as a } from "./index350.mjs";
+import { clsx as c } from "./index296.mjs";
+const u = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  i,
+  {
+    ...t,
+    className: c(
+      "group/checkbox relative inline-flex focus-visible:outline-none",
+      "cursor-pointer disabled:pointer-events-none disabled:opacity-30",
+      o
+    ),
+    children: /* @__PURE__ */ e(
+      "span",
+      {
+        className: c(
+          "border-neutral-4 active:border-neutral-6 active:enabled:bg-background-accent-down group-data-[state=checked]/checkbox:border-content-accent group-data-[state=checked]/checkbox:bg-content-accent",
+          "group-focus-within/checkbox:ring-accent-alpha-5 group-focus-within/checkbox:misc-border-size-focus-ring",
+          "flex h-5 w-5 shrink-0 items-center justify-center rounded-200 misc-border-size-selection"
+        ),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ e(a, { asChild: !0, forceMount: !0, children: /* @__PURE__ */ e(
+          r,
+          {
+            strokeWidth: 3,
+            className: c(
+              "text-white transition-opacity duration-150 ease-out icon-size-400",
+              "group-data[state=checked]:opacity-100",
+              "group-data[state=unchecked]:opacity-0"
+            )
+          }
+        ) })
+      }
+    )
+  }
+);
+export {
+  u as Checkbox
+};
+//# sourceMappingURL=index99.mjs.map

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@photoroom/ui",
+  "version": "0.1.1",
+  "private": false,
+  "description": "Photoroom design system components",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "types": "./index.lib.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.lib.d.ts",
+      "import": "./index.mjs"
+    },
+    "./styles.css": "./style.css",
+    "./tailwind.config": "./tailwind.config.js"
+  },
+  "files": [
+    "**/*.mjs",
+    "**/*.d.ts",
+    "**/*.d.ts.map",
+    "**/*.css",
+    "tailwind.config.js",
+    "plugins/**",
+    "README.md"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Photoroom/photoroom.com"
+  },
+  "dependencies": {
+    "@img-comparison-slider/react": "^8.0.0",
+    "@lottiefiles/react-lottie-player": "^3.5.4",
+    "@photoroom/icons": "0.1.1",
+    "@radix-ui/react-accordion": "^1.0.4",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-context-menu": "^2.2.7",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-menu": "^2.1.1",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "class-variance-authority": "^0.2.4",
+    "clsx": "^2.0.0",
+    "colord": "^2.9.3",
+    "framer-motion": "^10.18.0",
+    "fuse.js": "^7.0.0",
+    "lodash-es": "^4.17.21",
+    "react-colorful": "5.5.1",
+    "react-device-detect": "^2.1.2",
+    "react-intersection-observer": "^9.13.1",
+    "react-moveable": "^0.56.0",
+    "react-popper": "^2.2.5",
+    "react-textarea-autosize": "^8.5.3",
+    "react-use": "17.3.2",
+    "react-youtube": "^10.1.0",
+    "sonner": "^1.4.41",
+    "tailwind-merge": "^1.6.1",
+    "vaul": "^0.9.1",
+    "date-fns": "^2.28.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "next": "*",
+    "react-i18next": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-i18next": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    }
+  },
+  "license": "UNLICENSED"
+}

package/plugins/backgrounds.js

@@ -0,0 +1,29 @@
+/* oxlint-disable typescript/no-require-imports */
+const { default: flattenColorPalette } = require("tailwindcss/lib/util/flattenColorPalette");
+const { default: toColorValue } = require("tailwindcss/lib/util/toColorValue");
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
+  matchUtilities(
+    {
+      "bg-damier": (value) => ({
+        "background-image": `repeating-conic-gradient(${toColorValue(
+          value
+        )} 0% 25%, transparent 0% 50%)`,
+        "background-position": "center",
+      }),
+    },
+    { values: flattenColorPalette(theme("colors")), type: "color" }
+  );
+  addUtilities({
+    ".bg-damier-small": {
+      "background-size": "12px 12px",
+    },
+    ".bg-damier-medium": {
+      "background-size": "20px 20px",
+    },
+    ".bg-damier-large": {
+      "background-size": "28px 28px",
+    },
+  });
+});