@rungalileo/jupiter-ds 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as _mantine_core from '@mantine/core';
3
- import { MantineTheme, MantineProviderProps, ButtonProps as ButtonProps$1, ElementProps, CheckboxProps as CheckboxProps$1, BadgeProps as BadgeProps$1, TextInputProps, RadioProps as RadioProps$1, SwitchProps as SwitchProps$1, TabsProps as TabsProps$1, TooltipProps as TooltipProps$1, MenuProps, TableProps as TableProps$1, HoverCardProps } from '@mantine/core';
3
+ import { MantineTheme, MantineProviderProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, BadgeProps as BadgeProps$1, TextInputProps, RadioProps as RadioProps$1, SwitchProps as SwitchProps$1, TabsProps as TabsProps$1, TextareaProps as TextareaProps$1, TooltipProps as TooltipProps$1, MenuProps, TableProps as TableProps$1, HoverCardProps } from '@mantine/core';
4
4
  export { TooltipProps as MantineTooltipProps } from '@mantine/core';
5
5
  import * as react from 'react';
6
6
  import react__default, { ReactNode, CSSProperties, JSX } from 'react';
@@ -161,7 +161,7 @@ declare const typography: {
161
161
  readonly base: "24px";
162
162
  readonly xs: "16px";
163
163
  readonly sm: "20px";
164
- readonly lg: "28px";
164
+ readonly lg: "24px";
165
165
  readonly xl: "28px";
166
166
  readonly '2xl': "32px";
167
167
  readonly '3xl': "36px";
@@ -227,7 +227,7 @@ declare const jupiterTheme: {
227
227
  headings?: {
228
228
  fontFamily?: string | undefined;
229
229
  fontWeight?: string | undefined;
230
- textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
230
+ textWrap?: "balance" | "nowrap" | "wrap" | "stable" | "pretty" | undefined;
231
231
  sizes?: {
232
232
  h1?: {
233
233
  fontSize?: string | undefined;
@@ -406,7 +406,7 @@ declare const jupiterCSSVariablesResolver: (theme: MantineTheme) => {
406
406
  '--jds-line-height-base': "24px";
407
407
  '--jds-line-height-xs': "16px";
408
408
  '--jds-line-height-sm': "20px";
409
- '--jds-line-height-lg': "28px";
409
+ '--jds-line-height-lg': "24px";
410
410
  '--jds-line-height-xl': "28px";
411
411
  '--jds-line-height-2xl': "32px";
412
412
  '--jds-line-height-3xl': "36px";
@@ -508,6 +508,8 @@ declare const jupiterCSSVariablesResolver: (theme: MantineTheme) => {
508
508
  '--jds-color-neutral-9': "#171717";
509
509
  '--jds-color-menu-hover-bg': string;
510
510
  '--jds-color-menu-hover-accent': string;
511
+ '--jds-color-hover-card-bg': "#DAEAFD";
512
+ '--jds-color-hover-card-border': "#0085FF";
511
513
  };
512
514
  dark: {
513
515
  '--jds-color-primary': "#f3e8ff";
@@ -583,6 +585,8 @@ declare const jupiterCSSVariablesResolver: (theme: MantineTheme) => {
583
585
  '--jds-color-neutral-9': "#f5f5f5";
584
586
  '--jds-color-menu-hover-bg': string;
585
587
  '--jds-color-menu-hover-accent': string;
588
+ '--jds-color-hover-card-bg': string;
589
+ '--jds-color-hover-card-border': "#DAEAFD";
586
590
  };
587
591
  };
588
592
  declare const JupiterThemeProvider: ({ children, ...props }: {
@@ -629,7 +633,7 @@ interface BadgeProps {
629
633
  */
630
634
  declare const Badge: react.NamedExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
631
635
 
632
- interface ButtonProps extends Omit<ButtonProps$1, 'color' | 'variant' | 'size'>, ElementProps<'button'> {
636
+ interface ButtonProps extends Omit<ButtonProps$1, 'color' | 'variant' | 'size'> {
633
637
  /**
634
638
  * Button variant
635
639
  * @default 'filled'
@@ -665,10 +669,20 @@ interface ButtonProps extends Omit<ButtonProps$1, 'color' | 'variant' | 'size'>,
665
669
  'data-testid': string;
666
670
  }
667
671
  /**
668
- * Button component based on Jupiter Design System
669
- * Supports multiple variants, sizes, and states
672
+ * Button component with polymorphic support
673
+ * Can be rendered as any element using the `component` prop
674
+ * @example
675
+ * <Button component={Link} href="/path">Link Button</Button>
670
676
  */
671
- declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
677
+ declare const Button: (<C = "button">(props: _mantine_core.PolymorphicComponentProps<C, ButtonProps>) => React.ReactElement) & Omit<react.FunctionComponent<(ButtonProps & {
678
+ component?: any;
679
+ } & Omit<Omit<any, "ref">, keyof ButtonProps | "component"> & {
680
+ ref?: any;
681
+ renderRoot?: (props: any) => any;
682
+ }) | (ButtonProps & {
683
+ component: React.ElementType;
684
+ renderRoot?: (props: Record<string, any>) => any;
685
+ })>, never> & Record<string, never>;
672
686
 
673
687
  interface CardProps {
674
688
  /** Will be hidden if no title is provided */
@@ -917,11 +931,12 @@ interface SwitchProps extends Omit<SwitchProps$1, 'description'> {
917
931
  */
918
932
  declare const Switch: react.NamedExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
919
933
 
934
+ type TabsVariant = 'pills' | 'line';
920
935
  interface TabItem {
921
936
  /** Unique identifier for the tab */
922
937
  value: string;
923
- /** Tab label text */
924
- label: string;
938
+ /** Tab label text or element */
939
+ label: ReactNode;
925
940
  /** Tab content. If not provided, you will need to control the content outside the Tabs component.*/
926
941
  children?: ReactNode;
927
942
  /** Tab icon (optional) */
@@ -933,7 +948,9 @@ interface TabItem {
933
948
  /** Test identifier for testing purposes */
934
949
  'data-testid'?: string;
935
950
  }
936
- interface TabsProps extends Omit<TabsProps$1, 'children'> {
951
+ interface TabsProps extends Omit<TabsProps$1, 'children' | 'variant'> {
952
+ /** Variant (supports Mantine and Jupiter DS variants) */
953
+ variant?: TabsProps$1['variant'] | TabsVariant;
937
954
  /** Array of tab items */
938
955
  items: TabItem[];
939
956
  /** Currently active tab value */
@@ -953,6 +970,22 @@ interface TabsProps extends Omit<TabsProps$1, 'children'> {
953
970
  */
954
971
  declare const Tabs: react.NamedExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
955
972
 
973
+ interface TextareaProps extends TextareaProps$1 {
974
+ /** Main label text for the textarea field */
975
+ label?: string;
976
+ /** Optional description text below the textarea */
977
+ description?: string;
978
+ /** Position of the label relative to the textarea */
979
+ labelPosition?: 'above' | 'left';
980
+ /** Test identifier for testing purposes */
981
+ 'data-testid'?: string;
982
+ }
983
+ /**
984
+ * Textarea component that provides a consistent multi-line text input with optional
985
+ * label and description text following design system specifications.
986
+ */
987
+ declare const Textarea: react.NamedExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
988
+
956
989
  interface TooltipProps extends TooltipProps$1 {
957
990
  /**
958
991
  * Test ID for testing and automation purposes
@@ -1052,6 +1085,63 @@ declare const calendarClassNames: {
1052
1085
  readonly day: string;
1053
1086
  };
1054
1087
 
1088
+ type TimeRangeType = 'last5Mins' | 'last15Mins' | 'last30Mins' | 'lastHour' | 'last3Hours' | 'last6Hours' | 'last12Hours' | 'last24Hours' | 'last2Days' | 'lastWeek' | 'lastMonth' | 'last6Months' | 'lastYear' | 'custom';
1089
+ interface TimeRangeOption {
1090
+ /** Display label for the option */
1091
+ label: string;
1092
+ /** Value identifier */
1093
+ value: TimeRangeType;
1094
+ }
1095
+ interface TimeRangeValue {
1096
+ /** Selected time range type */
1097
+ type: TimeRangeType;
1098
+ /** Custom start date (ISO string) */
1099
+ customStart?: string;
1100
+ /** Custom end date (ISO string) */
1101
+ customEnd?: string;
1102
+ /** Custom start time (HH:mm:ss format) */
1103
+ customFromTime?: string;
1104
+ /** Custom end time (HH:mm:ss format) */
1105
+ customToTime?: string;
1106
+ }
1107
+ interface TimeRangeSwitchProps {
1108
+ /** Current value */
1109
+ value: TimeRangeValue;
1110
+ /** Callback when value changes */
1111
+ onChange: (value: TimeRangeValue) => void;
1112
+ /** Quick segment options (shown as buttons) */
1113
+ segmentOptions?: TimeRangeOption[];
1114
+ /** All time range options for dropdown menu */
1115
+ menuOptions?: TimeRangeOption[];
1116
+ /** Whether the dropdown menu is open */
1117
+ isMenuOpen?: boolean;
1118
+ /** Callback when menu open state changes */
1119
+ onMenuOpenChange?: (isOpen: boolean) => void;
1120
+ /** Maximum selectable date (defaults to today) */
1121
+ maxDate?: Date;
1122
+ /** Minimum time range in milliseconds */
1123
+ minRangeMs?: number;
1124
+ /** Timezone display string */
1125
+ timezone?: string;
1126
+ /** Additional CSS class name */
1127
+ className?: string;
1128
+ /** Additional inline styles (for CSS variables only) */
1129
+ style?: React.CSSProperties;
1130
+ /** Data test id for testing */
1131
+ 'data-testid'?: string;
1132
+ }
1133
+ /**
1134
+ * TimeRangeSwitch component for selecting time ranges.
1135
+ *
1136
+ * Features:
1137
+ * - Quick segment options (12H, 1D, 1W, etc.)
1138
+ * - Dropdown with all relative time options
1139
+ * - Custom absolute date/time range picker
1140
+ * - Timezone display
1141
+ * - Validation for minimum range
1142
+ */
1143
+ declare const TimeRangeSwitch: react.NamedExoticComponent<TimeRangeSwitchProps & react.RefAttributes<HTMLDivElement>>;
1144
+
1055
1145
  type DropdownMenuItemType = 'checkbox' | 'radio' | 'text' | 'title' | 'link' | 'divider' | 'menu';
1056
1146
  interface DropdownMenuItem {
1057
1147
  /** Unique identifier for the item, used for click handling */
@@ -1091,7 +1181,7 @@ interface DropdownMenuProps extends Omit<MenuProps, 'children'> {
1091
1181
  /** Trigger element for the dropdown */
1092
1182
  children?: ReactNode;
1093
1183
  /** Label for the default dropdown button */
1094
- label?: string;
1184
+ label?: string | ReactNode;
1095
1185
  /** Handler for checkbox changes. This handler should be memoized. */
1096
1186
  onCheckboxChange?: (itemValue: string, checked: boolean) => void;
1097
1187
  /** Handler for radio group changes. This handler should be memoized. */
@@ -1161,6 +1251,8 @@ interface TableProps<T> extends Omit<TableProps$1, 'children' | 'data'> {
1161
1251
  sorting?: SortingState;
1162
1252
  /** Handler for sorting change (controlled) */
1163
1253
  onSortingChange?: OnChangeFn<SortingState>;
1254
+ /** Maximum height of the table (enables vertical scrolling with sticky header) */
1255
+ maxHeight?: number | string;
1164
1256
  }
1165
1257
  /**
1166
1258
  * Flexible table component built with TanStack Table and Mantine.
@@ -1213,5 +1305,5 @@ declare const DetailedPopover: react.NamedExoticComponent<DetailedPopoverProps>;
1213
1305
 
1214
1306
  declare const TemporaryFakeOrganism: () => null;
1215
1307
 
1216
- export { Badge, Button, Calendar, Card, Checkbox, CodeBlock, DataPill, DateInput, DateTimePicker, DetailedPopover, DropdownMenu, FileInput, Input, InteractiveChip, JupiterThemeProvider, Link, Radio, Switch, Table, Tabs, TemporaryFakeOrganism, Tooltip, buttonVariants, calendarClassNames, colors, componentVariantVariables, createButtonVars, jupiterCSSVariablesResolver, jupiterTheme, radius, shadows, spacing, typography, zIndex };
1217
- export type { BadgeProps, ButtonProps, ButtonVariant, CalendarProps, CardProps, CheckboxProps, CodeBlockProps, DataPillProps, DateInputProps, DateTimePickerProps, DetailedPopoverProps, DropdownMenuItem, DropdownMenuItemType, DropdownMenuProps, FileInputProps, InputProps, InteractiveChipProps, InteractiveChipRightSection, JupiterLinkProps as LinkProps, RadioProps, RadiusToken, ShadowToken, SpacingToken, SwitchProps, TabItem, TableProps, TabsProps, TooltipProps, TypographyToken, ZIndexToken };
1308
+ export { Badge, Button, Calendar, Card, Checkbox, CodeBlock, DataPill, DateInput, DateTimePicker, DetailedPopover, DropdownMenu, FileInput, Input, InteractiveChip, JupiterThemeProvider, Link, Radio, Switch, Table, Tabs, TemporaryFakeOrganism, Textarea, TimeRangeSwitch, Tooltip, buttonVariants, calendarClassNames, colors, componentVariantVariables, createButtonVars, jupiterCSSVariablesResolver, jupiterTheme, radius, shadows, spacing, typography, zIndex };
1309
+ export type { BadgeProps, ButtonProps, ButtonVariant, CalendarProps, CardProps, CheckboxProps, CodeBlockProps, DataPillProps, DateInputProps, DateTimePickerProps, DetailedPopoverProps, DropdownMenuItem, DropdownMenuItemType, DropdownMenuProps, FileInputProps, InputProps, InteractiveChipProps, InteractiveChipRightSection, JupiterLinkProps as LinkProps, RadioProps, RadiusToken, ShadowToken, SpacingToken, SwitchProps, TabItem, TableProps, TabsProps, TabsVariant, TextareaProps, TimeRangeOption, TimeRangeSwitchProps, TimeRangeType, TimeRangeValue, TooltipProps, TypographyToken, ZIndexToken };
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}