@mbpockets/shared-ui 0.1.18 → 0.1.19

package/dist/index.d.cts

@@ -9,7 +9,7 @@ export { GameTableProvider, useGameTableContext } from './TablePage/GameTablePro
 export { ModalContext, ModalProvider, useModal } from './TablePage/ModalProvider';
 export { DMHighlightsCard, PlayerHighlightsCard, PlayerHighlightsCardProps } from './TablePage/players';
 export { TableActionProps, TableActionsBar, TablePageLayout, TablePageLayoutProps, TableStatus, UpdatableValues } from './TablePage';
-export { AutoResizingTextarea, NextGameCountdown, TagEditor, TagEditorProps, generateTagsDisplay, renderTagsFromIds } from './common';
+export { AutoResizingTextarea, Chip, NextGameCountdown, TagEditor, TagEditorProps, generateTagsDisplay, renderTagsFromIds } from './common';
 import 'react/jsx-runtime';
 import './types/event.cjs';
 import './types/tag.cjs';

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { GameTableProvider, useGameTableContext } from './TablePage/GameTablePro
 export { ModalContext, ModalProvider, useModal } from './TablePage/ModalProvider';
 export { DMHighlightsCard, PlayerHighlightsCard, PlayerHighlightsCardProps } from './TablePage/players';
 export { TableActionProps, TableActionsBar, TablePageLayout, TablePageLayoutProps, TableStatus, UpdatableValues } from './TablePage';
-export { AutoResizingTextarea, NextGameCountdown, TagEditor, TagEditorProps, generateTagsDisplay, renderTagsFromIds } from './common';
+export { AutoResizingTextarea, Chip, NextGameCountdown, TagEditor, TagEditorProps, generateTagsDisplay, renderTagsFromIds } from './common';
 import 'react/jsx-runtime';
 import './types/event.js';
 import './types/tag.js';

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import React7, { createContext, useState, useEffect, useContext, useMemo, useRef } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Box, Grid, TextField, Tooltip, IconButton, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Card, CardContent, Typography, FormControl, InputLabel, Select, MenuItem, Chip, LinearProgress, CardMedia, useTheme, useMediaQuery, CardHeader } from '@mui/material';
+import { Box, Grid, TextField, Tooltip, IconButton, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Card, CardContent, Typography, FormControl, InputLabel, Select, MenuItem, Chip as Chip$1, LinearProgress, CardMedia, useTheme, useMediaQuery, CardHeader } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
@@ -87,23 +87,40 @@ function useEventEdit() {
   }
   return context;
 }
-function generateTagsDisplay(tag) {
-  return /* @__PURE__ */ jsx(
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "span",
     {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
       style: {
-        marginTop: "6px",
-        marginRight: "6px",
-        marginBottom: "6px",
-        background: tag.color || "#bfbcbb",
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
       },
-      children: tag.label
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
     },
     tag.id
-  );
+  ) });
+}
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsx(Chip, { tag }, tag.id);
 }
 function renderTagsFromIds(ids, legalTags) {
   if (!ids || !legalTags || legalTags.length === 0) {
@@ -1054,7 +1071,7 @@ var TableResultCard = ({ result, tags, onClick }) => {
         " / ",
         capacity
       ] }),
-      result.dungeonMaster ? /* @__PURE__ */ jsx(Chip, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsx(Chip, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
+      result.dungeonMaster ? /* @__PURE__ */ jsx(Chip$1, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsx(Chip$1, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
     ] }),
     /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: occupancy, sx: { height: 8, borderRadius: 4 } })
   ] }) });
