@quillsql/react 1.1.0 → 1.1.2

package/src/lib/constants.ts

@@ -1,52 +1,58 @@
-import { Color, DeltaType, HorizontalPosition, Size, VerticalPosition } from "./inputTypes";
+import {
+  Color,
+  DeltaType,
+  HorizontalPosition,
+  Size,
+  VerticalPosition,
+} from './inputTypes';
 
 export const DeltaTypes: { [key: string]: DeltaType } = {
-  Increase: "increase",
-  ModerateIncrease: "moderateIncrease",
-  Decrease: "decrease",
-  ModerateDecrease: "moderateDecrease",
-  Unchanged: "unchanged",
+  Increase: 'increase',
+  ModerateIncrease: 'moderateIncrease',
+  Decrease: 'decrease',
+  ModerateDecrease: 'moderateDecrease',
+  Unchanged: 'unchanged',
 };
 
 export const BaseColors: { [key: string]: Color } = {
-  Slate: "slate",
-  Gray: "gray",
-  Zinc: "zinc",
-  Neutral: "neutral",
-  Stone: "stone",
-  Red: "red",
-  Orange: "orange",
-  Amber: "amber",
-  Yellow: "yellow",
-  Lime: "lime",
-  Green: "green",
-  Emerald: "emerald",
-  Teal: "teal",
-  Cyan: "cyan",
-  Sky: "sky",
-  Blue: "blue",
-  Indigo: "indigo",
-  Violet: "violet",
-  Purple: "purple",
-  Fuchsia: "fuchsia",
-  Pink: "pink",
-  Rose: "rose",
+  Slate: 'slate',
+  Gray: 'gray',
+  Zinc: 'zinc',
+  Neutral: 'neutral',
+  Stone: 'stone',
+  Red: 'red',
+  Orange: 'orange',
+  Amber: 'amber',
+  Yellow: 'yellow',
+  Lime: 'lime',
+  Green: 'green',
+  Emerald: 'emerald',
+  Teal: 'teal',
+  Cyan: 'cyan',
+  Sky: 'sky',
+  Blue: 'blue',
+  Indigo: 'indigo',
+  Violet: 'violet',
+  Purple: 'purple',
+  Fuchsia: 'fuchsia',
+  Pink: 'pink',
+  Rose: 'rose',
 };
 
 export const Sizes: { [key: string]: Size } = {
-  XS: "xs",
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-  XL: "xl",
+  XS: 'xs',
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg',
+  XL: 'xl',
 };
 
 export const HorizontalPositions: { [key: string]: HorizontalPosition } = {
-  Left: "left",
-  Right: "right",
+  Left: 'left',
+  Right: 'right',
 };
 
 export const VerticalPositions: { [key: string]: VerticalPosition } = {
-  Top: "top",
-  Bottom: "bottom",
+  Top: 'top',
+  Bottom: 'bottom',
 };

package/src/lib/font.ts

@@ -1,14 +1,14 @@
 export const fontSize = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: "text-base",
-  lg: "text-lg",
-  xl: "text-xl",
-  threeXl: "text-3xl",
+  xs: 'qq-text-xs',
+  sm: 'qq-text-sm',
+  md: 'qq-text-base',
+  lg: 'qq-text-lg',
+  xl: 'qq-text-xl',
+  threeXl: 'qq-text-3xl',
 };
 
 export const fontWeight = {
-  sm: "font-normal",
-  md: "font-medium",
-  lg: "font-semibold",
+  sm: 'qq-font-normal',
+  md: 'qq-font-medium',
+  lg: 'qq-font-semibold',
 };

package/src/lib/hexColors.ts

