rouse-ui-kit 0.1.0

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,205 @@
+import CheckIcon from "@mui/icons-material/Check";
+import SearchIcon from "@mui/icons-material/Search";
+import {
+  Box,
+  Checkbox,
+  InputAdornment,
+  List,
+  ListItemButton,
+  OutlinedInput,
+  Paper,
+  Typography,
+} from "@mui/material";
+
+export type MenuOption = { value: string; label: string };
+
+type MenuProps = {
+  options?: MenuOption[];
+  selectedValues?: string[];
+  search?: boolean;
+  multiSelect?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  onSelect?: (value: string) => void;
+  onSelectAll?: () => void;
+  onClear?: () => void;
+};
+
+const scrollbarSx = {
+  overflowY: "auto",
+  // custom scrollbar matching Figma: 6px thumb, #dedede track border
+  "&::-webkit-scrollbar": { width: "14px" },
+  "&::-webkit-scrollbar-track": {
+    background: "white",
+    borderLeft: "1px solid #dedede",
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "#666666",
+    borderRadius: "4px",
+    border: "4px solid white",
+    backgroundClip: "content-box",
+  },
+};
+
+export default function Menu({
+  options = [],
+  selectedValues = [],
+  search = false,
+  multiSelect = false,
+  searchValue = "",
+  onSearchChange,
+  onSelect,
+  onSelectAll,
+  onClear,
+}: MenuProps) {
+  return (
+    <Paper
+      elevation={8}
+      sx={{
+        width: 320,
+        height: 300,
+        borderRadius: "4px",
+        overflow: "hidden",
+        display: "flex",
+        bgcolor: "white",
+      }}
+    >
+      <Box sx={{ flex: 1, ...scrollbarSx }}>
+        <List disablePadding sx={{ py: "8px" }}>
+
+          {/* Search field */}
+          {search && (
+            <Box sx={{ px: "16px", py: "8px" }}>
+              <OutlinedInput
+                fullWidth
+                placeholder="Search"
+                value={searchValue}
+                onChange={(e) => onSearchChange?.(e.target.value)}
+                endAdornment={
+                  <InputAdornment position="end">
+                    <SearchIcon sx={{ fontSize: 20, color: "#666666" }} />
+                  </InputAdornment>
+                }
+                sx={{
+                  height: 32,
+                  fontSize: 14,
+                  letterSpacing: "0.15px",
+                  color: "#666666",
+                  "& .MuiOutlinedInput-notchedOutline": { borderColor: "#999999" },
+                  "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "#4c4c4c" },
+                  "& .MuiOutlinedInput-input": { padding: "4px 14px" },
+                }}
+              />
+            </Box>
+          )}
+
+          {/* Select All / Clear */}
+          {multiSelect && (
+            <Box
+              sx={{
+                px: "16px",
+                py: "6px",
+                display: "flex",
+                justifyContent: "space-between",
+              }}
+            >
+              <Typography
+                component="span"
+                onClick={onSelectAll}
+                sx={{
+                  fontSize: 16,
+                  lineHeight: 1.5,
+                  letterSpacing: "0.15px",
+                  color: "#191919",
+                  textDecoration: "underline",
+                  cursor: "pointer",
+                  userSelect: "none",
+                }}
+              >
+                Select All
+              </Typography>
+              <Typography
+                component="span"
+                onClick={onClear}
+                sx={{
+                  fontSize: 16,
+                  lineHeight: 1.5,
+                  letterSpacing: "0.15px",
+                  color: "#4c4c4c",
+                  textDecoration: "underline",
+                  cursor: "pointer",
+                  userSelect: "none",
+                }}
+              >
+                Clear
+              </Typography>
+            </Box>
+          )}
+
+          {/* Menu items */}
+          {options.map((opt) => {
+            const isSelected = selectedValues.includes(opt.value);
+            return (
+              <ListItemButton
+                key={opt.value}
+                onClick={() => onSelect?.(opt.value)}
+                selected={isSelected && !multiSelect}
+                sx={{
+                  px: "16px",
+                  py: "6px",
+                  minHeight: 36,
+                  gap: 0,
+                  "&.Mui-selected": {
+                    bgcolor: "rgba(0, 0, 0, 0.08)",  // --light/light/selected
+                    "&:hover": { bgcolor: "rgba(0, 0, 0, 0.08)" },
+                  },
+                  "&:hover": { bgcolor: "rgba(0, 0, 0, 0.04)" },
+                }}
+              >
+                {/* Checkbox mode */}
+                {multiSelect && (
+                  <Checkbox
+                    checked={isSelected}
+                    size="small"
+                    tabIndex={-1}
+                    disableRipple
+                    sx={{
+                      padding: "8px",
+                      mr: "0px",
+                      ml: "-8px",
+                      color: "#4c4c4c",
+                      "&.Mui-checked": { color: "#4c4c4c" },
+                    }}
+                  />
+                )}
+
+                {/* Label */}
+                <Typography
+                  sx={{
+                    flex: 1,
+                    fontSize: 16,
+                    fontWeight: 400,
+                    lineHeight: 1.5,
+                    letterSpacing: "0.15px",
+                    color: "#191919",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                  }}
+                >
+                  {opt.label}
+                </Typography>
+
+                {/* Check icon for single-select selected state */}
+                {!multiSelect && isSelected && (
+                  <CheckIcon sx={{ fontSize: 20, color: "#4c4c4c", ml: "8px" }} />
+                )}
+              </ListItemButton>
+            );
+          })}
+
+        </List>
+      </Box>
+    </Paper>
+  );
+}

