rouse-ui-kit 0.1.0

package/src/components/Chip/ChipFilled.tsx

@@ -0,0 +1,110 @@
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, Chip } from "@mui/material";
+
+export type ChipColor = "primary" | "secondary";
+
+const colorConfig = {
+  primary: {
+    enabled:  { bg: "#e5e5e5", text: "#191919" },  // --light/gray/10, --light/text/primary
+    hovered:  { bg: "#4c4c4c", text: "#ffffff" },  // --light/primary/main
+    selected: { bg: "#191919", text: "#ffffff" },  // --light/primary/dark
+    disabled: { bg: "#e5e5e5", text: "#999999" },
+  },
+  secondary: {
+    enabled:  { bg: "#eef1fc", text: "#2c4d9e" },  // --light/secondary/tint/main
+    hovered:  { bg: "#2c4d9e", text: "#eef1fc" },  // --light/secondary/main
+    selected: { bg: "#00215f", text: "#eef1fc" },  // --light/secondary/dark
+    disabled: { bg: "#e5e5e5", text: "#999999" },
+  },
+} as const;
+
+type ChipFilledProps = {
+  label?: string;
+  color?: ChipColor;
+  selected?: boolean;
+  deletable?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+  onDelete?: () => void;
+};
+
+export default function ChipFilled({
+  label = "Chip",
+  color = "primary",
+  selected = false,
+  deletable = false,
+  disabled = false,
+  onClick,
+  onDelete,
+}: ChipFilledProps) {
+  const cfg = colorConfig[color];
+  const stateBg = disabled ? cfg.disabled.bg : selected ? cfg.selected.bg : cfg.enabled.bg;
+  const stateText = disabled ? cfg.disabled.text : selected ? cfg.selected.text : cfg.enabled.text;
+  const hoverBg = cfg.hovered.bg;
+  const hoverText = cfg.hovered.text;
+
+  return (
+    // Outer pill: shows #dee0ff background on keyboard focus (Figma "Focused" state)
+    <Box
+      sx={{
+        display: "inline-flex",
+        borderRadius: "100px",
+        "&:focus-within": {
+          bgcolor: "#dee0ff",  // --light/blue/10
+        },
+      }}
+    >
+      <Chip
+        label={label}
+        size="small"
+        disabled={disabled}
+        onClick={onClick}
+        onDelete={deletable ? onDelete : undefined}
+        deleteIcon={<CloseIcon />}
+        sx={{
+          height: "auto",
+          borderRadius: "100px",
+          bgcolor: stateBg,
+          // Hover: skip when disabled or already selected
+          ...(!disabled && !selected && {
+            "&:hover": {
+              bgcolor: `${hoverBg} !important`,
+              "& .MuiChip-label": { color: hoverText },
+              "& .MuiChip-deleteIcon": { color: `${hoverText} !important` },
+            },
+          }),
+          // Keyboard focus: chip itself becomes transparent (bg shown by outer Box)
+          "&:focus-visible": {
+            bgcolor: "transparent",
+            boxShadow: "none",
+            outline: "none",
+          },
+          // Disabled: restore opacity so colors aren't dimmed by MUI
+          "&.Mui-disabled": {
+            opacity: 1,
+            bgcolor: cfg.disabled.bg,
+            "& .MuiChip-label": { color: cfg.disabled.text },
+            "& .MuiChip-deleteIcon": { color: `${cfg.disabled.text} !important` },
+          },
+          // Label
+          "& .MuiChip-label": {
+            px: "10px",
+            py: "3px",
+            fontSize: 13,
+            fontWeight: 400,
+            lineHeight: "18px",
+            letterSpacing: "0.16px",
+            color: stateText,
+          },
+          // Close icon
+          "& .MuiChip-deleteIcon": {
+            fontSize: 14,
+            color: `${stateText} !important`,
+            mr: "10px",
+            ml: 0,
+          },
+        }}
+      />
+    </Box>
+  );
+}

package/src/components/Chip/ChipOutlined.tsx

@@ -0,0 +1,107 @@
+import CloseIcon from "@mui/icons-material/Close";
+import { Chip } from "@mui/material";
+import type { ChipColor } from "./ChipFilled";
+
+const colorConfig = {
+  primary: {
+    border:         "#b2b2b2",               // --light/gray/30
+    borderDisabled: "rgba(0, 0, 0, 0.23)",   // --light/other/outlined-border
+    text:           "#191919",               // --light/text/primary
+    textDisabled:   "#999999",
+    hoverBg:        "rgba(0, 0, 0, 0.04)",   // --light/light/hover
+    selectedBg:     "rgba(0, 0, 0, 0.08)",   // --light/light/selected
+    focusBg:        "#dee0ff",               // --light/blue/10
+  },
+  secondary: {
+    border:         "#6f8de3",                     // --light/secondary/light
+    borderDisabled: "rgba(0, 0, 0, 0.23)",
+    text:           "#2c4d9e",                     // --light/secondary/main
+    textDisabled:   "#999999",
+    hoverBg:        "rgba(44, 77, 158, 0.04)",     // --light/secondary/shade/4p
+    selectedBg:     "rgba(44, 77, 158, 0.12)",     // --light/secondary/shade/12p
+    focusBg:        "#dee0ff",
+  },
+} as const;
+
+type ChipOutlinedProps = {
+  label?: string;
+  color?: ChipColor;
+  selected?: boolean;
+  deletable?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+  onDelete?: () => void;
+};
+
+export default function ChipOutlined({
+  label = "Chip",
+  color = "primary",
+  selected = false,
+  deletable = false,
+  disabled = false,
+  onClick,
+  onDelete,
+}: ChipOutlinedProps) {
+  const cfg = colorConfig[color];
+  const borderColor = disabled ? cfg.borderDisabled : cfg.border;
+  const textColor   = disabled ? cfg.textDisabled   : cfg.text;
+  const bgColor     = selected ? cfg.selectedBg     : "transparent";
+
+  return (
+    <Chip
+      label={label}
+      size="small"
+      variant="outlined"
+      disabled={disabled}
+      onClick={onClick}
+      onDelete={deletable ? onDelete : undefined}
+      deleteIcon={<CloseIcon />}
+      sx={{
+        height: "auto",
+        borderRadius: "100px",
+        border: `1px solid ${borderColor}`,
+        bgcolor: bgColor,
+        color: textColor,
+        // Hover
+        ...(!disabled && {
+          "&:hover": {
+            bgcolor: `${cfg.hoverBg} !important`,
+            border: `1px solid ${cfg.border}`,
+          },
+        }),
+        // Keyboard focus — bg directly on the chip (no outer wrapper needed)
+        "&:focus-visible": {
+          bgcolor: `${cfg.focusBg} !important`,
+          border: `1px solid ${cfg.border}`,
+          boxShadow: "none",
+          outline: "none",
+        },
+        // Disabled
+        "&.Mui-disabled": {
+          opacity: 1,
+          bgcolor: "transparent",
+          border: `1px solid ${cfg.borderDisabled}`,
+          "& .MuiChip-label": { color: cfg.textDisabled },
+          "& .MuiChip-deleteIcon": { color: `${cfg.textDisabled} !important` },
+        },
+        // Label slot
+        "& .MuiChip-label": {
+          px: "10px",
+          py: "3px",
+          fontSize: 13,
+          fontWeight: 400,
+          lineHeight: "18px",
+          letterSpacing: "0.16px",
+          color: textColor,
+        },
+        // Close icon slot
+        "& .MuiChip-deleteIcon": {
+          fontSize: 14,
+          color: `${textColor} !important`,
+          mr: "10px",
+          ml: 0,
+        },
+      }}
+    />
+  );
+}

package/src/components/Chip/ChipStatus.tsx

