bord-design-system 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.
Files changed (30) hide show
  1. package/dist/components/BordButton/BordButton.types.d.ts +5 -5
  2. package/dist/components/BordButton/BordButton.types.d.ts.map +1 -1
  3. package/dist/components/BordCellCard/components/BordCellHeader/BordCellHeader.d.ts.map +1 -1
  4. package/dist/components/BordInfoCard/BordInfoCard.d.ts +17 -0
  5. package/dist/components/BordInfoCard/BordInfoCard.d.ts.map +1 -0
  6. package/dist/components/BordInfoCard/BordInfoCard.types.d.ts +25 -0
  7. package/dist/components/BordInfoCard/BordInfoCard.types.d.ts.map +1 -0
  8. package/dist/components/BordMetricCard/BordMetricCard.d.ts +11 -0
  9. package/dist/components/BordMetricCard/BordMetricCard.d.ts.map +1 -0
  10. package/dist/components/BordOneToneIcon/BordOneToneIcon.d.ts +1 -1
  11. package/dist/components/BordOneToneIcon/BordOneToneIcon.d.ts.map +1 -1
  12. package/dist/components/BordTabBar/BordTabBar.d.ts +16 -0
  13. package/dist/components/BordTabBar/BordTabBar.d.ts.map +1 -0
  14. package/dist/components/BordTabs/BordTabs.type.d.ts.map +1 -1
  15. package/dist/components/BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList.d.ts +4 -3
  16. package/dist/components/BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList.d.ts.map +1 -1
  17. package/dist/components/index.d.ts +16 -10
  18. package/dist/components/index.d.ts.map +1 -1
  19. package/dist/hooks/index.d.ts +4 -0
  20. package/dist/hooks/index.d.ts.map +1 -0
  21. package/dist/hooks/useViewport.d.ts +46 -0
  22. package/dist/hooks/useViewport.d.ts.map +1 -0
  23. package/dist/index.d.ts +135 -12
  24. package/dist/index.esm.js +663 -14
  25. package/dist/index.esm.js.map +1 -1
  26. package/dist/index.js +667 -12
  27. package/dist/index.js.map +1 -1
  28. package/dist/utils/setOpacityToHex.d.ts +1 -1
  29. package/dist/utils/setOpacityToHex.d.ts.map +1 -1
  30. package/package.json +1 -1
@@ -1,13 +1,12 @@
1
1
  import { ComponentProps } from 'react';
2
2
  import { TformComponentsStandardSizes } from '../../types/global.types';
3
+ import { IbordOneToneIconProps } from '../BordOneToneIcon/BordOneToneIcon';
3
4
  import { TbordOneToneIcon } from '../BordOneToneIcon/BordOneToneIcon.types';
4
5
  type THeight = 'auto' | '42';
