@table-js/ui 0.0.1 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +14 -36
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +15 -37
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -12
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -29,7 +29,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
29
29
|
|
|
30
30
|
// src/components/Button.tsx
|
|
31
31
|
var import_react = require("react");
|
|
32
|
-
var import_core = require("@table/core");
|
|
32
|
+
var import_core = require("@table-js/core");
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
34
|
var Button = (0, import_react.forwardRef)(
|
|
35
35
|
({ children, variant = "primary", size = "md", className = "", ...focus }, ref) => {
|
|
@@ -58,7 +58,7 @@ Button.displayName = "Button";
|
|
|
58
58
|
|
|
59
59
|
// src/components/Card.tsx
|
|
60
60
|
var import_react2 = require("react");
|
|
61
|
-
var import_core2 = require("@table/core");
|
|
61
|
+
var import_core2 = require("@table-js/core");
|
|
62
62
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
63
63
|
var Card = (0, import_react2.forwardRef)(
|
|
64
64
|
({ title, subtitle, image, children, className = "", ...focus }, ref) => {
|
|
@@ -82,53 +82,31 @@ var Card = (0, import_react2.forwardRef)(
|
|
|
82
82
|
Card.displayName = "Card";
|
|
83
83
|
|
|
84
84
|
// src/components/Shelf.tsx
|
|
85
|
-
var
|
|
86
|
-
var import_core3 = require("@table/core");
|
|
85
|
+
var import_core3 = require("@table-js/core");
|
|
87
86
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
88
87
|
function Shelf({ title, children, className = "" }) {
|
|
89
|
-
|
|
90
|
-
const [offset, setOffset] = (0, import_react3.useState)(0);
|
|
91
|
-
const { manager } = (0, import_core3.useFocusContext)();
|
|
92
|
-
(0, import_react3.useEffect)(() => {
|
|
93
|
-
const container = ref.current;
|
|
94
|
-
if (!container) return;
|
|
95
|
-
const update = () => {
|
|
96
|
-
const focused = container.querySelector('[data-focused="true"]');
|
|
97
|
-
if (!focused) return;
|
|
98
|
-
const rect = focused.getBoundingClientRect();
|
|
99
|
-
const containerRect = container.getBoundingClientRect();
|
|
100
|
-
const itemWidth = rect.width + 24;
|
|
101
|
-
if (rect.left < containerRect.left) {
|
|
102
|
-
setOffset((prev) => prev + itemWidth);
|
|
103
|
-
} else if (rect.right > containerRect.right) {
|
|
104
|
-
setOffset((prev) => prev - itemWidth);
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
const id = manager.getFocusedId();
|
|
108
|
-
if (id) update();
|
|
109
|
-
const interval = setInterval(update, 100);
|
|
110
|
-
return () => clearInterval(interval);
|
|
111
|
-
}, [manager]);
|
|
112
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className, children: [
|
|
113
89
|
title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "mb-4 px-16 text-2xl font-bold", children: title }),
|
|
114
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "overflow-hidden px-16
|
|
115
|
-
|
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "overflow-x-auto overflow-y-hidden px-16 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
91
|
+
import_core3.FocusGroup,
|
|
116
92
|
{
|
|
117
|
-
|
|
118
|
-
|
|
93
|
+
orientation: "horizontal",
|
|
94
|
+
loop: false,
|
|
95
|
+
rememberFocus: false,
|
|
96
|
+
className: "min-w-full w-max gap-6",
|
|
119
97
|
children
|
|
120
98
|
}
|
|
121
|
-
) })
|
|
99
|
+
) })
|
|
122
100
|
] });
|
|
123
101
|
}
|
|
124
102
|
|
|
125
103
|
// src/components/Modal.tsx
|
|
126
|
-
var
|
|
127
|
-
var import_core4 = require("@table/core");
|
|
104
|
+
var import_react3 = require("react");
|
|
105
|
+
var import_core4 = require("@table-js/core");
|
|
128
106
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
129
107
|
function Modal({ open, onClose, title, children, className = "" }) {
|
|
130
108
|
const { keyHandler } = (0, import_core4.useFocusContext)();
|
|
131
|
-
(0,
|
|
109
|
+
(0, import_react3.useEffect)(() => {
|
|
132
110
|
if (!open) return;
|
|
133
111
|
const unsub = keyHandler.subscribe((action) => {
|
|
134
112
|
if (action.type === "back") {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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-js/core'\nimport type { UseFocusableOptions } from '@table-js/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-js/core'\nimport type { UseFocusableOptions } from '@table-js/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 { FocusGroup } from '@table-js/core'\n\ninterface ShelfProps {\n title?: string\n children: React.ReactNode\n className?: string\n}\n\nexport function Shelf({ title, children, className = '' }: ShelfProps) {\n return (\n <section className={className}>\n {title && <h2 className=\"mb-4 px-16 text-2xl font-bold\">{title}</h2>}\n <div className=\"overflow-x-auto overflow-y-hidden px-16 pb-4\">\n <FocusGroup\n orientation=\"horizontal\"\n loop={false}\n rememberFocus={false}\n className=\"min-w-full w-max gap-6\"\n >\n {children}\n </FocusGroup>\n </div>\n </section>\n )\n}\n","import { useEffect } from 'react'\nimport { FocusGroup, useFocusContext } from '@table-js/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_core","import_jsx_runtime","import_react","import_core","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/components/Button.tsx
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
import { Focusable } from "@table/core";
|
|
3
|
+
import { Focusable } from "@table-js/core";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
var Button = forwardRef(
|
|
6
6
|
({ children, variant = "primary", size = "md", className = "", ...focus }, ref) => {
|
|
@@ -29,7 +29,7 @@ Button.displayName = "Button";
|
|
|
29
29
|
|
|
30
30
|
// src/components/Card.tsx
|
|
31
31
|
import { forwardRef as forwardRef2 } from "react";
|
|
32
|
-
import { Focusable as Focusable2 } from "@table/core";
|
|
32
|
+
import { Focusable as Focusable2 } from "@table-js/core";
|
|
33
33
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
34
34
|
var Card = forwardRef2(
|
|
35
35
|
({ title, subtitle, image, children, className = "", ...focus }, ref) => {
|
|
@@ -53,53 +53,31 @@ var Card = forwardRef2(
|
|
|
53
53
|
Card.displayName = "Card";
|
|
54
54
|
|
|
55
55
|
// src/components/Shelf.tsx
|
|
56
|
-
import {
|
|
57
|
-
import { FocusGroup, useFocusContext } from "@table/core";
|
|
56
|
+
import { FocusGroup } from "@table-js/core";
|
|
58
57
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
59
58
|
function Shelf({ title, children, className = "" }) {
|
|
60
|
-
|
|
61
|
-
const [offset, setOffset] = useState(0);
|
|
62
|
-
const { manager } = useFocusContext();
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
const container = ref.current;
|
|
65
|
-
if (!container) return;
|
|
66
|
-
const update = () => {
|
|
67
|
-
const focused = container.querySelector('[data-focused="true"]');
|
|
68
|
-
if (!focused) return;
|
|
69
|
-
const rect = focused.getBoundingClientRect();
|
|
70
|
-
const containerRect = container.getBoundingClientRect();
|
|
71
|
-
const itemWidth = rect.width + 24;
|
|
72
|
-
if (rect.left < containerRect.left) {
|
|
73
|
-
setOffset((prev) => prev + itemWidth);
|
|
74
|
-
} else if (rect.right > containerRect.right) {
|
|
75
|
-
setOffset((prev) => prev - itemWidth);
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
const id = manager.getFocusedId();
|
|
79
|
-
if (id) update();
|
|
80
|
-
const interval = setInterval(update, 100);
|
|
81
|
-
return () => clearInterval(interval);
|
|
82
|
-
}, [manager]);
|
|
83
|
-
return /* @__PURE__ */ jsxs2("div", { className, children: [
|
|
59
|
+
return /* @__PURE__ */ jsxs2("section", { className, children: [
|
|
84
60
|
title && /* @__PURE__ */ jsx3("h2", { className: "mb-4 px-16 text-2xl font-bold", children: title }),
|
|
85
|
-
/* @__PURE__ */ jsx3("div", { className: "overflow-hidden px-16
|
|
86
|
-
|
|
61
|
+
/* @__PURE__ */ jsx3("div", { className: "overflow-x-auto overflow-y-hidden px-16 pb-4", children: /* @__PURE__ */ jsx3(
|
|
62
|
+
FocusGroup,
|
|
87
63
|
{
|
|
88
|
-
|
|
89
|
-
|
|
64
|
+
orientation: "horizontal",
|
|
65
|
+
loop: false,
|
|
66
|
+
rememberFocus: false,
|
|
67
|
+
className: "min-w-full w-max gap-6",
|
|
90
68
|
children
|
|
91
69
|
}
|
|
92
|
-
) })
|
|
70
|
+
) })
|
|
93
71
|
] });
|
|
94
72
|
}
|
|
95
73
|
|
|
96
74
|
// src/components/Modal.tsx
|
|
97
|
-
import { useEffect
|
|
98
|
-
import { FocusGroup as FocusGroup2, useFocusContext
|
|
75
|
+
import { useEffect } from "react";
|
|
76
|
+
import { FocusGroup as FocusGroup2, useFocusContext } from "@table-js/core";
|
|
99
77
|
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
100
78
|
function Modal({ open, onClose, title, children, className = "" }) {
|
|
101
|
-
const { keyHandler } =
|
|
102
|
-
|
|
79
|
+
const { keyHandler } = useFocusContext();
|
|
80
|
+
useEffect(() => {
|
|
103
81
|
if (!open) return;
|
|
104
82
|
const unsub = keyHandler.subscribe((action) => {
|
|
105
83
|
if (action.type === "back") {
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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-js/core'\nimport type { UseFocusableOptions } from '@table-js/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-js/core'\nimport type { UseFocusableOptions } from '@table-js/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 { FocusGroup } from '@table-js/core'\n\ninterface ShelfProps {\n title?: string\n children: React.ReactNode\n className?: string\n}\n\nexport function Shelf({ title, children, className = '' }: ShelfProps) {\n return (\n <section className={className}>\n {title && <h2 className=\"mb-4 px-16 text-2xl font-bold\">{title}</h2>}\n <div className=\"overflow-x-auto overflow-y-hidden px-16 pb-4\">\n <FocusGroup\n orientation=\"horizontal\"\n loop={false}\n rememberFocus={false}\n className=\"min-w-full w-max gap-6\"\n >\n {children}\n </FocusGroup>\n </div>\n </section>\n )\n}\n","import { useEffect } from 'react'\nimport { FocusGroup, useFocusContext } from '@table-js/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","FocusGroup","jsx","jsxs"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@table-js/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "Table.js UI components for Smart TV",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -15,12 +15,6 @@
|
|
|
15
15
|
"files": [
|
|
16
16
|
"dist"
|
|
17
17
|
],
|
|
18
|
-
"scripts": {
|
|
19
|
-
"build": "tsup",
|
|
20
|
-
"dev": "tsup --watch",
|
|
21
|
-
"typecheck": "tsc --noEmit",
|
|
22
|
-
"clean": "rm -rf dist"
|
|
23
|
-
},
|
|
24
18
|
"keywords": [
|
|
25
19
|
"smart-tv",
|
|
26
20
|
"ui",
|
|
@@ -36,15 +30,21 @@
|
|
|
36
30
|
"url": "https://github.com/tablejs/tablejs"
|
|
37
31
|
},
|
|
38
32
|
"devDependencies": {
|
|
39
|
-
"@table/tsconfig": "workspace:*",
|
|
40
33
|
"@types/react": "^19.2.14",
|
|
41
34
|
"@types/react-dom": "^19.2.3",
|
|
42
35
|
"tsup": "^8.0.1",
|
|
43
|
-
"typescript": "^5.3.3"
|
|
36
|
+
"typescript": "^5.3.3",
|
|
37
|
+
"@table-js/tsconfig": "0.0.4"
|
|
44
38
|
},
|
|
45
39
|
"peerDependencies": {
|
|
46
|
-
"@table-js/core": "^0.0.1",
|
|
47
40
|
"react": "^18.0.0 || ^19.0.0",
|
|
48
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
41
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
42
|
+
"@table-js/core": "^0.0.4"
|
|
43
|
+
},
|
|
44
|
+
"scripts": {
|
|
45
|
+
"build": "tsup",
|
|
46
|
+
"dev": "tsup --watch",
|
|
47
|
+
"typecheck": "tsc --noEmit",
|
|
48
|
+
"clean": "rm -rf dist"
|
|
49
49
|
}
|
|
50
|
-
}
|
|
50
|
+
}
|