@ikatec/nebula-react 1.9.0 → 1.10.0-beta.1

package/dist/index.d.mts

@@ -637,21 +637,23 @@ interface CreateStyledSelectProps extends Omit<Props, 'isDisabled'> {
     icon?: React.ReactNode;
     disabled?: boolean;
     isError?: boolean;
+    size?: 'sm' | 'md';
+    hideSelectArrow?: boolean;
 }
 declare const StyledSelect: {
-    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, size, hideSelectArrow, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledCreatable: {
-    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, size, hideSelectArrow, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledAsync: {
-    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, size, hideSelectArrow, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledAsyncCreatable: {
-    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, size, hideSelectArrow, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1113,8 +1115,10 @@ interface SidebarProps {
     defaultState?: SidebarState;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    width?: number;
+    railWidth?: number;
 }
-declare function Sidebar({ children, defaultState, open, onOpenChange, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ children, defaultState, open, onOpenChange, width, railWidth, }: SidebarProps): react_jsx_runtime.JSX.Element;
 declare function SidebarHeader({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare function SidebarContent({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare function SidebarTitle({ className, children, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;

package/dist/index.d.ts

@@ -637,21 +637,23 @@ interface CreateStyledSelectProps extends Omit<Props, 'isDisabled'> {
     icon?: React.ReactNode;
     disabled?: boolean;
     isError?: boolean;
+    size?: 'sm' | 'md';
+    hideSelectArrow?: boolean;
 }
 declare const StyledSelect: {
-    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, size, hideSelectArrow, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledCreatable: {
-    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, size, hideSelectArrow, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledAsync: {
-    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, size, hideSelectArrow, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledAsyncCreatable: {
-    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, size, hideSelectArrow, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1113,8 +1115,10 @@ interface SidebarProps {
     defaultState?: SidebarState;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    width?: number;
+    railWidth?: number;
 }
-declare function Sidebar({ children, defaultState, open, onOpenChange, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ children, defaultState, open, onOpenChange, width, railWidth, }: SidebarProps): react_jsx_runtime.JSX.Element;
 declare function SidebarHeader({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare function SidebarContent({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare function SidebarTitle({ className, children, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;

package/dist/index.js

@@ -22,9 +22,9 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var RPNInput = require('react-phone-number-input');
 var flags = require('react-phone-number-input/flags');
 var Select = require('react-select');
-var Creatable = require('react-select/creatable');
 var Async = require('react-select/async');
 var AsyncCreatable = require('react-select/async-creatable');
+var Creatable = require('react-select/creatable');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
@@ -69,9 +69,9 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var RPNInput__namespace = /*#__PURE__*/_interopNamespace(RPNInput);
 var flags__default = /*#__PURE__*/_interopDefault(flags);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
-var Creatable__default = /*#__PURE__*/_interopDefault(Creatable);
 var Async__default = /*#__PURE__*/_interopDefault(Async);
 var AsyncCreatable__default = /*#__PURE__*/_interopDefault(AsyncCreatable);
+var Creatable__default = /*#__PURE__*/_interopDefault(Creatable);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
@@ -5812,15 +5812,18 @@ var Option = (props) => {
     }
   );
 };
-var controlStyles = ({ isDisabled, isFocused }, isError) => {
+var controlStyles = ({ isDisabled, isFocused }, isError, size4) => {
   return cn(
-    "flex w-full items-center border bg-inputSelect-default-background rounded-input px-4 min-h-10 transition",
+    "flex w-full items-center border bg-inputSelect-default-background rounded-input px-4 transition",
     {
       "ring-[3px] border-inputSelect-focus-border text-inputSelect-focus-text ring-inputSelect-focus-border": isFocused,
       "border-inputSelect-danger-border text-inputSelect-danger-icon": isError,
       "border-inputSelect-default-border text-inputSelect-default-text": !isFocused && !isError,
       "bg-inputText-background-disabled": isDisabled,
-      "ring-button-danger-border-focus": isError && isFocused
+      "ring-button-danger-border-focus": isError && isFocused,
+      [buttonSizeEnum[size4 ?? "md"]]: true,
+      "!min-h-8": size4 === "sm",
+      "!min-h-10": size4 === "md"
     }
   );
 };
@@ -5832,6 +5835,7 @@ var multiValueStyles = "border rounded-full items-center gap-1.5 text-xs border-
 var multiValueLabelStyles = "";
 var indicatorsContainerStyles = "";
 var clearIndicatorStyles = "text-inputSelect-default-icon mr-2";
+var clearIndicatorStylesHidden = "text-inputSelect-default-icon mr-0";
 var dropdownIndicatorStyles = "text-inputSelect-default-icon";
 var menuStyles = `
   mt-2
@@ -5856,6 +5860,8 @@ var createStyledSelect = (BaseSelect, displayName) => {
     icon = null,
     disabled = false,
     isError = false,
+    size: size4 = "md",
+    hideSelectArrow = false,
     ...props
   }) => {
     const CloneIcon = icon && React25.cloneElement(icon, {
@@ -5864,7 +5870,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
     const { messages: messages23 } = useNebulaI18n();
     const customClassNames = React25.useMemo(() => {
       return {
-        control: (props2) => controlStyles(props2, isError),
+        control: (props2) => controlStyles(props2, isError, size4),
         placeholder: () => placeholderStyles,
         input: () => selectInputStyles,
         valueContainer: () => valueContainerStyles,
@@ -5872,16 +5878,16 @@ var createStyledSelect = (BaseSelect, displayName) => {
         multiValue: () => multiValueStyles,
         multiValueLabel: () => multiValueLabelStyles,
         indicatorsContainer: () => indicatorsContainerStyles,
-        clearIndicator: () => clearIndicatorStyles,
+        clearIndicator: () => hideSelectArrow ? clearIndicatorStylesHidden : clearIndicatorStyles,
         dropdownIndicator: () => dropdownIndicatorStyles,
         menu: () => menuStyles,
         groupHeading: () => groupHeadingStyles,
         noOptionsMessage: () => noOptionsMessageStyles
       };
-    }, [isError]);
+    }, [hideSelectArrow, isError, size4]);
     const customComponents = React25.useMemo(
       () => ({
-        DropdownIndicator,
+        DropdownIndicator: hideSelectArrow ? () => null : DropdownIndicator,
         ClearIndicator,
         MultiValueRemove,
         Option,
@@ -5899,7 +5905,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
           children
         ] }) })
       }),
-      [icon, isError, CloneIcon]
+      [hideSelectArrow, icon, isError, CloneIcon]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseSelect,
@@ -8914,7 +8920,9 @@ function Sidebar({
   children,
   defaultState = "expanded",
   open,
-  onOpenChange
+  onOpenChange,
+  width = 270,
+  railWidth = 72
 }) {
   const isMobile = useIsMobile();
   const isControlled = open !== void 0;
@@ -8941,7 +8949,7 @@ function Sidebar({
       {
         open: state !== "collapsed",
         onOpenChange: (o) => setState(o ? "expanded" : "collapsed"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContent, { className: "nebula-ds w-[var(--sidebar-width)] p-0 shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex h-full flex-col bg-sidebar-background", children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContent, { className: "nebula-ds p-0 shadow-xl", style: { width }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex h-full flex-col bg-sidebar-background", children }) })
       }
     ) });
   }
@@ -8951,10 +8959,11 @@ function Sidebar({
       "data-state": state,
       className: cn(
         "relative hidden md:flex flex-col border-r border-sidebar-border bg-sidebar-background transition-all duration-300 ease-in-out",
-        state === "expanded" && "w-[var(--sidebar-width)]",
-        state === "rail" && "w-[var(--sidebar-rail-width)]",
         state === "collapsed" && "w-0 overflow-hidden"
       ),
+      style: {
+        width: state === "expanded" ? width : state === "rail" ? railWidth : 0
+      },
       children
     }
   ) });
@@ -9175,7 +9184,8 @@ function Combobox({
         controlShouldRenderValue: false,
         hideSelectedOptions: false,
         className: "nebula-ds w-full",
-        isClearable: false
+        isClearable: false,
+        hideSelectArrow: true
       }
     ),
     selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex flex-wrap gap-2", children: [
@@ -9200,11 +9210,20 @@ function Combobox({
       {
         variant: "secondary",
         shadow: "none",
-        className: "nebula-ds w-full flex justify-center items-center",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Space, { direction: "column", className: "nebula-ds justify-center items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: "6", children: emptyStateText || messages23.combobox.noItemsSelected }),
-          /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { size: "sm", children: emptyStateDescription || messages23.combobox.selectAnOption })
-        ] })
+        className: "nebula-ds w-full flex justify-center items-center rounded-lg dark:bg-neutral-900",
+        paddingSize: "none",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Space,
+          {
+            direction: "column",
+            className: "nebula-ds justify-center items-center p-3 w-full",
+            size: "xs",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: "6", className: "nebula-ds text-center", children: emptyStateText || messages23.combobox.noItemsSelected }),
+              /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { size: "sm", className: "nebula-ds text-center", children: emptyStateDescription || messages23.combobox.selectAnOption })
+            ]
+          }
+        )
       }
     )
   ] });

package/dist/index.mjs

@@ -21,9 +21,9 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RPNInput from 'react-phone-number-input';
 import flags from 'react-phone-number-input/flags';
 import Select, { components } from 'react-select';
-import Creatable from 'react-select/creatable';
 import Async from 'react-select/async';
 import AsyncCreatable from 'react-select/async-creatable';
+import Creatable from 'react-select/creatable';
 import { defaultDropAnimationSideEffects, MeasuringStrategy, useDndContext, useDroppable, useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, pointerWithin, closestCenter, rectIntersection, DndContext, DragOverlay } from '@dnd-kit/core';
 import { useSortable, defaultAnimateLayoutChanges, sortableKeyboardCoordinates, arrayMove, SortableContext, horizontalListSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -5769,15 +5769,18 @@ var Option = (props) => {
     }
   );
 };
-var controlStyles = ({ isDisabled, isFocused }, isError) => {
+var controlStyles = ({ isDisabled, isFocused }, isError, size4) => {
   return cn(
-    "flex w-full items-center border bg-inputSelect-default-background rounded-input px-4 min-h-10 transition",
+    "flex w-full items-center border bg-inputSelect-default-background rounded-input px-4 transition",
     {
       "ring-[3px] border-inputSelect-focus-border text-inputSelect-focus-text ring-inputSelect-focus-border": isFocused,
       "border-inputSelect-danger-border text-inputSelect-danger-icon": isError,
       "border-inputSelect-default-border text-inputSelect-default-text": !isFocused && !isError,
       "bg-inputText-background-disabled": isDisabled,
-      "ring-button-danger-border-focus": isError && isFocused
+      "ring-button-danger-border-focus": isError && isFocused,
+      [buttonSizeEnum[size4 ?? "md"]]: true,
+      "!min-h-8": size4 === "sm",
+      "!min-h-10": size4 === "md"
     }
   );
 };
@@ -5789,6 +5792,7 @@ var multiValueStyles = "border rounded-full items-center gap-1.5 text-xs border-
 var multiValueLabelStyles = "";
 var indicatorsContainerStyles = "";
 var clearIndicatorStyles = "text-inputSelect-default-icon mr-2";
+var clearIndicatorStylesHidden = "text-inputSelect-default-icon mr-0";
 var dropdownIndicatorStyles = "text-inputSelect-default-icon";
 var menuStyles = `
   mt-2
@@ -5813,6 +5817,8 @@ var createStyledSelect = (BaseSelect, displayName) => {
     icon = null,
     disabled = false,
     isError = false,
+    size: size4 = "md",
+    hideSelectArrow = false,
     ...props
   }) => {
     const CloneIcon = icon && cloneElement(icon, {
@@ -5821,7 +5827,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
     const { messages: messages23 } = useNebulaI18n();
     const customClassNames = useMemo(() => {
       return {
-        control: (props2) => controlStyles(props2, isError),
+        control: (props2) => controlStyles(props2, isError, size4),
         placeholder: () => placeholderStyles,
         input: () => selectInputStyles,
         valueContainer: () => valueContainerStyles,
@@ -5829,16 +5835,16 @@ var createStyledSelect = (BaseSelect, displayName) => {
         multiValue: () => multiValueStyles,
         multiValueLabel: () => multiValueLabelStyles,
         indicatorsContainer: () => indicatorsContainerStyles,
-        clearIndicator: () => clearIndicatorStyles,
+        clearIndicator: () => hideSelectArrow ? clearIndicatorStylesHidden : clearIndicatorStyles,
         dropdownIndicator: () => dropdownIndicatorStyles,
         menu: () => menuStyles,
         groupHeading: () => groupHeadingStyles,
         noOptionsMessage: () => noOptionsMessageStyles
       };
-    }, [isError]);
+    }, [hideSelectArrow, isError, size4]);
     const customComponents = useMemo(
       () => ({
-        DropdownIndicator,
+        DropdownIndicator: hideSelectArrow ? () => null : DropdownIndicator,
         ClearIndicator,
         MultiValueRemove,
         Option,
@@ -5856,7 +5862,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
           children
         ] }) })
       }),
-      [icon, isError, CloneIcon]
+      [hideSelectArrow, icon, isError, CloneIcon]
     );
     return /* @__PURE__ */ jsx(
       BaseSelect,
@@ -8871,7 +8877,9 @@ function Sidebar({
   children,
   defaultState = "expanded",
   open,
-  onOpenChange
+  onOpenChange,
+  width = 270,
+  railWidth = 72
 }) {
   const isMobile = useIsMobile();
   const isControlled = open !== void 0;
@@ -8898,7 +8906,7 @@ function Sidebar({
       {
         open: state !== "collapsed",
         onOpenChange: (o) => setState(o ? "expanded" : "collapsed"),
-        children: /* @__PURE__ */ jsx(DrawerContent, { className: "nebula-ds w-[var(--sidebar-width)] p-0 shadow-xl", children: /* @__PURE__ */ jsx("div", { className: "nebula-ds flex h-full flex-col bg-sidebar-background", children }) })
+        children: /* @__PURE__ */ jsx(DrawerContent, { className: "nebula-ds p-0 shadow-xl", style: { width }, children: /* @__PURE__ */ jsx("div", { className: "nebula-ds flex h-full flex-col bg-sidebar-background", children }) })
       }
     ) });
   }
@@ -8908,10 +8916,11 @@ function Sidebar({
       "data-state": state,
       className: cn(
         "relative hidden md:flex flex-col border-r border-sidebar-border bg-sidebar-background transition-all duration-300 ease-in-out",
-        state === "expanded" && "w-[var(--sidebar-width)]",
-        state === "rail" && "w-[var(--sidebar-rail-width)]",
         state === "collapsed" && "w-0 overflow-hidden"
       ),
+      style: {
+        width: state === "expanded" ? width : state === "rail" ? railWidth : 0
+      },
       children
     }
   ) });
@@ -9132,7 +9141,8 @@ function Combobox({
         controlShouldRenderValue: false,
         hideSelectedOptions: false,
         className: "nebula-ds w-full",
-        isClearable: false
+        isClearable: false,
+        hideSelectArrow: true
       }
     ),
     selectedValues.length > 0 && /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex flex-wrap gap-2", children: [
@@ -9157,11 +9167,20 @@ function Combobox({
       {
         variant: "secondary",
         shadow: "none",
-        className: "nebula-ds w-full flex justify-center items-center",
-        children: /* @__PURE__ */ jsxs(Space, { direction: "column", className: "nebula-ds justify-center items-center", children: [
-          /* @__PURE__ */ jsx(Heading, { level: "6", children: emptyStateText || messages23.combobox.noItemsSelected }),
-          /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: emptyStateDescription || messages23.combobox.selectAnOption })
-        ] })
+        className: "nebula-ds w-full flex justify-center items-center rounded-lg dark:bg-neutral-900",
+        paddingSize: "none",
+        children: /* @__PURE__ */ jsxs(
+          Space,
+          {
+            direction: "column",
+            className: "nebula-ds justify-center items-center p-3 w-full",
+            size: "xs",
+            children: [
+              /* @__PURE__ */ jsx(Heading, { level: "6", className: "nebula-ds text-center", children: emptyStateText || messages23.combobox.noItemsSelected }),
+              /* @__PURE__ */ jsx(Paragraph, { size: "sm", className: "nebula-ds text-center", children: emptyStateDescription || messages23.combobox.selectAnOption })
+            ]
+          }
+        )
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.9.0",
+  "version": "1.10.0-beta.1",
   "description": "React components for Nebula Design System",
   "publishConfig": {
     "access": "public"