@table-js/ui 0.0.1

package/README.md

@@ -0,0 +1,35 @@
+# @tablejs/ui
+
+UI components for Table.js Smart TV applications.
+
+## Installation
+
+```bash
+npm install @tablejs/ui @tablejs/core
+```
+
+## Components
+
+- **Button** - Focusable button with variants
+- **Card** - Content card with image and text
+- **Shelf** - Netflix-style horizontal scrolling shelf
+- **Modal** - Overlay modal with focus trap
+
+## Usage
+
+```tsx
+import { Button, Card, Shelf } from '@tablejs/ui'
+
+function HomePage() {
+  return (
+    <Shelf title="Popular Movies">
+      <Card title="Inception" image="/inception.jpg" />
+      <Card title="Interstellar" image="/interstellar.jpg" />
+    </Shelf>
+  )
+}
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { UseFocusableOptions } from '@table/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ButtonProps extends UseFocusableOptions {
+    children: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends UseFocusableOptions {
+    title?: string;
+    subtitle?: string;
+    image?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ShelfProps {
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Shelf({ title, children, className }: ShelfProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Modal({ open, onClose, title, children, className }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+export { Button, Card, Modal, Shelf };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { UseFocusableOptions } from '@table/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ButtonProps extends UseFocusableOptions {
+    children: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends UseFocusableOptions {
+    title?: string;
+    subtitle?: string;
+    image?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ShelfProps {
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Shelf({ title, children, className }: ShelfProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Modal({ open, onClose, title, children, className }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+export { Button, Card, Modal, Shelf };

package/dist/index.js

@@ -0,0 +1,162 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Card: () => Card,
+  Modal: () => Modal,
+  Shelf: () => Shelf
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button.tsx
+var import_react = require("react");
+var import_core = require("@table/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_react.forwardRef)(
+  ({ children, variant = "primary", size = "md", className = "", ...focus }, ref) => {
+    const base = "rounded-lg font-semibold transition-all duration-150";
+    const variants = {
+      primary: "bg-indigo-600 text-white",
+      secondary: "bg-zinc-700 text-white",
+      ghost: "bg-transparent text-white"
+    };
+    const sizes = {
+      sm: "px-4 py-2 text-sm",
+      md: "px-6 py-3 text-base",
+      lg: "px-8 py-4 text-lg"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Focusable, { ...focus, children: (focused) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref,
+        className: ` ${base} ${variants[variant]} ${sizes[size]} ${focused ? "scale-105 ring-4 ring-white" : ""} ${className} `,
+        children
+      }
+    ) });
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Card.tsx
+var import_react2 = require("react");
+var import_core2 = require("@table/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Card = (0, import_react2.forwardRef)(
+  ({ title, subtitle, image, children, className = "", ...focus }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Focusable, { ...focus, children: (focused) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        ref,
+        className: `overflow-hidden rounded-xl bg-zinc-800 transition-transform duration-150 ${focused ? "scale-105 ring-4 ring-white" : ""} ${className} `,
+        children: [
+          image && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "aspect-video w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: image, alt: title, className: "h-full w-full object-cover" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-4", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "mb-1 text-lg font-bold", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-zinc-400", children: subtitle }),
+            children
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+Card.displayName = "Card";
+
+// src/components/Shelf.tsx
+var import_react3 = require("react");
+var import_core3 = require("@table/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Shelf({ title, children, className = "" }) {
+  const ref = (0, import_react3.useRef)(null);
+  const [offset, setOffset] = (0, import_react3.useState)(0);
+  const { manager } = (0, import_core3.useFocusContext)();
+  (0, import_react3.useEffect)(() => {
+    const container = ref.current;
+    if (!container) return;
+    const update = () => {
+      const focused = container.querySelector('[data-focused="true"]');
+      if (!focused) return;
+      const rect = focused.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const itemWidth = rect.width + 24;
+      if (rect.left < containerRect.left) {
+        setOffset((prev) => prev + itemWidth);
+      } else if (rect.right > containerRect.right) {
+        setOffset((prev) => prev - itemWidth);
+      }
+    };
+    const id = manager.getFocusedId();
+    if (id) update();
+    const interval = setInterval(update, 100);
+    return () => clearInterval(interval);
+  }, [manager]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "mb-4 px-16 text-2xl font-bold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "overflow-hidden px-16", ref, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.FocusGroup, { orientation: "horizontal", loop: false, rememberFocus: false, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: "flex gap-6 transition-transform duration-300",
+        style: { transform: `translateX(${offset}px)` },
+        children
+      }
+    ) }) })
+  ] });
+}
+
+// src/components/Modal.tsx
+var import_react4 = require("react");
+var import_core4 = require("@table/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Modal({ open, onClose, title, children, className = "" }) {
+  const { keyHandler } = (0, import_core4.useFocusContext)();
+  (0, import_react4.useEffect)(() => {
+    if (!open) return;
+    const unsub = keyHandler.subscribe((action) => {
+      if (action.type === "back") {
+        onClose();
+      }
+    });
+    return unsub;
+  }, [open, onClose, keyHandler]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 bg-black/80", onClick: onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: `relative z-10 w-full max-w-2xl rounded-2xl border border-zinc-700 bg-zinc-900 p-8 shadow-2xl ${className} `,
+        children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "mb-6 text-3xl font-bold", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.FocusGroup, { orientation: "vertical", loop: false, rememberFocus: false, children })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Card,
+  Modal,
+  Shelf
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/Button.tsx","../src/components/Card.tsx","../src/components/Shelf.tsx","../src/components/Modal.tsx"],"sourcesContent":["export { Button } from './components/Button'\nexport { Card } from './components/Card'\nexport { Shelf } from './components/Shelf'\nexport { Modal } from './components/Modal'\n","import { forwardRef } from 'react'\nimport { Focusable } from '@table/core'\nimport type { UseFocusableOptions } from '@table/core'\n\ninterface ButtonProps extends UseFocusableOptions {\n  children: React.ReactNode\n  variant?: 'primary' | 'secondary' | 'ghost'\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children, variant = 'primary', size = 'md', className = '', ...focus }, ref) => {\n    const base = 'rounded-lg font-semibold transition-all duration-150'\n\n    const variants = {\n      primary: 'bg-indigo-600 text-white',\n      secondary: 'bg-zinc-700 text-white',\n      ghost: 'bg-transparent text-white',\n    }\n\n    const sizes = {\n      sm: 'px-4 py-2 text-sm',\n      md: 'px-6 py-3 text-base',\n      lg: 'px-8 py-4 text-lg',\n    }\n\n    return (\n      <Focusable {...focus}>\n        {(focused) => (\n          <button\n            ref={ref as never}\n            className={` ${base} ${variants[variant]} ${sizes[size]} ${focused ? 'scale-105 ring-4 ring-white' : ''} ${className} `}\n          >\n            {children}\n          </button>\n        )}\n      </Focusable>\n    )\n  },\n)\n\nButton.displayName = 'Button'\n","import { forwardRef } from 'react'\nimport { Focusable } from '@table/core'\nimport type { UseFocusableOptions } from '@table/core'\n\ninterface CardProps extends UseFocusableOptions {\n  title?: string\n  subtitle?: string\n  image?: string\n  children?: React.ReactNode\n  className?: string\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ title, subtitle, image, children, className = '', ...focus }, ref) => {\n    return (\n      <Focusable {...focus}>\n        {(focused) => (\n          <div\n            ref={ref as never}\n            className={`overflow-hidden rounded-xl bg-zinc-800 transition-transform duration-150 ${focused ? 'scale-105 ring-4 ring-white' : ''} ${className} `}\n          >\n            {image && (\n              <div className=\"aspect-video w-full overflow-hidden\">\n                <img src={image} alt={title} className=\"h-full w-full object-cover\" />\n              </div>\n            )}\n            <div className=\"p-4\">\n              {title && <h3 className=\"mb-1 text-lg font-bold\">{title}</h3>}\n              {subtitle && <p className=\"text-sm text-zinc-400\">{subtitle}</p>}\n              {children}\n            </div>\n          </div>\n        )}\n      </Focusable>\n    )\n  },\n)\n\nCard.displayName = 'Card'\n","import { useRef, useEffect, useState } from 'react'\nimport { FocusGroup, useFocusContext } from '@table/core'\n\ninterface ShelfProps {\n  title?: string\n  children: React.ReactNode\n  className?: string\n}\n\nexport function Shelf({ title, children, className = '' }: ShelfProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  const [offset, setOffset] = useState(0)\n  const { manager } = useFocusContext()\n\n  useEffect(() => {\n    const container = ref.current\n    if (!container) return\n\n    const update = () => {\n      const focused = container.querySelector('[data-focused=\"true\"]')\n      if (!focused) return\n\n      const rect = focused.getBoundingClientRect()\n      const containerRect = container.getBoundingClientRect()\n      const itemWidth = rect.width + 24\n\n      if (rect.left < containerRect.left) {\n        setOffset((prev) => prev + itemWidth)\n      } else if (rect.right > containerRect.right) {\n        setOffset((prev) => prev - itemWidth)\n      }\n    }\n\n    const id = manager.getFocusedId()\n    if (id) update()\n\n    const interval = setInterval(update, 100)\n    return () => clearInterval(interval)\n  }, [manager])\n\n  return (\n    <div className={className}>\n      {title && <h2 className=\"mb-4 px-16 text-2xl font-bold\">{title}</h2>}\n      <div className=\"overflow-hidden px-16\" ref={ref}>\n        <FocusGroup orientation=\"horizontal\" loop={false} rememberFocus={false}>\n          <div\n            className=\"flex gap-6 transition-transform duration-300\"\n            style={{ transform: `translateX(${offset}px)` }}\n          >\n            {children}\n          </div>\n        </FocusGroup>\n      </div>\n    </div>\n  )\n}\n","import { useEffect } from 'react'\nimport { FocusGroup, useFocusContext } from '@table/core'\n\ninterface ModalProps {\n  open: boolean\n  onClose: () => void\n  title?: string\n  children: React.ReactNode\n  className?: string\n}\n\nexport function Modal({ open, onClose, title, children, className = '' }: ModalProps) {\n  const { keyHandler } = useFocusContext()\n\n  useEffect(() => {\n    if (!open) return\n\n    const unsub = keyHandler.subscribe((action) => {\n      if (action.type === 'back') {\n        onClose()\n      }\n    })\n\n    return unsub\n  }, [open, onClose, keyHandler])\n\n  if (!open) return null\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      <div className=\"absolute inset-0 bg-black/80\" onClick={onClose} />\n      <div\n        className={`relative z-10 w-full max-w-2xl rounded-2xl border border-zinc-700 bg-zinc-900 p-8 shadow-2xl ${className} `}\n      >\n        {title && <h2 className=\"mb-6 text-3xl font-bold\">{title}</h2>}\n        <FocusGroup orientation=\"vertical\" loop={false} rememberFocus={false}>\n          {children}\n        </FocusGroup>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["import_react","import_core","import_jsx_runtime","import_react","import_core","import_jsx_runtime","import_react","import_core","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,132 @@
+// src/components/Button.tsx
+import { forwardRef } from "react";
+import { Focusable } from "@table/core";
+import { jsx } from "react/jsx-runtime";
+var Button = forwardRef(
+  ({ children, variant = "primary", size = "md", className = "", ...focus }, ref) => {
+    const base = "rounded-lg font-semibold transition-all duration-150";
+    const variants = {
+      primary: "bg-indigo-600 text-white",
+      secondary: "bg-zinc-700 text-white",
+      ghost: "bg-transparent text-white"
+    };
+    const sizes = {
+      sm: "px-4 py-2 text-sm",
+      md: "px-6 py-3 text-base",
+      lg: "px-8 py-4 text-lg"
+    };
+    return /* @__PURE__ */ jsx(Focusable, { ...focus, children: (focused) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: ` ${base} ${variants[variant]} ${sizes[size]} ${focused ? "scale-105 ring-4 ring-white" : ""} ${className} `,
+        children
+      }
+    ) });
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Card.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Focusable as Focusable2 } from "@table/core";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Card = forwardRef2(
+  ({ title, subtitle, image, children, className = "", ...focus }, ref) => {
+    return /* @__PURE__ */ jsx2(Focusable2, { ...focus, children: (focused) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: `overflow-hidden rounded-xl bg-zinc-800 transition-transform duration-150 ${focused ? "scale-105 ring-4 ring-white" : ""} ${className} `,
+        children: [
+          image && /* @__PURE__ */ jsx2("div", { className: "aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsx2("img", { src: image, alt: title, className: "h-full w-full object-cover" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+            title && /* @__PURE__ */ jsx2("h3", { className: "mb-1 text-lg font-bold", children: title }),
+            subtitle && /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-400", children: subtitle }),
+            children
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+Card.displayName = "Card";
+
+// src/components/Shelf.tsx
+import { useRef, useEffect, useState } from "react";
+import { FocusGroup, useFocusContext } from "@table/core";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Shelf({ title, children, className = "" }) {
+  const ref = useRef(null);
+  const [offset, setOffset] = useState(0);
+  const { manager } = useFocusContext();
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) return;
+    const update = () => {
+      const focused = container.querySelector('[data-focused="true"]');
+      if (!focused) return;
+      const rect = focused.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const itemWidth = rect.width + 24;
+      if (rect.left < containerRect.left) {
+        setOffset((prev) => prev + itemWidth);
+      } else if (rect.right > containerRect.right) {
+        setOffset((prev) => prev - itemWidth);
+      }
+    };
+    const id = manager.getFocusedId();
+    if (id) update();
+    const interval = setInterval(update, 100);
+    return () => clearInterval(interval);
+  }, [manager]);
+  return /* @__PURE__ */ jsxs2("div", { className, children: [
+    title && /* @__PURE__ */ jsx3("h2", { className: "mb-4 px-16 text-2xl font-bold", children: title }),
+    /* @__PURE__ */ jsx3("div", { className: "overflow-hidden px-16", ref, children: /* @__PURE__ */ jsx3(FocusGroup, { orientation: "horizontal", loop: false, rememberFocus: false, children: /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "flex gap-6 transition-transform duration-300",
+        style: { transform: `translateX(${offset}px)` },
+        children
+      }
+    ) }) })
+  ] });
+}
+
+// src/components/Modal.tsx
+import { useEffect as useEffect2 } from "react";
+import { FocusGroup as FocusGroup2, useFocusContext as useFocusContext2 } from "@table/core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Modal({ open, onClose, title, children, className = "" }) {
+  const { keyHandler } = useFocusContext2();
+  useEffect2(() => {
+    if (!open) return;
+    const unsub = keyHandler.subscribe((action) => {
+      if (action.type === "back") {
+        onClose();
+      }
+    });
+    return unsub;
+  }, [open, onClose, keyHandler]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs3("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-black/80", onClick: onClose }),
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: `relative z-10 w-full max-w-2xl rounded-2xl border border-zinc-700 bg-zinc-900 p-8 shadow-2xl ${className} `,
+        children: [
+          title && /* @__PURE__ */ jsx4("h2", { className: "mb-6 text-3xl font-bold", children: title }),
+          /* @__PURE__ */ jsx4(FocusGroup2, { orientation: "vertical", loop: false, rememberFocus: false, children })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Button,
+  Card,
+  Modal,
+  Shelf
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button.tsx","../src/components/Card.tsx","../src/components/Shelf.tsx","../src/components/Modal.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Focusable } from '@table/core'\nimport type { UseFocusableOptions } from '@table/core'\n\ninterface ButtonProps extends UseFocusableOptions {\n  children: React.ReactNode\n  variant?: 'primary' | 'secondary' | 'ghost'\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children, variant = 'primary', size = 'md', className = '', ...focus }, ref) => {\n    const base = 'rounded-lg font-semibold transition-all duration-150'\n\n    const variants = {\n      primary: 'bg-indigo-600 text-white',\n      secondary: 'bg-zinc-700 text-white',\n      ghost: 'bg-transparent text-white',\n    }\n\n    const sizes = {\n      sm: 'px-4 py-2 text-sm',\n      md: 'px-6 py-3 text-base',\n      lg: 'px-8 py-4 text-lg',\n    }\n\n    return (\n      <Focusable {...focus}>\n        {(focused) => (\n          <button\n            ref={ref as never}\n            className={` ${base} ${variants[variant]} ${sizes[size]} ${focused ? 'scale-105 ring-4 ring-white' : ''} ${className} `}\n          >\n            {children}\n          </button>\n        )}\n      </Focusable>\n    )\n  },\n)\n\nButton.displayName = 'Button'\n","import { forwardRef } from 'react'\nimport { Focusable } from '@table/core'\nimport type { UseFocusableOptions } from '@table/core'\n\ninterface CardProps extends UseFocusableOptions {\n  title?: string\n  subtitle?: string\n  image?: string\n  children?: React.ReactNode\n  className?: string\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ title, subtitle, image, children, className = '', ...focus }, ref) => {\n    return (\n      <Focusable {...focus}>\n        {(focused) => (\n          <div\n            ref={ref as never}\n            className={`overflow-hidden rounded-xl bg-zinc-800 transition-transform duration-150 ${focused ? 'scale-105 ring-4 ring-white' : ''} ${className} `}\n          >\n            {image && (\n              <div className=\"aspect-video w-full overflow-hidden\">\n                <img src={image} alt={title} className=\"h-full w-full object-cover\" />\n              </div>\n            )}\n            <div className=\"p-4\">\n              {title && <h3 className=\"mb-1 text-lg font-bold\">{title}</h3>}\n              {subtitle && <p className=\"text-sm text-zinc-400\">{subtitle}</p>}\n              {children}\n            </div>\n          </div>\n        )}\n      </Focusable>\n    )\n  },\n)\n\nCard.displayName = 'Card'\n","import { useRef, useEffect, useState } from 'react'\nimport { FocusGroup, useFocusContext } from '@table/core'\n\ninterface ShelfProps {\n  title?: string\n  children: React.ReactNode\n  className?: string\n}\n\nexport function Shelf({ title, children, className = '' }: ShelfProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  const [offset, setOffset] = useState(0)\n  const { manager } = useFocusContext()\n\n  useEffect(() => {\n    const container = ref.current\n    if (!container) return\n\n    const update = () => {\n      const focused = container.querySelector('[data-focused=\"true\"]')\n      if (!focused) return\n\n      const rect = focused.getBoundingClientRect()\n      const containerRect = container.getBoundingClientRect()\n      const itemWidth = rect.width + 24\n\n      if (rect.left < containerRect.left) {\n        setOffset((prev) => prev + itemWidth)\n      } else if (rect.right > containerRect.right) {\n        setOffset((prev) => prev - itemWidth)\n      }\n    }\n\n    const id = manager.getFocusedId()\n    if (id) update()\n\n    const interval = setInterval(update, 100)\n    return () => clearInterval(interval)\n  }, [manager])\n\n  return (\n    <div className={className}>\n      {title && <h2 className=\"mb-4 px-16 text-2xl font-bold\">{title}</h2>}\n      <div className=\"overflow-hidden px-16\" ref={ref}>\n        <FocusGroup orientation=\"horizontal\" loop={false} rememberFocus={false}>\n          <div\n            className=\"flex gap-6 transition-transform duration-300\"\n            style={{ transform: `translateX(${offset}px)` }}\n          >\n            {children}\n          </div>\n        </FocusGroup>\n      </div>\n    </div>\n  )\n}\n","import { useEffect } from 'react'\nimport { FocusGroup, useFocusContext } from '@table/core'\n\ninterface ModalProps {\n  open: boolean\n  onClose: () => void\n  title?: string\n  children: React.ReactNode\n  className?: string\n}\n\nexport function Modal({ open, onClose, title, children, className = '' }: ModalProps) {\n  const { keyHandler } = useFocusContext()\n\n  useEffect(() => {\n    if (!open) return\n\n    const unsub = keyHandler.subscribe((action) => {\n      if (action.type === 'back') {\n        onClose()\n      }\n    })\n\n    return unsub\n  }, [open, onClose, keyHandler])\n\n  if (!open) return null\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      <div className=\"absolute inset-0 bg-black/80\" onClick={onClose} />\n      <div\n        className={`relative z-10 w-full max-w-2xl rounded-2xl border border-zinc-700 bg-zinc-900 p-8 shadow-2xl ${className} `}\n      >\n        {title && <h2 className=\"mb-6 text-3xl font-bold\">{title}</h2>}\n        <FocusGroup orientation=\"vertical\" loop={false} rememberFocus={false}>\n          {children}\n        </FocusGroup>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["forwardRef","Focusable","jsx","jsx","jsxs","useEffect","FocusGroup","useFocusContext","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@table-js/ui",
+  "version": "0.0.1",
+  "description": "Table.js UI components for Smart TV",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "smart-tv",
+    "ui",
+    "components",
+    "react",
+    "tizen",
+    "webos"
+  ],
+  "author": "Table.js Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tablejs/tablejs"
+  },
+  "devDependencies": {
+    "@table/tsconfig": "workspace:*",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "@table-js/core": "^0.0.1",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}