@haroonwaves/blog-kit-react 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +84 -34
  2. package/dist/index.d.cts +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +84 -34
  5. package/dist/style.css +1 -1
  6. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -50,7 +50,7 @@ function Badge({ children, className }) {
50
50
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
51
51
  "span",
52
52
  {
53
- className: `inline-flex items-center rounded-full border border-transparent bg-orange-100 px-2.5 py-0.5 text-xs font-semibold text-orange-500 ${className}`,
53
+ className: `inline-flex items-center rounded-full border border-transparent bg-orange-100 dark:bg-orange-900/30 px-2.5 py-0.5 text-xs font-semibold text-orange-500 dark:text-orange-300 ${className}`,
54
54
  children
55
55
  }
56
56
  );
@@ -60,19 +60,38 @@ function Badge({ children, className }) {
60
60
  var import_jsx_runtime2 = require("react/jsx-runtime");
61
61
  function BlogRenderer({ content, metadata, className = "", components }) {
62
62
  const defaultComponents = {
63
- h1: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800", ...props }),
64
- h2: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800", ...props }),
65
- h3: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-2xl font-semibold mb-2 mt-4 text-gray-800", ...props }),
66
- h4: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "text-xl font-semibold mb-2 mt-4 text-gray-800", ...props }),
67
- h5: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h5", { className: "text-lg font-semibold mb-2 mt-3 text-gray-800", ...props }),
68
- h6: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h6", { className: "text-base font-semibold mb-2 mt-3 text-gray-800", ...props }),
69
- p: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-4 leading-7 text-gray-600", ...props }),
70
- ul: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "mb-4 ml-6 list-disc text-gray-600", ...props }),
71
- ol: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "mb-4 ml-6 list-decimal text-gray-600", ...props }),
63
+ h1: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800 dark:text-gray-100", ...props }),
64
+ h2: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800 dark:text-gray-100", ...props }),
65
+ h3: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
66
+ "h3",
67
+ {
68
+ className: "text-2xl font-semibold mb-2 mt-4 text-gray-800 dark:text-gray-100",
69
+ ...props
70
+ }
71
+ ),
72
+ h4: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "text-xl font-semibold mb-2 mt-4 text-gray-800 dark:text-gray-100", ...props }),
73
+ h5: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h5", { className: "text-lg font-semibold mb-2 mt-3 text-gray-800 dark:text-gray-100", ...props }),
74
+ h6: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
75
+ "h6",
76
+ {
77
+ className: "text-base font-semibold mb-2 mt-3 text-gray-800 dark:text-gray-100",
78
+ ...props
79
+ }
80
+ ),
81
+ p: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-4 leading-7 text-gray-600 dark:text-gray-300", ...props }),
82
+ ul: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "mb-4 ml-6 list-disc text-gray-600 dark:text-gray-300", ...props }),
83
+ ol: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "mb-4 ml-6 list-decimal text-gray-600 dark:text-gray-300", ...props }),
72
84
  li: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: "mb-2", ...props }),
73
85
  code: ({ className: codeClassName, children, ...props }) => {
74
86
  const isInline = !codeClassName;
75
- return isInline ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: "px-1.5 py-0.5 bg-gray-100 rounded text-sm text-red-600", ...props, children }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: codeClassName, ...props, children });
87
+ return isInline ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
88
+ "code",
89
+ {
90
+ className: "px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm text-red-600 dark:text-red-400",
91
+ ...props,
92
+ children
93
+ }
94
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: codeClassName, ...props, children });
76
95
  },
77
96
  pre: ({ className: preClassName, children, ...props }) => {
78
97
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -87,30 +106,54 @@ function BlogRenderer({ content, metadata, className = "", components }) {
87
106
  blockquote: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
88
107
  "blockquote",
89
108
  {
90
- className: "border-l-4 border-blue-500 pl-4 italic my-4 text-gray-600",
109
+ className: "border-l-4 border-blue-500 dark:border-blue-400 pl-4 italic my-4 text-gray-600 dark:text-gray-400",
110
+ ...props
111
+ }
112
+ ),
113
+ a: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
114
+ "a",
115
+ {
116
+ className: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline",
91
117
  ...props
92
118
  }
93
119
  ),