package/src/components/Menu/index.ts

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

package/src/components/Select/SelectOutlined.tsx

@@ -0,0 +1,77 @@
+import CancelIcon from "@mui/icons-material/Cancel";
+import {
+  FormControl,
+  FormHelperText,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Select,
+  type SelectChangeEvent,
+} from "@mui/material";
+
+type SelectOption = { value: string; label: string };
+
+type SelectOutlinedProps = {
+  label?: string;
+  value?: string;
+  options?: SelectOption[];
+  helperText?: string;
+  error?: boolean;
+  disabled?: boolean;
+  clearable?: boolean;
+  onChange?: (value: string) => void;
+  onClear?: () => void;
+};
+
+export default function SelectOutlined({
+  label = "Label",
+  value = "",
+  options = [],
+  helperText,
+  error = false,
+  disabled = false,
+  clearable = false,
+  onChange,
+  onClear,
+}: SelectOutlinedProps) {
+  const showClear = clearable && !!value;
+
+  const handleChange = (event: SelectChangeEvent) => {
+    onChange?.(event.target.value);
+  };
+
+  return (
+    <FormControl variant="outlined" error={error} disabled={disabled} fullWidth>
+      <InputLabel>{label}</InputLabel>
+      <Select
+        value={value}
+        label={label}
+        onChange={handleChange}
+        endAdornment={
+          showClear ? (
+            <InputAdornment position="end" sx={{ mr: "4px" }}>
+              <IconButton
+                size="small"
+                onClick={onClear}
+                tabIndex={-1}
+                sx={{ padding: "2px", color: "#666666" }}
+              >
+                <CancelIcon sx={{ fontSize: 20 }} />
+              </IconButton>
+            </InputAdornment>
+          ) : undefined
+        }
+        // Make room for the clear button before the dropdown arrow
+        sx={showClear ? { "& .MuiSelect-select": { paddingRight: "60px !important" } } : undefined}
+      >
+        {options.map((opt) => (
+          <MenuItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </MenuItem>
+        ))}
+      </Select>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+}

package/src/components/Select/index.ts

@@ -0,0 +1 @@
+export { default as SelectOutlined } from "./SelectOutlined";

package/src/components/TextField/TextFieldOutlined.tsx

@@ -0,0 +1,104 @@
+import CancelIcon from "@mui/icons-material/Cancel";
+import { IconButton, InputAdornment, TextField } from "@mui/material";
+import type { ElementType } from "react";
+
+type TextFieldOutlinedProps = {
+  label?: string;
+  value?: string;
+  helperText?: string;
+  error?: boolean;
+  disabled?: boolean;
+  clearable?: boolean;
+  icon?: ElementType;
+  type?: string;
+  onChange?: (value: string) => void;
+  onClear?: () => void;
+  onIconClick?: () => void;
+};
+
+// Border selectors self-contained here — resting color is #999 (--light/gray/40),
+// different from SelectOutlined which uses rgba(0,0,0,0.23).
+const borderSx = {
+  "& .MuiOutlinedInput-root": {
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#999999",                         // --light/gray/40
+    },
+    "&:hover .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#4c4c4c",                         // --light/primary/main
+    },
+    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#4c4c4c",
+      borderWidth: "2px",
+    },
+    "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#d32f2f",                         // --light/error/main
+      borderWidth: "2px",
+    },
+    "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+      borderColor: "rgba(0, 0, 0, 0.12)",             // --light/other/divider
+    },
+  },
+};
+
+export default function TextFieldOutlined({
+  label = "Label",
+  value = "",
+  helperText,
+  error = false,
+  disabled = false,
+  clearable = false,
+  icon: Icon,
+  type = "text",
+  onChange,
+  onClear,
+  onIconClick,
+}: TextFieldOutlinedProps) {
+  const showClear = clearable && !!value;
+
+  const endAdornment =
+    showClear || Icon ? (
+      <>
+        {showClear && (
+          <InputAdornment position="end">
+            <IconButton
+              size="small"
+              onClick={onClear}
+              tabIndex={-1}
+              sx={{ padding: "2px", color: "#666666" }}
+            >
+              <CancelIcon sx={{ fontSize: 20 }} />
+            </IconButton>
+          </InputAdornment>
+        )}
+        {Icon && (
+          <InputAdornment position="end">
+            {onIconClick ? (
+              <IconButton size="small" onClick={onIconClick} tabIndex={-1} edge="end">
+                <Icon sx={{ fontSize: 24, color: "#666666" }} />
+              </IconButton>
+            ) : (
+              <Icon sx={{ fontSize: 24, color: "#666666" }} />
+            )}
+          </InputAdornment>
+        )}
+      </>
+    ) : undefined;
+
+  return (
+    <TextField
+      variant="outlined"
+      label={label}
+      value={value}
+      helperText={helperText}
+      error={error}
+      disabled={disabled}
+      type={type}
+      fullWidth
+      onChange={(e) => onChange?.(e.target.value)}
+      slotProps={{
+        input: { endAdornment },
+      }}
+      sx={borderSx}
+    />
+  );
+}

