@admin-layout/demo-tailwind-browser 10.1.1-alpha.9 → 12.0.16-alpha.0

package/lib/components/ThemeExample.js

@@ -1,436 +0,0 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useTheme}from'@admin-layout/tailwind-design-pro';const ThemeShowcase = () => {
-  const {
-    theme,
-    isDarkMode
-  } = useTheme();
-  // Get text color based on dark mode
-  const textColors = isDarkMode ? theme.colors.text.dark : theme.colors.text.light;
-  return jsxs("div", {
-    className: "w-full max-w-4xl mx-auto space-y-8",
-    children: [jsxs("section", {
-      className: "space-y-4",
-      children: [jsx("h2", {
-        className: "text-2xl font-bold",
-        style: {
-          color: textColors.primary
-        },
-        children: "Color Palette"
-      }), jsxs("div", {
-        className: "space-y-4",
-        children: [jsxs("div", {
-          children: [jsx("h3", {
-            className: "mb-2 font-medium",
-            style: {
-              color: textColors.secondary
-            },
-            children: "Primary"
-          }), jsx("div", {
-            className: "grid grid-cols-11 gap-1 h-12",
-            children: Object.entries(theme.colors.primary).map(([shade, color]) => jsx("div", {
-              className: "rounded flex items-end justify-center p-1",
-              style: {
-                backgroundColor: color
-              },
-              children: jsx("span", {
-                className: "text-[10px] font-mono",
-                style: {
-                  color: parseInt(shade) > 500 ? '#fff' : '#000',
-                  opacity: 0.8
-                },
-                children: shade
-              })
-            }, `primary-${shade}`))
-          })]
-        }), jsxs("div", {
-          children: [jsx("h3", {
-            className: "mb-2 font-medium",
-            style: {
-              color: textColors.secondary
-            },
-            children: "Secondary"
-          }), jsx("div", {
-            className: "grid grid-cols-11 gap-1 h-12",
-            children: Object.entries(theme.colors.secondary).map(([shade, color]) => jsx("div", {
-              className: "rounded flex items-end justify-center p-1",
-              style: {
-                backgroundColor: color
-              },
-              children: jsx("span", {
-                className: "text-[10px] font-mono",
-                style: {
-                  color: parseInt(shade) > 500 ? '#fff' : '#000',
-                  opacity: 0.8
-                },
-                children: shade
-              })
-            }, `secondary-${shade}`))
-          })]
-        }), jsxs("div", {
-          children: [jsx("h3", {
-            className: "mb-2 font-medium",
-            style: {
-              color: textColors.secondary
-            },
-            children: "Accent"
-          }), jsx("div", {
-            className: "grid grid-cols-11 gap-1 h-12",
-            children: Object.entries(theme.colors.accent).map(([shade, color]) => jsx("div", {
-              className: "rounded flex items-end justify-center p-1",
-              style: {
-                backgroundColor: color
-              },
-              children: jsx("span", {
-                className: "text-[10px] font-mono",
-                style: {
-                  color: parseInt(shade) > 500 ? '#fff' : '#000',
-                  opacity: 0.8
-                },
-                children: shade
-              })
-            }, `accent-${shade}`))
-          })]
-        }), jsxs("div", {
-          className: "grid grid-cols-3 gap-4",
-          children: [jsxs("div", {
-            children: [jsx("h3", {
-              className: "mb-2 font-medium",
-              style: {
-                color: textColors.secondary
-              },
-              children: "Success"
-            }), jsx("div", {
-              className: "h-12 rounded flex items-center justify-center",
-              style: {
-                backgroundColor: theme.colors.success[500]
-              },
-              children: jsx("span", {
-                className: "text-white font-medium",
-                children: "Success"
-              })
-            })]
-          }), jsxs("div", {
-            children: [jsx("h3", {
-              className: "mb-2 font-medium",
-              style: {
-                color: textColors.secondary
-              },
-              children: "Warning"
-            }), jsx("div", {
-              className: "h-12 rounded flex items-center justify-center",
-              style: {
-                backgroundColor: theme.colors.warning[500]
-              },
-              children: jsx("span", {
-                className: "text-black font-medium",
-                children: "Warning"
-              })
-            })]
-          }), jsxs("div", {
-            children: [jsx("h3", {
-              className: "mb-2 font-medium",
-              style: {
-                color: textColors.secondary
-              },
-              children: "Error"
-            }), jsx("div", {
-              className: "h-12 rounded flex items-center justify-center",
-              style: {
-                backgroundColor: theme.colors.error[500]
-              },
-              children: jsx("span", {
-                className: "text-white font-medium",
-                children: "Error"
-              })
-            })]
-          })]
-        })]
-      })]
-    }), jsxs("section", {
-      className: "space-y-4",
-      children: [jsx("h2", {
-        className: "text-2xl font-bold",
-        style: {
-          color: textColors.primary
-        },
-        children: "Typography"
-      }), jsxs("div", {
-        className: "space-y-6",
-        children: [jsxs("div", {
-          className: "space-y-3",
-          children: [jsx("h1", {
-            className: "text-4xl",
-            style: {
-              fontFamily: theme.fontFamily.sans.join(', '),
-              fontWeight: theme.typography.headings.fontWeight,
-              lineHeight: theme.typography.headings.lineHeight,
-              letterSpacing: theme.typography.headings.letterSpacing,
-              color: textColors.primary
-            },
-            children: "Heading 1"
-          }), jsx("h2", {
-            className: "text-3xl",
-            style: {
-              fontFamily: theme.fontFamily.sans.join(', '),
-              fontWeight: theme.typography.headings.fontWeight,
-              lineHeight: theme.typography.headings.lineHeight,
-              letterSpacing: theme.typography.headings.letterSpacing,
-              color: textColors.primary
-            },
-            children: "Heading 2"
-          }), jsx("h3", {
-            className: "text-2xl",
-            style: {
-              fontFamily: theme.fontFamily.sans.join(', '),
-              fontWeight: theme.typography.headings.fontWeight,
-              lineHeight: theme.typography.headings.lineHeight,
-              letterSpacing: theme.typography.headings.letterSpacing,
-              color: textColors.primary
-            },
-            children: "Heading 3"
-          }), jsx("h4", {
-            className: "text-xl",
-            style: {
-              fontFamily: theme.fontFamily.sans.join(', '),
-              fontWeight: theme.typography.headings.fontWeight,
-              lineHeight: theme.typography.headings.lineHeight,
-              letterSpacing: theme.typography.headings.letterSpacing,
-              color: textColors.primary
-            },
-            children: "Heading 4"
-          })]
-        }), jsxs("div", {
-          className: "space-y-3",
-          children: [jsxs("p", {
-            className: "text-base",
-            style: {
-              fontFamily: theme.fontFamily.sans.join(', '),
-              fontWeight: theme.typography.body.fontWeight,
-              lineHeight: theme.typography.body.lineHeight,
-              letterSpacing: theme.typography.body.letterSpacing,
-              color: textColors.primary
-            },
-            children: ["This is regular body text in the ", theme.name, " theme. It demonstrates the default paragraph styling with appropriate line height and letter spacing."]
-          }), jsx("p", {
-            className: "text-sm",
-            style: {
-              fontFamily: theme.fontFamily.sans.join(', '),
-              fontWeight: theme.typography.body.fontWeight,
-              lineHeight: theme.typography.body.lineHeight,
-              letterSpacing: theme.typography.body.letterSpacing,
-              color: textColors.secondary
-            },
-            children: "This is smaller text that might be used for secondary information."
-          }), jsx("p", {
-            className: "text-xs",
-            style: {
-              fontFamily: theme.fontFamily.sans.join(', '),
-              fontWeight: theme.typography.body.fontWeight,
-              lineHeight: theme.typography.body.lineHeight,
-              letterSpacing: theme.typography.body.letterSpacing,
-              color: textColors.tertiary
-            },
-            children: "This is small text used for captions, hints, or metadata."
-          })]
-        }), jsxs("div", {
-          children: [jsx("h3", {
-            className: "mb-2 font-medium",
-            style: {
-              color: textColors.secondary
-            },
-            children: "Monospace"
-          }), jsxs("code", {
-            className: "text-sm block p-3 rounded",
-            style: {
-              fontFamily: theme.fontFamily.mono.join(', '),
-              backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
-              color: textColors.primary
-            },
-            children: ["console.log(\"Hello from the ", theme.name, " theme!\");"]
-          })]
-        })]
-      })]
-    }), jsxs("section", {
-      className: "space-y-4",
-      children: [jsx("h2", {
-        className: "text-2xl font-bold",
-        style: {
-          color: textColors.primary
-        },
-        children: "Components"
-      }), jsxs("div", {
-        className: "space-y-6",
-        children: [jsxs("div", {
-          children: [jsx("h3", {
-            className: "mb-4 font-medium",
-            style: {
-              color: textColors.secondary
-            },
-            children: "Buttons"
-          }), jsxs("div", {
-            className: "flex flex-wrap gap-4",
-            children: [jsx("button", {
-              className: "transition-all hover:scale-105",
-              style: {
-                backgroundColor: theme.components.buttons.primary.background,
-                color: theme.components.buttons.primary.text,
-                borderRadius: theme.components.buttons.primary.borderRadius,
-                padding: theme.components.buttons.primary.padding,
-                fontWeight: theme.components.buttons.primary.fontWeight
-              },
-              children: "Primary Button"
-            }), jsx("button", {
-              className: "transition-all hover:scale-105",
-              style: {
-                backgroundColor: theme.components.buttons.secondary.background,
-                color: theme.components.buttons.secondary.text,
-                border: theme.components.buttons.secondary.border,
-                borderRadius: theme.components.buttons.secondary.borderRadius,
-                padding: theme.components.buttons.secondary.padding,
-                fontWeight: theme.components.buttons.secondary.fontWeight
-              },
-              children: "Secondary Button"
-            })]
-          })]
-        }), jsxs("div", {
-          children: [jsx("h3", {
-            className: "mb-4 font-medium",
-            style: {
-              color: textColors.secondary
-            },
-            children: "Cards"
-          }), jsxs("div", {
-            className: "grid grid-cols-1 md:grid-cols-2 gap-6",
-            children: [jsxs("div", {
-              style: {
-                borderRadius: theme.components.cards.borderRadius,
-                padding: theme.components.cards.padding,
-                boxShadow: theme.components.cards.shadow,
-                border: theme.components.cards.border,
-                backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'white'
-              },
-              children: [jsx("h4", {
-                className: "text-lg mb-2",
-                style: {
-                  color: textColors.primary,
-                  fontWeight: theme.typography.headings.fontWeight
-                },
-                children: "Card Title"
-              }), jsxs("p", {
-                style: {
-                  color: textColors.secondary
-                },
-                children: ["This is an example card component styled according to the ", theme.name, " theme guidelines."]
-              })]
-            }), jsxs("div", {
-              style: {
-                borderRadius: theme.components.cards.borderRadius,
-                padding: theme.components.cards.padding,
-                boxShadow: theme.components.cards.shadow,
-                border: theme.components.cards.border,
-                backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'white'
-              },
-              children: [jsx("h4", {
-                className: "text-lg mb-2",
-                style: {
-                  color: textColors.primary,
-                  fontWeight: theme.typography.headings.fontWeight
-                },
-                children: "Featured Content"
-              }), jsx("p", {
-                style: {
-                  color: textColors.secondary
-                },
-                children: "Cards can be used to highlight important content or provide interactive elements."
-              }), jsx("button", {
-                className: "mt-4 transition-all hover:scale-105",
-                style: {
-                  backgroundColor: theme.components.buttons.primary.background,
-                  color: theme.components.buttons.primary.text,
-                  borderRadius: theme.components.buttons.primary.borderRadius,
-                  padding: '8px 16px',
-                  // Smaller for card context
-                  fontWeight: theme.components.buttons.primary.fontWeight
-                },
-                children: "Learn More"
-              })]
-            })]
-          })]
-        }), jsxs("div", {
-          children: [jsx("h3", {
-            className: "mb-4 font-medium",
-            style: {
-              color: textColors.secondary
-            },
-            children: "Form Controls"
-          }), jsxs("div", {
-            className: "space-y-4 max-w-md",
-            children: [jsxs("div", {
-              children: [jsx("label", {
-                className: "block mb-2 text-sm font-medium",
-                style: {
-                  color: textColors.secondary
-                },
-                children: "Text Input"
-              }), jsx("input", {
-                type: "text",
-                placeholder: "Enter some text",
-                className: "w-full transition-all focus:ring-2 focus:outline-none",
-                style: {
-                  backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'white',
-                  color: textColors.primary,
-                  borderRadius: theme.components.inputs.borderRadius,
-                  padding: theme.components.inputs.padding,
-                  fontSize: theme.components.inputs.fontSize,
-                  lineHeight: theme.components.inputs.lineHeight,
-                  border: `1px solid ${isDarkMode ? 'rgba(255, 255, 255, 0.2)' : theme.components.inputs.borderColor}`
-                }
-              })]
-            }), jsxs("div", {
-              children: [jsx("label", {
-                className: "block mb-2 text-sm font-medium",
-                style: {
-                  color: textColors.secondary
-                },
-                children: "Select Menu"
-              }), jsxs("select", {
-                className: "w-full transition-all focus:ring-2 focus:outline-none",
-                style: {
-                  backgroundColor: isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'white',
-                  color: textColors.primary,
-                  borderRadius: theme.components.inputs.borderRadius,
-                  padding: theme.components.inputs.padding,
-                  fontSize: theme.components.inputs.fontSize,
-                  lineHeight: theme.components.inputs.lineHeight,
-                  border: `1px solid ${isDarkMode ? 'rgba(255, 255, 255, 0.2)' : theme.components.inputs.borderColor}`
-                },
-                children: [jsx("option", {
-                  children: "Option 1"
-                }), jsx("option", {
-                  children: "Option 2"
-                }), jsx("option", {
-                  children: "Option 3"
-                })]
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("input", {
-                type: "checkbox",
-                id: "checkbox-example",
-                className: "mr-2 h-4 w-4 transition-all",
-                style: {
-                  accentColor: theme.colors.primary[500]
-                }
-              }), jsx("label", {
-                htmlFor: "checkbox-example",
-                style: {
-                  color: textColors.primary
-                },
-                children: "Checkbox example"
-              })]
-            })]
-          })]
-        })]
-      })]
-    })]
-  });
-};export{ThemeShowcase as default};//# sourceMappingURL=ThemeExample.js.map

package/lib/components/ThemeExample.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeExample.js","sources":["../../src/components/ThemeExample.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}