@gobolt/genesis 0.4.20 → 0.4.22

package/dist/components/Badge/Badge.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 export type State = "success" | "warning" | "error" | "info" | "generic" | "hollow";
 export interface BadgeProps {
     label?: string;

package/dist/components/Badge/styles.d.ts

@@ -3,6 +3,7 @@ import { State } from './Badge';
 interface StyledBadgeProperties {
     theme?: GenesisTheme;
     state?: State;
+    $state?: State;
     label?: string;
     disabled?: boolean;
     $backgroundColor?: string;

package/dist/components/Table/InfiniteScrollTable/InfiniteScrollTable.d.ts

@@ -1,3 +1,3 @@
 import { InfiniteScrollTableProps } from './types';
-declare const InfiniteScrollTable: <T>({ columns: initialColumns, fetchService, scrollHeight, scrollWidth, onChange, rowSelection, onRowClick, onRowSelectionChange, onDataChange, }: InfiniteScrollTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const InfiniteScrollTable: <T>({ columns: initialColumns, fetchService, scrollHeight, scrollWidth, onChange, rowSelection, onRowClick, onRowSelectionChange, onDataChange, filterFn, }: InfiniteScrollTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default InfiniteScrollTable;

package/dist/components/Table/InfiniteScrollTable/useInfiniteQuery.d.ts

@@ -6,6 +6,7 @@ interface UseInfiniteQueryOptions<T> {
     }) => Promise<ApiResponse<T>>;
     initialPageParam: number;
     getNextPageParam: (lastPage: ApiResponse<T>) => number | undefined;
+    filterFn?: (data: ApiResponse<T>) => ApiResponse<T>;
 }
 interface UseInfiniteQueryResult<T> {
     data: {
@@ -17,5 +18,5 @@ interface UseInfiniteQueryResult<T> {
     isFetchingNextPage: boolean;
     status: "pending" | "error" | "success";
 }
-export declare const useInfiniteQuery: <T>({ queryKey, queryFn, initialPageParam, getNextPageParam, }: UseInfiniteQueryOptions<T>) => UseInfiniteQueryResult<T>;
+export declare const useInfiniteQuery: <T>({ queryKey, queryFn, initialPageParam, getNextPageParam, filterFn, }: UseInfiniteQueryOptions<T>) => UseInfiniteQueryResult<T>;
 export {};

package/dist/components/Table/Table.d.ts

@@ -26,6 +26,7 @@ export interface InfiniteScrollConfig<T = any> {
     title: string;
     scrollHeight?: number;
     scrollWidth?: number;
+    filterFn?: (data: T[]) => T[];
 }
 export interface TableProps<T extends Record<string, any>> {
     dataSource: T[];

package/dist/index.cjs

@@ -60537,6 +60537,7 @@ const Badge$2 = styled.div`
   ${({
   theme,
   state,
+  $state,
   label,
   disabled: disabled2,
   $backgroundColor,
@@ -60544,7 +60545,7 @@ const Badge$2 = styled.div`
 }) => {
   return getGenesisClass$c(
     theme,
-    state || "info",
+    $state || state || "info",
     label,
     disabled2,
     $backgroundColor,
@@ -60863,7 +60864,7 @@ const Badge$1 = ({
       {
         label,
         role: "badge",
-        state,
+        $state: state,
         disabled: isDisabled,
         style: {
           padding: "4px 4px"
@@ -60896,7 +60897,7 @@ const Badge$1 = ({
       label,
       role,
       onClick,
-      state,
+      $state: state,
       disabled: isDisabled,
       style: { cursor: role === "button" ? "pointer" : "default" },
       $backgroundColor: backgroundColor || void 0,
@@ -74077,13 +74078,186 @@ const Message$1 = ({ message: message2, handle, isThinking = false }) => {
     /* @__PURE__ */ jsxRuntime.jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: message2 }) : /* @__PURE__ */ jsxRuntime.jsx(MessageText, { children: message2 }) })
   ] });
 };
+const getStateColors = (colors2, type4, state) => {
+  const filled = {
+    color: colors2.inputs.onsurface.active,
+    borderColor: colors2[TYPE.secondary].active.borderColor,
+    ringColor: colors2[type4]?.focussed?.ringColor
+  };
+  const success = {
+    color: colors2.status.success.default,
+    borderColor: colors2.status.success.default,
+    ringColor: colors2.status.success.ringColor
+  };
+  const error2 = {
+    color: colors2.status.error.default,
+    borderColor: colors2.status.error.default,
+    ringColor: colors2.status.error.ringColor
+  };
+  const themeState = state !== STATE.error && state !== STATE.success && state !== STATE.filled ? {
+    color: colors2.inputs.onsurface.active,
+    backgroundColor: colors2.inputs.surface.active,
+    borderColor: colors2.inputs.surface.border,
+    ringColor: type4 && state ? colors2[type4]?.[state]?.ringColor : void 0
+  } : null;
+  const stateMap = {
+    filled,
+    error: error2,
+    success,
+    themeState
+  };
+  const getValidKey = (state2) => {
+    const validStates = [STATE.filled, STATE.error, STATE.success];
+    return validStates.includes(state2) ? state2 : "themeState";
+  };
+  const css = stateMap[getValidKey(state)];
+  return css;
+};
+const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size) => {
+  const stateColors = getStateColors(colors2, type4, state);
+  const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
+    if (hasAfterAddon2 && !hasBeforeAddon2) {
+      return `${borderRadius2.BorderRadiusMd}px 0px 0px ${borderRadius2.BorderRadiusMd}px`;
+    }
+    if (hasBeforeAddon2 && !hasAfterAddon2) {
+      return `0px ${borderRadius2.BorderRadiusMd}px ${borderRadius2.BorderRadiusMd}px 0px`;
+    }
+    return `0px`;
+  };
+  return `
+    &.ant-input {
+        font-family: 'Inter', sans-serif;
+        color: ${stateColors.color};
+        border-color: ${stateColors.borderColor};
+        box-shadow: ${shadows2.inputs[1]} !important;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"} !important;
+    }
+
+    /* Increase specificity for focus states */
+    &.ant-input.ant-input:focus,
+    &.ant-input.ant-input:focus-visible,
+    &.ant-input.ant-input-focused {
+      outline: none !important;
+      border-color: ${colors2[type4].focussed.borderColor} !important;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor} !important;
+    }
+
+    &.ant-input-outlined {
+      border: 1px solid ${stateColors.borderColor};
+
+      &:hover {
+        border-color: ${stateColors.borderColor};
+      }
+    }
+
+    .ant-input-group & {
+      &:focus-within {
+        outline: none;
+        color: ${stateColors.color};
+        box-shadow: none;
+        border-color: ${colors2[type4].focussed.borderColor};
+      }
+    }
+
+    .ant-input-group:focus-within {
+      outline: none;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      transition: box-shadow 0.2s ease-in-out;
+
+      /* Hide focus styles on inner input when parent is focused */
+      .ant-input:focus-within {
+        box-shadow: none;
+        border-radius: 0;
+        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
+        border-color: #ddd;
+      }
+    }
+
+    /* Remove inner input focus styles when in a group */
+    .ant-input-group .ant-input:focus,
+    .ant-input-group .ant-input:focus-visible,
+    .ant-input-group .ant-input:focus-within {
+      outline: none;
+      box-shadow: none;
+      border-color: ${colors2[type4].focussed.borderColor};
+    }
+
+    /* Single focus ring on group */
+    .ant-input-group:focus-within {
+      outline: none;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    /* Remove focus styles for standalone inputs */
+    &:not(.ant-input-group):focus-visible {
+      outline: none;
+      color: ${stateColors.color};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      border-color: ${colors2[type4].focussed.borderColor};
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    &:not(.ant-input-group .ant-input):focus-visible {
+      outline: none;
+      color: ${stateColors.color};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      border-color: ${colors2[type4].focussed.borderColor};
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    &.ant-input-group-wrapper {
+      .ant-input-group {
+        display: flex;
+        align-items: center;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"};
+
+        .ant-input {
+          height: 100% !important;
+        }
+
+        .ant-input-group-addon {
+          padding: 0 ${components2.input.suffixPrefixHorPadding};
+          height: 100%;
+          display: flex;
+          align-items: center;
+          min-width: fit-content;
+          width: auto;
+          
+          > * {
+            width: 100%;
+          }
+          
+          .ant-select {
+            height: 100%;
+            
+            .ant-select-selector {
+              height: 100%;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+      }
+    }
+  `;
+};
 const Input$1 = styled(Input$2)`
   ${({ theme, state, type: type4 = TYPE.primary, size = "normal", ...rest }) => {
-  !!rest.addonBefore;
-  !!rest.addonAfter;
-  return `
-      // Add your custom input styles here
-    `;
+  const hasBeforeAddon = !!rest.addonBefore;
+  const hasAfterAddon = !!rest.addonAfter;
+  return getGenesisInputClass(
+    theme,
+    type4,
+    state,
+    hasBeforeAddon,
+    hasAfterAddon,
+    size
+  );
 }}
 `;
 const DropdownChevron = (properties) => {
@@ -84343,7 +84517,8 @@ const useInfiniteQuery = ({
   queryKey: queryKey2,
   queryFn,
   initialPageParam,
-  getNextPageParam
+  getNextPageParam,
+  filterFn
 }) => {
   const [pages, setPages] = React.useState([]);
   const [error2, setError] = React.useState(null);
@@ -84373,7 +84548,8 @@ const useInfiniteQuery = ({
       }
       abortControllerRef.current = new AbortController();
       try {
-        const result = await queryFn({ pageParam });
+        const rawResult = await queryFn({ pageParam });
+        const result = filterFn ? filterFn(rawResult) : rawResult;
         if (abortControllerRef.current?.signal.aborted) {
           return;
         }
@@ -84489,7 +84665,8 @@ const InfiniteScrollTable = ({
   rowSelection,
   onRowClick,
   onRowSelectionChange,
-  onDataChange
+  onDataChange,
+  filterFn
 }) => {
   const observer = React.useRef();
   const [scrollableNode, setScrollableNode] = React.useState(
@@ -84566,7 +84743,8 @@ const InfiniteScrollTable = ({
     },
     [isFetchingNextPage, hasNextPage, fetchNextPage, scrollableNode]
   );
-  const dataSource = data?.pages.flatMap((page) => page.docs) ?? [];
+  const rawDataSource = data?.pages.flatMap((page) => page.docs) ?? [];
+  const dataSource = filterFn ? filterFn(rawDataSource) : rawDataSource;
   const totalDocs = data?.pages?.[0]?.totalDocs ?? 0;
   React.useEffect(() => {
     if (onRowSelectionChange) {
@@ -84798,8 +84976,10 @@ function Table({
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
         scrollWidth: infiniteScrollConfig.scrollWidth,
+        onChange,
         onRowSelectionChange,
-        onDataChange
+        onDataChange,
+        filterFn: infiniteScrollConfig.filterFn
       }
     );
   }

package/dist/index.js

@@ -60519,6 +60519,7 @@ const Badge$2 = styled.div`
   ${({
   theme,
   state,
+  $state,
   label,
   disabled: disabled2,
   $backgroundColor,
@@ -60526,7 +60527,7 @@ const Badge$2 = styled.div`
 }) => {
   return getGenesisClass$c(
     theme,
-    state || "info",
+    $state || state || "info",
     label,
     disabled2,
     $backgroundColor,
@@ -60845,7 +60846,7 @@ const Badge$1 = ({
       {
         label,
         role: "badge",
-        state,
+        $state: state,
         disabled: isDisabled,
         style: {
           padding: "4px 4px"
@@ -60878,7 +60879,7 @@ const Badge$1 = ({
       label,
       role,
       onClick,
-      state,
+      $state: state,
       disabled: isDisabled,
       style: { cursor: role === "button" ? "pointer" : "default" },
       $backgroundColor: backgroundColor || void 0,
@@ -74059,13 +74060,186 @@ const Message$1 = ({ message: message2, handle, isThinking = false }) => {
     /* @__PURE__ */ jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsx(Markdown, { children: message2 }) : /* @__PURE__ */ jsx(MessageText, { children: message2 }) })
   ] });
 };
+const getStateColors = (colors2, type4, state) => {
+  const filled = {
+    color: colors2.inputs.onsurface.active,
+    borderColor: colors2[TYPE.secondary].active.borderColor,
+    ringColor: colors2[type4]?.focussed?.ringColor
+  };
+  const success = {
+    color: colors2.status.success.default,
+    borderColor: colors2.status.success.default,
+    ringColor: colors2.status.success.ringColor
+  };
+  const error2 = {
+    color: colors2.status.error.default,
+    borderColor: colors2.status.error.default,
+    ringColor: colors2.status.error.ringColor
+  };
+  const themeState = state !== STATE.error && state !== STATE.success && state !== STATE.filled ? {
+    color: colors2.inputs.onsurface.active,
+    backgroundColor: colors2.inputs.surface.active,
+    borderColor: colors2.inputs.surface.border,
+    ringColor: type4 && state ? colors2[type4]?.[state]?.ringColor : void 0
+  } : null;
+  const stateMap = {
+    filled,
+    error: error2,
+    success,
+    themeState
+  };
+  const getValidKey = (state2) => {
+    const validStates = [STATE.filled, STATE.error, STATE.success];
+    return validStates.includes(state2) ? state2 : "themeState";
+  };
+  const css = stateMap[getValidKey(state)];
+  return css;
+};
+const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size) => {
+  const stateColors = getStateColors(colors2, type4, state);
+  const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
+    if (hasAfterAddon2 && !hasBeforeAddon2) {
+      return `${borderRadius2.BorderRadiusMd}px 0px 0px ${borderRadius2.BorderRadiusMd}px`;
+    }
+    if (hasBeforeAddon2 && !hasAfterAddon2) {
+      return `0px ${borderRadius2.BorderRadiusMd}px ${borderRadius2.BorderRadiusMd}px 0px`;
+    }
+    return `0px`;
+  };
+  return `
+    &.ant-input {
+        font-family: 'Inter', sans-serif;
+        color: ${stateColors.color};
+        border-color: ${stateColors.borderColor};
+        box-shadow: ${shadows2.inputs[1]} !important;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"} !important;
+    }
+
+    /* Increase specificity for focus states */
+    &.ant-input.ant-input:focus,
+    &.ant-input.ant-input:focus-visible,
+    &.ant-input.ant-input-focused {
+      outline: none !important;
+      border-color: ${colors2[type4].focussed.borderColor} !important;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor} !important;
+    }
+
+    &.ant-input-outlined {
+      border: 1px solid ${stateColors.borderColor};
+
+      &:hover {
+        border-color: ${stateColors.borderColor};
+      }
+    }
+
+    .ant-input-group & {
+      &:focus-within {
+        outline: none;
+        color: ${stateColors.color};
+        box-shadow: none;
+        border-color: ${colors2[type4].focussed.borderColor};
+      }
+    }
+
+    .ant-input-group:focus-within {
+      outline: none;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      transition: box-shadow 0.2s ease-in-out;
+
+      /* Hide focus styles on inner input when parent is focused */
+      .ant-input:focus-within {
+        box-shadow: none;
+        border-radius: 0;
+        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
+        border-color: #ddd;
+      }
+    }
+
+    /* Remove inner input focus styles when in a group */
+    .ant-input-group .ant-input:focus,
+    .ant-input-group .ant-input:focus-visible,
+    .ant-input-group .ant-input:focus-within {
+      outline: none;
+      box-shadow: none;
+      border-color: ${colors2[type4].focussed.borderColor};
+    }
+
+    /* Single focus ring on group */
+    .ant-input-group:focus-within {
+      outline: none;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    /* Remove focus styles for standalone inputs */
+    &:not(.ant-input-group):focus-visible {
+      outline: none;
+      color: ${stateColors.color};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      border-color: ${colors2[type4].focussed.borderColor};
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    &:not(.ant-input-group .ant-input):focus-visible {
+      outline: none;
+      color: ${stateColors.color};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      border-color: ${colors2[type4].focussed.borderColor};
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    &.ant-input-group-wrapper {
+      .ant-input-group {
+        display: flex;
+        align-items: center;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"};
+
+        .ant-input {
+          height: 100% !important;
+        }
+
+        .ant-input-group-addon {
+          padding: 0 ${components2.input.suffixPrefixHorPadding};
+          height: 100%;
+          display: flex;
+          align-items: center;
+          min-width: fit-content;
+          width: auto;
+          
+          > * {
+            width: 100%;
+          }
+          
+          .ant-select {
+            height: 100%;
+            
+            .ant-select-selector {
+              height: 100%;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+      }
+    }
+  `;
+};
 const Input$1 = styled(Input$2)`
   ${({ theme, state, type: type4 = TYPE.primary, size = "normal", ...rest }) => {
-  !!rest.addonBefore;
-  !!rest.addonAfter;
-  return `
-      // Add your custom input styles here
-    `;
+  const hasBeforeAddon = !!rest.addonBefore;
+  const hasAfterAddon = !!rest.addonAfter;
+  return getGenesisInputClass(
+    theme,
+    type4,
+    state,
+    hasBeforeAddon,
+    hasAfterAddon,
+    size
+  );
 }}
 `;
 const DropdownChevron = (properties) => {
@@ -84325,7 +84499,8 @@ const useInfiniteQuery = ({
   queryKey: queryKey2,
   queryFn,
   initialPageParam,
-  getNextPageParam
+  getNextPageParam,
+  filterFn
 }) => {
   const [pages, setPages] = useState([]);
   const [error2, setError] = useState(null);
@@ -84355,7 +84530,8 @@ const useInfiniteQuery = ({
       }
       abortControllerRef.current = new AbortController();
       try {
-        const result = await queryFn({ pageParam });
+        const rawResult = await queryFn({ pageParam });
+        const result = filterFn ? filterFn(rawResult) : rawResult;
         if (abortControllerRef.current?.signal.aborted) {
           return;
         }
@@ -84471,7 +84647,8 @@ const InfiniteScrollTable = ({
   rowSelection,
   onRowClick,
   onRowSelectionChange,
-  onDataChange
+  onDataChange,
+  filterFn
 }) => {
   const observer = useRef();
   const [scrollableNode, setScrollableNode] = useState(
@@ -84548,7 +84725,8 @@ const InfiniteScrollTable = ({
     },
     [isFetchingNextPage, hasNextPage, fetchNextPage, scrollableNode]
   );
-  const dataSource = data?.pages.flatMap((page) => page.docs) ?? [];
+  const rawDataSource = data?.pages.flatMap((page) => page.docs) ?? [];
+  const dataSource = filterFn ? filterFn(rawDataSource) : rawDataSource;
   const totalDocs = data?.pages?.[0]?.totalDocs ?? 0;
   useEffect(() => {
     if (onRowSelectionChange) {
@@ -84780,8 +84958,10 @@ function Table({
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
         scrollWidth: infiniteScrollConfig.scrollWidth,
+        onChange,
         onRowSelectionChange,
-        onDataChange
+        onDataChange,
+        filterFn: infiniteScrollConfig.filterFn
       }
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.4.20",
+  "version": "0.4.22",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",