@ceed/ads 1.33.0 → 1.35.0

package/dist/index.cjs

@@ -160,6 +160,7 @@ __export(index_exports, {
   RadioGroup: () => RadioGroup,
   RadioList: () => RadioList,
   RadioTileGroup: () => RadioTileGroup,
+  SearchBar: () => SearchBar,
   Select: () => Select,
   Sheet: () => Sheet,
   Skeleton: () => import_joy71.Skeleton,
@@ -7934,6 +7935,92 @@ function RadioList(props) {
 }
 RadioList.displayName = "RadioList";
 
+// src/components/SearchBar/SearchBar.tsx
+var React54 = __toESM(require("react"));
+var import_styles = require("@mui/joy/styles");
+var import_SearchRounded = __toESM(require("@mui/icons-material/SearchRounded"));
+var import_CloseRounded = __toESM(require("@mui/icons-material/CloseRounded"));
+var SearchBarRoot = (0, import_styles.styled)("div", {
+  name: "SearchBar",
+  slot: "root"
+})(({ theme, ownerState }) => {
+  const width = `--${theme.cssVarPrefix}-SearchBar-width`;
+  return {
+    [width]: ownerState.hideSelect ? "220px" : "300px",
+    display: "flex",
+    flexDirection: "row",
+    width: `var(${width})`,
+    backgroundColor: theme.vars.palette.background.surface,
+    borderRadius: theme.vars.radius.sm,
+    border: `1px solid ${theme.vars.palette.neutral.outlinedBorder}`,
+    overflow: "hidden"
+  };
+});
+var SearchBar = React54.forwardRef(function SearchBar2(inProps, ref) {
+  const props = (0, import_styles.useThemeProps)({ props: inProps, name: "SearchBar" });
+  const { hideSelect = false, options, value, onChange, onSearch, ...other } = props;
+  const [selectVal, setSelectVal] = React54.useState(options?.[0]?.value ?? "");
+  const [isHovered, setIsHovered] = React54.useState(false);
+  const ownerState = { hideSelect };
+  const selectedOption = options?.find((o) => o.value === selectVal);
+  const placeholder = selectedOption?.placeholder ?? "";
+  const handleSearch = () => {
+    onSearch?.({ selectValue: hideSelect ? void 0 : selectVal, inputValue: value });
+  };
+  const handleClear = () => {
+    onChange("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+  return /* @__PURE__ */ React54.createElement(SearchBarRoot, { ref, ownerState, ...other }, !hideSelect && options && /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(
+    Select,
+    {
+      variant: "plain",
+      size: "sm",
+      color: "neutral",
+      value: selectVal,
+      options,
+      onChange: (_, newValue) => setSelectVal(newValue),
+      sx: { flex: 1, maxWidth: "110px" },
+      slotProps: {
+        button: {
+          style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+        }
+      }
+    }
+  ), /* @__PURE__ */ React54.createElement(Divider, { orientation: "vertical", sx: { height: "16px", alignSelf: "center" } })), /* @__PURE__ */ React54.createElement(
+    Input,
+    {
+      variant: "plain",
+      size: "sm",
+      color: "neutral",
+      placeholder,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      onKeyDown: handleKeyDown,
+      sx: { flex: 1, minWidth: 0 },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      endDecorator: isHovered && value ? /* @__PURE__ */ React54.createElement(
+        IconButton,
+        {
+          variant: "plain",
+          size: "sm",
+          color: "neutral",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleClear,
+          "aria-label": "Clear"
+        },
+        /* @__PURE__ */ React54.createElement(import_CloseRounded.default, null)
+      ) : void 0
+    }
+  ), /* @__PURE__ */ React54.createElement(IconButton, { variant: "plain", size: "sm", color: "neutral", onClick: handleSearch, "aria-label": "Search" }, /* @__PURE__ */ React54.createElement(import_SearchRounded.default, null)));
+});
+SearchBar.displayName = "SearchBar";
+
 // src/components/Stepper/Stepper.tsx
 var import_react57 = __toESM(require("react"));
 var import_joy67 = require("@mui/joy");
@@ -8248,6 +8335,7 @@ var defaultTheme = (0, import_joy70.extendTheme)({
         }
       }
     },