94
- a: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "text-blue-600 hover:text-blue-800 underline", ...props }),
95
- strong: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: "font-semibold text-gray-800", ...props }),
120
+ strong: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: "font-semibold text-gray-800 dark:text-gray-100", ...props }),
96
121
  em: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { className: "italic", ...props }),
97
- del: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("del", { className: "line-through text-gray-500", ...props }),
98
- hr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", { className: "my-8 border-gray-300", ...props }),
122
+ del: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("del", { className: "line-through text-gray-500 dark:text-gray-400", ...props }),
123
+ hr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", { className: "my-8 border-gray-300 dark:border-gray-700", ...props }),
99
124
  br: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("br", { ...props }),
100
125
  img: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { className: "max-w-full h-auto rounded-lg my-4", ...props }),
101
- table: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("table", { className: "min-w-full border border-gray-300 rounded", ...props }) }),
102
- thead: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { className: "bg-gray-50", ...props }),
126
+ table: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
127
+ "table",
128
+ {
129
+ className: "min-w-full border border-gray-300 dark:border-gray-700 rounded",
130
+ ...props
131
+ }
132
+ ) }),
133
+ thead: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800", ...props }),
103
134
  tbody: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { ...props }),
104
- tr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "border-b border-gray-300", ...props }),
105
- th: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "px-4 py-2 text-left font-semibold border border-gray-300", ...props }),
106
- td: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "px-4 py-2 border border-gray-300", ...props }),
135
+ tr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "border-b border-gray-300 dark:border-gray-700", ...props }),
136
+ th: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
137
+ "th",
138
+ {
139
+ className: "px-4 py-2 text-left font-semibold border border-gray-300 dark:border-gray-700 dark:text-gray-100",
140
+ ...props
141
+ }
142
+ ),
143
+ td: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
144
+ "td",
145
+ {
146
+ className: "px-4 py-2 border border-gray-300 dark:border-gray-700 dark:text-gray-300",
147
+ ...props
148
+ }
149
+ ),
107
150
  input: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { className: "mr-2", type: "checkbox", disabled: true, ...props })
108
151
  };
109
152
  const mergedComponents = { ...defaultComponents, ...components };
110
153
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
111
154
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3 mb-4", children: [
112
155
  metadata.category && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { children: metadata.category }),
113
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
156
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [
114
157
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: metadata.readingTime }),
115
158
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u2022" }),
116
159
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
@@ -120,7 +163,7 @@ function BlogRenderer({ content, metadata, className = "", components }) {
120
163
  }) })
121
164
  ] })
122
165
  ] }),
123
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `prose prose-slate max-w-none ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
166
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `prose prose-slate dark:prose-invert max-w-none ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
124
167
  import_react_markdown.default,
125
168
  {
126
169
  remarkPlugins: [import_remark_gfm.default],
@@ -149,11 +192,11 @@ function BlogCard({
149
192
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
150
193
  "article",
151
194
  {
152
- className: `bg-white rounded-lg border border-gray-200 hover:border-gray-300 p-6 transition-colors ${className}`,
195
+ className: `rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800 p-6 transition-colors ${className}`,
153
196
  children: [
154
197
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3", children: [
155
198
  showCategory && metadata.category && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Badge, { children: metadata.category }),
156
- (showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
199
+ (showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [
157
200
  showReadingTime && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: metadata.readingTime }),
158
201
  showReadingTime && showDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u2022" }),
159
202
  showDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
@@ -165,12 +208,12 @@ function BlogCard({
165
208
  ] }) }),
166
209
  Link(
167
210
  href,
168
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "font-semibold text-xl text-gray-700 mb-2 hover:underline transition-colors", children: metadata.title })
211
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "font-semibold text-xl text-gray-700 dark:text-gray-100 mb-2 hover:underline transition-colors", children: metadata.title })
169
212
  ),
