teachable-design-system 0.1.0

package/src/style/theme/typography.ts

@@ -0,0 +1,194 @@
+export const typography = {
+  fontFamily: {
+    primary: '"Pretendard", -apple-system, BlinkMacSystemFont, sans-serif',
+  },
+  
+  // Display
+  display: {
+    large: {
+      fontSize: '60px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    medium: {
+      fontSize: '44px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    small: {
+      fontSize: '36px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+  },
+
+  // Heading
+  heading: {
+    xlarge: {
+      fontSize: '40px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    large: {
+      fontSize: '32px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    medium: {
+      fontSize: '24px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    small: {
+      fontSize: '19px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    xsmall: {
+      fontSize: '17px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    xxsmall: {
+      fontSize: '15px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+  },
+
+  // Body
+  body: {
+    large: {
+      fontSize: '19px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    largeBold: {
+      fontSize: '19px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    medium: {
+      fontSize: '17px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    mediumBold: {
+      fontSize: '17px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    small: {
+      fontSize: '15px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    smallBold: {
+      fontSize: '15px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    xsmall: {
+      fontSize: '13px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    xsmallBold: {
+      fontSize: '13px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+  },
+
+  // Label
+  label: {
+    large: {
+      fontSize: '19px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    medium: {
+      fontSize: '17px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    small: {
+      fontSize: '15px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    xsmall: {
+      fontSize: '13px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+  },
+
+  // Navigation
+  navigation: {
+    titleMedium: {
+      fontSize: '24px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    titleSmall: {
+      fontSize: '19px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    depthMediumBold: {
+      fontSize: '17px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    depthMedium: {
+      fontSize: '17px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+    depthSmallBold: {
+      fontSize: '15px',
+      lineHeight: '150%',
+      fontWeight: 700,
+    },
+    depthSmall: {
+      fontSize: '15px',
+      lineHeight: '150%',
+      fontWeight: 400,
+    },
+  },
+
+  // Underline
+  underline: {
+    large: {
+      fontSize: '19px',
+      lineHeight: '150%',
+      fontWeight: 400,
+      textDecoration: 'underline',
+    },
+    medium: {
+      fontSize: '17px',
+      lineHeight: '150%',
+      fontWeight: 400,
+      textDecoration: 'underline',
+    },
+    small: {
+      fontSize: '15px',
+      lineHeight: '150%',
+      fontWeight: 400,
+      textDecoration: 'underline',
+    },
+    xsmall: {
+      fontSize: '13px',
+      lineHeight: '150%',
+      fontWeight: 400,
+      textDecoration: 'underline',
+    },
+  },
+
+  // Font Weight
+  fontWeight: {
+    regular: 400,
+    bold: 700,
+  },
+};

package/src/type/Dropdown.types.ts

@@ -0,0 +1,7 @@
+export interface DropdownProps {
+	size?: "small" | "medium" | "large";
+	onSelect?: (option: string) => void;
+	options: string[];
+	label?: string;
+	placeholder?: string;
+}

package/src/type/Sidebar.types.ts

@@ -0,0 +1,5 @@
+export interface SidebarProps {
+	buttonStyle?: 'one' | 'two' ;
+	title: string[],
+	description: string[] []
+}

package/src/types/ krds-uiux.d.ts

@@ -0,0 +1,12 @@
+declare module 'krds-uiux' {
+	import React from 'react';
+	
+	export interface ButtonProps {
+		variant?: 'primary' | 'secondary';
+		style?: React.CSSProperties;
+		onClick?: () => void;
+		children?: React.ReactNode;
+	}
+	
+	export const Button: React.FC<ButtonProps>;
+}

package/src/types/button.types.ts

@@ -0,0 +1,12 @@
+export interface ButtonProps {
+    width?: string;
+    height?: string;
+    type?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'small' | 'medium' | 'large';
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+
+export type ButtonType = 'primary' | 'secondary' | 'tertiary';
+export type ButtonSize = 'small' | 'medium' | 'large';

package/src/types/checkBox.types.ts

@@ -0,0 +1,6 @@
+export interface CheckBoxProps {
+  size: "medium" | "large";
+  select: "off" | "on" | "indeterminate";
+  state: "default" | "disabled";
+  onClick?: () => void;
+}

package/src/types/input.types.ts

@@ -0,0 +1,11 @@
+export interface InputProps {
+    size?: 'small' | 'medium' | 'large';
+    label?: boolean;
+    labelText?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+}
+
+export type InputSize = 'small' | 'medium' | 'large';

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />