rouse-ui-kit 0.1.0

package/src/App.tsx

@@ -0,0 +1,435 @@
+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 { ButtonContained, ButtonOutlined, ButtonText } from "./components/Button";
+import { Checkbox } from "./components/Checkbox";
+import { IconButtonOutlined } from "./components/IconButton";
+import { ChipFilled, ChipOutlined, ChipStatus, ChipStatusOutlined } from "./components/Chip";
+import { LabelFilled, LabelOutlined, type LabelColor } from "./components/Label";
+import { Menu, type MenuOption } from "./components/Menu";
+import { SelectOutlined } from "./components/Select";
+import { TextFieldOutlined } from "./components/TextField";
+
+const OPTIONS: MenuOption[] = [
+  { value: "option1", label: "Option 1" },
+  { value: "option2", label: "Option 2" },
+  { value: "option3", label: "Option 3" },
+];
+
+export default function App() {
+  const [val, setVal] = useState("option1");
+  const [valClearable, setValClearable] = useState("option1");
+  const [tfVal, setTfVal] = useState("Value");
+  const [tfClearable, setTfClearable] = useState("Value");
+  const [menuSelected, setMenuSelected] = useState(["option2"]);
+  const [menuSearch, setMenuSearch] = useState("");
+  return (
+    <Box sx={{ p: 4, bgcolor: "#f5f5f5", minHeight: "100vh" }}>
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Button / Contained
+      </Typography>
+      <Stack spacing={2} sx={{ mb: 4 }}>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <ButtonContained label="Medium" icon="none" />
+          <ButtonContained label="Medium" icon="right" />
+          <ButtonContained label="Medium" icon="left" />
+        </Stack>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <ButtonContained label="Medium" icon="none" disabled />
+          <ButtonContained label="Medium" icon="right" disabled />
+          <ButtonContained label="Medium" icon="left" disabled />
+        </Stack>
+      </Stack>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Button / Outlined
+      </Typography>
+      <Stack spacing={2} sx={{ mb: 4 }}>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <ButtonOutlined label="Medium" icon="none" />
+          <ButtonOutlined label="Medium" icon="right" />
+          <ButtonOutlined label="Medium" icon="left" />
+        </Stack>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <ButtonOutlined label="Medium" icon="none" disabled />
+          <ButtonOutlined label="Medium" icon="right" disabled />
+          <ButtonOutlined label="Medium" icon="left" disabled />
+        </Stack>
+      </Stack>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Button / Text
+      </Typography>
+      <Stack spacing={2}>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <ButtonText label="Medium" icon="none" />
+          <ButtonText label="Medium" icon="right" />
+          <ButtonText label="Medium" icon="left" />
+        </Stack>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <ButtonText label="Medium" icon="none" disabled />
+          <ButtonText label="Medium" icon="right" disabled />
+          <ButtonText label="Medium" icon="left" disabled />
+        </Stack>
+      </Stack>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Checkbox
+      </Typography>
+      <Stack spacing={1}>
+        <Stack direction="row" spacing={3} alignItems="center">
+          <Checkbox />
+          <Checkbox checked />
+          <Checkbox indeterminate />
+          <Checkbox label="Label" />
+          <Checkbox label="Label" checked />
+          <Checkbox label="Label" indeterminate />
+        </Stack>
+        <Stack direction="row" spacing={3} alignItems="center">
+          <Checkbox disabled />
+          <Checkbox disabled checked />
+          <Checkbox disabled indeterminate />
+          <Checkbox label="Label" disabled />
+          <Checkbox label="Label" disabled checked />
+          <Checkbox label="Label" disabled indeterminate />
+        </Stack>
+      </Stack>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        IconButton / Outlined
+      </Typography>
+      <Stack spacing={2}>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <IconButtonOutlined icon={StarIcon} size="large" aria-label="star large" />
+          <IconButtonOutlined icon={StarIcon} size="medium" aria-label="star medium" />
+          <IconButtonOutlined icon={StarIcon} size="small" aria-label="star small" />
+          <IconButtonOutlined icon={StarIcon} size="xSmall" aria-label="star xsmall" />
+        </Stack>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <IconButtonOutlined icon={StarIcon} size="large" disabled aria-label="star large disabled" />
+          <IconButtonOutlined icon={StarIcon} size="medium" disabled aria-label="star medium disabled" />
+          <IconButtonOutlined icon={StarIcon} size="small" disabled aria-label="star small disabled" />
+          <IconButtonOutlined icon={StarIcon} size="xSmall" disabled aria-label="star xsmall disabled" />
+        </Stack>
+      </Stack>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Select / Outlined
+      </Typography>
+      <Stack spacing={2}>
+        {/* No value (label as placeholder) */}
+        <Stack direction="row" spacing={2} alignItems="flex-start">
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" options={OPTIONS} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" options={OPTIONS} helperText="Helper text" />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" options={OPTIONS} disabled />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" options={OPTIONS} error helperText="Error message" />
+          </Box>
+        </Stack>
+        {/* With value (floating label) */}
+        <Stack direction="row" spacing={2} alignItems="flex-start">
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" value={val} options={OPTIONS} onChange={setVal} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" value={val} options={OPTIONS} onChange={setVal} helperText="Helper text" />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" value="option1" options={OPTIONS} disabled />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" value="option1" options={OPTIONS} error helperText="Error message" />
+          </Box>
+        </Stack>
+        {/* With value + clear button */}
+        <Stack direction="row" spacing={2} alignItems="flex-start">
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined
+              label="Label"
+              value={valClearable}
+              options={OPTIONS}
+              clearable
+              onChange={setValClearable}
+              onClear={() => setValClearable("")}
+            />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined
+              label="Label"
+              value={valClearable}
+              options={OPTIONS}
+              clearable
+              onChange={setValClearable}
+              onClear={() => setValClearable("")}
+              helperText="Helper text"
+            />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" value="option1" options={OPTIONS} clearable disabled />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <SelectOutlined label="Label" value="option1" options={OPTIONS} clearable error helperText="Error message" />
+          </Box>
+        </Stack>
+      </Stack>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        TextField / Outlined
+      </Typography>
+      <Stack spacing={2}>
+        {/* No value */}
+        <Stack direction="row" spacing={2} alignItems="flex-start">
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value="" onChange={() => {}} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value="" icon={VisibilityIcon} onChange={() => {}} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value="" helperText="Helper text" onChange={() => {}} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value="" disabled onChange={() => {}} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value="" error helperText="Error message" onChange={() => {}} />
+          </Box>
+        </Stack>
+
+        {/* With value */}
+        <Stack direction="row" spacing={2} alignItems="flex-start">
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value={tfVal} onChange={setTfVal} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value={tfVal} icon={VisibilityIcon} onIconClick={() => {}} onChange={setTfVal} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value={tfVal} helperText="Helper text" onChange={setTfVal} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value="Value" disabled onChange={() => {}} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value="Value" error helperText="Error message" onChange={() => {}} />
+          </Box>
+        </Stack>
+
+        {/* With value + clear */}
+        <Stack direction="row" spacing={2} alignItems="flex-start">
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined
+              label="Label"
+              value={tfClearable}
+              clearable
+              onChange={setTfClearable}
+              onClear={() => setTfClearable("")}
+            />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined
+              label="Label"
+              value={tfClearable}
+              clearable
+              icon={VisibilityIcon}
+              onIconClick={() => {}}
+              onChange={setTfClearable}
+              onClear={() => setTfClearable("")}
+            />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined
+              label="Label"
+              value={tfClearable}
+              clearable
+              helperText="Helper text"
+              onChange={setTfClearable}
+              onClear={() => setTfClearable("")}
+            />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value="Value" clearable disabled onChange={() => {}} />
+          </Box>
+          <Box sx={{ width: 220 }}>
+            <TextFieldOutlined label="Label" value="Value" clearable error helperText="Error message" onChange={() => {}} />
+          </Box>
+        </Stack>
+      </Stack>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Menu
+      </Typography>
+      <Stack direction="row" spacing={3} alignItems="flex-start" flexWrap="wrap" useFlexGap>
+        {/* Basic single-select */}
+        <Menu
+          options={OPTIONS}
+          selectedValues={menuSelected}
+          onSelect={(v) => setMenuSelected([v])}
+        />
+        {/* With search */}
+        <Menu
+          options={OPTIONS}
+          selectedValues={menuSelected}
+          search
+          searchValue={menuSearch}
+          onSearchChange={setMenuSearch}
+          onSelect={(v) => setMenuSelected([v])}
+        />
+        {/* Multi-select with Select All / Clear */}
+        <Menu
+          options={OPTIONS}
+          selectedValues={menuSelected}
+          multiSelect
+          onSelect={(v) =>
+            setMenuSelected((prev) =>
+              prev.includes(v) ? prev.filter((s) => s !== v) : [...prev, v]
+            )
+          }
+          onSelectAll={() => setMenuSelected(OPTIONS.map((o) => o.value))}
+          onClear={() => setMenuSelected([])}
+        />
+        {/* Search + Multi-select */}
+        <Menu
+          options={OPTIONS}
+          selectedValues={menuSelected}
+          search
+          multiSelect
+          searchValue={menuSearch}
+          onSearchChange={setMenuSearch}
+          onSelect={(v) =>
+            setMenuSelected((prev) =>
+              prev.includes(v) ? prev.filter((s) => s !== v) : [...prev, v]
+            )
+          }
+          onSelectAll={() => setMenuSelected(OPTIONS.map((o) => o.value))}
+          onClear={() => setMenuSelected([])}
+        />
+      </Stack>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Label / Filled
+      </Typography>
+      {(["default", "primary", "secondary", "error", "warning", "success", "info"] as LabelColor[]).map(
+        (color) => (
+          <Stack key={color} direction="row" spacing={2} alignItems="center" sx={{ mb: 1.5 }}>
+            <LabelFilled label="Label Name" color={color} icon="none" />
+            <LabelFilled label="Label Name" color={color} icon="left" />
+            <LabelFilled label="Label Name" color={color} icon="right" />
+            <LabelFilled color={color} icon="only" />
+          </Stack>
+        )
+      )}
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Label / Outlined
+      </Typography>
+      {(["default", "primary", "secondary", "error", "warning", "success", "info"] as LabelColor[]).map(
+        (color) => (
+          <Stack key={color} direction="row" spacing={2} alignItems="center" sx={{ mb: 1.5 }}>
+            <LabelOutlined label="Label Name" color={color} icon="none" />
+            <LabelOutlined label="Label Name" color={color} icon="left" />
+            <LabelOutlined label="Label Name" color={color} icon="right" />
+            <LabelOutlined color={color} icon="only" />
+          </Stack>
+        )
+      )}
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Chip / Filled
+      </Typography>
+      {(["primary", "secondary"] as const).map((color) => (
+        <Stack key={color} spacing={1.5} sx={{ mb: 3 }}>
+          <Typography variant="body2" sx={{ color: "#666", textTransform: "capitalize" }}>
+            {color}
+          </Typography>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <ChipFilled label="Chip" color={color} />
+            <ChipFilled label="Chip" color={color} selected />
+            <ChipFilled label="Chip" color={color} disabled />
+          </Stack>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <ChipFilled label="Chip" color={color} deletable onDelete={() => {}} />
+            <ChipFilled label="Chip" color={color} selected deletable onDelete={() => {}} />
+            <ChipFilled label="Chip" color={color} disabled deletable onDelete={() => {}} />
+          </Stack>
+        </Stack>
+      ))}
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Chip / Outlined
+      </Typography>
+      {(["primary", "secondary"] as const).map((color) => (
+        <Stack key={color} spacing={1.5} sx={{ mb: 3 }}>
+          <Typography variant="body2" sx={{ color: "#666", textTransform: "capitalize" }}>
+            {color}
+          </Typography>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <ChipOutlined label="Chip" color={color} />
+            <ChipOutlined label="Chip" color={color} selected />
+            <ChipOutlined label="Chip" color={color} disabled />
+          </Stack>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <ChipOutlined label="Chip" color={color} deletable onDelete={() => {}} />
+            <ChipOutlined label="Chip" color={color} selected deletable onDelete={() => {}} />
+            <ChipOutlined label="Chip" color={color} disabled deletable onDelete={() => {}} />
+          </Stack>
+        </Stack>
+      ))}
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Chip / Status
+      </Typography>
+      <Stack direction="row" spacing={2} alignItems="center" flexWrap="wrap" useFlexGap>
+        <ChipStatus label="Chip" color="default" />
+        <ChipStatus label="Chip" color="default" icon />
+        <ChipStatus label="Chip" color="primary" />
+        <ChipStatus label="Chip" color="primary" icon />
+        <ChipStatus label="Chip" color="secondary" />
+        <ChipStatus label="Chip" color="secondary" icon />
+      </Stack>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
+        Chip / Status Outlined
+      </Typography>
+      <Stack direction="row" spacing={2} alignItems="center" flexWrap="wrap" useFlexGap>
+        <ChipStatusOutlined label="Chip" color="primary" />
+        <ChipStatusOutlined label="Chip" color="primary" icon />
+        <ChipStatusOutlined label="Chip" color="secondary" />
+        <ChipStatusOutlined label="Chip" color="secondary" icon />
+      </Stack>
+    </Box>
+  );
+}

package/src/components/Button/ButtonContained.tsx

@@ -0,0 +1,37 @@
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { Button } from "@mui/material";
+
+type ButtonContainedProps = {
+  label?: string;
+  icon?: "none" | "left" | "right";
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+export default function ButtonContained({
+  label = "Button",
+  icon = "none",
+  disabled = false,
+  onClick,
+}: ButtonContainedProps) {
+  return (
+    <Button
+      variant="contained"
+      color="primary"
+      disabled={disabled}
+      onClick={onClick}
+      startIcon={icon === "left" ? <ArrowBackIcon sx={{ fontSize: "20px !important" }} /> : undefined}
+      endIcon={icon === "right" ? <ArrowForwardIcon sx={{ fontSize: "20px !important" }} /> : undefined}
+      disableElevation
+      sx={{
+        "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+          margin: 0,
+        },
+        gap: icon !== "none" ? "6px" : 0,
+      }}
+    >
+      {label}
+    </Button>
+  );
+}

package/src/components/Button/ButtonOutlined.tsx

@@ -0,0 +1,37 @@
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { Button } from "@mui/material";
+
+type ButtonOutlinedProps = {
+  label?: string;
+  icon?: "none" | "left" | "right";
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+export default function ButtonOutlined({
+  label = "Button",
+  icon = "none",
+  disabled = false,
+  onClick,
+}: ButtonOutlinedProps) {
+  return (
+    <Button
+      variant="outlined"
+      color="primary"
+      disabled={disabled}
+      onClick={onClick}
+      startIcon={icon === "left" ? <ArrowBackIcon sx={{ fontSize: "20px !important" }} /> : undefined}
+      endIcon={icon === "right" ? <ArrowForwardIcon sx={{ fontSize: "20px !important" }} /> : undefined}
+      disableElevation
+      sx={{
+        "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+          margin: 0,
+        },
+        gap: icon !== "none" ? "6px" : 0,
+      }}
+    >
+      {label}
+    </Button>
+  );
+}