+    SearchBar: {},
     JoySelect: {
       defaultProps: {
         size: "sm"

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { useTheme, useColorScheme, useThemeProps, ButtonGroup, alertClasses, boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, AutocompleteListbox, AutocompleteOption, autocompleteClasses, autocompleteListboxClasses, autocompleteOptionClasses, avatarClasses, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, breadcrumbsClasses, cardClasses, cardActionsClasses, cardContentClasses, cardCoverClasses, cardOverflowClasses, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, stepClasses, StepButton, stepButtonClasses, stepperClasses, Skeleton, skeletonClasses, styled, } from '@mui/joy';
 export type { ButtonProps, Theme } from '@mui/joy';
-export { Accordion, Accordions, Alert, Autocomplete, AccordionDetails, AccordionSummary, Avatar, AvatarGroup, Box, Breadcrumbs, Button, Calendar, Card, CardActions, CardContent, CardCover, CardOverflow, Checkbox, Chip, Container, CssBaseline, CurrencyInput, DataTable, DatePicker, DateRangePicker, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Dropdown, FilterableCheckboxGroup, FilterMenu, extendTheme, InsetDrawer, Uploader, FormControl, FormHelperText, FormLabel, Grid, IconButton, IconMenuButton, InfoSign, Input, Markdown, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, MonthPicker, MonthRangePicker, PercentageInput, ProfileMenu, Pagination, NavigationGroup, NavigationItem, Navigator, Radio, RadioGroup, RadioList, RadioTileGroup, Select, Option, Sheet, Stack, Step, StepIndicator, Stepper, Switch, theme, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from './components';
+export { Accordion, Accordions, Alert, Autocomplete, AccordionDetails, AccordionSummary, Avatar, AvatarGroup, Box, Breadcrumbs, Button, Calendar, Card, CardActions, CardContent, CardCover, CardOverflow, Checkbox, Chip, Container, CssBaseline, CurrencyInput, DataTable, DatePicker, DateRangePicker, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Dropdown, FilterableCheckboxGroup, FilterMenu, extendTheme, InsetDrawer, Uploader, FormControl, FormHelperText, FormLabel, Grid, IconButton, IconMenuButton, InfoSign, Input, Markdown, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, MonthPicker, MonthRangePicker, PercentageInput, ProfileMenu, Pagination, NavigationGroup, NavigationItem, Navigator, Radio, RadioGroup, RadioList, RadioTileGroup, SearchBar, Select, Option, Sheet, Stack, Step, StepIndicator, Stepper, Switch, theme, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from './components';
 export type * from './components';

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   useTheme as useTheme2,
   useColorScheme,
-  useThemeProps as useThemeProps9,
+  useThemeProps as useThemeProps10,
   ButtonGroup,
   alertClasses,
   boxClasses,
@@ -91,7 +91,7 @@ import {
   stepperClasses,
   Skeleton as Skeleton2,
   skeletonClasses,
-  styled as styled31
+  styled as styled32
 } from "@mui/joy";
 
 // src/components/Accordions/Accordions.tsx
@@ -7828,23 +7828,109 @@ function RadioList(props) {
 }
 RadioList.displayName = "RadioList";
 
+// src/components/SearchBar/SearchBar.tsx
+import * as React54 from "react";
+import { styled as styled28, useThemeProps as useThemeProps9 } from "@mui/joy/styles";
+import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+var SearchBarRoot = styled28("div", {
+  name: "SearchBar",
+  slot: "root"
+})(({ theme, ownerState }) => {
+  const width = `--${theme.cssVarPrefix}-SearchBar-width`;
+  return {
+    [width]: ownerState.hideSelect ? "220px" : "300px",
+    display: "flex",
+    flexDirection: "row",
+    width: `var(${width})`,
+    backgroundColor: theme.vars.palette.background.surface,
+    borderRadius: theme.vars.radius.sm,
+    border: `1px solid ${theme.vars.palette.neutral.outlinedBorder}`,
+    overflow: "hidden"
+  };
+});
+var SearchBar = React54.forwardRef(function SearchBar2(inProps, ref) {
+  const props = useThemeProps9({ props: inProps, name: "SearchBar" });
+  const { hideSelect = false, options, value, onChange, onSearch, ...other } = props;
+  const [selectVal, setSelectVal] = React54.useState(options?.[0]?.value ?? "");
+  const [isHovered, setIsHovered] = React54.useState(false);
+  const ownerState = { hideSelect };
+  const selectedOption = options?.find((o) => o.value === selectVal);
+  const placeholder = selectedOption?.placeholder ?? "";
+  const handleSearch = () => {
+    onSearch?.({ selectValue: hideSelect ? void 0 : selectVal, inputValue: value });
+  };
+  const handleClear = () => {
+    onChange("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+  return /* @__PURE__ */ React54.createElement(SearchBarRoot, { ref, ownerState, ...other }, !hideSelect && options && /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(
+    Select,
+    {
+      variant: "plain",
+      size: "sm",
+      color: "neutral",
+      value: selectVal,
+      options,
+      onChange: (_, newValue) => setSelectVal(newValue),
+      sx: { flex: 1, maxWidth: "110px" },
+      slotProps: {
+        button: {
+          style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+        }
+      }
+    }
+  ), /* @__PURE__ */ React54.createElement(Divider, { orientation: "vertical", sx: { height: "16px", alignSelf: "center" } })), /* @__PURE__ */ React54.createElement(
+    Input,
+    {
+      variant: "plain",
+      size: "sm",
+      color: "neutral",
+      placeholder,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      onKeyDown: handleKeyDown,
+      sx: { flex: 1, minWidth: 0 },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      endDecorator: isHovered && value ? /* @__PURE__ */ React54.createElement(
+        IconButton,
+        {
+          variant: "plain",
+          size: "sm",
+          color: "neutral",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleClear,
+          "aria-label": "Clear"
+        },
+        /* @__PURE__ */ React54.createElement(CloseRoundedIcon, null)
+      ) : void 0
+    }
+  ), /* @__PURE__ */ React54.createElement(IconButton, { variant: "plain", size: "sm", color: "neutral", onClick: handleSearch, "aria-label": "Search" }, /* @__PURE__ */ React54.createElement(SearchRoundedIcon, null)));
+});
+SearchBar.displayName = "SearchBar";
+
 // src/components/Stepper/Stepper.tsx
-import React54 from "react";
+import React55 from "react";
 import {
   Stepper as JoyStepper,
   Step as JoyStep,
   StepIndicator as JoyStepIndicator,
   stepClasses,
   stepIndicatorClasses,
-  styled as styled28
+  styled as styled29
 } from "@mui/joy";
 import CheckIcon from "@mui/icons-material/Check";
 import { motion as motion26 } from "framer-motion";
-var Step = styled28(JoyStep)({});
+var Step = styled29(JoyStep)({});
 Step.displayName = "Step";
-var StepIndicator = styled28(JoyStepIndicator)({});
+var StepIndicator = styled29(JoyStepIndicator)({});
 StepIndicator.displayName = "StepIndicator";
-var StyledStepper = styled28(JoyStepper)(({ theme }) => ({
+var StyledStepper = styled29(JoyStepper)(({ theme }) => ({
   "--StepIndicator-size": "24px",
   "--Step-gap": theme.spacing(2),
   "--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
@@ -7865,7 +7951,7 @@ function Stepper(props) {
     stepOrientation = "horizontal"
   } = props;
   const effectiveStepOrientation = orientation === "vertical" ? "horizontal" : stepOrientation;
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(
     MotionStepper,
     {
       orientation,
@@ -7904,23 +7990,23 @@ function Stepper(props) {
       const completed = activeStep > i + 1;
       const disabled = activeStep < i + 1;
       const hasContent = step.label || step.extraContent;
-      return /* @__PURE__ */ React54.createElement(
+      return /* @__PURE__ */ React55.createElement(
         Step,
         {
           key: `step-${i}`,
-          indicator: /* @__PURE__ */ React54.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React54.createElement(CheckIcon, null) : step.indicatorContent),
+          indicator: /* @__PURE__ */ React55.createElement(StepIndicator, { variant: disabled ? "outlined" : "solid", color: disabled ? "neutral" : "primary" }, completed ? /* @__PURE__ */ React55.createElement(CheckIcon, null) : step.indicatorContent),
           active,
           completed,
           disabled,
           orientation: effectiveStepOrientation
         },
-        hasContent && /* @__PURE__ */ React54.createElement(
+        hasContent && /* @__PURE__ */ React55.createElement(
           Stack_default,
           {
             sx: orientation === "horizontal" && effectiveStepOrientation === "vertical" ? { alignItems: "center" } : {}
           },
-          step.label && /* @__PURE__ */ React54.createElement(Typography_default, { level: "title-sm" }, step.label),
-          step.extraContent && /* @__PURE__ */ React54.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
+          step.label && /* @__PURE__ */ React55.createElement(Typography_default, { level: "title-sm" }, step.label),
+          step.extraContent && /* @__PURE__ */ React55.createElement(Typography_default, { level: "body-xs" }, step.extraContent)
         )
       );
     })
@@ -7929,11 +8015,11 @@ function Stepper(props) {
 Stepper.displayName = "Stepper";
 
 // src/components/Switch/Switch.tsx
-import React55 from "react";
-import { Switch as JoySwitch, styled as styled29, switchClasses } from "@mui/joy";
+import React56 from "react";
+import { Switch as JoySwitch, styled as styled30, switchClasses } from "@mui/joy";
 import { motion as motion27 } from "framer-motion";
 var MotionSwitch = motion27(JoySwitch);
-var StyledThumb = styled29(motion27.div)({
+var StyledThumb = styled30(motion27.div)({
   "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
   display: "inline-flex",
   justifyContent: "center",
@@ -7951,14 +8037,14 @@ var StyledThumb = styled29(motion27.div)({
     right: "var(--Switch-thumbOffset)"
   }
 });
-var Thumb = (props) => /* @__PURE__ */ React55.createElement(StyledThumb, { ...props, layout: true, transition: spring });
+var Thumb = (props) => /* @__PURE__ */ React56.createElement(StyledThumb, { ...props, layout: true, transition: spring });
 var spring = {
   type: "spring",
   stiffness: 700,
   damping: 30
 };
 var Switch = (props) => {
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(
     MotionSwitch,
     {
       ...props,
@@ -7972,21 +8058,21 @@ var Switch = (props) => {
 Switch.displayName = "Switch";
 
 // src/components/Tabs/Tabs.tsx
-import React56, { forwardRef as forwardRef11 } from "react";
+import React57, { forwardRef as forwardRef12 } from "react";
 import {
   Tabs as JoyTabs,
   Tab as JoyTab,
   TabList as JoyTabList,
   TabPanel as JoyTabPanel,
-  styled as styled30,
+  styled as styled31,
   tabClasses
 } from "@mui/joy";
-var StyledTabs = styled30(JoyTabs)(({ theme }) => ({
+var StyledTabs = styled31(JoyTabs)(({ theme }) => ({
   backgroundColor: theme.palette.background.body
 }));
 var Tabs = StyledTabs;
 Tabs.displayName = "Tabs";
-var StyledTab = styled30(JoyTab)(({ theme }) => ({
+var StyledTab = styled31(JoyTab)(({ theme }) => ({
   gap: theme.spacing(2),
   [`&:not(.${tabClasses.selected})`]: {
     color: theme.palette.neutral[700]
@@ -7995,15 +8081,15 @@ var StyledTab = styled30(JoyTab)(({ theme }) => ({
     backgroundColor: theme.palette.background.body
   }
 }));
-var Tab = forwardRef11(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
-  return /* @__PURE__ */ React56.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
+var Tab = forwardRef12(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
+  return /* @__PURE__ */ React57.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
 });
 Tab.displayName = "Tab";
 var TabList = JoyTabList;
 var TabPanel = JoyTabPanel;
 
 // src/components/ThemeProvider/ThemeProvider.tsx
-import React57 from "react";
+import React58 from "react";
 import { CssBaseline, CssVarsProvider, checkboxClasses, extendTheme, inputClasses } from "@mui/joy";
 var colorScheme = {
   palette: {
@@ -8156,6 +8242,7 @@ var defaultTheme = extendTheme({
         }
       }
     },
+    SearchBar: {},
     JoySelect: {
       defaultProps: {
         size: "sm"
@@ -8282,7 +8369,7 @@ var defaultTheme = extendTheme({
 });
 function ThemeProvider(props) {
   const theme = props.theme || defaultTheme;
-  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React57.createElement(CssBaseline, null), props.children));
+  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React58.createElement(CssBaseline, null), props.children));
 }
 ThemeProvider.displayName = "ThemeProvider";
 export {
@@ -8366,6 +8453,7 @@ export {
   RadioGroup,
   RadioList,
   RadioTileGroup,
+  SearchBar,
   Select,
   Sheet,
   Skeleton2 as Skeleton,
@@ -8450,7 +8538,7 @@ export {
   stepButtonClasses,
   stepClasses2 as stepClasses,
   stepperClasses,
-  styled31 as styled,
+  styled32 as styled,
   switchClasses2 as switchClasses,
   tabListClasses,
   tabPanelClasses,
@@ -8462,5 +8550,5 @@ export {
   typographyClasses,
   useColorScheme,
   useTheme2 as useTheme,
-  useThemeProps9 as useThemeProps
+  useThemeProps10 as useThemeProps
 };

package/dist/llms.txt

@@ -40,6 +40,7 @@
 - [Radio](./components/inputs/RadioButton.md)
 - [RadioList](./components/inputs/RadioList.md)
 - [RadioTileGroup](./components/inputs/RadioTileGroup.md)
+- [SearchBar](./components/inputs/SearchBar.md)
 - [Select](./components/inputs/Select.md)
 - [Slider](./components/inputs/Slider.md)
 - [Switch](./components/inputs/Switch.md)