@player-ui/reference-assets-plugin-react 0.8.0--canary.307.9621 → 0.8.0-next.0

package/dist/index.legacy-esm.js

@@ -0,0 +1,529 @@
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/plugin.tsx
+import { AssetProviderPlugin } from "@player-ui/asset-provider-plugin-react";
+import { ReferenceAssetsPlugin as ReferenceAssetsCorePlugin } from "@player-ui/reference-assets-plugin";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/input/Input.tsx
+import React4 from "react";
+import { ReactAsset } from "@player-ui/react";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Input.tsx
+import * as React from "react";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Input.tsx
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Label.tsx
+import * as React2 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/input/hooks.tsx
+import React3 from "react";
+import { useBeacon } from "@player-ui/beacon-plugin-react";
+var defaultKeyStrings = [
+  "Delete",
+  "Backspace",
+  "Tab",
+  "Home",
+  "End",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Escape"
+];
+var getConfig = (userConfig = {}) => {
+  return {
+    liveFormat: true,
+    suppressBeacons: false,
+    quickFormatDelay: 200,
+    slowFormatDelay: 1e3,
+    slowFormatKeys: defaultKeyStrings,
+    decimalSymbol: ".",
+    prefix: "",
+    suffix: "",
+    ...userConfig
+  };
+};
+var useInputBeacon = (props) => {
+  const beaconHandler = useBeacon({ element: "text_input", asset: props });
+  return (newValue) => {
+    let action = "modified";
+    if (newValue === props.value) {
+      return;
+    }
+    if (newValue && !props.value) {
+      action = "added";
+    } else if (!newValue && props.value) {
+      action = "deleted";
+    }
+    beaconHandler({ action });
+  };
+};
+var useInputAsset = (props, config) => {
+  const [localValue, setLocalValue] = React3.useState(props.value ?? "");
+  const formatTimerRef = React3.useRef(void 0);
+  const inputBeacon = useInputBeacon(props);
+  const {
+    liveFormat,
+    suppressBeacons,
+    quickFormatDelay,
+    slowFormatDelay,
+    slowFormatKeys,
+    decimalSymbol,
+    prefix,
+    suffix
+  } = getConfig(config);
+  function clearPending() {
+    if (formatTimerRef.current) {
+      clearTimeout(formatTimerRef.current);
+      formatTimerRef.current = void 0;
+    }
+  }
+  function getFormatDelaySpeed(e) {
+    const key = slowFormatKeys.every((k) => typeof k === "number") ? e.which : e.key;
+    return slowFormatKeys.includes(key) ? slowFormatDelay : quickFormatDelay;
+  }
+  function handleAffixOnFocus(target) {
+    let val = target.value;
+    if (suffix)
+      val = val.substring(0, val.indexOf(suffix));
+    if (prefix && !val.includes(prefix)) {
+      val = `${prefix}${val}`;
+    }
+    return val;
+  }
+  function handlePrefixEdgeCases(e) {
+    const target = e.target;
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    const pl = prefix.length;
+    const atStart = start === pl;
+    const atEnd = end === pl;
+    if (start && end && start < pl) {
+      e.preventDefault();
+      target.setSelectionRange(pl, end - start + pl);
+    } else if (e.key === "ArrowLeft" && atStart || e.key === "Backspace" && atStart && atEnd || e.key === "Home") {
+      e.preventDefault();
+      target.setSelectionRange(prefix.length, prefix.length);
+    }
+  }
+  function formatValueWithAffix(value) {
+    if (!value)
+      return "";
+    return `${prefix}${value}${suffix}`;
+  }
+  const onKeyDownHandler = (currentValue) => {
+    const symbolPosition = currentValue.indexOf(decimalSymbol);
+    const newValue = props.format(currentValue) ?? "";
+    const newSymbolPosition = newValue.indexOf(decimalSymbol);
+    if ((symbolPosition === -1 || symbolPosition === 0) && newSymbolPosition > 0) {
+      return {
+        newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`,
+        newCursorPosition: newValue.includes(prefix) ? newSymbolPosition : newSymbolPosition + prefix.length
+      };
+    }
+    return {
+      newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`
+    };
+  };
+  const onBlur = (e) => {
+    clearPending();
+    const formatted = (prefix ? e.target.value.replace(prefix, "") : props.format(e.target.value)) ?? "";
+    if (formatted) {
+      props.set(formatted);
+      setLocalValue(formatValueWithAffix(formatted));
+    } else {
+      props.set("");
+      setLocalValue("");
+    }
+    if (!suppressBeacons) {
+      inputBeacon(formatted);
+    }
+  };
+  const onChange = (e) => {
+    setLocalValue(e.target.value);
+  };
+  const onKeyDown = (e) => {
+    clearPending();
+    if (prefix)
+      handlePrefixEdgeCases(e);
+    const target = e.target;
+    if (liveFormat) {
+      formatTimerRef.current = setTimeout(() => {
+        const cursorPosition = target.selectionStart;
+        const currentValue = target.value;
+        if (cursorPosition !== currentValue.length) {
+          return;
+        }
+        const obj = onKeyDownHandler(currentValue);
+        setLocalValue(obj.newValue);
+        target.selectionStart = obj.newCursorPosition ?? target.selectionStart;
+        target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;
+      }, getFormatDelaySpeed(e));
+    }
+  };
+  const onFocus = (e) => {
+    const target = e.target;
+    const inputEmpty = target.value === "";
+    if (!inputEmpty && suffix || inputEmpty && prefix) {
+      setLocalValue(handleAffixOnFocus(target));
+    }
+  };
+  const propsValue = props.value;
+  React3.useEffect(() => {
+    setLocalValue(formatValueWithAffix(propsValue));
+  }, [propsValue]);
+  React3.useEffect(() => clearPending, []);
+  return {
+    onBlur,
+    onChange,
+    onKeyDown,
+    onFocus,
+    value: localValue
+  };
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/input/Input.tsx
+var Input2 = (props) => {
+  const { validation, label, id, note } = props;
+  const inputProps = useInputAsset(props);
+  return /* @__PURE__ */ React4.createElement("div", { className: "grid w-full max-w-sm items-center gap-1.5" }, label && /* @__PURE__ */ React4.createElement(Label, { htmlFor: id }, /* @__PURE__ */ React4.createElement(ReactAsset, { ...label })), /* @__PURE__ */ React4.createElement(
+    Input,
+    {
+      id,
+      "aria-invalid": Boolean(validation),
+      "aria-describedby": validation ? `${id}-validation` : void 0,
+      ...inputProps
+    }
+  ), validation && /* @__PURE__ */ React4.createElement(
+    Label,
+    {
+      id: `${id}-validation`,
+      className: "text-[0.8rem] font-medium text-destructive"
+    },
+    validation.message
+  ), note && /* @__PURE__ */ React4.createElement(Label, { className: "text-[0.8rem] text-muted-foreground" }, /* @__PURE__ */ React4.createElement(ReactAsset, { ...note })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/text/Text.tsx
+import React6 from "react";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/text/hooks.tsx
+import React5, { useContext } from "react";
+import makeClass from "clsx";
+import { useAssetProps } from "@player-ui/react";
+var TextModifierContext = React5.createContext(void 0);
+var useText = (props) => {
+  let className;
+  const modifierContext = useContext(TextModifierContext);
+  if (props.modifiers && modifierContext?.getClassForModifier) {
+    className = makeClass(
+      ...props.modifiers.map(modifierContext.getClassForModifier)
+    );
+  }
+  return {
+    ...useAssetProps(props),
+    className,
+    children: props.value
+  };
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/text/Text.tsx
+var getLinkModifier = (asset) => {
+  return asset.modifiers?.find(
+    (mod) => mod.type === "link" && mod.metaData?.ref !== void 0
+  );
+};
+var Text = (props) => {
+  const spanProps = useText(props);
+  const linkModifier = getLinkModifier(props);
+  const { value } = props;
+  if (linkModifier) {
+    return /* @__PURE__ */ React6.createElement(
+      "a",
+      {
+        className: "underline text-blue-600 hover:text-blue-800 visited:text-purple-600",
+        href: linkModifier.metaData.ref
+      },
+      value
+    );
+  }
+  return /* @__PURE__ */ React6.createElement("span", { ...spanProps }, value);
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/collection/Collection.tsx
+import React7 from "react";
+import { ReactAsset as ReactAsset2 } from "@player-ui/react";
+var Collection = (props) => {
+  return /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col gap-4" }, props.label && /* @__PURE__ */ React7.createElement("h3", null, /* @__PURE__ */ React7.createElement(ReactAsset2, { ...props.label })), props.values?.map((a) => /* @__PURE__ */ React7.createElement(ReactAsset2, { key: a.asset.id, ...a })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/action/Action.tsx
+import React10 from "react";
+import { ReactAsset as ReactAsset4 } from "@player-ui/react";
+import { ChevronLeftIcon } from "lucide-react";
+import { isBackAction } from "@player-ui/reference-assets-plugin";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/action/hooks.tsx
+import React8 from "react";
+import { ReactAsset as ReactAsset3 } from "@player-ui/react";
+import { useBeacon as useBeacon2 } from "@player-ui/beacon-plugin-react";
+var useAction = (props) => {
+  const { label } = props;
+  const beacon = useBeacon2({
+    asset: props,
+    action: "clicked",
+    element: "button"
+  });
+  return {
+    id: props.id,
+    onClick: () => {
+      beacon();
+      props.run();
+    },
+    children: label?.asset ? /* @__PURE__ */ React8.createElement(ReactAsset3, { ...label?.asset }) : null
+  };
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Button.tsx
+import * as React9 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+var buttonVariants = cva2(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React9.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ React9.createElement(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/action/Action.tsx
+var Action = (props) => {
+  const { label } = props;
+  const buttonProps = useAction(props);
+  return /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement(
+    Button,
+    {
+      variant: isBackAction(props) ? "outline" : void 0,
+      ...buttonProps
+    },
+    props?.metaData?.role === "back" && /* @__PURE__ */ React10.createElement(ChevronLeftIcon, null),
+    label && /* @__PURE__ */ React10.createElement(ReactAsset4, { ...label })
+  ));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/info/Info.tsx
+import React12 from "react";
+import { ReactAsset as ReactAsset5 } from "@player-ui/react";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Separator.tsx
+import * as React11 from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+var Separator = React11.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React11.createElement(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/info/Info.tsx
+var Info = (props) => {
+  return /* @__PURE__ */ React12.createElement("div", { className: "max-w-full" }, /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col gap-4" }, props.title && /* @__PURE__ */ React12.createElement("h1", { className: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl" }, /* @__PURE__ */ React12.createElement(ReactAsset5, { ...props.title })), props.subTitle && /* @__PURE__ */ React12.createElement("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight" }, /* @__PURE__ */ React12.createElement(ReactAsset5, { ...props.subTitle })), props.primaryInfo && /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(ReactAsset5, { ...props.primaryInfo })), /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col gap-4" }, props?.segmentedActions && /* @__PURE__ */ React12.createElement(Separator, null), /* @__PURE__ */ React12.createElement("div", { className: "flex justify-between sm:flex-row flex-col-reverse gap-4" }, /* @__PURE__ */ React12.createElement("div", { className: "flex gap-4" }, props?.segmentedActions?.prev?.map((a) => /* @__PURE__ */ React12.createElement(ReactAsset5, { key: a.asset.id, ...a }))), /* @__PURE__ */ React12.createElement("div", { className: "flex gap-4" }, props?.segmentedActions?.next?.map((a) => /* @__PURE__ */ React12.createElement(ReactAsset5, { key: a.asset.id, ...a })))))));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/image/Image.tsx
+import React13 from "react";
+import { ReactAsset as ReactAsset6 } from "@player-ui/react";
+var Image = (props) => {
+  const { metaData, caption, altText } = props;
+  return /* @__PURE__ */ React13.createElement("figure", { className: "figure" }, /* @__PURE__ */ React13.createElement("img", { className: "figure-img img-fluid", src: metaData.ref, alt: altText }), caption && /* @__PURE__ */ React13.createElement("figcaption", { className: "figure-caption", style: { marginTop: 15 } }, /* @__PURE__ */ React13.createElement(ReactAsset6, { ...caption })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/choice/Choice.tsx
+import React15 from "react";
+import { ReactAsset as ReactAsset8 } from "@player-ui/react";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/ChoiceItem.tsx
+import React14 from "react";
+import { ReactAsset as ReactAsset7 } from "@player-ui/react";
+var ChoiceItem = (props) => {
+  const { label, id, ...rest } = props;
+  return /* @__PURE__ */ React14.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React14.createElement(
+    Input,
+    {
+      type: "radio",
+      className: "h-fit w-fit shadow-none",
+      id,
+      ...rest
+    }
+  ), label && /* @__PURE__ */ React14.createElement(Label, { htmlFor: id }, /* @__PURE__ */ React14.createElement(ReactAsset7, { ...label })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/choice/hooks.tsx
+import { useBeacon as useBeacon3 } from "@player-ui/beacon-plugin-react";
+var useChoiceItems = (props) => {
+  const beacon = useBeacon3({
+    asset: props,
+    action: "clicked",
+    element: "choice"
+  });
+  return props.items?.map((item) => {
+    const { id, value, label } = item;
+    return {
+      id,
+      label,
+      name: props.id,
+      value: (value ?? "").toString(),
+      checked: value === props.value,
+      onChange: () => {
+        beacon();
+        item.select();
+      }
+    };
+  }) ?? [];
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/choice/Choice.tsx
+var Choice = (props) => {
+  const { validation, title, id, note } = props;
+  const choiceItemProps = useChoiceItems(props);
+  const renderChoices = () => choiceItemProps.map((choiceItemProp) => /* @__PURE__ */ React15.createElement(ChoiceItem, { key: choiceItemProp.id, ...choiceItemProp }));
+  return /* @__PURE__ */ React15.createElement("div", { className: "grid w-full max-w-sm items-center gap-3" }, title && /* @__PURE__ */ React15.createElement(Label, { htmlFor: id }, /* @__PURE__ */ React15.createElement(ReactAsset8, { ...title })), /* @__PURE__ */ React15.createElement(
+    "div",
+    {
+      id: props.id,
+      className: "grid gap-2",
+      "aria-invalid": Boolean(validation),
+      "aria-describedby": validation ? `${id}-validation` : void 0
+    },
+    renderChoices()
+  ), validation && /* @__PURE__ */ React15.createElement(
+    Label,
+    {
+      id: `${id}-validation`,
+      className: "text-[0.8rem] font-medium text-destructive"
+    },
+    validation.message
+  ), note && /* @__PURE__ */ React15.createElement(Label, { className: "text-[0.8rem] text-muted-foreground" }, /* @__PURE__ */ React15.createElement(ReactAsset8, { ...note })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/plugin.tsx
+var ReferenceAssetsPlugin = class {
+  constructor() {
+    this.name = "reference-assets-web-plugin";
+  }
+  applyReact(reactPlayer) {
+    reactPlayer.registerPlugin(
+      new AssetProviderPlugin([
+        ["input", Input2],
+        ["text", Text],
+        ["action", Action],
+        ["info", Info],
+        ["collection", Collection],
+        ["image", Image],
+        ["choice", Choice]
+      ])
+    );
+  }
+  apply(player) {
+    player.registerPlugin(new ReferenceAssetsCorePlugin());
+  }
+};
+export {
+  Action,
+  Choice,
+  Collection,
+  Image,
+  Info,
+  Input2 as Input,
+  ReferenceAssetsPlugin,
+  Text,
+  TextModifierContext,
+  getConfig,
+  getLinkModifier,
+  useAction,
+  useChoiceItems,
+  useInputAsset,
+  useInputBeacon,
+  useText
+};
+//# sourceMappingURL=index.mjs.map