package/src/components/Button/ButtonText.tsx

@@ -0,0 +1,36 @@
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { Button } from "@mui/material";
+
+type ButtonTextProps = {
+  label?: string;
+  icon?: "none" | "left" | "right";
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+export default function ButtonText({
+  label = "Button",
+  icon = "none",
+  disabled = false,
+  onClick,
+}: ButtonTextProps) {
+  return (
+    <Button
+      variant="text"
+      color="primary"
+      disabled={disabled}
+      onClick={onClick}
+      startIcon={icon === "left" ? <ArrowBackIcon sx={{ fontSize: "20px !important" }} /> : undefined}
+      endIcon={icon === "right" ? <ArrowForwardIcon sx={{ fontSize: "20px !important" }} /> : undefined}
+      sx={{
+        "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+          margin: 0,
+        },
+        gap: icon !== "none" ? "6px" : 0,
+      }}
+    >
+      {label}
+    </Button>
+  );
+}

package/src/components/Button/index.ts

@@ -0,0 +1,3 @@
+export { default as ButtonContained } from "./ButtonContained";
+export { default as ButtonOutlined } from "./ButtonOutlined";
+export { default as ButtonText } from "./ButtonText";

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,41 @@
+import { Checkbox as MuiCheckbox, FormControlLabel } from "@mui/material";
+
+type CheckboxProps = {
+  label?: string;
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+};
+
+export default function Checkbox({
+  label,
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  onChange,
+}: CheckboxProps) {
+  const checkbox = (
+    <MuiCheckbox
+      checked={checked}
+      indeterminate={indeterminate}
+      disabled={disabled}
+      onChange={onChange}
+      size="small"
+      color="primary"
+    />
+  );
+
+  if (label) {
+    return (
+      <FormControlLabel
+        control={checkbox}
+        label={label}
+        disabled={disabled}
+        sx={{ margin: 0, gap: 0 }}
+      />
+    );
+  }
+
+  return checkbox;
+}

package/src/components/Checkbox/index.ts

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