@gobolt/genesis 0.3.18 → 0.3.21

package/dist/components/Select/Select.js

@@ -1,219 +1,199 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default from "react";
-import { TYPE } from "../../constants/index.js";
-import styled from "styled-components";
-import SelectTrigger from "./SelectTrigger.js";
-import { useGenesis } from "../../providers/useGenesis.js";
-const SelectWrapper = styled.div`
-  position: relative;
-  background-color: transparent;
-  border-radius: 8px;
-  width: auto;
-
-  ${({ $isFocused, theme, type = "primary" }) => $isFocused && `
-    background-color: transparent;
-  `}
-
-  ${({ disabled, theme }) => disabled && `
-    cursor: not-allowed;
-    
-    &:hover {
-      border-color: ${theme.colors.inputs.surface.border};
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
     }
-  `}
-`;
-const SelectDropdown = styled.div`
-  padding: 0px;
-  border-radius: 0px;
-  animation-duration: ${({ theme }) => `${theme.motion.veryfast}s`};
-  transition: all ${({ theme }) => `${theme.motion.veryfast}s`}
-    cubic-bezier(0.645, 0.045, 0.355, 1);
-
-  &.entering {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-
-  &.entered {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-
-  &.exiting {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-`;
-const MenuItem = styled.div`
-  padding: 8px 12px;
-  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
-  background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "transparent"};
-  color: ${({ $isSelected, disabled, theme, type = "primary" }) => disabled ? theme.colors.inputs.onsurface.disabled : $isSelected ? theme.colors[type].hover.color : theme.colors.onsurface.copy};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: all ${({ theme }) => `${theme.motion.veryfast}s`} ease-in-out;
-  opacity: ${({ disabled }) => disabled ? 0.5 : 1};
-
-  ${({ disabled }) => !disabled && `
-    &:hover {
-      background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "rgba(0, 0, 0, 0.04)"};
-      color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.color : theme.colors.onsurface["copy-dark"]};
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
     }
-
-    &:active {
-      background-color: ${({ theme, type = "primary" }) => theme.colors[type].hover.backgroundColor};
-      color: ${({ theme, type = "primary" }) => theme.colors[type].hover.color};
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
     }