@@ -1,28 +1,28 @@
-import { BaseColors } from "./constants";
+import { BaseColors } from './constants';
 
 export const hexColors: { [color: string]: string } = {
-  [BaseColors.Slate]: "#64748b",
-  [BaseColors.Gray]: "#6b7280",
-  [BaseColors.Zinc]: "#71717a",
-  [BaseColors.Neutral]: "#737373",
-  [BaseColors.Stone]: "#78716c",
-  [BaseColors.Red]: "#ef4444",
-  [BaseColors.Orange]: "#f97316",
-  [BaseColors.Amber]: "#f59e0b",
-  [BaseColors.Yellow]: "#eab308",
-  [BaseColors.Lime]: "#84cc16",
-  [BaseColors.Green]: "#22c55e",
-  [BaseColors.Emerald]: "#10b981",
-  [BaseColors.Teal]: "#14b8a6",
-  [BaseColors.Cyan]: "#06b6d4",
-  [BaseColors.Sky]: "#0ea5e9",
-  [BaseColors.Blue]: "#3b82f6",
-  [BaseColors.Indigo]: "#6366f1",
-  [BaseColors.Violet]: "#8b5cf6",
-  [BaseColors.Purple]: "#a855f7",
-  [BaseColors.Fuchsia]: "#d946ef",
-  [BaseColors.Pink]: "#ec4899",
-  [BaseColors.Rose]: "#f43f5e",
-  [BaseColors.Black]: "#000000",
-  [BaseColors.White]: "#ffffff",
+  [BaseColors.Slate]: '#64748b',
+  [BaseColors.Gray]: '#6b7280',
+  [BaseColors.Zinc]: '#71717a',
+  [BaseColors.Neutral]: '#737373',
+  [BaseColors.Stone]: '#78716c',
+  [BaseColors.Red]: '#ef4444',
+  [BaseColors.Orange]: '#f97316',
+  [BaseColors.Amber]: '#f59e0b',
+  [BaseColors.Yellow]: '#eab308',
+  [BaseColors.Lime]: '#84cc16',
+  [BaseColors.Green]: '#22c55e',
+  [BaseColors.Emerald]: '#10b981',
+  [BaseColors.Teal]: '#14b8a6',
+  [BaseColors.Cyan]: '#06b6d4',
+  [BaseColors.Sky]: '#0ea5e9',
+  [BaseColors.Blue]: '#3b82f6',
+  [BaseColors.Indigo]: '#6366f1',
+  [BaseColors.Violet]: '#8b5cf6',
+  [BaseColors.Purple]: '#a855f7',
+  [BaseColors.Fuchsia]: '#d946ef',
+  [BaseColors.Pink]: '#ec4899',
+  [BaseColors.Rose]: '#f43f5e',
+  [BaseColors.Black]: '#000000',
+  [BaseColors.White]: '#ffffff',
 };

package/src/lib/index.ts

@@ -1,10 +1,10 @@
-export * from "./hexColors";
-export * from "./colorClassNames";
-export * from "./inputTypes";
-export * from "./constants";
-export * from "./shape";
-export * from "./sizing";
-export * from "./spacing";
-export * from "./font";
-export * from "./theme";
-export * from "./utils";
+export * from './hexColors';
+export * from './colorClassNames';
+export * from './inputTypes';
+export * from './constants';
+export * from './shape';
+export * from './sizing';
+export * from './spacing';
+export * from './font';
+export * from './theme';
+export * from './utils';

package/src/lib/inputTypes.ts

@@ -2,61 +2,80 @@ export type ValueFormatter = {
   (value: number): string;
 };
 
-const iconVariantValues = ["simple", "light", "shadow", "solid", "outlined"] as const;
+const iconVariantValues = [
+  'simple',
+  'light',
+  'shadow',
+  'solid',
+  'outlined',
+] as const;
 
 export type IconVariant = (typeof iconVariantValues)[number];
 
-export type HorizontalPosition = "left" | "right";
+export type HorizontalPosition = 'left' | 'right';
 
-export type VerticalPosition = "top" | "bottom";
+export type VerticalPosition = 'top' | 'bottom';
 
-export type ButtonVariant = "primary" | "secondary" | "light";
+export type ButtonVariant = 'primary' | 'secondary' | 'light';
 
 const deltaTypeValues = [
-  "increase",
-  "moderateIncrease",
-  "decrease",
-  "moderateDecrease",
-  "unchanged",
+  'increase',
+  'moderateIncrease',
+  'decrease',
+  'moderateDecrease',
+  'unchanged',
 ] as const;
 
 export type DeltaType = (typeof deltaTypeValues)[number];
 
-const sizeValues = ["xs", "sm", "md", "lg", "xl"] as const;
+const sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
 
 export type Size = (typeof sizeValues)[number];
 
 const colorValues = [
-  "slate",
-  "gray",
-  "zinc",
-  "neutral",
-  "stone",
-  "red",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose",
+  'slate',
+  'gray',
+  'zinc',
+  'neutral',
+  'stone',
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
 ] as const;
 
 export type Color = (typeof colorValues)[number];
 
-const justifyContentValues = ["start", "end", "center", "between", "around", "evenly"] as const;
+const justifyContentValues = [
+  'start',
+  'end',
+  'center',
+  'between',
+  'around',
+  'evenly',
+] as const;
 export type JustifyContent = (typeof justifyContentValues)[number];
 
-const alignItemsValues = ["start", "end", "center", "baseline", "stretch"] as const;
+const alignItemsValues = [
+  'start',
+  'end',
+  'center',
+  'baseline',
+  'stretch',
+] as const;
 export type AlignItems = (typeof alignItemsValues)[number];
 
-export type FlexDirection = "row" | "col" | "row-reverse" | "col-reverse";
+export type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';

package/src/lib/shape.ts