5
6
  export interface IBordButton extends ComponentProps<'button'> {
6
7
  label?: string;
7
8
  formId?: string;
8
9
  customClassName?: string;
9
- buttonIconOne?: TbordOneToneIcon;
10
- buttonIconTwo?: TbordOneToneIcon;
11
10
  customWidth?: TformComponentsStandardSizes;
12
11
  customHeight?: THeight;
13
12
  bordButtonStyle?: 'filled' | 'outlined';
@@ -15,10 +14,11 @@ export interface IBordButton extends ComponentProps<'button'> {
15
14
  disabled?: boolean;
16
15
  isLoading?: boolean;
17
16
  modeButton?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
18
- standardSizeIcon?: 12 | 14 | 16 | 20 | 24 | 32;
19
17
  standardPaddingSize?: 'rectangular' | 'squared';
20
- buttonIconOneStroke?: string;
21
- buttonIconTwoStroke?: string;
18
+ buttonIconOneProps?: IbordOneToneIconProps;
19
+ buttonIconTwoProps?: IbordOneToneIconProps;
20
+ buttonIconOne?: TbordOneToneIcon;
21
+ buttonIconTwo?: TbordOneToneIcon;
22
22
  }
23
23
  export {};
24
24
  //# sourceMappingURL=BordButton.types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"BordButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordButton/BordButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;AAE7B,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,WAAW,CAAC,EAAE,4BAA4B,CAAC;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;IACjE,gBAAgB,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC/C,mBAAmB,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B"}
1
+ {"version":3,"file":"BordButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordButton/BordButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;AAE7B,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,4BAA4B,CAAC;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;IACjE,mBAAmB,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAChD,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;IAC3C,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;IAC3C,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC"}
@@ -1 +1 @@
1
- {"version":3,"file":"BordCellHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/BordCellCard/components/BordCellHeader/BordCellHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,uBAAuB,CAAC;AAE/B;;;;;;;;GAQG;AACH,QAAA,MAAM,cAAc,UAAW,eAAe,KAAG,KAAK,CAAC,YAoBtD,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"BordCellHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/BordCellCard/components/BordCellHeader/BordCellHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,uBAAuB,CAAC;AAE/B;;;;;;;;GAQG;AACH,QAAA,MAAM,cAAc,UAAW,eAAe,KAAG,KAAK,CAAC,YAuBtD,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -0,0 +1,17 @@
1
+ import * as React from "react";
2
+ import { IBordInfoCard } from "./BordInfoCard.types";
3
+ import "./BordInfoCard.scss";
4
+ /**
5
+ * @description A card component that displays information in a horizontal layout (desktop): Header | Items (horizontal row) | Buttons.
6
+ * @prop {IBordInfoCardHeader} [header] - Optional header with icon, title, subtitle, and description (left section).
7
+ * @prop {IBordInfoCardItem[]} [items] - Optional array of items to display in a horizontal row (center section, desktop) or grid (tablet/mobile).
8
+ * @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [primaryButton] - Optional primary button (filled style, right section).
9
+ * @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [secondaryButton] - Optional secondary button (outlined style, right section).
10
+ * @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton' | 'label'>} [menuButton] - Optional menu button (icon only, right section).
11
+ * @prop {"success" | "danger"} [variant="success"] - The color variant of the card.
12
+ * @prop {string} [customClassName=""] - Add a custom class to the component.
13
+ * @returns {React.ReactElement} An info card component.
14
+ */
15
+ declare const BordInfoCard: (props: IBordInfoCard) => React.ReactElement;
16
+ export default BordInfoCard;
17
+ //# sourceMappingURL=BordInfoCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BordInfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/BordInfoCard/BordInfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAMrD,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;GAUG;AACH,QAAA,MAAM,YAAY,UAAW,aAAa,KAAG,KAAK,CAAC,YA6IlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { ComponentProps, ReactNode } from 'react';
2
+ import { IBordButton } from '../BordButton/BordButton.types';
3
+ import { IRowFooterProps } from '../BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList';
4
+ export interface IBordInfoCardItem {
5
+ title?: string;
6
+ icon?: ReactNode;
7
+ label: string;
8
+ }
9
+ export interface IBordInfoCardHeader {
10
+ icon?: ReactNode;
11
+ title?: string;
12
+ subtitle?: string;
13
+ description?: string;
14
+ }
15
+ export interface IBordInfoCard extends ComponentProps<'div'> {
16
+ header?: IBordInfoCardHeader;
17
+ items?: IBordInfoCardItem[];
18
+ primaryButtonProps?: IBordButton;
19
+ secondaryButtonProps?: IBordButton;
20
+ tertiaryButtonProps?: IBordButton;
21
+ variant?: 'success' | 'danger';
22
+ customClassName?: string;
23
+ bordTrelloRowFooterBadgeListProps?: IRowFooterProps;
24
+ }
25
+ //# sourceMappingURL=BordInfoCard.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BordInfoCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordInfoCard/BordInfoCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAC;AAE/F,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,oBAAoB,CAAC,EAAE,WAAW,CAAC;IACnC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iCAAiC,CAAC,EAAE,eAAe,CAAC;CACrD"}
@@ -0,0 +1,11 @@
1
+ import './BordMetricCard.scss';
2
+ export type TBordMetricCardSizes = 'lg' | 'sm';
3
+ export interface IBordMetricCardProps {
4
+ title: string;
5
+ value: number;
6
+ textColor?: string;
7
+ size: TBordMetricCardSizes;
8
+ }
9
+ declare const BordMetricCard: ({ title, value, textColor, size }: IBordMetricCardProps) => import("react/jsx-runtime").JSX.Element;
10
+ export default BordMetricCard;
11
+ //# sourceMappingURL=BordMetricCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BordMetricCard.d.ts","sourceRoot":"","sources":["../../../src/components/BordMetricCard/BordMetricCard.tsx"],"names":[],"mappings":"AAEA,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,oBAAoB,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,sCAAmD,oBAAoB,4CAiC1F,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -4,7 +4,7 @@ declare const BordOneToneIcon: ({ variant, standardSize, customWidth, style, ...
4
4
  export default BordOneToneIcon;
5
5
  export interface IbordOneToneIconProps extends ComponentProps<'svg'> {
6
6
  variant: TbordOneToneIcon;
7
- standardSize?: 12 | 14 | 16 | 20 | 24 | 32;
7
+ standardSize?: 12 | 14 | 16 | 18 | 20 | 24 | 32;
8
8
  customWidth?: string;
9
9
  }
10
10
  //# sourceMappingURL=BordOneToneIcon.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"BordOneToneIcon.d.ts","sourceRoot":"","sources":["../../../src/components/BordOneToneIcon/BordOneToneIcon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG3D,QAAA,MAAM,eAAe,2DAMlB,qBAAqB,4CAWvB,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAClE,OAAO,EAAE,gBAAgB,CAAC;IAC1B,YAAY,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
1
+ {"version":3,"file":"BordOneToneIcon.d.ts","sourceRoot":"","sources":["../../../src/components/BordOneToneIcon/BordOneToneIcon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG3D,QAAA,MAAM,eAAe,2DAMlB,qBAAqB,4CAWvB,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAClE,OAAO,EAAE,gBAAgB,CAAC;IAC1B,YAAY,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
@@ -0,0 +1,16 @@
1
+ import './BordTabBar.scss';
2
+ export interface IBordTabItem {
3
+ id: string;
4
+ label: string;
5
+ }
6
+ export interface IBordTabBarProps {
7
+ tabs: IBordTabItem[];
8
+ defaultValue?: string;
9
+ activeTab?: string;
10
+ onChange?: (id: string) => void;
11
+ containerClassName?: string;
12
+ buttonClassName?: string;
13
+ activeTabClassName?: string;
14
+ }
15
+ export declare const BordTabBar: ({ tabs, defaultValue, activeTab: externalActiveTab, onChange, containerClassName, buttonClassName, activeTabClassName, }: IBordTabBarProps) => import("react/jsx-runtime").JSX.Element;
16
+ //# sourceMappingURL=BordTabBar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BordTabBar.d.ts","sourceRoot":"","sources":["../../../src/components/BordTabBar/BordTabBar.tsx"],"names":[],"mappings":"AACA,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU,6HAQpB,gBAAgB,4CAoClB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"BordTabs.type.d.ts","sourceRoot":"","sources":["../../../src/components/BordTabs/BordTabs.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAAkB,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC"}
1
+ {"version":3,"file":"BordTabs.type.d.ts","sourceRoot":"","sources":["../../../src/components/BordTabs/BordTabs.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC"}
@@ -1,7 +1,8 @@
1
1
  import { ReactNode } from 'react';
2
+ import { IbordOneToneIconProps } from '../BordOneToneIcon/BordOneToneIcon';
2
3
  import './BordTrelloRowFooterBadgeList.scss';
3
4
  type TBadgeItemProps = {
4
- icon?: ReactNode;
5
+ icon?: IbordOneToneIconProps;
5
6
  text?: string;
6
7
  title?: string;
7
8
  className?: string;
@@ -12,8 +13,8 @@ type TTitleProps = {
12
13
  text?: string;
13
14
  className?: string;
14
15
  };
15
- interface IRowFooterProps {
16
- title: ReactNode | TTitleProps;
16
+ export interface IRowFooterProps {
17
+ title?: ReactNode | TTitleProps;
17
18
  badgeList?: TBadgeItem[];
18
19
  children?: ReactNode;
19
20
  }
@@ -1 +1 @@
1
- {"version":3,"file":"BordTrelloRowFooterBadgeList.d.ts","sourceRoot":"","sources":["../../../src/components/BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGlD,OAAO,qCAAqC,CAAC;AAE7C,KAAK,eAAe,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC/F,KAAK,UAAU,GAAG,eAAe,GAAG,SAAS,CAAC;AAC9C,KAAK,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,SAAS,CAAC,EAAE,UAAU,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,4BAA4B,mCAAyC,eAAe,4CA+ChG,CAAC"}
1
+ {"version":3,"file":"BordTrelloRowFooterBadgeList.d.ts","sourceRoot":"","sources":["../../../src/components/BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAElD,OAAwB,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC5F,OAAO,qCAAqC,CAAC;AAE7C,KAAK,eAAe,GAAG;IAAE,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC3G,KAAK,UAAU,GAAG,eAAe,GAAG,SAAS,CAAC;AAC9C,KAAK,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,SAAS,CAAC,EAAE,UAAU,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,4BAA4B,mCAAyC,eAAe,4CA8ChG,CAAC"}
@@ -1,11 +1,17 @@
1
- import BordAvatar from "./BordAvatar/BordAvatar";
2
- import BordFlag from "./BordFlag/BordFlag";
3
- import BordOneToneIcon from "./BordOneToneIcon/BordOneToneIcon";
4
- import BordTextInput from "./BordTextInput/BordTextInput";
5
- import BordTwoToneIcon from "./BordTwoToneIcon/BordTwoToneIcon";
6
- import BordBackButton from "./BordBackButton/BordBackButton";
7
- import BordAttentionButton from "./BordAttentionButton/BordAttentionButton";
8
- import BordInfoBanner from "./BordInfoBanner/BordInfoBanner";
9
- import BordButton from "./BordButton/BordButton";
10
- export { BordAvatar, BordFlag, BordOneToneIcon, BordTextInput, BordTwoToneIcon, BordBackButton, BordAttentionButton, BordInfoBanner, BordButton, };
1
+ import BordAvatar from './BordAvatar/BordAvatar';
2
+ import BordFlag from './BordFlag/BordFlag';
3
+ import BordOneToneIcon from './BordOneToneIcon/BordOneToneIcon';
4
+ import BordTextInput from './BordTextInput/BordTextInput';
5
+ import BordTwoToneIcon from './BordTwoToneIcon/BordTwoToneIcon';
6
+ import BordBackButton from './BordBackButton/BordBackButton';
7
+ import BordAttentionButton from './BordAttentionButton/BordAttentionButton';
8
+ import BordInfoBanner from './BordInfoBanner/BordInfoBanner';
9
+ import BordButton from './BordButton/BordButton';
10
+ import { BordTabs } from './BordTabs/BordTabs';
11
+ import BordInfoCard from './BordInfoCard/BordInfoCard';
12
+ import BordMetricCard from './BordMetricCard/BordMetricCard';
13
+ import { BordTabBar } from './BordTabBar/BordTabBar';
14
+ import { BordTab } from './BordTab/BordTab';
15
+ import { BordTabsGroupWithBadge } from './BordTabsGroup/BordTabsGroupWithBadge';
16
+ export { BordAvatar, BordFlag, BordOneToneIcon, BordTextInput, BordTwoToneIcon, BordBackButton, BordAttentionButton, BordInfoBanner, BordButton, BordTabs, BordInfoCard, BordMetricCard, BordTabBar, BordTab, BordTabsGroupWithBadge, };
11
17
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAC7D,OAAO,mBAAmB,MAAM,2CAA2C,CAAC;AAC5E,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAC7D,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EACL,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EACb,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,UAAU,GACX,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAC7D,OAAO,mBAAmB,MAAM,2CAA2C,CAAC;AAC5E,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAC7D,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAEhF,OAAO,EACL,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EACb,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,UAAU,EACV,OAAO,EACP,sBAAsB,GACvB,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { default as useDebounce } from "./useDebounce";
2
+ export { default as useViewport } from "./useViewport";
3
+ export type { ViewportInfo, Breakpoint } from "./useViewport";
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,46 @@
1
+ /**
2
+ * Breakpoints basados en Tailwind
3
+ * xs: 400px
4
+ * sm: 640px
5
+ * md: 768px
6
+ * lg: 1024px
7
+ * xl: 1440px
8
+ * 2xl: 1920px
9
+ */
10
+ declare const BREAKPOINTS: {
11
+ readonly xs: 400;
12
+ readonly sm: 640;
13
+ readonly md: 768;
14
+ readonly lg: 1024;
15
+ readonly xl: 1440;
16
+ readonly "2xl": 1920;
17
+ };
18
+ export type Breakpoint = keyof typeof BREAKPOINTS;
19
+ export interface ViewportInfo {
20
+ width: number;
21
+ height: number;
22
+ isMobile: boolean;
23
+ isTablet: boolean;
24
+ isDesktop: boolean;
25
+ isXs: boolean;
26
+ isSm: boolean;
27
+ isMd: boolean;
28
+ isLg: boolean;
29
+ isXl: boolean;
30
+ is2Xl: boolean;
31
+ breakpoint: Breakpoint | "base";
32
+ }
33
+ /**
34
+ * Custom hook para detectar el tamaño del viewport y breakpoints de Tailwind
35
+ * @returns {ViewportInfo} Información sobre el viewport actual
36
+ *
37
+ * @example
38
+ * const { isMobile, isTablet, isDesktop, width, breakpoint } = useViewport();
39
+ *
40
+ * if (isMobile) {
41
+ * // Renderizar versión mobile
42
+ * }
43
+ */
44
+ export default function useViewport(): ViewportInfo;
45
+ export {};
46
+ //# sourceMappingURL=useViewport.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useViewport.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewport.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW;;;;;;;CAOP,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,UAAU,GAAG,MAAM,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,IAAI,YAAY,CAuBlD"}
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as React from 'react';
3
- import { ComponentProps } from 'react';
2
+ import * as React$1 from 'react';
3
+ import { ComponentProps, ReactNode, ReactElement } from 'react';
4
4
 
5
5
  type TbordAvatarsVariant = 'circularFigma' | 'circularUser' | 'circularWorld' | 'circularZeppelin' | 'circularBordMascot' | 'rectangularFigma' | 'rectangularUser' | 'rectangularWorld' | 'rectangularZeppelin' | 'rectangularBordMascot';
6
6
  interface IBordAvatarProps extends ComponentProps<'svg'> {
@@ -28,11 +28,13 @@ declare const BordOneToneIcon: ({ variant, standardSize, customWidth, style, ...
28
28
 
29
29
  interface IbordOneToneIconProps extends ComponentProps<'svg'> {
30
30
  variant: TbordOneToneIcon;
31
- standardSize?: 12 | 14 | 16 | 20 | 24 | 32;
31
+ standardSize?: 12 | 14 | 16 | 18 | 20 | 24 | 32;
32
32
  customWidth?: string;
33
33
  }
34
34
 
35
35
  type TformComponentsStandardSizes = 'w-80' | 'w-180' | 'w-280' | 'w-380';
36
+ type TSemanticColors = 'informative' | 'success' | 'warning' | 'danger';
37
+ type TTabValue = string | number;
36
38
 
37
39
  interface IBordTextInputProps extends ComponentProps<"input"> {
38
40
  placeholder: string;
@@ -96,7 +98,7 @@ interface IBordAttentionButton extends ComponentProps<'div'> {
96
98
  * @prop {string} [customClassName=""] - Add a custom class to the component.
97
99
  * @returns {React.ReactElement} An attention button component.
98
100
  */
99
- declare const BordAttentionButton: (props: IBordAttentionButton) => React.ReactElement;
101
+ declare const BordAttentionButton: (props: IBordAttentionButton) => React$1.ReactElement;
100
102
 
101
103
  interface IBordInfoBannerDivProps extends ComponentProps<'div'> {
102
104
  className?: string;
@@ -143,15 +145,13 @@ interface IBordInfoBanner extends ComponentProps<'div'> {
143
145
  * @prop {IBordInfoBannerAlertLabelProps} [bordInfoBannerAlertLabelProps] - Props for the alert label.
144
146
  * @returns {React.ReactElement} An info banner component.
145
147
  */
146
- declare const BordInfoBanner: (props: IBordInfoBanner) => React.ReactElement;
148
+ declare const BordInfoBanner: (props: IBordInfoBanner) => React$1.ReactElement;
147
149
 
148
150
  type THeight = 'auto' | '42';
149
151
  interface IBordButton extends ComponentProps<'button'> {
150
152
  label?: string;
151
153
  formId?: string;
152
154
  customClassName?: string;
153
- buttonIconOne?: TbordOneToneIcon;
154
- buttonIconTwo?: TbordOneToneIcon;
155
155
  customWidth?: TformComponentsStandardSizes;
156
156
  customHeight?: THeight;
157
157
  bordButtonStyle?: 'filled' | 'outlined';
@@ -159,10 +159,11 @@ interface IBordButton extends ComponentProps<'button'> {
159
159
  disabled?: boolean;
160
160
  isLoading?: boolean;
161
161
  modeButton?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
162
- standardSizeIcon?: 12 | 14 | 16 | 20 | 24 | 32;
163
162
  standardPaddingSize?: 'rectangular' | 'squared';
164
- buttonIconOneStroke?: string;
165
- buttonIconTwoStroke?: string;
163
+ buttonIconOneProps?: IbordOneToneIconProps;
164
+ buttonIconTwoProps?: IbordOneToneIconProps;
165
+ buttonIconOne?: TbordOneToneIcon;
166
+ buttonIconTwo?: TbordOneToneIcon;
166
167
  }
167
168
 
168
169
  /**
@@ -183,6 +184,128 @@ interface IBordButton extends ComponentProps<'button'> {
183
184
  * @prop {"rectangular" | "squared"} [standardPaddingSize="rectangular"] - The padding size of the button.
184
185
  * @returns {React.ReactElement} A button component with different styles and loading state.
185
186
  */
186
- declare const BordButton: (props: IBordButton) => React.ReactElement;
187
+ declare const BordButton: (props: IBordButton) => React$1.ReactElement;
188
+
189
+ type TTabSemanticColors = TSemanticColors;
190
+ interface IBordTab {
191
+ label: ReactNode;
192
+ value?: TTabValue;
193
+ icon?: ReactElement;
194
+ iconPosition?: 'top' | 'bottom' | 'start' | 'end';
195
+ className?: string;
196
+ style?: React.CSSProperties;
197
+ selected?: boolean;
198
+ textColor?: TTabSemanticColors;
199
+ disabled?: boolean;
200
+ onClick?: (evt: React.MouseEvent<HTMLButtonElement>, value?: TTabValue) => void;
201
+ }
202
+
203
+ interface IBordTabs {
204
+ textColor?: TTabSemanticColors;
205
+ defaultValue?: TTabValue;
206
+ children: ReactNode;
207
+ value?: TTabValue;
208
+ onChange?: (value: TTabValue) => void;
209
+ }
210
+
211
+ declare const BordTabs: ({ value, children, defaultValue, textColor, onChange }: IBordTabs) => react_jsx_runtime.JSX.Element;
212
+
213
+ type TBadgeItemProps = {
214
+ icon?: IbordOneToneIconProps;
215
+ text?: string;
216
+ title?: string;
217
+ className?: string;
218
+ };
219
+ type TBadgeItem = TBadgeItemProps | ReactNode;
220
+ type TTitleProps = {
221
+ icon?: ReactNode;
222
+ text?: string;
223
+ className?: string;
224
+ };
225
+ interface IRowFooterProps {
226
+ title?: ReactNode | TTitleProps;
227
+ badgeList?: TBadgeItem[];
228
+ children?: ReactNode;
229
+ }
230
+
231
+ interface IBordInfoCardItem {
232
+ title?: string;
233
+ icon?: ReactNode;
234
+ label: string;
235
+ }
236
+ interface IBordInfoCardHeader {
237
+ icon?: ReactNode;
238
+ title?: string;
239
+ subtitle?: string;
240
+ description?: string;
241
+ }
242
+ interface IBordInfoCard extends ComponentProps<'div'> {
243
+ header?: IBordInfoCardHeader;
244
+ items?: IBordInfoCardItem[];
245
+ primaryButtonProps?: IBordButton;
246
+ secondaryButtonProps?: IBordButton;
247
+ tertiaryButtonProps?: IBordButton;
248
+ variant?: 'success' | 'danger';
249
+ customClassName?: string;
250
+ bordTrelloRowFooterBadgeListProps?: IRowFooterProps;
251
+ }
252
+
253
+ /**
254
+ * @description A card component that displays information in a horizontal layout (desktop): Header | Items (horizontal row) | Buttons.
255
+ * @prop {IBordInfoCardHeader} [header] - Optional header with icon, title, subtitle, and description (left section).
256
+ * @prop {IBordInfoCardItem[]} [items] - Optional array of items to display in a horizontal row (center section, desktop) or grid (tablet/mobile).
257
+ * @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [primaryButton] - Optional primary button (filled style, right section).
258
+ * @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [secondaryButton] - Optional secondary button (outlined style, right section).
259
+ * @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton' | 'label'>} [menuButton] - Optional menu button (icon only, right section).
260
+ * @prop {"success" | "danger"} [variant="success"] - The color variant of the card.
261
+ * @prop {string} [customClassName=""] - Add a custom class to the component.
262
+ * @returns {React.ReactElement} An info card component.
263
+ */
264
+ declare const BordInfoCard: (props: IBordInfoCard) => React$1.ReactElement;
265
+
266
+ type TBordMetricCardSizes = 'lg' | 'sm';
267
+ interface IBordMetricCardProps {
268
+ title: string;
269
+ value: number;
270
+ textColor?: string;
271
+ size: TBordMetricCardSizes;
272
+ }
273
+ declare const BordMetricCard: ({ title, value, textColor, size }: IBordMetricCardProps) => react_jsx_runtime.JSX.Element;
274
+
275
+ interface IBordTabItem {
276
+ id: string;
277
+ label: string;
278
+ }
279
+ interface IBordTabBarProps {
280
+ tabs: IBordTabItem[];
281
+ defaultValue?: string;
282
+ activeTab?: string;
283
+ onChange?: (id: string) => void;
284
+ containerClassName?: string;
285
+ buttonClassName?: string;
286
+ activeTabClassName?: string;
287
+ }
288
+ declare const BordTabBar: ({ tabs, defaultValue, activeTab: externalActiveTab, onChange, containerClassName, buttonClassName, activeTabClassName, }: IBordTabBarProps) => react_jsx_runtime.JSX.Element;
289
+
290
+ declare const BordTab: ({ label, className, style, icon, iconPosition, textColor, selected, value, disabled, onClick, }: IBordTab) => react_jsx_runtime.JSX.Element;
291
+
292
+ interface ITabItem {
293
+ value?: TTabValue;
294
+ label: string;
295
+ disabled?: boolean;
296
+ badge?: {
297
+ label: string;
298
+ filled?: boolean;
299
+ };
300
+ }
301
+ interface IBordTabsGroupProps {
302
+ value?: TTabValue;
303
+ defaultValue?: TTabValue;
304
+ tabs: ITabItem[];
305
+ textColor?: TTabSemanticColors;
306
+ onChange?: (value: TTabValue) => void;
307
+ }
308
+
309
+ declare function BordTabsGroupWithBadge({ value, defaultValue, tabs, textColor, onChange }: IBordTabsGroupProps): react_jsx_runtime.JSX.Element;
187
310
 
188
- export { BordAttentionButton, BordAvatar, BordBackButton, BordButton, BordFlag, BordInfoBanner, BordOneToneIcon, BordTextInput, BordTwoToneIcon };
311
+ export { BordAttentionButton, BordAvatar, BordBackButton, BordButton, BordFlag, BordInfoBanner, BordInfoCard, BordMetricCard, BordOneToneIcon, BordTab, BordTabBar, BordTabs, BordTabsGroupWithBadge, BordTextInput, BordTwoToneIcon };