@tangible/ui 0.0.1

package/icons/player/index.d.ts

@@ -0,0 +1,55 @@
+import type { FC, SVGProps } from 'react';
+
+type IconComponent = FC<SVGProps<SVGSVGElement>>;
+
+export declare const CaptionsFill: IconComponent;
+export declare const CaptionsOutline: IconComponent;
+export declare const Next: IconComponent;
+export declare const Pause: IconComponent;
+export declare const PictureInPicture: IconComponent;
+export declare const Play: IconComponent;
+export declare const Playlist: IconComponent;
+export declare const Previous: IconComponent;
+export declare const RepeatOne: IconComponent;
+export declare const Repeat: IconComponent;
+export declare const Shuffle: IconComponent;
+export declare const SkipBackwards: IconComponent;
+export declare const SkipForward: IconComponent;
+export declare const Stop: IconComponent;
+export declare const TranscriptFill: IconComponent;
+export declare const TranscriptOutline: IconComponent;
+export declare const ViewDefault: IconComponent;
+export declare const ViewExpanded: IconComponent;
+export declare const ViewFull: IconComponent;
+export declare const VolumeBarH: IconComponent;
+export declare const VolumeBarV: IconComponent;
+export declare const VolumeHigh: IconComponent;
+export declare const VolumeLow: IconComponent;
+export declare const VolumeMute: IconComponent;
+
+export declare const playerIcons: {
+  'captions-fill': IconComponent;
+  'captions-outline': IconComponent;
+  'next': IconComponent;
+  'pause': IconComponent;
+  'picture-in-picture': IconComponent;
+  'play': IconComponent;
+  'playlist': IconComponent;
+  'previous': IconComponent;
+  'repeat-one': IconComponent;
+  'repeat': IconComponent;
+  'shuffle': IconComponent;
+  'skip-backwards': IconComponent;
+  'skip-forward': IconComponent;
+  'stop': IconComponent;
+  'transcript-fill': IconComponent;
+  'transcript-outline': IconComponent;
+  'view-default': IconComponent;
+  'view-expanded': IconComponent;
+  'view-full': IconComponent;
+  'volume-bar-h': IconComponent;
+  'volume-bar-v': IconComponent;
+  'volume-high': IconComponent;
+  'volume-low': IconComponent;
+  'volume-mute': IconComponent;
+};

package/icons/player/index.js

