jp-composter 0.1.0

package/src/SliceUI/tab/Token.ts

@@ -0,0 +1,282 @@
+import type {TextStyle, ViewStyle} from 'react-native';
+import {TYPOGRAPHY_STYLES} from '../typography/Token';
+import type {ExtendedTheme} from '../colors/Type';
+import type {
+  TabItemSizeType,
+  TabItemTextSizeType,
+  TabSizeType,
+  TabVariantType,
+  TabStateType,
+  TabBrandType,
+} from './Type';
+
+// Size dimensions for different tab sizes
+const sizeDimensions = {
+  small: {
+    height: 32,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 4,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  medium: {
+    height: 40,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 6,
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  large: {
+    height: 48,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 8,
+    fontSize: 18,
+    lineHeight: 28,
+  },
+} as const;
+
+// Helper function to create styles for a given size
+const createStylesForSize = (
+  sizeDimensions: (typeof sizeDimensions)[keyof typeof sizeDimensions],
+) => ({
+  height: sizeDimensions.height,
+  paddingHorizontal: sizeDimensions.paddingHorizontal,
+  paddingVertical: sizeDimensions.paddingVertical,
+  borderRadius: sizeDimensions.borderRadius,
+  fontSize: sizeDimensions.fontSize,
+  lineHeight: sizeDimensions.lineHeight,
+});
+
+// Export the tab item styles
+export const TAB_ITEM_STYLE: TabItemSizeType = {
+  small: createStylesForSize(sizeDimensions.small),
+  medium: createStylesForSize(sizeDimensions.medium),
+  large: createStylesForSize(sizeDimensions.large),
+};
+
+// Text styles for different sizes
+export const TAB_ITEM_TXT_STYLE: TabItemTextSizeType = {
+  small: {
+    ...TYPOGRAPHY_STYLES.captionBold,
+    fontSize: sizeDimensions.small.fontSize,
+    lineHeight: sizeDimensions.small.lineHeight,
+  },
+  medium: {
+    ...TYPOGRAPHY_STYLES.body2Bold,
+    fontSize: sizeDimensions.medium.fontSize,
+    lineHeight: sizeDimensions.medium.lineHeight,
+  },
+  large: {
+    ...TYPOGRAPHY_STYLES.body1Bold,
+    fontSize: sizeDimensions.large.fontSize,
+    lineHeight: sizeDimensions.large.lineHeight,
+  },
+};
+
+// Color tokens based on the design spec
+export const TAB_ITEM_COLOR_TOKENS = {
+  // Bordered variant colors
+  bordered: {
+    cm: {
+      default: {
+        active: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundPrimary,
+          underline: (theme: ExtendedTheme) => theme.colors.colorBorderPositive,
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          underline: (theme: ExtendedTheme) => 'transparent',
+        },
+      },
+      hover: {
+        active: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundPositive,
+          underline: (theme: ExtendedTheme) => theme.colors.colorBorderPositive,
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          underline: (theme: ExtendedTheme) => 'transparent',
+        },
+      },
+      disabled: {
+        active: {
+          text: (theme: ExtendedTheme) => '#B0BEC5', // Light gray text
+          underline: (theme: ExtendedTheme) => '#B0BEC5', // Light gray underline
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => '#B0BEC5', // Light gray text
+          underline: (theme: ExtendedTheme) => 'transparent',
+        },
+      },
+    },
+    co: {
+      default: {
+        active: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundPrimary,
+          underline: (theme: ExtendedTheme) => '#D32F2F', // Red for CO brand
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          underline: (theme: ExtendedTheme) => 'transparent',
+        },
+      },
+      hover: {
+        active: {
+          text: (theme: ExtendedTheme) => '#D32F2F', // Red text for active hover
+          underline: (theme: ExtendedTheme) => '#D32F2F',
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          underline: (theme: ExtendedTheme) => 'transparent',
+        },
+      },
+      disabled: {
+        active: {
+          text: (theme: ExtendedTheme) => '#B0BEC5', // Light gray text
+          underline: (theme: ExtendedTheme) => '#B0BEC5', // Light gray underline
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => '#B0BEC5', // Light gray text
+          underline: (theme: ExtendedTheme) => 'transparent',
+        },
+      },
+    },
+  },
+  // Filled variant colors
+  filled: {
+    cm: {
+      default: {
+        active: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundPositive,
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+      },
+      hover: {
+        active: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundPositive,
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+      },
+      disabled: {
+        active: {
+          text: (theme: ExtendedTheme) => '#B0BEC5',
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => '#B0BEC5',
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+      },
+    },
+    co: {
+      default: {
+        active: {
+          text: (theme: ExtendedTheme) => '#FFFFFF', // White text on red background
+          background: (theme: ExtendedTheme) => '#D32F2F', // Solid red background
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          background: (theme: ExtendedTheme) => '#F5F5F5', // Light gray background
+        },
+      },
+      hover: {
+        active: {
+          text: (theme: ExtendedTheme) => '#FFFFFF', // White text
+          background: (theme: ExtendedTheme) => '#B71C1C', // Darker red
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          background: (theme: ExtendedTheme) => '#E0E0E0', // Darker gray
+        },
+      },
+      disabled: {
+        active: {
+          text: (theme: ExtendedTheme) => '#B0BEC5', // Light gray text
+          background: (theme: ExtendedTheme) => '#E0E0E0', // Light gray background
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => '#B0BEC5', // Light gray text
+          background: (theme: ExtendedTheme) => '#F5F5F5', // Light gray background
+        },
+      },
+    },
+  },
+  // FilledRounded variant colors (same as filled but with rounded corners)
+  filledRounded: {
+    cm: {
+      default: {
+        active: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundPositive,
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+      },
+      hover: {
+        active: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundPositive,
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundTertiary,
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+      },
+      disabled: {
+        active: {
+          text: (theme: ExtendedTheme) => '#B0BEC5',
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => '#B0BEC5',
+          background: (_theme: ExtendedTheme) => 'transparent',
+        },
+      },
+    },
+    co: {
+      default: {
+        active: {
+          text: (theme: ExtendedTheme) => '#FFFFFF', // White text on red background
+          background: (theme: ExtendedTheme) => '#D32F2F', // Solid red background
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundPrimary,
+          background: (theme: ExtendedTheme) => '#F5F5F5', // Light gray background
+        },
+      },
+      hover: {
+        active: {
+          text: (theme: ExtendedTheme) => '#FFFFFF', // White text
+          background: (theme: ExtendedTheme) => '#B71C1C', // Darker red
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => theme.colors.colorForegroundPrimary,
+          background: (theme: ExtendedTheme) => '#E0E0E0', // Darker gray
+        },
+      },
+      disabled: {
+        active: {
+          text: (theme: ExtendedTheme) => '#B0BEC5', // Light gray text
+          background: (theme: ExtendedTheme) => '#E0E0E0', // Light gray background
+        },
+        inactive: {
+          text: (theme: ExtendedTheme) => '#B0BEC5', // Light gray text
+          background: (theme: ExtendedTheme) => '#F5F5F5', // Light gray background
+        },
+      },
+    },
+  },
+} as const;