@@ -0,0 +1,59 @@
+import SignalCellularAltIcon from "@mui/icons-material/SignalCellularAlt";
+import { Box, Typography } from "@mui/material";
+import type { ElementType } from "react";
+
+export type ChipStatusColor = "default" | "primary" | "secondary";
+
+const colorConfig: Record<ChipStatusColor, { bg: string; text: string }> = {
+  default:   { bg: "#e5e5e5", text: "#191919" },  // --light/gray/10, --light/text/primary
+  primary:   { bg: "#4c4c4c", text: "#ffffff" },  // --light/primary/main
+  secondary: { bg: "#eef1fc", text: "#2c4d9e" },  // --light/secondary/tint, --light/secondary/main
+};
+
+type ChipStatusProps = {
+  label?: string;
+  color?: ChipStatusColor;
+  icon?: boolean;
+  iconComponent?: ElementType;
+};
+
+export default function ChipStatus({
+  label = "Chip",
+  color = "default",
+  icon = false,
+  iconComponent: Icon = SignalCellularAltIcon,
+}: ChipStatusProps) {
+  const { bg, text } = colorConfig[color];
+
+  return (
+    <Box
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: icon ? "4px" : 0,
+        px: "10px",
+        py: "3px",
+        borderRadius: "24px",
+        bgcolor: bg,
+      }}
+    >
+      <Typography
+        sx={{
+          fontFamily: "Roboto, sans-serif",
+          fontWeight: 400,
+          fontSize: 13,
+          lineHeight: "18px",
+          letterSpacing: "0.16px",
+          color: text,
+          whiteSpace: "nowrap",
+        }}
+      >
+        {label}
+      </Typography>
+
+      {icon && (
+        <Icon sx={{ fontSize: 14, color: text, display: "block", flexShrink: 0 }} />
+      )}
+    </Box>
+  );
+}

package/src/components/Chip/ChipStatusOutlined.tsx

@@ -0,0 +1,59 @@
+import SignalCellularAltIcon from "@mui/icons-material/SignalCellularAlt";
+import { Box, Typography } from "@mui/material";
+import type { ElementType } from "react";
+
+export type ChipStatusOutlinedColor = "primary" | "secondary";
+
+const colorConfig: Record<ChipStatusOutlinedColor, { border: string; text: string }> = {
+  primary:   { border: "#b2b2b2", text: "#191919" },  // --light/gray/30, --light/text/primary
+  secondary: { border: "#6f8de3", text: "#2c4d9e" },  // --light/secondary/light, --light/secondary/main
+};
+
+type ChipStatusOutlinedProps = {
+  label?: string;
+  color?: ChipStatusOutlinedColor;
+  icon?: boolean;
+  iconComponent?: ElementType;
+};
+
+export default function ChipStatusOutlined({
+  label = "Chip",
+  color = "primary",
+  icon = false,
+  iconComponent: Icon = SignalCellularAltIcon,
+}: ChipStatusOutlinedProps) {
+  const { border, text } = colorConfig[color];
+
+  return (
+    <Box
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: icon ? "4px" : 0,
+        px: "10px",
+        py: "3px",
+        borderRadius: "24px",
+        border: `1px solid ${border}`,
+        bgcolor: "transparent",
+      }}
+    >
+      <Typography
+        sx={{
+          fontFamily: "Roboto, sans-serif",
+          fontWeight: 400,
+          fontSize: 13,
+          lineHeight: "18px",
+          letterSpacing: "0.16px",
+          color: text,
+          whiteSpace: "nowrap",
+        }}
+      >
+        {label}
+      </Typography>
+
+      {icon && (
+        <Icon sx={{ fontSize: 14, color: text, display: "block", flexShrink: 0 }} />
+      )}
+    </Box>
+  );
+}

package/src/components/Chip/index.ts

@@ -0,0 +1,7 @@
+export { default as ChipFilled } from "./ChipFilled";
+export { default as ChipOutlined } from "./ChipOutlined";
+export { default as ChipStatus } from "./ChipStatus";
+export { default as ChipStatusOutlined } from "./ChipStatusOutlined";
+export type { ChipColor } from "./ChipFilled";
+export type { ChipStatusColor } from "./ChipStatus";
+export type { ChipStatusOutlinedColor } from "./ChipStatusOutlined";

package/src/components/IconButton/IconButtonOutlined.tsx

