@qeetrix/react 0.0.1 → 0.0.4

package/dist/toggle/toggle.d.ts

@@ -0,0 +1,48 @@
+import { ControlSize, QeetrixIcon } from "../internal/control.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+export interface ToggleProps extends Omit<ComponentProps<"button">, "value" | "defaultValue" | "onChange" | "children"> {
+  /** Controlled pressed state. */
+  pressed?: boolean;
+  /** Initial pressed state when uncontrolled. */
+  defaultPressed?: boolean;
+  /** Called with the new pressed state and Base UI's event details. */
+  onPressedChange?: Toggle.Props["onPressedChange"];
+  /** The toggle's value inside a ToggleGroup. */
+  value?: string;
+  /** Height from the density tokens. Default `md`; a ToggleGroup's size wins inside the group. */
+  size?: ControlSize;
+  /** An icon from `@qeetrix/icons`, in the sharp shape. Icon-only toggles need `aria-label`. */
+  icon?: QeetrixIcon;
+  /** Show the icon's filled drawing while pressed. Only for icons that have one. */
+  filledWhenPressed?: boolean;
+  /** The label. */
+  children?: ReactNode;
+  /** Render a different element through Base UI. */
+  render?: Toggle.Props["render"];
+}
+/** A pressed / not-pressed control: a tool, or one view among a few (inside a ToggleGroup). */
+declare function Toggle$1({ size, icon, filledWhenPressed, className, children, type, ...props }: ToggleProps): ReactElement;
+export type ToggleGroupVariant = "segmented" | "separate";
+export interface ToggleGroupProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "dir"> {
+  /** Controlled pressed values. */
+  value?: readonly string[];
+  /** Initial pressed values when uncontrolled. */
+  defaultValue?: readonly string[];
+  /** Called with the pressed values and Base UI's event details. */
+  onValueChange?: ToggleGroup.Props["onValueChange"];
+  /** Allow several toggles pressed at once. Default: one at a time. */
+  multiple?: boolean;
+  /** Disable every toggle. */
+  disabled?: boolean;
+  /** Default `horizontal`. */
+  orientation?: "horizontal" | "vertical";
+  /** `segmented` (default): one joined control. `separate`: individual toggles with a gap. */
+  variant?: ToggleGroupVariant;
+  /** Height for every toggle in the group. Default `md`. */
+  size?: ControlSize;
+}
+/** A row of toggles: a segmented control for one view among a few, or a set of tools. */
+declare function ToggleGroup$1({ variant, size, orientation, className, ...props }: ToggleGroupProps): ReactElement;
+export { Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup };

package/dist/toggle/toggle.js

@@ -0,0 +1,54 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { iconSize } from "../internal/control.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+// src/toggle/toggle.tsx
+function FilledIcon({ icon: Icon, size }) {
+	return /* @__PURE__ */ jsx(Icon, {
+		shape: "sharp",
+		variant: "filled",
+		size,
+		"aria-hidden": true,
+		className: "qx-toggle-icon-filled"
+	});
+}
+/** A pressed / not-pressed control: a tool, or one view among a few (inside a ToggleGroup). */
+function Toggle$1({ size = "md", icon, filledWhenPressed, className, children, type = "button", ...props }) {
+	const Icon = icon;
+	return /* @__PURE__ */ jsxs(Toggle, {
+		...props,
+		type,
+		className: cx("qx-toggle", className),
+		"data-slot": "toggle",
+		"data-size": size,
+		"data-icon-only": Icon && children === void 0 ? "" : void 0,
+		children: [
+			Icon ? /* @__PURE__ */ jsx(Icon, {
+				shape: "sharp",
+				size: iconSize(size),
+				"aria-hidden": true,
+				className: "qx-toggle-icon-outline"
+			}) : null,
+			Icon && filledWhenPressed ? /* @__PURE__ */ jsx(FilledIcon, {
+				icon: Icon,
+				size: iconSize(size)
+			}) : null,
+			children
+		]
+	});
+}
+/** A row of toggles: a segmented control for one view among a few, or a set of tools. */
+function ToggleGroup$1({ variant = "segmented", size = "md", orientation = "horizontal", className, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		...props,
+		orientation,
+		className: cx("qx-toggle-group", className),
+		"data-slot": "toggle-group",
+		"data-variant": variant,
+		"data-size": size,
+		"data-orientation": orientation
+	});
+}
+export { Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup };

package/dist/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./tooltip.js";
+export { Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps };

