@photoroom/ui 0.1.189 → 0.1.190

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/colors.css +27 -27
  2. package/index.css +1 -1
  3. package/index.mjs +34 -34
  4. package/package.json +1 -1
  5. package/theme.css +5 -5
package/index.mjs CHANGED
@@ -1829,8 +1829,8 @@ var Dr = U("focus-visible:misc-border-size-focus-ring relative inline-flex w-fit
1829
1829
  variants: {
1830
1830
  variant: {
1831
1831
  accent: "bg-content-accent hover:bg-accent-400 focus-visible:bg-accent-400 focus-visible:ring-misc-focus-indicator active:bg-accent-600 text-white",
1832
- "secondary-accent": "bg-accent-alpha-1 text-content-accent hover:bg-accent-alpha-2 focus-visible:bg-accent-alpha-3 focus-visible:ring-misc-focus-indicator active:bg-accent-alpha-3",
1833
- "borderless-accent": "text-content-accent hover:bg-accent-alpha-2 focus-visible:bg-accent-alpha-3 focus-visible:ring-misc-focus-indicator active:bg-accent-alpha-3 bg-transparent",
1832
+ "secondary-accent": "bg-accent-alpha-100 text-content-accent hover:bg-accent-alpha-200 focus-visible:bg-accent-alpha-300 focus-visible:ring-misc-focus-indicator active:bg-accent-alpha-300",
1833
+ "borderless-accent": "text-content-accent hover:bg-accent-alpha-200 focus-visible:bg-accent-alpha-300 focus-visible:ring-misc-focus-indicator active:bg-accent-alpha-300 bg-transparent",
1834
1834
  primary: "bg-background-default text-content-white-primary-inverted hover:bg-background-hover focus-visible:bg-background-hover focus-visible:ring-misc-focus-indicator active:bg-background-down",
1835
1835
  secondary: "bg-background-subdued text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
1836
1836
  borderless: "text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
@@ -9306,7 +9306,7 @@ var wl = /* @__PURE__ */ new Set(), Tl = ({ variant: e = "default", label: t, pr
9306
9306
  })]: e === "stack" }, x.className),
9307
9307
  disabled: A,
