@primitiv-ui/react 0.1.0

package/src/DirectionProvider/__tests__/DirectionProvider.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+
+import { DirectionProvider, useDirection } from "..";
+
+function DirectionProbe() {
+  return <span data-testid="probe">{useDirection()}</span>;
+}
+
+describe("DirectionProvider", () => {
+  it("should default useDirection to ltr when no provider is present", () => {
+    // Arrange
+    render(<DirectionProbe />);
+
+    // Assert
+    expect(screen.getByTestId("probe")).toHaveTextContent("ltr");
+  });
+
+  it("should provide its dir to descendants via useDirection", () => {
+    // Arrange
+    render(
+      <DirectionProvider dir="rtl">
+        <DirectionProbe />
+      </DirectionProvider>,
+    );
+
+    // Assert
+    expect(screen.getByTestId("probe")).toHaveTextContent("rtl");
+  });
+});

package/src/DirectionProvider/index.ts

@@ -0,0 +1,3 @@
+export { useDirection } from "./DirectionContext";
+export { DirectionProvider } from "./DirectionProvider";
+export type { Direction, DirectionProviderProps } from "./types";

package/src/DirectionProvider/types.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+/** A reading direction — left-to-right or right-to-left. */
+export type Direction = "ltr" | "rtl";
+
+export type DirectionProviderProps = {
+  /** The reading direction broadcast to every descendant. */
+  dir: Direction;
+  children?: ReactNode;
+};

package/src/Divider/Divider.tsx

@@ -0,0 +1,57 @@
+import { DividerProps } from "./types";
+
+/**
+ * A visual and semantic separator between content sections.
+ *
+ * Renders a `<span role="separator">` with the correct `aria-orientation`
+ * attribute. Screen readers announce it as a separator element, which is
+ * appropriate when the divider conveys structural meaning (e.g. separating
+ * navigation groups or distinct content sections).
+ *
+ * **Decorative use.** When the divider is purely visual and carries no
+ * semantic meaning, pass `aria-hidden="true"` to remove it from the
+ * accessibility tree:
+ *
+ * ```tsx
+ * <Divider aria-hidden="true" />
+ * ```
+ *
+ * **Styling hooks.** No styles ship with the component. Use the
+ * `aria-orientation` attribute selector to apply orientation-specific styles:
+ *
+ * ```css
+ * [role="separator"][aria-orientation="horizontal"] { height: 1px; width: 100%; }
+ * [role="separator"][aria-orientation="vertical"]   { width: 1px; height: 100%; }
+ * ```
+ *
+ * @example Horizontal (default)
+ * ```tsx
+ * <Divider />
+ * ```
+ *
+ * @example Vertical
+ * ```tsx
+ * <Divider orientation="vertical" />
+ * ```
+ *
+ * @example Decorative — hidden from screen readers
+ * ```tsx
+ * <Divider aria-hidden="true" />
+ * ```
+ */
+export function Divider({
+  orientation = "horizontal",
+  className = "",
+  ...rest
+}: DividerProps) {
+  return (
+    <span
+      role="separator"
+      aria-orientation={orientation}
+      className={className}
+      {...rest}
+    />
+  );
+}
+
+Divider.displayName = "Divider";

package/src/Divider/README.md

@@ -0,0 +1,57 @@
+# Divider
+
+A visual and semantic separator between content sections, implementing the
+[WAI-ARIA separator role](https://www.w3.org/TR/wai-aria-1.2/#separator).
+
+```tsx
+import { Divider } from "@primitiv-ui/react";
+
+<Divider />;
+```
+
+## Props
+
+| Prop          | Type                           | Default        | Notes                                        |
+| ------------- | ------------------------------ | -------------- | -------------------------------------------- |
+| `orientation` | `"horizontal"` \| `"vertical"` | `"horizontal"` | Sets `aria-orientation` on the element       |
+| `className`   | `string`                       | `""`           | Applied directly to the rendered element     |
+| `...rest`     | `ComponentProps<"span">`       | —              | All other `<span>` props, including `aria-*` |
+
+## Decorative use
+
+When the divider is purely visual and carries no semantic meaning, pass
+`aria-hidden="true"` to remove it from the accessibility tree:
+
+```tsx
+<Divider aria-hidden="true" />
+```
+
+Without `aria-hidden`, screen readers will announce the element as a
+separator. Use the semantic form when the divider genuinely separates
+distinct content groups (e.g. navigation sections, menu items).
+
+## Styling hooks
+
+No styles ship with the component. Target the rendered element with the
+`aria-orientation` attribute selector:
+
+```css
+[role="separator"][aria-orientation="horizontal"] {
+  height: 1px;
+  width: 100%;
+  background: currentColor;
+}
+
+[role="separator"][aria-orientation="vertical"] {
+  width: 1px;
+  height: 100%;
+  background: currentColor;
+}
+```
+
+Or pass a `className`:
+
+```tsx
+<Divider className="my-divider" />
+<Divider orientation="vertical" className="my-divider--vertical" />
+```

package/src/Divider/__tests__/Divider.test.tsx

@@ -0,0 +1,41 @@
+import { Divider } from "..";
+import { render, screen } from "@testing-library/react";
+
+describe("Divider component", () => {
+  it("should render a horizontal divider by default", () => {
+    // Arrange
+    render(<Divider />);
+
+    // Assert
+    const divider = screen.getByRole("separator");
+    expect(divider).toHaveAttribute("aria-orientation", "horizontal");
+  });
+
+  it("should accept a vertical orientation prop", () => {
+    // Arrange
+    render(<Divider orientation="vertical" />);
+
+    // Assert
+    const divider = screen.getByRole("separator");
+    expect(divider).toHaveAttribute("aria-orientation", "vertical");
+  });
+
+  it("should accept a className prop", () => {
+    // Arrange
+    const testClassName = "test-class";
+    render(<Divider className={testClassName} />);
+
+    // Assert
+    const divider = screen.getByRole("separator");
+    expect(divider).toHaveAttribute("class", testClassName);
+  });
+
+  it("should have a default className of empty string", () => {
+    // Arrange
+    render(<Divider />);
+
+    // Assert
+    const divider = screen.getByRole("separator");
+    expect(divider).toHaveAttribute("class", "");
+  });
+});

package/src/Divider/index.ts

@@ -0,0 +1 @@
+export * from './Divider';

package/src/Divider/types.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+
+export type DividerProps = ComponentProps<"span"> & {
+  orientation?: "horizontal" | "vertical";
+};