@flagsmith/backstage-plugin 0.1.0-pr.7.a55a280

package/dist/components/FlagsmithOverviewCard/FlagStatsRow.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlagStatsRow.esm.js","sources":["../../../src/components/FlagsmithOverviewCard/FlagStatsRow.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { FlagStatusIndicator } from '../shared';\n\nconst useStyles = makeStyles(theme => ({\n  statsRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    marginBottom: theme.spacing(1),\n    fontSize: '0.75rem',\n  },\n  statItem: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  },\n}));\n\ninterface FlagStatsRowProps {\n  enabledCount: number;\n  disabledCount: number;\n}\n\nexport const FlagStatsRow = ({ enabledCount, disabledCount }: FlagStatsRowProps) => {\n  const classes = useStyles();\n\n  return (\n    <Box px={2} pt={1}>\n      <Box className={classes.statsRow}>\n        <Box className={classes.statItem}>\n          <FlagStatusIndicator enabled size=\"small\" />\n          <Typography variant=\"caption\">{enabledCount} Enabled</Typography>\n        </Box>\n        <Box className={classes.statItem}>\n          <FlagStatusIndicator enabled={false} size=\"small\" />\n          <Typography variant=\"caption\">{disabledCount} Disabled</Typography>\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAIA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA;AAE1B,CAAA,CAAE,CAAA;AAOK,MAAM,YAAA,GAAe,CAAC,EAAE,YAAA,EAAc,eAAc,KAAyB;AAClF,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,CAAA,EAAG,EAAA,EAAI,GACd,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,OAAA,EAAO,IAAA,EAAC,IAAA,EAAK,OAAA,EAAQ,CAAA;AAAA,sBAC1C,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAW,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QAAa;AAAA,OAAA,EAAQ;AAAA,KAAA,EACtD,CAAA;AAAA,oBACA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,OAAA,EAAS,KAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,CAAA;AAAA,sBAClD,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAW,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,QAAc;AAAA,OAAA,EAAS;AAAA,KAAA,EACxD;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/FlagsmithOverviewCard/index.esm.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Box, Typography, TableContainer, Paper, Table, TableHead, TableRow, TableCell, Tooltip, TableBody } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { InfoCard } from '@backstage/core-components';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import '../shared/FlagStatusIndicator.esm.js';
+import '../shared/SearchInput.esm.js';
+import { FlagsmithLink } from '../shared/FlagsmithLink.esm.js';
+import { MiniPagination } from '../shared/MiniPagination.esm.js';
+import { LoadingState } from '../shared/LoadingState.esm.js';
+import { buildProjectUrl } from '../../theme/flagsmithTheme.esm.js';
+import { useFlagsmithProject } from '../../hooks/useFlagsmithProject.esm.js';
+import '@backstage/core-plugin-api';
+import { paginate, calculateFeatureStats } from '../../utils/flagHelpers.esm.js';
+import { FlagStatsRow } from './FlagStatsRow.esm.js';
+import { FeatureFlagRow } from './FeatureFlagRow.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  headerActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  }
+}));
+const PAGE_SIZE = 5;
+const FlagsmithOverviewCard = () => {
+  const classes = useStyles();
+  const { entity } = useEntity();
+  const [page, setPage] = useState(0);
+  const projectId = entity.metadata.annotations?.["flagsmith.com/project-id"];
+  const { project, environments, features, loading, error } = useFlagsmithProject(projectId);
+  if (loading) {
+    return /* @__PURE__ */ jsx(InfoCard, { title: "Flagsmith Flags", children: /* @__PURE__ */ jsx(LoadingState, { message: "Loading flags...", size: 24 }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(InfoCard, { title: "Flagsmith Flags", children: /* @__PURE__ */ jsx(Box, { p: 2, children: /* @__PURE__ */ jsxs(Typography, { color: "error", children: [
+      "Error: ",
+      error
+    ] }) }) });
+  }
+  const { paginatedItems: paginatedFeatures, totalPages } = paginate(
+    features,
+    page,
+    PAGE_SIZE
+  );
+  const { enabledCount, disabledCount } = calculateFeatureStats(features);
+  const dashboardUrl = buildProjectUrl(
+    projectId || "",
+    environments[0]?.id?.toString()
+  );
+  return /* @__PURE__ */ jsxs(
+    InfoCard,
+    {
+      title: "Flagsmith Flags",
+      subheader: project?.name,
+      action: /* @__PURE__ */ jsx(Box, { className: classes.headerActions, children: /* @__PURE__ */ jsx(FlagsmithLink, { href: dashboardUrl, iconOnly: true, tooltip: "Open Dashboard" }) }),
+      children: [
+        /* @__PURE__ */ jsx(FlagStatsRow, { enabledCount, disabledCount }),
+        /* @__PURE__ */ jsx(TableContainer, { component: Paper, variant: "outlined", children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+          /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "Flag Name" }),
+            /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(Tooltip, { title: environments.map((e) => e.name).join(" \u2022 "), children: /* @__PURE__ */ jsx("span", { children: "Environments" }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: paginatedFeatures.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 2, align: "center", children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", variant: "body2", children: "No feature flags found" }) }) }) : paginatedFeatures.map((feature) => /* @__PURE__ */ jsx(
+            FeatureFlagRow,
+            {
+              feature,
+              environments
+            },
+            feature.id
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          MiniPagination,
+          {
+            page,
+            totalPages,
+            totalItems: features.length,
+            onPrevious: () => setPage((p) => Math.max(0, p - 1)),
+            onNext: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
+            itemLabel: "flags"
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { FlagsmithOverviewCard };
+//# sourceMappingURL=index.esm.js.map

package/dist/components/FlagsmithOverviewCard/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/FlagsmithOverviewCard/index.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Typography,\n  Box,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Paper,\n  Tooltip,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { InfoCard } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { FlagsmithLink, MiniPagination, LoadingState } from '../shared';\nimport { buildProjectUrl } from '../../theme/flagsmithTheme';\nimport { useFlagsmithProject } from '../../hooks';\nimport { calculateFeatureStats, paginate } from '../../utils';\nimport { FlagStatsRow } from './FlagStatsRow';\nimport { FeatureFlagRow } from './FeatureFlagRow';\n\nconst useStyles = makeStyles(theme => ({\n  headerActions: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  },\n}));\n\nconst PAGE_SIZE = 5;\n\nexport const FlagsmithOverviewCard = () => {\n  const classes = useStyles();\n  const { entity } = useEntity();\n  const [page, setPage] = useState(0);\n\n  const projectId = entity.metadata.annotations?.['flagsmith.com/project-id'];\n  const { project, environments, features, loading, error } = useFlagsmithProject(projectId);\n\n  if (loading) {\n    return (\n      <InfoCard title=\"Flagsmith Flags\">\n        <LoadingState message=\"Loading flags...\" size={24} />\n      </InfoCard>\n    );\n  }\n\n  if (error) {\n    return (\n      <InfoCard title=\"Flagsmith Flags\">\n        <Box p={2}>\n          <Typography color=\"error\">Error: {error}</Typography>\n        </Box>\n      </InfoCard>\n    );\n  }\n\n  const { paginatedItems: paginatedFeatures, totalPages } = paginate(\n    features,\n    page,\n    PAGE_SIZE,\n  );\n  const { enabledCount, disabledCount } = calculateFeatureStats(features);\n  const dashboardUrl = buildProjectUrl(\n    projectId || '',\n    environments[0]?.id?.toString(),\n  );\n\n  return (\n    <InfoCard\n      title=\"Flagsmith Flags\"\n      subheader={project?.name}\n      action={\n        <Box className={classes.headerActions}>\n          <FlagsmithLink href={dashboardUrl} iconOnly tooltip=\"Open Dashboard\" />\n        </Box>\n      }\n    >\n      <FlagStatsRow enabledCount={enabledCount} disabledCount={disabledCount} />\n\n      <TableContainer component={Paper} variant=\"outlined\">\n        <Table size=\"small\">\n          <TableHead>\n            <TableRow>\n              <TableCell>Flag Name</TableCell>\n              <TableCell align=\"right\">\n                <Tooltip title={environments.map(e => e.name).join(' • ')}>\n                  <span>Environments</span>\n                </Tooltip>\n              </TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {paginatedFeatures.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={2} align=\"center\">\n                  <Typography color=\"textSecondary\" variant=\"body2\">\n                    No feature flags found\n                  </Typography>\n                </TableCell>\n              </TableRow>\n            ) : (\n              paginatedFeatures.map(feature => (\n                <FeatureFlagRow\n                  key={feature.id}\n                  feature={feature}\n                  environments={environments}\n                />\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </TableContainer>\n\n      <MiniPagination\n        page={page}\n        totalPages={totalPages}\n        totalItems={features.length}\n        onPrevious={() => setPage(p => Math.max(0, p - 1))}\n        onNext={() => setPage(p => Math.min(totalPages - 1, p + 1))}\n        itemLabel=\"flags\"\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FlagsmithUsageCard/UsageChart.esm.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Typography } from '@material-ui/core';
+import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from 'recharts';
+import { flagsmithColors } from '../../theme/flagsmithTheme.esm.js';
+import { UsageTooltip } from './UsageTooltip.esm.js';
+
+const UsageChart = ({ data }) => {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", height: 300, children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", children: "No usage data available" }) });
+  }
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 300, children: /* @__PURE__ */ jsxs(
+    BarChart,
+    {
+      data,
+      margin: { top: 5, right: 30, left: 20, bottom: 5 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "day",
+            tickFormatter: (value) => {
+              const date = new Date(value);
+              return `${date.getMonth() + 1}/${date.getDate()}`;
+            },
+            angle: -45,
+            textAnchor: "end",
+            height: 80
+          }
+        ),
+        /* @__PURE__ */ jsx(YAxis, {}),
+        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(UsageTooltip, {}) }),
+        /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: "flags",
+            fill: flagsmithColors.primary,
+            radius: [2, 2, 0, 0]
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export { UsageChart };
+//# sourceMappingURL=UsageChart.esm.js.map

package/dist/components/FlagsmithUsageCard/UsageChart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsageChart.esm.js","sources":["../../../src/components/FlagsmithUsageCard/UsageChart.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core';\nimport {\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts';\nimport { FlagsmithUsageData } from '../../api/FlagsmithClient';\nimport { flagsmithColors } from '../../theme/flagsmithTheme';\nimport { UsageTooltip } from './UsageTooltip';\n\ninterface UsageChartProps {\n  data: FlagsmithUsageData[];\n}\n\nexport const UsageChart = ({ data }: UsageChartProps) => {\n  if (data.length === 0) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" height={300}>\n        <Typography color=\"textSecondary\">\n          No usage data available\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={300}>\n      <BarChart\n        data={data}\n        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}\n      >\n        <CartesianGrid strokeDasharray=\"3 3\" />\n        <XAxis\n          dataKey=\"day\"\n          tickFormatter={value => {\n            const date = new Date(value);\n            return `${date.getMonth() + 1}/${date.getDate()}`;\n          }}\n          angle={-45}\n          textAnchor=\"end\"\n          height={80}\n        />\n        <YAxis />\n        <Tooltip content={<UsageTooltip />} />\n        <Bar\n          dataKey=\"flags\"\n          fill={flagsmithColors.primary}\n          radius={[2, 2, 0, 0]}\n        />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,UAAA,GAAa,CAAC,EAAE,IAAA,EAAK,KAAuB;AACvD,EAAA,IAAI,IAAA,CAAK,WAAW,CAAA,EAAG;AACrB,IAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,OAAA,EAAQ,MAAA,EAAO,gBAAe,QAAA,EAAS,UAAA,EAAW,QAAA,EAAS,MAAA,EAAQ,KACtE,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAM,eAAA,EAAgB,qCAElC,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,mBAAA,EAAA,EAAoB,KAAA,EAAM,MAAA,EAAO,QAAQ,GAAA,EACxC,QAAA,kBAAA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,EAAA,EAAI,IAAA,EAAM,EAAA,EAAI,MAAA,EAAQ,CAAA,EAAE;AAAA,MAEjD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,iBAAgB,KAAA,EAAM,CAAA;AAAA,wBACrC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,KAAA;AAAA,YACR,eAAe,CAAA,KAAA,KAAS;AACtB,cAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,KAAK,CAAA;AAC3B,cAAA,OAAO,CAAA,EAAG,KAAK,QAAA,EAAS,GAAI,CAAC,CAAA,CAAA,EAAI,IAAA,CAAK,SAAS,CAAA,CAAA;AAAA,YACjD,CAAA;AAAA,YACA,KAAA,EAAO,GAAA;AAAA,YACP,UAAA,EAAW,KAAA;AAAA,YACX,MAAA,EAAQ;AAAA;AAAA,SACV;AAAA,4BACC,KAAA,EAAA,EAAM,CAAA;AAAA,wBACP,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,kBAAS,GAAA,CAAC,gBAAa,CAAA,EAAI,CAAA;AAAA,wBACpC,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,OAAA;AAAA,YACR,MAAM,eAAA,CAAgB,OAAA;AAAA,YACtB,MAAA,EAAQ,CAAC,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC;AAAA;AAAA;AACrB;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}

package/dist/components/FlagsmithUsageCard/UsageTooltip.esm.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Typography } from '@material-ui/core';
+
+const UsageTooltip = ({ active, payload }) => {
+  if (!active || !payload || !payload.length) {
+    return null;
+  }
+  const data = payload[0].payload;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      p: 1.5,
+      style: {
+        backgroundColor: "rgba(12, 0, 0, 0.95)",
+        border: "1px solid #ccc",
+        borderRadius: 4
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", style: { fontWeight: 600 }, children: new Date(data.day).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric"
+        }) }),
+        /* @__PURE__ */ jsxs(Box, { mt: 1, children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Flags:" }),
+            " ",
+            data.flags ?? 0
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Identities:" }),
+            " ",
+            data.identities
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Traits:" }),
+            " ",
+            data.traits
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Environment Document:" }),
+            " ",
+            data.environment_document
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { UsageTooltip };
+//# sourceMappingURL=UsageTooltip.esm.js.map

package/dist/components/FlagsmithUsageCard/UsageTooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsageTooltip.esm.js","sources":["../../../src/components/FlagsmithUsageCard/UsageTooltip.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core';\nimport { FlagsmithUsageData } from '../../api/FlagsmithClient';\n\ninterface UsageTooltipProps {\n  active?: boolean;\n  payload?: Array<{\n    payload: FlagsmithUsageData;\n  }>;\n}\n\nexport const UsageTooltip = ({ active, payload }: UsageTooltipProps) => {\n  if (!active || !payload || !payload.length) {\n    return null;\n  }\n\n  const data = payload[0].payload;\n\n  return (\n    <Box\n      p={1.5}\n      style={{\n        backgroundColor: 'rgba(12, 0, 0, 0.95)',\n        border: '1px solid #ccc',\n        borderRadius: 4,\n      }}\n    >\n      <Typography variant=\"subtitle2\" style={{ fontWeight: 600 }}>\n        {new Date(data.day).toLocaleDateString('en-US', {\n          month: 'short',\n          day: 'numeric',\n          year: 'numeric',\n        })}\n      </Typography>\n      <Box mt={1}>\n        <Typography variant=\"body2\">\n          <strong>Flags:</strong> {data.flags ?? 0}\n        </Typography>\n        <Typography variant=\"body2\">\n          <strong>Identities:</strong> {data.identities}\n        </Typography>\n        <Typography variant=\"body2\">\n          <strong>Traits:</strong> {data.traits}\n        </Typography>\n        <Typography variant=\"body2\">\n          <strong>Environment Document:</strong> {data.environment_document}\n        </Typography>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;AAUO,MAAM,YAAA,GAAe,CAAC,EAAE,MAAA,EAAQ,SAAQ,KAAyB;AACtE,EAAA,IAAI,CAAC,MAAA,IAAU,CAAC,OAAA,IAAW,CAAC,QAAQ,MAAA,EAAQ;AAC1C,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,CAAC,CAAA,CAAE,OAAA;AAExB,EAAA,uBACE,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,CAAA,EAAG,GAAA;AAAA,MACH,KAAA,EAAO;AAAA,QACL,eAAA,EAAiB,sBAAA;AAAA,QACjB,MAAA,EAAQ,gBAAA;AAAA,QACR,YAAA,EAAc;AAAA,OAChB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,WAAA,EAAY,KAAA,EAAO,EAAE,UAAA,EAAY,GAAA,EAAI,EACtD,QAAA,EAAA,IAAI,IAAA,CAAK,IAAA,CAAK,GAAG,CAAA,CAAE,mBAAmB,OAAA,EAAS;AAAA,UAC9C,KAAA,EAAO,OAAA;AAAA,UACP,GAAA,EAAK,SAAA;AAAA,UACL,IAAA,EAAM;AAAA,SACP,CAAA,EACH,CAAA;AAAA,wBACA,IAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,CAAA,EACP,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,YAAS,GAAA;AAAA,YAAE,KAAK,KAAA,IAAS;AAAA,WAAA,EACzC,CAAA;AAAA,0BACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,YAAS,GAAA;AAAA,YAAE,IAAA,CAAK;AAAA,WAAA,EACrC,CAAA;AAAA,0BACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,YAAS,GAAA;AAAA,YAAE,IAAA,CAAK;AAAA,WAAA,EACjC,CAAA;AAAA,0BACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,uBAAA,EAAqB,CAAA;AAAA,YAAS,GAAA;AAAA,YAAE,IAAA,CAAK;AAAA,WAAA,EAC/C;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/FlagsmithUsageCard/index.esm.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { InfoCard } from '@backstage/core-components';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import '../shared/FlagStatusIndicator.esm.js';
+import '../shared/SearchInput.esm.js';
+import { FlagsmithLink } from '../shared/FlagsmithLink.esm.js';
+import '@material-ui/icons/ChevronLeft';
+import '@material-ui/icons/ChevronRight';
+import { LoadingState } from '../shared/LoadingState.esm.js';
+import { FLAGSMITH_DASHBOARD_URL } from '../../theme/flagsmithTheme.esm.js';
+import 'react';
+import '@backstage/core-plugin-api';
+import { useFlagsmithUsage } from '../../hooks/useFlagsmithUsage.esm.js';
+import { UsageChart } from './UsageChart.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  headerActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  }
+}));
+const FlagsmithUsageCard = () => {
+  const classes = useStyles();
+  const { entity } = useEntity();
+  const projectId = entity.metadata.annotations?.["flagsmith.com/project-id"];
+  const orgId = entity.metadata.annotations?.["flagsmith.com/org-id"];
+  const { project, usageData, totalFlags, loading, error } = useFlagsmithUsage(
+    projectId,
+    orgId
+  );
+  const usageUrl = `${FLAGSMITH_DASHBOARD_URL}/organisation/${orgId}/usage`;
+  if (loading) {
+    return /* @__PURE__ */ jsx(InfoCard, { title: "Flags Usage Data (30 Days)", children: /* @__PURE__ */ jsx(LoadingState, { message: "Loading usage data...", size: 24 }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(InfoCard, { title: "Flags Usage Data (30 Days)", children: /* @__PURE__ */ jsxs(Box, { p: 2, children: [
+      /* @__PURE__ */ jsxs(Typography, { color: "error", children: [
+        "Error: ",
+        error
+      ] }),
+      !orgId && /* @__PURE__ */ jsxs(Typography, { variant: "body2", style: { marginTop: 8 }, children: [
+        "Add a ",
+        /* @__PURE__ */ jsx("code", { children: "flagsmith.com/organization-id" }),
+        " annotation to this entity."
+      ] })
+    ] }) });
+  }
+  const subheader = project?.name ? `${project.name} - ${totalFlags.toLocaleString()} total flag calls` : void 0;
+  return /* @__PURE__ */ jsx(
+    InfoCard,
+    {
+      title: "Flags Usage Data (30 Days)",
+      subheader,
+      action: orgId && /* @__PURE__ */ jsx(Box, { className: classes.headerActions, children: /* @__PURE__ */ jsx(FlagsmithLink, { href: usageUrl, iconOnly: true, tooltip: "View Usage Analytics" }) }),
+      children: /* @__PURE__ */ jsx(Box, { p: 2, children: /* @__PURE__ */ jsx(UsageChart, { data: usageData }) })
+    }
+  );
+};
+
+export { FlagsmithUsageCard };
+//# sourceMappingURL=index.esm.js.map

package/dist/components/FlagsmithUsageCard/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/FlagsmithUsageCard/index.tsx"],"sourcesContent":["import { Typography, Box } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { InfoCard } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { FlagsmithLink, LoadingState } from '../shared';\nimport { FLAGSMITH_DASHBOARD_URL } from '../../theme/flagsmithTheme';\nimport { useFlagsmithUsage } from '../../hooks';\nimport { UsageChart } from './UsageChart';\n\nconst useStyles = makeStyles(theme => ({\n  headerActions: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  },\n}));\n\nexport const FlagsmithUsageCard = () => {\n  const classes = useStyles();\n  const { entity } = useEntity();\n\n  const projectId = entity.metadata.annotations?.['flagsmith.com/project-id'];\n  const orgId = entity.metadata.annotations?.['flagsmith.com/org-id'];\n\n  const { project, usageData, totalFlags, loading, error } = useFlagsmithUsage(\n    projectId,\n    orgId,\n  );\n\n  const usageUrl = `${FLAGSMITH_DASHBOARD_URL}/organisation/${orgId}/usage`;\n\n  if (loading) {\n    return (\n      <InfoCard title=\"Flags Usage Data (30 Days)\">\n        <LoadingState message=\"Loading usage data...\" size={24} />\n      </InfoCard>\n    );\n  }\n\n  if (error) {\n    return (\n      <InfoCard title=\"Flags Usage Data (30 Days)\">\n        <Box p={2}>\n          <Typography color=\"error\">Error: {error}</Typography>\n          {!orgId && (\n            <Typography variant=\"body2\" style={{ marginTop: 8 }}>\n              Add a <code>flagsmith.com/organization-id</code> annotation to this\n              entity.\n            </Typography>\n          )}\n        </Box>\n      </InfoCard>\n    );\n  }\n\n  const subheader = project?.name\n    ? `${project.name} - ${totalFlags.toLocaleString()} total flag calls`\n    : undefined;\n\n  return (\n    <InfoCard\n      title=\"Flags Usage Data (30 Days)\"\n      subheader={subheader}\n      action={\n        orgId && (\n          <Box className={classes.headerActions}>\n            <FlagsmithLink href={usageUrl} iconOnly tooltip=\"View Usage Analytics\" />\n          </Box>\n        )\n      }\n    >\n      <Box p={2}>\n        <UsageChart data={usageData} />\n      </Box>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,aAAA,EAAe;AAAA,IACb,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAExB,CAAA,CAAE,CAAA;AAEK,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,QAAA,CAAS,WAAA,GAAc,0BAA0B,CAAA;AAC1E,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,QAAA,CAAS,WAAA,GAAc,sBAAsB,CAAA;AAElE,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,UAAA,EAAY,OAAA,EAAS,OAAM,GAAI,iBAAA;AAAA,IACzD,SAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,QAAA,GAAW,CAAA,EAAG,uBAAuB,CAAA,cAAA,EAAiB,KAAK,CAAA,MAAA,CAAA;AAEjE,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,4BAAA,EACd,QAAA,kBAAA,GAAA,CAAC,gBAAa,OAAA,EAAQ,uBAAA,EAAwB,IAAA,EAAM,EAAA,EAAI,CAAA,EAC1D,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,2BACG,QAAA,EAAA,EAAS,KAAA,EAAM,8BACd,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,GAAG,CAAA,EACN,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAM,OAAA,EAAQ,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,QAAQ;AAAA,OAAA,EAAM,CAAA;AAAA,MACvC,CAAC,KAAA,oBACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAQ,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAE,EAAG,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBAC7C,GAAA,CAAC,UAAK,QAAA,EAAA,+BAAA,EAA6B,CAAA;AAAA,QAAO;AAAA,OAAA,EAElD;AAAA,KAAA,EAEJ,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,SAAA,GAAY,OAAA,EAAS,IAAA,GACvB,CAAA,EAAG,OAAA,CAAQ,IAAI,CAAA,GAAA,EAAM,UAAA,CAAW,cAAA,EAAgB,CAAA,iBAAA,CAAA,GAChD,MAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA;AAAA,MACA,MAAA,EACE,KAAA,oBACE,GAAA,CAAC,GAAA,EAAA,EAAI,WAAW,OAAA,CAAQ,aAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,MAAM,QAAA,EAAU,QAAA,EAAQ,IAAA,EAAC,OAAA,EAAQ,wBAAuB,CAAA,EACzE,CAAA;AAAA,MAIJ,QAAA,kBAAA,GAAA,CAAC,OAAI,CAAA,EAAG,CAAA,EACN,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAM,WAAW,CAAA,EAC/B;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/shared/FlagStatusIndicator.esm.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Typography, Tooltip } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { flagsmithColors } from '../../theme/flagsmithTheme.esm.js';
+
+const useStyles = makeStyles(() => ({
+  container: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: "50%",
+    flexShrink: 0
+  },
+  enabled: {
+    backgroundColor: flagsmithColors.enabled
+  },
+  disabled: {
+    backgroundColor: flagsmithColors.disabled
+  },
+  label: {
+    fontSize: "0.875rem"
+  }
+}));
+const FlagStatusIndicator = ({
+  enabled,
+  showLabel = false,
+  size = "medium",
+  tooltip
+}) => {
+  const classes = useStyles();
+  const dotSize = size === "small" ? 8 : 10;
+  const indicator = /* @__PURE__ */ jsxs(Box, { className: classes.container, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: `${classes.dot} ${enabled ? classes.enabled : classes.disabled}`,
+        style: { width: dotSize, height: dotSize }
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        className: classes.label,
+        style: { fontSize: size === "small" ? "0.75rem" : "0.875rem" },
+        children: enabled ? "On" : "Off"
+      }
+    )
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: indicator });
+  }
+  return indicator;
+};
+
+export { FlagStatusIndicator };
+//# sourceMappingURL=FlagStatusIndicator.esm.js.map

package/dist/components/shared/FlagStatusIndicator.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlagStatusIndicator.esm.js","sources":["../../../src/components/shared/FlagStatusIndicator.tsx"],"sourcesContent":["import { Box, Typography, Tooltip } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { flagsmithColors } from '../../theme/flagsmithTheme';\n\nconst useStyles = makeStyles(() => ({\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 6,\n  },\n  dot: {\n    width: 10,\n    height: 10,\n    borderRadius: '50%',\n    flexShrink: 0,\n  },\n  enabled: {\n    backgroundColor: flagsmithColors.enabled,\n  },\n  disabled: {\n    backgroundColor: flagsmithColors.disabled,\n  },\n  label: {\n    fontSize: '0.875rem',\n  },\n}));\n\ninterface FlagStatusIndicatorProps {\n  enabled: boolean;\n  showLabel?: boolean;\n  size?: 'small' | 'medium';\n  tooltip?: string;\n}\n\n/**\n * Visual indicator for flag enabled/disabled status\n * Shows a colored dot (green for enabled, gray for disabled)\n */\nexport const FlagStatusIndicator = ({\n  enabled,\n  showLabel = false,\n  size = 'medium',\n  tooltip,\n}: FlagStatusIndicatorProps) => {\n  const classes = useStyles();\n\n  const dotSize = size === 'small' ? 8 : 10;\n\n  const indicator = (\n    <Box className={classes.container}>\n      <Box\n        className={`${classes.dot} ${enabled ? classes.enabled : classes.disabled}`}\n        style={{ width: dotSize, height: dotSize }}\n      />\n      {showLabel && (\n        <Typography\n          variant=\"body2\"\n          className={classes.label}\n          style={{ fontSize: size === 'small' ? '0.75rem' : '0.875rem' }}\n        >\n          {enabled ? 'On' : 'Off'}\n        </Typography>\n      )}\n    </Box>\n  );\n\n  if (tooltip) {\n    return <Tooltip title={tooltip}>{indicator}</Tooltip>;\n  }\n\n  return indicator;\n};\n"],"names":[],"mappings":";;;;;AAIA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,SAAA,EAAW;AAAA,IACT,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK;AAAA,GACP;AAAA,EACA,GAAA,EAAK;AAAA,IACH,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,YAAA,EAAc,KAAA;AAAA,IACd,UAAA,EAAY;AAAA,GACd;AAAA,EACA,OAAA,EAAS;AAAA,IACP,iBAAiB,eAAA,CAAgB;AAAA,GACnC;AAAA,EACA,QAAA,EAAU;AAAA,IACR,iBAAiB,eAAA,CAAgB;AAAA,GACnC;AAAA,EACA,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA;AAEd,CAAA,CAAE,CAAA;AAaK,MAAM,sBAAsB,CAAC;AAAA,EAClC,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,IAAA,GAAO,QAAA;AAAA,EACP;AACF,CAAA,KAAgC;AAC9B,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,MAAM,OAAA,GAAU,IAAA,KAAS,OAAA,GAAU,CAAA,GAAI,EAAA;AAEvC,EAAA,MAAM,SAAA,mBACJ,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,SAAA,EACtB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,OAAA,CAAQ,GAAG,IAAI,OAAA,GAAU,OAAA,CAAQ,OAAA,GAAU,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAAA,QACzE,KAAA,EAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAQ,OAAA;AAAQ;AAAA,KAC3C;AAAA,IACC,SAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,WAAW,OAAA,CAAQ,KAAA;AAAA,QACnB,OAAO,EAAE,QAAA,EAAU,IAAA,KAAS,OAAA,GAAU,YAAY,UAAA,EAAW;AAAA,QAE5D,oBAAU,IAAA,GAAO;AAAA;AAAA;AACpB,GAAA,EAEJ,CAAA;AAGF,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,OAAA,EAAU,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,EAC7C;AAEA,EAAA,OAAO,SAAA;AACT;;;;"}

package/dist/components/shared/FlagsmithLink.esm.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip, IconButton, Link } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import LaunchIcon from '@material-ui/icons/Launch';
+import { flagsmithColors } from '../../theme/flagsmithTheme.esm.js';
+
+const useStyles = makeStyles(() => ({
+  link: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    color: "inherit",
+    textDecoration: "none",
+    "&:hover": {
+      color: flagsmithColors.primary,
+      textDecoration: "underline"
+    }
+  },
+  icon: {
+    fontSize: "0.875rem",
+    opacity: 0.7
+  },
+  iconButton: {
+    padding: 4,
+    color: flagsmithColors.primary
+  }
+}));
+const FlagsmithLink = ({
+  href,
+  children,
+  tooltip = "Open in Flagsmith",
+  iconOnly = false
+}) => {
+  const classes = useStyles();
+  if (iconOnly) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: classes.iconButton,
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        size: "small",
+        "aria-label": tooltip,
+        children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small", "aria-hidden": "true" })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsxs(
+    Link,
+    {
+      className: classes.link,
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": `${tooltip} (opens in new tab)`,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(LaunchIcon, { className: classes.icon, "aria-hidden": "true" })
+      ]
+    }
+  ) });
+};
+
+export { FlagsmithLink };
+//# sourceMappingURL=FlagsmithLink.esm.js.map

package/dist/components/shared/FlagsmithLink.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlagsmithLink.esm.js","sources":["../../../src/components/shared/FlagsmithLink.tsx"],"sourcesContent":["import { Link, Tooltip, IconButton } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport LaunchIcon from '@material-ui/icons/Launch';\nimport { flagsmithColors } from '../../theme/flagsmithTheme';\n\nconst useStyles = makeStyles(() => ({\n  link: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 4,\n    color: 'inherit',\n    textDecoration: 'none',\n    '&:hover': {\n      color: flagsmithColors.primary,\n      textDecoration: 'underline',\n    },\n  },\n  icon: {\n    fontSize: '0.875rem',\n    opacity: 0.7,\n  },\n  iconButton: {\n    padding: 4,\n    color: flagsmithColors.primary,\n  },\n}));\n\ninterface FlagsmithLinkProps {\n  href: string;\n  children?: React.ReactNode;\n  tooltip?: string;\n  iconOnly?: boolean;\n}\n\n/**\n * External link to Flagsmith dashboard\n * Opens in a new tab with appropriate security attributes\n */\nexport const FlagsmithLink = ({\n  href,\n  children,\n  tooltip = 'Open in Flagsmith',\n  iconOnly = false,\n}: FlagsmithLinkProps) => {\n  const classes = useStyles();\n\n  if (iconOnly) {\n    return (\n      <Tooltip title={tooltip}>\n        <IconButton\n          className={classes.iconButton}\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          size=\"small\"\n          aria-label={tooltip}\n        >\n          <LaunchIcon fontSize=\"small\" aria-hidden=\"true\" />\n        </IconButton>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <Tooltip title={tooltip}>\n      <Link\n        className={classes.link}\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        aria-label={`${tooltip} (opens in new tab)`}\n      >\n        {children}\n        <LaunchIcon className={classes.icon} aria-hidden=\"true\" />\n      </Link>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,CAAA;AAAA,IACL,KAAA,EAAO,SAAA;AAAA,IACP,cAAA,EAAgB,MAAA;AAAA,IAChB,SAAA,EAAW;AAAA,MACT,OAAO,eAAA,CAAgB,OAAA;AAAA,MACvB,cAAA,EAAgB;AAAA;AAClB,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,QAAA,EAAU,UAAA;AAAA,IACV,OAAA,EAAS;AAAA,GACX;AAAA,EACA,UAAA,EAAY;AAAA,IACV,OAAA,EAAS,CAAA;AAAA,IACT,OAAO,eAAA,CAAgB;AAAA;AAE3B,CAAA,CAAE,CAAA;AAaK,MAAM,gBAAgB,CAAC;AAAA,EAC5B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,mBAAA;AAAA,EACV,QAAA,GAAW;AACb,CAAA,KAA0B;AACxB,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,OAAA,EACd,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,UAAA;AAAA,QACnB,IAAA;AAAA,QACA,MAAA,EAAO,QAAA;AAAA,QACP,GAAA,EAAI,qBAAA;AAAA,QACJ,IAAA,EAAK,OAAA;AAAA,QACL,YAAA,EAAY,OAAA;AAAA,QAEZ,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,QAAA,EAAS,OAAA,EAAQ,eAAY,MAAA,EAAO;AAAA;AAAA,KAClD,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,OAAA,EACd,QAAA,kBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,IAAA;AAAA,MACA,MAAA,EAAO,QAAA;AAAA,MACP,GAAA,EAAI,qBAAA;AAAA,MACJ,YAAA,EAAY,GAAG,OAAO,CAAA,mBAAA,CAAA;AAAA,MAErB,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,4BACA,UAAA,EAAA,EAAW,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAM,eAAY,MAAA,EAAO;AAAA;AAAA;AAAA,GAC1D,EACF,CAAA;AAEJ;;;;"}

package/dist/components/shared/LoadingState.esm.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, CircularProgress, Typography } from '@material-ui/core';
+
+const LoadingState = ({
+  message = "Loading...",
+  size = 40
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      p: 3,
+      role: "status",
+      "aria-label": message,
+      children: [
+        /* @__PURE__ */ jsx(CircularProgress, { size, "aria-hidden": "true" }),
+        message && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            color: "textSecondary",
+            style: { marginTop: 16 },
+            children: message
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { LoadingState };
+//# sourceMappingURL=LoadingState.esm.js.map

package/dist/components/shared/LoadingState.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.esm.js","sources":["../../../src/components/shared/LoadingState.tsx"],"sourcesContent":["import { Box, CircularProgress, Typography } from '@material-ui/core';\n\ninterface LoadingStateProps {\n  message?: string;\n  size?: number;\n}\n\nexport const LoadingState = ({\n  message = 'Loading...',\n  size = 40,\n}: LoadingStateProps) => {\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      p={3}\n      role=\"status\"\n      aria-label={message}\n    >\n      <CircularProgress size={size} aria-hidden=\"true\" />\n      {message && (\n        <Typography\n          variant=\"body2\"\n          color=\"textSecondary\"\n          style={{ marginTop: 16 }}\n        >\n          {message}\n        </Typography>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;AAOO,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAA,GAAU,YAAA;AAAA,EACV,IAAA,GAAO;AACT,CAAA,KAAyB;AACvB,EAAA,uBACE,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,MAAA;AAAA,MACR,aAAA,EAAc,QAAA;AAAA,MACd,cAAA,EAAe,QAAA;AAAA,MACf,UAAA,EAAW,QAAA;AAAA,MACX,CAAA,EAAG,CAAA;AAAA,MACH,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAY,OAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,IAAA,EAAY,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,QAChD,OAAA,oBACC,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,OAAA;AAAA,YACR,KAAA,EAAM,eAAA;AAAA,YACN,KAAA,EAAO,EAAE,SAAA,EAAW,EAAA,EAAG;AAAA,YAEtB,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/components/shared/MiniPagination.esm.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Typography, IconButton } from '@material-ui/core';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+
+const MiniPagination = ({
+  page,
+  totalPages,
+  totalItems,
+  onPrevious,
+  onNext,
+  itemLabel = "items"
+}) => {
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      p: 1,
+      borderTop: 1,
+      borderColor: "divider",
+      role: "navigation",
+      "aria-label": `Pagination for ${itemLabel}`,
+      children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "textSecondary", children: [
+          "Page ",
+          page + 1,
+          " of ",
+          totalPages,
+          " (",
+          totalItems,
+          " ",
+          itemLabel,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: onPrevious,
+              disabled: page === 0,
+              "aria-label": "Previous page",
+              children: /* @__PURE__ */ jsx(ChevronLeft, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: onNext,
+              disabled: page >= totalPages - 1,
+              "aria-label": "Next page",
+              children: /* @__PURE__ */ jsx(ChevronRight, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { MiniPagination };
+//# sourceMappingURL=MiniPagination.esm.js.map

package/dist/components/shared/MiniPagination.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniPagination.esm.js","sources":["../../../src/components/shared/MiniPagination.tsx"],"sourcesContent":["import { Box, IconButton, Typography } from '@material-ui/core';\nimport ChevronLeft from '@material-ui/icons/ChevronLeft';\nimport ChevronRight from '@material-ui/icons/ChevronRight';\n\ninterface MiniPaginationProps {\n  page: number;\n  totalPages: number;\n  totalItems: number;\n  onPrevious: () => void;\n  onNext: () => void;\n  itemLabel?: string;\n}\n\nexport const MiniPagination = ({\n  page,\n  totalPages,\n  totalItems,\n  onPrevious,\n  onNext,\n  itemLabel = 'items',\n}: MiniPaginationProps) => {\n  if (totalPages <= 1) return null;\n\n  return (\n    <Box\n      display=\"flex\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      p={1}\n      borderTop={1}\n      borderColor=\"divider\"\n      role=\"navigation\"\n      aria-label={`Pagination for ${itemLabel}`}\n    >\n      <Typography variant=\"caption\" color=\"textSecondary\">\n        Page {page + 1} of {totalPages} ({totalItems} {itemLabel})\n      </Typography>\n      <Box>\n        <IconButton\n          size=\"small\"\n          onClick={onPrevious}\n          disabled={page === 0}\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeft />\n        </IconButton>\n        <IconButton\n          size=\"small\"\n          onClick={onNext}\n          disabled={page >= totalPages - 1}\n          aria-label=\"Next page\"\n        >\n          <ChevronRight />\n        </IconButton>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;AAaO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAA2B;AACzB,EAAA,IAAI,UAAA,IAAc,GAAG,OAAO,IAAA;AAE5B,EAAA,uBACE,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,MAAA;AAAA,MACR,cAAA,EAAe,eAAA;AAAA,MACf,UAAA,EAAW,QAAA;AAAA,MACX,CAAA,EAAG,CAAA;AAAA,MACH,SAAA,EAAW,CAAA;AAAA,MACX,WAAA,EAAY,SAAA;AAAA,MACZ,IAAA,EAAK,YAAA;AAAA,MACL,YAAA,EAAY,kBAAkB,SAAS,CAAA,CAAA;AAAA,MAEvC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAU,KAAA,EAAM,eAAA,EAAgB,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,UAC5C,IAAA,GAAO,CAAA;AAAA,UAAE,MAAA;AAAA,UAAK,UAAA;AAAA,UAAW,IAAA;AAAA,UAAG,UAAA;AAAA,UAAW,GAAA;AAAA,UAAE,SAAA;AAAA,UAAU;AAAA,SAAA,EAC3D,CAAA;AAAA,6BACC,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,OAAA;AAAA,cACL,OAAA,EAAS,UAAA;AAAA,cACT,UAAU,IAAA,KAAS,CAAA;AAAA,cACnB,YAAA,EAAW,eAAA;AAAA,cAEX,8BAAC,WAAA,EAAA,EAAY;AAAA;AAAA,WACf;AAAA,0BACA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,OAAA;AAAA,cACL,OAAA,EAAS,MAAA;AAAA,cACT,QAAA,EAAU,QAAQ,UAAA,GAAa,CAAA;AAAA,cAC/B,YAAA,EAAW,WAAA;AAAA,cAEX,8BAAC,YAAA,EAAA,EAAa;AAAA;AAAA;AAChB,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/shared/SearchInput.esm.js

@@ -0,0 +1,54 @@
+import { jsx } from 'react/jsx-runtime';
+import { TextField, InputAdornment } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import SearchIcon from '@material-ui/icons/Search';
+import ClearIcon from '@material-ui/icons/Clear';
+import IconButton from '@material-ui/core/IconButton';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    minWidth: 200
+  },
+  clearButton: {
+    padding: 4
+  }
+}));
+const SearchInput = ({
+  value,
+  onChange,
+  placeholder = "Search flags..."
+}) => {
+  const classes = useStyles();
+  const handleClear = () => onChange("");
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      className: classes.root,
+      variant: "outlined",
+      size: "small",
+      placeholder,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      inputProps: {
+        "aria-label": placeholder,
+        role: "searchbox"
+      },
+      InputProps: {
+        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { color: "action", "aria-hidden": "true" }) }),
+        endAdornment: value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: classes.clearButton,
+            onClick: handleClear,
+            size: "small",
+            "aria-label": "Clear search",
+            children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
+          }
+        ) }) : null
+      }
+    }
+  );
+};
+
+export { SearchInput };
+//# sourceMappingURL=SearchInput.esm.js.map

package/dist/components/shared/SearchInput.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.esm.js","sources":["../../../src/components/shared/SearchInput.tsx"],"sourcesContent":["import { TextField, InputAdornment } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport SearchIcon from '@material-ui/icons/Search';\nimport ClearIcon from '@material-ui/icons/Clear';\nimport IconButton from '@material-ui/core/IconButton';\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    minWidth: 200,\n  },\n  clearButton: {\n    padding: 4,\n  },\n}));\n\ninterface SearchInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n}\n\n/**\n * Reusable search input component\n */\nexport const SearchInput = ({\n  value,\n  onChange,\n  placeholder = 'Search flags...',\n}: SearchInputProps) => {\n  const classes = useStyles();\n\n  const handleClear = () => onChange('');\n\n  return (\n    <TextField\n      className={classes.root}\n      variant=\"outlined\"\n      size=\"small\"\n      placeholder={placeholder}\n      value={value}\n      onChange={e => onChange(e.target.value)}\n      inputProps={{\n        'aria-label': placeholder,\n        role: 'searchbox',\n      }}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon color=\"action\" aria-hidden=\"true\" />\n          </InputAdornment>\n        ),\n        endAdornment: value ? (\n          <InputAdornment position=\"end\">\n            <IconButton\n              className={classes.clearButton}\n              onClick={handleClear}\n              size=\"small\"\n              aria-label=\"Clear search\"\n            >\n              <ClearIcon fontSize=\"small\" />\n            </IconButton>\n          </InputAdornment>\n        ) : null,\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,IAAA,EAAM;AAAA,IACJ,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,WAAA,EAAa;AAAA,IACX,OAAA,EAAS;AAAA;AAEb,CAAA,CAAE,CAAA;AAWK,MAAM,cAAc,CAAC;AAAA,EAC1B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc;AAChB,CAAA,KAAwB;AACtB,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,MAAM,WAAA,GAAc,MAAM,QAAA,CAAS,EAAE,CAAA;AAErC,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAA,EAAQ,UAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,WAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA,EAAU,CAAA,CAAA,KAAK,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,MACtC,UAAA,EAAY;AAAA,QACV,YAAA,EAAc,WAAA;AAAA,QACd,IAAA,EAAM;AAAA,OACR;AAAA,MACA,UAAA,EAAY;AAAA,QACV,cAAA,kBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAS,OAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAM,QAAA,EAAS,aAAA,EAAY,MAAA,EAAO,CAAA,EAChD,CAAA;AAAA,QAEF,YAAA,EAAc,KAAA,mBACZ,GAAA,CAAC,cAAA,EAAA,EAAe,UAAS,KAAA,EACvB,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,WAAW,OAAA,CAAQ,WAAA;AAAA,YACnB,OAAA,EAAS,WAAA;AAAA,YACT,IAAA,EAAK,OAAA;AAAA,YACL,YAAA,EAAW,cAAA;AAAA,YAEX,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,QAAA,EAAS,OAAA,EAAQ;AAAA;AAAA,WAEhC,CAAA,GACE;AAAA;AACN;AAAA,GACF;AAEJ;;;;"}