@@ -1556,24 +1573,7 @@ function PlayerTagsCard(props) {
   ] }) }) });
 }
 var renderLabels = (tags) => {
-  return /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: tags.map((tag) => generateLabel(tag)) });
-};
-var generateLabel = (tag) => {
-  let color = "#bfbcbb";
-  if (tag.color) color = tag.color;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-      style: {
-        background: color,
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
-      },
-      children: tag.label
-    },
-    tag.id
-  );
+  return /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsx(Chip, { tag }, tag.id)) });
 };
 function TagEditor({
   title = "Tags",
@@ -1601,27 +1601,11 @@ function TagEditor({
       }
     ),
     /* @__PURE__ */ jsxs(CardContent10, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxs(
-        "span",
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsx(
+        Chip,
         {
-          className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-          style: {
-            background: tag.color || "#bfbcbb",
-            color: "white",
-            textShadow: "black 0.2em 0.2em 0.4em"
-          },
-          children: [
-            tag.label,
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onToggleTag(tag.id),
-                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
-                children: "\xD7"
-              }
-            )
-          ]
+          tag,
+          removeCallback: () => onToggleTag(tag.id)
         },
         tag.id
       )) }),
@@ -2524,6 +2508,6 @@ var renderEditableTags = function(selectedTags, allTags, onToggleTag) {
 };
 var TablePageLayout_default = TablePageLayout;
 
-export { AutoResizingTextarea_default as AutoResizingTextarea, BaseSearchResultCard_default as BaseSearchResultCard, CANDIDATE_TIMEZONES, DMHighlightsCard, EventBanner, EventBannerEdit, EventBasicInfo, EventBasicInfoEdit, EventEditProvider, EventPageLayout, EventResultCard_default as EventResultCard, EventTablesCard_default as EventTablesCard, FiltersContainer_default as FiltersContainer, GameTableProvider, ModalContext, ModalProvider_default as ModalProvider, NextGameCountdown, PlayerDetailsCard_default as PlayerDetailsCard, PlayerDisplayCard_default as PlayerDisplayCard, PlayerHighlightsCard, PlayerPromptCard_default as PlayerPromptCard, PlayerResultCard_default as PlayerResultCard, PlayerTagsCard, PlayerTagsEdit, PlayersScrollableList_default as PlayersScrollableList, ResultsContainer_default as ResultsContainer, ScrollableResultsList_default as ScrollableResultsList, SearchPageLayout, SearchResultCard_default as SearchResultCard, SortOptions_default as SortOptions, TableActionsBar, TablePageLayout_default as TablePageLayout, TableResultCard_default as TableResultCard, TablesScrollableList_default as TablesScrollableList, TagEditor, TagsFilter_default as TagsFilter, TypeFilter_default as TypeFilter, generateTagsDisplay, renderTagsFromIds, useEventEdit, useGameTableContext, useModal };
+export { AutoResizingTextarea_default as AutoResizingTextarea, BaseSearchResultCard_default as BaseSearchResultCard, CANDIDATE_TIMEZONES, Chip, DMHighlightsCard, EventBanner, EventBannerEdit, EventBasicInfo, EventBasicInfoEdit, EventEditProvider, EventPageLayout, EventResultCard_default as EventResultCard, EventTablesCard_default as EventTablesCard, FiltersContainer_default as FiltersContainer, GameTableProvider, ModalContext, ModalProvider_default as ModalProvider, NextGameCountdown, PlayerDetailsCard_default as PlayerDetailsCard, PlayerDisplayCard_default as PlayerDisplayCard, PlayerHighlightsCard, PlayerPromptCard_default as PlayerPromptCard, PlayerResultCard_default as PlayerResultCard, PlayerTagsCard, PlayerTagsEdit, PlayersScrollableList_default as PlayersScrollableList, ResultsContainer_default as ResultsContainer, ScrollableResultsList_default as ScrollableResultsList, SearchPageLayout, SearchResultCard_default as SearchResultCard, SortOptions_default as SortOptions, TableActionsBar, TablePageLayout_default as TablePageLayout, TableResultCard_default as TableResultCard, TablesScrollableList_default as TablesScrollableList, TagEditor, TagsFilter_default as TagsFilter, TypeFilter_default as TypeFilter, generateTagsDisplay, renderTagsFromIds, useEventEdit, useGameTableContext, useModal };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map