@@ -0,0 +1,268 @@
+import { createElement as _c } from "react";
+
+export function CaptionsFill(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M18 4a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9.554a2 2 0 0 0-1.029.285L4 20V6a2 2 0 0 1 2-2zm-9 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2m4-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0m2 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2",clipRule:"evenodd"}));
+}
+
+export function CaptionsOutline(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), [_c("path", {d:"M9 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M13 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0M15 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2"}), _c("path", {fillRule:"evenodd",d:"M6 4a2 2 0 0 0-2 2v14l4.525-2.715A2 2 0 0 1 9.554 17H18a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm12 1.5H6a.5.5 0 0 0-.5.5v11.35L7.753 16a3.5 3.5 0 0 1 1.801-.499H18a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5",clipRule:"evenodd"})]);
+}
+
+export function Next(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M19 4h-1.5v16H19zM15.054 12.774a1 1 0 0 0 0-1.548l-8.42-6.89A1 1 0 0 0 5 5.11v13.78a1 1 0 0 0 1.633.774z"}));
+}
+
+export function Pause(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M7 5c-.552 0-1 .392-1 .875v12.25c0 .483.448.875 1 .875h2c.552 0 1-.392 1-.875V5.875C10 5.392 9.552 5 9 5zM15 5c-.552 0-1 .392-1 .875v12.25c0 .483.448.875 1 .875h2c.552 0 1-.392 1-.875V5.875C18 5.392 17.552 5 17 5z"}));
+}
+
+export function PictureInPicture(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M6 20a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2zM6 5.5h12a.5.5 0 0 1 .5.5v6H13a1 1 0 0 0-1 1v5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5",clipRule:"evenodd"}));
+}
+
+export function Play(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M17.419 10.852c.775.546.775 1.75 0 2.296l-9.39 6.618C7.16 20.377 6 19.72 6 18.618V5.382c0-1.102 1.161-1.76 2.028-1.148z"}));
+}
+
+export function Playlist(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M4 4h16v1.5H4zM20 11.25h-7v1.5h7zM20 18.5H4V20h16zM5.555 9.036A1 1 0 0 0 4 9.87v4.263a1 1 0 0 0 1.555.832l3.197-2.132a1 1 0 0 0 0-1.664z"}));
+}
+
+export function Previous(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M5 4h1.5v16H5zM8.946 12.774a1 1 0 0 1 0-1.548l8.42-6.89A1 1 0 0 1 19 5.11v13.78a1 1 0 0 1-1.633.774z"}));
+}
+
+export function RepeatOne(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), [_c("path", {d:"m15 2 5 4-5 4V6.75H9A3.25 3.25 0 0 0 5.75 10v3h-1.5v-3A4.75 4.75 0 0 1 9 5.25h6zM9 22l-5-4 5-4v3.25h6A3.25 3.25 0 0 0 18.25 14v-3h1.5v3A4.75 4.75 0 0 1 15 18.75H9z"}), _c("path", {d:"M13.133 9.3V15h-1.125v-4.402l-1.352.43v-.887l2.356-.84z"})]);
+}
+
+export function Repeat(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"m15 2 5 4-5 4V6.75H9A3.25 3.25 0 0 0 5.75 10v3h-1.5v-3A4.75 4.75 0 0 1 9 5.25h6zM9 22l-5-4 5-4v3.25h6A3.25 3.25 0 0 0 18.25 14v-3h1.5v3A4.75 4.75 0 0 1 15 18.75H9z"}));
+}
+
+export function Shuffle(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"m15 2 5 4-5 4V6.76a3.25 3.25 0 0 0-2.522 1.568L10.275 12l2.203 3.672A3.25 3.25 0 0 0 15 17.24V14l5 4-5 4v-3.257a4.75 4.75 0 0 1-3.808-2.3L9.4 13.459l-.592.986a4.75 4.75 0 0 1-4.073 2.306H4v-1.5h.735a3.25 3.25 0 0 0 2.787-1.578L8.525 12l-1.003-1.672A3.25 3.25 0 0 0 4.735 8.75H4v-1.5h.735a4.75 4.75 0 0 1 4.073 2.306l.592.986 1.792-2.986A4.75 4.75 0 0 1 15 5.257z"}));
+}
+
+export function SkipBackwards(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M12 9 7 5l5-4v3.25A7.75 7.75 0 1 1 4.25 12v-.75h1.5V12A6.25 6.25 0 1 0 12 5.75z"}));
+}
+
+export function SkipForward(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"m12 9 5-4-5-4v3.25A7.75 7.75 0 1 0 19.75 12v-.75h-1.5V12A6.25 6.25 0 1 1 12 5.75z"}));
+}
+
+export function Stop(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M5 6a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"}));
+}
+
+export function TranscriptFill(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M6 20a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10l4 4v10a2 2 0 0 1-2 2zM19 9l-4-4v4zM6 14h9v1H6zm6-3H6v1h6zM6 8h7v1H6zm7 9H6v1h7z",clipRule:"evenodd"}));
+}
+
+export function TranscriptOutline(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), [_c("path", {d:"M7 13h8v1H7zM12 10H7v1h5zM7 7h6v1H7zM13 16H7v1h6z"}), _c("path", {fillRule:"evenodd",d:"M20 18V8l-4-4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2M5.5 18a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V9H15V5.5H6a.5.5 0 0 0-.5.5z",clipRule:"evenodd"})]);
+}
+
+export function ViewDefault(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M5.5 6a.5.5 0 0 1 .5-.5h4V4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4v-1.5H6a.5.5 0 0 1-.5-.5zM18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4v-1.5h4a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5h-4V4z"}));
+}
+
+export function ViewExpanded(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M5.5 9a.5.5 0 0 1 .5-.5h4V7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h4v-1.5H6a.5.5 0 0 1-.5-.5zM18 7a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-4v-1.5h4a.5.5 0 0 0 .5-.5V9a.5.5 0 0 0-.5-.5h-4V7z"}));
+}
+
+export function ViewFull(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M5.5 6a.5.5 0 0 1 .5-.5h4V4H6a2 2 0 0 0-2 2v4h1.5zM18.5 6a.5.5 0 0 0-.5-.5h-4V4h4a2 2 0 0 1 2 2v4h-1.5zM5.5 18a.5.5 0 0 0 .5.5h4V20H6a2 2 0 0 1-2-2v-4h1.5zM18 18.5a.5.5 0 0 0 .5-.5v-4H20v4a2 2 0 0 1-2 2h-4v-1.5z"}));
+}
+
+export function VolumeBarH(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M9.07 11.25H4v1.5h5.07a4.001 4.001 0 0 0 7.86 0H20v-1.5h-3.07a4.001 4.001 0 0 0-7.86 0"}));
+}
+
+export function VolumeBarV(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M11.25 14.93V20h1.5v-5.07a4.001 4.001 0 0 0 0-7.86V4h-1.5v3.07a4.001 4.001 0 0 0 0 7.86"}));
+}
+
+export function VolumeHigh(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), [_c("path", {d:"M6.434 15a1 1 0 0 1 .857.486l2.418 4.029a1 1 0 0 0 .857.485H11a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-.434a1 1 0 0 0-.857.486L7.29 8.515A1 1 0 0 1 6.434 9H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1z"}), _c("path", {fillRule:"evenodd",d:"M13.712 15.712a5.25 5.25 0 0 0 0-7.424l1.061-1.061a6.75 6.75 0 0 1 0 9.546z",clipRule:"evenodd"}), _c("path", {fillRule:"evenodd",d:"M16.712 18.227a8.806 8.806 0 0 0 0-12.454l1.061-1.06c4.025 4.024 4.025 10.55 0 14.575z",clipRule:"evenodd"})]);
+}
+
+export function VolumeLow(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M7.291 15.486A1 1 0 0 0 6.434 15H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h1.434a1 1 0 0 0 .857-.486L9.71 4.487A1 1 0 0 1 10.566 4H11a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-.434a1 1 0 0 1-.857-.485zM13.712 8.288a5.25 5.25 0 0 1 0 7.424l1.06 1.061a6.75 6.75 0 0 0 0-9.546z"}));
+}
+
+export function VolumeMute(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M7.291 15.486A1 1 0 0 0 6.434 15H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h1.434a1 1 0 0 0 .857-.486L9.71 4.487A1 1 0 0 1 10.566 4H11a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-.434a1 1 0 0 1-.857-.485zM13.47 15.005 16.475 12 13.47 8.995l1.06-1.06 3.005 3.004 3.006-3.005 1.06 1.06L18.596 12l3.005 3.005-1.06 1.06-3.006-3.004-3.005 3.005z"}));
+}
+
+export const playerIcons = {
+  'captions-fill': CaptionsFill,
+  'captions-outline': CaptionsOutline,
+  'next': Next,
+  'pause': Pause,
+  'picture-in-picture': PictureInPicture,
+  'play': Play,
+  'playlist': Playlist,
+  'previous': Previous,
+  'repeat-one': RepeatOne,
+  'repeat': Repeat,
+  'shuffle': Shuffle,
+  'skip-backwards': SkipBackwards,
+  'skip-forward': SkipForward,
+  'stop': Stop,
+  'transcript-fill': TranscriptFill,
+  'transcript-outline': TranscriptOutline,
+  'view-default': ViewDefault,
+  'view-expanded': ViewExpanded,
+  'view-full': ViewFull,
+  'volume-bar-h': VolumeBarH,
+  'volume-bar-v': VolumeBarV,
+  'volume-high': VolumeHigh,
+  'volume-low': VolumeLow,
+  'volume-mute': VolumeMute,
+};

