feat(tooltip): create Tooltip

packages/tooltip/CHANGELOG.md

@@ -0,0 +1,111 @@
+# @solid-aria/button
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [e6bac81]
+  - @solid-aria/utils@0.2.0
+  - @solid-aria/focus@0.1.4
+  - @solid-aria/interactions@0.1.4
+  - @solid-aria/toggle@0.1.3
+
+## 0.1.2
+
+### Patch Changes
+
+- Try manual release
+- Updated dependencies
+  - @solid-aria/focus@0.1.2
+  - @solid-aria/interactions@0.1.2
+  - @solid-aria/toggle@0.1.2
+  - @solid-aria/types@0.1.2
+  - @solid-aria/utils@0.1.2
+
+## 0.1.1
+
+### Patch Changes
+
+- 2ca4cfc: Change dependency versions of packages from "workspace^" to "^0.1.0" (current version) — Fixes #29
+  Move solid-primitives packages from peerDependencies to dependencies.
+- Updated dependencies [2ca4cfc]
+  - @solid-aria/focus@0.1.1
+  - @solid-aria/interactions@0.1.1
+  - @solid-aria/toggle@0.1.1
+  - @solid-aria/types@0.1.1
+  - @solid-aria/utils@0.1.1
+
+## 0.1.0
+
+### Minor Changes
+
+- dcfaa90: Release menu package, breaking change all primitives return plain object props instead of memoized value
+
+### Patch Changes
+
+- Updated dependencies [dcfaa90]
+  - @solid-aria/focus@0.1.0
+  - @solid-aria/interactions@0.1.0
+  - @solid-aria/toggle@0.1.0
+  - @solid-aria/types@0.1.0
+  - @solid-aria/utils@0.1.0
+
+## 0.0.6
+
+### Patch Changes
+
+- 84e543b: Bump solid-js peer dep to ^1.4.3
+- Updated dependencies [84e543b]
+  - @solid-aria/focus@0.0.9
+  - @solid-aria/interactions@0.0.7
+  - @solid-aria/toggle@0.0.10
+  - @solid-aria/types@0.0.5
+  - @solid-aria/utils@0.0.6
+
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies [af59eb8]
+  - @solid-aria/interactions@0.0.6
+  - @solid-aria/focus@0.0.8
+  - @solid-aria/toggle@0.0.9
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies [e2c1d42]
+  - @solid-aria/focus@0.0.7
+  - @solid-aria/toggle@0.0.8
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [20da459]
+  - @solid-aria/focus@0.0.6
+  - @solid-aria/toggle@0.0.7
+
+## 0.0.2
+
+### Patch Changes
+
+- 7eebd05: Add FocusScope, Dialog and Overlays related primitives
+- Updated dependencies [7eebd05]
+  - @solid-aria/focus@0.0.5
+  - @solid-aria/interactions@0.0.5
+  - @solid-aria/toggle@0.0.6
+  - @solid-aria/types@0.0.4
+  - @solid-aria/utils@0.0.5
+
+## 0.0.1
+
+### Patch Changes
+
+- e8be0a0: Release button package
+- Updated dependencies [e8be0a0]
+  - @solid-aria/interactions@0.0.4
+  - @solid-aria/toggle@0.0.5
+  - @solid-aria/utils@0.0.4
+  - @solid-aria/focus@0.0.4

packages/tooltip/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Solid Aria Working Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/tooltip/README.md