170
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-500 leading-6 mb-4", children: metadata.description }),
213
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-300 leading-6 mb-4", children: metadata.description }),
171
214
  Link(
172
215
  href,
173
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm", children: "Read more \u2192" })
216
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm", children: "Read more \u2192" })
174
217
  )
175
218
  ]
176
219
  }
@@ -188,7 +231,7 @@ function BlogList({
188
231
  cardProps
189
232
  }) {
190
233
  if (metadata.length === 0) {
191
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `text-center text-gray-500 py-12 ${className}`, children: emptyMessage });
234
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `text-center text-gray-500 dark:text-gray-400 py-12 ${className}`, children: emptyMessage });
192
235
  }
193
236
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `space-y-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
194
237
  BlogCard,
@@ -205,11 +248,18 @@ function BlogList({
205
248
  // src/components/BlogPlaceholder.tsx
206
249
  var import_jsx_runtime5 = require("react/jsx-runtime");
207
250
  function BlogPlaceholder({ count = 3, className = "" }) {
208
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bg-white rounded-lg border border-gray-200 p-6 animate-pulse", children: [
209
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 bg-gray-200 rounded mb-3" }),
210
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-6 bg-gray-200 rounded mb-2" }),
211
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 bg-gray-200 rounded w-3/4" })
212
- ] }, i)) });
251
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
252
+ "div",
253
+ {
254
+ className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 animate-pulse",
255
+ children: [
256
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded mb-3" }),
257
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
258
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" })
259
+ ]
260
+ },
261
+ i
262
+ )) });
213
263
  }
214
264
 
215
265
  // src/hooks/useBlogs.ts
package/dist/index.d.cts CHANGED
@@ -44,7 +44,7 @@ interface BlogListProps {
44
44
  renderLink?: BlogCardProps['renderLink'];
45
45
  className?: string;
46
46
  emptyMessage?: string;
47
- cardProps?: Omit<BlogCardProps, 'blog' | 'basePath' | 'renderLink'>;
47
+ cardProps?: Omit<BlogCardProps, 'metadata' | 'basePath' | 'renderLink'>;
48
48
  }
49
49
  declare function BlogList({ metadata, basePath, renderLink, className, emptyMessage, cardProps, }: BlogListProps): react_jsx_runtime.JSX.Element;
50
50
 
package/dist/index.d.ts CHANGED
@@ -44,7 +44,7 @@ interface BlogListProps {
44
44
  renderLink?: BlogCardProps['renderLink'];
45
45
  className?: string;
46
46
  emptyMessage?: string;
47
- cardProps?: Omit<BlogCardProps, 'blog' | 'basePath' | 'renderLink'>;
47
+ cardProps?: Omit<BlogCardProps, 'metadata' | 'basePath' | 'renderLink'>;
48
48
  }
49
49
  declare function BlogList({ metadata, basePath, renderLink, className, emptyMessage, cardProps, }: BlogListProps): react_jsx_runtime.JSX.Element;
50
50
 
package/dist/index.js CHANGED
@@ -10,7 +10,7 @@ function Badge({ children, className }) {
10
10
  return /* @__PURE__ */ jsx(
11
11
  "span",
12
12
  {
13
- className: `inline-flex items-center rounded-full border border-transparent bg-orange-100 px-2.5 py-0.5 text-xs font-semibold text-orange-500 ${className}`,
13
+ className: `inline-flex items-center rounded-full border border-transparent bg-orange-100 dark:bg-orange-900/30 px-2.5 py-0.5 text-xs font-semibold text-orange-500 dark:text-orange-300 ${className}`,
14
14
  children
15
15
  }
16
16
  );
@@ -20,19 +20,38 @@ function Badge({ children, className }) {
20
20
  import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
21
21
  function BlogRenderer({ content, metadata, className = "", components }) {
22
22
  const defaultComponents = {
23
- h1: ({ ...props }) => /* @__PURE__ */ jsx2("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800", ...props }),
24
- h2: ({ ...props }) => /* @__PURE__ */ jsx2("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800", ...props }),
25
- h3: ({ ...props }) => /* @__PURE__ */ jsx2("h3", { className: "text-2xl font-semibold mb-2 mt-4 text-gray-800", ...props }),
26
- h4: ({ ...props }) => /* @__PURE__ */ jsx2("h4", { className: "text-xl font-semibold mb-2 mt-4 text-gray-800", ...props }),
27
- h5: ({ ...props }) => /* @__PURE__ */ jsx2("h5", { className: "text-lg font-semibold mb-2 mt-3 text-gray-800", ...props }),
28
- h6: ({ ...props }) => /* @__PURE__ */ jsx2("h6", { className: "text-base font-semibold mb-2 mt-3 text-gray-800", ...props }),
29
- p: ({ ...props }) => /* @__PURE__ */ jsx2("p", { className: "mb-4 leading-7 text-gray-600", ...props }),
30
- ul: ({ ...props }) => /* @__PURE__ */ jsx2("ul", { className: "mb-4 ml-6 list-disc text-gray-600", ...props }),
31
- ol: ({ ...props }) => /* @__PURE__ */ jsx2("ol", { className: "mb-4 ml-6 list-decimal text-gray-600", ...props }),
23
+ h1: ({ ...props }) => /* @__PURE__ */ jsx2("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800 dark:text-gray-100", ...props }),
24
+ h2: ({ ...props }) => /* @__PURE__ */ jsx2("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800 dark:text-gray-100", ...props }),
25
+ h3: ({ ...props }) => /* @__PURE__ */ jsx2(
26
+ "h3",
27
+ {
28
+ className: "text-2xl font-semibold mb-2 mt-4 text-gray-800 dark:text-gray-100",
29
+ ...props
30
+ }
31
+ ),
32
+ h4: ({ ...props }) => /* @__PURE__ */ jsx2("h4", { className: "text-xl font-semibold mb-2 mt-4 text-gray-800 dark:text-gray-100", ...props }),
33
+ h5: ({ ...props }) => /* @__PURE__ */ jsx2("h5", { className: "text-lg font-semibold mb-2 mt-3 text-gray-800 dark:text-gray-100", ...props }),
34
+ h6: ({ ...props }) => /* @__PURE__ */ jsx2(
35
+ "h6",
36
+ {
37
+ className: "text-base font-semibold mb-2 mt-3 text-gray-800 dark:text-gray-100",
38
+ ...props
39
+ }
40
+ ),
41
+ p: ({ ...props }) => /* @__PURE__ */ jsx2("p", { className: "mb-4 leading-7 text-gray-600 dark:text-gray-300", ...props }),
42
+ ul: ({ ...props }) => /* @__PURE__ */ jsx2("ul", { className: "mb-4 ml-6 list-disc text-gray-600 dark:text-gray-300", ...props }),
43
+ ol: ({ ...props }) => /* @__PURE__ */ jsx2("ol", { className: "mb-4 ml-6 list-decimal text-gray-600 dark:text-gray-300", ...props }),
32
44
  li: ({ ...props }) => /* @__PURE__ */ jsx2("li", { className: "mb-2", ...props }),
33
45
  code: ({ className: codeClassName, children, ...props }) => {
34
46
  const isInline = !codeClassName;
35
- return isInline ? /* @__PURE__ */ jsx2("code", { className: "px-1.5 py-0.5 bg-gray-100 rounded text-sm text-red-600", ...props, children }) : /* @__PURE__ */ jsx2("code", { className: codeClassName, ...props, children });
47
+ return isInline ? /* @__PURE__ */ jsx2(
48
+ "code",
49
+ {
50
+ className: "px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm text-red-600 dark:text-red-400",
51
+ ...props,
52
+ children
53
+ }
54
+ ) : /* @__PURE__ */ jsx2("code", { className: codeClassName, ...props, children });
36
55
  },
37
56
  pre: ({ className: preClassName, children, ...props }) => {
38
57
  return /* @__PURE__ */ jsx2(
@@ -47,30 +66,54 @@ function BlogRenderer({ content, metadata, className = "", components }) {
47
66
  blockquote: ({ ...props }) => /* @__PURE__ */ jsx2(
48
67
  "blockquote",
49
68
  {
50
- className: "border-l-4 border-blue-500 pl-4 italic my-4 text-gray-600",
69
+ className: "border-l-4 border-blue-500 dark:border-blue-400 pl-4 italic my-4 text-gray-600 dark:text-gray-400",
70
+ ...props
71
+ }
72
+ ),
73
+ a: ({ ...props }) => /* @__PURE__ */ jsx2(
74
+ "a",
75
+ {
76
+ className: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline",
51
77
  ...props
52
78
  }
53
79
  ),
54
- a: ({ ...props }) => /* @__PURE__ */ jsx2("a", { className: "text-blue-600 hover:text-blue-800 underline", ...props }),
55
- strong: ({ ...props }) => /* @__PURE__ */ jsx2("strong", { className: "font-semibold text-gray-800", ...props }),
80
+ strong: ({ ...props }) => /* @__PURE__ */ jsx2("strong", { className: "font-semibold text-gray-800 dark:text-gray-100", ...props }),
56
81
  em: ({ ...props }) => /* @__PURE__ */ jsx2("em", { className: "italic", ...props }),
57
- del: ({ ...props }) => /* @__PURE__ */ jsx2("del", { className: "line-through text-gray-500", ...props }),
58
- hr: ({ ...props }) => /* @__PURE__ */ jsx2("hr", { className: "my-8 border-gray-300", ...props }),
82
+ del: ({ ...props }) => /* @__PURE__ */ jsx2("del", { className: "line-through text-gray-500 dark:text-gray-400", ...props }),
83
+ hr: ({ ...props }) => /* @__PURE__ */ jsx2("hr", { className: "my-8 border-gray-300 dark:border-gray-700", ...props }),
59
84
  br: ({ ...props }) => /* @__PURE__ */ jsx2("br", { ...props }),
60
85
  img: ({ ...props }) => /* @__PURE__ */ jsx2("img", { className: "max-w-full h-auto rounded-lg my-4", ...props }),
61
- table: ({ ...props }) => /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ jsx2("table", { className: "min-w-full border border-gray-300 rounded", ...props }) }),
62
- thead: ({ ...props }) => /* @__PURE__ */ jsx2("thead", { className: "bg-gray-50", ...props }),
86
+ table: ({ ...props }) => /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ jsx2(
87
+ "table",
88
+ {
89
+ className: "min-w-full border border-gray-300 dark:border-gray-700 rounded",
90
+ ...props
91
+ }
92
+ ) }),
93
+ thead: ({ ...props }) => /* @__PURE__ */ jsx2("thead", { className: "bg-gray-50 dark:bg-gray-800", ...props }),
63
94
  tbody: ({ ...props }) => /* @__PURE__ */ jsx2("tbody", { ...props }),
64
- tr: ({ ...props }) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-gray-300", ...props }),
65
- th: ({ ...props }) => /* @__PURE__ */ jsx2("th", { className: "px-4 py-2 text-left font-semibold border border-gray-300", ...props }),
66
- td: ({ ...props }) => /* @__PURE__ */ jsx2("td", { className: "px-4 py-2 border border-gray-300", ...props }),
95
+ tr: ({ ...props }) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-gray-300 dark:border-gray-700", ...props }),
96
+ th: ({ ...props }) => /* @__PURE__ */ jsx2(
97
+ "th",
98
+ {
99
+ className: "px-4 py-2 text-left font-semibold border border-gray-300 dark:border-gray-700 dark:text-gray-100",
100
+ ...props
101
+ }
102
+ ),
103
+ td: ({ ...props }) => /* @__PURE__ */ jsx2(
104
+ "td",
105
+ {
106
+ className: "px-4 py-2 border border-gray-300 dark:border-gray-700 dark:text-gray-300",
107
+ ...props
108
+ }
109
+ ),
67
110
  input: ({ ...props }) => /* @__PURE__ */ jsx2("input", { className: "mr-2", type: "checkbox", disabled: true, ...props })
68
111
  };
69
112
  const mergedComponents = { ...defaultComponents, ...components };
70
113
  return /* @__PURE__ */ jsxs(Fragment, { children: [
71
114
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
72
115
  metadata.category && /* @__PURE__ */ jsx2(Badge, { children: metadata.category }),
73
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
116
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [
74
117
  /* @__PURE__ */ jsx2("span", { children: metadata.readingTime }),
75
118
  /* @__PURE__ */ jsx2("span", { children: "\u2022" }),
76
119
  /* @__PURE__ */ jsx2("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
@@ -80,7 +123,7 @@ function BlogRenderer({ content, metadata, className = "", components }) {
80
123
  }) })
81
124
  ] })
82
125
  ] }),
83
- /* @__PURE__ */ jsx2("div", { className: `prose prose-slate max-w-none ${className}`, children: /* @__PURE__ */ jsx2(
126
+ /* @__PURE__ */ jsx2("div", { className: `prose prose-slate dark:prose-invert max-w-none ${className}`, children: /* @__PURE__ */ jsx2(
84
127
  ReactMarkdown,
85
128
  {
86
129
  remarkPlugins: [remarkGfm],
@@ -109,11 +152,11 @@ function BlogCard({
109
152
  return /* @__PURE__ */ jsxs2(
110
153
  "article",
111
154
  {
112
- className: `bg-white rounded-lg border border-gray-200 hover:border-gray-300 p-6 transition-colors ${className}`,
155
+ className: `rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800 p-6 transition-colors ${className}`,
113
156
  children: [
114
157
  /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
115
158
  showCategory && metadata.category && /* @__PURE__ */ jsx3(Badge, { children: metadata.category }),
116
- (showReadingTime || showDate) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
159
+ (showReadingTime || showDate) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [
117
160
  showReadingTime && /* @__PURE__ */ jsx3("span", { children: metadata.readingTime }),
118
161
  showReadingTime && showDate && /* @__PURE__ */ jsx3("span", { children: "\u2022" }),
119
162
  showDate && /* @__PURE__ */ jsx3("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
@@ -125,12 +168,12 @@ function BlogCard({
125
168
  ] }) }),
126
169
  Link(
127
170
  href,
128
- /* @__PURE__ */ jsx3("h2", { className: "font-semibold text-xl text-gray-700 mb-2 hover:underline transition-colors", children: metadata.title })
171
+ /* @__PURE__ */ jsx3("h2", { className: "font-semibold text-xl text-gray-700 dark:text-gray-100 mb-2 hover:underline transition-colors", children: metadata.title })
129
172
  ),
130
- /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 leading-6 mb-4", children: metadata.description }),
173
+ /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 dark:text-gray-300 leading-6 mb-4", children: metadata.description }),
131
174
  Link(
132
175
  href,
133
- /* @__PURE__ */ jsx3("span", { className: "inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm", children: "Read more \u2192" })
176
+ /* @__PURE__ */ jsx3("span", { className: "inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm", children: "Read more \u2192" })
134
177
  )
135
178
  ]
136
179
  }
@@ -148,7 +191,7 @@ function BlogList({
148
191
  cardProps
149
192
  }) {
150
193
  if (metadata.length === 0) {
151
- return /* @__PURE__ */ jsx4("div", { className: `text-center text-gray-500 py-12 ${className}`, children: emptyMessage });
194
+ return /* @__PURE__ */ jsx4("div", { className: `text-center text-gray-500 dark:text-gray-400 py-12 ${className}`, children: emptyMessage });
152
195
  }
153
196
  return /* @__PURE__ */ jsx4("div", { className: `space-y-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ jsx4(
154
197
  BlogCard,
@@ -165,11 +208,18 @@ function BlogList({
165
208
  // src/components/BlogPlaceholder.tsx
166
209
  import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
167
210
  function BlogPlaceholder({ count = 3, className = "" }) {
168
- return /* @__PURE__ */ jsx5("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "bg-white rounded-lg border border-gray-200 p-6 animate-pulse", children: [
169
- /* @__PURE__ */ jsx5("div", { className: "h-4 bg-gray-200 rounded mb-3" }),
170
- /* @__PURE__ */ jsx5("div", { className: "h-6 bg-gray-200 rounded mb-2" }),
171
- /* @__PURE__ */ jsx5("div", { className: "h-4 bg-gray-200 rounded w-3/4" })
172
- ] }, i)) });
211
+ return /* @__PURE__ */ jsx5("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs3(
212
+ "div",
213
+ {
214
+ className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 animate-pulse",
215
+ children: [
216
+ /* @__PURE__ */ jsx5("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded mb-3" }),
217
+ /* @__PURE__ */ jsx5("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
218
+ /* @__PURE__ */ jsx5("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" })
219
+ ]
220
+ },
221
+ i
222
+ )) });
173
223
  }