-  `}
-`;
-const Select = ({
-  type = TYPE.primary,
-  state,
-  variant = "none",
-  defaultValue,
-  onChange,
-  size = "normal",
-  width = "100%",
-  value,
-  options = [],
-  placeholder,
-  selectDisplayMode = "count",
-  isSingleSelect = true,
-  disabled = false,
-  ...rest
-}) => {
-  const [isOpen, setIsOpen] = React__default.useState(false);
-  const [isFocused, setIsFocused] = React__default.useState(false);
-  const [dropdownAnimation, setDropdownAnimation] = React__default.useState("entered");
-  const selectReference = React__default.useRef(null);
-  const { theme } = useGenesis();
-  React__default.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (selectReference.current && !selectReference.current.contains(event.target)) {
-        handleClose();
-        setIsFocused(false);
-      }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { TYPE } from "@gobolt/genesis/constants";
+import styled from "@gobolt/genesis/utils/styled";
+import SelectTrigger from "./SelectTrigger";
+import { useGenesis } from "@gobolt/genesis/providers";
+var SelectWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background-color: transparent;\n  border-radius: 8px;\n  width: auto;\n\n  ", "\n\n  ", "\n"], ["\n  position: relative;\n  background-color: transparent;\n  border-radius: 8px;\n  width: auto;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var $isFocused = _a.$isFocused, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
+    return $isFocused &&
+        "\n    background-color: transparent;\n  ";
+}, function (_a) {
+    var disabled = _a.disabled, theme = _a.theme;
+    return disabled &&
+        "\n    cursor: not-allowed;\n    \n    &:hover {\n      border-color: ".concat(theme.colors.inputs.surface.border, ";\n    }\n  ");
+});
+var SelectDropdown = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0px;\n  border-radius: 0px;\n  animation-duration: ", ";\n  transition: all ", "\n    cubic-bezier(0.645, 0.045, 0.355, 1);\n\n  &.entering {\n    opacity: 0;\n    transform: scaleY(0.8);\n  }\n\n  &.entered {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n\n  &.exiting {\n    opacity: 0;\n    transform: scaleY(0.8);\n  }\n"], ["\n  padding: 0px;\n  border-radius: 0px;\n  animation-duration: ", ";\n  transition: all ", "\n    cubic-bezier(0.645, 0.045, 0.355, 1);\n\n  &.entering {\n    opacity: 0;\n    transform: scaleY(0.8);\n  }\n\n  &.entered {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n\n  &.exiting {\n    opacity: 0;\n    transform: scaleY(0.8);\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.motion.veryfast, "s");
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.motion.veryfast, "s");
+});
+var MenuItem = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 8px 12px;\n  cursor: ", ";\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: all ", " ease-in-out;\n  opacity: ", ";\n\n  ", "\n"], ["\n  padding: 8px 12px;\n  cursor: ", ";\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: all ", " ease-in-out;\n  opacity: ", ";\n\n  ", "\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var $isSelected = _a.$isSelected, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
+    return $isSelected ? theme.colors[type].hover.backgroundColor : "transparent";
+}, function (_a) {
+    var $isSelected = _a.$isSelected, disabled = _a.disabled, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
+    return disabled
+        ? theme.colors.inputs.onsurface.disabled
+        : $isSelected
+            ? theme.colors[type].hover.color
+            : theme.colors.onsurface.copy;
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.motion.veryfast, "s");
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 0.5 : 1);
+}, function (_a) {
+    var disabled = _a.disabled;
+    return !disabled &&
+        "\n    &:hover {\n      background-color: ".concat(function (_a) {
+            var $isSelected = _a.$isSelected, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
+            return $isSelected
+                ? theme.colors[type].hover.backgroundColor
+                : "rgba(0, 0, 0, 0.04)";
+        }, ";\n      color: ").concat(function (_a) {
+            var $isSelected = _a.$isSelected, theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
+            return $isSelected
+                ? theme.colors[type].hover.color
+                : theme.colors.onsurface["copy-dark"];
+        }, ";\n    }\n\n    &:active {\n      background-color: ").concat(function (_a) {
+            var theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
+            return theme.colors[type].hover.backgroundColor;
+        }, ";\n      color: ").concat(function (_a) {
+            var theme = _a.theme, _b = _a.type, type = _b === void 0 ? "primary" : _b;
+            return theme.colors[type].hover.color;
+        }, ";\n    }\n  ");
+});
+var Select = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? TYPE.primary : _b, state = _a.state, _c = _a.variant, variant = _c === void 0 ? "none" : _c, defaultValue = _a.defaultValue, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "normal" : _d, _e = _a.width, width = _e === void 0 ? "100%" : _e, value = _a.value, _f = _a.options, options = _f === void 0 ? [] : _f, placeholder = _a.placeholder, _g = _a.selectDisplayMode, selectDisplayMode = _g === void 0 ? "count" : _g, _h = _a.isSingleSelect, isSingleSelect = _h === void 0 ? true : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, rest = __rest(_a, ["type", "state", "variant", "defaultValue", "onChange", "size", "width", "value", "options", "placeholder", "selectDisplayMode", "isSingleSelect", "disabled"]);
+    var _k = __read(React.useState(false), 2), isOpen = _k[0], setIsOpen = _k[1];
+    var _l = __read(React.useState(false), 2), isFocused = _l[0], setIsFocused = _l[1];
+    var _m = __read(React.useState("entered"), 2), dropdownAnimation = _m[0], setDropdownAnimation = _m[1];
+    var selectReference = React.useRef(null);
+    var theme = useGenesis().theme;
+    React.useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (selectReference.current &&
+                !selectReference.current.contains(event.target)) {
+                handleClose();
+                setIsFocused(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    var handleClose = function () {
+        setDropdownAnimation("exiting");
+        setTimeout(function () {
+            setIsOpen(false);
+            setDropdownAnimation("entered");
+        }, 200);
     };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+    var handleTriggerClick = function () {
+        if (disabled)
+            return;
+        setIsFocused(true);
+        if (isOpen) {
+            handleClose();
+        }
+        else {
+            setIsOpen(true);
+            setDropdownAnimation("entering");
+            setTimeout(function () {
+                setDropdownAnimation("entered");
+            }, 0);
+        }
     };
-  }, [isOpen]);
-  const handleClose = () => {
-    setDropdownAnimation("exiting");
-    setTimeout(() => {
-      setIsOpen(false);
-      setDropdownAnimation("entered");
-    }, 200);
-  };
-  const handleTriggerClick = () => {
-    if (disabled) return;
-    setIsFocused(true);
-    if (isOpen) {
-      handleClose();
-    } else {
-      setIsOpen(true);
-      setDropdownAnimation("entering");
-      setTimeout(() => {
-        setDropdownAnimation("entered");
-      }, 0);
-    }
-  };
-  const handleOptionSelect = (optionValue) => {
-    if (disabled) return;
-    let newValue;
-    if (Array.isArray(value)) {
-      const stringValue = value.map(String);
-      newValue = stringValue.includes(optionValue) ? stringValue.filter((v) => v !== optionValue) : [...stringValue, optionValue];
-    } else {
-      newValue = optionValue;
-    }
-    if (isSingleSelect || variant === "simple") {
-      handleClose();
-      onChange?.(newValue);
-    } else {
-      onChange?.(newValue);
-    }
-  };
-  const getSelectModeValue = (value2) => {
-    if (Array.isArray(value2)) {
-      if (selectDisplayMode === "count") {
-        return `${value2.length} selected`;
-      }
-      return value2;
-    }
-    return value2;
-  };
-  const modeValue = getSelectModeValue(value);
-  return /* @__PURE__ */ jsx("div", { style: { position: "relative", width }, children: /* @__PURE__ */ jsxs(
-    SelectWrapper,
-    {
-      ref: selectReference,
-      $isFocused: isFocused,
-      type,
-      disabled,
-      onFocus: () => !disabled && setIsFocused(true),
-      onBlur: () => !isOpen && setIsFocused(false),
-      tabIndex: disabled ? -1 : 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          SelectTrigger,
-          {
-            theme,
-            type,
-            state,
-            value: modeValue,
-            placeholder,
-            open: isOpen,
-            onClick: handleTriggerClick,
-            options,
-            disabled,
-            variant
-          }
-        ),
-        isOpen && !disabled && /* @__PURE__ */ jsx(
-          SelectDropdown,
-          {
-            type,
-            state,
-            className: dropdownAnimation,
-            style: {
-              position: "absolute",
-              top: "calc(100% + 4px)",
-              left: 0,
-              right: 0,
-              zIndex: 1e3,
-              backgroundColor: "white",
-              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-              border: "1px solid #d9d9d9",
-              transformOrigin: "top"
-            },
-            children: options.map((option) => {
-              const isSelected = Array.isArray(value) ? value.map(String).includes(option.value) : String(value) === option.value;
-              return /* @__PURE__ */ jsxs(
-                MenuItem,
-                {
-                  onClick: () => handleOptionSelect(option.value),
-                  $isSelected: isSelected,
-                  type,
-                  disabled,
-                  children: [
-                    option.label,
-                    isSelected && /* @__PURE__ */ jsx("span", { style: { marginLeft: "8px" }, children: "✓" })
-                  ]
-                },
-                option.value
-              );
-            })
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  Select as default
+    var handleOptionSelect = function (optionValue) {
+        if (disabled)
+            return;
+        var newValue;
+        if (Array.isArray(value)) {
+            // Handle multi-select
+            var stringValue = value.map(String);
+            newValue = stringValue.includes(optionValue)
+                ? stringValue.filter(function (v) { return v !== optionValue; })
+                : __spreadArray(__spreadArray([], __read(stringValue), false), [optionValue], false);
+        }
+        else {
+            // Handle single select
+            newValue = optionValue;
+        }
+        // Autoclose if single select or variant is 'simple'
+        if (isSingleSelect || variant === "simple") {
+            handleClose(); // Close immediately
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+    };
+    var getSelectModeValue = function (value) {
+        if (Array.isArray(value)) {
+            if (selectDisplayMode === "count") {
+                return "".concat(value.length, " selected");
+            }
+            return value;
+        }
+        return value;
+    };
+    var modeValue = getSelectModeValue(value);
+    return (_jsx("div", { style: { position: "relative", width: width }, children: _jsxs(SelectWrapper, { ref: selectReference, "$isFocused": isFocused, type: type, disabled: disabled, onFocus: function () { return !disabled && setIsFocused(true); }, onBlur: function () { return !isOpen && setIsFocused(false); }, tabIndex: disabled ? -1 : 0, children: [_jsx(SelectTrigger, { theme: theme, type: type, state: state, value: modeValue, placeholder: placeholder, open: isOpen, onClick: handleTriggerClick, options: options, disabled: disabled, variant: variant }), isOpen && !disabled && (_jsx(SelectDropdown, { type: type, state: state, className: dropdownAnimation, style: {
+                        position: "absolute",
+                        top: "calc(100% + 4px)",
+                        left: 0,
+                        right: 0,
+                        zIndex: 1000,
+                        backgroundColor: "white",
+                        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+                        border: "1px solid #d9d9d9",
+                        transformOrigin: "top",
+                    }, children: options.map(function (option) {
+                        var isSelected = Array.isArray(value)
+                            ? value.map(String).includes(option.value)
+                            : String(value) === option.value;
+                        return (_jsxs(MenuItem, { onClick: function () { return handleOptionSelect(option.value); }, "$isSelected": isSelected, type: type, disabled: disabled, children: [option.label, isSelected && _jsx("span", { style: { marginLeft: "8px" }, children: "\u2713" })] }, option.value));
+                    }) }))] }) }));
 };
+export default Select;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Select/SelectTrigger.d.ts

@@ -1,6 +1,6 @@
-import { default as React } from 'react';
-import { STATE } from '../../constants';
-import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+import React from "react";
+import { STATE } from "@gobolt/genesis/constants";
+import { GenesisTheme } from "@/lib/styles/theme/genesis-theme.types";
 type ThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
 type Variant = "none" | "simple";
 interface SelectTriggerProperties {

package/dist/components/Select/SelectTrigger.js

@@ -1,125 +1,89 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React__default from "react";
-import styled from "styled-components";
-import DropdownChevron from "../shared/DropdownChevron.js";
-import Typography from "../Typography/Typography.js";
-const getBackgroundColor = (colors, disabled, $variant) => {
-  if ($variant === "simple") return "#F4F4F4";
-  if (disabled) return "#F4F4F4";
-  return "#fff";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-const TriggerWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  opacity: ${({ $disabled }) => $disabled ? 0.4 : 1};
-  position: relative;
-  box-shadow: ${({ $variant }) => $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)"};
-  transition: all 0.2s ease-in-out;
-  min-height: ${({ $variant }) => $variant === "simple" ? "32px" : "40px"};
-
-  &:focus-visible {
-    outline: none;
-  }
-
-  &:focus {
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
-      0 0 0 3px
-        ${({ theme, $themeType = "primary" }) => theme.colors[$themeType].focussed.ringColor};
-  }
-
-  ${({ $variant, theme, $disabled }) => $variant === "simple" ? `
-    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
-    background: ${$disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)"};
-    border: none;
-    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
-    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
-
-    &:hover {
-      border: none;
-    }
-    ` : `
-    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
-    background: ${$disabled ? theme.colors.inputs.surface.disabled : theme.colors.surface.default?.backgroundColor};
-    border: 1px solid #9a9a9a;
-    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
-    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
-
-    &:hover {
-      border-color: rgba(0, 0, 0, 0.2);
-    }
-  `}
-`;
-const ValueContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.sizing.Size2}px;
-  flex: 1;
-  padding: 4px 8px;
-`;
-const ChevronContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${({ $variant }) => $variant === "simple" ? "4px" : "4px"};
-  margin-left: ${({ $variant }) => $variant === "simple" ? "4px" : "0"};
-`;
-const SelectTrigger = ({
-  type = "primary",
-  theme,
-  state,
-  value,
-  placeholder = "Select...",
-  open,
-  onClick,
-  renderValue,
-  options = [],
-  disabled = false,
-  variant = "none"
-}) => {
-  const handleClick = React__default.useCallback(() => {
-    if (disabled) return;
-    onClick?.();
-  }, [disabled, onClick]);
-  const displayValue = React__default.useMemo(() => {
-    if (!value) return null;
-    if (renderValue) return renderValue(value);
-    if (Array.isArray(value)) {
-      if (value.length === 0) return null;
-      const selectedLabels = value.map(String).map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
-      return selectedLabels.length > 0 ? selectedLabels.join(", ") : `${value.length} selected`;
-    }
-    const selectedOption = options.find((opt) => opt.value === String(value));
-    return selectedOption?.label || value.toString();
-  }, [value, renderValue, options]);
-  return /* @__PURE__ */ jsxs(
-    TriggerWrapper,
-    {
-      $themeType: type,
-      $state: state,
-      onClick: handleClick,
-      tabIndex: disabled ? -1 : 0,
-      role: "button",
-      $disabled: disabled,
-      $variant: variant,
-      style: {
-        backgroundColor: getBackgroundColor(theme, disabled, variant)
-      },
-      children: [
-        /* @__PURE__ */ jsx(ValueContainer, { $variant: variant, children: displayValue ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy", children: displayValue }) : /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "body2",
-            color: disabled ? "copy-light" : "copy-light",
-            children: placeholder
-          }
-        ) }),
-        /* @__PURE__ */ jsx(ChevronContainer, { $variant: variant, children: /* @__PURE__ */ jsx(DropdownChevron, {}) })
-      ]
-    }
-  );
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import styled from "@gobolt/genesis/utils/styled";
+import DropdownChevron from "../shared/DropdownChevron";
+import { Typography } from "@gobolt/genesis/components";
+var getBackgroundColor = function (colors, disabled, $variant) {
+    if ($variant === "simple")
+        return "#F4F4F4";
+    if (disabled)
+        return "#F4F4F4";
+    return "#fff";
 };
-export {
-  SelectTrigger as default
+var TriggerWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: ", ";\n  opacity: ", ";\n  position: relative;\n  box-shadow: ", ";\n  transition: all 0.2s ease-in-out;\n  min-height: ", ";\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus {\n    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),\n      0 0 0 3px\n        ", ";\n  }\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: ", ";\n  opacity: ", ";\n  position: relative;\n  box-shadow: ", ";\n  transition: all 0.2s ease-in-out;\n  min-height: ", ";\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus {\n    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),\n      0 0 0 3px\n        ", ";\n  }\n\n  ", "\n"])), function (_a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 0.4 : 1);
+}, function (_a) {
+    var $variant = _a.$variant;
+    return $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)";
+}, function (_a) {
+    var $variant = _a.$variant;
+    return ($variant === "simple" ? "32px" : "40px");
+}, function (_a) {
+    var theme = _a.theme, _b = _a.$themeType, $themeType = _b === void 0 ? "primary" : _b;
+    return theme.colors[$themeType].focussed.ringColor;
+}, function (_a) {
+    var _b;
+    var $variant = _a.$variant, theme = _a.theme, $disabled = _a.$disabled;
+    return $variant === "simple"
+        ? "\n    padding: ".concat(theme.sizing.Size1, " ").concat(theme.sizing.Size2, ";\n    background: ").concat($disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)", ";\n    border: none;\n    border-radius: ").concat(theme.borderRadius.BorderRadiusSm, "px;\n    min-height: ").concat(function (_a) {
+            var $variant = _a.$variant;
+            return ($variant === "simple" ? "32px" : "40px");
+        }, ";\n\n    &:hover {\n      border: none;\n    }\n    ")
+        : "\n    padding: ".concat(theme.sizing.Size1, " ").concat(theme.sizing.Size2, ";\n    background: ").concat($disabled
+            ? theme.colors.inputs.surface.disabled
+            : (_b = theme.colors.surface.default) === null || _b === void 0 ? void 0 : _b.backgroundColor, ";\n    border: 1px solid #9a9a9a;\n    border-radius: ").concat(theme.borderRadius.BorderRadiusSm, "px;\n    min-height: ").concat(function (_a) {
+            var $variant = _a.$variant;
+            return ($variant === "simple" ? "32px" : "40px");
+        }, ";\n\n    &:hover {\n      border-color: rgba(0, 0, 0, 0.2);\n    }\n  ");
+});
+var ValueContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  flex: 1;\n  padding: 4px 8px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  flex: 1;\n  padding: 4px 8px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.sizing.Size2;
+});
+var ChevronContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: ", ";\n  margin-left: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: ", ";\n  margin-left: ", ";\n"])), function (_a) {
+    var $variant = _a.$variant;
+    return ($variant === "simple" ? "4px" : "4px");
+}, function (_a) {
+    var $variant = _a.$variant;
+    return ($variant === "simple" ? "4px" : "0");
+});
+var SelectTrigger = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? "primary" : _b, theme = _a.theme, state = _a.state, value = _a.value, _c = _a.placeholder, placeholder = _c === void 0 ? "Select..." : _c, open = _a.open, onClick = _a.onClick, renderValue = _a.renderValue, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.variant, variant = _f === void 0 ? "none" : _f;
+    var handleClick = React.useCallback(function () {
+        if (disabled)
+            return;
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [disabled, onClick]);
+    var displayValue = React.useMemo(function () {
+        if (!value)
+            return null;
+        if (renderValue)
+            return renderValue(value);
+        if (Array.isArray(value)) {
+            if (value.length === 0)
+                return null;
+            var selectedLabels = value
+                .map(String)
+                .map(function (v) { var _a; return (_a = options.find(function (opt) { return opt.value === v; })) === null || _a === void 0 ? void 0 : _a.label; })
+                .filter(Boolean);
+            return selectedLabels.length > 0
+                ? selectedLabels.join(", ")
+                : "".concat(value.length, " selected");
+        }
+        var selectedOption = options.find(function (opt) { return opt.value === String(value); });
+        return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || value.toString();
+    }, [value, renderValue, options]);
+    return (_jsxs(TriggerWrapper, { "$themeType": type, "$state": state, onClick: handleClick, tabIndex: disabled ? -1 : 0, role: "button", "$disabled": disabled, "$variant": variant, style: {
+            backgroundColor: getBackgroundColor(theme, disabled, variant),
+        }, children: [_jsx(ValueContainer, { "$variant": variant, children: displayValue ? (_jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy", children: displayValue })) : (_jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy-light", children: placeholder })) }), _jsx(ChevronContainer, { "$variant": variant, children: _jsx(DropdownChevron, {}) })] }));
 };
+export default SelectTrigger;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Select/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './Select';
-export type { SelectProps } from './Select';
+export { default } from "./Select";
+export type { SelectProps } from "./Select";

package/dist/components/Select/index.js

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