@@ -0,0 +1,163 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Button" alt="Solid Aria - Button">
+</p>
+
+# @solid-aria/button
+
+[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
+[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/button?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/button)
+[![version](https://img.shields.io/npm/v/@solid-aria/button?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/button)
+[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)
+
+Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+
+## Installation
+
+```bash
+npm install @solid-aria/tooltip
+# or
+yarn add @solid-aria/tooltip
+# or
+pnpm add @solid-aria/tooltyp
+```
+
+## `createTooltip`
+
+Provides the behavior and accessibility implementation for a tooltip component.
+
+### Features
+
+On the surface, building a custom styled button seems simple. However, there are many cross browser inconsistencies in interactions and accessibility features to consider. `createTooltip` handles all of these interactions for you, so you can focus on the styling.
+
+- Native HTML `<button>` support
+- `<a>` and custom element type support via ARIA
+- Mouse and touch event handling, and press state management
+- Keyboard focus management and cross browser normalization
+- Keyboard event support for `Space` and `Enter` keys
+
+### How to use it
+
+By default, `createTooltip` assumes that you are using it with a native `<button>` element.
+
+```tsx
+import { AriaButtonProps, createTooltip } from "@solid-aria/button";
+
+function Button(props: AriaButtonProps) {
+  let ref: HTMLButtonElement | undefined;
+
+  const { buttonProps } = createTooltip(props, () => ref);
+
+  return (
+    <button {...buttonProps} ref={ref}>
+      {props.children}
+    </button>
+  );
+}
+
+function App() {
+  return <Button onPress={() => alert("Button pressed!")}>Test</Button>;
+}
+```
+
+### Using a custom element type
+
+Sometimes you might need to use an element other than a native `<button>`. `createTooltip` supports this via the `elementType` prop. When used with an element other than a native button, `createTooltip` automatically applies the necessary ARIA roles and attributes to ensure that the element is exposed to assistive technology as a button.
+
+In addition, this example shows usage of the `isPressed` value returned by `createTooltip` to properly style the button's active state. You could use the CSS `:active` pseudo class for this, but `isPressed` properly handles when the user drags their pointer off of the button, along with keyboard support and better touch screen support.
+
+```tsx
+import { AriaButtonProps, createTooltip } from "@solid-aria/button";
+import { mergeProps } from "solid-js";
+
+function Button(props: AriaButtonProps<"span">) {
+  let ref: HTMLButtonElement | undefined;
+
+  const createTooltipProps = mergeProps({ elementType: "span" }, props);
+
+  const { buttonProps, isPressed } = createTooltip(createTooltipProps, () => ref);
+
+  return (
+    <span
+      {...buttonProps}
+      style={{
+        background: isPressed() ? "darkgreen" : "green",
+        color: "white",
+        padding: "10px",
+        cursor: "pointer",
+        "user-select": "none",
+        "-webkit-user-select": "none"
+      }}
+      ref={ref}
+    >
+      {props.children}
+    </span>
+  );
+}
+
+function App() {
+  return <Button onPress={() => alert("Button pressed!")}>Test</Button>;
+}
+```
+
+## `createToggleButton`
+
+Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.
+
+### Features
+
+Toggle buttons are similar to action buttons, but support an additional selection state that is toggled when a user presses the button. There is no built-in HTML element that represents a toggle button, so Solid Aria implements it using ARIA attributes.
+
+- Native HTML `<button>`, `<a>`, and custom element type support
+- Exposed as a toggle button via ARIA
+- Mouse and touch event handling, and press state management
+- Keyboard focus management and cross browser normalization
+- Keyboard event support for `Space` and `Enter` keys
+
+### How to use it
+
+By default, `createToggleButton` assumes that you are using it with a native `<button>` element. You can use a custom element type by passing the `elementType` prop to `createToggleButton`. See the `createTooltip` docs for an example of this.
+
+The following example shows how to use the `createToggleButton` to build a toggle button. The toggle state is used to switch between a green and blue background when unselected and selected respectively. In addition, the `isPressed` state is used to adjust the background to be darker when the user presses down on the button.
+
+```tsx
+import { AriaToggleButtonProps, createToggleButton } from "@solid-aria/button";
+
+function ToggleButton(props: AriaToggleButtonProps) {
+  let ref: HTMLButtonElement | undefined;
+
+  const { buttonProps, isPressed, state } = createToggleButton(props, () => ref);
+
+  return (
+    <button
+      {...buttonProps}
+      style={{
+        background: isPressed()
+          ? state.isSelected()
+            ? "darkblue"
+            : "darkgreen"
+          : state.isSelected()
+          ? "blue"
+          : "green",
+        color: "white",
+        padding: "10px",
+        cursor: "pointer",
+        "user-select": "none",
+        "-webkit-user-select": "none",
+        border: "none"
+      }}
+      ref={ref}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+function App() {
+  return <ToggleButton>Test</ToggleButton>;
+}
+```
+
+## Changelog
+
+All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.

packages/tooltip/dev/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script src="./index.tsx" type="module"></script>
+  </body>
+</html>

packages/tooltip/dev/index.tsx

@@ -0,0 +1,7 @@
+import { render } from "solid-js/web";
+
+function App() {
+  return <div>Hello Solid Aria!</div>;
+}
+
+render(() => <App />, document.getElementById("root") as HTMLDivElement);

packages/tooltip/dev/vite.config.ts

@@ -0,0 +1,3 @@
+import { viteConfig } from "../../../configs/vite.config";
+
+export default viteConfig;

packages/tooltip/jest.config.cjs

@@ -0,0 +1,5 @@
+const baseJest = require("../../configs/jest.config.cjs");
+
+module.exports = {
+  ...baseJest
+};

packages/tooltip/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@solid-aria/tooltip",
+  "version": "0.0.1",
+  "private": false,
+  "description": "Primitives for building accessible tooltip component.",
+  "keywords": [
+    "solid",
+    "aria",
+    "headless",
+    "design",
+    "system",
+    "components"
+  ],
+  "homepage": "https://github.com/solidjs-community/solid-aria/tree/main/packages/tooltip#readme",
+  "bugs": {
+    "url": "https://github.com/solidjs-community/solid-aria/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-aria.git"
+  },
+  "license": "MIT",
+  "author": "Helio Alves <heliosjfa.dev@gmail.com>",
+  "contributors": [],
+  "sideEffects": false,
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "dev": "vite serve dev --host",
+    "test": "jest --passWithNoTests",
+    "test:watch": "jest --watch --passWithNoTests",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@solid-aria/focus": "^0.1.4",
+    "@solid-aria/interactions": "^0.1.4",
+    "@solid-aria/overlays": "^0.1.3",
+    "@solid-aria/types": "^0.1.2",
+    "@solid-aria/utils": "^0.2.0"
+  },
+  "devDependencies": {
+    "solid-js": "^1.4.4"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.4.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "primitive": {
+    "name": "tooltip",
+    "stage": 0,
+    "list": [],
+    "category": ""
+  }
+}