@paubox/ui 1.13.0 → 1.15.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/Button/BaseButton.d.ts

@@ -11,6 +11,6 @@ export interface BaseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     className?: string;
 }
 export declare const BaseButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+    theme?: import("@theme").Theme;
     as?: React.ElementType;
 } & BaseButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/src/lib/Inputs/Input.d.ts

@@ -6,15 +6,15 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     rightIcon?: React.ElementType;
 }
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+    theme?: import("@theme").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BaseInput: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+    theme?: import("@theme").Theme;
     as?: React.ElementType;
 } & InputProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+    theme?: import("@theme").Theme;
     as?: React.ElementType;
 } & {
     position: "left" | "right";

package/src/lib/Inputs/TextArea.d.ts

@@ -6,11 +6,11 @@ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     onClear?: () => void;
 }
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+    theme?: import("@theme").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BaseTextArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+    theme?: import("@theme").Theme;
     as?: React.ElementType;
 } & TextAreaProps, import("react").DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
 export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/src/lib/Table/Table.d.ts

@@ -3,10 +3,10 @@ import { ColumnDef, OnChangeFn, Row } from '@tanstack/react-table';
 import { PageInfoPageBased, PageInfoCursorBased } from '../Pagination/Pagination';
 export type CellOverflow = 'truncate' | 'wrap' | 'clamp';
 export declare const TableContainer: import("@emotion/styled").StyledComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
+    theme?: import("@theme").Theme;
 }, {}, {}>;
 export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+    theme?: import("@theme").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
 export type TableColumn<T> = ColumnDef<T> & {

package/src/theme/ThemeProvider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Theme } from '@emotion/react';
+export type ThemeMode = 'light' | 'dark';
+export declare const useTheme: () => Theme;
+interface PauboxUIThemeProviderProps {
+    children: React.ReactNode;
+    mode: ThemeMode;
+}
+export declare const PauboxUIThemeProvider: React.FC<PauboxUIThemeProviderProps>;
+export type { Theme };

package/src/theme/baseTypography.d.ts

@@ -20,7 +20,7 @@ export declare const paragraph300LetterSpacing = 0;
 export declare const button100FontSize = 16;
 export declare const button100LineHeight = 16;
 export declare const button100LetterSpacing: number;
-export declare const button200FontSize = 12;
+export declare const button200FontSize = 14;
 export declare const button200LineHeight = 12;
 export declare const button200LetterSpacing: number;
 export declare const label100FontSize = 16;

package/src/theme/colors.d.ts

@@ -1,5 +1,5 @@
-export declare const textPrimary = "#1D2433";
-export declare const textSecondary = "#1D2433CC";
+export declare const textPrimary = "#000000";
+export declare const textSecondary = "#000000";
 export declare const textPrimaryWhite = "#FFFFFF";
 export declare const textPrimaryDisabled = "#545D78";
 export declare const textPrimaryIconDisabled = "#0000004D";

package/src/theme/darkColors.d.ts

@@ -0,0 +1,69 @@
+export declare const textPrimary = "#E5E7EB";
+export declare const textSecondary = "#9CA3AF";
+export declare const textPrimaryWhite = "#FFFFFF";
+export declare const textPrimaryDisabled = "#6B7280";
+export declare const textPrimaryIconDisabled = "#FFFFFF4D";
+export declare const textDanger = "#F87171";
+export declare const textDangerHover = "#EF4444";
+export declare const textDangerPressed = "#DC2626";
+export declare const neutral100 = "#1F2937";
+export declare const neutral200 = "#374151";
+export declare const neutral300 = "#4B5563";
+export declare const neutral400 = "#6B7280";
+export declare const neutral500 = "#9CA3AF";
+export declare const neutral600 = "#D1D5DB";
+export declare const neutral700 = "#E5E7EB";
+export declare const neutral800 = "#F3F4F6";
+export declare const neutral900 = "#FFFFFF";
+export declare const primary100 = "#1E3A8A";
+export declare const primary200 = "#1E40AF";
+export declare const primary300 = "#2563EB";
+export declare const primary400 = "#3B82F6";
+export declare const primary500 = "#60A5FA";
+export declare const primary600 = "#93C5FD";
+export declare const primary700 = "#BFDBFE";
+export declare const primary800 = "#DBEAFE";
+export declare const primary900 = "#EFF6FF";
+export declare const secondary100 = "#78350F";
+export declare const secondary200 = "#92400E";
+export declare const secondary300 = "#B45309";
+export declare const secondary400 = "#D97706";
+export declare const secondary500 = "#F59E0B";
+export declare const secondary600 = "#FBBF24";
+export declare const secondary700 = "#FCD34D";
+export declare const secondary800 = "#FDE68A";
+export declare const secondary900 = "#FEF3C7";
+export declare const success100 = "#064E3B";
+export declare const success200 = "#065F46";
+export declare const success300 = "#047857";
+export declare const success400 = "#059669";
+export declare const success500 = "#10B981";
+export declare const success600 = "#34D399";
+export declare const success700 = "#6EE7B7";
+export declare const success800 = "#A7F3D0";
+export declare const success900 = "#D1FAE5";
+export declare const warning100 = "#78350F";
+export declare const warning200 = "#92400E";
+export declare const warning300 = "#B45309";
+export declare const warning400 = "#D97706";
+export declare const warning500 = "#F59E0B";
+export declare const warning600 = "#FBBF24";
+export declare const warning700 = "#FCD34D";
+export declare const warning800 = "#FDE68A";
+export declare const warning900 = "#FEF3C7";
+export declare const danger100 = "#7F1D1D";
+export declare const danger200 = "#991B1B";
+export declare const danger300 = "#B91C1C";
+export declare const danger400 = "#DC2626";
+export declare const danger500 = "#EF4444";
+export declare const danger600 = "#F87171";
+export declare const danger700 = "#FCA5A5";
+export declare const danger800 = "#FECACA";
+export declare const danger900 = "#FEE2E2";
+export declare const surfacePrimary = "#262626";
+export declare const surfaceSecondary = "#333333";
+export declare const surfaceRaised = "#404040";
+export declare const surfaceRaisedHover = "#525252";
+export declare const surfaceMuted = "#737373";
+export declare const surfaceDeep = "#1a1a1a";
+export { secondaryCharts1100, secondaryCharts1200, secondaryCharts1300, secondaryCharts1400, secondaryCharts1500, secondaryCharts1600, secondaryCharts1700, secondaryCharts1800, secondaryCharts1900, secondaryCharts2100, secondaryCharts2200, secondaryCharts2300, secondaryCharts2400, secondaryCharts2500, secondaryCharts2600, secondaryCharts2700, secondaryCharts2800, secondaryCharts2900, secondaryCharts3100, secondaryCharts3200, secondaryCharts3300, secondaryCharts3400, secondaryCharts3500, secondaryCharts3600, secondaryCharts3700, secondaryCharts3800, secondaryCharts3900, } from './colors';

package/src/theme/index.d.ts

@@ -1,5 +1,7 @@
 export * as baseTypography from './baseTypography';
 export * as colors from './colors';
+export * as darkColors from './darkColors';
 export * as elevation from './elevation';
 export * from './spacing';
 export * as typography from './typography';
+export { PauboxUIThemeProvider, useTheme, type Theme, type ThemeMode } from './ThemeProvider';