@moq/ui-core 0.1.0

package/README.md

@@ -0,0 +1,38 @@
+<p align="center">
+	<img height="128px" src="https://github.com/moq-dev/moq/blob/main/.github/logo.svg" alt="Media over QUIC">
+</p>
+
+# @moq/ui-core
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-ready-blue.svg)](https://www.typescriptlang.org/)
+
+Shared UI components for [Media over QUIC](https://moq.dev/) (MoQ) packages.
+
+`@moq/ui-core` provides reusable, accessible UI primitives used by `@moq/watch/ui` and `@moq/publish/ui`, built with [SolidJS](https://www.solidjs.com/).
+
+## Components
+
+### Button
+A styled, accessible button component with hover/active states and disabled support.
+
+### Icon
+SVG icon library including media controls (play, pause, volume, fullscreen, etc.), device indicators (camera, microphone, screen), and stats icons (network, video, audio, buffer).
+
+### Stats
+Real-time statistics panel for monitoring media streaming performance. Displays network, video, audio, and buffer metrics via a provider pattern.
+
+## CSS
+
+Shared stylesheets are available as CSS imports:
+
+- `@moq/ui-core/variables.css` — Theme variables (colors, spacing, border-radius)
+- `@moq/ui-core/flex.css` — Flexbox utility classes
+- `@moq/ui-core/button/button.css` — Button component styles
+- `@moq/ui-core/stats/styles/index.css` — Stats panel styles
+
+## License
+
+Licensed under either:
+
+-   Apache License, Version 2.0 ([LICENSE-APACHE](LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)
+-   MIT license ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT)

package/button/button.d.ts

@@ -0,0 +1,37 @@
+import type { JSX } from "solid-js/jsx-runtime";
+/**
+ * Props for the shared Button component.
+ *
+ * @property {('button' | 'submit' | 'reset')} [type] - Button type attribute. Defaults to 'button'.
+ * @property {string} [title] - Tooltip/title attribute for the button. Defaults to 'Simple button'.
+ * @property {() => void} [onClick] - Click handler function.
+ * @property {string} [class] - Additional CSS classes for custom styling.
+ * @property {JSX.Element | string} children - Button content (JSX or string). Required.
+ * @property {string} [ariaLabel] - Accessible label for screen readers. Falls back to title or children if not provided.
+ * @property {boolean} [ariaDisabled] - Accessibility disabled state (for ARIA only).
+ * @property {boolean} [disabled] - Disabled state (native HTML attribute).
+ * @property {number} [tabIndex] - Tab index for keyboard navigation. Uses browser default (typically 0) if not set.
+ */
+export type ButtonProps = {
+    type?: "button" | "submit" | "reset";
+    title?: string;
+    onClick?: () => void;
+    class?: string;
+    children: JSX.Element | string;
+    ariaLabel?: string;
+    ariaDisabled?: boolean;
+    disabled?: boolean;
+    tabIndex?: number;
+};
+/**
+ * Shared, accessible, and stylable Button component for SolidJS.
+ *
+ * - Injects a Constructable Stylesheet for style encapsulation (Shadow DOM-friendly).
+ * - Supports accessibility attributes and keyboard navigation.
+ * - Accepts custom content, classes, and state modifiers (e.g., active, disabled).
+ *
+ * @param {ButtonProps} props - Button configuration and content.
+ * @returns {JSX.Element} A styled, accessible button element.
+ */
+export default function Button(props: ButtonProps): JSX.Element;
+//# sourceMappingURL=button.d.ts.map

package/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,eAiBhD"}

package/icon/icon.d.ts

@@ -0,0 +1,28 @@
+import type { JSX } from "solid-js";
+/**
+ * Given the SVG source of an icon, return a JSX.Element
+ *
+ * @returns JSX.Element
+ */
+export declare function Element(src: string): JSX.Element;
+export declare const ArrowDown: () => JSX.Element;
+export declare const ArrowUp: () => JSX.Element;
+export declare const Audio: () => JSX.Element;
+export declare const Ban: () => JSX.Element;
+export declare const Buffer: () => JSX.Element;
+export declare const Camera: () => JSX.Element;
+export declare const File: () => JSX.Element;
+export declare const FullscreenEnter: () => JSX.Element;
+export declare const FullscreenExit: () => JSX.Element;
+export declare const Microphone: () => JSX.Element;
+export declare const Mute: () => JSX.Element;
+export declare const Network: () => JSX.Element;
+export declare const Pause: () => JSX.Element;
+export declare const Play: () => JSX.Element;
+export declare const Screen: () => JSX.Element;
+export declare const Stats: () => JSX.Element;
+export declare const Video: () => JSX.Element;
+export declare const VolumeHigh: () => JSX.Element;
+export declare const VolumeLow: () => JSX.Element;
+export declare const VolumeMedium: () => JSX.Element;
+//# sourceMappingURL=icon.d.ts.map

package/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAuBpC;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAEhD;AAKD,eAAO,MAAM,SAAS,mBAAkB,CAAC;AACzC,eAAO,MAAM,OAAO,mBAAgB,CAAC;AACrC,eAAO,MAAM,KAAK,mBAAc,CAAC;AACjC,eAAO,MAAM,GAAG,mBAAY,CAAC;AAC7B,eAAO,MAAM,MAAM,mBAAe,CAAC;AACnC,eAAO,MAAM,MAAM,mBAAe,CAAC;AACnC,eAAO,MAAM,IAAI,mBAAa,CAAC;AAC/B,eAAO,MAAM,eAAe,mBAAwB,CAAC;AACrD,eAAO,MAAM,cAAc,mBAAuB,CAAC;AACnD,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,IAAI,mBAAa,CAAC;AAC/B,eAAO,MAAM,OAAO,mBAAgB,CAAC;AACrC,eAAO,MAAM,KAAK,mBAAc,CAAC;AACjC,eAAO,MAAM,IAAI,mBAAa,CAAC;AAC/B,eAAO,MAAM,MAAM,mBAAe,CAAC;AACnC,eAAO,MAAM,KAAK,mBAAc,CAAC;AACjC,eAAO,MAAM,KAAK,mBAAc,CAAC;AACjC,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,SAAS,mBAAkB,CAAC;AACzC,eAAO,MAAM,YAAY,mBAAqB,CAAC"}

package/index.d.ts

@@ -0,0 +1,5 @@
+export { type ButtonProps, default as Button } from "./button/button";
+export * as Icon from "./icon/icon";
+export { Stats } from "./stats";
+export type { KnownStatsProviders, ProviderContext, ProviderProps } from "./stats/types";
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,KAAK,IAAI,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC"}