package/dist/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip, TooltipProvider } from "./tooltip.js";

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement, ReactNode } from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
+export interface TooltipProps extends Omit<Tooltip.Root.Props, "children"> {
+  /** The text. Short, never interactive and never essential. */
+  content: ReactNode;
+  /** The trigger: one element that takes a ref and props, such as an IconButton. */
+  children: ReactElement;
+  /** Default `top`; it flips when there is no room. */
+  side?: Tooltip.Positioner.Props["side"];
+  align?: Tooltip.Positioner.Props["align"];
+  /** Hover time before it opens, in milliseconds. Default 500; keyboard focus opens it at once. */
+  delay?: number;
+  /** Time before it closes after the pointer leaves, in milliseconds. */
+  closeDelay?: number;
+}
+export interface TooltipProviderProps extends Tooltip.Provider.Props {}
+/**
+ * Groups tooltips (an app, a toolbar): once one is open, moving to a neighbour opens it at once.
+ */
+export declare function TooltipProvider({ delay, closeDelay, ...props }: TooltipProviderProps): ReactElement;
+/**
+ * A short label for a control, most often an icon-only button (06-component-specs.md §7):
+ * `<Tooltip content="Download invoice"><IconButton … /></Tooltip>`. It doesn't appear on touch.
+ */
+declare function Tooltip$1({ content, children, side, align, delay, closeDelay, ...props }: TooltipProps): ReactElement;
+export { Tooltip$1 as Tooltip };

package/dist/tooltip/tooltip.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/tooltip/tooltip.tsx
+/**
+* Groups tooltips (an app, a toolbar): once one is open, moving to a neighbour opens it at once.
+*/
+function TooltipProvider({ delay = 500, closeDelay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		...props,
+		delay,
+		closeDelay
+	});
+}
+/**
+* A short label for a control, most often an icon-only button (06-component-specs.md §7):
+* `<Tooltip content="Download invoice"><IconButton … /></Tooltip>`. It doesn't appear on touch.
+*/
+function Tooltip$1({ content, children, side = "top", align, delay = 500, closeDelay, ...props }) {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, {
+		...props,
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			render: children,
+			delay,
+			closeDelay
+		}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			side,
+			align,
+			sideOffset: 6,
+			className: "qx-tooltip-positioner",
+			children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+				className: "qx-tooltip",
+				"data-slot": "tooltip-popup",
+				children: content
+			})
+		}) })]
+	});
+}
+export { Tooltip$1 as Tooltip, TooltipProvider };

package/dist/visually-hidden/index.d.ts

@@ -0,0 +1,2 @@
+import { VisuallyHidden, VisuallyHiddenProps } from "./visually-hidden.js";
+export { VisuallyHidden, type VisuallyHiddenProps };

package/dist/visually-hidden/index.js

@@ -0,0 +1 @@
+export { VisuallyHidden } from "./visually-hidden.js";

package/dist/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,8 @@
+import { RenderProp } from "../internal/render.js";
+import { ComponentProps, ReactElement } from "react";
+export interface VisuallyHiddenProps extends ComponentProps<"span"> {
+  /** Render a different element. */
+  render?: RenderProp;
+}
+/** Content for screen readers only, e.g. the label of an icon-only control. Never `display: none`. */
+export declare function VisuallyHidden({ render, className, ...props }: VisuallyHiddenProps): ReactElement;

package/dist/visually-hidden/visually-hidden.js

@@ -0,0 +1,12 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+// src/visually-hidden/visually-hidden.tsx
+/** Content for screen readers only, e.g. the label of an icon-only control. Never `display: none`. */
+function VisuallyHidden({ render, className, ...props }) {
+	return renderElement("span", render, {
+		...props,
+		className: cx("qx-visually-hidden", className),
+		"data-slot": "visually-hidden"
+	});
+}
+export { VisuallyHidden };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qeetrix/react",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "Qeetrix React components: accessible, token-driven primitives on Base UI for every Qeet product.",
   "keywords": [
     "qeetrix",
@@ -35,6 +35,170 @@
       "style": "./dist/styles.css",
       "default": "./dist/index.js"
     },