@@ -1,75 +1,75 @@
 export const borderRadius = {
   none: {
-    left: "rounded-l-none",
-    top: "rounded-t-none",
-    right: "rounded-r-none",
-    bottom: "rounded-b-none",
-    all: "rounded-none",
+    left: 'qq-rounded-l-none',
+    top: 'qq-rounded-t-none',
+    right: 'qq-rounded-r-none',
+    bottom: 'qq-rounded-b-none',
+    all: 'qq-rounded-none',
   },
   sm: {
-    left: "rounded-l",
-    top: "rounded-t",
-    right: "rounded-r",
-    bottom: "rounded-b",
-    all: "rounded",
+    left: 'qq-rounded-l',
+    top: 'qq-rounded-t',
+    right: 'qq-rounded-r',
+    bottom: 'qq-rounded-b',
+    all: 'qq-rounded',
   },
   md: {
-    left: "rounded-l-md",
-    top: "rounded-t-md",
-    right: "rounded-r-md",
-    bottom: "rounded-b-md",
-    all: "rounded-md",
+    left: 'qq-rounded-l-md',
+    top: 'qq-rounded-t-md',
+    right: 'qq-rounded-r-md',
+    bottom: 'qq-rounded-b-md',
+    all: 'qq-rounded-md',
   },
   lg: {
-    left: "rounded-l-lg",
-    top: "rounded-t-lg",
-    right: "rounded-r-lg",
-    bottom: "rounded-b-lg",
-    all: "rounded-lg",
+    left: 'qq-rounded-l-lg',
+    top: 'qq-rounded-t-lg',
+    right: 'qq-rounded-r-lg',
+    bottom: 'qq-rounded-b-lg',
+    all: 'qq-rounded-lg',
   },
   full: {
-    left: "rounded-l-full",
-    top: "rounded-t-full",
-    right: "rounded-r-full",
-    bottom: "rounded-b-full",
-    all: "rounded-full",
+    left: 'qq-rounded-l-full',
+    top: 'qq-rounded-t-full',
+    right: 'qq-rounded-r-full',
+    bottom: 'qq-rounded-b-full',
+    all: 'qq-rounded-full',
   },
 };
 
 export const boxShadow = {
-  none: "shadow-none",
-  sm: "shadow-sm",
-  md: "shadow",
-  lg: "shadow-lg",
+  none: 'qq-shadow-none',
+  sm: 'qq-shadow-sm',
+  md: 'qq-shadow',
+  lg: 'qq-shadow-lg',
 };
 
 export const border = {
   none: {
-    left: "border-l-0",
-    top: "border-t-0",
-    right: "border-r-0",
-    bottom: "border-b-0",
-    all: "border-0",
+    left: 'qq-border-l-0',
+    top: 'qq-border-t-0',
+    right: 'qq-border-r-0',
+    bottom: 'qq-border-b-0',
+    all: 'qq-border-0',
   },
   sm: {
-    left: "border-l",
-    top: "border-t",
-    right: "border-r",
-    bottom: "border-b",
-    all: "border",
+    left: 'qq-border-l',
+    top: 'qq-border-t',
+    right: 'qq-border-r',
+    bottom: 'qq-border-b',
+    all: 'qq-border',
   },
   md: {
-    left: "border-l-2",
-    top: "border-t-2",
-    right: "border-r-2",
-    bottom: "border-b-2",
-    all: "border-2",
+    left: 'qq-border-l-2',
+    top: 'qq-border-t-2',
+    right: 'qq-border-r-2',
+    bottom: 'qq-border-b-2',
+    all: 'qq-border-2',
   },
   lg: {
-    left: "border-l-4",
-    top: "border-t-4",
-    right: "border-r-4",
-    bottom: "border-b-4",
-    all: "border-4",
+    left: 'qq-border-l-4',
+    top: 'qq-border-t-4',
+    right: 'qq-border-r-4',
+    bottom: 'qq-border-b-4',
+    all: 'qq-border-4',
   },
 };

package/src/lib/sizing.ts

@@ -5,43 +5,43 @@ export type Sizing = {
 
 export const sizing = {
   none: {
-    height: "h-0",
-    width: "w-0",
+    height: 'qq-h-0',
+    width: 'qq-w-0',
   },
   threeXs: {
-    height: "h-0.5",
-    width: "w-0.5",
+    height: 'qq-h-0.5',
+    width: 'qq-w-0.5',
   },
   twoXs: {
-    height: "h-1",
-    width: "w-1",
+    height: 'qq-h-1',
+    width: 'qq-w-1',
   },
   xs: {
-    height: "h-2",
-    width: "w-2",
+    height: 'qq-h-2',
+    width: 'qq-w-2',
   },
   sm: {
-    height: "h-3",
-    width: "w-3",
+    height: 'qq-h-3',
+    width: 'qq-w-3',
   },
   md: {
-    height: "h-4",
-    width: "w-4",
+    height: 'qq-h-4',
+    width: 'qq-w-4',
   },
   lg: {
-    height: "h-5",
-    width: "w-5",
+    height: 'qq-h-5',
+    width: 'qq-w-5',
   },
   xl: {
-    height: "h-6",
-    width: "w-6",
+    height: 'qq-h-6',
+    width: 'qq-w-6',
   },
   twoXl: {
-    height: "h-7",
-    width: "w-7",
+    height: 'qq-h-7',
+    width: 'qq-w-7',
   },
   threeXl: {
-    height: "h-9",
-    width: "w-9",
+    height: 'qq-h-9',
+    width: 'qq-w-9',
   },
 };