package/src/components/TextField/index.ts

@@ -0,0 +1 @@
+export { default as TextFieldOutlined } from "./TextFieldOutlined";

package/src/design-tokens.ts

@@ -0,0 +1,120 @@
+/**
+ * Rouse Design System — Design Tokens
+ * Source: Rouse Design System Figma library
+ * Reflects all --light/* CSS variables used across components.
+ */
+
+// ─── Primary ──────────────────────────────────────────────────────────────────
+export const primary = {
+  lighter:    "#d9d9d9",
+  light:      "#808080",
+  main:       "#4c4c4c",
+  dark:       "#191919",
+  tint:       "#f1f1f1",
+  shade4p:    "rgba(76, 76, 76, 0.04)",
+  shade8p:    "rgba(76, 76, 76, 0.08)",
+  shade12p:   "rgba(76, 76, 76, 0.12)",
+  shade30p:   "rgba(76, 76, 76, 0.30)",
+  shade50p:   "rgba(76, 76, 76, 0.50)",
+  contrastText: "#ffffff",
+} as const;
+
+// ─── Secondary ────────────────────────────────────────────────────────────────
+export const secondary = {
+  light:      "#6f8de3",
+  main:       "#2c4d9e",
+  dark:       "#00215f",
+  tint:       "#eef1fc",
+  shade4p:    "rgba(44, 77, 158, 0.04)",
+  shade12p:   "rgba(44, 77, 158, 0.12)",
+  contrastText: "#ffffff",
+} as const;
+
+// ─── Semantic ─────────────────────────────────────────────────────────────────
+export const error = {
+  light:  "#ef5350",
+  main:   "#d32f2f",
+  tint:   "#fdeaea",
+} as const;
+
+export const warning = {
+  lighter: "#ffd28c",
+  main:    "#ef6c00",
+  tint:    "#fff3e0",
+} as const;
+
+export const success = {
+  light: "#4caf50",
+  main:  "#2e7d32",
+  tint:  "#eaf5ea",
+} as const;
+
+export const info = {
+  light: "#03a9f4",
+  main:  "#0288d1",
+  tint:  "#e1f5fe",
+} as const;
+
+// ─── Text ─────────────────────────────────────────────────────────────────────
+export const text = {
+  primary:   "#191919",
+  secondary: "#666666",
+  disabled:  "#999999",
+} as const;
+
+// ─── Background ───────────────────────────────────────────────────────────────
+export const background = {
+  white: "#ffffff",
+  paper: "#fafafa",
+  default: "#f5f5f5",
+} as const;
+
+// ─── Gray scale ───────────────────────────────────────────────────────────────
+export const gray = {
+  1:  "#f7f7f7",   // --light/gray/1
+  10: "#e5e5e5",   // --light/gray/10
+  20: "#cccccc",   // --light/gray/20
+  30: "#b2b2b2",   // --light/gray/30
+  40: "#999999",   // --light/gray/40
+} as const;
+
+// ─── Interaction overlays ─────────────────────────────────────────────────────
+export const interaction = {
+  hover:    "rgba(0, 0, 0, 0.04)",   // --light/light/hover
+  selected: "rgba(0, 0, 0, 0.08)",   // --light/light/selected
+  focus:    "#dee0ff",               // --light/blue/10
+  focusRing: "#bbc3ff",              // --light/blue/20
+} as const;
+
+// ─── Other / borders ──────────────────────────────────────────────────────────
+export const other = {
+  outlinedBorder: "rgba(0, 0, 0, 0.23)",  // --light/other/outlined-border
+  divider:        "rgba(0, 0, 0, 0.12)",  // --light/other/divider
+} as const;
+
+// ─── Typography scale ─────────────────────────────────────────────────────────
+// Source: Rouse Design System (Roboto font family, MUI Material Design scale)
+export const typography = {
+  fontFamily: "'Roboto', sans-serif",
+  h1: { fontSize: "6rem",    fontWeight: 300, lineHeight: 1.167, letterSpacing: "-0.01563em" },
+  h2: { fontSize: "3.75rem", fontWeight: 300, lineHeight: 1.2,   letterSpacing: "-0.00833em" },
+  h3: { fontSize: "3rem",    fontWeight: 400, lineHeight: 1.167, letterSpacing: "0em" },
+  h4: { fontSize: "2.125rem",fontWeight: 400, lineHeight: 1.235, letterSpacing: "0.00735em" },
+  h5: { fontSize: "1.5rem",  fontWeight: 400, lineHeight: 1.334, letterSpacing: "0em" },
+  h6: { fontSize: "1.25rem", fontWeight: 500, lineHeight: 1.6,   letterSpacing: "0.0075em" },
+  subtitle1: { fontSize: "1rem",    fontWeight: 400, lineHeight: 1.75, letterSpacing: "0.00938em" },
+  subtitle2: { fontSize: "0.875rem",fontWeight: 500, lineHeight: 1.57, letterSpacing: "0.00714em" },
+  body1: { fontSize: "1rem",    fontWeight: 400, lineHeight: 1.5,  letterSpacing: "0.00938em" },
+  body2: { fontSize: "0.875rem",fontWeight: 400, lineHeight: 1.43, letterSpacing: "0.01071em" },
+  // Custom text styles found in components
+  button:   { fontSize: "1rem",    fontWeight: 500, lineHeight: "26px",  letterSpacing: "0.4px",  textTransform: "none" as const },
+  caption:  { fontSize: "0.75rem", fontWeight: 400, lineHeight: 1.6,     letterSpacing: "0.4px" },
+  overline: { fontSize: "0.75rem", fontWeight: 400, lineHeight: 2.66,    letterSpacing: "0.08333em", textTransform: "uppercase" as const },
+  // Component-specific text styles
+  inputText:   { fontSize: "1rem",    fontWeight: 400, lineHeight: "24px", letterSpacing: "0.15px" },
+  inputLabel:  { fontSize: "0.75rem", fontWeight: 400, lineHeight: "12px", letterSpacing: "0.15px" },
+  menuItem:    { fontSize: "1rem",    fontWeight: 400, lineHeight: 1.5,    letterSpacing: "0.15px" },
+  chip:        { fontSize: "0.8125rem",fontWeight: 400, lineHeight: "18px", letterSpacing: "0.16px" },
+  badgeLabel:  { fontSize: "0.75rem", fontWeight: 500, lineHeight: "20px", letterSpacing: "0.14px" },
+  helperText:  { fontSize: "0.75rem", fontWeight: 400, lineHeight: 1.6,    letterSpacing: "0.4px" },
+} as const;