+    "./accordion": {
+      "types": "./dist/accordion/index.d.ts",
+      "default": "./dist/accordion/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/avatar/index.d.ts",
+      "default": "./dist/avatar/index.js"
+    },
+    "./badge": {
+      "types": "./dist/badge/index.d.ts",
+      "default": "./dist/badge/index.js"
+    },
+    "./box": {
+      "types": "./dist/box/index.d.ts",
+      "default": "./dist/box/index.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "default": "./dist/button/index.js"
+    },
+    "./card": {
+      "types": "./dist/card/index.d.ts",
+      "default": "./dist/card/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.ts",
+      "default": "./dist/checkbox/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog/index.d.ts",
+      "default": "./dist/dialog/index.js"
+    },
+    "./drawer": {
+      "types": "./dist/drawer/index.d.ts",
+      "default": "./dist/drawer/index.js"
+    },
+    "./experimental": {
+      "types": "./dist/experimental/index.d.ts",
+      "default": "./dist/experimental/index.js"
+    },
+    "./field": {
+      "types": "./dist/field/index.d.ts",
+      "default": "./dist/field/index.js"
+    },
+    "./fieldset": {
+      "types": "./dist/fieldset/index.d.ts",
+      "default": "./dist/fieldset/index.js"
+    },
+    "./format": {
+      "types": "./dist/format/index.d.ts",
+      "default": "./dist/format/index.js"
+    },
+    "./grid": {
+      "types": "./dist/grid/index.d.ts",
+      "default": "./dist/grid/index.js"
+    },
+    "./heading": {
+      "types": "./dist/heading/index.d.ts",
+      "default": "./dist/heading/index.js"
+    },
+    "./inline": {
+      "types": "./dist/inline/index.d.ts",
+      "default": "./dist/inline/index.js"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.ts",
+      "default": "./dist/input/index.js"
+    },
+    "./link": {
+      "types": "./dist/link/index.d.ts",
+      "default": "./dist/link/index.js"
+    },
+    "./menu": {
+      "types": "./dist/menu/index.d.ts",
+      "default": "./dist/menu/index.js"
+    },
+    "./popover": {
+      "types": "./dist/popover/index.d.ts",
+      "default": "./dist/popover/index.js"
+    },
+    "./progress": {
+      "types": "./dist/progress/index.d.ts",
+      "default": "./dist/progress/index.js"
+    },
+    "./provider": {
+      "types": "./dist/provider/index.d.ts",
+      "default": "./dist/provider/index.js"
+    },
+    "./radio": {
+      "types": "./dist/radio/index.d.ts",
+      "default": "./dist/radio/index.js"
+    },
+    "./scroll-area": {
+      "types": "./dist/scroll-area/index.d.ts",
+      "default": "./dist/scroll-area/index.js"
+    },
+    "./select": {
+      "types": "./dist/select/index.d.ts",
+      "default": "./dist/select/index.js"
+    },
+    "./separator": {
+      "types": "./dist/separator/index.d.ts",
+      "default": "./dist/separator/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/skeleton/index.d.ts",
+      "default": "./dist/skeleton/index.js"
+    },
+    "./skip-link": {
+      "types": "./dist/skip-link/index.d.ts",
+      "default": "./dist/skip-link/index.js"
+    },
+    "./slider": {
+      "types": "./dist/slider/index.d.ts",
+      "default": "./dist/slider/index.js"
+    },
+    "./spinner": {
+      "types": "./dist/spinner/index.d.ts",
+      "default": "./dist/spinner/index.js"
+    },
+    "./stack": {
+      "types": "./dist/stack/index.d.ts",
+      "default": "./dist/stack/index.js"
+    },
+    "./switch": {
+      "types": "./dist/switch/index.d.ts",
+      "default": "./dist/switch/index.js"
+    },
+    "./table": {
+      "types": "./dist/table/index.d.ts",
+      "default": "./dist/table/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs/index.d.ts",
+      "default": "./dist/tabs/index.js"
+    },
+    "./text": {
+      "types": "./dist/text/index.d.ts",
+      "default": "./dist/text/index.js"
+    },
+    "./text-field": {
+      "types": "./dist/text-field/index.d.ts",
+      "default": "./dist/text-field/index.js"
+    },
+    "./toast": {
+      "types": "./dist/toast/index.d.ts",
+      "default": "./dist/toast/index.js"
+    },
+    "./toggle": {
+      "types": "./dist/toggle/index.d.ts",
+      "default": "./dist/toggle/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip/index.d.ts",
+      "default": "./dist/tooltip/index.js"
+    },
+    "./visually-hidden": {
+      "types": "./dist/visually-hidden/index.d.ts",
+      "default": "./dist/visually-hidden/index.js"
+    },
+    "./locales/hi": {
+      "types": "./dist/locales/hi.d.ts",
+      "default": "./dist/locales/hi.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./css/*": "./dist/css/*",
     "./package.json": "./package.json"
@@ -53,8 +217,12 @@
     "check:package": "publint --strict && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css ./css/*",
     "prepack": "bun run build"
   },
+  "dependencies": {
+    "@qeetrix/icons": "^1.0.12"
+  },
   "peerDependencies": {
-    "@qeetrix/tokens": "^0.0.5",
+    "@base-ui/react": "^1.9.0",
+    "@qeetrix/tokens": "^0.0.7",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },