storybook-addon-design-system-docs 1.0.0 → 1.0.2

package/dist/components/primitives/index.js

@@ -0,0 +1,905 @@
+import { useState, useMemo } from 'react';
+import { styled, ThemeProvider, ensure, themes } from 'storybook/theming';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/addon/components/primitives/ColorSection.tsx
+var Wrapper = styled.div(({ theme }) => ({
+  background: theme.background.content,
+  display: "flex",
+  flexDirection: "row-reverse",
+  justifyContent: "center",
+  padding: "4rem 20px",
+  minHeight: "100vh",
+  boxSizing: "border-box",
+  gap: "3rem",
+  "@media (min-width: 600px)": {}
+}));
+var Container = styled.div(() => ({
+  maxWidth: "1000px",
+  width: "100%",
+  minWidth: "0px"
+}));
+var Title = styled.h1(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  WebkitOverflowScrolling: "touch",
+  margin: "20px 0 8px",
+  padding: 0,
+  cursor: "text",
+  position: "relative",
+  color: theme.textColor,
+  "&:first-of-type": {
+    marginTop: 0,
+    paddingTop: 0
+  },
+  "&:hover a.anchor": {
+    textDecoration: "none"
+  },
+  "& code": {
+    fontSize: "inherit"
+  },
+  fontSize: `${theme.typography.size.l1}px`,
+  fontWeight: theme.typography.weight.bold
+}));
+var SectionHeader = styled.h2(() => ({
+  fontFamily: "inherit",
+  fontSize: "1.25rem",
+  fontWeight: 600,
+  marginTop: "0",
+  marginBottom: "1rem"
+}));
+var NoneDetectedText = styled.div(({ theme }) => ({
+  color: theme.textColor,
+  fontStyle: "italic",
+  fontFamily: theme.typography.fonts.base,
+  fontSize: theme.typography.size.s2,
+  lineHeight: "24px",
+  margin: "0",
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  WebkitOverflowScrolling: "touch"
+}));
+var HorizontalRule = styled.div(({ theme }) => ({
+  border: "0 none",
+  borderTop: `1px solid ${theme.appBorderColor}`,
+  height: 4,
+  paddingBottom: "30px",
+  marginTop: "30px"
+}));
+var FontHeaderSection = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  fontSize: `${theme.typography.size.s3}px`,
+  color: theme.textColor,
+  margin: 0,
+  padding: 0,
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  WebkitOverflowScrolling: "touch",
+  marginBottom: "20px"
+}));
+var TypefaceWrapper = styled.div({
+  display: "grid",
+  gridTemplateColumns: "minmax(200px, 1fr) 2fr",
+  gap: "40px",
+  marginBottom: "40px",
+  "@media (max-width: 600px)": {
+    gridTemplateColumns: "1fr"
+  }
+});
+var ControlsBar = styled.div({
+  display: "flex",
+  gap: "16px",
+  marginBottom: "32px",
+  flexWrap: "wrap",
+  alignItems: "center"
+});
+var FiltersWrapper = styled.div({
+  display: "flex",
+  gap: "8px",
+  alignItems: "center",
+  flexWrap: "nowrap"
+});
+var SearchInput = styled.input(({ theme }) => ({
+  flex: "1 1",
+  width: "300px",
+  padding: "10px 14px",
+  fontSize: "14px",
+  border: `1px solid ${theme.appBorderColor}`,
+  borderRadius: "6px",
+  color: theme.textColor,
+  background: theme.background.content,
+  outline: "none",
+  transition: "border-color 0.2s, box-shadow 0.2s",
+  "&:focus": {
+    borderColor: theme.color.secondary,
+    boxShadow: `0 0 0 2px ${theme.color.secondary}22`
+  },
+  "&::placeholder": {
+    color: theme.textColor,
+    opacity: 0.5
+  }
+}));
+var FilterGroup = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "6px 10px",
+  border: `1px solid ${theme.appBorderColor}`,
+  borderRadius: "6px",
+  background: theme.background.content
+}));
+var FilterLabel = styled.label(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  fontSize: "12px",
+  color: theme.textColor,
+  opacity: 0.6,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  marginRight: "4px"
+}));
+var FilterChip = styled.button(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "4px 10px",
+  fontSize: "12px",
+  fontWeight: 500,
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  background: "transparent",
+  color: theme.textColor,
+  opacity: 0.6,
+  transition: "all 0.15s",
+  '&[data-active="true"]': {
+    background: theme.color.secondary,
+    color: "#fff",
+    opacity: 1
+  },
+  '&:hover:not([data-active="true"])': {
+    opacity: 0.9,
+    background: theme.background.hoverable
+  }
+}));
+var SampleTextInput = styled.input(({ theme }) => ({
+  flex: "1 1 250px",
+  width: "500px",
+  minWidth: "250px",
+  padding: "10px 14px",
+  fontSize: "14px",
+  border: `1px solid ${theme.appBorderColor}`,
+  borderRadius: "6px",
+  color: theme.textColor,
+  background: theme.background.content,
+  outline: "none",
+  transition: "border-color 0.2s, box-shadow 0.2s",
+  "&:focus": {
+    borderColor: theme.color.secondary,
+    boxShadow: `0 0 0 2px ${theme.color.secondary}22`
+  },
+  "&::placeholder": {
+    color: theme.textColor,
+    opacity: 0.5
+  }
+}));
+var WeightColumn = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "10px"
+});
+var SizeColumn = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "15px"
+});
+var SizeRow = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "5px"
+});
+var SizeInfo = styled.div(({ theme }) => ({
+  fontSize: "12px",
+  color: theme.textColor,
+  opacity: 0.7,
+  fontFamily: theme.typography.fonts.base
+}));
+var SpacingGrid = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px"
+});
+var SpacingRow = styled.div(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "80px 80px 1fr 120px",
+  alignItems: "center",
+  gap: "16px",
+  padding: "8px 0",
+  borderBottom: `1px solid ${theme.appBorderColor}`,
+  fontFamily: theme.typography.fonts.base,
+  fontSize: "14px"
+}));
+var SpacingBar = styled.div(({ theme }) => ({
+  height: "16px",
+  background: theme.color.secondary,
+  borderRadius: "2px",
+  transition: "width 0.2s ease"
+}));
+var SpacingLabel = styled.span(({ theme }) => ({
+  fontWeight: 600,
+  color: theme.textColor
+}));
+var SpacingValue = styled.span(({ theme }) => ({
+  color: theme.textColor,
+  opacity: 0.7,
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: "12px"
+}));
+var ShadowsGrid = styled.div({
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+  gap: "24px"
+});
+var ShadowCard = styled.div(({ theme }) => ({
+  background: theme.background.content,
+  borderRadius: "8px",
+  padding: "24px",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "16px"
+}));
+var ShadowPreview = styled.div(({ theme }) => ({
+  width: "100px",
+  height: "100px",
+  background: theme.background.app,
+  borderRadius: "8px"
+}));
+var ShadowLabel = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  fontWeight: 600,
+  color: theme.textColor,
+  fontSize: "14px"
+}));
+var ShadowValue = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: "11px",
+  color: theme.textColor,
+  opacity: 0.7,
+  textAlign: "center",
+  wordBreak: "break-word",
+  maxWidth: "180px"
+}));
+var RadiusGrid = styled.div({
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
+  gap: "24px"
+});
+var RadiusCard = styled.div(() => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "12px"
+}));
+var RadiusPreview = styled.div(({ theme }) => ({
+  width: "80px",
+  height: "80px",
+  background: theme.color.secondary
+}));
+var RadiusLabel = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  fontWeight: 600,
+  color: theme.textColor,
+  fontSize: "14px"
+}));
+var RadiusValue = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: "12px",
+  opacity: 0.7
+}));
+var PaletteGrid = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "32px"
+});
+var PaletteCard = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "12px",
+  width: "100%"
+});
+var PaletteHeader = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  marginBottom: "8px"
+});
+var PaletteTitle = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  fontSize: "16px",
+  fontWeight: 700,
+  color: theme.textColor
+}));
+var PaletteSubtitle = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  fontSize: "13px",
+  color: theme.textColor,
+  opacity: 0.7,
+  marginTop: "4px"
+}));
+var SwatchGrid = styled.div({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0",
+  borderRadius: "8px",
+  overflow: "hidden",
+  boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
+});
+var SwatchWrapper = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  flex: "1 1 0px",
+  minWidth: "80px"
+});
+var SwatchColor = styled.div(({ color }) => ({
+  height: "64px",
+  width: "100%",
+  backgroundColor: color,
+  position: "relative"
+}));
+var SwatchInfo = styled.div(({ theme }) => ({
+  padding: "8px 12px",
+  backgroundColor: theme.background.content,
+  borderTop: "none",
+  display: "flex",
+  flexDirection: "column",
+  gap: "2px"
+}));
+var SwatchLabel = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+  fontSize: "12px",
+  fontWeight: 600,
+  color: theme.textColor,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
+var SwatchValue = styled.div(({ theme }) => ({
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: "11px",
+  color: theme.textColor,
+  opacity: 0.6,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  textTransform: "uppercase"
+}));
+function ColorSection({
+  customColors,
+  builtInColors,
+  showOnlyCustom
+}) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const hasColors = customColors.length > 0 || builtInColors.length > 0;
+  const filteredCustomColors = useMemo(() => {
+    if (!searchTerm) {
+      return customColors;
+    }
+    const lowerCaseSearchTerm = searchTerm.toLowerCase();
+    return customColors.filter(
+      (color) => color.baseName.toLowerCase().includes(lowerCaseSearchTerm) || color.subtitle.toLowerCase().includes(lowerCaseSearchTerm)
+    );
+  }, [customColors, searchTerm]);
+  const filteredBuiltInColors = useMemo(() => {
+    if (!searchTerm) {
+      return builtInColors;
+    }
+    const lowerCaseSearchTerm = searchTerm.toLowerCase();
+    return builtInColors.filter(
+      (color) => color.baseName.toLowerCase().includes(lowerCaseSearchTerm) || color.subtitle.toLowerCase().includes(lowerCaseSearchTerm)
+    );
+  }, [builtInColors, searchTerm]);
+  if (!hasColors) {
+    return /* @__PURE__ */ jsx(NoneDetectedText, { children: "No colors detected. To see a color, add it to your Tailwind configuration, or ensure Tailwind's defaults are not being overridden." });
+  }
+  if (showOnlyCustom) {
+    if (customColors.length === 0) {
+      return /* @__PURE__ */ jsx(NoneDetectedText, { children: "No custom colors detected. Define custom colors in your Tailwind configuration to see them here." });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ControlsBar, { children: /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value),
+          placeholder: "Search colors..."
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PaletteGrid, { children: filteredCustomColors.map((color) => /* @__PURE__ */ jsxs(PaletteCard, { children: [
+        /* @__PURE__ */ jsxs(PaletteHeader, { children: [
+          /* @__PURE__ */ jsx(PaletteTitle, { children: color.baseName }),
+          color.subtitle && /* @__PURE__ */ jsx(PaletteSubtitle, { children: color.subtitle })
+        ] }),
+        /* @__PURE__ */ jsx(SwatchGrid, { children: Object.entries(color.shades).map(([shade, value]) => /* @__PURE__ */ jsxs(SwatchWrapper, { children: [
+          /* @__PURE__ */ jsx(SwatchColor, { color: value }),
+          /* @__PURE__ */ jsxs(SwatchInfo, { children: [
+            /* @__PURE__ */ jsx(SwatchLabel, { children: shade }),
+            /* @__PURE__ */ jsx(SwatchValue, { children: value })
+          ] })
+        ] }, shade)) })
+      ] }, color.baseName)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ControlsBar, { children: /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        value: searchTerm,
+        onChange: (e) => setSearchTerm(e.target.value),
+        placeholder: "Search colors..."
+      }
+    ) }),
+    customColors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "Design System" }),
+      /* @__PURE__ */ jsx(PaletteGrid, { children: filteredCustomColors.map((color) => /* @__PURE__ */ jsxs(PaletteCard, { children: [
+        /* @__PURE__ */ jsxs(PaletteHeader, { children: [
+          /* @__PURE__ */ jsx(PaletteTitle, { children: color.baseName }),
+          color.subtitle && /* @__PURE__ */ jsx(PaletteSubtitle, { children: color.subtitle })
+        ] }),
+        /* @__PURE__ */ jsx(SwatchGrid, { children: Object.entries(color.shades).map(([shade, value]) => /* @__PURE__ */ jsxs(SwatchWrapper, { children: [
+          /* @__PURE__ */ jsx(SwatchColor, { color: value }),
+          /* @__PURE__ */ jsxs(SwatchInfo, { children: [
+            /* @__PURE__ */ jsx(SwatchLabel, { children: shade }),
+            /* @__PURE__ */ jsx(SwatchValue, { children: value })
+          ] })
+        ] }, shade)) })
+      ] }, color.baseName)) }),
+      builtInColors.length > 0 && /* @__PURE__ */ jsx(HorizontalRule, {})
+    ] }),
+    builtInColors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SectionHeader,
+        {
+          style: {
+            marginTop: customColors.length > 0 ? "2rem" : "0"
+          },
+          children: "Tailwind Built-ins"
+        }
+      ),
+      /* @__PURE__ */ jsx(PaletteGrid, { children: filteredBuiltInColors.map((color) => /* @__PURE__ */ jsxs(PaletteCard, { children: [
+        /* @__PURE__ */ jsxs(PaletteHeader, { children: [
+          /* @__PURE__ */ jsx(PaletteTitle, { children: color.baseName }),
+          color.subtitle && /* @__PURE__ */ jsx(PaletteSubtitle, { children: color.subtitle })
+        ] }),
+        /* @__PURE__ */ jsx(SwatchGrid, { children: Object.entries(color.shades).map(([shade, value]) => /* @__PURE__ */ jsxs(SwatchWrapper, { children: [
+          /* @__PURE__ */ jsx(SwatchColor, { color: value }),
+          /* @__PURE__ */ jsxs(SwatchInfo, { children: [
+            /* @__PURE__ */ jsx(SwatchLabel, { children: shade }),
+            /* @__PURE__ */ jsx(SwatchValue, { children: value })
+          ] })
+        ] }, shade)) })
+      ] }, color.baseName)) })
+    ] })
+  ] });
+}
+function ColorsPage(props) {
+  return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(Title, { children: "Colors" }),
+    /* @__PURE__ */ jsx(ColorSection, { ...props })
+  ] }) });
+}
+function RadiusSection({ entries }) {
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(NoneDetectedText, { children: "No border radius values detected. Add borderRadius values to your Tailwind configuration to see them here." });
+  }
+  return /* @__PURE__ */ jsx(RadiusGrid, { children: entries.map(([label, value]) => /* @__PURE__ */ jsxs(RadiusCard, { children: [
+    /* @__PURE__ */ jsx(
+      RadiusPreview,
+      {
+        style: { borderRadius: value },
+        title: `Border radius: ${label}`
+      }
+    ),
+    /* @__PURE__ */ jsx(RadiusLabel, { children: label === "DEFAULT" ? "rounded" : `rounded-${label}` }),
+    /* @__PURE__ */ jsx(RadiusValue, { children: value })
+  ] }, label)) });
+}
+function RadiusPage(props) {
+  return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(Title, { children: "Border Radius" }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(RadiusSection, { ...props })
+  ] }) });
+}
+function ShadowsSection({ entries }) {
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(NoneDetectedText, { children: "No shadow values detected. Add boxShadow values to your Tailwind configuration to see them here." });
+  }
+  return /* @__PURE__ */ jsx(ShadowsGrid, { children: entries.map(([label, value]) => /* @__PURE__ */ jsxs(ShadowCard, { children: [
+    /* @__PURE__ */ jsx(
+      ShadowPreview,
+      {
+        style: { boxShadow: value },
+        title: `Shadow: ${label}`
+      }
+    ),
+    /* @__PURE__ */ jsx(ShadowLabel, { children: label === "DEFAULT" ? "shadow" : `shadow-${label}` }),
+    /* @__PURE__ */ jsx(ShadowValue, { title: value, children: value === "none" ? "none" : value.length > 50 ? `${value.substring(0, 47)}...` : value })
+  ] }, label)) });
+}
+function ShadowsPage(props) {
+  return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(Title, { children: "Shadows" }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(ShadowsSection, { ...props })
+  ] }) });
+}
+function SpacingSection({ entries }) {
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(NoneDetectedText, { children: "No spacing values detected. Add spacing values to your Tailwind configuration to see them here." });
+  }
+  return /* @__PURE__ */ jsx(SpacingGrid, { children: entries.map(([label, value]) => {
+    return /* @__PURE__ */ jsxs(SpacingRow, { children: [
+      /* @__PURE__ */ jsx(SpacingLabel, { children: label }),
+      /* @__PURE__ */ jsx(SpacingValue, { children: value }),
+      /* @__PURE__ */ jsx("div", { style: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+        SpacingBar,
+        {
+          style: { width: value },
+          title: `${label}: ${value}`
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(SpacingValue, { children: [
+        "--spacing-",
+        label
+      ] })
+    ] }, label);
+  }) });
+}
+function SpacingPage(props) {
+  return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(Title, { children: "Spacing" }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(SpacingSection, { ...props })
+  ] }) });
+}
+var getTheme = () => {
+  const base = ensure(themes.light);
+  return {
+    ...base,
+    typography: {
+      ...base.typography || {},
+      fonts: {
+        base: '"Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif',
+        mono: 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace',
+        ...base.typography?.fonts || {}
+      },
+      weight: {
+        regular: 400,
+        bold: 700,
+        ...base.typography?.weight || {}
+      },
+      size: {
+        s1: 12,
+        s2: 14,
+        s3: 16,
+        m1: 20,
+        m2: 24,
+        m3: 28,
+        l1: 32,
+        l2: 40,
+        l3: 48,
+        ...base.typography?.size || {}
+      }
+    },
+    background: {
+      content: "#ffffff",
+      app: "#f6f9fc",
+      hoverable: "rgba(0,0,0,0.05)",
+      ...base.background || {}
+    },
+    color: {
+      secondary: "#029CFD",
+      ...base.color || {},
+      defaultText: base.textColor || "#333333"
+    },
+    textColor: base.textColor || "#333333",
+    appBorderColor: base.appBorderColor || "rgba(0,0,0,0.1)"
+  };
+};
+function ThemeLayout({ title, children }) {
+  console.log("ThemeLayout: mounting", { title });
+  try {
+    const theme = getTheme();
+    console.log("ThemeLayout: generated theme", {
+      hasTypography: !!theme.typography,
+      hasFonts: !!theme.typography?.fonts,
+      fonts: theme.typography?.fonts
+    });
+    return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Container, { children: [
+      /* @__PURE__ */ jsx("h1", { style: { fontSize: "32px", marginTop: 0, marginBottom: "8px" }, children: title }),
+      children
+    ] }) }) });
+  } catch (e) {
+    console.error("ThemeLayout: error generating theme", e);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      "Error loading theme: ",
+      e.message
+    ] });
+  }
+}
+function themeDecorator(Story) {
+  const theme = getTheme();
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(Story, {}) });
+}
+function FontFamilyPreview({
+  families,
+  fontWeights,
+  fontSizes,
+  selectedWeights,
+  selectedSizes,
+  sampleText,
+  searchTerm,
+  showDivider = false
+}) {
+  const filteredWeights = fontWeights.filter(
+    ([w]) => selectedWeights.includes(w)
+  );
+  const filteredSizes = fontSizes.filter(([s]) => selectedSizes.includes(s));
+  const filteredFamilies = useMemo(() => {
+    if (!searchTerm.trim()) return families;
+    const term = searchTerm.toLowerCase();
+    return families.filter(
+      ([label, fontFamily]) => label.toLowerCase().includes(term) || fontFamily.toLowerCase().includes(term)
+    );
+  }, [families, searchTerm]);
+  return /* @__PURE__ */ jsx(Fragment, { children: filteredFamilies.map(([label, fontFamily], familyIndex) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "60px" }, children: [
+    /* @__PURE__ */ jsxs(FontHeaderSection, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { fontSize: "20px", marginBottom: "8px" }, children: [
+        /* @__PURE__ */ jsx("b", { children: "Class name: " }),
+        label
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { fontSize: "20px", opacity: 0.8 }, children: [
+        /* @__PURE__ */ jsx("b", { children: "Font Family: " }),
+        fontFamily
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(TypefaceWrapper, { children: [
+      /* @__PURE__ */ jsx(WeightColumn, { children: filteredWeights.map(([weightLabel, weightValue]) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily,
+              fontWeight: weightValue,
+              fontSize: "36px",
+              marginBottom: "4px"
+            },
+            children: sampleText
+          }
+        ),
+        /* @__PURE__ */ jsxs(SizeInfo, { children: [
+          weightValue,
+          " (",
+          weightLabel,
+          ")"
+        ] })
+      ] }, weightLabel)) }),
+      /* @__PURE__ */ jsx(SizeColumn, { children: filteredSizes.map(([sizeLabel, sizeValue]) => /* @__PURE__ */ jsxs(SizeRow, { children: [
+        /* @__PURE__ */ jsxs(SizeInfo, { children: [
+          "text-",
+          sizeLabel,
+          " - ",
+          sizeValue
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily,
+              fontSize: sizeValue,
+              lineHeight: 1.2
+            },
+            children: sampleText
+          }
+        )
+      ] }, sizeLabel)) })
+    ] }),
+    showDivider && familyIndex < filteredFamilies.length - 1 && /* @__PURE__ */ jsx(HorizontalRule, {})
+  ] }, label)) });
+}
+function TypographySection({
+  customFamilies,
+  builtInFamilies,
+  fontWeights,
+  fontSizes,
+  allWeightKeys,
+  allSizeKeys,
+  defaultSampleText,
+  showOnlyCustom
+}) {
+  const [sampleText, setSampleText] = useState(defaultSampleText);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedWeights, setSelectedWeights] = useState(allWeightKeys);
+  const [selectedSizes, setSelectedSizes] = useState(allSizeKeys);
+  const hasFontFamily = customFamilies.length > 0 || builtInFamilies.length > 0;
+  const toggleWeight = (w) => {
+    if (selectedWeights.includes(w)) {
+      setSelectedWeights(selectedWeights.filter((i) => i !== w));
+    } else {
+      setSelectedWeights([...selectedWeights, w]);
+    }
+  };
+  const toggleSize = (s) => {
+    if (selectedSizes.includes(s)) {
+      setSelectedSizes(selectedSizes.filter((i) => i !== s));
+    } else {
+      setSelectedSizes([...selectedSizes, s]);
+    }
+  };
+  if (!hasFontFamily) {
+    return /* @__PURE__ */ jsx(NoneDetectedText, { children: "No font families detected. To see typography, add a font family to your Tailwind configuration, or ensure Tailwind's defaults are not being overridden." });
+  }
+  if (showOnlyCustom) {
+    if (customFamilies.length === 0) {
+      return /* @__PURE__ */ jsx(NoneDetectedText, { children: "No custom font families detected. Define custom fonts in your Tailwind configuration to see them here." });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ControlsBar, { children: [
+        /* @__PURE__ */ jsx(FilterLabel, { htmlFor: "sample-text", children: "Sample Text" }),
+        /* @__PURE__ */ jsx(
+          SampleTextInput,
+          {
+            id: "sample-text",
+            value: sampleText,
+            onChange: (e) => setSampleText(e.target.value),
+            placeholder: "Type to preview..."
+          }
+        ),
+        /* @__PURE__ */ jsx(FilterLabel, { htmlFor: "search-fonts", children: "Search" }),
+        /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            id: "search-fonts",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            placeholder: "Search fonts..."
+          }
+        ),
+        /* @__PURE__ */ jsxs(FiltersWrapper, { children: [
+          /* @__PURE__ */ jsxs(FilterGroup, { children: [
+            /* @__PURE__ */ jsx(FilterLabel, { children: "Weights" }),
+            allWeightKeys.map((w) => /* @__PURE__ */ jsx(
+              FilterChip,
+              {
+                "data-active": selectedWeights.includes(w),
+                onClick: () => toggleWeight(w),
+                children: w
+              },
+              w
+            ))
+          ] }),
+          /* @__PURE__ */ jsxs(FilterGroup, { children: [
+            /* @__PURE__ */ jsx(FilterLabel, { children: "Sizes" }),
+            allSizeKeys.map((s) => /* @__PURE__ */ jsx(
+              FilterChip,
+              {
+                "data-active": selectedSizes.includes(s),
+                onClick: () => toggleSize(s),
+                children: s
+              },
+              s
+            ))
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        FontFamilyPreview,
+        {
+          families: customFamilies,
+          fontWeights,
+          fontSizes,
+          selectedWeights,
+          selectedSizes,
+          sampleText,
+          searchTerm,
+          showDivider: true
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(ControlsBar, { style: { marginTop: "2rem" }, children: [
+      /* @__PURE__ */ jsx(FilterLabel, { htmlFor: "sample-text", children: "Sample Text" }),
+      /* @__PURE__ */ jsx(
+        SampleTextInput,
+        {
+          id: "sample-text",
+          value: sampleText,
+          onChange: (e) => setSampleText(e.target.value),
+          placeholder: "Type to preview..."
+        }
+      ),
+      /* @__PURE__ */ jsx(FilterLabel, { htmlFor: "search-fonts", children: "Search" }),
+      /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          id: "search-fonts",
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value),
+          placeholder: "Search fonts..."
+        }
+      ),
+      /* @__PURE__ */ jsxs(FiltersWrapper, { children: [
+        /* @__PURE__ */ jsxs(FilterGroup, { children: [
+          /* @__PURE__ */ jsx(FilterLabel, { children: "Weights" }),
+          allWeightKeys.map((w) => /* @__PURE__ */ jsx(
+            FilterChip,
+            {
+              "data-active": selectedWeights.includes(w),
+              onClick: () => toggleWeight(w),
+              children: w
+            },
+            w
+          ))
+        ] }),
+        /* @__PURE__ */ jsxs(FilterGroup, { children: [
+          /* @__PURE__ */ jsx(FilterLabel, { children: "Sizes" }),
+          allSizeKeys.map((s) => /* @__PURE__ */ jsx(
+            FilterChip,
+            {
+              "data-active": selectedSizes.includes(s),
+              onClick: () => toggleSize(s),
+              children: s
+            },
+            s
+          ))
+        ] })
+      ] })
+    ] }),
+    customFamilies.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "Design System" }),
+      /* @__PURE__ */ jsx(
+        FontFamilyPreview,
+        {
+          families: customFamilies,
+          fontWeights,
+          fontSizes,
+          selectedWeights,
+          selectedSizes,
+          sampleText,
+          searchTerm,
+          showDivider: true
+        }
+      ),
+      builtInFamilies.length > 0 && /* @__PURE__ */ jsx(HorizontalRule, {})
+    ] }),
+    builtInFamilies.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "Tailwind Built-ins" }),
+      /* @__PURE__ */ jsx(
+        FontFamilyPreview,
+        {
+          families: builtInFamilies,
+          fontWeights,
+          fontSizes,
+          selectedWeights,
+          selectedSizes,
+          sampleText,
+          searchTerm,
+          showDivider: true
+        }
+      )
+    ] })
+  ] });
+}
+function TypographyPage(props) {
+  return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(Title, { children: "Typography" }),
+    /* @__PURE__ */ jsx(TypographySection, { ...props })
+  ] }) });
+}
+
+export { ColorSection, ColorsPage, Container, ControlsBar, FilterChip, FilterGroup, FilterLabel, FiltersWrapper, FontHeaderSection, HorizontalRule, NoneDetectedText, PaletteCard, PaletteGrid, PaletteHeader, PaletteSubtitle, PaletteTitle, RadiusCard, RadiusGrid, RadiusLabel, RadiusPage, RadiusPreview, RadiusSection, RadiusValue, SampleTextInput, SearchInput, SectionHeader, ShadowCard, ShadowLabel, ShadowPreview, ShadowValue, ShadowsGrid, ShadowsPage, ShadowsSection, SizeColumn, SizeInfo, SizeRow, SpacingBar, SpacingGrid, SpacingLabel, SpacingPage, SpacingRow, SpacingSection, SpacingValue, SwatchColor, SwatchGrid, SwatchInfo, SwatchLabel, SwatchValue, SwatchWrapper, ThemeLayout, Title, TypefaceWrapper, TypographyPage, TypographySection, WeightColumn, Wrapper, themeDecorator };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map