9308
9308
  children: /* @__PURE__ */ D("div", {
9309
- className: H("relative z-1 overflow-hidden", "flex items-center justify-center", "rounded-500 bg-surface-high", "group-focus-visible:ring-accent-alpha-5 group-focus-visible:misc-border-size-focus-ring", "interaction-transition transition-all", "after:border-misc-border after:misc-border-size-default after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "group-focus-active:after:bg-misc-visual-down group-hover:after:bg-misc-visual-hover group-focus-visible:after:bg-misc-visual-hover", "after:interaction-transition after:transition-all", {
9309
+ className: H("relative z-1 overflow-hidden", "flex items-center justify-center", "rounded-500 bg-surface-high", "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring", "interaction-transition transition-all", "after:border-misc-border after:misc-border-size-default after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "group-focus-active:after:bg-misc-visual-down group-hover:after:bg-misc-visual-hover group-focus-visible:after:bg-misc-visual-hover", "after:interaction-transition after:transition-all", {
9310
9310
  "h-[160px] max-w-[360px] min-w-[40px]": o === "height",
9311
9311
  "h-auto w-full": o === "width"
9312
9312
  }, y),
@@ -9657,7 +9657,7 @@ Kl.displayName = "NavigationButton";
9657
9657
  var ql = ({ className: e, buttonRef: t, children: n, as: r = "button", ...i }) => /* @__PURE__ */ E(r, {
9658
9658
  ref: t,
9659
9659
  type: "button",
9660
- className: V("shadow-500 focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring inline-flex appearance-none items-center justify-center rounded-full outline-hidden transition-colors", "bg-surface-high text-content-secondary hover:text-content-primary focus:text-content-primary active:text-content-primary", "h-8 w-8", e),
9660
+ className: V("shadow-500 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring inline-flex appearance-none items-center justify-center rounded-full outline-hidden transition-colors", "bg-surface-high text-content-secondary hover:text-content-primary focus:text-content-primary active:text-content-primary", "h-8 w-8", e),
9661
9661
  ...i,
9662
9662
  children: /* @__PURE__ */ E("div", {
9663
9663
  className: "h-4 w-4",
@@ -9794,7 +9794,7 @@ var ru = ({ title: e, imageSrc: t, imageAlt: n, onClick: r, className: i, varian
9794
9794
  })]
9795
9795
  }), iu = l(({ className: e, ...t }, n) => /* @__PURE__ */ E("button", {
9796
9796
  ref: n,
9797
- className: H("inline-flex items-center justify-center", "h-12 w-12", "shadow-500 rounded-full", "bg-black-alpha-4 hover:bg-black-alpha-5 active:bg-black-alpha-6", "text-white", "appearance-none outline-hidden transition-colors", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30", e),
9797
+ className: H("inline-flex items-center justify-center", "h-12 w-12", "shadow-500 rounded-full", "bg-black-alpha-4 hover:bg-black-alpha-5 active:bg-black-alpha-6", "text-white", "appearance-none outline-hidden transition-colors", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30", e),
9798
9798
  ...t,
9799
9799
  children: /* @__PURE__ */ E(Ce, {
9800
9800
  className: "h-5 w-5",
@@ -9908,7 +9908,7 @@ uu.displayName = "RoundedButton";
9908
9908
  var du = ({ href: e, title: t, size: n = "default", icon: r, iconElement: i, className: a, ...o }) => /* @__PURE__ */ E("a", {
9909
9909
  href: e,
9910
9910
  target: "_blank",
9911
- className: V("inline-flex cursor-pointer items-center justify-center", "rounded-500 outline-hidden", "hover:bg-neutral-200 focus-visible:bg-neutral-200 active:bg-neutral-300", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring", "text-black", "interaction-transition transition-all", {
9911
+ className: V("inline-flex cursor-pointer items-center justify-center", "rounded-500 outline-hidden", "hover:bg-neutral-200 focus-visible:bg-neutral-200 active:bg-neutral-300", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "text-black", "interaction-transition transition-all", {
9912
9912
  "h-12 w-12": n === "default",
9913
9913
  "h-10 w-10": n === "small"
9914
9914
  }, a),
@@ -23411,7 +23411,7 @@ var GT = "en", KT = {
23411
23411
  ]),
23412
23412
  onClick: a,
23413
23413
  "aria-label": i,
23414
- className: H("rounded-500 focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring text-[0] focus-visible:outline-hidden", n),
23414
+ className: H("rounded-500 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring text-[0] focus-visible:outline-hidden", n),
23415
23415
  children: /* @__PURE__ */ E(s, { className: "rounded-500 h-[56px] w-[180px]" })
23416
23416
  });
23417
23417
  };
@@ -32675,7 +32675,7 @@ gW.displayName = "MultiActionWidget";
32675
32675
  //#region src/components/collections/MultiActionWidget/ActionButton.tsx
32676
32676
  var _W = l(({ as: e, icon: t, title: n, description: r, href: i, className: a, disabled: o, onClick: s, ...c }, l) => {
32677
32677
  let u = /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("div", {
32678
- className: "rounded-400 bg-accent-alpha-1 text-content-accent flex h-10 w-10 shrink-0 items-center justify-center p-2",
32678
+ className: "rounded-400 bg-accent-alpha-100 text-content-accent flex h-10 w-10 shrink-0 items-center justify-center p-2",
32679
32679
  children: /* @__PURE__ */ E("div", {
32680
32680
  className: "h-6 w-6",
32681
32681
  children: t
@@ -33606,7 +33606,7 @@ var xG = U([
33606
33606
  "after:interaction-transition after:absolute after:rounded-full after:content-['']",
33607
33607
  "after:h-[calc(100%+2px)] after:w-[calc(100%+2px)]",
33608
33608
  "after:-top-px after:-left-px",
33609
- "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring"
33609
+ "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"
33610
33610
  ], {
33611
33611
  variants: { selected: {
33612
33612
  true: ["after:misc-border-size-selection after:misc-shadow-selection after:rounded-full after:border-black after:content-['']"],
@@ -33915,7 +33915,7 @@ var FG = U("rounded-300 component-semi-strong-300 inline-flex h-5 w-fit items-ce
33915
33915
  }), UG = ({ text: e, imageUrl: t, className: n, ...r }) => /* @__PURE__ */ D("button", {
33916
33916
  type: "button",
33917
33917
  ...r,
33918
- className: V("rounded-400 bg-background-subdued flex w-full items-center gap-3 p-2 text-start", "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring outline-hidden transition-all", n && n),
33918
+ className: V("rounded-400 bg-background-subdued flex w-full items-center gap-3 p-2 text-start", "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden transition-all", n && n),
33919
33919
  children: [t ? /* @__PURE__ */ E("img", {
33920
33920
  className: "rounded-300 h-8 w-8 shrink-0 object-cover",
33921
33921
  src: t,
@@ -34355,7 +34355,7 @@ var TK = ({ index: e, title: t, children: n, className: r, ...i }) => /* @__PURE
34355
34355
  kK.displayName = "PreviewBox";
34356
34356
  //#endregion
34357
34357
  //#region src/components/content/VisualToolTile/VisualToolTile.tsx
34358
- var AK = U("rounded-400 focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring relative flex items-start justify-start overflow-hidden py-3 ps-4 pe-11 outline-hidden", {
34358
+ var AK = U("rounded-400 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring relative flex items-start justify-start overflow-hidden py-3 ps-4 pe-11 outline-hidden", {
34359
34359
  variants: {
34360
34360
  variant: {
34361
34361
  default: "bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down",
@@ -35276,7 +35276,7 @@ var zq = U(["animate-bone-pulse shrink-0"], {
35276
35276
  "after:misc-border-size-default",
35277
35277
  "after:h-full after:w-full",
35278
35278
  "after:top-0 after:left-0",
35279
- "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring"
35279
+ "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"
35280
35280
  ], {
35281
35281
  variants: { selected: {
35282
35282
  true: ["after:misc-border-size-selection after:misc-shadow-selection after:border-black"],
@@ -46451,7 +46451,7 @@ var zde = U([
46451
46451
  "after:absolute after:inset-0 after:content-['']",
46452
46452
  "after:pointer-events-none after:rounded-[inherit]",
46453
46453
  "after:interaction-transition after:transition-colors",
46454
- "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring",
46454
+ "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
46455
46455
  "[&>img]:h-full [&>img]:w-full [&>img]:rounded-[inherit] [&>img]:object-cover"
46456
46456
  ], {
46457
46457
  variants: { selected: {
@@ -46542,7 +46542,7 @@ Z4.Item = X4;
46542
46542
  //#region src/components/feed/CollectionTile/CollectionTile.tsx
46543
46543
  var Bde = ({ title: e, images: t, objectFit: n, imageContainerClassName: r, onClick: i }) => /* @__PURE__ */ D("button", {
46544
46544
  onClick: i,
46545
- className: "rounded-500 bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring active:bg-background-subdued-down flex w-40 max-w-full flex-col gap-1.5 p-2 focus-visible:outline-hidden",
46545
+ className: "rounded-500 bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring active:bg-background-subdued-down flex w-40 max-w-full flex-col gap-1.5 p-2 focus-visible:outline-hidden",
46546
46546
  children: [/* @__PURE__ */ E("h6", {
46547
46547
  className: "component-400 text-content-primary",
46548
46548
  children: e
@@ -46564,7 +46564,7 @@ var Bde = ({ title: e, images: t, objectFit: n, imageContainerClassName: r, onCl
46564
46564
  className: V("resize-none appearance-none", "flex w-full items-center justify-between gap-2", {
46565
46565
  "p-1.5 pe-4": t,
46566
46566
  "px-4 py-3": !t
46567
- }, "rounded-400 border-misc-border border outline-hidden", "hover:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring", "disabled:cursor-not-allowed disabled:opacity-50", "component-500 text-start [word-break:break-word] placeholder-neutral-600", "transition duration-200", e),
46567
+ }, "rounded-400 border-misc-border border outline-hidden", "hover:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:cursor-not-allowed disabled:opacity-50", "component-500 text-start [word-break:break-word] placeholder-neutral-600", "transition duration-200", e),
46568
46568
  children: [
46569
46569
  !!t && /* @__PURE__ */ E("img", {
46570
46570
  src: t,
@@ -46588,7 +46588,7 @@ Q4.displayName = "Prompt";
46588
46588
  var $4 = l(({ children: e, className: t, ...n }, r) => /* @__PURE__ */ D("button", {
46589
46589
  ref: r,
46590
46590
  ...n,
46591
- className: V("rounded-400 bg-background-accent-subdued hover:bg-background-accent-subdued-hover active:bg-background-accent-subdued-down flex w-full items-center p-3", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring outline-hidden transition-all", "disabled:opacity-30", t),
46591
+ className: V("rounded-400 bg-background-accent-subdued hover:bg-background-accent-subdued-hover active:bg-background-accent-subdued-down flex w-full items-center p-3", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden transition-all", "disabled:opacity-30", t),
46592
46592
  children: [/* @__PURE__ */ E(Oe, {
46593
46593
  className: "text-content-accent h-4 w-4 shrink-0",
46594
46594
  "aria-hidden": !0
@@ -46613,7 +46613,7 @@ var Vde = ({ type: e = "prompt", image: t, icon: n = ve, label: r, ...i }) => {
46613
46613
  return /* @__PURE__ */ E("li", { children: /* @__PURE__ */ D("button", {
46614
46614
  type: "button",
46615
46615
  ...i,
46616
- className: V("rounded-500 flex w-full items-center gap-3 p-1", ...a, "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring outline-hidden transition-all", "disabled:opacity-30"),
46616
+ className: V("rounded-500 flex w-full items-center gap-3 p-1", ...a, "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden transition-all", "disabled:opacity-30"),
46617
46617
  children: [
46618
46618
  t && /* @__PURE__ */ E("img", {
46619
46619
  className: "rounded-300 h-8 w-8 shrink-0 object-cover",
@@ -47033,7 +47033,7 @@ var tfe = U("group/checkbox-indicator rounded-200 relative flex h-5 w-5 shrink-0
47033
47033
  className: V("group/checkbox relative inline-flex focus-visible:outline-hidden", "cursor-pointer disabled:pointer-events-none disabled:opacity-30", e),
47034
47034
  children: /* @__PURE__ */ E(h3, {
47035
47035
  variant: t,
47036
- className: "group-focus-within/checkbox:ring-accent-alpha-5 group-focus-within/checkbox:misc-border-size-focus-ring"
47036
+ className: "group-focus-within/checkbox:ring-misc-focus-indicator group-focus-within/checkbox:misc-border-size-focus-ring"
47037
47037
  })
47038
47038
  }), ife = ({ label: e, className: t, description: n, tooltip: r, isTooltipDisabled: i, variant: a, ...o }) => {
47039
47039
  let s = g(), c = o.id || s;
@@ -47510,7 +47510,7 @@ var lfe = (e) => e.isFile === !0, ufe = (e) => e.isDirectory === !0, T3 = async
47510
47510
  type: "button",
47511
47511
  onClick: b,
47512
47512
  autoFocus: u,
47513
- className: V("interaction-transition", "group/dropzone", "rounded-500", "border-neutral-alpha-400 border border-dashed", "w-full appearance-none select-none", "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring outline-hidden", "disabled:pointer-events-none disabled:opacity-30"),
47513
+ className: V("interaction-transition", "group/dropzone", "rounded-500", "border-neutral-alpha-400 border border-dashed", "w-full appearance-none select-none", "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden", "disabled:pointer-events-none disabled:opacity-30"),
47514
47514
  children: r || (o === "compact" ? /* @__PURE__ */ D("div", {
47515
47515
  className: "flex items-center justify-center gap-2 p-6",
47516
47516
  children: [/* @__PURE__ */ E(Me, { className: "text-content-tertiary size-5 shrink-0" }), /* @__PURE__ */ E("span", {
@@ -47614,7 +47614,7 @@ var j3 = ({ indeterminate: e, defaultIndeterminate: t, onIndeterminateChange: n,
47614
47614
  ...a,
47615
47615
  onCheckedChange: c,
47616
47616
  role: "checkbox",
47617
- className: V("group/switch peer relative inline-flex h-5 w-8 shrink-0 items-center justify-center rounded-full", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "cursor-pointer disabled:cursor-not-allowed disabled:opacity-30"),
47617
+ className: V("group/switch peer relative inline-flex h-5 w-8 shrink-0 items-center justify-center rounded-full", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "cursor-pointer disabled:cursor-not-allowed disabled:opacity-30"),
47618
47618
  children: [/* @__PURE__ */ E("span", {
47619
47619
  "aria-hidden": "true",
47620
47620
  className: V("pointer-events-none absolute mx-auto h-5 w-8 rounded-full transition-colors duration-200 ease-in-out", o ? "bg-content-accent" : "bg-neutral-400", "group-focus-visible/switch:bg-neutral-500", l ? "group-focus-visible/switch:bg-background-down group-radix-state-checked/switch:bg-background-default" : "group-focus-visible/switch:bg-content-accent-down group-radix-state-checked/switch:bg-content-accent")
@@ -47941,7 +47941,7 @@ var _fe = ({ label: e, icon: t, className: n, ...r }) => /* @__PURE__ */ E(xK, {
47941
47941
  }),
47942
47942
  children: [
47943
47943
  /* @__PURE__ */ E("span", {
47944
- className: V("group-radix-state-checked/radiogroupitem:border-content-accent border-neutral-400 hover:border-neutral-500", "group-focus-visible/radiogroupitem:ring-accent-alpha-5 group-focus-visible/radiogroupitem:misc-border-size-focus-ring", "misc-border-size-selection flex h-5 w-5 shrink-0 items-center justify-center rounded-full"),
47944
+ className: V("group-radix-state-checked/radiogroupitem:border-content-accent border-neutral-400 hover:border-neutral-500", "group-focus-visible/radiogroupitem:ring-misc-focus-indicator group-focus-visible/radiogroupitem:misc-border-size-focus-ring", "misc-border-size-selection flex h-5 w-5 shrink-0 items-center justify-center rounded-full"),
47945
47945
  "aria-hidden": "true",
47946
47946
  children: /* @__PURE__ */ E(SK, { className: "bg-content-accent h-2 w-2 rounded-full" })
47947
47947
  }),
@@ -48292,7 +48292,7 @@ var Sfe = ({ title: e, className: t, children: n, onClick: r }) => {
48292
48292
  children: /* @__PURE__ */ D("div", {
48293
48293
  className: "flex w-full flex-col gap-6",
48294
48294
  children: [/* @__PURE__ */ E("div", {
48295
- className: "rounded-200 border-accent-alpha-5 flex flex-1 items-center justify-center border border-dashed",
48295
+ className: "rounded-200 border-accent-alpha-500 flex flex-1 items-center justify-center border border-dashed",
48296
48296
  "aria-hidden": "true",
48297
48297
  children: /* @__PURE__ */ E(Me, {
48298
48298
  className: "text-content-accent h-[48px] w-[48px]",
@@ -48316,7 +48316,7 @@ var Sfe = ({ title: e, className: t, children: n, onClick: r }) => {
48316
48316
  "cursor-pointer": !r.disabled
48317
48317
  }),
48318
48318
  children: [/* @__PURE__ */ E("span", {
48319
- className: V("group-radix-state-checked/radiogroupitem:border-content-accent border-neutral-400 hover:border-neutral-500", "group-focus-visible/radiogroupitem:ring-accent-alpha-5 group-focus-visible/radiogroupitem:misc-border-size-focus-ring", "misc-border-size-selection flex h-5 w-5 shrink-0 items-center justify-center rounded-full"),
48319
+ className: V("group-radix-state-checked/radiogroupitem:border-content-accent border-neutral-400 hover:border-neutral-500", "group-focus-visible/radiogroupitem:ring-misc-focus-indicator group-focus-visible/radiogroupitem:misc-border-size-focus-ring", "misc-border-size-selection flex h-5 w-5 shrink-0 items-center justify-center rounded-full"),
48320
48320
  "aria-hidden": "true",
48321
48321
  children: /* @__PURE__ */ E(SK, { className: "bg-content-accent h-2 w-2 rounded-full" })
48322
48322
  }), /* @__PURE__ */ D("div", {
@@ -48479,7 +48479,7 @@ var wfe = ({ reaction: e, selected: t = !1, onClick: n }) => /* @__PURE__ */ E("
48479
48479
  });
48480
48480
  }, Dfe = (e) => /* @__PURE__ */ E("button", {
48481
48481
  ...e,
48482
- className: V("rounded-200 relative h-10 w-10 overflow-hidden bg-neutral-200 outline-hidden transition-all", "after:rounded-200 after:absolute after:inset-0 after:transition-all after:content-['']", "hover:after:bg-black-alpha-3", "active:after:bg-black-alpha-6", "focus-visible:after:bg-black-alpha-3", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring", e.disabled && "opacity-50")
48482
+ className: V("rounded-200 relative h-10 w-10 overflow-hidden bg-neutral-200 outline-hidden transition-all", "after:rounded-200 after:absolute after:inset-0 after:transition-all after:content-['']", "hover:after:bg-black-alpha-3", "active:after:bg-black-alpha-6", "focus-visible:after:bg-black-alpha-3", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", e.disabled && "opacity-50")
48483
48483
  }), Q3 = ({ title: e, children: t }) => /* @__PURE__ */ D("div", {
48484
48484
  className: "flex flex-col items-center gap-3",
48485
48485
  children: [!!e && /* @__PURE__ */ E("div", {
@@ -50150,7 +50150,7 @@ var qpe = v8, Jpe = C8, A8 = (e, t) => (n) => 100 * (n - e) / (t - e), j8 = [
50150
50150
  primary: "bg-content-primary"
50151
50151
  } },
50152
50152
  defaultVariants: { variant: "accent" }
50153
- }), Xpe = U("border-misc-border shadow-300 focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring block h-5 w-5 rounded-full border bg-white outline-hidden transition-all", {
50153
+ }), Xpe = U("border-misc-border shadow-300 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring block h-5 w-5 rounded-full border bg-white outline-hidden transition-all", {
50154
50154
  variants: { variant: {
50155
50155
  accent: "focus-visible:border-content-accent",
50156
50156
  primary: "focus-visible:border-content-primary"
@@ -51411,7 +51411,7 @@ var Zme = U(["rounded-400 flex flex-1 grow flex-col items-center justify-center
51411
51411
  return /* @__PURE__ */ D(AE, {
51412
51412
  value: t.value,
51413
51413
  disabled: r,
51414
- className: H("rounded-400 focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring relative flex shrink-0 grow outline-hidden transition-all disabled:cursor-not-allowed disabled:opacity-30", t.className),
51414
+ className: H("rounded-400 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring relative flex shrink-0 grow outline-hidden transition-all disabled:cursor-not-allowed disabled:opacity-30", t.className),
51415
51415
  "data-testid": `segmented-picker-item-${t.value}`,
51416
51416
  children: [/* @__PURE__ */ E(Qme, {
51417
51417
  value: t.value,
@@ -51433,7 +51433,7 @@ var Zme = U(["rounded-400 flex flex-1 grow flex-col items-center justify-center
51433
51433
  children: [
51434
51434
  /* @__PURE__ */ D("button", {
51435
51435
  type: "button",
51436
- className: V("flex w-full flex-row items-center gap-2 px-3 py-[11px]", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring disabled:opacity-30", "rounded-500 outline-hidden transition duration-200", i ? "cursor-default" : "cursor-pointer"),
51436
+ className: V("flex w-full flex-row items-center gap-2 px-3 py-[11px]", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring disabled:opacity-30", "rounded-500 outline-hidden transition duration-200", i ? "cursor-default" : "cursor-pointer"),
51437
51437
  onClick: () => !!e && u((e) => !e),
51438
51438
  disabled: a,
51439
51439
  children: [
@@ -51501,7 +51501,7 @@ T5.displayName = "SideNavigationItem";
51501
51501
  var E5 = ({ variant: e = "default", label: t, isActive: n, activeIcon: r, icon: i }) => {
51502
51502
  let a = n ? r : i;
51503
51503
  return /* @__PURE__ */ D("span", {
51504
- className: V("flex w-full flex-row items-center gap-3 py-[10px] pe-3", "group-focus-visible:ring-accent-alpha-5 group-focus-visible:misc-border-size-focus-ring group-disabled:opacity-30", "rounded-500 cursor-pointer outline-hidden transition duration-200", {
51504
+ className: V("flex w-full flex-row items-center gap-3 py-[10px] pe-3", "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring group-disabled:opacity-30", "rounded-500 cursor-pointer outline-hidden transition duration-200", {
51505
51505
  "text-content-primary": !n && e === "default",
51506
51506
  "text-content-positive": !n && e === "positive",
51507
51507
  "hover:bg-background-subdued-hover active:bg-background-subdued-down group-focus-visible:bg-background-subdued-hover bg-transparent": !n,
@@ -51810,7 +51810,7 @@ L5.displayName = "ChoiceGroup";
51810
51810
  //#region src/components/onboarding/ChoiceGroup/ChoiceTile.tsx
51811
51811
  var R5 = ({ label: e, imageSrc: t, className: n, children: r, ...i }) => /* @__PURE__ */ D("label", {
51812
51812
  ...i,
51813
- className: H("relative cursor-pointer select-none", "flex w-max flex-col", "rounded-500 misc-border-size-selection outline-hidden", "[&:has([data-state=unchecked])]:border-transparent", "[&:has([data-state=checked])]:border-accent-500", "[&:has([data-state=checked])]:misc-shadow-selection", "bg-background-subdued", "has-active:bg-background-subdued-down hover:bg-background-subdued-hover [&:has(:focus-visible)]:bg-background-subdued-hover", "[&:has(:focus-visible)]:ring-accent-alpha-5 [&:has(:focus-visible)]:misc-border-size-focus-ring", "transition-all", n),
51813
+ className: H("relative cursor-pointer select-none", "flex w-max flex-col", "rounded-500 misc-border-size-selection outline-hidden", "[&:has([data-state=unchecked])]:border-transparent", "[&:has([data-state=checked])]:border-accent-500", "[&:has([data-state=checked])]:misc-shadow-selection", "bg-background-subdued", "has-active:bg-background-subdued-down hover:bg-background-subdued-hover [&:has(:focus-visible)]:bg-background-subdued-hover", "[&:has(:focus-visible)]:ring-misc-focus-indicator [&:has(:focus-visible)]:misc-border-size-focus-ring", "transition-all", n),
51814
51814
  children: [r, /* @__PURE__ */ D("span", {
51815
51815
  className: "flex grow flex-col text-start",
51816
51816
  children: [/* @__PURE__ */ E("figure", {
@@ -51873,7 +51873,7 @@ var rhe = U([
51873
51873
  "inline-flex flex-row items-center gap-2",
51874
51874
  "w-full px-4 py-3",
51875
51875
  "rounded-500 border outline-hidden",
51876
- "[&:has(:focus-visible)]:ring-accent-alpha-5 [&:has(:focus-visible)]:misc-border-size-focus-ring",
51876
+ "[&:has(:focus-visible)]:ring-misc-focus-indicator [&:has(:focus-visible)]:misc-border-size-focus-ring",
51877
51877
  "transition-all"
51878
51878
  ], {
51879
51879
  variants: {
@@ -53129,7 +53129,7 @@ C7.displayName = "HightLightedText";
53129
53129
  //#endregion
53130
53130
  //#region src/components/unsorted/InfoBanner/InfoBanner.tsx
53131
53131
  var tge = ({ icon: e, label: t, className: n }) => /* @__PURE__ */ D("div", {
53132
- className: V("bg-accent-alpha-2 text-500 text-content-accent flex h-8 flex-row items-center justify-center gap-1 font-medium", n),
53132
+ className: V("bg-accent-alpha-200 text-500 text-content-accent flex h-8 flex-row items-center justify-center gap-1 font-medium", n),
53133
53133
  children: [e && /* @__PURE__ */ E(e, { className: "h-4 w-4 shrink-0 text-current" }), /* @__PURE__ */ E("div", { children: t })]
53134
53134
  });
53135
53135
  //#endregion
@@ -54220,7 +54220,7 @@ var r9 = {
54220
54220
  ref: u,
54221
54221
  disabled: a,
54222
54222
  type: "number",
54223
- className: V("component-500 border-misc-border-box bg-surface-default text-content-primary h-10 w-10 border-0 border-y p-0 text-center focus:ring-0", "focus-visible:border-content-accent focus-visible:border focus-visible:outline-hidden", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring focus-visible:rounded-[3px]", "group-hover:[&:not(:focus-visible)]:border-misc-border-box-hover", "group-focus-visible:[&:not(:focus-visible)]:border-misc-border-box-hover", "group-disabled:opacity-30"),
54223
+ className: V("component-500 border-misc-border-box bg-surface-default text-content-primary h-10 w-10 border-0 border-y p-0 text-center focus:ring-0", "focus-visible:border-content-accent focus-visible:border focus-visible:outline-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:rounded-[3px]", "group-hover:[&:not(:focus-visible)]:border-misc-border-box-hover", "group-focus-visible:[&:not(:focus-visible)]:border-misc-border-box-hover", "group-disabled:opacity-30"),
54224
54224
  value: f,
54225
54225
  onFocus: F,
54226
54226
  onChange: P,
@@ -56835,7 +56835,7 @@ var bve = ({ titleBlock: e, content: t, ctaLabel: n, ctaLink: r, ...i }) => /* @
56835
56835
  className: "group inline-flex w-full flex-col gap-3 outline-hidden",
56836
56836
  ...a,
56837
56837
  children: [/* @__PURE__ */ D("div", {
56838
- className: V("relative flex", "rounded-500 aspect-video overflow-hidden", "group-focus-visible:ring-accent-alpha-5 group-focus-visible:misc-border-size-focus-ring", "transition-all"),
56838
+ className: V("relative flex", "rounded-500 aspect-video overflow-hidden", "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring", "transition-all"),
56839
56839
  children: [i, /* @__PURE__ */ E("div", { className: "rounded-500 ring-misc-border pointer-events-none absolute inset-0 ring-1 ring-inset" })]
56840
56840
  }), /* @__PURE__ */ D("div", {
56841
56841
  className: "flex flex-col gap-1",
@@ -56886,7 +56886,7 @@ var Dve = ({ title: e, children: t, cta: n, image: r, ...i }) => {
56886
56886
  });
56887
56887
  }, V9 = l(({ as: e = "a", title: t, image: n, ...r }, i) => r.href ? /* @__PURE__ */ D(e, {
56888
56888
  ref: i,
56889
- className: V("rounded-500 bg-background-subdued inline-flex items-center gap-2.5 p-3", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover", "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring outline-hidden transition-all"),
56889
+ className: V("rounded-500 bg-background-subdued inline-flex items-center gap-2.5 p-3", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden transition-all"),
56890
56890
  ...r,
56891
56891
  children: [!!n && /* @__PURE__ */ D("div", {
56892
56892
  className: "rounded-200 relative flex size-10 shrink-0 overflow-hidden [&>img]:h-full [&>img]:w-full [&>img]:object-cover",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@photoroom/ui",
3
- "version": "0.1.189",
3
+ "version": "0.1.190",
4
4
  "private": false,
5
5
  "description": "Photoroom design system components",
6
6
  "sideEffects": [
package/theme.css CHANGED
@@ -61,11 +61,11 @@
61
61
  --color-accent-400: var(--color-accent-400);
62
62
  --color-accent-500: var(--color-accent-500);
63
63
  --color-accent-600: var(--color-accent-600);
64
- --color-accent-alpha-1: var(--color-accent-alpha-1);
65
- --color-accent-alpha-2: var(--color-accent-alpha-2);
66
- --color-accent-alpha-3: var(--color-accent-alpha-3);
67
- --color-accent-alpha-4: var(--color-accent-alpha-4);
68
- --color-accent-alpha-5: var(--color-accent-alpha-5);
64
+ --color-accent-alpha-100: var(--color-accent-alpha-100);
65
+ --color-accent-alpha-200: var(--color-accent-alpha-200);
66
+ --color-accent-alpha-300: var(--color-accent-alpha-300);
67
+ --color-accent-alpha-400: var(--color-accent-alpha-400);
68
+ --color-accent-alpha-500: var(--color-accent-alpha-500);
69
69
 
70
70
  /* Positive */
71
71
  --color-positive-400: var(--color-positive-400);