@@ -0,0 +1,67 @@
+import { IconButton } from "@mui/material";
+import type { ElementType } from "react";
+
+type Size = "large" | "medium" | "small" | "xSmall";
+
+const sizeConfig: Record<Size, { buttonSize: number; iconSize: number }> = {
+  large:  { buttonSize: 48, iconSize: 28 },
+  medium: { buttonSize: 42, iconSize: 24 },
+  small:  { buttonSize: 32, iconSize: 20 },
+  xSmall: { buttonSize: 28, iconSize: 16 },
+};
+
+type IconButtonOutlinedProps = {
+  icon: ElementType;
+  size?: Size;
+  disabled?: boolean;
+  onClick?: () => void;
+  "aria-label"?: string;
+};
+
+export default function IconButtonOutlined({
+  icon: Icon,
+  size = "large",
+  disabled = false,
+  onClick,
+  "aria-label": ariaLabel,
+}: IconButtonOutlinedProps) {
+  const { buttonSize, iconSize } = sizeConfig[size];
+
+  return (
+    <IconButton
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      sx={{
+        width: buttonSize,
+        height: buttonSize,
+        padding: 0,
+        borderRadius: "48px",
+        border: disabled
+          ? "1px solid rgba(0, 0, 0, 0.12)"         // --light/other/divider
+          : "1px solid rgba(0, 0, 0, 0.23)",         // --light/other/outlined-border
+        color: "#4c4c4c",
+        backgroundColor: disabled
+          ? "rgba(76, 76, 76, 0.04)"                 // --light/primary/shade/4p
+          : "transparent",
+        "&:hover": {
+          backgroundColor: "rgba(76, 76, 76, 0.08)", // --light/primary/shade/8p
+        },
+        "&:focus-visible": {
+          backgroundColor: "#dee0ff",                // --light/blue/10
+          outline: "none",
+        },
+        "&.Mui-disabled": {
+          color: "rgba(0, 0, 0, 0.26)",
+          border: "1px solid rgba(0, 0, 0, 0.12)",
+          backgroundColor: "rgba(76, 76, 76, 0.04)",
+        },
+        "& .MuiSvgIcon-root": {
+          fontSize: iconSize,
+        },
+      }}
+    >
+      <Icon />
+    </IconButton>
+  );
+}

package/src/components/IconButton/index.ts

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

package/src/components/Label/LabelFilled.tsx

@@ -0,0 +1,84 @@
+import SellIcon from "@mui/icons-material/Sell";
+import { Box, Typography } from "@mui/material";
+import type { ElementType } from "react";
+
+export type LabelColor =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "error"
+  | "warning"
+  | "success"
+  | "info";
+
+export type LabelIcon = "none" | "left" | "right" | "only";
+
+const colorConfig: Record<LabelColor, { bg: string; color: string }> = {
+  default:   { bg: "#f7f7f7", color: "#666666" },   // --light/gray/1, --light/text/secondary
+  primary:   { bg: "#f1f1f1", color: "#4c4c4c" },   // --light/primary/tint, --light/primary/main
+  secondary: { bg: "#eef1fc", color: "#2c4d9e" },   // --light/secondary/tint, --light/secondary/main
+  error:     { bg: "#fdeaea", color: "#d32f2f" },   // --light/error/tint, --light/error/main
+  warning:   { bg: "#fff3e0", color: "#ef6c00" },   // --light/warning/tint, --light/warning/main
+  success:   { bg: "#eaf5ea", color: "#2e7d32" },   // --light/success/tint, --light/success/main
+  info:      { bg: "#e1f5fe", color: "#0288d1" },   // --light/info/tint, --light/info/main
+};
+
+type LabelFilledProps = {
+  label?: string;
+  color?: LabelColor;
+  icon?: LabelIcon;
+  iconComponent?: ElementType;
+};
+
+export default function LabelFilled({
+  label = "Label Name",
+  color = "default",
+  icon = "none",
+  iconComponent: Icon = SellIcon,
+}: LabelFilledProps) {
+  const { bg, color: textColor } = colorConfig[color];
+  const showText = icon !== "only";
+  const showIcon = icon !== "none";
+  const iconOnly = icon === "only";
+
+  return (
+    <Box
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: showIcon && showText ? "5px" : 0,
+        px: "10px",
+        py: iconOnly ? "6px" : "3px",
+        borderRadius: "4px",
+        bgcolor: bg,
+      }}
+    >
+      {/* Icon on the left (or icon-only) */}
+      {(icon === "left" || icon === "only") && (
+        <Icon sx={{ fontSize: 14, color: textColor, display: "block", flexShrink: 0 }} />
+      )}
+
+      {/* Label text */}
+      {showText && (
+        <Typography
+          sx={{
+            fontFamily: "Roboto, sans-serif",
+            fontWeight: 500,
+            fontSize: 12,
+            lineHeight: "20px",
+            letterSpacing: "0.14px",
+            color: textColor,
+            whiteSpace: "nowrap",
+          }}
+        >
+          {label}
+        </Typography>
+      )}
+
+      {/* Icon on the right */}
+      {icon === "right" && (
+        <Icon sx={{ fontSize: 14, color: textColor, display: "block", flexShrink: 0 }} />
+      )}
+    </Box>
+  );
+}

