@feathery/react 2.16.3 → 2.17.0

package/cjs/elements/basic/TableElement/styles.d.ts

@@ -1,391 +1,438 @@
 export declare const searchIconStyle: {
-    width: string;
-    height: string;
-    color: string;
+    readonly width: "16px";
+    readonly height: "16px";
+    readonly color: "#6b7280";
 };
 export declare const sortIconContainerStyle: {
-    display: string;
-    flexDirection: "column";
-    gap: string;
-    '& svg': {
-        marginInlineStart: string;
-        width: string;
-        height: string;
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly gap: "2px";
+    readonly '& svg': {
+        readonly marginInlineStart: "4px";
+        readonly width: "20px";
+        readonly height: "20px";
     };
 };
 export declare const sortArrowStyle: {
-    width: string;
-    height: string;
-    color: string;
-    opacity: number;
-    '&[data-active="true"]': {
-        color: string;
-        opacity: number;
+    readonly width: "12px";
+    readonly height: "12px";
+    readonly color: "#9ca3af";
+    readonly opacity: 0.3;
+    readonly '&[data-active="true"]': {
+        readonly color: "#1d4ed8";
+        readonly opacity: 1;
     };
 };
 export declare const sortHeaderContentStyle: {
-    display: string;
-    alignItems: string;
-    gap: string;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly gap: "8px";
 };
 export declare const containerStyle: {
-    position: string;
-    overflowX: string;
-    overflowY: string;
-    backgroundColor: string;
-    boxShadow: string;
-    borderRadius: string;
-    border: string;
-    minWidth: string;
-    maxWidth: string;
-    height: string;
-    boxSizing: string;
+    readonly position: "relative";
+    readonly overflowX: "auto";
+    readonly overflowY: "auto";
+    readonly backgroundColor: "#ffffff";
+    readonly boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+    readonly borderRadius: "8px";
+    readonly border: "1px solid #e5e7eb";
+    readonly minWidth: "100%";
+    readonly maxWidth: "100%";
+    readonly height: "100%";
+    readonly boxSizing: "border-box";
 };
 export declare const emptyStateContainerStyle: {
-    display: string;
-    flexDirection: "column";
-    alignItems: string;
-    justifyContent: string;
-    padding: string;
-    textAlign: "center";
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly padding: "64px 24px";
+    readonly textAlign: "center";
 };
 export declare const emptyStateTextStyle: {
-    color: string;
-    fontSize: string;
-    fontWeight: string;
-    margin: number;
+    readonly color: "#4b5563";
+    readonly fontSize: "16px";
+    readonly fontWeight: "500";
+    readonly margin: 0;
 };
 export declare const searchContainerStyle: {
-    padding: string;
-    borderBottom: string;
+    readonly padding: "16px";
+    readonly borderBottom: "1px solid #e5e7eb";
 };
 export declare const searchWrapperStyle: {
-    position: string;
+    readonly position: "relative";
 };
 export declare const searchIconWrapperStyle: {
-    position: string;
-    top: number;
-    bottom: number;
-    left: number;
-    display: string;
-    alignItems: string;
-    paddingLeft: string;
-    pointerEvents: string;
+    readonly position: "absolute";
+    readonly top: 0;
+    readonly bottom: 0;
+    readonly left: 0;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly paddingLeft: "12px";
+    readonly pointerEvents: "none";
 };
 export declare const searchInputStyle: {
-    display: string;
-    width: string;
-    maxWidth: string;
-    paddingLeft: string;
-    paddingRight: string;
-    paddingTop: string;
-    paddingBottom: string;
-    backgroundColor: string;
-    border: string;
-    color: string;
-    fontSize: string;
-    borderRadius: string;
-    boxShadow: string;
-    boxSizing: "border-box";
+    readonly display: "block";
+    readonly width: "100%";
+    readonly maxWidth: "384px";
+    readonly paddingLeft: "36px";
+    readonly paddingRight: "12px";
+    readonly paddingTop: "10px";
+    readonly paddingBottom: "10px";
+    readonly backgroundColor: "#f9fafb";
+    readonly border: "1px solid #e5e7eb";
+    readonly color: "#111827";
+    readonly fontSize: "14px";
+    readonly borderRadius: "8px";
+    readonly boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+    readonly boxSizing: "border-box";
 };
 export declare const tableStyle: {
-    width: string;
-    maxWidth: string;
-    fontSize: string;
-    textAlign: string;
-    color: string;
-    textIndent: number;
-    borderColor: string;
-    borderCollapse: string;
+    readonly width: "100%";
+    readonly maxWidth: "100%";
+    readonly fontSize: "14px";
+    readonly textAlign: "left";
+    readonly color: "#4b5563";
+    readonly textIndent: 0;
+    readonly borderColor: "inherit";
+    readonly borderCollapse: "collapse";
 };
 export declare const theadStyle: {
-    fontSize: string;
-    color: string;
-    backgroundColor: string;
-    borderBottom: string;
+    readonly fontSize: "14px";
+    readonly color: "#4b5563";
+    readonly backgroundColor: "#f9fafb";
+    readonly borderBottom: "1px solid #e5e7eb";
 };
 export declare const thStyle: {
-    padding: string;
-    fontWeight: string;
-    userSelect: string;
+    readonly padding: "12px 24px";
+    readonly fontWeight: "500";
+    readonly userSelect: "none";
 };
 export declare const rowStyle: {
-    backgroundColor: string;
-    borderBottom: string;
-    transition: string;
+    readonly backgroundColor: "#ffffff";
+    readonly borderBottom: "1px solid #e5e7eb";
+    readonly transition: "background-color 0.2s";
 };
 export declare const cellStyle: {
-    padding: string;
-    wordBreak: string;
-    overflowWrap: string;
+    readonly padding: "16px 24px";
+    readonly wordBreak: "break-word";
+    readonly overflowWrap: "anywhere";
 };
 export declare const navStyle: {
-    display: string;
-    alignItems: string;
-    flexWrap: string;
-    justifyContent: string;
-    padding: string;
-    gap: string;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly flexWrap: "wrap";
+    readonly justifyContent: "space-between";
+    readonly padding: "16px";
+    readonly gap: "8px";
 };
 export declare const navTextStyle: {
-    fontSize: string;
-    fontWeight: string;
-    color: string;
+    readonly fontSize: "14px";
+    readonly fontWeight: "normal";
+    readonly color: "#4b5563";
 };
 export declare const navTextBoldStyle: {
-    fontWeight: string;
-    color: string;
+    readonly fontWeight: "600";
+    readonly color: "#111827";
 };
 export declare const paginationListStyle: {
-    display: string;
-    marginLeft: string;
-    fontSize: string;
-    listStyle: string;
-    padding: number;
-    margin: number;
+    readonly display: "flex";
+    readonly marginLeft: "-1px";
+    readonly fontSize: "14px";
+    readonly listStyle: "none";
+    readonly padding: 0;
+    readonly margin: 0;
 };
 export declare const buttonStyle: {
-    display: string;
-    alignItems: string;
-    justifyContent: string;
-    color: string;
-    backgroundColor: string;
-    boxSizing: "border-box";
-    border: string;
-    fontWeight: string;
-    fontSize: string;
-    textDecoration: string;
-    cursor: string;
-    height: string;
-    wordBreak: string;
-    overflowWrap: string;
-    '&:hover': {
-        backgroundColor: string;
-        color: string;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly color: "#4b5563";
+    readonly backgroundColor: "#f9fafb";
+    readonly boxSizing: "border-box";
+    readonly border: "1px solid #e5e7eb";
+    readonly fontWeight: "500";
+    readonly fontSize: "14px";
+    readonly textDecoration: "none";
+    readonly cursor: "pointer";
+    readonly height: "36px";
+    readonly wordBreak: "keep-all";
+    readonly overflowWrap: "normal";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f3f4f6";
+        readonly color: "#111827";
+    };
+    readonly '&:disabled:hover': {
+        readonly color: "#4b5563";
+        readonly backgroundColor: "#f9fafb";
+        readonly cursor: "auto";
     };
 };
 export declare const actionButtonStyle: {
-    borderRadius: string;
-    paddingInline: string;
-    width: string;
-    height: string;
-    display: string;
-    alignItems: string;
-    justifyContent: string;
-    color: string;
-    backgroundColor: string;
-    boxSizing: "border-box";
-    border: string;
-    fontWeight: string;
-    fontSize: string;
-    textDecoration: string;
-    cursor: string;
-    wordBreak: string;
-    overflowWrap: string;
-    '&:hover': {
-        backgroundColor: string;
-        color: string;
+    readonly borderRadius: "4px";
+    readonly paddingInline: "8px";
+    readonly width: "auto";
+    readonly height: "28px";
+    readonly position: "relative";
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly color: "#4b5563";
+    readonly backgroundColor: "#f9fafb";
+    readonly boxSizing: "border-box";
+    readonly border: "1px solid #e5e7eb";
+    readonly fontWeight: "500";
+    readonly fontSize: "14px";
+    readonly textDecoration: "none";
+    readonly cursor: "pointer";
+    readonly wordBreak: "keep-all";
+    readonly overflowWrap: "normal";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f3f4f6";
+        readonly color: "#111827";
+    };
+    readonly '&:disabled:hover': {
+        readonly color: "#4b5563";
+        readonly backgroundColor: "#f9fafb";
+        readonly cursor: "auto";
     };
 };
 export declare const menuIconStyle: {
-    width: string;
-    height: string;
-    color: string;
+    readonly width: "16px";
+    readonly height: "16px";
+    readonly color: "#4b5563";
 };
 export declare const actionMenuStyle: {
-    position: "fixed";
-    backgroundColor: string;
-    border: string;
-    borderRadius: string;
-    boxShadow: string;
-    zIndex: number;
-    minWidth: string;
+    readonly position: "fixed";
+    readonly backgroundColor: "#ffffff";
+    readonly border: "1px solid #d1d5db";
+    readonly borderRadius: "4px";
+    readonly boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
+    readonly zIndex: 9999;
+    readonly minWidth: "120px";
 };
 export declare const actionMenuItemStyle: {
-    display: string;
-    width: string;
-    textAlign: "left";
-    paddingLeft: string;
-    paddingRight: string;
-    paddingTop: string;
-    paddingBottom: string;
-    fontSize: string;
-    color: string;
-    backgroundColor: string;
-    border: string;
-    cursor: string;
-    whiteSpace: "nowrap";
-    '&:hover': {
-        backgroundColor: string;
+    readonly display: "block";
+    readonly width: "100%";
+    readonly textAlign: "left";
+    readonly paddingLeft: "12px";
+    readonly paddingRight: "12px";
+    readonly paddingTop: "8px";
+    readonly paddingBottom: "8px";
+    readonly fontSize: "14px";
+    readonly color: "#374151";
+    readonly backgroundColor: "transparent";
+    readonly border: "none";
+    readonly cursor: "pointer";
+    readonly whiteSpace: "nowrap";
+    readonly position: "relative";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f3f4f6";
+    };
+    readonly '&:disabled:hover': {
+        readonly backgroundColor: "transparent";
+        readonly cursor: "auto";
     };
-    '&:first-of-type': {
-        borderTopLeftRadius: string;
-        borderTopRightRadius: string;
+    readonly '&:first-of-type': {
+        readonly borderTopLeftRadius: "4px";
+        readonly borderTopRightRadius: "4px";
     };
-    '&:last-of-type': {
-        borderBottomLeftRadius: string;
-        borderBottomRightRadius: string;
+    readonly '&:last-of-type': {
+        readonly borderBottomLeftRadius: "4px";
+        readonly borderBottomRightRadius: "4px";
     };
 };
 export declare const actionIconButtonStyle: {
-    aspectRatio: number;
-    paddingLeft: number;
-    paddingRight: number;
-    borderRadius: string;
-    paddingInline: string;
-    width: string;
-    height: string;
-    display: string;
-    alignItems: string;
-    justifyContent: string;
-    color: string;
-    backgroundColor: string;
-    boxSizing: "border-box";
-    border: string;
-    fontWeight: string;
-    fontSize: string;
-    textDecoration: string;
-    cursor: string;
-    wordBreak: string;
-    overflowWrap: string;
-    '&:hover': {
-        backgroundColor: string;
-        color: string;
+    readonly aspectRatio: 1;
+    readonly paddingLeft: 0;
+    readonly paddingRight: 0;
+    readonly borderRadius: "4px";
+    readonly paddingInline: "8px";
+    readonly width: "auto";
+    readonly height: "28px";
+    readonly position: "relative";
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly color: "#4b5563";
+    readonly backgroundColor: "#f9fafb";
+    readonly boxSizing: "border-box";
+    readonly border: "1px solid #e5e7eb";
+    readonly fontWeight: "500";
+    readonly fontSize: "14px";
+    readonly textDecoration: "none";
+    readonly cursor: "pointer";
+    readonly wordBreak: "keep-all";
+    readonly overflowWrap: "normal";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f3f4f6";
+        readonly color: "#111827";
+    };
+    readonly '&:disabled:hover': {
+        readonly color: "#4b5563";
+        readonly backgroundColor: "#f9fafb";
+        readonly cursor: "auto";
     };
 };
 export declare const actionContainerStyle: {
-    display: string;
-    gap: string;
-    justifyContent: string;
+    readonly display: "flex";
+    readonly gap: "8px";
+    readonly justifyContent: "flex-end";
 };
 export declare const pageButtonStyle: {
-    width: string;
-    borderRightWidth: number;
-    display: string;
-    alignItems: string;
-    justifyContent: string;
-    color: string;
-    backgroundColor: string;
-    boxSizing: "border-box";
-    border: string;
-    fontWeight: string;
-    fontSize: string;
-    textDecoration: string;
-    cursor: string;
-    height: string;
-    wordBreak: string;
-    overflowWrap: string;
-    '&:hover': {
-        backgroundColor: string;
-        color: string;
+    readonly width: "36px";
+    readonly borderRightWidth: 0;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly color: "#4b5563";
+    readonly backgroundColor: "#f9fafb";
+    readonly boxSizing: "border-box";
+    readonly border: "1px solid #e5e7eb";
+    readonly fontWeight: "500";
+    readonly fontSize: "14px";
+    readonly textDecoration: "none";
+    readonly cursor: "pointer";
+    readonly height: "36px";
+    readonly wordBreak: "keep-all";
+    readonly overflowWrap: "normal";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f3f4f6";
+        readonly color: "#111827";
+    };
+    readonly '&:disabled:hover': {
+        readonly color: "#4b5563";
+        readonly backgroundColor: "#f9fafb";
+        readonly cursor: "auto";
     };
 };
 export declare const pageButtonPrevStyle: {
-    borderTopLeftRadius: string;
-    borderBottomLeftRadius: string;
-    paddingLeft: string;
-    paddingRight: string;
-    width: string;
-    borderRightWidth: number;
-    display: string;
-    alignItems: string;
-    justifyContent: string;
-    color: string;
-    backgroundColor: string;
-    boxSizing: "border-box";
-    border: string;
-    fontWeight: string;
-    fontSize: string;
-    textDecoration: string;
-    cursor: string;
-    height: string;
-    wordBreak: string;
-    overflowWrap: string;
-    '&:hover': {
-        backgroundColor: string;
-        color: string;
+    readonly borderTopLeftRadius: "8px";
+    readonly borderBottomLeftRadius: "8px";
+    readonly paddingLeft: "12px";
+    readonly paddingRight: "12px";
+    readonly width: "auto";
+    readonly borderRightWidth: 0;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly color: "#4b5563";
+    readonly backgroundColor: "#f9fafb";
+    readonly boxSizing: "border-box";
+    readonly border: "1px solid #e5e7eb";
+    readonly fontWeight: "500";
+    readonly fontSize: "14px";
+    readonly textDecoration: "none";
+    readonly cursor: "pointer";
+    readonly height: "36px";
+    readonly wordBreak: "keep-all";
+    readonly overflowWrap: "normal";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f3f4f6";
+        readonly color: "#111827";
+    };
+    readonly '&:disabled:hover': {
+        readonly color: "#4b5563";
+        readonly backgroundColor: "#f9fafb";
+        readonly cursor: "auto";
     };
 };
 export declare const pageButtonNextStyle: {
-    borderTopRightRadius: string;
-    borderBottomRightRadius: string;
-    paddingLeft: string;
-    paddingRight: string;
-    width: string;
-    borderRightWidth: number;
-    display: string;
-    alignItems: string;
-    justifyContent: string;
-    color: string;
-    backgroundColor: string;
-    boxSizing: "border-box";
-    border: string;
-    fontWeight: string;
-    fontSize: string;
-    textDecoration: string;
-    cursor: string;
-    height: string;
-    wordBreak: string;
-    overflowWrap: string;
-    '&:hover': {
-        backgroundColor: string;
-        color: string;
+    readonly borderTopRightRadius: "8px";
+    readonly borderBottomRightRadius: "8px";
+    readonly paddingLeft: "12px";
+    readonly paddingRight: "12px";
+    readonly width: "auto";
+    readonly borderRightWidth: 1;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly color: "#4b5563";
+    readonly backgroundColor: "#f9fafb";
+    readonly boxSizing: "border-box";
+    readonly border: "1px solid #e5e7eb";
+    readonly fontWeight: "500";
+    readonly fontSize: "14px";
+    readonly textDecoration: "none";
+    readonly cursor: "pointer";
+    readonly height: "36px";
+    readonly wordBreak: "keep-all";
+    readonly overflowWrap: "normal";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f3f4f6";
+        readonly color: "#111827";
+    };
+    readonly '&:disabled:hover': {
+        readonly color: "#4b5563";
+        readonly backgroundColor: "#f9fafb";
+        readonly cursor: "auto";
     };
 };
 export declare const pageButtonActiveStyle: {
-    color: string;
-    backgroundColor: string;
-    border: string;
-    width: string;
-    borderRightWidth: number;
-    display: string;
-    alignItems: string;
-    justifyContent: string;
-    boxSizing: "border-box";
-    fontWeight: string;
-    fontSize: string;
-    textDecoration: string;
-    cursor: string;
-    height: string;
-    wordBreak: string;
-    overflowWrap: string;
-    '&:hover': {
-        backgroundColor: string;
-        color: string;
+    readonly color: "#1d4ed8";
+    readonly backgroundColor: "#eff6ff";
+    readonly border: "1px solid #e5e7eb";
+    readonly width: "36px";
+    readonly borderRightWidth: 0;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly boxSizing: "border-box";
+    readonly fontWeight: "500";
+    readonly fontSize: "14px";
+    readonly textDecoration: "none";
+    readonly cursor: "pointer";
+    readonly height: "36px";
+    readonly wordBreak: "keep-all";
+    readonly overflowWrap: "normal";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f3f4f6";
+        readonly color: "#111827";
+    };
+    readonly '&:disabled:hover': {
+        readonly color: "#4b5563";
+        readonly backgroundColor: "#f9fafb";
+        readonly cursor: "auto";
     };
 };
 export declare const pageButtonEllipsisStyle: {
-    cursor: string;
-    '&:focus': {
-        outline: string;
+    readonly cursor: "default";
+    readonly '&:focus': {
+        readonly outline: "none";
+    };
+    readonly width: "36px";
+    readonly borderRightWidth: 0;
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly color: "#4b5563";
+    readonly backgroundColor: "#f9fafb";
+    readonly boxSizing: "border-box";
+    readonly border: "1px solid #e5e7eb";
+    readonly fontWeight: "500";
+    readonly fontSize: "14px";
+    readonly textDecoration: "none";
+    readonly height: "36px";
+    readonly wordBreak: "keep-all";
+    readonly overflowWrap: "normal";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f3f4f6";
+        readonly color: "#111827";
     };
-    width: string;
-    borderRightWidth: number;
-    display: string;
-    alignItems: string;
-    justifyContent: string;
-    color: string;
-    backgroundColor: string;
-    boxSizing: "border-box";
-    border: string;
-    fontWeight: string;
-    fontSize: string;
-    textDecoration: string;
-    height: string;
-    wordBreak: string;
-    overflowWrap: string;
-    '&:hover': {
-        backgroundColor: string;
-        color: string;
+    readonly '&:disabled:hover': {
+        readonly color: "#4b5563";
+        readonly backgroundColor: "#f9fafb";
+        readonly cursor: "auto";
     };
 };
 export declare const pageButtonDisabledStyle: {
-    opacity: number;
-    cursor: string;
-    color: string;
-    '&:hover': {
-        backgroundColor: string;
-        color: string;
+    readonly opacity: 0.8;
+    readonly cursor: "default";
+    readonly color: "#9ca3af";
+    readonly '&:hover': {
+        readonly backgroundColor: "#f9fafb";
+        readonly color: "#9ca3af";
     };
 };
 //# sourceMappingURL=styles.d.ts.map