@gobolt/genesis 0.2.21 → 0.3.0

package/dist/components/Select/SelectTrigger.cjs

@@ -0,0 +1,131 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+var styled = require("styled-components");
+var DropdownChevron = require("../shared/DropdownChevron.cjs");
+var Typography = require("../Typography/Typography.cjs");
+const getBackgroundColor = (colors, disabled, $variant) => {
+  if ($variant === "simple") return "#F4F4F4";
+  if (disabled) return "#F4F4F4";
+  return "#fff";
+};
+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 }) => {
+  var _a;
+  return $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 : (_a = theme.colors.surface.default) == null ? void 0 : _a.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.useCallback(() => {
+    if (disabled) return;
+    onClick == null ? void 0 : onClick();
+  }, [disabled, onClick]);
+  const displayValue = React.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) => {
+        var _a;
+        return (_a = options.find((opt) => opt.value === v)) == null ? void 0 : _a.label;
+      }).filter(Boolean);
+      return selectedLabels.length > 0 ? selectedLabels.join(", ") : `${value.length} selected`;
+    }
+    const selectedOption = options.find((opt) => opt.value === String(value));
+    return (selectedOption == null ? void 0 : selectedOption.label) || value.toString();
+  }, [value, renderValue, options]);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ValueContainer, { $variant: variant, children: displayValue ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy", children: displayValue }) : /* @__PURE__ */ jsxRuntime.jsx(
+          Typography,
+          {
+            variant: "body2",
+            color: disabled ? "copy-light" : "copy-light",
+            children: placeholder
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronContainer, { $variant: variant, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}) })
+      ]
+    }
+  );
+};
+module.exports = SelectTrigger;

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

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { STATE } from '../../constants';
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+type ThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+type Variant = "none" | "simple";
+interface SelectTriggerProperties {
+    type?: ThemeType;
+    theme?: GenesisTheme;
+    state?: keyof typeof STATE;
+    value?: string[] | string | number[] | number;
+    placeholder?: string;
+    open?: boolean;
+    onClick?: () => void;
+    renderValue?: (value: any) => React.ReactNode;
+    options?: {
+        value: string;
+        label: React.ReactNode;
+    }[];
+    disabled?: boolean;
+    variant?: Variant;
+}
+declare const SelectTrigger: React.FC<SelectTriggerProperties>;
+export default SelectTrigger;

package/dist/components/Select/SelectTrigger.js

@@ -0,0 +1,132 @@
+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";
+};
+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 }) => {
+  var _a;
+  return $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 : (_a = theme.colors.surface.default) == null ? void 0 : _a.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 == null ? void 0 : 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) => {
+        var _a;
+        return (_a = options.find((opt) => opt.value === v)) == null ? void 0 : _a.label;
+      }).filter(Boolean);
+      return selectedLabels.length > 0 ? selectedLabels.join(", ") : `${value.length} selected`;
+    }
+    const selectedOption = options.find((opt) => opt.value === String(value));
+    return (selectedOption == null ? void 0 : 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, {}) })
+      ]
+    }
+  );
+};
+export {
+  SelectTrigger as default
+};

package/dist/components/Select/__stories__/Select.stories.d.ts

@@ -3,8 +3,9 @@ import { default as Select } from '../Select';
 declare const meta: Meta<typeof Select>;
 export default meta;
 type Story = StoryObj<typeof Select>;
-export declare const Default: Story;
-export declare const DefaultSelectedValue: Story;
-export declare const Focussed: Story;
+export declare const Count: Story;
+export declare const Options: Story;
+export declare const SingleSelect: Story;
+export declare const SingleSelectWithinGreyParentContainer: Story;
 export declare const Disabled: Story;
 export declare const Simple: Story;

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

@@ -1,4 +1,2 @@
 export { default } from './Select';
 export type { SelectProps } from './Select';
-export { default as MultiSelectCount } from './MultiSelectCount';
-export type { MultiSelectCountProps } from './MultiSelectCount';

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