package/src/SliceUI/tab/Type.ts

@@ -0,0 +1,66 @@
+// @ts-ignore
+import type {TextStyle, ViewStyle} from 'react-native';
+
+export type TabSizeType = 'small' | 'medium' | 'large';
+
+export type TabVariantType = 'bordered' | 'filled' | 'filledRounded';
+
+export type TabStateType = 'default' | 'hover' | 'disabled';
+
+export type TabBrandType = 'cm' | 'co';
+
+export type TabItemSizeType = {
+  [key in TabSizeType]: {
+    height: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    borderRadius?: number;
+    fontSize: number;
+    lineHeight: number;
+  };
+};
+
+export type TabItemTextSizeType = {
+  [key in TabSizeType]: TextStyle;
+};
+
+export type TabItemVariant = {
+  variant: TabVariantType;
+  brand: TabBrandType;
+  state: TabStateType;
+  isActive: boolean;
+};
+
+export const TAB_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;
+
+export const TAB_VARIANTS = {
+  BORDERED: 'bordered',
+  FILLED: 'filled',
+  FILLED_ROUNDED: 'filledRounded',
+} as const;
+
+export const TAB_STATES = {
+  DEFAULT: 'default',
+  HOVER: 'hover',
+  DISABLED: 'disabled',
+} as const;
+
+export const TAB_BRANDS = {
+  CM: 'cm',
+  CO: 'co',
+} as const;
+
+
+
+
+
+
+
+
+
+
+

package/src/SliceUI/tab/helper.ts

@@ -0,0 +1,53 @@
+import type {ExtendedTheme} from '../colors/Type';
+import {TAB_ITEM_COLOR_TOKENS} from './Token';
+import type {TabVariantType, TabStateType, TabBrandType} from './Type';
+
+export const getTextColor = (
+  variant: TabVariantType,
+  brand: TabBrandType,
+  state: TabStateType,
+  isActive: boolean,
+  theme: ExtendedTheme,
+) => {
+  const variantTokens = TAB_ITEM_COLOR_TOKENS[variant];
+  const brandTokens = variantTokens[brand];
+  const stateTokens = brandTokens[state];
+  const activeTokens = stateTokens[isActive ? 'active' : 'inactive'];
+  
+  return activeTokens.text(theme);
+};
+
+export const getBackgroundColor = (
+  variant: TabVariantType,
+  brand: TabBrandType,
+  state: TabStateType,
+  isActive: boolean,
+  theme: ExtendedTheme,
+) => {
+  const variantTokens = TAB_ITEM_COLOR_TOKENS[variant];
+  const brandTokens = variantTokens[brand];
+  const stateTokens = brandTokens[state];
+  const activeTokens = stateTokens[isActive ? 'active' : 'inactive'];
+  
+  return activeTokens.background ? activeTokens.background(theme) : 'transparent';
+};
+
+export const getUnderlineColor = (
+  variant: TabVariantType,
+  brand: TabBrandType,
+  state: TabStateType,
+  isActive: boolean,
+  theme: ExtendedTheme,
+) => {
+  const variantTokens = TAB_ITEM_COLOR_TOKENS[variant];
+  const brandTokens = variantTokens[brand];
+  const stateTokens = brandTokens[state];
+  const activeTokens = stateTokens[isActive ? 'active' : 'inactive'];
+  
+  return activeTokens.underline ? activeTokens.underline(theme) : 'transparent';
+};
+
+
+
+
+