@refineui/react 0.0.1

package/spec/components/carousel.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "carousel",
+  "version": 1,
+  "export": "Carousel",
+  "anatomy": {
+    "root": "carousel",
+    "controls": "carousel-controls",
+    "indicator": "carousel-indicator",
+    "indicator_hits": "carousel-indicator-hits",
+    "indicator_thumb": "carousel-indicator-thumb",
+    "indicators": "carousel-indicators",
+    "item": "carousel-item",
+    "nav": "carousel-nav",
+    "track": "carousel-track",
+    "viewport": "carousel-viewport"
+  },
+  "attributes": {
+    "data-refineui": "carousel"
+  },
+  "states": {
+    "pseudo": [
+      "focus-visible"
+    ],
+    "environment": [
+      "forced-colors",
+      "dir"
+    ]
+  },
+  "accessibility": {
+    "carousel": {
+      "element": "div"
+    },
+    "carousel-item": {
+      "element": "div",
+      "role": "group"
+    },
+    "carousel-indicator": {
+      "element": "button",
+      "role": "tab",
+      "requiredAttributes": {
+        "aria-selected": {
+          "required": true,
+          "type": "boolean"
+        }
+      }
+    }
+  },
+  "keyboard": {
+    "ArrowRight": "next-trigger",
+    "ArrowLeft": "previous-trigger",
+    "Home": "first-trigger",
+    "End": "last-trigger"
+  },
+  "focus": {
+    "visual": {
+      "required": true,
+      "selector": ":focus-visible"
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}

package/spec/components/chart.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "chart",
+  "version": 1,
+  "export": "Chart",
+  "anatomy": {
+    "root": "chart",
+    "axis_labels": "chart-axis-labels",
+    "bar": "chart-bar",
+    "bar_track": "chart-bar-track",
+    "bars": "chart-bars",
+    "body": "chart-body",
+    "content": "chart-content",
+    "grid": "chart-grid",
+    "hit_area": "chart-hit-area",
+    "legend": "chart-legend",
+    "legend_item": "chart-legend-item",
+    "line": "chart-line",
+    "line_area": "chart-line-area",
+    "line_stroke": "chart-line-stroke",
+    "plot": "chart-plot",
+    "plot_frame": "chart-plot-frame",
+    "point": "chart-point",
+    "tooltip": "chart-tooltip",
+    "y_axis": "chart-y-axis"
+  },
+  "attributes": {
+    "data-refineui": "chart"
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}

package/spec/components/checkbox.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "checkbox",
+  "version": 1,
+  "export": "Checkbox",
+  "anatomy": {
+    "root": "checkbox"
+  },
+  "attributes": {
+    "data-refineui": "checkbox"
+  },
+  "variants": {
+    "variant": [
+      "default",
+      "circular"
+    ]
+  },
+  "states": {
+    "environment": [
+      "forced-colors",
+      "dir",
+      "prefers-contrast"
+    ]
+  },
+  "keyboard": {
+    "Space": {
+      "action": "activate",
+      "native": true
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  },
+  "tokens": {
+    "visual": "checkbox"
+  }
+}

package/spec/components/chip.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "chip",
+  "version": 1,
+  "export": "Chip",
+  "anatomy": {
+    "root": "chip",
+    "remove": "chip-remove"
+  },
+  "attributes": {
+    "data-refineui": "chip"
+  },
+  "variants": {
+    "variant": [
+      "default",
+      "outline",
+      "filled"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ]
+  },
+  "recipe": "chip",
+  "tokens": {
+    "visual": "chip"
+  },
+  "states": {
+    "pseudo": [
+      "focus-visible"
+    ],
+    "environment": [
+      "forced-colors",
+      "dir",
+      "prefers-contrast"
+    ]
+  },
+  "accessibility": {
+    "chip-remove": {
+      "element": "button",
+      "native": true
+    }
+  },
+  "keyboard": {
+    "Enter": {
+      "action": "activate",
+      "native": true
+    },
+    "Space": {
+      "action": "activate",
+      "native": true
+    }
+  },
+  "focus": {
+    "visual": {
+      "required": true,
+      "selector": ":focus-visible"
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}

package/spec/components/command.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "command",
+  "version": 1,
+  "export": "Command",
+  "anatomy": {
+    "root": "command",
+    "empty": "command-empty",
+    "group": "command-group",
+    "group_heading": "command-group-heading",
+    "input": "command-input",
+    "item": "command-item",
+    "list": "command-list",
+    "separator": "command-separator",
+    "shortcut": "command-shortcut"
+  },
+  "attributes": {
+    "data-refineui": "command"
+  },
+  "states": {
+    "pseudo": [
+      "focus-visible"
+    ],
+    "component": {
+      "data-state": [
+        "disabled",
+        "active",
+        "default"
+      ]
+    },
+    "environment": [
+      "forced-colors",
+      "dir"
+    ]
+  },
+  "accessibility": {
+    "command-item": {
+      "element": "div",
+      "role": "option",
+      "requiredAttributes": {
+        "aria-selected": {
+          "required": true,
+          "type": "boolean"
+        }
+      }
+    }
+  },
+  "keyboard": {
+    "ArrowDown": "next-trigger",
+    "ArrowUp": "previous-trigger",
+    "Home": "first-trigger",
+    "End": "last-trigger",
+    "Enter": "activate"
+  },
+  "focus": {
+    "visual": {
+      "required": true,
+      "selector": ":focus-visible"
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}

package/spec/components/container.json

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

package/spec/components/dialog.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "dialog",
+  "version": 1,
+  "export": "Dialog",
+  "anatomy": {
+    "root": "dialog",
+    "scrim": "presentation",
+    "panel": "panel",
+    "header": "header",
+    "title": "title",
+    "description": "description",
+    "body": "content",
+    "close": "close"
+  },
+  "variants": {
+    "size": [
+      "sm",
+      "lg"
+    ]
+  },
+  "states": {
+    "pseudo": [
+      "focus-visible"
+    ],
+    "component": {
+      "data-state": [
+        "open",
+        "closed"
+      ]
+    },
+    "environment": [
+      "forced-colors",
+      "dir",
+      "prefers-contrast"
+    ]
+  },
+  "attributes": {
+    "data-refineui": "dialog"
+  },
+  "dom": {
+    "dialog": {
+      "states": {
+        "component": {
+          "data-state": [
+            "open",
+            "closed"
+          ]
+        }
+      }
+    }
+  },
+  "accessibility": {
+    "dialog": {
+      "element": "div",
+      "role": "dialog",
+      "requiredAttributes": {
+        "aria-modal": {
+          "required": true,
+          "type": "boolean"
+        },
+        "aria-labelledby": {
+          "required": true,
+          "type": "string"
+        }
+      },
+      "labeling": {
+        "labelledBy": "title",
+        "describedBy": "optional"
+      }
+    }
+  },
+  "keyboard": {
+    "Escape": "close"
+  },
+  "focus": {
+    "visual": {
+      "required": true,
+      "selector": ":focus-visible"
+    },
+    "behavior": {
+      "trap": true,
+      "initial": "first-focusable",
+      "return": "trigger"
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  },
+  "tokens": {
+    "visual": "dialog"
+  },
+  "recipe": "dialog"
+}

package/spec/components/divider.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "divider",
+  "version": 1,
+  "export": "Divider",
+  "anatomy": {
+    "root": "divider"
+  },
+  "attributes": {
+    "data-refineui": "divider"
+  },
+  "variants": {
+    "layout": [
+      "default",
+      "content",
+      "icon"
+    ]
+  },
+  "accessibility": {
+    "divider": {
+      "element": "div",
+      "role": "separator"
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}

package/spec/components/drawer.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "drawer",
+  "version": 1,
+  "export": "Drawer",
+  "anatomy": {
+    "root": "drawer"
+  },
+  "attributes": {
+    "data-refineui": "drawer"
+  },
+  "variants": {
+    "type": [
+      "overlay",
+      "inline"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ]
+  },
+  "states": {
+    "component": {
+      "data-state": [
+        "open",
+        "closed"
+      ]
+    },
+    "environment": [
+      "forced-colors",
+      "dir"
+    ]
+  },
+  "dom": {
+    "drawer": {
+      "states": {
+        "component": {
+          "data-state": [
+            "open",
+            "closed"
+          ]
+        }
+      }
+    }
+  },
+  "accessibility": {
+    "drawer": {
+      "element": "div",
+      "role": "dialog"
+    }
+  },
+  "keyboard": {
+    "Escape": "close"
+  },
+  "focus": {
+    "visual": {
+      "required": true,
+      "selector": ":focus-visible"
+    },
+    "behavior": {
+      "trap": true,
+      "initial": "first-focusable",
+      "return": "trigger"
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}

package/spec/components/dropdown.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "dropdown",
+  "version": 1,
+  "export": "Dropdown",
+  "anatomy": {
+    "root": "dropdown-menu-root",
+    "dropdown_item": "dropdown-item",
+    "group": "dropdown-menu-group",
+    "label": "dropdown-menu-label",
+    "separator": "dropdown-menu-separator",
+    "shortcut": "dropdown-menu-shortcut"
+  },
+  "attributes": {
+    "data-refineui": "dropdown-menu"
+  },
+  "states": {
+    "pseudo": [
+      "focus-visible"
+    ],
+    "component": {
+      "data-state": [
+        "pressed",
+        "selected",
+        "open"
+      ]
+    },
+    "environment": [
+      "forced-colors",
+      "dir"
+    ]
+  },
+  "accessibility": {
+    "dropdown-menu": {
+      "element": "div",
+      "role": "menu"
+    },
+    "dropdown-item": {
+      "element": "div",
+      "role": "menuitem"
+    }
+  },
+  "keyboard": {
+    "Escape": "close",
+    "Enter": {
+      "action": "activate",
+      "native": true
+    },
+    "Space": {
+      "action": "activate",
+      "native": true
+    }
+  },
+  "focus": {
+    "visual": {
+      "required": true,
+      "selector": ":focus-visible"
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}

package/spec/components/field.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "field",
+  "version": 1,
+  "export": "Field",
+  "anatomy": {
+    "root": "field",
+    "error": "field-error",
+    "hint": "field-hint"
+  },
+  "attributes": {
+    "data-refineui": "field"
+  },
+  "variants": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ]
+  },
+  "accessibility": {
+    "field-error": {
+      "element": "div",
+      "role": "alert"
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}

package/spec/components/footer.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "footer",
+  "version": 1,
+  "export": "Footer",
+  "anatomy": {
+    "root": "footer",
+    "brand": "footer-brand",
+    "brand_description": "footer-brand-description",
+    "brand_name": "footer-brand-name",
+    "copyright": "footer-copyright",
+    "explore": "footer-explore",
+    "group": "footer-group",
+    "group_label": "footer-group-label",
+    "link": "footer-link",
+    "locale": "footer-locale",
+    "logo": "footer-logo",
+    "meta": "footer-meta",
+    "meta_end": "footer-meta-end",
+    "nav": "footer-nav",
+    "social": "footer-social"
+  },
+  "attributes": {
+    "data-refineui": "footer"
+  },
+  "states": {
+    "pseudo": [
+      "focus-visible"
+    ],
+    "environment": [
+      "forced-colors",
+      "dir"
+    ]
+  },
+  "focus": {
+    "visual": {
+      "required": true,
+      "selector": ":focus-visible"
+    }
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}

package/spec/components/grid.json

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

package/spec/components/input-otp.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "../schema/component-spec.schema.json",
+  "component": "input-otp",
+  "version": 1,
+  "export": "InputOTP",
+  "anatomy": {
+    "root": "input-otp",
+    "slot": "input-otp-slot"
+  },
+  "attributes": {
+    "data-refineui": "input-otp"
+  },
+  "variants": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ]
+  },
+  "accessibility": {
+    "input-otp": {
+      "element": "div",
+      "role": "group"
+    }
+  },
+  "keyboard": {
+    "ArrowLeft": "previous-trigger",
+    "ArrowRight": "next-trigger"
+  },
+  "layout": {
+    "direction": "logical",
+    "rtl": true
+  }
+}