@@ -1,8 +1,8 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledSwitchProps extends React.HTMLAttributes<HTMLButtonElement> {
+interface StyledSwitchProperties extends React.HTMLAttributes<HTMLButtonElement> {
     theme?: GenesisTheme;
 }
 export declare const Switch: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').SwitchProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: import('react').Ref<HTMLButtonElement>;
-}, StyledSwitchProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').SwitchProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
+}, StyledSwitchProperties>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').SwitchProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
 export default Switch;

package/dist/components/Table/Table.cjs

@@ -1,14 +1,30 @@
 "use strict";
 var jsxRuntime = require("react/jsx-runtime");
 var styles = require("./styles.cjs");
+var CustomPagination = require("./TableControls/CustomPagination.cjs");
 function Table({
   columns,
   dataSource,
   rowKey = "id",
   size = "small",
   onChange,
-  rowSelection
+  rowSelection,
+  pagination,
+  isMainContentCell = false,
+  ...rest
 }) {
+  const paginationConfig = pagination === false ? false : {
+    ...pagination,
+    itemRender: void 0,
+    // Clear any existing itemRender to avoid conflicts
+    render: (properties) => /* @__PURE__ */ jsxRuntime.jsx(
+      CustomPagination.default,
+      {
+        ...properties,
+        paginationStyle: (pagination == null ? void 0 : pagination.paginationStyle) || CustomPagination.PaginationStyle.SIMPLE
+      }
+    )
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     styles.Table,
     {
@@ -19,7 +35,10 @@ function Table({
       locale: { emptyText: "No Data" },
       size,
       onChange,
-      rowSelection
+      rowSelection,
+      pagination: paginationConfig,
+      $isMainContentCell: isMainContentCell,
+      ...rest
     }
   );
 }

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

@@ -1,4 +1,5 @@
-import { ColumnType } from 'antd/es/table';
+import { ColumnType, TablePaginationConfig } from 'antd/es/table';
+import { PaginationStyle } from './TableControls/CustomPagination';
 import * as React from "react";
 export type ActionEvent = {
     event: string;
@@ -22,7 +23,9 @@ export interface TableProps<T extends Record<string, any>> {
     };
     onChange?: (pagination: TablePaginationType, filters: Record<string, React.Key[]>, sorter: SorterResult<T> | SorterResult<T>[]) => void;
     loading?: boolean;
-    pagination?: TablePaginationType | false;
+    pagination?: (TablePaginationConfig & {
+        paginationStyle?: PaginationStyle;
+    }) | false;
     scroll?: {
         x?: number | string;
         y?: number | string;
@@ -32,6 +35,7 @@ export interface TableProps<T extends Record<string, any>> {
         emptyText?: React.ReactNode;
     };
     [key: string]: any;
+    isMainContentCell?: boolean;
 }
 export type TablePaginationType = {
     pageSize?: number;
@@ -45,5 +49,5 @@ export type SorterResult<T> = {
     field?: keyof T | string | React.Key | readonly React.Key[];
     columnKey?: React.Key;
 };
-declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Table;

package/dist/components/Table/Table.js

@@ -1,13 +1,29 @@
 import { jsx } from "react/jsx-runtime";
 import { Table as Table$1 } from "./styles.js";
+import CustomPagination, { PaginationStyle } from "./TableControls/CustomPagination.js";
 function Table({
   columns,
   dataSource,
   rowKey = "id",
   size = "small",
   onChange,
-  rowSelection
+  rowSelection,
+  pagination,
+  isMainContentCell = false,
+  ...rest
 }) {
+  const paginationConfig = pagination === false ? false : {
+    ...pagination,
+    itemRender: void 0,
+    // Clear any existing itemRender to avoid conflicts
+    render: (properties) => /* @__PURE__ */ jsx(
+      CustomPagination,
+      {
+        ...properties,
+        paginationStyle: (pagination == null ? void 0 : pagination.paginationStyle) || PaginationStyle.SIMPLE
+      }
+    )
+  };
   return /* @__PURE__ */ jsx(
     Table$1,
     {
@@ -18,7 +34,10 @@ function Table({
       locale: { emptyText: "No Data" },
       size,
       onChange,
-      rowSelection
+      rowSelection,
+      pagination: paginationConfig,
+      $isMainContentCell: isMainContentCell,
+      ...rest
     }
   );
 }