@player-ui/reference-assets-plugin-react 0.10.0-next.0 → 0.10.0-next.1

package/src/assets/choice/Choice.tsx

@@ -18,7 +18,7 @@ export const Choice = (props: TransformedChoice) => {
     ));
 
   return (
-    <div className="grid w-full max-w-sm items-center gap-3">
+    <div className="player-grid player-w-full player-max-w-sm player-items-center player-gap-3">
       {title && (
         <Label htmlFor={id}>
           <ReactAsset {...title} />
@@ -26,7 +26,7 @@ export const Choice = (props: TransformedChoice) => {
       )}
       <div
         id={props.id}
-        className="grid gap-2"
+        className="player-grid player-gap-2"
         aria-invalid={Boolean(validation)}
         aria-describedby={validation ? `${id}-validation` : undefined}
       >
@@ -35,13 +35,13 @@ export const Choice = (props: TransformedChoice) => {
       {validation && (
         <Label
           id={`${id}-validation`}
-          className="text-[0.8rem] font-medium text-destructive"
+          className="player-text-[0.8rem] player-font-medium player-text-destructive"
         >
           {validation.message}
         </Label>
       )}
       {note && (
-        <Label className="text-[0.8rem] text-muted-foreground">
+        <Label className="player-text-[0.8rem] player-text-muted-foreground">
           <ReactAsset {...note} />
         </Label>
       )}

package/src/assets/collection/Collection.tsx

@@ -4,7 +4,7 @@ import type { CollectionAsset } from "@player-ui/reference-assets-plugin";
 
 export const Collection = (props: CollectionAsset) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="player-flex player-flex-col player-gap-4">
       {props.label && (
         <h3>
           <ReactAsset {...props.label} />

package/src/assets/image/Image.tsx

@@ -6,10 +6,14 @@ export const Image = (props: TransformedImage) => {
   const { metaData, caption, altText } = props;
 
   return (
-    <figure className="figure">
-      <img className="figure-img img-fluid" src={metaData.ref} alt={altText} />
+    <figure className="player-figure">
+      <img
+        className="player-figure-img player-img-fluid"
+        src={metaData.ref}
+        alt={altText}
+      />
       {caption && (
-        <figcaption className="figure-caption" style={{ marginTop: 15 }}>
+        <figcaption className="player-figure-caption" style={{ marginTop: 15 }}>
           <ReactAsset {...caption} />
         </figcaption>
       )}

package/src/assets/info/Info.tsx

@@ -6,15 +6,15 @@ import { Separator } from "../../components/Separator";
 /** The info view type is used to show information to the user */
 export const Info = (props: InfoAssetTransform) => {
   return (
-    <div className="max-w-full">
-      <div className="flex flex-col gap-4">
+    <div className="player-max-w-full">
+      <div className="player-flex player-flex-col player-gap-4">
         {props.title && (
-          <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+          <h1 className="player-scroll-m-20 player-text-4xl player-font-extrabold player-tracking-tight lg:player-text-5xl">
             <ReactAsset {...props.title} />
           </h1>
         )}
         {props.subTitle && (
-          <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+          <h3 className="player-scroll-m-20 player-text-2xl player-font-semibold player-tracking-tight">
             <ReactAsset {...props.subTitle} />
           </h3>
         )}
@@ -23,15 +23,15 @@ export const Info = (props: InfoAssetTransform) => {
             <ReactAsset {...props.primaryInfo} />
           </div>
         )}
-        <div className="flex flex-col gap-4">
+        <div className="player-flex player-flex-col player-gap-4">
           {props?.segmentedActions && <Separator />}
-          <div className="flex justify-between sm:flex-row flex-col-reverse gap-4">
-            <div className="flex gap-4">
+          <div className="player-flex player-justify-between sm:player-flex-row player-flex-col-reverse player-gap-4">
+            <div className="player-flex player-gap-4">
               {props?.segmentedActions?.prev?.map((a) => (
                 <ReactAsset key={a.asset.id} {...a} />
               ))}
             </div>
-            <div className="flex gap-4">
+            <div className="player-flex player-gap-4">
               {props?.segmentedActions?.next?.map((a) => (
                 <ReactAsset key={a.asset.id} {...a} />
               ))}

package/src/assets/input/Input.tsx

@@ -12,7 +12,7 @@ export const Input = (props: TransformedInput) => {
   const inputProps = useInputAsset(props);
 
   return (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
+    <div className="player-grid player-w-full player-max-w-sm player-items-center player-gap-1.5">
       {label && (
         <Label htmlFor={id}>
           <ReactAsset {...label} />
@@ -27,13 +27,13 @@ export const Input = (props: TransformedInput) => {
       {validation && (
         <Label
           id={`${id}-validation`}
-          className="text-[0.8rem] font-medium text-destructive"
+          className="player-text-[0.8rem] player-font-medium player-text-destructive"
         >
           {validation.message}
         </Label>
       )}
       {note && (
-        <Label className="text-[0.8rem] text-muted-foreground">
+        <Label className="player-text-[0.8rem] player-text-muted-foreground">
           <ReactAsset {...note} />
         </Label>
       )}

package/src/assets/text/Text.tsx

@@ -23,7 +23,7 @@ export const Text = (props: TextAsset) => {
   if (linkModifier) {
     return (
       <a
-        className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+        className="player-underline player-text-blue-600 hover:player-text-blue-800 visited:player-text-purple-600"
         href={linkModifier.metaData.ref}
       >
         {value}

package/src/components/Button.tsx

@@ -4,26 +4,26 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils";
 
 const buttonVariants = cva(
-  "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",
+  "player-inline-flex player-items-center player-justify-center player-whitespace-nowrap player-rounded-md player-text-sm player-font-medium player-transition-colors focus-visible:player-outline-none focus-visible:player-ring-1 focus-visible:player-ring-ring disabled:player-pointer-events-none disabled:player-opacity-50",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "player-bg-primary player-text-primary-foreground player-shadow hover:player-bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "player-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",
+          "player-border player-border-input player-bg-background player-shadow-sm hover:player-bg-accent hover:player-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",
+          "player-bg-secondary player-text-secondary-foreground player-shadow-sm hover:player-bg-secondary/80",
+        ghost: "hover:player-bg-accent hover:player-text-accent-foreground",
+        link: "player-text-primary player-underline-offset-4 hover:player-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",
+        default: "player-h-9 player-px-4 player-py-2",
+        sm: "player-h-8 player-rounded-md player-px-3 player-text-xs",
+        lg: "player-h-10 player-rounded-md player-px-8",
+        icon: "player-h-9 player-w-9",
       },
     },
     defaultVariants: {

package/src/components/ChoiceItem.tsx

@@ -12,10 +12,10 @@ export const ChoiceItem = (props: ChoiceItemProps) => {
   const { label, id, ...rest } = props;
 
   return (
-    <div className="flex items-center gap-1.5">
+    <div className="player-flex player-items-center player-gap-1.5">
       <InputComp
         type="radio"
-        className="h-fit w-fit shadow-none"
+        className="player-h-fit player-w-fit player-shadow-none"
         id={id}
         {...rest}
       />

package/src/components/Input.tsx

@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={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",
+          "player-flex player-h-9 player-w-full player-rounded-md player-border player-border-input player-bg-transparent player-px-3 player-py-1 player-text-sm player-shadow-sm player-transition-colors file:player-border-0 file:player-bg-transparent file:player-text-sm file:player-font-medium placeholder:player-text-muted-foreground focus-visible:player-outline-none focus-visible:player-ring-1 focus-visible:player-ring-ring player-disabled:player-cursor-not-allowed disabled:player-opacity-50",
           className,
         )}
         ref={ref}

package/src/components/Label.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "player-text-sm player-font-medium player-leading-none peer-disabled:player-cursor-not-allowed peer-disabled:player-opacity-70",
 );
 
 const Label = React.forwardRef<

package/src/components/Separator.tsx

@@ -17,8 +17,10 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        "player-shrink-0 player-bg-border",
+        orientation === "horizontal"
+          ? "player-h-[1px] player-w-full"
+          : "player-h-full player-w-[1px]",
         className,
       )}
       {...props}

package/src/global.css

@@ -4,80 +4,68 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
+    --player-background: 0 0% 100%;
+    --player-foreground: 222.2 47.4% 11.2%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --player-muted: 210 40% 96.1%;
+    --player-muted-foreground: 215.4 16.3% 46.9%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+    --player-popover: 0 0% 100%;
+    --player-popover-foreground: 222.2 47.4% 11.2%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --player-border: 214.3 31.8% 91.4%;
+    --player-input: 214.3 31.8% 91.4%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+    --player-card: 0 0% 100%;
+    --player-card-foreground: 222.2 47.4% 11.2%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --player-primary: 222.2 47.4% 11.2%;
+    --player-primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --player-secondary: 210 40% 96.1%;
+    --player-secondary-foreground: 222.2 47.4% 11.2%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --player-accent: 210 40% 96.1%;
+    --player-accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
+    --player-destructive: 0 100% 50%;
+    --player-destructive-foreground: 210 40% 98%;
 
-    --ring: 215 20.2% 65.1%;
+    --player-ring: 215 20.2% 65.1%;
 
-    --radius: 0.5rem;
+    --player-radius: 0.5rem;
   }
 
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+  .player-dark {
+    --player-background: 224 71% 4%;
+    --player-foreground: 213 31% 91%;
 
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+    --player-muted: 223 47% 11%;
+    --player-muted-foreground: 215.4 16.3% 56.9%;
 
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
+    --player-accent: 216 34% 17%;
+    --player-accent-foreground: 210 40% 98%;
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+    --player-popover: 224 71% 4%;
+    --player-popover-foreground: 215 20.2% 65.1%;
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+    --player-border: 216 34% 17%;
+    --player-input: 216 34% 17%;
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+    --player-card: 224 71% 4%;
+    --player-card-foreground: 213 31% 91%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+    --player-primary: 210 40% 98%;
+    --player-primary-foreground: 222.2 47.4% 1.2%;
 
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
+    --player-secondary: 222.2 47.4% 11.2%;
+    --player-secondary-foreground: 210 40% 98%;
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+    --player-destructive: 0 63% 31%;
+    --player-destructive-foreground: 210 40% 98%;
 
-    --ring: 216 34% 17%;
+    --player-ring: 216 34% 17%;
 
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
+    --player-radius: 0.5rem;
   }
 }