package/src/components/Label/LabelOutlined.tsx

@@ -0,0 +1,85 @@
+import SellIcon from "@mui/icons-material/Sell";
+import { Box, Typography } from "@mui/material";
+import type { ElementType } from "react";
+import type { LabelColor, LabelIcon } from "./LabelFilled";
+
+// Text/icon colors are identical to LabelFilled
+const textColorConfig: Record<LabelColor, string> = {
+  default:   "#666666",   // --light/text/secondary
+  primary:   "#4c4c4c",   // --light/primary/main
+  secondary: "#2c4d9e",   // --light/secondary/main
+  error:     "#d32f2f",   // --light/error/main
+  warning:   "#ef6c00",   // --light/warning/main
+  success:   "#2e7d32",   // --light/success/main
+  info:      "#0288d1",   // --light/info/main
+};
+
+// Border colors are lighter/distinct from text colors
+const borderColorConfig: Record<LabelColor, string> = {
+  default:   "#d9d9d9",   // --light/primary/lighter
+  primary:   "#808080",   // --light/primary/light
+  secondary: "#6f8de3",   // --light/secondary/light
+  error:     "#ef5350",   // --light/error/light
+  warning:   "#ffd28c",   // --light/warning/lighter
+  success:   "#4caf50",   // --light/success/light
+  info:      "#03a9f4",   // --light/info/light
+};
+
+type LabelOutlinedProps = {
+  label?: string;
+  color?: LabelColor;
+  icon?: LabelIcon;
+  iconComponent?: ElementType;
+};
+
+export default function LabelOutlined({
+  label = "Label Name",
+  color = "default",
+  icon = "none",
+  iconComponent: Icon = SellIcon,
+}: LabelOutlinedProps) {
+  const textColor = textColorConfig[color];
+  const borderColor = borderColorConfig[color];
+  const showText = icon !== "only";
+  const showIcon = icon !== "none";
+  const iconOnly = icon === "only";
+
+  return (
+    <Box
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: showIcon && showText ? "5px" : 0,
+        px: "10px",
+        py: iconOnly ? "6px" : "3px",
+        borderRadius: "4px",
+        border: `1px solid ${borderColor}`,
+        bgcolor: "transparent",
+      }}
+    >
+      {(icon === "left" || icon === "only") && (
+        <Icon sx={{ fontSize: 14, color: textColor, display: "block", flexShrink: 0 }} />
+      )}
+
+      {showText && (
+        <Typography
+          sx={{
+            fontFamily: "Roboto, sans-serif",
+            fontWeight: 500,
+            fontSize: 12,
+            lineHeight: "20px",
+            letterSpacing: "0.14px",
+            color: textColor,
+            whiteSpace: "nowrap",
+          }}
+        >
+          {label}
+        </Typography>
+      )}
+
+      {icon === "right" && (
+        <Icon sx={{ fontSize: 14, color: textColor, display: "block", flexShrink: 0 }} />
+      )}
+    </Box>
+  );
+}

package/src/components/Label/index.ts

@@ -0,0 +1,3 @@
+export { default as LabelFilled } from "./LabelFilled";
+export { default as LabelOutlined } from "./LabelOutlined";
+export type { LabelColor, LabelIcon } from "./LabelFilled";