@refineui/react 0.3.0 → 0.4.0

package/refineui.css

@@ -337,8 +337,8 @@
   .inset-x-0 {
     inset-inline: 0px;
   }
-  .inset-x-refineui-size-xxx-small {
-    inset-inline: var(--spacing-refineui-size-xxx-small);
+  .inset-x-refineui-size-small {
+    inset-inline: var(--spacing-refineui-size-small);
   }
   .inset-y-0 {
     inset-block: 0px;
@@ -346,8 +346,8 @@
   .inset-y-\[calc\(var\(--refineui-spacing-size-small\)-var\(--refineui-spacing-size-x-small\)\)\] {
     inset-block: calc(var(--refineui-spacing-size-small) - var(--refineui-spacing-size-x-small));
   }
-  .inset-y-refineui-size-xxx-small {
-    inset-block: var(--spacing-refineui-size-xxx-small);
+  .inset-y-refineui-size-small {
+    inset-block: var(--spacing-refineui-size-small);
   }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
@@ -871,6 +871,9 @@
   .min-h-refineui-pagination-button-min-width {
     min-height: var(--spacing-refineui-pagination-button-min-width);
   }
+  .min-h-refineui-size-x-large {
+    min-height: var(--spacing-refineui-size-x-large);
+  }
   .w-\[calc\(var\(--refineui-sidebar-peek-panel-width\)\+2\*var\(--refineui-spacing-size-x-small\)\)\] {
     width: calc(var(--refineui-sidebar-peek-panel-width) + 2 * var(--refineui-spacing-size-x-small));
   }
@@ -1000,6 +1003,9 @@
   .min-w-refineui-popover-panel-width {
     min-width: var(--spacing-refineui-popover-panel-width);
   }
+  .min-w-refineui-size-x-large {
+    min-width: var(--spacing-refineui-size-x-large);
+  }
   .min-w-refineui-size-xx-large {
     min-width: var(--spacing-refineui-size-xx-large);
   }
@@ -1353,6 +1359,9 @@
   .self-center {
     align-self: center;
   }
+  .self-end {
+    align-self: flex-end;
+  }
   .self-start {
     align-self: flex-start;
   }
@@ -1732,6 +1741,18 @@
   .align-middle {
     vertical-align: middle;
   }
+  .refineui-typo-caption-1 {
+    font-family: var(--refineui-typography-caption-1-font-family);
+    font-size: var(--refineui-typography-caption-1-font-size);
+    font-weight: var(--refineui-typography-caption-1-font-weight);
+    line-height: var(--refineui-typography-caption-1-line-height);
+  }
+  .refineui-typo-caption-2 {
+    font-family: var(--refineui-typography-caption-2-font-family);
+    font-size: var(--refineui-typography-caption-2-font-size);
+    font-weight: var(--refineui-typography-caption-2-font-weight);
+    line-height: var(--refineui-typography-caption-2-line-height);
+  }
   .\[font-family\:var\(--refineui-typography-sub-title-1-font-family\)\] {
     font-family: var(--refineui-typography-sub-title-1-font-family);
   }
@@ -2314,6 +2335,22 @@
     content: var(--tw-content);
     z-index: 0;
   }
+  .before\:h-\(--refineui-stroke-width-thin\)::before {
+    content: var(--tw-content);
+    height: var(--refineui-stroke-width-thin);
+  }
+  .before\:min-w-0::before {
+    content: var(--tw-content);
+    min-width: 0px;
+  }
+  .before\:flex-1::before {
+    content: var(--tw-content);
+    flex: 1;
+  }
+  .before\:bg-refineui-alias-border-default::before {
+    content: var(--tw-content);
+    background-color: var(--color-refineui-alias-border-default);
+  }
   .before\:content-\[\'\'\]::before {
     --tw-content: '';
     content: var(--tw-content);
@@ -2339,6 +2376,14 @@
     content: var(--tw-content);
     height: var(--refineui-stroke-width-thin);
   }
+  .after\:min-w-0::after {
+    content: var(--tw-content);
+    min-width: 0px;
+  }
+  .after\:flex-1::after {
+    content: var(--tw-content);
+    flex: 1;
+  }
   .after\:scale-0::after {
     content: var(--tw-content);
     --tw-scale-x: 0%;
@@ -2664,6 +2709,9 @@
   .data-\[active\=true\]\:\!opacity-100[data-active="true"] {
     opacity: 100% !important;
   }
+  .data-\[align\=end\]\:flex-row-reverse[data-align="end"] {
+    flex-direction: row-reverse;
+  }
   .data-\[align\=end\]\:self-end[data-align="end"] {
     align-self: flex-end;
   }
@@ -3455,29 +3503,29 @@
   .\[\&\>\*\]\:flex-1 > * {
     flex: 1;
   }
-  .\[\&\>\[data-refineui\=bubble\]\[data-align\=end\]\:first-child\:not\(\:only-child\)_\[data-refineui\=bubble-content\]\]\:\[border-end-end-radius\:var\(--refineui-radius-rounded-medium\)\] > [data-refineui=bubble][data-align=end]:first-child:not(:only-child) [data-refineui=bubble-content] {
-    border-end-end-radius: var(--refineui-radius-rounded-medium);
+  .\[\&\>\[data-refineui\=bubble\]\[data-align\=end\]\:first-child\:not\(\:only-child\)_\[data-refineui\=bubble-content\]\]\:\[border-end-end-radius\:var\(--refineui-radius-rounded-large\)\] > [data-refineui=bubble][data-align=end]:first-child:not(:only-child) [data-refineui=bubble-content] {
+    border-end-end-radius: var(--refineui-radius-rounded-large);
   }
-  .\[\&\>\[data-refineui\=bubble\]\[data-align\=end\]\:last-child\:not\(\:only-child\)_\[data-refineui\=bubble-content\]\]\:\[border-start-end-radius\:var\(--refineui-radius-rounded-medium\)\] > [data-refineui=bubble][data-align=end]:last-child:not(:only-child) [data-refineui=bubble-content] {
-    border-start-end-radius: var(--refineui-radius-rounded-medium);
+  .\[\&\>\[data-refineui\=bubble\]\[data-align\=end\]\:last-child\:not\(\:only-child\)_\[data-refineui\=bubble-content\]\]\:\[border-start-end-radius\:var\(--refineui-radius-rounded-large\)\] > [data-refineui=bubble][data-align=end]:last-child:not(:only-child) [data-refineui=bubble-content] {
+    border-start-end-radius: var(--refineui-radius-rounded-large);
   }
-  .\[\&\>\[data-refineui\=bubble\]\[data-align\=end\]\:not\(\:first-child\)\:not\(\:last-child\)_\[data-refineui\=bubble-content\]\]\:\[border-start-end-radius\:var\(--refineui-radius-rounded-medium\)\] > [data-refineui=bubble][data-align=end]:not(:first-child):not(:last-child) [data-refineui=bubble-content] {
-    border-start-end-radius: var(--refineui-radius-rounded-medium);
+  .\[\&\>\[data-refineui\=bubble\]\[data-align\=end\]\:not\(\:first-child\)\:not\(\:last-child\)_\[data-refineui\=bubble-content\]\]\:\[border-start-end-radius\:var\(--refineui-radius-rounded-large\)\] > [data-refineui=bubble][data-align=end]:not(:first-child):not(:last-child) [data-refineui=bubble-content] {
+    border-start-end-radius: var(--refineui-radius-rounded-large);
   }
-  .\[\&\>\[data-refineui\=bubble\]\[data-align\=end\]\:not\(\:first-child\)\:not\(\:last-child\)_\[data-refineui\=bubble-content\]\]\:\[border-end-end-radius\:var\(--refineui-radius-rounded-medium\)\] > [data-refineui=bubble][data-align=end]:not(:first-child):not(:last-child) [data-refineui=bubble-content] {
-    border-end-end-radius: var(--refineui-radius-rounded-medium);
+  .\[\&\>\[data-refineui\=bubble\]\[data-align\=end\]\:not\(\:first-child\)\:not\(\:last-child\)_\[data-refineui\=bubble-content\]\]\:\[border-end-end-radius\:var\(--refineui-radius-rounded-large\)\] > [data-refineui=bubble][data-align=end]:not(:first-child):not(:last-child) [data-refineui=bubble-content] {
+    border-end-end-radius: var(--refineui-radius-rounded-large);
   }
-  .\[\&\>\[data-refineui\=bubble\]\[data-align\=start\]\:first-child\:not\(\:only-child\)_\[data-refineui\=bubble-content\]\]\:\[border-end-start-radius\:var\(--refineui-radius-rounded-medium\)\] > [data-refineui=bubble][data-align=start]:first-child:not(:only-child) [data-refineui=bubble-content] {
-    border-end-start-radius: var(--refineui-radius-rounded-medium);
+  .\[\&\>\[data-refineui\=bubble\]\[data-align\=start\]\:first-child\:not\(\:only-child\)_\[data-refineui\=bubble-content\]\]\:\[border-end-start-radius\:var\(--refineui-radius-rounded-large\)\] > [data-refineui=bubble][data-align=start]:first-child:not(:only-child) [data-refineui=bubble-content] {
+    border-end-start-radius: var(--refineui-radius-rounded-large);
   }
-  .\[\&\>\[data-refineui\=bubble\]\[data-align\=start\]\:last-child\:not\(\:only-child\)_\[data-refineui\=bubble-content\]\]\:\[border-start-start-radius\:var\(--refineui-radius-rounded-medium\)\] > [data-refineui=bubble][data-align=start]:last-child:not(:only-child) [data-refineui=bubble-content] {
-    border-start-start-radius: var(--refineui-radius-rounded-medium);
+  .\[\&\>\[data-refineui\=bubble\]\[data-align\=start\]\:last-child\:not\(\:only-child\)_\[data-refineui\=bubble-content\]\]\:\[border-start-start-radius\:var\(--refineui-radius-rounded-large\)\] > [data-refineui=bubble][data-align=start]:last-child:not(:only-child) [data-refineui=bubble-content] {
+    border-start-start-radius: var(--refineui-radius-rounded-large);
   }
-  .\[\&\>\[data-refineui\=bubble\]\[data-align\=start\]\:not\(\:first-child\)\:not\(\:last-child\)_\[data-refineui\=bubble-content\]\]\:\[border-start-start-radius\:var\(--refineui-radius-rounded-medium\)\] > [data-refineui=bubble][data-align=start]:not(:first-child):not(:last-child) [data-refineui=bubble-content] {
-    border-start-start-radius: var(--refineui-radius-rounded-medium);
+  .\[\&\>\[data-refineui\=bubble\]\[data-align\=start\]\:not\(\:first-child\)\:not\(\:last-child\)_\[data-refineui\=bubble-content\]\]\:\[border-start-start-radius\:var\(--refineui-radius-rounded-large\)\] > [data-refineui=bubble][data-align=start]:not(:first-child):not(:last-child) [data-refineui=bubble-content] {
+    border-start-start-radius: var(--refineui-radius-rounded-large);
   }
-  .\[\&\>\[data-refineui\=bubble\]\[data-align\=start\]\:not\(\:first-child\)\:not\(\:last-child\)_\[data-refineui\=bubble-content\]\]\:\[border-end-start-radius\:var\(--refineui-radius-rounded-medium\)\] > [data-refineui=bubble][data-align=start]:not(:first-child):not(:last-child) [data-refineui=bubble-content] {
-    border-end-start-radius: var(--refineui-radius-rounded-medium);
+  .\[\&\>\[data-refineui\=bubble\]\[data-align\=start\]\:not\(\:first-child\)\:not\(\:last-child\)_\[data-refineui\=bubble-content\]\]\:\[border-end-start-radius\:var\(--refineui-radius-rounded-large\)\] > [data-refineui=bubble][data-align=start]:not(:first-child):not(:last-child) [data-refineui=bubble-content] {
+    border-end-start-radius: var(--refineui-radius-rounded-large);
   }
   .\[\&\>\[data-refineui\=bubble\]\[data-has-reactions-bottom\]\:not\(\:last-child\)\]\:mb-refineui-size-xx-large > [data-refineui=bubble][data-has-reactions-bottom]:not(:last-child) {
     margin-bottom: var(--spacing-refineui-size-xx-large);
@@ -3523,6 +3571,15 @@
     border-start-end-radius: var(--radius-refineui-large);
     border-end-end-radius: var(--radius-refineui-large);
   }
+  .\[\&\[data-align\=end\]_\[data-refineui\=message-content\]\]\:items-end[data-align=end] [data-refineui=message-content] {
+    align-items: flex-end;
+  }
+  .\[\&\[data-align\=end\]_\[data-refineui\=message-footer\]\]\:text-end[data-align=end] [data-refineui=message-footer] {
+    text-align: end;
+  }
+  .\[\&\[data-align\=start\]_\[data-refineui\=message-content\]\]\:items-start[data-align=start] [data-refineui=message-content] {
+    align-items: flex-start;
+  }
   .\[\&\[data-disabled\=true\]\[data-checked\=true\]\]\:border-refineui-alias-background-surface-selected[data-disabled=true][data-checked=true] {
     border-color: var(--color-refineui-alias-background-surface-selected);
   }
@@ -3554,6 +3611,20 @@
       transform: none;
     }
   }
+  .\[\&\[role\=status\]_\[data-refineui\=marker-content\]\]\:animate-pulse[role=status] [data-refineui=marker-content] {
+    animation: var(--animate-pulse);
+  }
+  .\[\&\[role\=status\]_\[data-refineui\=marker-content\]\]\:\[animation-duration\:var\(--refineui-motion-duration-skeleton\)\][role=status] [data-refineui=marker-content] {
+    animation-duration: var(--refineui-motion-duration-skeleton);
+  }
+  .\[\&\[role\=status\]_\[data-refineui\=marker-content\]\]\:\[animation-timing-function\:var\(--refineui-motion-easing-ease-in-out\)\][role=status] [data-refineui=marker-content] {
+    animation-timing-function: var(--refineui-motion-easing-ease-in-out);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .motion-reduce\:\[\&\[role\=status\]_\[data-refineui\=marker-content\]\]\:animate-none[role=status] [data-refineui=marker-content] {
+      animation: none;
+    }
+  }
 }
 :root {
   --refineui-color-primary-light-gray: #E6E6E6;

package/spec/authoring/components/kbd.json

@@ -0,0 +1,48 @@
+{
+  "id": "kbd",
+  "exportPath": "@refineui/react",
+  "exportName": "Kbd",
+  "kind": "root",
+  "category": "utilities",
+  "label": "Kbd",
+  "props": [],
+  "preview": {
+    "mode": "full"
+  },
+  "slots": [
+    {
+      "name": "children",
+      "accepts": [],
+      "repeatable": true,
+      "allowText": true,
+      "allowAnyComponent": true,
+      "defaultChildren": []
+    }
+  ],
+  "presets": [
+    {
+      "id": "default",
+      "label": "Default",
+      "root": {
+        "component": "Kbd",
+        "slots": {
+          "children": [
+            {
+              "component": "Text",
+              "props": {
+                "variant": "bodyMd"
+              },
+              "text": "Kbd"
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "events": [
+    {
+      "name": "click",
+      "payload": "void"
+    }
+  ]
+}

package/spec/authoring/components/marker-content.json

@@ -0,0 +1,18 @@
+{
+  "id": "marker-content",
+  "exportPath": "@refineui/react",
+  "exportName": "MarkerContent",
+  "kind": "part",
+  "category": "parts",
+  "label": "Marker Content",
+  "props": [],
+  "preview": {
+    "mode": "full"
+  },
+  "parents": [
+    {
+      "component": "Marker",
+      "slot": "children"
+    }
+  ]
+}

package/spec/authoring/components/marker-icon.json

@@ -0,0 +1,18 @@
+{
+  "id": "marker-icon",
+  "exportPath": "@refineui/react",
+  "exportName": "MarkerIcon",
+  "kind": "part",
+  "category": "parts",
+  "label": "Marker Icon",
+  "props": [],
+  "preview": {
+    "mode": "full"
+  },
+  "parents": [
+    {
+      "component": "Marker",
+      "slot": "children"
+    }
+  ]
+}

package/spec/authoring/components/marker.json

@@ -0,0 +1,41 @@
+{
+  "id": "marker",
+  "exportPath": "@refineui/react",
+  "exportName": "Marker",
+  "kind": "root",
+  "category": "utilities",
+  "label": "Marker",
+  "props": [],
+  "preview": {
+    "mode": "full"
+  },
+  "slots": [
+    {
+      "name": "children",
+      "accepts": [
+        "MarkerContent",
+        "MarkerIcon"
+      ],
+      "repeatable": true,
+      "allowText": true,
+      "allowAnyComponent": false,
+      "defaultChildren": []
+    }
+  ],
+  "presets": [
+    {
+      "id": "default",
+      "label": "Default",
+      "root": {
+        "component": "Marker",
+        "slots": {}
+      }
+    }
+  ],
+  "events": [
+    {
+      "name": "click",
+      "payload": "void"
+    }
+  ]
+}

package/spec/authoring/components/message-avatar.json

@@ -0,0 +1,18 @@
+{
+  "id": "message-avatar",
+  "exportPath": "@refineui/react",
+  "exportName": "MessageAvatar",
+  "kind": "part",
+  "category": "parts",
+  "label": "Message Avatar",
+  "props": [],
+  "preview": {
+    "mode": "full"
+  },
+  "parents": [
+    {
+      "component": "Message",
+      "slot": "children"
+    }
+  ]
+}

package/spec/authoring/components/message-content.json

@@ -0,0 +1,18 @@
+{
+  "id": "message-content",
+  "exportPath": "@refineui/react",
+  "exportName": "MessageContent",
+  "kind": "part",
+  "category": "parts",
+  "label": "Message Content",
+  "props": [],
+  "preview": {
+    "mode": "full"
+  },
+  "parents": [
+    {
+      "component": "Message",
+      "slot": "children"
+    }
+  ]
+}

package/spec/authoring/components/message-footer.json

@@ -0,0 +1,18 @@
+{
+  "id": "message-footer",
+  "exportPath": "@refineui/react",
+  "exportName": "MessageFooter",
+  "kind": "part",
+  "category": "parts",
+  "label": "Message Footer",
+  "props": [],
+  "preview": {
+    "mode": "full"
+  },
+  "parents": [
+    {
+      "component": "Message",
+      "slot": "children"
+    }
+  ]
+}

package/spec/authoring/components/message.json

@@ -0,0 +1,42 @@
+{
+  "id": "message",
+  "exportPath": "@refineui/react",
+  "exportName": "Message",
+  "kind": "root",
+  "category": "utilities",
+  "label": "Message",
+  "props": [],
+  "preview": {
+    "mode": "full"
+  },
+  "slots": [
+    {
+      "name": "children",
+      "accepts": [
+        "MessageAvatar",
+        "MessageContent",
+        "MessageFooter"
+      ],
+      "repeatable": true,
+      "allowText": true,
+      "allowAnyComponent": false,
+      "defaultChildren": []
+    }
+  ],
+  "presets": [
+    {
+      "id": "default",
+      "label": "Default",
+      "root": {
+        "component": "Message",
+        "slots": {}
+      }
+    }
+  ],
+  "events": [
+    {
+      "name": "click",
+      "payload": "void"
+    }
+  ]
+}

package/spec/authoring/manifest.json

@@ -1,7 +1,7 @@
 {
   "schema": "refineui.authoring/1",
   "packageName": "@refineui/react",
-  "packageVersion": "0.3.0",
+  "packageVersion": "0.4.0",
   "css": [
     "@refineui/react/refineui.css"
   ],
@@ -2158,6 +2158,227 @@
         }
       ]
     },
+    {
+      "id": "kbd",
+      "exportPath": "@refineui/react",
+      "exportName": "Kbd",
+      "kind": "root",
+      "category": "utilities",
+      "label": "Kbd",
+      "props": [],
+      "preview": {
+        "mode": "full"
+      },
+      "slots": [
+        {
+          "name": "children",
+          "accepts": [],
+          "repeatable": true,
+          "allowText": true,
+          "allowAnyComponent": true,
+          "defaultChildren": []
+        }
+      ],
+      "presets": [
+        {
+          "id": "default",
+          "label": "Default",
+          "root": {
+            "component": "Kbd",
+            "slots": {
+              "children": [
+                {
+                  "component": "Text",
+                  "props": {
+                    "variant": "bodyMd"
+                  },
+                  "text": "Kbd"
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "events": [
+        {
+          "name": "click",
+          "payload": "void"
+        }
+      ]
+    },
+    {
+      "id": "message",
+      "exportPath": "@refineui/react",
+      "exportName": "Message",
+      "kind": "root",
+      "category": "utilities",
+      "label": "Message",
+      "props": [],
+      "preview": {
+        "mode": "full"
+      },
+      "slots": [
+        {
+          "name": "children",
+          "accepts": [
+            "MessageAvatar",
+            "MessageContent",
+            "MessageFooter"
+          ],
+          "repeatable": true,
+          "allowText": true,
+          "allowAnyComponent": false,
+          "defaultChildren": []
+        }
+      ],
+      "presets": [
+        {
+          "id": "default",
+          "label": "Default",
+          "root": {
+            "component": "Message",
+            "slots": {}
+          }
+        }
+      ],
+      "events": [
+        {
+          "name": "click",
+          "payload": "void"
+        }
+      ]
+    },
+    {
+      "id": "message-avatar",
+      "exportPath": "@refineui/react",
+      "exportName": "MessageAvatar",
+      "kind": "part",
+      "category": "parts",
+      "label": "Message Avatar",
+      "props": [],
+      "preview": {
+        "mode": "full"
+      },
+      "parents": [
+        {
+          "component": "Message",
+          "slot": "children"
+        }
+      ]
+    },
+    {
+      "id": "message-content",
+      "exportPath": "@refineui/react",
+      "exportName": "MessageContent",
+      "kind": "part",
+      "category": "parts",
+      "label": "Message Content",
+      "props": [],
+      "preview": {
+        "mode": "full"
+      },
+      "parents": [
+        {
+          "component": "Message",
+          "slot": "children"
+        }
+      ]
+    },
+    {
+      "id": "message-footer",
+      "exportPath": "@refineui/react",
+      "exportName": "MessageFooter",
+      "kind": "part",
+      "category": "parts",
+      "label": "Message Footer",
+      "props": [],
+      "preview": {
+        "mode": "full"
+      },
+      "parents": [
+        {
+          "component": "Message",
+          "slot": "children"
+        }
+      ]
+    },
+    {
+      "id": "marker",
+      "exportPath": "@refineui/react",
+      "exportName": "Marker",
+      "kind": "root",
+      "category": "utilities",
+      "label": "Marker",
+      "props": [],
+      "preview": {
+        "mode": "full"
+      },
+      "slots": [
+        {
+          "name": "children",
+          "accepts": [
+            "MarkerContent",
+            "MarkerIcon"
+          ],
+          "repeatable": true,
+          "allowText": true,
+          "allowAnyComponent": false,
+          "defaultChildren": []
+        }
+      ],
+      "presets": [
+        {
+          "id": "default",
+          "label": "Default",
+          "root": {
+            "component": "Marker",
+            "slots": {}
+          }
+        }
+      ],
+      "events": [
+        {
+          "name": "click",
+          "payload": "void"
+        }
+      ]
+    },
+    {
+      "id": "marker-content",
+      "exportPath": "@refineui/react",
+      "exportName": "MarkerContent",
+      "kind": "part",
+      "category": "parts",
+      "label": "Marker Content",
+      "props": [],
+      "preview": {
+        "mode": "full"
+      },
+      "parents": [
+        {
+          "component": "Marker",
+          "slot": "children"
+        }
+      ]
+    },
+    {
+      "id": "marker-icon",
+      "exportPath": "@refineui/react",
+      "exportName": "MarkerIcon",
+      "kind": "part",
+      "category": "parts",
+      "label": "Marker Icon",
+      "props": [],
+      "preview": {
+        "mode": "full"
+      },
+      "parents": [
+        {
+          "component": "Marker",
+          "slot": "children"
+        }
+      ]
+    },
     {
       "id": "avatar",
       "exportPath": "@refineui/react",

package/spec/components/kbd.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "kbd",
+  "version": 1,
+  "export": "Kbd",
+  "anatomy": {
+    "root": "kbd"
+  },
+  "attributes": {
+    "data-refineui": "kbd"
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}