rouse-ui-kit 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rouse-ui-kit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Rouse UI Kit — React + MUI component library for Figma Make",
   "keywords": ["react", "ui-kit", "components", "mui", "figma", "figma-make", "design-system", "rouse"],
   "type": "module",

package/src/App.tsx

@@ -2,6 +2,7 @@ import StarIcon from "@mui/icons-material/Star";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import { Box, Divider, Stack, Typography } from "@mui/material";
 import { useState } from "react";
+import { AlertStandard, type AlertSeverity } from "./components/Alert";
 import { ButtonContained, ButtonOutlined, ButtonText } from "./components/Button";
 import { Checkbox } from "./components/Checkbox";
 import { IconButtonOutlined } from "./components/IconButton";
@@ -26,6 +27,35 @@ export default function App() {
   const [menuSearch, setMenuSearch] = useState("");
   return (
     <Box sx={{ p: 4, bgcolor: "#f5f5f5", minHeight: "100vh" }}>
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Alert / Standard
+      </Typography>
+      {(["error", "warning", "info", "success", "primary", "secondary"] as AlertSeverity[]).map(
+        (severity) => (
+          <Stack key={severity} spacing={1.5} sx={{ mb: 3 }}>
+            <Typography variant="body2" sx={{ color: "#666", textTransform: "capitalize" }}>
+              {severity}
+            </Typography>
+            <Stack spacing={1}>
+              <Box sx={{ width: 400 }}>
+                <AlertStandard severity={severity}>Alert content</AlertStandard>
+              </Box>
+              <Box sx={{ width: 400 }}>
+                <AlertStandard severity={severity} title="Title">Alert content</AlertStandard>
+              </Box>
+              <Box sx={{ width: 400 }}>
+                <AlertStandard severity={severity} title="Title" onClose={() => {}}>Alert content</AlertStandard>
+              </Box>
+              <Box sx={{ width: 400 }}>
+                <AlertStandard severity={severity} title="Title" action="Action" onAction={() => {}} onClose={() => {}}>Alert content</AlertStandard>
+              </Box>
+            </Stack>
+          </Stack>
+        )
+      )}
+
+      <Divider sx={{ mb: 4 }} />
+
       <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
         Button / Contained
       </Typography>

package/src/components/Alert/AlertStandard.tsx

@@ -0,0 +1,174 @@
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import InfoIcon from "@mui/icons-material/Info";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import { Box, IconButton, Typography } from "@mui/material";
+import type { ComponentType, ReactNode } from "react";
+
+export type AlertSeverity = "error" | "warning" | "info" | "success" | "primary" | "secondary";
+
+type SeverityConfig = {
+  bg: string;
+  border: string;
+  color: string;
+  Icon: ComponentType<{ sx?: object }>;
+};
+
+const severityConfig: Record<AlertSeverity, SeverityConfig> = {
+  error:     { bg: "#fdeaea", border: "#ef5350", color: "#c62828", Icon: ErrorOutlineIcon },  // light/error/tint, light/error/light, light/error/dark
+  warning:   { bg: "#fff3e0", border: "#ff9800", color: "#e65100", Icon: WarningAmberIcon },  // light/warning/tint, light/warning/light, light/warning/dark
+  info:      { bg: "#e1f5fe", border: "#03a9f4", color: "#01579b", Icon: InfoIcon },          // light/info/tint, light/info/light, light/info/dark
+  success:   { bg: "#eaf5ea", border: "#4caf50", color: "#1b5e20", Icon: CheckCircleIcon },   // light/success/tint, light/success/light, light/success/dark
+  primary:   { bg: "#f1f1f1", border: "#808080", color: "#4c4c4c", Icon: InfoIcon },          // light/primary/tint, light/primary/light, light/primary/main
+  secondary: { bg: "#f7f8fe", border: "#6f8de3", color: "#2c4d9e", Icon: InfoIcon },          // light/background/sky, light/secondary/light, light/secondary/main
+};
+
+type AlertStandardProps = {
+  severity?: AlertSeverity;
+  title?: string;
+  children: ReactNode;
+  action?: string;
+  onAction?: () => void;
+  onClose?: () => void;
+};
+
+export default function AlertStandard({
+  severity = "info",
+  title,
+  children,
+  action,
+  onAction,
+  onClose,
+}: AlertStandardProps) {
+  const { bg, border, color, Icon } = severityConfig[severity];
+  const hasActions = Boolean(action || onClose);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "12px",
+        px: "16px",
+        py: "6px",
+        borderRadius: "8px",
+        border: `1px solid ${border}`,
+        bgcolor: bg,
+        width: "100%",
+      }}
+    >
+      {/* Severity icon */}
+      <Box sx={{ display: "flex", alignItems: "flex-start", pt: "8px", flexShrink: 0 }}>
+        <Icon sx={{ fontSize: 20, color }} />
+      </Box>
+
+      {/* Title + message */}
+      <Box
+        sx={{
+          flex: "1 0 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          py: "8px",
+          overflow: "hidden",
+          wordBreak: "break-word",
+          minWidth: 0,
+        }}
+      >
+        {title && (
+          <Typography
+            sx={{
+              fontFamily: "Roboto, sans-serif",
+              fontWeight: 500,
+              fontSize: 16,
+              lineHeight: 1.5,
+              letterSpacing: "0.15px",
+              color,
+              width: "100%",
+            }}
+          >
+            {title}
+          </Typography>
+        )}
+        <Typography
+          sx={{
+            fontFamily: "Roboto, sans-serif",
+            fontWeight: 400,
+            fontSize: 14,
+            lineHeight: 1.5,
+            letterSpacing: "0.15px",
+            color,
+            width: "100%",
+          }}
+        >
+          {children}
+        </Typography>
+      </Box>
+
+      {/* Action link + close button */}
+      {hasActions && (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            height: "36px",
+            pl: "8px",
+            py: "2px",
+            flexShrink: 0,
+          }}
+        >
+          {action && (
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "32px",
+                px: "8px",
+              }}
+            >
+              <Typography
+                component="button"
+                onClick={onAction}
+                sx={{
+                  fontFamily: "Roboto, sans-serif",
+                  fontWeight: 500,
+                  fontSize: 14,
+                  lineHeight: 1.5,
+                  letterSpacing: "0.15px",
+                  color,
+                  textDecoration: "underline",
+                  whiteSpace: "nowrap",
+                  cursor: "pointer",
+                  background: "none",
+                  border: "none",
+                  padding: 0,
+                }}
+              >
+                {action}
+              </Typography>
+            </Box>
+          )}
+          {onClose && (
+            <IconButton
+              size="small"
+              onClick={onClose}
+              sx={{
+                color,
+                padding: "8px",
+                width: 32,
+                height: 32,
+                borderRadius: "48px",
+                "& .MuiSvgIcon-root": { fontSize: 16 },
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { default as AlertStandard } from "./AlertStandard";
+export type { AlertSeverity } from "./AlertStandard";

package/src/components/TextField/TextFieldOutlined.tsx

@@ -4,6 +4,7 @@ import type { ElementType } from "react";
 
 type TextFieldOutlinedProps = {
   label?: string;
+  placeholder?: string;
   value?: string;
   helperText?: string;
   error?: boolean;
@@ -11,6 +12,7 @@ type TextFieldOutlinedProps = {
   clearable?: boolean;
   icon?: ElementType;
   type?: string;
+  size?: "small" | "medium";
   onChange?: (value: string) => void;
   onClear?: () => void;
   onIconClick?: () => void;
@@ -41,7 +43,8 @@ const borderSx = {
 };
 
 export default function TextFieldOutlined({
-  label = "Label",
+  label,
+  placeholder,
   value = "",
   helperText,
   error = false,
@@ -49,6 +52,7 @@ export default function TextFieldOutlined({
   clearable = false,
   icon: Icon,
   type = "text",
+  size = "medium",
   onChange,
   onClear,
   onIconClick,
@@ -87,12 +91,14 @@ export default function TextFieldOutlined({
   return (
     <TextField
       variant="outlined"
-      label={label}
+      label={placeholder ? undefined : (label ?? "Label")}
+      placeholder={placeholder}
       value={value}
       helperText={helperText}
       error={error}
       disabled={disabled}
       type={type}
+      size={size}
       fullWidth
       onChange={(e) => onChange?.(e.target.value)}
       slotProps={{

package/src/design-tokens.ts

@@ -34,24 +34,29 @@ export const secondary = {
 export const error = {
   light:  "#ef5350",
   main:   "#d32f2f",
+  dark:   "#c62828",  // light/error/dark — alert text color
   tint:   "#fdeaea",
 } as const;
 
 export const warning = {
   lighter: "#ffd28c",
+  light:   "#ff9800",  // light/warning/light — alert border color
   main:    "#ef6c00",
+  dark:    "#e65100",  // light/warning/dark — alert text color
   tint:    "#fff3e0",
 } as const;
 
 export const success = {
   light: "#4caf50",
   main:  "#2e7d32",
+  dark:  "#1b5e20",  // light/success/dark — alert text color
   tint:  "#eaf5ea",
 } as const;
 
 export const info = {
   light: "#03a9f4",
   main:  "#0288d1",
+  dark:  "#01579b",  // light/info/dark — alert text color
   tint:  "#e1f5fe",
 } as const;
 
@@ -67,6 +72,7 @@ export const background = {
   white: "#ffffff",
   paper: "#fafafa",
   default: "#f5f5f5",
+  sky: "#f7f8fe",  // light/background/sky — secondary alert background
 } as const;
 
 // ─── Gray scale ───────────────────────────────────────────────────────────────

package/src/index.ts

@@ -1,6 +1,9 @@
 // Rouse UI Kit — public exports
 // Import this package in Figma Make to use all components.
 
+export { default as AlertStandard } from "./components/Alert/AlertStandard";
+export type { AlertSeverity } from "./components/Alert/AlertStandard";
+
 export { default as ButtonContained } from "./components/Button/ButtonContained";
 export { default as ButtonOutlined } from "./components/Button/ButtonOutlined";
 export { default as ButtonText } from "./components/Button/ButtonText";