@taiv/ui 1.0.0

package/dist/constants/font.d.ts

@@ -0,0 +1,245 @@
+declare const fontWeight: {
+    light: number;
+    regular: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+};
+declare const fontBase: {
+    fontFamily: string;
+    WebkitFontSmoothing: string;
+    MozOsxFontSmoothing: string;
+    fontWeight: number;
+};
+declare const inputFontSize: {
+    sm: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    md: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    lg: {
+        fontSize: string;
+        lineHeight: string;
+    };
+};
+declare const fontSize: {
+    xs: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    sm: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    md: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    lg: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    xl: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    '2xl': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    '3xl': {
+        fontSize: string;
+        lineHeight: string;
+    };
+};
+declare const textStyle: {
+    body: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    subtle: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    label: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    caption: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+};
+declare const titleStyle: {
+    header: {
+        fontWeight: number;
+        color: string;
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    sectionHeader: {
+        fontWeight: number;
+        color: string;
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    subheader: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    sectionSubheader: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    cardHeader: {
+        fontWeight: number;
+        color: "#3F3F3F";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    cardSubheader: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+};
+declare const fontStyle: {
+    header: {
+        fontWeight: number;
+        color: string;
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    sectionHeader: {
+        fontWeight: number;
+        color: string;
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    subheader: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    sectionSubheader: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    cardHeader: {
+        fontWeight: number;
+        color: "#3F3F3F";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    cardSubheader: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    body: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    subtle: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    label: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+    caption: {
+        fontWeight: number;
+        color: "#6D6D6D";
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
+        WebkitFontSmoothing: string;
+        MozOsxFontSmoothing: string;
+    };
+};
+export { fontStyle, textStyle, titleStyle, fontBase, fontSize, inputFontSize, fontWeight };
+//# sourceMappingURL=font.d.ts.map

package/dist/constants/font.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../src/constants/font.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU;;;;;;CAMf,CAAC;AAGF,QAAA,MAAM,QAAQ;;;;;CAKb,CAAC;AAGF,QAAA,MAAM,aAAa;;;;;;;;;;;;;CAIlB,CAAC;AAGF,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQb,CAAC;AAGF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Bd,CAAC;AAGF,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cf,CAAC;AAGF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGd,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}

package/dist/constants/font.js

@@ -0,0 +1,114 @@
+import { neutral } from './colors';
+// Human-readable names for font weights
+const fontWeight = {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+};
+// Style for base font - used for all variants
+const fontBase = {
+    fontFamily: 'Poppins, sans-serif',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    fontWeight: 500,
+};
+// Input font sizes are slightly smaller - this is for visual hierarchy
+const inputFontSize = {
+    sm: { fontSize: '1.15rem', lineHeight: '1.8rem' }, //~12px
+    md: { fontSize: '1.35rem', lineHeight: '2rem' }, //~14px
+    lg: { fontSize: '1.5rem', lineHeight: '2.2rem' }, //~16px
+};
+// Base font sizes
+const fontSize = {
+    xs: { fontSize: '1rem', lineHeight: '1.6rem' }, //10px
+    sm: { fontSize: '1.2rem', lineHeight: '2rem' }, //12px
+    md: { fontSize: '1.4rem', lineHeight: '2.2rem' }, //14px
+    lg: { fontSize: '1.6rem', lineHeight: '2.4rem' }, //16px
+    xl: { fontSize: '2rem', lineHeight: '2.8rem' }, //20px
+    '2xl': { fontSize: '2.4rem', lineHeight: '3.2rem' }, //24px
+    '3xl': { fontSize: '2.8rem', lineHeight: '3.6rem' }, //28px
+};
+// Variants for body text
+const textStyle = {
+    body: {
+        // Default
+        ...fontBase,
+        ...fontSize['md'],
+        fontWeight: fontWeight['medium'],
+        color: neutral[200],
+    },
+    subtle: {
+        // Empty states, etc.
+        ...fontBase,
+        ...fontSize['md'],
+        fontWeight: fontWeight['regular'],
+        color: neutral[200],
+    },
+    label: {
+        // Labels, tooltips, smaller text, etc.
+        ...fontBase,
+        ...fontSize['sm'],
+        fontWeight: fontWeight['medium'],
+        color: neutral[200],
+    },
+    caption: {
+        // Smallest text
+        ...fontBase,
+        ...fontSize['xs'],
+        fontWeight: fontWeight['regular'],
+        color: neutral[200],
+    },
+};
+// Variants for titles and headers
+const titleStyle = {
+    header: {
+        // h1
+        ...fontBase,
+        ...fontSize['3xl'],
+        fontWeight: fontWeight['bold'],
+        color: 'black',
+    },
+    sectionHeader: {
+        // h2
+        ...fontBase,
+        ...fontSize['xl'],
+        fontWeight: fontWeight['semibold'],
+        color: 'black',
+    },
+    subheader: {
+        // h3
+        ...fontBase,
+        ...fontSize['lg'],
+        fontWeight: fontWeight['medium'],
+        color: neutral[200],
+    },
+    sectionSubheader: {
+        // h4
+        ...fontBase,
+        ...fontSize['md'],
+        fontWeight: fontWeight['regular'],
+        color: neutral[200],
+    },
+    cardHeader: {
+        // h5
+        ...fontBase,
+        ...fontSize['lg'],
+        fontWeight: fontWeight['semibold'],
+        color: neutral[300],
+    },
+    cardSubheader: {
+        // h6
+        ...fontBase,
+        ...fontSize['md'],
+        fontWeight: fontWeight['regular'],
+        color: neutral[200],
+    },
+};
+// Combined object for all variants - for convenience
+const fontStyle = {
+    ...textStyle,
+    ...titleStyle,
+};
+export { fontStyle, textStyle, titleStyle, fontBase, fontSize, inputFontSize, fontWeight };

package/dist/constants/index.d.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './font';
+//# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}

package/dist/constants/index.js

@@ -0,0 +1,2 @@
+export * from './colors';
+export * from './font';

package/dist/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { useCopy } from '../components/Misc/Copy';
+export { useMediaQuery } from '../components/Misc/MediaQuery';
+export { useNotifications } from '../components/Info/Notifications/Notifications';
+export { useConfirmationModal } from '../components/Info/Modals/ConfirmationModal';
+export { useInfoModal } from '../components/Info/Modals/InfoModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,5 @@
+export { useCopy } from '../components/Misc/Copy';
+export { useMediaQuery } from '../components/Misc/MediaQuery';
+export { useNotifications } from '../components/Info/Notifications/Notifications';
+export { useConfirmationModal } from '../components/Info/Modals/ConfirmationModal';
+export { useInfoModal } from '../components/Info/Modals/InfoModal';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index';
+export * from './constants/index';
+export * from './hooks/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './components/index';
+export * from './constants/index';
+export * from './hooks/index';

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@taiv/ui",
+  "version": "1.0.0",
+  "author": "Taiv",
+  "description": "Taiv's web UI Toolkit built on Mantine v6",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@tabler/icons-react": "^2.47.0",
+    "@mantine/core": "^6.0.0",
+    "@mantine/hooks": "^6.0.0",
+    "@mantine/modals": "^6.0.0",
+    "@mantine/notifications": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.87",
+    "@types/react-dom": "^17.0.26",
+    "typescript": "^5.0.2"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
+    },
+    "./constants": {
+      "types": "./dist/constants/index.d.ts",
+      "default": "./dist/constants/index.js"
+    }
+  }
+}