package/src/index.ts

@@ -0,0 +1,32 @@
+// Rouse UI Kit — public exports
+// Import this package in Figma Make to use all components.
+
+export { default as ButtonContained } from "./components/Button/ButtonContained";
+export { default as ButtonOutlined } from "./components/Button/ButtonOutlined";
+export { default as ButtonText } from "./components/Button/ButtonText";
+
+export { default as Checkbox } from "./components/Checkbox/Checkbox";
+
+export { default as IconButtonOutlined } from "./components/IconButton/IconButtonOutlined";
+
+export { default as LabelFilled } from "./components/Label/LabelFilled";
+export { default as LabelOutlined } from "./components/Label/LabelOutlined";
+
+export { default as Menu } from "./components/Menu/Menu";
+
+export { default as SelectOutlined } from "./components/Select/SelectOutlined";
+
+export { default as TextFieldOutlined } from "./components/TextField/TextFieldOutlined";
+
+export { default as ChipFilled } from "./components/Chip/ChipFilled";
+export { default as ChipOutlined } from "./components/Chip/ChipOutlined";
+export { default as ChipStatus } from "./components/Chip/ChipStatus";
+export { default as ChipStatusOutlined } from "./components/Chip/ChipStatusOutlined";
+
+export { default as theme } from "./theme";
+export * from "./design-tokens";
+
+export type { ChipColor } from "./components/Chip/ChipFilled";
+export type { ChipStatusColor } from "./components/Chip/ChipStatus";
+export type { LabelColor, LabelIcon } from "./components/Label/LabelFilled";
+export type { MenuOption } from "./components/Menu/Menu";

package/src/main.tsx

@@ -0,0 +1,13 @@
+import { ThemeProvider } from "@mui/material/styles";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import theme from "./theme";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
+  </StrictMode>
+);