174
224
 
175
225
  // src/hooks/useBlogs.ts
package/dist/style.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
2
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-500:oklch(70.5% .213 47.604);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.my-4{margin-block:calc(var(--spacing)*4)}.my-8{margin-block:calc(var(--spacing)*8)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-6{margin-left:calc(var(--spacing)*6)}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-auto{height:auto}.w-3\/4{width:75%}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-full{min-width:100%}.animate-pulse{animation:var(--animate-pulse)}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-transparent{border-color:#0000}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing)*6)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-12{padding-block:calc(var(--spacing)*12)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-7{--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-orange-500{color:var(--color-orange-500)}.text-red-600{color:var(--color-red-600)}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:underline:hover{text-decoration-line:underline}}.\[\&\>code\]\:block>code{display:block}.\[\&\>code\]\:p-4>code{padding:calc(var(--spacing)*4)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-600:oklch(57.7% .245 27.325);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-900:oklch(40.8% .123 38.172);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.my-4{margin-block:calc(var(--spacing)*4)}.my-8{margin-block:calc(var(--spacing)*8)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-6{margin-left:calc(var(--spacing)*6)}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-auto{height:auto}.w-3\/4{width:75%}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-full{min-width:100%}.animate-pulse{animation:var(--animate-pulse)}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-transparent{border-color:#0000}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing)*6)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-12{padding-block:calc(var(--spacing)*12)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-7{--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-orange-500{color:var(--color-orange-500)}.text-red-600{color:var(--color-red-600)}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:underline:hover{text-decoration-line:underline}}@media (prefers-color-scheme:dark){.dark\:border-blue-400{border-color:var(--color-blue-400)}.dark\:border-gray-700{border-color:var(--color-gray-700)}.dark\:bg-gray-700{background-color:var(--color-gray-700)}.dark\:bg-gray-800{background-color:var(--color-gray-800)}.dark\:bg-orange-900\/30{background-color:#7e2a0c4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-orange-900\/30{background-color:color-mix(in oklab,var(--color-orange-900)30%,transparent)}}.dark\:text-blue-400{color:var(--color-blue-400)}.dark\:text-gray-100{color:var(--color-gray-100)}.dark\:text-gray-300{color:var(--color-gray-300)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-orange-300{color:var(--color-orange-300)}.dark\:text-red-400{color:var(--color-red-400)}@media (hover:hover){.dark\:hover\:border-gray-600:hover{border-color:var(--color-gray-600)}.dark\:hover\:text-blue-300:hover{color:var(--color-blue-300)}}}.\[\&\>code\]\:block>code{display:block}.\[\&\>code\]\:p-4>code{padding:calc(var(--spacing)*4)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haroonwaves/blog-kit-react",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",