package/icons/reaction/index.d.ts

@@ -0,0 +1,79 @@
+import type { FC, SVGProps } from 'react';
+
+type IconComponent = FC<SVGProps<SVGSVGElement>>;
+
+export declare const ArrowThickDownFill: IconComponent;
+export declare const ArrowThickDownOutline: IconComponent;
+export declare const ArrowThickUpFill: IconComponent;
+export declare const ArrowThickUpOutline: IconComponent;
+export declare const ArrowThinDownFill: IconComponent;
+export declare const ArrowThinDownOutline: IconComponent;
+export declare const ArrowThinUpFill: IconComponent;
+export declare const ArrowThinUpOutline: IconComponent;
+export declare const BookmarkFill: IconComponent;
+export declare const BookmarkOutline: IconComponent;
+export declare const ChevronDownFill: IconComponent;
+export declare const ChevronDownOutline: IconComponent;
+export declare const ChevronUpFill: IconComponent;
+export declare const ChevronUpOutline: IconComponent;
+export declare const ClapFill: IconComponent;
+export declare const ClapOutline: IconComponent;
+export declare const ExclamationPointFill: IconComponent;
+export declare const ExclamationPointOutline: IconComponent;
+export declare const HeartFill: IconComponent;
+export declare const HeartOutline: IconComponent;
+export declare const LaughingFill: IconComponent;
+export declare const LaughingOutline: IconComponent;
+export declare const QuestionMarkFill: IconComponent;
+export declare const QuestionMarkOutline: IconComponent;
+export declare const StarFill: IconComponent;
+export declare const StarOutline: IconComponent;
+export declare const StarShineFill: IconComponent;
+export declare const StarShineOutline: IconComponent;
+export declare const ThumbsDownFill: IconComponent;
+export declare const ThumbsDownOutline: IconComponent;
+export declare const ThumbsUpOutline: IconComponent;
+export declare const ThumbsUp: IconComponent;
+export declare const TriangleDownFill: IconComponent;
+export declare const TriangleDownOutline: IconComponent;
+export declare const TriangleUpFill: IconComponent;
+export declare const TriangleUpOutline: IconComponent;
+
+export declare const reactionIcons: {
+  'arrow-thick-down-fill': IconComponent;
+  'arrow-thick-down-outline': IconComponent;
+  'arrow-thick-up-fill': IconComponent;
+  'arrow-thick-up-outline': IconComponent;
+  'arrow-thin-down-fill': IconComponent;
+  'arrow-thin-down-outline': IconComponent;
+  'arrow-thin-up-fill': IconComponent;
+  'arrow-thin-up-outline': IconComponent;
+  'bookmark-fill': IconComponent;
+  'bookmark-outline': IconComponent;
+  'chevron-down-fill': IconComponent;
+  'chevron-down-outline': IconComponent;
+  'chevron-up-fill': IconComponent;
+  'chevron-up-outline': IconComponent;
+  'clap-fill': IconComponent;
+  'clap-outline': IconComponent;
+  'exclamation-point-fill': IconComponent;
+  'exclamation-point-outline': IconComponent;
+  'heart-fill': IconComponent;
+  'heart-outline': IconComponent;
+  'laughing-fill': IconComponent;
+  'laughing-outline': IconComponent;
+  'question-mark-fill': IconComponent;
+  'question-mark-outline': IconComponent;
+  'star-fill': IconComponent;
+  'star-outline': IconComponent;
+  'star-shine-fill': IconComponent;
+  'star-shine-outline': IconComponent;
+  'thumbs-down-fill': IconComponent;
+  'thumbs-down-outline': IconComponent;
+  'thumbs-up-outline': IconComponent;
+  'thumbs-up': IconComponent;
+  'triangle-down-fill': IconComponent;
+  'triangle-down-outline': IconComponent;
+  'triangle-up-fill': IconComponent;
+  'triangle-up-outline': IconComponent;
+};