From c2885d64da6ef33977f4a7a5ca3adb32288e44be Mon Sep 17 00:00:00 2001
From: Oliver Chen <59662605+ochen1@users.noreply.github.com>
Date: Sun, 4 Aug 2024 16:14:27 -0600
Subject: [PATCH] initial commit
---
LICENSE | 27 +
README.md | 1718 +++++++
dist/Epg/Epg.d.ts | 19 +
dist/Epg/components/Areas.d.ts | 15 +
dist/Epg/components/Channel.d.ts | 10 +
dist/Epg/components/Channels.d.ts | 17 +
dist/Epg/components/CurrentTime.d.ts | 21 +
dist/Epg/components/Grid.d.ts | 30 +
dist/Epg/components/GridCellItem.d.ts | 23 +
dist/Epg/components/GridDividerItem.d.ts | 3 +
dist/Epg/components/Layout.d.ts | 87 +
dist/Epg/components/Line.d.ts | 19 +
dist/Epg/components/Loader.d.ts | 2 +
dist/Epg/components/Program.d.ts | 25 +
dist/Epg/components/Timeline.d.ts | 3 +
dist/Epg/components/index.d.ts | 9 +
dist/Epg/helpers/areas.d.ts | 32 +
dist/Epg/helpers/channels.d.ts | 15 +
dist/Epg/helpers/common.d.ts | 56 +
dist/Epg/helpers/drag.d.ts | 19 +
dist/Epg/helpers/enums.d.ts | 9 +
dist/Epg/helpers/epg.d.ts | 105 +
dist/Epg/helpers/grid.d.ts | 59 +
dist/Epg/helpers/index.d.ts | 13 +
dist/Epg/helpers/interfaces.d.ts | 286 ++
dist/Epg/helpers/layout.d.ts | 29 +
dist/Epg/helpers/line.d.ts | 26 +
dist/Epg/helpers/overlaps.d.ts | 13 +
dist/Epg/helpers/time.d.ts | 33 +
dist/Epg/helpers/timeline.d.ts | 21 +
dist/Epg/helpers/types.d.ts | 43 +
dist/Epg/helpers/variables.d.ts | 37 +
dist/Epg/hooks/index.d.ts | 8 +
dist/Epg/hooks/useAreas.d.ts | 34 +
dist/Epg/hooks/useCurrentTime.d.ts | 23 +
dist/Epg/hooks/useDrag.d.ts | 44 +
dist/Epg/hooks/useEpg.d.ts | 184 +
dist/Epg/hooks/useGrid.d.ts | 31 +
dist/Epg/hooks/useGridExternalDnD.d.ts | 16 +
dist/Epg/hooks/useInterval.d.ts | 1 +
dist/Epg/hooks/useIsTouchDevice.d.ts | 1 +
dist/Epg/hooks/useLayout.d.ts | 36 +
dist/Epg/hooks/useLine.d.ts | 17 +
dist/Epg/hooks/useProgram.d.ts | 139 +
dist/Epg/hooks/useResize.d.ts | 76 +
dist/Epg/hooks/useTimeline.d.ts | 48 +
dist/Epg/index.d.ts | 220 +
dist/Epg/styles/Area.styles.d.ts | 27 +
dist/Epg/styles/Channel.styles.d.ts | 16 +
dist/Epg/styles/Channels.styles.d.ts | 15 +
dist/Epg/styles/CurrentTime.styles.d.ts | 28 +
dist/Epg/styles/Epg.styles.d.ts | 54 +
dist/Epg/styles/Grid.styles.d.ts | 39 +
dist/Epg/styles/Line.styles.d.ts | 18 +
dist/Epg/styles/Loader.styles.d.ts | 25 +
dist/Epg/styles/Program.styles.d.ts | 57 +
dist/Epg/styles/Timeline.styles.d.ts | 92 +
dist/Epg/styles/global.styles.d.ts | 1 +
dist/Epg/styles/index.d.ts | 11 +
dist/Epg/test/db/channels.d.ts | 26 +
dist/Epg/test/db/epg.d.ts | 98 +
dist/Epg/test/db/grid.d.ts | 26 +
dist/Epg/test/db/index.d.ts | 3 +
dist/Epg/test/helpers.d.ts | 132 +
dist/Epg/test/index.d.ts | 2 +
dist/Epg/test/test-utils.d.ts | 5 +
dist/Epg/theme/index.d.ts | 1 +
dist/Epg/theme/theme.d.ts | 52 +
dist/Epg/utils/time.d.ts | 4 +
dist/index.d.ts | 1 +
dist/index.js | 8 +
dist/planby-pro.cjs.development.js | 5622 ++++++++++++++++++++
dist/planby-pro.cjs.development.js.map | 1 +
dist/planby-pro.cjs.production.min.js | 2 +
dist/planby-pro.cjs.production.min.js.map | 1 +
dist/planby-pro.esm.js | 5691 +++++++++++++++++++++
dist/planby-pro.esm.js.map | 1 +
package.json | 96 +
78 files changed, 15857 insertions(+)
create mode 100644 LICENSE
create mode 100644 README.md
create mode 100644 dist/Epg/Epg.d.ts
create mode 100644 dist/Epg/components/Areas.d.ts
create mode 100644 dist/Epg/components/Channel.d.ts
create mode 100644 dist/Epg/components/Channels.d.ts
create mode 100644 dist/Epg/components/CurrentTime.d.ts
create mode 100644 dist/Epg/components/Grid.d.ts
create mode 100644 dist/Epg/components/GridCellItem.d.ts
create mode 100644 dist/Epg/components/GridDividerItem.d.ts
create mode 100644 dist/Epg/components/Layout.d.ts
create mode 100644 dist/Epg/components/Line.d.ts
create mode 100644 dist/Epg/components/Loader.d.ts
create mode 100644 dist/Epg/components/Program.d.ts
create mode 100644 dist/Epg/components/Timeline.d.ts
create mode 100644 dist/Epg/components/index.d.ts
create mode 100644 dist/Epg/helpers/areas.d.ts
create mode 100644 dist/Epg/helpers/channels.d.ts
create mode 100644 dist/Epg/helpers/common.d.ts
create mode 100644 dist/Epg/helpers/drag.d.ts
create mode 100644 dist/Epg/helpers/enums.d.ts
create mode 100644 dist/Epg/helpers/epg.d.ts
create mode 100644 dist/Epg/helpers/grid.d.ts
create mode 100644 dist/Epg/helpers/index.d.ts
create mode 100644 dist/Epg/helpers/interfaces.d.ts
create mode 100644 dist/Epg/helpers/layout.d.ts
create mode 100644 dist/Epg/helpers/line.d.ts
create mode 100644 dist/Epg/helpers/overlaps.d.ts
create mode 100644 dist/Epg/helpers/time.d.ts
create mode 100644 dist/Epg/helpers/timeline.d.ts
create mode 100644 dist/Epg/helpers/types.d.ts
create mode 100644 dist/Epg/helpers/variables.d.ts
create mode 100644 dist/Epg/hooks/index.d.ts
create mode 100644 dist/Epg/hooks/useAreas.d.ts
create mode 100644 dist/Epg/hooks/useCurrentTime.d.ts
create mode 100644 dist/Epg/hooks/useDrag.d.ts
create mode 100644 dist/Epg/hooks/useEpg.d.ts
create mode 100644 dist/Epg/hooks/useGrid.d.ts
create mode 100644 dist/Epg/hooks/useGridExternalDnD.d.ts
create mode 100644 dist/Epg/hooks/useInterval.d.ts
create mode 100644 dist/Epg/hooks/useIsTouchDevice.d.ts
create mode 100644 dist/Epg/hooks/useLayout.d.ts
create mode 100644 dist/Epg/hooks/useLine.d.ts
create mode 100644 dist/Epg/hooks/useProgram.d.ts
create mode 100644 dist/Epg/hooks/useResize.d.ts
create mode 100644 dist/Epg/hooks/useTimeline.d.ts
create mode 100644 dist/Epg/index.d.ts
create mode 100644 dist/Epg/styles/Area.styles.d.ts
create mode 100644 dist/Epg/styles/Channel.styles.d.ts
create mode 100644 dist/Epg/styles/Channels.styles.d.ts
create mode 100644 dist/Epg/styles/CurrentTime.styles.d.ts
create mode 100644 dist/Epg/styles/Epg.styles.d.ts
create mode 100644 dist/Epg/styles/Grid.styles.d.ts
create mode 100644 dist/Epg/styles/Line.styles.d.ts
create mode 100644 dist/Epg/styles/Loader.styles.d.ts
create mode 100644 dist/Epg/styles/Program.styles.d.ts
create mode 100644 dist/Epg/styles/Timeline.styles.d.ts
create mode 100644 dist/Epg/styles/global.styles.d.ts
create mode 100644 dist/Epg/styles/index.d.ts
create mode 100644 dist/Epg/test/db/channels.d.ts
create mode 100644 dist/Epg/test/db/epg.d.ts
create mode 100644 dist/Epg/test/db/grid.d.ts
create mode 100644 dist/Epg/test/db/index.d.ts
create mode 100644 dist/Epg/test/helpers.d.ts
create mode 100644 dist/Epg/test/index.d.ts
create mode 100644 dist/Epg/test/test-utils.d.ts
create mode 100644 dist/Epg/theme/index.d.ts
create mode 100644 dist/Epg/theme/theme.d.ts
create mode 100644 dist/Epg/utils/time.d.ts
create mode 100644 dist/index.d.ts
create mode 100644 dist/index.js
create mode 100644 dist/planby-pro.cjs.development.js
create mode 100644 dist/planby-pro.cjs.development.js.map
create mode 100644 dist/planby-pro.cjs.production.min.js
create mode 100644 dist/planby-pro.cjs.production.min.js.map
create mode 100644 dist/planby-pro.esm.js
create mode 100644 dist/planby-pro.esm.js.map
create mode 100644 package.json
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..2583c84
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,27 @@
+Custom License - All Rights Reserved
+
+Copyright (c) 2022 Karol Kozer
+
+Operator hereby grants a non-exclusive, non-transferable license i.e. without the right to grant sublicense to use the Platform.
+The license does not authorize the Company or the User to use the Platform for purposes other than use the Platform with intended purpose.
+
+The Company and the User has no right to reproduce, sell or otherwise market or distribute the Platform in whole or in part, in any form, in particular, transmit or make available in computer systems and networks, or any other communication.
+
+It’s not allowed:
+1. repeated and systematic downloading or re-using of information from the Platform, contrary to normal use and resulting in an unjustified violation of the Operator’s legitimate interests;
+2. repeated and systematic downloading or re-using contrary to normal use and resulting in an unjustified violation of the legitimate interests of the Operator;
+3. copying parts of the database beyond normal personal use.
+
+THE PLATFORM IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE PLATFORM OR THE USE OR OTHER DEALINGS IN THE
+PLATFORM.
+
+The above note is only a shortened version. Its full version is presented in the Terms & Conditions and should be interpreted and applied in accordance with their content.
+
+This license does not grant you any rights to trademarks, service marks, or
+any other intellectual property of the author. For any specific licensing
+needs or questions regarding this license, please contact the author.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4cfa953
--- /dev/null
+++ b/README.md
@@ -0,0 +1,1718 @@
+
+
+
+
+## Description
+
+Planby PRO is a React based component for a quick implementation of schedules, timelines, EPG, live streaming, music events and many more ideas. It uses a custom virtual view which allows you to operate on a really big number of data. The component has a simple API that you can easily integrate with other third party UI libraries. The component theme is customized to the needs of the application design.
+
+
+
+
+
+
+## Download example
+
+[Download - code examples](https://github.com/Nessprim/planby-pro/tree/main/examples)
+
+## Testimonials
+
+
+
+
+# Getting Started
+
+### Planby PRO version has a number of major updates so please read documentation about eg. render components, theme, styles, Typescript support.
+
+## Option 1
+
+Login to npm registry with the Github account with your username and personal access token (classic) - read:packages.
+
+```sh
+npm login --registry=https://npm.pkg.github.com --scope=@nessprim
+```
+
+```sh
+> Username: USERNAME
+> Password: TOKEN
+```
+
+In the same directory as your package.json file, create or edit an .npmrc file to include a line specifying GitHub Packages URL
+
+```sh
+@nessprim:registry=https://npm.pkg.github.com
+```
+
+## Option 2
+
+To your per-user authenticate by adding your personal access token (classic) to your ~/.npmrc file, edit the ~/.npmrc file for your project to include the following line, replacing TOKEN with your personal access token (classic).
+
+```sh
+//npm.pkg.github.com/:_authToken=TOKEN
+```
+
+In the same directory as your package.json file, create or edit an .npmrc file to include a line specifying GitHub Packages URL
+
+```sh
+@nessprim:registry=https://npm.pkg.github.com
+```
+
+## Option 3
+
+In the same directory as your package.json file, create or edit an .npmrc file to include a line specifying GitHub Packages URL and your personal access token (classic)
+
+```sh
+@nessprim:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=TOKEN
+```
+
+## Installation
+
+Specify the version which you want to install.
+
+- yarn
+
+```sh
+yarn add @nessprim/planby-pro
+```
+
+- npm
+
+```sh
+npm install @nessprim/planby-pro
+```
+
+## Usage
+
+```tsx
+import { useEpg, Epg, Layout } from '@nessprim/planby-pro';
+
+const channels = React.useMemo(
+ () => [
+ {
+ logo: 'https://via.placeholder.com',
+ uuid: '10339a4b-7c48-40ab-abad-f3bcaf95d9fa',
+ ...
+ },
+ ],
+ []
+);
+
+const epg = React.useMemo(
+ () => [
+ {
+ channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
+ description:
+ 'Ut anim nisi consequat minim deserunt...',
+ id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
+ image: 'https://via.placeholder.com',
+ since: "2022-02-02T23:50:00",
+ till: "2022-02-02T00:55:00",
+ title: 'Title',
+ ...
+ },
+ ],
+ []
+);
+
+const {
+ getEpgProps,
+ getLayoutProps,
+ onScrollToNow,
+ onScrollLeft,
+ onScrollRight,
+} = useEpg({
+ epg,
+ channels,
+ startDate: '2022/02/02', // or 2022-02-02T00:00:00
+});
+
+return (
+
+);
+```
+
+or
+
+#### Custom width and height
+
+```tsx
+const {
+ getEpgProps,
+ getLayoutProps,
+ ...
+} = useEpg({
+ epg,
+ channels,
+ startDate: '2022/02/02', // or 2022-02-02T00:00:00
+ width: 1200,
+ height: 600
+});
+
+return (
+
+
+
+
+
+
+```
+
+or
+
+#### Time range
+
+```tsx
+const {
+ getEpgProps,
+ getLayoutProps,
+ ...
+} = useEpg({
+ epg,
+ channels,
+ startDate: '2022-02-02T10:00:00',
+ endDate: '2022-02-02T20:00:00',
+ width: 1200,
+ height: 600
+});
+
+return (
+
+
+
+
+
+
+```
+
+#### Week mode
+
+```tsx
+
+const epg = React.useMemo(
+ () => [
+ {
+ channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
+ description:
+ 'Ut anim nisi consequat minim deserunt...',
+ id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
+ image: 'https://via.placeholder.com',
+ since: "2023-05-01T00:00:00",
+ till: "2023-05-03T24:00:00",
+ title: 'Title',
+ ...
+ },
+ ],
+ []
+);
+
+const {
+ getEpgProps,
+ getLayoutProps,
+ ...
+} = useEpg({
+ epg,
+ channels,
+ startDate: '2023-05-01T00:00:00', // Required day with time 00:00:00
+ endDate: '2023-05-25T00:00:00', // Required day with time 00:00:00
+ mode: {type: 'week', style: 'modern'}
+ ...
+});
+
+...
+
+```
+
+#### Month mode
+
+```tsx
+
+const epg = React.useMemo(
+ () => [
+ {
+ channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
+ description:
+ 'Ut anim nisi consequat minim deserunt...',
+ id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
+ image: 'https://via.placeholder.com',
+ since: "2023-05-01T00:00:00",
+ till: "2023-08-31T24:00:00",
+ title: 'Title',
+ ...
+ },
+ ],
+ []
+);
+
+const {
+ getEpgProps,
+ getLayoutProps,
+ ...
+} = useEpg({
+ epg,
+ channels,
+ startDate: '2023-05-01T00:00:00', // First day of the month with required time 00:00:00
+ endDate: '2023-11-30T00:00:00', // Last day of the month with required time 00:00:00
+ mode: {type: 'month', style: 'modern'}
+ ...
+});
+
+...
+
+```
+
+# API
+
+### useEpg
+
+#### Options
+
+Available options in useEpg
+
+| Property | Type | Status | Description | Access |
+| ------------------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ |
+| `channels` | `array` | required | Array with channels data | |
+| `epg` | `array` | required | Array with EPG data | |
+| `width` | `number` | optional | EPG width | |
+| `height` | `number` | optional | EPG height | |
+| `sidebarWidth` | `number` | optional | Width of the sidebar with channels | |
+| `timelineHeight` | `number` | optional | Height of the timeline | `PRO` |
+| `itemHeight` | `number` | optional | Height of channels and programs in the EPG. Default value is 80 | |
+| `dayWidth` | `number` | optional | Width of the day. Default value is 7200. Calculation to set up day width with own hour width value e.g., 24h \* 300px (your custom hour width) = 7200px -> `dayWidth` | |
+| `startDate` | `string` | optional | Date format `2022/02/02` or `2022-02-02T00:00:00`. You can set your own start time, e.g., `2022-02-02T10:00:00`, `2022-02-02T14:00:00`, etc. Full clock hours only | |
+| `endDate` | `string` | optional | Date format `2022-02-02T00:00:00`, `2022-02-02T20:00:00`, etc. Must be within the same 24-hour period as `startDate`. Full clock hours only. Scroll through `multiple days` and timeline mode is available only in `PRO` plan. | `PRO` |
+| `timelineDividers` | `number` | optional | Set own dividers to Timeline and Grid bg. Default value is `4`. | `PRO` |
+| `hoursInDays` | `array` | optional | Set start time and end time of each day in `multiple days` feature if your data for each day has some time spaces between items in the day. [Read more](#hours-in-days) | `PRO` |
+| `initialScrollPositions` | `object` | optional | Set initial scroll position in Layout, e.g., `initialScrollPositions: { top: 500, left: 800 }` | `PRO` |
+| `liveRefreshTime` | `number` | optional | Live refresh time of the events. Default value is 120 sec. | `PRO` |
+| `isBaseTimeFormat` | `boolean` | optional | Convert to 12-hour format, e.g., `2:00am`, `4:00pm`, etc. Default value is false. | |
+| `isCurrentTime` | `boolean` | optional | Show current time in Timeline. Default value is false. | `PRO` |
+| `isInitialScrollToNow` | `boolean` | optional | Scroll to the current live element. | `PRO` |
+| `isVerticalMode` | `boolean` | optional | Show Timeline in vertical view. Default value is false. | `PRO` |
+| `isResize` | `boolean` | optional | Possibility to resize the element. | `PRO` |
+| `isSidebar` | `boolean` | optional | Show/hide sidebar | |
+| `isTimeline` | `boolean` | optional | Show/hide timeline | |
+| `isLine` | `boolean` | optional | Show/hide line | |
+| `isRTL` | `boolean` | optional | Change direction to RTL or LTR. Default value is false. | `PRO` |
+| `theme` | `object` | optional | Object with theme schema [Read more](#theme) | |
+| `timezone` | `object` | optional | Convert and display data from UTC format to your own time zone [Read more](#timezone) | `PRO` |
+| `areas` | `array` | optional | Area gives possibilities to add field ranges to the Timeline layout. [Read more](#areas) | `PRO` |
+| `mode` | `object` | optional | Type values: `day/week/month`. Style values: `default/modern` Define the mode and style of the timeline. Default mode is `day` and style is `default` [Read more](#week-and-month-mode) | `PRO` |
+| `overlap` | `object` | optional | Enable the element overlaps in the layout. Mode values: `stack/layer`, layerOverlapLevel: `number` [Read more](#overlaps) | `PRO` |
+| `dnd - drag and drop` | `object` | optional | Drag and move the element in the layout. Mode values: `row/multi-rows` [Read more](#drag-and-drop) | `PRO` |
+| `snap - dnd snapping` | `object` | optional | Activate the snap option to facilitate Drag and Drop (DnD) or resize operations, ensuring alignment with specified snap values. Example value: `snap:{x: 50, y: 75}` | `PRO` |
+| `grid layout` | `object` | optional | Background grid on the layout. Mode hoverHighlight values: `true/false`, `onGridItemClick`: function with all the properties on clicked item grid, `onGridItemDrop`: function with all the properties on drop item grid [Read more](#grid) | `PRO` |
+| `channelMapKey` | `string` | optional | The Channel `uuid` attribute can be controlled by prop. Key map gives a possibilities to use specific prop from own data instead of needing to map to uuid in own data | `PRO` |
+| `programChannelMapKey` | `string` | optional | The Programs `channelUuid` attributes can be controlled by prop. Key map gives a possibilities to use a specific prop from own data instead of needing to map to channelUuid in your data | `PRO` |
+| `globalStyles` | `string` | optional | Inject custom global styles and font. Font weight: 400,500,600. Default font is "Inter" | `PRO` |
+
+## Note about width and height props
+
+Without declaring the `width` and `length` properties, the component takes the dimensions of the parent element.
+
+## Timezone
+
+Convert and display data from UTC format to your own time zone
+
+#### Timezone schema
+
+| Property | Type | Status | Values |
+| --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------- |
+| `enabled` | `boolean` | required |
+| `mode` | `string` | required | `utc` |
+| `zone` | `string` | required | Specify your timezone eg. `Europe/Paris`, `America/New_York`. Please make user your timezone value is correct |
+
+## Areas
+
+Areas fields gives possibilities to add info ranges to the Timeline layout.
+
+#### Area schema
+
+| Property | Type | Status |
+| ------------- | --------------- | -------- |
+| `startDate` | `string` | required |
+| `endDate` | `string` | optional |
+| `styles` | `CSSProperties` | required |
+| `onClick` | `function` | optional |
+| `annotations` | `object` | optional |
+
+#### Annotations schema
+
+| Property | Type | Status |
+| ----------- | --------------- | -------- |
+| `textStart` | `string` | optional |
+| `textEnd` | `string` | optional |
+| `styles` | `CSSProperties` | required |
+
+Example:
+
+```tsx
+[
+ {
+ startDate: '2023-05-05T00:00:00',
+ endDate: '2023-05-08T00:00:00',
+ styles: {
+ background: '#00800012',
+ borderLeft: '2px dotted #38A169',
+ borderRight: '2px dotted #38A169',
+ },
+ onClick: () => alert('Click on area'),
+ annotations: {
+ styles: {
+ background: '#38A169',
+ color: 'white',
+ },
+ textStart: 'Testing Start',
+ textEnd: 'Testing End',
+ },
+ },
+ {
+ startDate: '2023-05-14T00:00:00',
+ endDate: '2023-05-17T00:00:00',
+ styles: {
+ borderLeft: '2px dotted #D69E2E',
+ borderRight: '2px dotted #D69E2E',
+ },
+ annotations: {
+ styles: {
+ background: '#D69E2E',
+ color: 'white',
+ },
+ textStart: 'Testing2 Start',
+ textEnd: 'Testing2 End',
+ },
+ },
+ {
+ startDate: '2023-05-11T00:00:00',
+ styles: {
+ borderLeft: '2px dotted #C53030',
+ },
+ annotations: {
+ styles: {
+ background: '#C53030',
+ color: 'white',
+ },
+ textStart: 'Release',
+ },
+ },
+];
+```
+
+## Week and Month mode
+
+#### Mode schema
+
+| Property | Type | Status | Values |
+| -------- | -------- | -------- | ---------------- |
+| `type` | `string` | optional | `day/week/month` |
+| `style` | `string` | optional | `default/modern` |
+
+#### Month mode
+
+| Property | Description |
+| ----------- | ---------------------------------------------------------------------------------------------------------- |
+| `startDate` | You have to set the first day of the month with start time of the day `00:00:00` eg. `2023-05-01T00:00:00` |
+| `endDate` | You have to set the last day of the month with start time of the day `00:00:00` eg.`2023-11-30T00:00:00` |
+
+#### Week mode
+
+| Property | Description |
+| ----------- | ---------------------------------------------------------------------------------------------------------- |
+| `startDate` | You have to set the first day of the month with start time of the day `00:00:00` eg. `2023-05-01T00:00:00` |
+| `endDate` | You have to set the first day of the month with start time of the day `00:00:00` eg.`2023-05-20T00:00:00` |
+
+#### Week / Month EPG Item
+
+| Property | Description |
+| -------- | ------------------------------------------------------------------------------ |
+| `since` | You have to set the start time of the day `00:00:00` eg. `2023-05-01T00:00:00` |
+| `till` | You have to set the end time of the day `24:00:00` eg. `2023-05-09T24:00:00` |
+
+## Overlaps
+
+Enable the element overlaps in the layout
+
+#### Mode schema
+
+| Property | Type | Description | Status |
+| ------------------- | --------- | -------------------------------------------------- | ------------------------- |
+| `enabled` | `boolean` | | required |
+| `mode` | `string` | required | values: `stack` / `layer` |
+| `layerOverlapLevel` | `number` | The percentage of elements layer on top each other | required |
+
+## Drag and Drop
+
+Enable the element overlaps in the layout
+
+#### DnD schema
+
+| Property | Type | Description | Status |
+| -------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
+| `enabled` | `boolean` | | required |
+| `mode` | `string` | required | values: `row` / `multi-rows` |
+| `onDnDMouseUp` | `function` | Callback function with custom logic to check if new since/till time meets custom requirements | optional |
+| `onDnDSuccess` | `function` | Callback function to add custom logic when drag event is successful. Return `true` value is custom logic is correct or 'false' value to restor initial element position in the layout | optional |
+
+```tsx
+const { getEpgProps, getLayoutProps } = useEpg({
+ startDate: '2023-05-02T00:00:00',
+ endDate: '2023-05-05T24:00:00',
+ dnd: {
+ enabled: true,
+ mode: 'multi-rows',
+ onDnDMouseUp: async event => {
+ // Event object contains new since and till values of the dragged program
+ // event = { id, since, till }
+ console.log('event');
+ return true; // true or false
+ },
+ onDnDSuccess: event => {
+ // event = { channelUuid, id, index, title, description, since, till, image, channelIndex, channelPosition }
+ console.log('event'),
+ }
+ },
+});
+```
+
+## Grid
+
+Background grid on the layout with functionality to click on the grid item
+
+#### OnClick event props schema
+
+| Property | Type |
+| ------------- | -------- |
+| `since` | `string` |
+| `till` | `string` |
+| `date` | `string` |
+| `channelUuid` | `string` |
+
+#### onGridItemDrop event props schema
+
+| Property | Type |
+| ------------- | -------- |
+| `since` | `string` |
+| `till` | `string` |
+| `date` | `string` |
+| `channelUuid` | `string` |
+
+And other props pass to the dragged element
+
+## Hours in Days
+
+Set start time and end time of each day in multiple days feature if you data for each day has some time spaces between items in the day. You can set your own startDate and endDate time eg. `2023-05-02T00:00:00`, `2023-05-05T24:00:00` with start time `00:00:00` and end time eg.`24:00:00`
+
+#### Mode schema
+
+| Property | Type | Status |
+| --------------- | -------- | -------- |
+| `date` | `string` | required |
+| `startTimeHour` | `string` | required |
+| `endTimeHour` | `string` | required |
+
+Example:
+
+```tsx
+const { getEpgProps, getLayoutProps } = useEpg({
+ startDate:"2023-05-02T00:00:00",
+ endDate:"2023-05-05T24:00:00",
+ ...
+ });
+
+const hoursInDays = [
+ {
+ date: '2023-05-02',
+ startTimeHour: '2023-05-02T09:00:00',
+ endTimeHour: '2023-05-02T16:00:00',
+ },
+ {
+ date: '2023-05-03',
+ startTimeHour: '2023-05-03T09:00:00',
+ endTimeHour: '2023-05-03T13:00:00',
+ },
+ {
+ date: '2023-05-04',
+ startTimeHour: '2023-05-04T09:00:00',
+ endTimeHour: '2023-05-04T17:00:00',
+ },
+ {
+ date: '2023-05-05',
+ startTimeHour: '2023-05-05T09:00:00',
+ endTimeHour: '2023-05-05T15:00:00',
+ },
+];
+```
+
+### globalStyles
+
+Inject own custom font and other global styles.
+
+```tsx
+const globalStyles = `
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+
+/* Available in sponsors plan */
+ .planby {
+ font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
+ Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+
+ /* Layout */
+ .planby-layout {}
+ .planby-corner-box {}
+
+ /* Line */
+ .planby-line {}
+
+ /* Current time */
+ .planby-current-time {}
+ .planby-current-content {}
+
+ /* Channels */
+ .planby-channels {}
+
+ /* Channel */
+ .planby-channel {}
+
+ /* Program */
+ .planby-program {}
+ .planby-program-content {}
+ .planby-program-flex {}
+ .planby-program-stack {}
+ .planby-program-title {}
+ .planby-program-text {}
+
+ /* Timeline */
+ .planby-timeline-wrapper {}
+ .planby-timeline-box {}
+ .planby-timeline-time {}
+ .planby-timeline-dividers {}
+ .planby-timeline-wrapper {}
+}
+
+`;
+```
+
+#### Instance Properties
+
+Properties returned from useEpg
+
+| Property | Type | Description | Access |
+| ----------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------ |
+| `scrollY` | `number` | Current scroll y value |
+| `scrollX` | `number` | Current scroll x value |
+| `onScrollLeft` | `function(value: number)` | Default value is 300 |
+| `onScrollRight` | `function(value: number)` | Default value is 300 |
+| `onScrollToNow` | `function()` | Scroll to current time/live programs |
+| `onScrollTop` | `function(value: number)` | Default value is 300 |
+| `getLayoutData` | `function()` | Generate and get all the layout data | `PRO` |
+| `getDropItemData` | `function()` | Get converted item data after external drop into grid action | `PRO` |
+| `isLayoutBottom` | `function(offset:number)` | Check if the layout has reached the bottom. Add an offset value to perform various actions before reaching the bottom. | `PRO` |
+| `isLayoutRight` | `function(offset:number)` | Check if the layout has reached the right side. Add an offset value to perform various actions before reaching the right. | `PRO` |
+
+### Channel schema
+
+You can add other properties that you wish to have according to your specific requirements or functionalities you want to implement.
+
+| Property | Type | Status | Description | Access |
+| ------------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ------ |
+| `logo` | `string` | required | | |
+| `uuid` | `string` | required | | |
+| `title` | `string` | optional | | |
+| `groupTree` | `boolean` | optional | Set to true if the channel is the first main top channel in a group, used to display the channel group name in sidebar | `PRO` |
+| `parentChannelUuid` | `string` | optional | Set for nested children. Required when main channel has `groupTree` set to `true` | `PRO` |
+| `isOpen` | `boolean` | optional | Used to open the channel group in the sidebar | `PRO` |
+
+### Epg schema
+
+You can add other properties that you wish to have according to your specific requirements or functionalities you want to implement.
+
+| Property | Type | Status | Description | Access |
+| ----------------- | --------- | -------- | -------------------------------------------------------------------- | ------ |
+| `channelUuid` | `string` | required |
+| `id` | `string` | required |
+| `image` | `string` | required |
+| `since` | `string` | required |
+| `till` | `string` | required |
+| `title` | `string` | required |
+| `fixedVisibility` | `boolean` | optional | The element is always visible in the layout during the scroll events | `PRO` |
+
+### Epg
+
+#### Base props
+
+Available props in Epg
+
+| Property | Type | Description | Status | Access |
+| ----------- | ----------- | ----------------------- | -------- | ------ |
+| `isLoading` | `boolean` | Loader state | optional |
+| `loader` | `Component` | Loader custom component | optional | `PRO` |
+
+### Layout
+
+#### Base props
+
+Available props in Layout.
+
+| Property | Type | Description | Status | Access |
+| ------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------ |
+| `renderProgram` | `function({ program: { data: object, position: object})` | `data` object contains all properties related to the program, `position` object includes all position styles | optional |
+| `renderChannel` | `function({ channel: { ..., position: object})` | `channel` object contains all properties related to the channel, `position` object includes all position styles | optional |
+| `renderTimeline` | `function({sidebarWidth: number})` | `sidebarWidth` value of the channel's sidebar width | optional |
+| `renderGridCell` | `function(object)` | render custom Grid Cell element in Layout grid | `PRO` |
+| `renderLine` | `function({styles: object})` | basic `styles` and `position` values for the custom live tracking Line | optional | `PRO` |
+| `renderCurrentTime` | `function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string})` | basic `styles` values for the custom current time | optional | `PRO` |
+| `onLayoutBgClick` | `function()` | Possibility to click on Layout background to trigger some custom events | optional | `PRO` |
+
+# Render functions
+
+You can use Planby's style components to develop main features. Moreover, you can integrate with third party UI library eg. Chakra UI, Material UI etc or make custom styles.
+
+## renderProgram
+
+Below is an example that allows you to render your custom Program component using Plaby's style components.
+
+```tsx
+import {
+ useEpg,
+ Epg,
+ Layout,
+ ProgramBox,
+ ProgramContent,
+ ProgramFlex,
+ ProgramStack,
+ ProgramTitle,
+ ProgramText,
+ ProgramImage,
+ useProgram,
+ Program,
+ ProgramItem
+} from "planby";
+
+
+const Item = ({program,...rest }: ProgramItem) => {
+ const { styles, formatTime, isLive, isMinWidth } = useProgram({program,...rest });
+
+ const { data } = program;
+ const { image, title, since, till } = data;
+
+ const sinceTime = formatTime(since);
+ const tillTime = formatTime(till);
+
+ return (
+
+
+
+ {isLive && isMinWidth && }
+
+ {title}
+
+ {sinceTime} - {tillTime}
+
+
+
+
+
+ );
+};
+
+function App() {
+
+ ...
+
+ const {
+ getEpgProps,
+ getLayoutProps,
+} = useEpg({
+ epg,
+ channels,
+ startDate: '2022/02/02', // or 2022-02-02T00:00:00
+});
+
+return (
+
+
+
+ (
+
+ )}
+ />
+
+
+
+);
+}
+
+export default App;
+```
+
+## renderProgram - Vertical Mode
+
+Below is an example that allows you to render your custom Program component using Planby's style components with Vertical mode.
+
+```tsx
+const Item = ({isVerticalMode, program,...rest }: ProgramItem) => {
+ const { styles, formatTime, isLive, isMinWidth } = useProgram({isVerticalMode, program,...rest });
+
+...
+
+ return (
+
+
+
+ {isLive && isMinWidth && }
+
+ {title}
+
+ {sinceTime} - {tillTime}
+
+
+
+
+
+ );
+};
+
+```
+
+## renderProgram - 12 hours time format
+
+Below is an example that allows you to render your custom Program component with 12 hours time format using Planby's style components.
+
+```tsx
+...
+const Item = ({ program, ...rest }: ProgramItem) => {
+ const {
+ styles,
+ formatTime,
+ set12HoursTimeFormat,
+ isLive,
+ isMinWidth,
+ } = useProgram({
+ program,
+ ...rest
+ });
+
+ const { data } = program;
+ const { image, title, since, till } = data;
+
+ const sinceTime = formatTime(since, set12HoursTimeFormat()).toLowerCase();
+ const tillTime = formatTime(till, set12HoursTimeFormat()).toLowerCase();
+
+ return (
+
+
+
+ {isLive && isMinWidth && }
+
+ {title}
+
+ {sinceTime} - {tillTime}
+
+
+
+
+
+ );
+};
+
+function App() {
+
+ ...
+
+ const {
+ getEpgProps,
+ getLayoutProps,
+} = useEpg({
+ epg,
+ channels,
+ isBaseTimeFormat: true,
+ startDate: '2022/02/02', // or 2022-02-02T00:00:00
+});
+
+...
+}
+
+export default App;
+```
+
+## renderProgram - RTL direction
+
+Below is an example that allows you to render your custom Program component with RTL direction using Planby's style components.
+
+```tsx
+...
+const Item = ({ program, ...rest }: ProgramItem) => {
+ const {
+ isRTL,
+ isLive,
+ isMinWidth,
+ formatTime,
+ styles,
+ set12HoursTimeFormat,
+ getRTLSinceTime,
+ getRTLTillTime,
+ } = useProgram({
+ program,
+ ...rest
+ });
+
+ const { data } = program;
+ const { image, title, since, till } = data;
+
+ const sinceTime = formatTime(
+ getRTLSinceTime(since),
+ set12HoursTimeFormat()
+ ).toLowerCase();
+ const tillTime = formatTime(
+ getRTLTillTime(till),
+ set12HoursTimeFormat()
+ ).toLowerCase();
+
+ return (
+
+
+
+ {isLive && isMinWidth && }
+
+ {title}
+
+ {sinceTime} - {tillTime}
+
+
+
+
+
+ );
+};
+
+function App() {
+
+ ...
+
+ const {
+ getEpgProps,
+ getLayoutProps,
+} = useEpg({
+ epg,
+ channels,
+ isBaseTimeFormat: true,
+ startDate: '2022/02/02', // or 2022-02-02T00:00:00
+});
+
+...
+}
+
+export default App;
+```
+
+## renderGridCell
+
+Below is an example that allows you to render your custom GridCell component using Planby's style components.
+
+```tsx
+...
+import { GridCell, GridItem, GridDivider } from "@nessprim/planby-pro";
+
+export function ItemGrid(props: GridCell) {
+ const {
+ isDayMode,
+ isHoverHighlight,
+ item,
+ timelineDividers,
+ timelineDividerArray,
+ gridDividerProps,
+ gridItemClickProps,
+ } = props;
+
+ const { onItemClick, ...dividerProps } = gridDividerProps.props;
+ const { left, ...styles } = gridDividerProps.styles;
+ return (
+
+ {isDayMode &&
+ timelineDividerArray.map((_, index) => (
+
+ ))}
+
+ );
+}
+```
+
+## renderChannel
+
+Below is an example that allows you to render your custom Channel component using Planby's style components.
+
+Available props in ChannelItem
+
+| Property | Type | Description | Status |
+| ---------------- | --------- | ------------------------------------------------ | -------- |
+| `isVerticalMode` | `boolean` | Vertical mode | optional |
+| `isRTL` | `boolean` | RTL option mode | optional |
+| `channel` | `object` | Object contains position styles and url for logo | optional |
+
+```tsx
+import {
+ useEpg,
+ Epg,
+ Layout,
+ ChannelBox,
+ ChannelLogo,
+ Channel,
+ ChannelItem,
+} from '@nessprim/planby-pro';
+
+const CustomChannelItem = ({ channel }: ChannelItem) => {
+ const { position, logo } = channel;
+ return (
+
+ console.log('channel', channel)}
+ src={logo}
+ alt="Logo"
+ />
+
+ );
+};
+
+
+function App() {
+
+ ...
+
+ const {
+ getEpgProps,
+ getLayoutProps,
+ } = useEpg({
+ epg,
+ channels,
+ startDate: '2022/02/02', // or 2022-02-02T00:00:00
+ });
+
+ return (
+
+
+
+ (
+
+ )}
+ />
+
+
+
+ );
+}
+
+```
+
+## renderChannel - Vertical Mode
+
+Below is an example that allows you to render your custom Channel component using Planby's style components with Vertical mode.
+
+```tsx
+import {
+ useEpg,
+ Epg,
+ Layout,
+ ChannelBox,
+ ChannelLogo,
+ Channel,
+ ChannelItem,
+} from '@nessprim/planby-pro';
+
+const CustomChannelItem = ({ isVerticalMode, channel }: ChannelItem) => {
+ const { position, logo } = channel;
+ return (
+
+ console.log('channel', channel)}
+ src={logo}
+ alt="Logo"
+ />
+
+ );
+};
+```
+
+## renderTimeline
+
+Below is an example that allows you to render your custom Timeline component using Planby's style components.
+
+```tsx
+import {
+ CurrentTime,
+ Timeline,
+ TimelineWrapper,
+ TimelineBox,
+ TimelineTime,
+ TimelineDivider,
+ TimelineDividers,
+ useTimeline,
+} from '@nessprim/planby-pro';
+
+
+export function CustomTimeline(props: Timeline) {
+ const { time, dividers,timelineHeight, getTime, getTimelineProps, getCurrentTimeProps } =
+ useTimeline(props);
+
+ const {
+ isToday,
+ isBaseTimeFormat,
+ isCurrentTime,
+ isTimelineVisible,
+ isVerticalMode,
+ } = props;
+
+ const { hourWidth } = props;
+
+ const renderTime = (item: string | number, index: number) => {
+ const { isNewDay, time } = getTime(item);
+ const position = { left: hourWidth * index, width: hourWidth };
+ const isVisible = isTimelineVisible(position);
+ if (!isVisible) return null;
+ return (
+
+
+ {time}
+
+ {renderDividers(isNewDay)}
+
+ );
+ };
+
+ const renderDividers = (isNewDay: boolean) =>
+ dividers.map((_, index) => (
+
+ ));
+
+ return (
+
+ {isToday && isCurrentTime && }
+ {time.map((item, index) => renderTime(item, index))}
+
+ );
+}
+
+function App() {
+
+ ...
+
+ const {
+ getEpgProps,
+ getLayoutProps,
+ } = useEpg({
+ epg,
+ channels,
+ startDate: '2022/02/02', // or 2022-02-02T00:00:00
+ });
+
+ return (
+
+ );
+}
+
+export default App;
+```
+
+## renderTimeline - Different hours in multiple days
+
+```tsx
+import {
+ CurrentTime,
+ Timeline,
+ TimelineWrapper,
+ TimelineBox,
+ TimelineTime,
+ TimelineDivider,
+ TimelineDividers,
+ useTimeline,
+} from '@nessprim/planby-pro';
+
+export function CustomTimeline(props: Timeline) {
+ const { isTodayInHoursInDays, areHoursInDays, time, ...rest } =
+ useTimeline(props);
+
+ const { timelineHeight, } = rest;
+ const {
+ getTime, getTimelineProps, getCurrentTimeProps
+ } = rest;
+
+ const {
+ isToday,
+ isBaseTimeFormat,
+ isCurrentTime,
+ isTimelineVisible,
+ isVerticalMode,
+ } = props;
+
+ const { hourWidth } = props;
+
+ const renderTime = (item: string | number, index: number) => {
+ const { isNewDay, time } = getTime(item);
+ const position = { left: hourWidth * index, width: hourWidth };
+ const isVisible = isTimelineVisible(position);
+ if (!isVisible) return null;
+ return (
+
+
+ {time}
+
+ {renderDividers(isNewDay)}
+
+ );
+ };
+...
+```
+
+## renderTimeline - RTL direction
+
+Below is an example that allows you to render your custom Timeline component using Planby's style components.
+
+```tsx
+import {
+ CurrentTime,
+ Timeline,
+ TimelineWrapper,
+ TimelineBox,
+ TimelineTime,
+ TimelineDivider,
+ TimelineDividers,
+ useTimeline,
+} from '@nessprim/planby-pro';
+
+
+export function CustomTimeline(props: Timeline) {
+const { time, dividers, getTime, getTimelineProps, getCurrentTimeProps } =
+ useTimeline(props);
+
+ const {
+ isToday,
+ isBaseTimeFormat,
+ isCurrentTime,
+ isRTL,
+ isTimelineVisible,
+ isVerticalMode,
+ } = props;
+
+ const { hourWidth } = props;
+
+ const renderTime = (item: string | number, index: number) => {
+ const { isNewDay, time } = getTime(item);
+ const position = { left: hourWidth * index, width: hourWidth };
+ const isVisible = isTimelineVisible(position);
+ if (!isVisible) return null;
+ return (
+
+
+ {time}
+
+ {renderDividers(isNewDay)}
+
+ );
+ };
+
+ ...
+}
+
+```
+
+## renderTimeline - Week or Month mode
+
+Below is an example that allows you to render your custom Timeline component using Planby's style components.
+
+```tsx
+import {
+ CurrentTime,
+ Timeline,
+ TimelineWrapper,
+ TimelineBox,
+ TimelineWeekMonthBox,
+ TimelineWeekMonthDate,
+ TimelineTime,
+ TimelineDivider,
+ TimelineDividers,
+ useTimeline,
+} from '@nessprim/planby-pro';
+
+
+export function CustomTimeline(props: Timeline) {
+const { isWeekMonthMode, isMonthMode, time, ...rest } = useTimeline(props);
+ const { timelineHeight, weekDayWidth, monthsWidth, dividers } = rest;
+ const {
+ formatWeekMonthDate,
+ getTime,
+ getDayMonthName,
+ getTimelineProps,
+ getCurrentTimeProps,
+ } = rest;
+
+ const {
+ isToday,
+ isBaseTimeFormat,
+ isCurrentTime,
+ isRTL,
+ isTimelineVisible,
+ isVerticalMode,
+ } = props;
+ const { mode } = props;
+ const { hourWidth } = props;
+
+ const renderWeekMonth = (item: string, index: number) => {
+ const width = isMonthMode ? monthsWidth[index].width : weekDayWidth;
+ const left = isMonthMode ? monthsWidth[index].left : width * index;
+ const position = {
+ left,
+ width,
+ };
+ const isVisible = isTimelineVisible(position);
+ if (!isVisible) return null;
+ const isModernStyle = mode.style === "modern";
+ return (
+
+
+ {isModernStyle && {getDayMonthName(item)}}
+ {formatWeekMonthDate(item)}
+
+
+ );
+ };
+
+ return (
+
+ {isCurrentTime && isToday && }
+ {time.map((item, index) => renderWeekMonth(item as string, index))}
+
+ );
+
+ ...
+}
+
+```
+
+## renderTimeline - Vertical Mode
+
+Below is an example that allows you to render your custom Timeline component using Planby's style components with Vertical Mode.
+
+```tsx
+import {
+ CurrentTime,
+ Timeline,
+ TimelineWrapper,
+ TimelineBox,
+ TimelineTime,
+ TimelineDivider,
+ TimelineDividers,
+ useTimeline,
+} from '@nessprim/planby-pro';
+
+
+export function Timeline(props: Timeline) {
+ const { time, dividers, getTime, getTimelineProps, getCurrentTimeProps } =
+ useTimeline(props);
+
+ const {
+ isToday,
+ isBaseTimeFormat,
+ isCurrentTime,
+ isRTL,
+ isTimelineVisible,
+ isVerticalMode,
+ } = props;
+
+ const { hourWidth } = props;
+
+ const renderTime = (item: string | number, index: number) => {
+ const { isNewDay, time } = getTime(item);
+ const position = { left: hourWidth * index, width: hourWidth };
+ const isVisible = isTimelineVisible(position);
+ if (!isVisible) return null;
+ return (
+
+
+ {time}
+
+ {renderDividers(isNewDay)}
+
+ );
+
+ };
+
+ const renderDividers = (isNewDay: boolean) =>
+ dividers.map((_, index) => (
+
+ ));
+
+ ...
+}
+
+```
+
+## renderLine
+
+Below is an example that allows you to render your custom Line component using Planby's style components.
+
+Available props in Line
+
+| Property | Type | Description | Status |
+| ---------------- | --------- | ------------------------------- | -------- |
+| `isVerticalMode` | `boolean` | Vertical mode | optional |
+| `isTimeline` | `boolean` | Vertical mode | optional |
+| `styles` | `object` | Object contains position styles | optional |
+
+```tsx
+import { Line } from '@nessprim/planby-pro';
+
+export function CustomLine({isVerticalMode, styles }: Line) {
+ return (
+
+ );
+}
+
+
+function App() {
+
+ ...
+
+ const {
+ getEpgProps,
+ getLayoutProps,
+ } = useEpg({
+ epg,
+ channels,
+ startDate: '2022/02/02', // or 2022-02-02T00:00:00
+ });
+
+ return (
+
+ );
+}
+
+export default App;
+```
+
+## renderCurrentTime
+
+Below is an example that allows you to render your custom CurrentTime component using Planby's style components.
+
+```tsx
+import {
+ CurrentTimeIndicator,
+ CurrentTimeBox,
+ CurrentTimeContent,
+ } from '@nessprim/planby-pro';
+
+export function CustomCurrentTime(props: CurrentTimeIndicator) {
+ const { isVerticalMode, isRTL, isBaseTimeFormat } = props;
+ const { time, styles } = props;
+
+ return (
+
+
+ {time}
+
+
+ );
+}
+
+
+
+function App() {
+
+ ...
+
+ const {
+ getEpgProps,
+ getLayoutProps,
+ } = useEpg({
+ epg,
+ channels,
+ startDate: '2022/02/02', // or 2022-02-02T00:00:00
+ });
+
+ return (
+
+ );
+}
+
+export default App;
+```
+
+## Theme
+
+### Schema
+
+Make your theme custom. Below is theme schema that you can pass as one of the options to `useEpg` hook.
+
+```jsx
+const theme = {
+ primary: {
+ 600: '#1a202c',
+ 900: '#171923',
+ },
+ grey: { 300: '#d1d1d1' },
+ white: '#fff',
+ teal: {
+ // Planby PRO version
+ 100: '#38B2AC',
+ },
+ green: {
+ 200: '#389493',
+ 300: '#2C7A7B',
+ },
+ loader: {
+ teal: '#5DDADB',
+ purple: '#3437A2',
+ pink: '#F78EB6',
+ bg: '#171923db',
+ },
+ scrollbar: {
+ border: '#ffffff',
+ thumb: {
+ bg: '#e1e1e1',
+ },
+ },
+ gradient: {
+ blue: {
+ 300: '#002eb3',
+ 600: '#002360',
+ 900: '#051937',
+ },
+ },
+ text: {
+ grey: {
+ 300: '#a0aec0',
+ 500: '#718096',
+ },
+ },
+ timeline: {
+ divider: {
+ bg: '#718096',
+ },
+ },
+ grid: {
+ // Planby PRO version
+ item: '#7180961a',
+ divider: '#7180961a',
+ highlight: '#38B2AC',
+ },
+};
+```
+
+## All import options
+
+```tsx
+import {
+ Epg,
+ Layout,
+ ChannelBox,
+ ChannelLogo,
+ CurrentTimeBox,
+ CurrentTimeContent,
+ ProgramBox,
+ ProgramContent,
+ ProgramFlex,
+ ProgramStack,
+ ProgramTitle,
+ ProgramText,
+ ProgramImage,
+ TimelineWrapper,
+ TimelineBox,
+ TimelineWeekMonthBox,
+ TimelineWeekMonthDate,
+ TimelineTime,
+ TimelineDividers,
+ useEpg,
+ useProgram,
+ useTimeline,
+ Line, // Interface
+ Channel, // Interface
+ CurrentTimeIndicator, // Interface
+ Program, // Interface
+ ProgramItem, // Interface for program render
+ Timeline, // Interface for timeline render
+ Theme, // Interface
+} from '@nessprim/planby-pro';
+```
+
+## License
+
+Custom License - All Rights Reserved. [See `LICENSE` for more information](https://planby.app/docs/planby-license.pdf).
+
+## Contact
+
+Karol Kozer - [@kozerkarol_twitter](https://twitter.com/kozerkarol)
+
+Project Link: [https://github.com/karolkozer/planby](https://github.com/karolkozer/planby)
diff --git a/dist/Epg/Epg.d.ts b/dist/Epg/Epg.d.ts
new file mode 100644
index 0000000..21f491f
--- /dev/null
+++ b/dist/Epg/Epg.d.ts
@@ -0,0 +1,19 @@
+import React from "react";
+import { Theme } from "./helpers/interfaces";
+interface EpgProps {
+ width?: number;
+ height?: number;
+ isVerticalMode?: boolean;
+ isRTL?: boolean;
+ isSidebar: boolean;
+ isTimeline?: boolean;
+ isLoading?: boolean;
+ children: React.ReactNode;
+ loader?: React.ReactNode;
+ theme: Theme;
+ globalStyles?: string;
+ sidebarWidth: number;
+ timelineHeight: number;
+}
+export declare const Epg: React.ForwardRefExoticComponent>;
+export {};
diff --git a/dist/Epg/components/Areas.d.ts b/dist/Epg/components/Areas.d.ts
new file mode 100644
index 0000000..395ffbc
--- /dev/null
+++ b/dist/Epg/components/Areas.d.ts
@@ -0,0 +1,15 @@
+import React from "react";
+import { Area } from "../helpers/interfaces";
+import { DateTime } from "../helpers/types";
+interface AreasProps {
+ isVerticalMode: boolean;
+ areas: Area[];
+ height: number;
+ hourWidth: number;
+ sidebarWidth: number;
+ timelineHeight: number;
+ startDate: DateTime;
+ endDate: DateTime;
+}
+export declare function Areas({ isVerticalMode, ...props }: AreasProps): React.JSX.Element;
+export {};
diff --git a/dist/Epg/components/Channel.d.ts b/dist/Epg/components/Channel.d.ts
new file mode 100644
index 0000000..94ef792
--- /dev/null
+++ b/dist/Epg/components/Channel.d.ts
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ChannelWithPosition } from "../helpers/types";
+interface ChannelProps {
+ isVerticalMode: boolean;
+ channel: T;
+ onOpenGroupTree?: (data: ChannelWithPosition) => void;
+ onClick?: (v: ChannelWithPosition) => void;
+}
+export declare function Channel({ isVerticalMode, channel, onOpenGroupTree, onClick, ...rest }: ChannelProps): React.JSX.Element;
+export {};
diff --git a/dist/Epg/components/Channels.d.ts b/dist/Epg/components/Channels.d.ts
new file mode 100644
index 0000000..c872629
--- /dev/null
+++ b/dist/Epg/components/Channels.d.ts
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { ChannelItem, ChannelWithPosition } from "../helpers/types";
+interface ChannelsProps {
+ isVerticalMode: boolean;
+ isTimeline: boolean;
+ isRTL: boolean;
+ isChannelVisible: (position: any) => boolean;
+ channels: ChannelWithPosition[];
+ contentHeight: number;
+ sidebarWidth: number;
+ timelineHeight: number;
+ scrollY: number;
+ openChannelGroupTree: (data: ChannelWithPosition) => void;
+ renderChannel?: (v: ChannelItem) => React.ReactNode;
+}
+export declare function Channels(props: ChannelsProps): React.JSX.Element;
+export {};
diff --git a/dist/Epg/components/CurrentTime.d.ts b/dist/Epg/components/CurrentTime.d.ts
new file mode 100644
index 0000000..74d28cb
--- /dev/null
+++ b/dist/Epg/components/CurrentTime.d.ts
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { CurrentTimeIndicator, HoursInDayDiffTime, Mode, Timezone } from "../helpers/interfaces";
+import { DateTime } from "../helpers/types";
+interface CurrentTimeProps {
+ isBaseTimeFormat?: boolean;
+ isVerticalMode?: boolean;
+ isRTL?: boolean;
+ timezone: Timezone;
+ mode: Mode;
+ startDate: DateTime;
+ endDate: DateTime;
+ hoursInDays: HoursInDayDiffTime[];
+ dayWidth: number;
+ timelineHeight: number;
+ hourWidth: number;
+ sidebarWidth: number;
+ liveRefreshTime: number;
+ renderCurrentTime?: (v: CurrentTimeIndicator) => React.ReactElement;
+}
+export declare function CurrentTime(props: CurrentTimeProps): React.JSX.Element | null;
+export {};
diff --git a/dist/Epg/components/Grid.d.ts b/dist/Epg/components/Grid.d.ts
new file mode 100644
index 0000000..f9e5350
--- /dev/null
+++ b/dist/Epg/components/Grid.d.ts
@@ -0,0 +1,30 @@
+import * as React from "react";
+import { Mode, Grid as IGrid, HoursInDayDiffTime, GridCell } from "../helpers/interfaces";
+import { BaseTimeFormat, ChannelWithPosition, Position } from "../helpers/types";
+interface GridProps {
+ isVerticalMode: boolean;
+ isProgramVisible: (position: Position, overlapsCount: number) => boolean;
+ isBaseTimeFormat: BaseTimeFormat;
+ channelOverlapsCount: Record;
+ hourWidth: number;
+ dayWidth: number;
+ days: string[];
+ hoursInDays: HoursInDayDiffTime[];
+ months: string[];
+ numberOfDays: number;
+ numberOfHoursInDay: number;
+ numberOfMonths: number;
+ offsetStartHoursRange: number;
+ gridItems: {
+ position: Position;
+ channel: ChannelWithPosition;
+ }[];
+ grid: IGrid;
+ mode: Mode;
+ sidebarWidth: number;
+ timelineHeight: number;
+ timelineDividers: number;
+ renderGridCell?: (props: GridCell) => React.ReactNode;
+}
+export declare function Grid({ isVerticalMode, isProgramVisible, channelOverlapsCount, grid, gridItems, mode, hourWidth, timelineDividers, renderGridCell, ...rest }: GridProps): React.JSX.Element;
+export {};
diff --git a/dist/Epg/components/GridCellItem.d.ts b/dist/Epg/components/GridCellItem.d.ts
new file mode 100644
index 0000000..aaf2fb0
--- /dev/null
+++ b/dist/Epg/components/GridCellItem.d.ts
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { GridCell } from "../helpers/interfaces";
+import { ChannelWithPosition, GridEvent, Position } from "../helpers/types";
+interface GridCellItemProps {
+ isVerticalMode: boolean;
+ isHoverHighlight: boolean | undefined;
+ isProgramVisible: (position: Position, overlapsCount: number) => boolean;
+ isItemClickable: boolean;
+ isDayMode: boolean;
+ item: {
+ position: Position;
+ channel: ChannelWithPosition;
+ };
+ index: number;
+ channelOverlapsCount: Record;
+ hourWidth: number;
+ timelineDividers: number;
+ renderGridCell?: (props: GridCell) => React.ReactNode;
+ onItemClick: GridEvent;
+ onItemDrop: GridEvent;
+}
+export declare function GridCellItem({ isVerticalMode, isProgramVisible, isHoverHighlight, isDayMode, isItemClickable, item, index, channelOverlapsCount, hourWidth, timelineDividers, renderGridCell, onItemClick, onItemDrop, }: GridCellItemProps): {} | null | undefined;
+export {};
diff --git a/dist/Epg/components/GridDividerItem.d.ts b/dist/Epg/components/GridDividerItem.d.ts
new file mode 100644
index 0000000..470e4a2
--- /dev/null
+++ b/dist/Epg/components/GridDividerItem.d.ts
@@ -0,0 +1,3 @@
+import React from "react";
+import { GridDividerItemProps } from "../helpers/interfaces";
+export declare function GridDividerItem({ index, item, dividerProps, }: GridDividerItemProps): React.JSX.Element;
diff --git a/dist/Epg/components/Layout.d.ts b/dist/Epg/components/Layout.d.ts
new file mode 100644
index 0000000..56f7557
--- /dev/null
+++ b/dist/Epg/components/Layout.d.ts
@@ -0,0 +1,87 @@
+import React from "react";
+import { Area, Grid as IGrid, HoursInDayDiffTime, Line as ILine, Mode, Overlap, ProgramOverlaps, DragAndDrop, Timezone, Snap, GridCell } from "../helpers/interfaces";
+import { Timeline as ITimeline, CurrentTimeIndicator } from "../helpers/interfaces";
+import { ProgramItem, ChannelWithPosition, DateTime, Position, BaseTimeFormat, DragMouseUp } from "../helpers/types";
+interface LayoutProps {
+ isToday: boolean;
+ isVerticalMode?: boolean;
+ isRTL?: boolean;
+ isBaseTimeFormat?: BaseTimeFormat;
+ isSidebar?: boolean;
+ isTimeline?: boolean;
+ isLine?: boolean;
+ isCurrentTime?: boolean;
+ isResize?: boolean;
+ programs: ProgramItem[];
+ programOverlaps: ProgramOverlaps;
+ layerOverlapLevel: number;
+ channels: ChannelWithPosition[];
+ channelOverlapsCount: Record;
+ startDate: DateTime;
+ endDate: DateTime;
+ hoursInDays: HoursInDayDiffTime[];
+ scrollY: number;
+ dayWidth: number;
+ hourWidth: number;
+ days: string[];
+ months: string[];
+ currentDate: string;
+ numberOfDays: number;
+ numberOfHoursInDay: number;
+ numberOfMonths: number;
+ monthWidth: number;
+ offsetStartHoursRange: number;
+ sidebarWidth: number;
+ timelineHeight: number;
+ itemHeight: number;
+ liveRefreshTime: number;
+ snap?: Snap;
+ mode: Mode;
+ dnd: DragAndDrop;
+ overlapMode: Overlap["mode"];
+ timelineDividers: number;
+ timezone: Timezone;
+ areas: Area[];
+ gridItems: {
+ position: Position;
+ channel: ChannelWithPosition;
+ }[];
+ grid: IGrid;
+ overlap: Overlap;
+ isProgramVisible: (position: Position, overlapsCount: number) => boolean;
+ isChannelVisible: (position: Pick) => boolean;
+ isTimelineVisible: (position: Pick) => boolean;
+ dragMouseUp: (position: DragMouseUp) => void;
+ resizeMouseUp: (data: any) => void;
+ openChannelGroupTree: (data: ChannelWithPosition) => void;
+ onScroll: (e: React.UIEvent & {
+ target: Element;
+ }) => void;
+ onLayoutBgClick?: () => void;
+ renderProgram?: (v: {
+ program: ProgramItem;
+ isRTL: boolean;
+ isVerticalMode: boolean;
+ isBaseTimeFormat: BaseTimeFormat;
+ startDate: DateTime;
+ liveRefreshTime: number;
+ dayWidth: number;
+ hourWidth: number;
+ itemHeight: number;
+ contentHeight: number;
+ snap?: Snap;
+ mode: Mode;
+ dnd: DragAndDrop;
+ dragMouseUp: (data: DragMouseUp) => void;
+ resizeMouseUp: (data: any) => void;
+ }) => React.ReactNode;
+ renderChannel?: (v: {
+ channel: ChannelWithPosition;
+ }) => React.ReactNode;
+ renderTimeline?: (v: ITimeline) => React.ReactNode;
+ renderLine?: (v: ILine) => React.ReactNode;
+ renderCurrentTime?: (v: CurrentTimeIndicator) => React.ReactElement;
+ renderGridCell?: (v: GridCell) => React.ReactElement;
+}
+export declare const Layout: React.ForwardRefExoticComponent>;
+export {};
diff --git a/dist/Epg/components/Line.d.ts b/dist/Epg/components/Line.d.ts
new file mode 100644
index 0000000..7df90a4
--- /dev/null
+++ b/dist/Epg/components/Line.d.ts
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { HoursInDayDiffTime, Line as ILine, Timezone } from "../helpers/interfaces";
+import { DateTime } from "../helpers/types";
+interface LineProps {
+ isTimeline: boolean;
+ isVerticalMode: boolean;
+ height: number;
+ startDate: DateTime;
+ endDate: DateTime;
+ dayWidth: number;
+ hourWidth: number;
+ sidebarWidth: number;
+ liveRefreshTime: number;
+ hoursInDays: HoursInDayDiffTime[];
+ timezone: Timezone;
+ renderLine?: (v: ILine) => React.ReactNode;
+}
+export declare function Line({ isTimeline, isVerticalMode, height, renderLine, ...rest }: LineProps): React.JSX.Element | null;
+export {};
diff --git a/dist/Epg/components/Loader.d.ts b/dist/Epg/components/Loader.d.ts
new file mode 100644
index 0000000..033e92e
--- /dev/null
+++ b/dist/Epg/components/Loader.d.ts
@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function Loader(): React.JSX.Element;
diff --git a/dist/Epg/components/Program.d.ts b/dist/Epg/components/Program.d.ts
new file mode 100644
index 0000000..984cc35
--- /dev/null
+++ b/dist/Epg/components/Program.d.ts
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { DragAndDrop, Mode, Program as ProgramType, Snap } from "../helpers/interfaces";
+import { BaseTimeFormat, DateTime, DragMouseUp, ResizeMouseUp } from "../helpers/types";
+import { ProgramItem } from "../helpers/types";
+interface ProgramProps {
+ isVerticalMode?: boolean;
+ isRTL?: boolean;
+ isResize?: boolean;
+ isBaseTimeFormat: BaseTimeFormat;
+ startDate: DateTime;
+ program: T;
+ liveRefreshTime: number;
+ snap?: Snap;
+ mode: Mode;
+ dnd: DragAndDrop;
+ contentHeight: number;
+ dayWidth: number;
+ hourWidth: number;
+ itemHeight: number;
+ dragMouseUp: (data: DragMouseUp) => void;
+ resizeMouseUp: (data: ResizeMouseUp) => void;
+ onClick?: (v: ProgramType) => void;
+}
+export declare function Program({ isVerticalMode, program, onClick, ...rest }: ProgramProps): React.JSX.Element;
+export {};
diff --git a/dist/Epg/components/Timeline.d.ts b/dist/Epg/components/Timeline.d.ts
new file mode 100644
index 0000000..fdba0ae
--- /dev/null
+++ b/dist/Epg/components/Timeline.d.ts
@@ -0,0 +1,3 @@
+import * as React from "react";
+import { Timeline as ITimeline } from "../helpers/interfaces";
+export declare function Timeline(props: ITimeline): React.JSX.Element;
diff --git a/dist/Epg/components/index.d.ts b/dist/Epg/components/index.d.ts
new file mode 100644
index 0000000..24968ff
--- /dev/null
+++ b/dist/Epg/components/index.d.ts
@@ -0,0 +1,9 @@
+export * from "./Layout";
+export * from "./Program";
+export * from "./Channels";
+export * from "./Channel";
+export * from "./Timeline";
+export * from "./Line";
+export * from "./Loader";
+export * from "./CurrentTime";
+export * from "./Areas";
diff --git a/dist/Epg/helpers/areas.d.ts b/dist/Epg/helpers/areas.d.ts
new file mode 100644
index 0000000..f64669a
--- /dev/null
+++ b/dist/Epg/helpers/areas.d.ts
@@ -0,0 +1,32 @@
+///
+import { Area } from "./interfaces";
+import { DateTime } from "./types";
+interface AreasData {
+ area: Area;
+ hourWidth: number;
+ sidebarWidth: number;
+ timelineHeight: number;
+ height: number;
+ startDate: DateTime;
+ endDate: DateTime;
+}
+export declare const getAreasFields: ({ area, startDate, endDate, hourWidth, sidebarWidth, timelineHeight, height, }: AreasData) => {
+ showArea: boolean;
+ areaFieldStyles: {
+ positionX: number;
+ width: number;
+ height: number;
+ timelineHeight: number;
+ };
+ areaBgStyles: import("react").CSSProperties;
+ startDate: string;
+ endDate?: string | undefined;
+ styles: import("react").CSSProperties;
+ onClick?: (() => void) | undefined;
+ annotations?: {
+ styles: import("react").CSSProperties;
+ textStart?: string | undefined;
+ textEnd?: string | undefined;
+ } | undefined;
+};
+export {};
diff --git a/dist/Epg/helpers/channels.d.ts b/dist/Epg/helpers/channels.d.ts
new file mode 100644
index 0000000..b8f830a
--- /dev/null
+++ b/dist/Epg/helpers/channels.d.ts
@@ -0,0 +1,15 @@
+import { ChannelWithPosition } from "./types";
+export declare const getChannelVerticalPosition: (channel: ChannelWithPosition, isVerticalMode: boolean) => ChannelWithPosition;
+export declare const getChannelGroupTreeProps: (channel: ChannelWithPosition) => {
+ nestedChildren: string[] | undefined;
+ isFirstNestedChild: boolean;
+ isLastNestedChild: boolean;
+ isOpened?: boolean | undefined;
+ uuid: string;
+ logo: string;
+ groupTree?: boolean | undefined;
+ parentChannelUuid?: string | undefined;
+ isNestedChild: boolean;
+ position: Pick & Partial>;
+ index: number;
+};
diff --git a/dist/Epg/helpers/common.d.ts b/dist/Epg/helpers/common.d.ts
new file mode 100644
index 0000000..4b71158
--- /dev/null
+++ b/dist/Epg/helpers/common.d.ts
@@ -0,0 +1,56 @@
+import { useLayoutEffect } from "react";
+import { HoursInDayDiffTime, Mode, Overlap, ProgramOverlaps } from "./interfaces";
+import { ProgramItem } from "./types";
+declare type DateTime = string | number | Date;
+declare type OmitObjectType = {
+ [key: string]: any;
+};
+export declare const omit: (obj: OmitObjectType, ...props: string[]) => {
+ [x: string]: any;
+};
+export declare const generateArray: (num: number) => any[];
+interface OverlapProgramOptions {
+ isVerticalMode: boolean;
+ program: ProgramItem;
+ programOverlaps: ProgramOverlaps;
+ layerOverlapLevel: number;
+ overlap: Overlap;
+ overlapMode: Overlap["mode"];
+}
+export declare const getProgramOptions: ({ isVerticalMode, program, overlap, ...rest }: OverlapProgramOptions) => {
+ position: Pick;
+ data: import("./interfaces").Program;
+};
+export declare const useIsomorphicLayoutEffect: () => typeof useLayoutEffect;
+export declare const getHourWidth: (dayWidth: number) => number;
+export declare const getDate: (date: DateTime) => Date;
+interface DayWidth {
+ dayWidth: number;
+ startDate: DateTime;
+ endDate: DateTime;
+ hoursInDays: HoursInDayDiffTime[];
+ modeType: Mode["type"];
+}
+export declare const getDayWidthResources: ({ dayWidth, startDate, endDate, hoursInDays, modeType, }: DayWidth) => {
+ hourWidth: number;
+ dayWidth: number;
+ numberOfMonths: number;
+ numberOfHoursInDay: number;
+ monthWidth: number;
+ offsetStartHoursRange: number;
+};
+export declare const getDayResources: ({ startDate, endDate, modeType, }: Pick) => {
+ isToday: boolean;
+ currentDate: string;
+ numberOfDays: number;
+ days: string[];
+ months: string[];
+};
+export declare const switchPosition: (programPosition: ProgramItem["position"]) => {
+ top: number;
+ left: number;
+ width: number;
+ height: number;
+};
+export declare function generateUUID(): string;
+export {};
diff --git a/dist/Epg/helpers/drag.d.ts b/dist/Epg/helpers/drag.d.ts
new file mode 100644
index 0000000..0b3dfa7
--- /dev/null
+++ b/dist/Epg/helpers/drag.d.ts
@@ -0,0 +1,19 @@
+import { DateTime, DragMouseUp, ResizeMouseUp } from "./types";
+declare type EventProps = Pick;
+declare type EventSinceTill = EventProps & {
+ startDate?: DateTime;
+ hourWidth: number;
+ width?: ResizeMouseUp["width"];
+ initialWidth?: ResizeMouseUp["initialWidth"];
+};
+export declare const calculateItemDragSinceTill: (props: EventSinceTill) => {
+ since: string;
+ till: string;
+};
+export declare const getDefaultDragProps: (positionLeft: number) => {
+ currentPositionX: number;
+ dndEvents: {
+ isDragging: boolean;
+ };
+};
+export {};
diff --git a/dist/Epg/helpers/enums.d.ts b/dist/Epg/helpers/enums.d.ts
new file mode 100644
index 0000000..e63b687
--- /dev/null
+++ b/dist/Epg/helpers/enums.d.ts
@@ -0,0 +1,9 @@
+export declare enum Layers {
+ Sidebar = 9,
+ EpgCornerBox = 10,
+ Line = 9,
+ Loader = 12,
+ Program = 1,
+ Timeline = 9,
+ Area = 2
+}
diff --git a/dist/Epg/helpers/epg.d.ts b/dist/Epg/helpers/epg.d.ts
new file mode 100644
index 0000000..e3d7feb
--- /dev/null
+++ b/dist/Epg/helpers/epg.d.ts
@@ -0,0 +1,105 @@
+import { Channel, ChannelWithOmittedUuid, HoursInDayDiffTime, Mode, Program, ProgramWithOmittedUuid } from "./interfaces";
+import { Position, DateTime, ChannelWithPosition } from "./types";
+export declare const getPositionX: (since: DateTime, till: DateTime, startDate: DateTime, endDate: DateTime, hourWidth: number) => number;
+export declare const getChannelPosition: (channelIndex: number, itemHeight: number) => {
+ top: number;
+ height: number;
+};
+export declare const getProgramPosition: (program: Program, channelIndex: number, itemHeight: number, hourWidth: number, startDate: DateTime, endDate: DateTime, isVerticalMode: boolean) => {
+ position: {
+ width: number;
+ height: number;
+ top: number;
+ left: number;
+ edgeEnd: number;
+ };
+ data: {
+ since: string;
+ till: string;
+ channelUuid: string;
+ id: string;
+ index: number;
+ title: string;
+ description: string;
+ image: string;
+ channelIndex: number;
+ channelPosition: Pick;
+ fixedVisibility?: boolean | undefined;
+ parentChannelUuid?: string | undefined;
+ };
+};
+interface ConvertedPrograms {
+ isVerticalMode: boolean;
+ isOverlapEnabled: boolean;
+ programChannelMapKey: string;
+ data: ProgramWithOmittedUuid[];
+ channels: Channel[];
+ startDate: DateTime;
+ endDate: DateTime;
+ itemHeight: number;
+ hourWidth: number;
+ hoursInDays: HoursInDayDiffTime[];
+}
+export declare const getConvertedPrograms: ({ isVerticalMode, isOverlapEnabled, programChannelMapKey, data, channels, startDate, endDate, itemHeight, hourWidth, hoursInDays, }: ConvertedPrograms) => {
+ position: {
+ width: number;
+ height: number;
+ top: number;
+ left: number;
+ edgeEnd: number;
+ };
+ data: {
+ since: string;
+ till: string;
+ channelUuid: string;
+ id: string;
+ index: number;
+ title: string;
+ description: string;
+ image: string;
+ channelIndex: number;
+ channelPosition: Pick;
+ fixedVisibility?: boolean | undefined;
+ parentChannelUuid?: string | undefined;
+ };
+}[];
+export declare const getConvertedChannels: (isOverlapEnabled: boolean, overlapMode: string, layerOverlapLevel: number, channels: ChannelWithOmittedUuid[], itemHeight: number, channelMapKey: string, channelOverlapsCount: Record) => ChannelWithPosition[];
+interface ItemVisibility {
+ position: Position;
+ scrollY: number;
+ scrollX: number;
+ containerHeight: number;
+ containerWidth: number;
+ isVerticalMode: boolean;
+ itemOverscan: number;
+ overlapsCount: number;
+}
+export declare const getItemVisibility: ({ position, scrollY, scrollX, containerHeight, containerWidth, itemOverscan, overlapsCount, isVerticalMode, }: ItemVisibility) => boolean;
+interface SidebarItemVisibility {
+ isVerticalMode: boolean;
+ itemOverscan: number;
+ position: Pick & Partial>;
+ scrollX: number;
+ scrollY: number;
+ containerHeight: number;
+ containerWidth: number;
+}
+export declare const getSidebarItemVisibility: ({ position, scrollX, scrollY, containerHeight, containerWidth, itemOverscan, isVerticalMode, }: SidebarItemVisibility) => boolean;
+interface TimelineItemVisibility {
+ position: Pick;
+ scrollY: number;
+ scrollX: number;
+ containerWidth: number;
+ containerHeight: number;
+ isVerticalMode: boolean;
+}
+export declare const getTimelineItemVisibility: ({ position, scrollY, scrollX, containerHeight, containerWidth, isVerticalMode, }: TimelineItemVisibility) => boolean;
+export declare const setUpdatedLayoutItem: (data: ProgramWithOmittedUuid, modeType: Mode["type"]) => {
+ since: string;
+ till: string;
+ channelUuid?: string | undefined;
+ id: string;
+ title: string;
+ image: string;
+};
+export {};
diff --git a/dist/Epg/helpers/grid.d.ts b/dist/Epg/helpers/grid.d.ts
new file mode 100644
index 0000000..d5093c7
--- /dev/null
+++ b/dist/Epg/helpers/grid.d.ts
@@ -0,0 +1,59 @@
+import { Mode, Grid as IGrid, HoursInDayDiffTime } from "../helpers/interfaces";
+import { BaseTimeFormat, ChannelWithPosition, Position } from "./types";
+interface ConvertedGridItems {
+ isVerticalMode: boolean;
+ channels: ChannelWithPosition[];
+ mode: Mode;
+ dayWidth: number;
+ hourWidth: number;
+ timelineHeight: number;
+ sidebarWidth: number;
+ dayWidthResources: {
+ numberOfMonths: number;
+ numberOfHoursInDay: number;
+ monthWidth: number;
+ offsetStartHoursRange: number;
+ };
+ daysResources: {
+ numberOfDays: number;
+ days: string[];
+ months: string[];
+ };
+}
+export declare const getConvertedGridItems: ({ isVerticalMode, channels, dayWidth, hourWidth, timelineHeight, sidebarWidth, mode, dayWidthResources, daysResources, }: ConvertedGridItems) => {
+ position: {
+ top: number;
+ left: number;
+ width: number;
+ height: number;
+ edgeEnd: number;
+ };
+ channel: ChannelWithPosition;
+}[];
+interface ClickGridItem {
+ isDrop?: boolean;
+ isVerticalMode: boolean;
+ isBaseTimeFormat: BaseTimeFormat;
+ index: number | undefined;
+ item: {
+ position: Position;
+ channel: ChannelWithPosition;
+ };
+ grid: IGrid;
+ mode: Mode;
+ dayWidth: number;
+ hourWidth: number;
+ timelineHeight: number;
+ sidebarWidth: number;
+ days: string[];
+ hoursInDays: HoursInDayDiffTime[];
+ months: string[];
+ numberOfDays: number;
+ numberOfHoursInDay: number;
+ numberOfMonths: number;
+ offsetStartHoursRange: number;
+ timelineDividers: number;
+ dataAttributes?: Record;
+}
+export declare const getClickGridItemData: ({ isDrop, isVerticalMode, isBaseTimeFormat, index, item, grid, mode, dayWidth, hourWidth, sidebarWidth, days, hoursInDays, months, numberOfDays, numberOfHoursInDay, numberOfMonths, offsetStartHoursRange, timelineDividers, dataAttributes, }: ClickGridItem) => void;
+export {};
diff --git a/dist/Epg/helpers/index.d.ts b/dist/Epg/helpers/index.d.ts
new file mode 100644
index 0000000..962d003
--- /dev/null
+++ b/dist/Epg/helpers/index.d.ts
@@ -0,0 +1,13 @@
+export * from "./interfaces";
+export * from "./enums";
+export * from "./variables";
+export * from "./common";
+export * from "./time";
+export * from "./epg";
+export * from "./timeline";
+export * from "./line";
+export * from "./channels";
+export * from "./layout";
+export * from "./overlaps";
+export * from "./drag";
+export * from "./grid";
diff --git a/dist/Epg/helpers/interfaces.d.ts b/dist/Epg/helpers/interfaces.d.ts
new file mode 100644
index 0000000..7eabd0c
--- /dev/null
+++ b/dist/Epg/helpers/interfaces.d.ts
@@ -0,0 +1,286 @@
+import { CSSProperties } from "react";
+import { Layers } from "./enums";
+import { BaseTimeFormat, ChannelWithPosition, DateTime, DragMouseUp, GridEvent, Position, ProgramItem } from "./types";
+export interface Program {
+ channelUuid: string;
+ id: string;
+ index: number;
+ title: string;
+ description: string;
+ since: string | number | Date;
+ till: string | number | Date;
+ image: string;
+ channelIndex: number;
+ channelPosition: Pick;
+ fixedVisibility?: boolean;
+ parentChannelUuid?: string;
+ [key: string]: any;
+}
+export interface ProgramWithOmittedUuid extends Omit {
+ channelUuid?: string;
+}
+export interface Channel {
+ isOpened?: boolean;
+ uuid: string;
+ logo: string;
+ groupTree?: boolean;
+ parentChannelUuid?: string;
+ nestedChildren?: string[];
+ isNestedChild: boolean;
+ isFirstNestedChild?: boolean;
+ isLastNestedChild?: boolean;
+ [key: string]: any;
+}
+export interface ChannelWithOmittedUuid extends Omit {
+ uuid?: string;
+}
+export interface ProgramOverlaps {
+ [key: string]: ProgramItem[];
+}
+export interface Overlap {
+ enabled: boolean;
+ mode: "stack" | "layer";
+ layerOverlapLevel?: number;
+}
+export interface Snap {
+ x?: number;
+ y?: number;
+}
+export interface GridDataAttributes {
+ [key: string]: string;
+}
+export interface GridItemProps {
+ since: string;
+ till: string;
+ date: string;
+ channelUuid: string;
+}
+export interface GridDividerItemProps {
+ index: number;
+ item: {
+ position: Position;
+ channel: ChannelWithPosition;
+ };
+ dividerProps: {
+ styles: {
+ left: (index: number) => number;
+ width: number;
+ };
+ props: {
+ isVerticalMode: boolean;
+ isHoverHighlight: boolean;
+ isItemClickable: boolean;
+ onItemClick: GridEvent;
+ onItemDrop?: GridEvent;
+ };
+ };
+}
+export interface GridDropItemProps extends GridItemProps {
+ [key: string]: string;
+}
+export interface Grid {
+ enabled: boolean;
+ hoverHighlight?: boolean;
+ onGridItemClick?: (props: GridItemProps) => void;
+ onGridItemDrop?: (props: GridItemProps) => void;
+}
+export interface GridCell {
+ isDayMode: boolean;
+ isHoverHighlight?: boolean;
+ isDragOver?: boolean;
+ id: string;
+ index: number;
+ item: {
+ position: Position;
+ channel: ChannelWithPosition;
+ };
+ timelineDividers: number;
+ timelineDividerArray: string[];
+ gridDividerProps: {
+ styles: {
+ left: (index: number) => number;
+ width: number;
+ };
+ props: {
+ isVerticalMode: boolean;
+ isHoverHighlight: boolean;
+ isItemClickable: boolean;
+ onItemClick: GridEvent;
+ };
+ };
+ gridItemClickProps: {
+ onClick?: () => void;
+ isItemClickable: boolean;
+ };
+ gridItemDnDProps: {
+ isDragOver?: undefined;
+ onDragEnter?: undefined;
+ onDragLeave?: undefined;
+ onDrop?: undefined;
+ } | {
+ isDragOver: boolean;
+ onDragEnter: (e: React.DragEvent) => void;
+ onDragLeave: (e: React.DragEvent) => void;
+ onDrop: (e: React.DragEvent) => void;
+ };
+}
+export interface DragAndDrop {
+ enabled: boolean;
+ mode: "row" | "multi-rows";
+ onDnDMouseUp?: (event: Pick) => void;
+ onDnDSuccess?: (event: ProgramWithOmittedUuid) => void;
+}
+export interface Line {
+ isVerticalMode: boolean;
+ isTimeline: boolean;
+ styles: {
+ position: {
+ top: number;
+ left: number;
+ width: number;
+ height: number;
+ zIndex: Layers;
+ };
+ };
+}
+export interface CurrentTimeIndicator {
+ isVerticalMode?: boolean;
+ isRTL?: boolean;
+ isBaseTimeFormat?: boolean;
+ time: string;
+ styles: {
+ position: Omit & {
+ width: string | number;
+ };
+ };
+}
+export interface Timeline {
+ isVerticalMode?: boolean;
+ isRTL?: boolean;
+ isToday: boolean;
+ isBaseTimeFormat: BaseTimeFormat;
+ isCurrentTime: boolean;
+ isSidebar: boolean;
+ isTimelineVisible: (position: Pick) => boolean;
+ timezone: Timezone;
+ dayWidth: number;
+ hourWidth: number;
+ days: string[];
+ hoursInDays: HoursInDayDiffTime[];
+ months: string[];
+ numberOfDays: number;
+ numberOfHoursInDay: number;
+ numberOfMonths: number;
+ offsetStartHoursRange: number;
+ monthWidth: number;
+ sidebarWidth: number;
+ timelineHeight: number;
+ startDate: DateTime;
+ endDate: DateTime;
+ liveRefreshTime: number;
+ mode: Mode;
+ timelineDividers: number;
+ renderCurrentTime?: (v: CurrentTimeIndicator) => React.ReactElement;
+}
+export interface Mode {
+ type: "day" | "week" | "month";
+ style?: "default" | "modern";
+}
+export interface Area {
+ startDate: string;
+ endDate?: string;
+ styles: CSSProperties;
+ onClick?: () => void;
+ annotations?: {
+ styles: CSSProperties;
+ textStart?: string;
+ textEnd?: string;
+ };
+}
+export interface AreaItem {
+ showArea: boolean;
+ startDate: Area["startDate"];
+ endDate?: Area["endDate"];
+ areaBgStyles: Area["styles"];
+ onClick?: Area["onClick"];
+ annotations?: {
+ styles: Area["styles"];
+ textStart?: string;
+ textEnd?: string;
+ };
+ areaFieldStyles: {
+ positionX: number;
+ width: number;
+ height: number;
+ timelineHeight: number;
+ };
+}
+export interface HoursInDay {
+ date: string;
+ startTimeHour: string;
+ endTimeHour: string;
+}
+export interface HoursInDayDiffTime extends HoursInDay {
+ diffInHours: number;
+ prevItemDiffInHours: number;
+ diffLeft: number;
+ startTime: number;
+ endTime: number;
+}
+export interface Timezone {
+ enabled: boolean;
+ zone: string;
+ mode: string;
+}
+export interface Theme {
+ primary: {
+ 600: string;
+ 900: string;
+ };
+ grey: {
+ 300: string;
+ };
+ white: string;
+ teal: {
+ 100: string;
+ };
+ green: {
+ 200: string;
+ 300: string;
+ };
+ loader: {
+ teal: string;
+ purple: string;
+ pink: string;
+ bg: string;
+ };
+ scrollbar: {
+ border: string;
+ thumb: {
+ bg: string;
+ };
+ };
+ gradient: {
+ blue: {
+ 300: string;
+ 600: string;
+ 900: string;
+ };
+ };
+ text: {
+ grey: {
+ 300: string;
+ 500: string;
+ };
+ };
+ timeline: {
+ divider: {
+ bg: string;
+ };
+ };
+ grid: {
+ item: string;
+ divider: string;
+ highlight: string;
+ };
+}
diff --git a/dist/Epg/helpers/layout.d.ts b/dist/Epg/helpers/layout.d.ts
new file mode 100644
index 0000000..1b1011e
--- /dev/null
+++ b/dist/Epg/helpers/layout.d.ts
@@ -0,0 +1,29 @@
+import { ChannelWithOmittedUuid, Timezone } from "./interfaces";
+import { ChannelWithPosition, ProgramWithPosition } from "./types";
+export declare const setLayoutScreenCloneElement: (event: ProgramWithPosition, index: number) => void;
+export declare const deleteLayoutScreenCloneElement: (event: ProgramWithPosition) => void;
+export declare const getLayoutScreenCloneElements: () => Record>;
+export declare const resetLayoutScreenCloneElements: () => void;
+export declare const getChannelsContentHeight: (channels: ChannelWithPosition[]) => number;
+export declare const setChannelEpgIndexes: ({ uuid, first, last, }: {
+ uuid: string;
+ first?: number | undefined;
+ last?: number | undefined;
+}) => void;
+export declare const getChannelEpgIndexes: (uuid: string) => {
+ uuid: string;
+ first: number;
+ last: number;
+};
+export declare const resetChannelsEpgIndexes: () => void;
+export declare const setChannelGroupTree: (channel: ChannelWithOmittedUuid) => void;
+export declare const setChannelGroupTreeNestedChildren: (channelUuid: string, nestedChildUuid: string) => void;
+export declare const getChannelsGroupTree: () => Record;
+export declare const setTimezoneOptionsCache: (props: Timezone) => void;
+export declare const getTimezoneOptionsCache: () => Timezone;
+export declare const resetTimezoneOptionsCache: () => void;
diff --git a/dist/Epg/helpers/line.d.ts b/dist/Epg/helpers/line.d.ts
new file mode 100644
index 0000000..4b140c9
--- /dev/null
+++ b/dist/Epg/helpers/line.d.ts
@@ -0,0 +1,26 @@
+import { Layers } from "./enums";
+interface LineStyles {
+ isVerticalMode: boolean;
+ isTimeline: boolean;
+ lineStyles: {
+ position: string;
+ top: number;
+ width: number;
+ };
+ position: {
+ height: number;
+ left: number;
+ zIndex: Layers;
+ };
+}
+export declare const getLineStyles: ({ isVerticalMode, isTimeline, lineStyles, position, }: LineStyles) => {
+ position: {
+ position: string;
+ top: number;
+ left: number;
+ width: number;
+ height: number;
+ zIndex: Layers;
+ };
+};
+export {};
diff --git a/dist/Epg/helpers/overlaps.d.ts b/dist/Epg/helpers/overlaps.d.ts
new file mode 100644
index 0000000..926d5ef
--- /dev/null
+++ b/dist/Epg/helpers/overlaps.d.ts
@@ -0,0 +1,13 @@
+import { ProgramItem } from "./types";
+import { ProgramOverlaps } from "./interfaces";
+export declare function getOverlaps(isVerticalMode: boolean, itemOverlaps: ProgramOverlaps, programs: ProgramItem[]): {
+ overlaps: ProgramOverlaps;
+ channelOverlaps: Record;
+};
+export declare function checkOverlaps(isMultirowsDnd: boolean, isVerticalMode: boolean, dndChannelUuid: {
+ index: number;
+ uuid: string;
+}, itemOverlaps: ProgramOverlaps, programs: ProgramItem[]): {
+ overlaps: ProgramOverlaps;
+ channelOverlaps: Record;
+};
diff --git a/dist/Epg/helpers/time.d.ts b/dist/Epg/helpers/time.d.ts
new file mode 100644
index 0000000..f794f59
--- /dev/null
+++ b/dist/Epg/helpers/time.d.ts
@@ -0,0 +1,33 @@
+import { HoursInDay, HoursInDayDiffTime, Mode } from "./interfaces";
+import { DateTime as DateRangeTime } from "./types";
+declare type DateTime = number | string | Date;
+export declare const getLiveStatus: (since: DateTime, till: DateTime) => boolean;
+export declare const formatTime: (date: DateTime) => string;
+export declare const formatTimeTz: (date: DateTime) => string;
+export declare const roundToMinutes: (date: DateTime) => Date;
+export declare const isYesterday: (since: DateTime, startDate: DateTime) => boolean;
+export declare const isFutureTime: (date: DateTime) => boolean;
+export declare const getTimeRangeDates: (startDate: DateRangeTime, endDate: DateRangeTime) => {
+ startDate: DateRangeTime;
+ endDate: DateRangeTime;
+};
+interface FormatWeekMonthDate {
+ date: string;
+ mode: Mode;
+ isBaseTimeFormat: boolean;
+}
+export declare const getFormattedWeekMonthDate: ({ date, mode, isBaseTimeFormat, }: FormatWeekMonthDate) => string;
+interface NumberOfHoursInDays {
+ startDate: DateRangeTime;
+ customHoursInDays: HoursInDay[];
+}
+export declare const getNumberOfHoursInDays: ({ startDate, customHoursInDays, }: NumberOfHoursInDays) => HoursInDayDiffTime[];
+export declare const getTodayHoursInDays: (hoursInDays: HoursInDayDiffTime[]) => boolean;
+interface HoursInDaysPositionX {
+ hoursInDays: HoursInDayDiffTime[];
+ hourWidth: number;
+ sidebarWidth: number;
+ cb?: (v: boolean) => void;
+}
+export declare const getHoursInDaysPositionX: ({ hoursInDays, hourWidth, sidebarWidth, cb, }: HoursInDaysPositionX) => number;
+export {};
diff --git a/dist/Epg/helpers/timeline.d.ts b/dist/Epg/helpers/timeline.d.ts
new file mode 100644
index 0000000..49ac467
--- /dev/null
+++ b/dist/Epg/helpers/timeline.d.ts
@@ -0,0 +1,21 @@
+import { HoursInDayDiffTime, Mode } from "./interfaces";
+interface TimeSlots {
+ isBaseTimeFormat: boolean;
+ days: string[];
+ hoursInDays: HoursInDayDiffTime[];
+ months: string[];
+ numberOfDays: number;
+ numberOfHoursInDay: number;
+ numberOfMonths: number;
+ offsetStartHoursRange: number;
+ weekDayWidth?: number;
+}
+export declare const generateTimelineSlots: (modeType: Mode["type"], options: TimeSlots) => (string | number)[];
+export declare const generateWeekTimelineSlots: ({ days, numberOfDays, }: Pick) => string[];
+export declare const generateMonthTimelineSlots: ({ months, numberOfMonths, }: Pick) => string[];
+export declare const getTimelineMonthsWidth: ({ months, weekDayWidth, }: Pick) => {
+ width: number;
+ left: number;
+}[];
+export declare const getTimelineHeight: (timelineHeight: number, mode: Mode) => number;
+export {};
diff --git a/dist/Epg/helpers/types.d.ts b/dist/Epg/helpers/types.d.ts
new file mode 100644
index 0000000..8bcab1d
--- /dev/null
+++ b/dist/Epg/helpers/types.d.ts
@@ -0,0 +1,43 @@
+import { Program, Channel, GridDataAttributes } from "./interfaces";
+export declare type Position = {
+ width: number;
+ height: number;
+ top: number;
+ left: number;
+ edgeEnd: number;
+};
+export declare type InitialScrollPositions = Pick, "top" | "left">;
+export declare type ProgramWithPosition = {
+ position: Position;
+ data: Program;
+};
+export declare type ProgramItem = {
+ position: Omit;
+ data: Program;
+};
+export declare type ChannelItem = {
+ isVerticalMode?: boolean;
+ isRTL?: boolean;
+ channel: ChannelWithPosition;
+ onOpenGroupTree?: (data: ChannelWithPosition) => void;
+};
+export declare type ChannelWithPosition = Channel & {
+ position: Pick & Partial>;
+ index: number;
+};
+export declare type DateTime = string | Date;
+export declare type BaseTimeFormat = boolean;
+export declare type DragMouseUp = Pick & Pick & {
+ initialPositionLeft: Position["left"];
+ initialPositionTop: Position["top"];
+};
+export declare type ResizeMouseUp = Pick & Pick & {
+ initialPositionLeft: Position["left"];
+ initialPositionTop: Position["top"];
+ initialWidth: Position["width"];
+ width: Position["width"];
+};
+export declare type GridEvent = (item: {
+ position: Position;
+ channel: ChannelWithPosition;
+}, index?: number | undefined, ataAttributes?: GridDataAttributes) => () => void;
diff --git a/dist/Epg/helpers/variables.d.ts b/dist/Epg/helpers/variables.d.ts
new file mode 100644
index 0000000..ceefa96
--- /dev/null
+++ b/dist/Epg/helpers/variables.d.ts
@@ -0,0 +1,37 @@
+export declare const DAY_WIDTH = 7200;
+export declare const HOURS_IN_DAY = 24;
+export declare const HOUR_IN_MINUTES = 60;
+export declare const SECONDS_IN_MINUTE = 60;
+export declare const TIMELINE_HEIGHT = 60;
+export declare const TIMELINE_HEIGHT_MODERN_STYLE = 80;
+export declare const TIMELINE_WIDTH_VERTICAL = 70;
+export declare const TIMELINE_DIVIDERS = 4;
+export declare const SIDEBAR_WIDTH = 100;
+export declare const ITEM_HEIGHT = 80;
+export declare const ITEM_OVERSCAN = 80;
+export declare const DEBOUNCE_WAIT = 100;
+export declare const DEBOUNCE_WAIT_MAX = 100;
+export declare const LIVE_REFRESH_TIME = 120;
+export declare const THEME_MODE: {
+ DARK: string;
+ LIGHT: string;
+};
+export declare const TIME_FORMAT: {
+ DEFAULT: string;
+ DATE: string;
+ DAY: string;
+ DAY_DATE: string;
+ MONTH: string;
+ DAY_MONTH: string;
+ BASE_DAY_MONTH: string;
+ HOURS_MIN: string;
+ BASE_HOURS_TIME: string;
+ YEAR: string;
+};
+export declare const OVERLAP_MODES: {
+ STACK: string;
+ LAYER: string;
+};
+export declare const TIMEZONE_MODES: {
+ UTC_TO_ZONED_TIME: string;
+};
diff --git a/dist/Epg/hooks/index.d.ts b/dist/Epg/hooks/index.d.ts
new file mode 100644
index 0000000..07b27aa
--- /dev/null
+++ b/dist/Epg/hooks/index.d.ts
@@ -0,0 +1,8 @@
+export * from "./useEpg";
+export * from "./useInterval";
+export * from "./useProgram";
+export * from "./useTimeline";
+export * from "./useLine";
+export * from "./useCurrentTime";
+export * from "./useGrid";
+export * from "./useGridExternalDnD";
diff --git a/dist/Epg/hooks/useAreas.d.ts b/dist/Epg/hooks/useAreas.d.ts
new file mode 100644
index 0000000..78d84b3
--- /dev/null
+++ b/dist/Epg/hooks/useAreas.d.ts
@@ -0,0 +1,34 @@
+///
+import { Area } from "../helpers/interfaces";
+import { DateTime } from "../helpers/types";
+interface UseAreasProps {
+ areas: Area[];
+ hourWidth: number;
+ sidebarWidth: number;
+ height: number;
+ timelineHeight: number;
+ startDate: DateTime;
+ endDate: DateTime;
+}
+export declare function useAreas(props: UseAreasProps): {
+ data: {
+ showArea: boolean;
+ areaFieldStyles: {
+ positionX: number;
+ width: number;
+ height: number;
+ timelineHeight: number;
+ };
+ areaBgStyles: import("react").CSSProperties;
+ startDate: string;
+ endDate?: string | undefined;
+ styles: import("react").CSSProperties;
+ onClick?: (() => void) | undefined;
+ annotations?: {
+ styles: import("react").CSSProperties;
+ textStart?: string | undefined;
+ textEnd?: string | undefined;
+ } | undefined;
+ }[];
+};
+export {};
diff --git a/dist/Epg/hooks/useCurrentTime.d.ts b/dist/Epg/hooks/useCurrentTime.d.ts
new file mode 100644
index 0000000..f172cff
--- /dev/null
+++ b/dist/Epg/hooks/useCurrentTime.d.ts
@@ -0,0 +1,23 @@
+import { BaseTimeFormat } from "../helpers/types";
+import { Mode } from "../helpers";
+interface useCurrentTimeProps {
+ isVerticalMode?: boolean;
+ isBaseTimeFormat?: BaseTimeFormat;
+ mode: Mode;
+ positionX: number;
+ timelineHeight: number;
+ sidebarWidth: number;
+}
+export declare function useCurrentTime({ isVerticalMode, isBaseTimeFormat, mode, positionX, timelineHeight, sidebarWidth, }: useCurrentTimeProps): {
+ time: string;
+ getCurrentTimeStyles: () => {
+ position: {
+ position: string;
+ width: string | number;
+ height: number;
+ top: number;
+ left: number;
+ };
+ };
+};
+export {};
diff --git a/dist/Epg/hooks/useDrag.d.ts b/dist/Epg/hooks/useDrag.d.ts
new file mode 100644
index 0000000..0247369
--- /dev/null
+++ b/dist/Epg/hooks/useDrag.d.ts
@@ -0,0 +1,44 @@
+import { MouseEvent } from "react";
+import { Program } from "../helpers/interfaces";
+import { DragMouseUp, Position } from "../helpers/types";
+interface UseDragProps {
+ isVerticalMode: boolean;
+ isDndEnabled: boolean;
+ isDndMutlirows: boolean;
+ initialPosition: Omit;
+ data: Program;
+ dayWidth: number;
+ itemHeight: number;
+ contentHeight: number;
+ dndSnapX?: number;
+ dndSnapY?: number;
+ elementRef: React.RefObject;
+ mouseUpCb: (props: DragMouseUp) => void;
+ dndMouseUpCb?: (props: DragMouseUp, data: Program) => void;
+}
+export declare function useDrag(props: UseDragProps): {
+ currentPositionX: number;
+ dndEvents: {
+ isDragging: boolean;
+ };
+} | {
+ dndEvents: {
+ onTouchStart: (e: MouseEvent | React.TouchEvent) => void;
+ onTouchEnd: () => Promise;
+ onMouseDown?: undefined;
+ onMouseUp?: undefined;
+ isDragging: boolean;
+ ref: import("react").RefObject;
+ onClick: (e: MouseEvent) => void;
+ } | {
+ onMouseDown: (e: MouseEvent | React.TouchEvent) => void;
+ onMouseUp: () => Promise;
+ onTouchStart?: undefined;
+ onTouchEnd?: undefined;
+ isDragging: boolean;
+ ref: import("react").RefObject;
+ onClick: (e: MouseEvent) => void;
+ };
+ currentPositionX: number;
+};
+export {};
diff --git a/dist/Epg/hooks/useEpg.d.ts b/dist/Epg/hooks/useEpg.d.ts
new file mode 100644
index 0000000..94b6da6
--- /dev/null
+++ b/dist/Epg/hooks/useEpg.d.ts
@@ -0,0 +1,184 @@
+import React from "react";
+import { Area, ChannelWithOmittedUuid, DragAndDrop, Grid, HoursInDay, Mode, Overlap, ProgramOverlaps, ProgramWithOmittedUuid, Snap, Theme, Timezone } from "../helpers/interfaces";
+import { DateTime, BaseTimeFormat, Position, InitialScrollPositions, ProgramItem, DragMouseUp, ResizeMouseUp, ChannelWithPosition } from "../helpers/types";
+interface useEpgProps {
+ isVerticalMode?: boolean;
+ isRTL?: boolean;
+ isBaseTimeFormat?: BaseTimeFormat;
+ isSidebar?: boolean;
+ isTimeline?: boolean;
+ isLine?: boolean;
+ isCurrentTime?: boolean;
+ isInitialScrollToNow?: boolean;
+ isResize?: boolean;
+ initialScrollPositions?: InitialScrollPositions;
+ channels: ChannelWithOmittedUuid[];
+ epg: ProgramWithOmittedUuid[];
+ width?: number;
+ height?: number;
+ startDate?: DateTime;
+ endDate?: DateTime;
+ liveRefreshTime?: number;
+ mode?: Mode;
+ timezone?: Timezone;
+ overlap?: Overlap;
+ timelineDividers?: number;
+ snap?: Snap;
+ grid?: Grid;
+ dnd?: DragAndDrop;
+ areas?: Area[];
+ hoursInDays?: HoursInDay[];
+ theme?: Theme;
+ globalStyles?: string;
+ dayWidth?: number;
+ sidebarWidth?: number;
+ timelineHeight?: number;
+ itemHeight?: number;
+ itemOverscan?: number;
+ channelMapKey?: string;
+ programChannelMapKey?: string;
+}
+export declare function useEpg(props: useEpgProps): {
+ isLayoutBottom: (offset?: number) => boolean;
+ isLayoutRight: (offset?: number) => boolean;
+ getEpgProps: () => {
+ isVerticalMode: boolean;
+ isRTL: boolean;
+ isSidebar: boolean;
+ isLine: boolean;
+ isTimeline: boolean;
+ width: number | undefined;
+ height: number | undefined;
+ sidebarWidth: number;
+ timelineHeight: number;
+ ref: React.RefObject;
+ theme: Theme;
+ globalStyles: string | undefined;
+ };
+ getLayoutProps: () => {
+ ref: React.RefObject;
+ numberOfMonths: number;
+ numberOfHoursInDay: number;
+ monthWidth: number;
+ offsetStartHoursRange: number;
+ numberOfDays: number;
+ days: string[];
+ months: string[];
+ isVerticalMode: boolean;
+ isRTL: boolean;
+ isBaseTimeFormat: boolean;
+ isSidebar: boolean;
+ isTimeline: boolean;
+ isLine: boolean;
+ isCurrentTime: boolean;
+ isProgramVisible: (position: Position, overlapsCount: number) => boolean;
+ isChannelVisible: (position: Pick) => boolean;
+ isTimelineVisible: (position: Pick) => boolean;
+ isToday: boolean;
+ isResize: boolean;
+ programs: {
+ position: {
+ width: number;
+ height: number;
+ top: number;
+ left: number;
+ edgeEnd: number;
+ };
+ data: {
+ since: string;
+ till: string;
+ channelUuid: string;
+ id: string;
+ index: number;
+ title: string;
+ description: string;
+ image: string;
+ channelIndex: number;
+ channelPosition: Pick;
+ fixedVisibility?: boolean | undefined;
+ parentChannelUuid?: string | undefined;
+ };
+ }[];
+ programOverlaps: ProgramOverlaps;
+ channels: ChannelWithPosition[];
+ channelOverlapsCount: Record;
+ layerOverlapLevel: number;
+ snap: Snap | undefined;
+ grid: Grid;
+ gridItems: {
+ position: {
+ top: number;
+ left: number;
+ width: number;
+ height: number;
+ edgeEnd: number;
+ };
+ channel: ChannelWithPosition;
+ }[];
+ dnd: DragAndDrop;
+ startDate: DateTime;
+ endDate: DateTime;
+ hoursInDays: import("../helpers").HoursInDayDiffTime[];
+ liveRefreshTime: number;
+ scrollY: number;
+ dayWidth: number;
+ hourWidth: number;
+ sidebarWidth: number;
+ timelineHeight: number;
+ itemHeight: number;
+ currentDate: string;
+ mode: {
+ type: "day" | "week" | "month";
+ style?: "default" | "modern" | undefined;
+ };
+ timezone: {
+ enabled: boolean;
+ zone: string;
+ mode: string;
+ };
+ timelineDividers: number;
+ overlapMode: "stack" | "layer";
+ overlap: {
+ enabled: boolean;
+ mode: "stack" | "layer";
+ layerOverlapLevel?: number | undefined;
+ };
+ areas: Area[];
+ openChannelGroupTree: (data: ChannelWithPosition) => void;
+ onScroll: (e: React.UIEvent & {
+ target: Element;
+ }) => void;
+ dragMouseUp: (props: DragMouseUp) => Promise;
+ resizeMouseUp: (props: ResizeMouseUp) => void;
+ };
+ getLayoutData: (events: ProgramItem[]) => {
+ [x: string]: any;
+ channelUuid: string;
+ id: string;
+ index: number;
+ title: string;
+ description: string;
+ since: string | number | Date;
+ till: string | number | Date;
+ image: string;
+ channelIndex: number;
+ channelPosition: Pick;
+ fixedVisibility?: boolean | undefined;
+ parentChannelUuid?: string | undefined;
+ }[];
+ getDropItemData: (data: ProgramWithOmittedUuid) => {
+ since: string;
+ till: string;
+ channelUuid?: string | undefined;
+ id: string;
+ title: string;
+ image: string;
+ };
+ onScrollToNow: () => void;
+ onScrollTop: (value?: number) => void;
+ onScrollLeft: (value?: number) => void;
+ onScrollRight: (value?: number) => void;
+ scrollY: number;
+ scrollX: number;
+};
+export {};
diff --git a/dist/Epg/hooks/useGrid.d.ts b/dist/Epg/hooks/useGrid.d.ts
new file mode 100644
index 0000000..e83c672
--- /dev/null
+++ b/dist/Epg/hooks/useGrid.d.ts
@@ -0,0 +1,31 @@
+import { Mode, Grid as IGrid, HoursInDayDiffTime } from "../helpers/interfaces";
+import { BaseTimeFormat, ChannelWithPosition, Position } from "../helpers/types";
+interface UseGridProps {
+ isVerticalMode: boolean;
+ isBaseTimeFormat: BaseTimeFormat;
+ hourWidth: number;
+ dayWidth: number;
+ days: string[];
+ hoursInDays: HoursInDayDiffTime[];
+ months: string[];
+ numberOfDays: number;
+ numberOfHoursInDay: number;
+ numberOfMonths: number;
+ offsetStartHoursRange: number;
+ grid: IGrid;
+ mode: Mode;
+ sidebarWidth: number;
+ timelineHeight: number;
+ timelineDividers: number;
+}
+export declare function useGrid({ mode, grid, timelineHeight, sidebarWidth, hourWidth, dayWidth, ...rest }: UseGridProps): {
+ onItemClick: (item: {
+ position: Position;
+ channel: ChannelWithPosition;
+ }, index?: number | undefined) => () => void;
+ onItemDrop: (item: {
+ position: Position;
+ channel: ChannelWithPosition;
+ }, index?: number | undefined, dataAttributes?: Record | undefined) => () => void;
+};
+export {};
diff --git a/dist/Epg/hooks/useGridExternalDnD.d.ts b/dist/Epg/hooks/useGridExternalDnD.d.ts
new file mode 100644
index 0000000..d042821
--- /dev/null
+++ b/dist/Epg/hooks/useGridExternalDnD.d.ts
@@ -0,0 +1,16 @@
+import React from "react";
+import { ChannelWithPosition, GridEvent, Position } from "../helpers/types";
+interface useGridCellItemProps {
+ onItemDrop?: GridEvent;
+}
+export declare function useGridExternalDnD({ onItemDrop }?: useGridCellItemProps): {
+ isDragOver: boolean;
+ dropAreaRef: React.MutableRefObject;
+ onDrop: (item: {
+ position: Position;
+ channel: ChannelWithPosition;
+ }, index: number) => (e: React.DragEvent) => void;
+ onDragEnter: (e: React.DragEvent) => void;
+ onDragLeave: (e: React.DragEvent) => void;
+};
+export {};
diff --git a/dist/Epg/hooks/useInterval.d.ts b/dist/Epg/hooks/useInterval.d.ts
new file mode 100644
index 0000000..9567582
--- /dev/null
+++ b/dist/Epg/hooks/useInterval.d.ts
@@ -0,0 +1 @@
+export declare function useInterval(callback: () => void, delay: number | null): void;
diff --git a/dist/Epg/hooks/useIsTouchDevice.d.ts b/dist/Epg/hooks/useIsTouchDevice.d.ts
new file mode 100644
index 0000000..41976c7
--- /dev/null
+++ b/dist/Epg/hooks/useIsTouchDevice.d.ts
@@ -0,0 +1 @@
+export declare function useIsTouchDevice(): boolean;
diff --git a/dist/Epg/hooks/useLayout.d.ts b/dist/Epg/hooks/useLayout.d.ts
new file mode 100644
index 0000000..7fe1892
--- /dev/null
+++ b/dist/Epg/hooks/useLayout.d.ts
@@ -0,0 +1,36 @@
+import React from "react";
+import { HoursInDayDiffTime } from "../helpers/interfaces";
+import { DateTime, InitialScrollPositions } from "../helpers/types";
+interface useLayoutProps {
+ isVerticalMode: boolean;
+ isToday: boolean;
+ isInitialScrollToNow: boolean;
+ initialScrollPositions: InitialScrollPositions;
+ height?: number;
+ width?: number;
+ hourWidth: number;
+ sidebarWidth: number;
+ channelsNumber: number;
+ startDate: DateTime;
+ endDate: DateTime;
+ currentDate: string;
+ hoursInDays: HoursInDayDiffTime[];
+}
+export declare function useLayout({ isVerticalMode, isToday, isInitialScrollToNow, initialScrollPositions, height, width, channelsNumber, startDate, endDate, hourWidth, sidebarWidth, hoursInDays, }: useLayoutProps): {
+ containerRef: React.RefObject;
+ scrollBoxRef: React.RefObject;
+ scrollX: number;
+ scrollY: number;
+ layoutWidth: number;
+ layoutHeight: number;
+ isLayoutBottom: (offset?: number) => boolean;
+ isLayoutRight: (offset?: number) => boolean;
+ onScroll: (e: React.UIEvent & {
+ target: Element;
+ }) => void;
+ onScrollToNow: () => void;
+ onScrollTop: (value?: number) => void;
+ onScrollLeft: (value?: number) => void;
+ onScrollRight: (value?: number) => void;
+};
+export {};
diff --git a/dist/Epg/hooks/useLine.d.ts b/dist/Epg/hooks/useLine.d.ts
new file mode 100644
index 0000000..a82fbbd
--- /dev/null
+++ b/dist/Epg/hooks/useLine.d.ts
@@ -0,0 +1,17 @@
+import { HoursInDayDiffTime, Timezone } from "../helpers/interfaces";
+import { DateTime } from "../helpers/types";
+interface useLineProps {
+ timezone: Timezone;
+ startDate: DateTime;
+ endDate: DateTime;
+ dayWidth: number;
+ hourWidth: number;
+ sidebarWidth: number;
+ hoursInDays: HoursInDayDiffTime[];
+ liveRefreshTime: number;
+}
+export declare function useLine({ timezone, startDate, endDate, hoursInDays, dayWidth, hourWidth, sidebarWidth, liveRefreshTime, }: useLineProps): {
+ showLine: boolean;
+ positionX: number;
+};
+export {};
diff --git a/dist/Epg/hooks/useProgram.d.ts b/dist/Epg/hooks/useProgram.d.ts
new file mode 100644
index 0000000..ec771b4
--- /dev/null
+++ b/dist/Epg/hooks/useProgram.d.ts
@@ -0,0 +1,139 @@
+import React from "react";
+import { DragAndDrop, Mode, Snap } from "../helpers/interfaces";
+import { ProgramItem, BaseTimeFormat, DragMouseUp, ResizeMouseUp, DateTime } from "../helpers/types";
+interface useProgramProps {
+ isVerticalMode?: boolean;
+ isRTL?: boolean;
+ isBaseTimeFormat: BaseTimeFormat;
+ isResize?: boolean;
+ startDate: DateTime;
+ contentHeight: number;
+ dayWidth: number;
+ hourWidth: number;
+ program: T;
+ liveRefreshTime: number;
+ minWidth?: number;
+ itemHeight: number;
+ snap?: Snap;
+ mode: Mode;
+ dnd: DragAndDrop;
+ dragMouseUp: (data: DragMouseUp) => void;
+ resizeMouseUp: (data: ResizeMouseUp) => void;
+}
+export declare function useProgram({ isVerticalMode, isRTL, isResize, isBaseTimeFormat, startDate, contentHeight, dayWidth, itemHeight, hourWidth, minWidth, program, liveRefreshTime, mode, snap, dnd, dragMouseUp, resizeMouseUp, }: useProgramProps): {
+ isMouseEvent: boolean;
+ isLive: boolean;
+ isMinWidth: boolean;
+ isRTL: boolean;
+ resizeEvents: {
+ isResizing: boolean;
+ resources: {
+ ref: React.RefObject;
+ isResizing: boolean;
+ };
+ eventsLeft: {
+ onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
+ onTouchEnd: () => void;
+ onMouseDown?: undefined;
+ onMouseUp?: undefined;
+ isResize: true;
+ isVerticalMode: boolean;
+ left: boolean;
+ onClick: (e: React.MouseEvent) => void;
+ } | {
+ onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
+ onMouseUp: () => void;
+ onTouchStart?: undefined;
+ onTouchEnd?: undefined;
+ isResize: true;
+ isVerticalMode: boolean;
+ left: boolean;
+ onClick: (e: React.MouseEvent) => void;
+ };
+ eventsRight: {
+ onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
+ onTouchEnd: () => void;
+ onMouseDown?: undefined;
+ onMouseUp?: undefined;
+ isResize: true;
+ isVerticalMode: boolean;
+ onClick: (e: React.MouseEvent) => void;
+ } | {
+ onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
+ onMouseUp: () => void;
+ onTouchStart?: undefined;
+ onTouchEnd?: undefined;
+ isResize: true;
+ isVerticalMode: boolean;
+ onClick: (e: React.MouseEvent) => void;
+ };
+ } | {
+ isResizing: boolean;
+ resources: {
+ ref?: undefined;
+ isResizing?: undefined;
+ };
+ eventsLeft: {};
+ eventsRight: {};
+ };
+ formatTime: (date: string | number | Date, formatType?: string) => string;
+ set12HoursTimeFormat: () => string;
+ getMouseEvents: () => {
+ isDragging: boolean;
+ ref: React.RefObject;
+ isResizing: boolean;
+ } | {
+ onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
+ onTouchEnd: () => Promise;
+ onMouseDown?: undefined;
+ onMouseUp?: undefined;
+ isDragging: boolean;
+ ref: React.RefObject;
+ onClick: (e: React.MouseEvent) => void;
+ isResizing: boolean;
+ } | {
+ onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
+ onMouseUp: () => Promise;
+ onTouchStart?: undefined;
+ onTouchEnd?: undefined;
+ isDragging: boolean;
+ ref: React.RefObject;
+ onClick: (e: React.MouseEvent) => void;
+ isResizing: boolean;
+ } | {
+ isDragging: boolean;
+ ref?: undefined;
+ isResizing?: undefined;
+ } | {
+ onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
+ onTouchEnd: () => Promise;
+ onMouseDown?: undefined;
+ onMouseUp?: undefined;
+ isDragging: boolean;
+ ref: React.RefObject;
+ onClick: (e: React.MouseEvent) => void;
+ isResizing?: undefined;
+ } | {
+ onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
+ onMouseUp: () => Promise;
+ onTouchStart?: undefined;
+ onTouchEnd?: undefined;
+ isDragging: boolean;
+ ref: React.RefObject;
+ onClick: (e: React.MouseEvent) => void;
+ isResizing?: undefined;
+ };
+ getMouseEventTempTime: () => {
+ since: string;
+ till: string;
+ };
+ getRTLSinceTime: (since: string | number | Date) => string | number | Date;
+ getRTLTillTime: (till: string | number | Date) => string | number | Date;
+ styles: {
+ width: number;
+ position: {
+ [x: string]: any;
+ };
+ };
+};
+export {};
diff --git a/dist/Epg/hooks/useResize.d.ts b/dist/Epg/hooks/useResize.d.ts
new file mode 100644
index 0000000..ac69661
--- /dev/null
+++ b/dist/Epg/hooks/useResize.d.ts
@@ -0,0 +1,76 @@
+import React from "react";
+import { Program } from "../helpers/interfaces";
+import { Position, ResizeMouseUp } from "../helpers/types";
+interface UseResizeProps {
+ isVerticalMode: boolean;
+ isResize: boolean;
+ initialPosition: Omit;
+ data: Program;
+ dayWidth: number;
+ contentHeight: number;
+ snapX?: number;
+ elementRef: React.RefObject;
+ mouseUpCb: (props: ResizeMouseUp) => void;
+}
+export declare function useResize({ isResize, isVerticalMode, data, dayWidth, contentHeight, initialPosition, snapX, elementRef, mouseUpCb, }: UseResizeProps): {
+ width: number;
+ initialWidth: number;
+ currentPositionX: number;
+ resizeEvents: {
+ isResizing: boolean;
+ resources: {
+ ref: React.RefObject;
+ isResizing: boolean;
+ };
+ eventsLeft: {
+ onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
+ onTouchEnd: () => void;
+ onMouseDown?: undefined;
+ onMouseUp?: undefined;
+ isResize: true;
+ isVerticalMode: boolean;
+ left: boolean;
+ onClick: (e: React.MouseEvent) => void;
+ } | {
+ onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
+ onMouseUp: () => void;
+ onTouchStart?: undefined;
+ onTouchEnd?: undefined;
+ isResize: true;
+ isVerticalMode: boolean;
+ left: boolean;
+ onClick: (e: React.MouseEvent) => void;
+ };
+ eventsRight: {
+ onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
+ onTouchEnd: () => void;
+ onMouseDown?: undefined;
+ onMouseUp?: undefined;
+ isResize: true;
+ isVerticalMode: boolean;
+ onClick: (e: React.MouseEvent) => void;
+ } | {
+ onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
+ onMouseUp: () => void;
+ onTouchStart?: undefined;
+ onTouchEnd?: undefined;
+ isResize: true;
+ isVerticalMode: boolean;
+ onClick: (e: React.MouseEvent) => void;
+ };
+ };
+} | {
+ currentPositionX: number;
+ width: number;
+ resizeEvents: {
+ isResizing: boolean;
+ resources: {
+ ref?: undefined;
+ isResizing?: undefined;
+ };
+ eventsLeft: {};
+ eventsRight: {};
+ };
+ initialWidth?: undefined;
+};
+export {};
diff --git a/dist/Epg/hooks/useTimeline.d.ts b/dist/Epg/hooks/useTimeline.d.ts
new file mode 100644
index 0000000..2612436
--- /dev/null
+++ b/dist/Epg/hooks/useTimeline.d.ts
@@ -0,0 +1,48 @@
+///
+import { Timeline as ITimeline } from "../helpers/interfaces";
+declare type UseTimelineProps = ITimeline;
+export declare function useTimeline(props: UseTimelineProps): {
+ isWeekMonthMode: boolean;
+ isMonthMode: boolean;
+ isTodayInHoursInDays: boolean;
+ areHoursInDays: boolean;
+ time: (string | number)[];
+ weekDayWidth: number;
+ monthsWidth: {
+ width: number;
+ left: number;
+ }[];
+ timelineHeight: number;
+ dividers: any[];
+ timelineDividers: number;
+ formatWeekMonthDate: (date: string) => string;
+ getTime: (index: number | string) => {
+ time: string;
+ isNewDay: boolean;
+ };
+ getDayMonthName: (date: string) => string;
+ getTimelineProps: () => {
+ isSidebar: boolean;
+ isVerticalMode: boolean | undefined;
+ dayWidth: number;
+ sidebarWidth: number;
+ timelineHeight: number;
+ };
+ getCurrentTimeProps: () => {
+ isBaseTimeFormat: boolean;
+ isVerticalMode: boolean | undefined;
+ isRTL: boolean | undefined;
+ timezone: import("../helpers").Timezone;
+ mode: import("../helpers").Mode;
+ startDate: import("../helpers/types").DateTime;
+ endDate: import("../helpers/types").DateTime;
+ hoursInDays: import("../helpers").HoursInDayDiffTime[];
+ dayWidth: number;
+ timelineHeight: number;
+ hourWidth: number;
+ sidebarWidth: number;
+ liveRefreshTime: number;
+ renderCurrentTime: ((v: import("../helpers").CurrentTimeIndicator) => import("react").ReactElement import("react").ReactElement | null) | (new (props: any) => import("react").Component)>) | undefined;
+ };
+};
+export {};
diff --git a/dist/Epg/index.d.ts b/dist/Epg/index.d.ts
new file mode 100644
index 0000000..bdcb2a5
--- /dev/null
+++ b/dist/Epg/index.d.ts
@@ -0,0 +1,220 @@
+///
+import { Line as ILine, Theme as ITheme, Program as IProgram, Timeline as ITimeline, CurrentTimeIndicator as ICurrentTimeIndicator, Mode, GridItemProps as IGridItemProps, GridDividerItemProps as IGridDividerItemProps, DragAndDrop, Snap, GridCell as IGridCell } from "./helpers/interfaces";
+import { ProgramItem as ProgramItemType, ChannelItem as IChannelItem, ChannelWithPosition, BaseTimeFormat as BaseTimeFormatType, DragMouseUp, ResizeMouseUp, DateTime } from "./helpers/types";
+export declare type Channel = ChannelWithPosition;
+export declare type ChannelItem = IChannelItem;
+export declare type CurrentTimeIndicator = ICurrentTimeIndicator;
+export declare type Line = ILine;
+export declare type Program = IProgram;
+export declare type ProgramItem = {
+ program: ProgramItemType;
+ isRTL: boolean;
+ isVerticalMode: boolean;
+ isBaseTimeFormat: BaseTimeFormatType;
+ liveRefreshTime: number;
+ mode: Mode;
+ startDate: DateTime;
+ snap?: Snap;
+ dnd: DragAndDrop;
+ dayWidth: number;
+ itemHeight: number;
+ contentHeight: number;
+ hourWidth: number;
+ dragMouseUp: (data: DragMouseUp) => void;
+ resizeMouseUp: (data: ResizeMouseUp) => void;
+};
+export declare type GridItemProps = IGridItemProps;
+export declare type GridDividerItemProps = IGridDividerItemProps;
+export declare type Timeline = ITimeline;
+export declare type Theme = ITheme;
+export declare type GridCell = Omit;
+export { Layout, CurrentTime } from "./components";
+export { Epg } from "./Epg";
+export { useEpg, useProgram, useTimeline, useGridExternalDnD } from "./hooks";
+declare const ChannelBox: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ top: number;
+ height: number;
+ groupTree?: boolean | undefined;
+ theme?: ITheme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, ChannelLogo: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+}, import("react").DetailedHTMLProps, HTMLImageElement>, {}>;
+declare const CurrentTimeBox: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ top: number;
+ left: number;
+ width: string | number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, CurrentTimeContent: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isBaseTimeFormat?: boolean | undefined;
+ isRTL?: boolean | undefined;
+ isNewDay?: boolean | undefined;
+ theme?: ITheme | undefined;
+}, import("react").DetailedHTMLProps, HTMLSpanElement>, {}>;
+declare const GridItem: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isDayMode: boolean;
+ isHoverHighlight: boolean;
+ isDragOver?: boolean | undefined;
+ isItemClickable: boolean;
+ top: number;
+ left: number;
+ height: number;
+ width: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, GridDivider: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isHoverHighlight: boolean;
+ isDragOver?: boolean | undefined;
+ isItemClickable?: boolean | undefined;
+ left: number;
+ width: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+declare const ProgramBox: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isResizing?: boolean | undefined;
+ isDragging?: boolean | undefined;
+ width: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, ProgramContent: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isLive: boolean;
+ width: number;
+ theme?: ITheme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, ProgramFlex: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, ProgramStack: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isRTL?: boolean | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, ProgramTitle: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ theme?: ITheme | undefined;
+}, import("react").DetailedHTMLProps, HTMLParagraphElement>, {}>, ProgramText: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ theme?: ITheme | undefined;
+}, import("react").DetailedHTMLProps, HTMLSpanElement>, {}>, ProgramImage: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+}, import("react").DetailedHTMLProps, HTMLImageElement>, {}>, ProgramResizeHandle: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isResize?: boolean | undefined;
+ isVerticalMode?: boolean | undefined;
+ left?: boolean | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+declare const TimelineWrapper: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isSidebar: boolean;
+ dayWidth: number;
+ sidebarWidth: number;
+ timelineHeight: number;
+ theme?: ITheme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, TimelineBox: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isWeekMonthMode?: boolean | undefined;
+ isToday: boolean;
+ isCurrentTime: boolean;
+ isTodayInHoursInDays?: boolean | undefined;
+ areHoursInDays?: boolean | undefined;
+ width: number;
+ left: number;
+ timelineHeight: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, TimelineTime: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isBaseTimeFormat?: boolean | undefined;
+ isWeekMonthMode?: boolean | undefined;
+ isRTL?: boolean | undefined;
+ isNewDay?: boolean | undefined;
+ theme?: ITheme | undefined;
+}, import("react").DetailedHTMLProps, HTMLSpanElement>, {}>, TimelineDividers: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>, TimelineWeekMonthBox: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isWeekMonthMode?: boolean | undefined;
+ isToday: boolean;
+ isCurrentTime: boolean;
+ isTodayInHoursInDays?: boolean | undefined;
+ areHoursInDays?: boolean | undefined;
+ width: number;
+ left: number;
+ timelineHeight: number;
+} & import("react").ClassAttributes & import("react").HTMLAttributes & {
+ children?: import("react").ReactNode;
+} & {
+ theme?: import("@emotion/react").Theme | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isWeekMonthMode?: boolean | undefined;
+ isToday: boolean;
+ isCurrentTime: boolean;
+ isTodayInHoursInDays?: boolean | undefined;
+ areHoursInDays?: boolean | undefined;
+ width: number;
+ left: number;
+ timelineHeight: number;
+ styleType?: "default" | "modern" | undefined;
+}, {}, {}>, TimelineWeekMonthDate: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isRTL?: boolean | undefined;
+ styleType?: "default" | "modern" | undefined;
+ theme?: ITheme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export { ChannelBox, ChannelLogo, CurrentTimeBox, CurrentTimeContent, ProgramBox, ProgramContent, ProgramFlex, ProgramStack, ProgramTitle, ProgramText, ProgramImage, ProgramResizeHandle, TimelineWrapper, TimelineBox, TimelineWeekMonthBox, TimelineWeekMonthDate, TimelineTime, TimelineDividers, GridItem, GridDivider, };
+export declare const TimelineDivider: import("@emotion/styled").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isNewDay?: boolean | undefined;
+ theme?: ITheme | undefined;
+ width: number;
+ left: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
diff --git a/dist/Epg/styles/Area.styles.d.ts b/dist/Epg/styles/Area.styles.d.ts
new file mode 100644
index 0000000..4631b90
--- /dev/null
+++ b/dist/Epg/styles/Area.styles.d.ts
@@ -0,0 +1,27 @@
+///
+import { Theme } from "../helpers";
+export declare const AreaFiled: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isClickable?: boolean | undefined;
+ positionX: number;
+ height: number;
+ width: number;
+ timelineHeight: number;
+ theme?: Theme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const AreaBg: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const AreaAnnotation: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode: boolean;
+ isLeft?: boolean | undefined;
+ width: number;
+ timelineHeight: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
diff --git a/dist/Epg/styles/Channel.styles.d.ts b/dist/Epg/styles/Channel.styles.d.ts
new file mode 100644
index 0000000..ef514c7
--- /dev/null
+++ b/dist/Epg/styles/Channel.styles.d.ts
@@ -0,0 +1,16 @@
+///
+import { Theme } from "../helpers";
+export declare const ChannelWrapper: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ top: number;
+ height: number;
+ groupTree?: boolean | undefined;
+ theme?: Theme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const ChannelLogo: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+}, import("react").DetailedHTMLProps, HTMLImageElement>, {}>;
diff --git a/dist/Epg/styles/Channels.styles.d.ts b/dist/Epg/styles/Channels.styles.d.ts
new file mode 100644
index 0000000..21e3f40
--- /dev/null
+++ b/dist/Epg/styles/Channels.styles.d.ts
@@ -0,0 +1,15 @@
+///
+import { Theme } from "../helpers";
+export declare const Box: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isTimeline: boolean;
+ isRTL: boolean;
+ sidebarWidth: number;
+ timelineHeight: number;
+ contentHeight: number;
+ bottom: number;
+ theme?: Theme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
diff --git a/dist/Epg/styles/CurrentTime.styles.d.ts b/dist/Epg/styles/CurrentTime.styles.d.ts
new file mode 100644
index 0000000..5e4e1f5
--- /dev/null
+++ b/dist/Epg/styles/CurrentTime.styles.d.ts
@@ -0,0 +1,28 @@
+///
+import { Theme } from "../helpers";
+export declare const boxStyles: ({ width }?: {
+ width?: string | number | undefined;
+}) => {
+ position: string;
+ top: number;
+ width: string | number;
+ height: number;
+};
+export declare const CurrentTimeBox: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ top: number;
+ left: number;
+ width: number | string;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const CurrentTimeContent: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isBaseTimeFormat?: boolean | undefined;
+ isRTL?: boolean | undefined;
+ isNewDay?: boolean | undefined;
+ theme?: Theme | undefined;
+}, import("react").DetailedHTMLProps, HTMLSpanElement>, {}>;
diff --git a/dist/Epg/styles/Epg.styles.d.ts b/dist/Epg/styles/Epg.styles.d.ts
new file mode 100644
index 0000000..a0afe81
--- /dev/null
+++ b/dist/Epg/styles/Epg.styles.d.ts
@@ -0,0 +1,54 @@
+///
+import { Theme } from "../helpers";
+export declare const Container: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ height?: number | undefined;
+ width?: number | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const Wrapper: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const ScrollBox: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ theme?: Theme | undefined;
+ isRTL?: boolean | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const Box: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isRTL?: boolean | undefined;
+ left?: number | undefined;
+ top?: number | undefined;
+ theme?: Theme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode: boolean;
+ isSidebar: boolean;
+ isTimeline: boolean;
+ theme?: Theme | undefined;
+ dayWidth: number;
+ contentHeight: number;
+ sidebarWidth: number;
+ timelineHeight: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const LayoutBg: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode: boolean;
+ isTimeline: boolean;
+ isSidebar: boolean;
+ dayWidth: number;
+ contentHeight: number;
+ timelineHeight: number;
+ sidebarWidth: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
diff --git a/dist/Epg/styles/Grid.styles.d.ts b/dist/Epg/styles/Grid.styles.d.ts
new file mode 100644
index 0000000..9d3e6e5
--- /dev/null
+++ b/dist/Epg/styles/Grid.styles.d.ts
@@ -0,0 +1,39 @@
+///
+export declare const GridContainer: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const GridWrapper: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode: boolean;
+ isSidebar: boolean;
+ isTimeline: boolean;
+ sidebarWidth: number;
+ timelineHeight: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const GridItem: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isDayMode: boolean;
+ isHoverHighlight: boolean;
+ isDragOver?: boolean | undefined;
+ isItemClickable: boolean;
+ top: number;
+ left: number;
+ height: number;
+ width: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const GridDivider: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode?: boolean | undefined;
+ isHoverHighlight: boolean;
+ isDragOver?: boolean | undefined;
+ isItemClickable?: boolean | undefined;
+ left: number;
+ width: number;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
diff --git a/dist/Epg/styles/Line.styles.d.ts b/dist/Epg/styles/Line.styles.d.ts
new file mode 100644
index 0000000..66e5c14
--- /dev/null
+++ b/dist/Epg/styles/Line.styles.d.ts
@@ -0,0 +1,18 @@
+///
+import { Layers, Theme } from "../helpers";
+export declare const lineStyles: {
+ position: string;
+ top: number;
+ width: number;
+};
+export declare const LineBox: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ isVerticalMode: boolean;
+ isTimeline: boolean;
+ height: number;
+ left: number;
+ zIndex: Layers;
+ theme?: Theme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
diff --git a/dist/Epg/styles/Loader.styles.d.ts b/dist/Epg/styles/Loader.styles.d.ts
new file mode 100644
index 0000000..e80c58a
--- /dev/null
+++ b/dist/Epg/styles/Loader.styles.d.ts
@@ -0,0 +1,25 @@
+///
+import { Theme } from "../helpers";
+export declare const Box: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ theme?: Theme | undefined;
+}, import("react").DetailedHTMLProps, HTMLDivElement>, {}>;
+export declare const Shape: import("@emotion/styled/macro").StyledComponent<{
+ theme?: import("@emotion/react").Theme | undefined;
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass | import("react").FunctionComponent | undefined;
+} & {
+ width: number;
+ color: "teal" | "purple" | "pink";
+ marginRight?: number | undefined;
+ transition: {
+ duration: number;
+ ease?: string;
+ delay?: number;
+ };
+ animate: {
+ right: string[];
+ };
+ theme?: Theme | undefined;
+}, import("react").DetailedHTMLProps