@contember/utilities 1.2.0-beta.3 → 1.2.0-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/utilities",
   "license": "Apache-2.0",
-  "version": "1.2.0-beta.3",
+  "version": "1.2.0-rc.1",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -35,5 +35,8 @@
   "peerDependencies": {
     "react": "^17 || ^18"
   },
+  "dependencies": {
+    "type-fest": "^3.12.0"
+  },
   "stableVersion": "0.0.0"
 }

package/src/assert-types/Predicates.ts

@@ -1,3 +1,5 @@
+import { Predicate, SlugString, UnionOfPredicateTypes } from './types'
+
 export function isNull(value: unknown): value is null {
   return value === null
 }
@@ -7,7 +9,7 @@ export function isNotNull<T>(value: unknown): value is T {
 export function isUndefined(value: unknown): value is undefined {
   return value === undefined
 }
-export function isDefined<T>(value: unknown): value is T {
+export function isDefined<T>(value: unknown): value is Exclude<T, undefined> {
   return value !== undefined
 }
 export function isNotNullish<T>(value: T): value is Exclude<T, null | undefined> {
@@ -25,6 +27,9 @@ export function isFalse(value: unknown): value is false {
 export function isString(value: unknown): value is string {
   return typeof value === 'string'
 }
+export function isSlugString(value: unknown): value is SlugString {
+	return isNonEmptyString(value) && /^[a-z0-9_-]+$/.test(value)
+}
 export function isNonEmptyString(value: unknown): value is string {
   return isString(value) && value.length > 0
 }
@@ -45,10 +50,26 @@ export function isNonNegativeNumber(value: unknown): value is number {
 export function isNumericString(value: string): value is string {
   return isString(value) && !isNaN(parseFloat(value))
 }
-export function isOneOfFactory<U, T = any>(options: T extends Array<U> | ReadonlyArray<U> ? T : never): (value: unknown) => value is U {
-  return function isOneOfProduct(value: unknown): value is U {
-    return options.includes(value as U)
-  }
+export function isOneOfFactory<U, T = any>(
+	members: T extends Array<U> | ReadonlyArray<U> ? T : never,
+): (value: unknown) => value is U {
+	return function isOneOfFactoryProduct(value: unknown): value is U {
+		return members.includes(value as U)
+	}
+}
+export function satisfiesOneOfFactory<T extends Array<Predicate<any, any>>>(
+	...predicates: T
+): Predicate<unknown, UnionOfPredicateTypes<T>> {
+	return (value: any): value is UnionOfPredicateTypes<T> => {
+		return predicates.some(predicate => predicate(value))
+	}
+}
+export function isArrayOfMembersSatisfyingFactory<T>(
+	predicate: (value: unknown) => value is T,
+): (value: unknown) => value is Array<T> {
+	return function isArrayOfMembersSatisfyingProduct(value: unknown): value is Array<T> {
+		return Array.isArray(value) && value.every(predicate)
+	}
 }
 export function isHTMLElement(value: unknown): value is HTMLElement {
   return value instanceof HTMLElement

package/src/assert-types/assert.ts

@@ -1,4 +1,5 @@
 import { AssertionError } from './AssertionError'
+import { Predicate } from './types'
 
 export function assert<
 	In,
@@ -6,7 +7,7 @@ export function assert<
 >(
 	that: string | undefined = undefined,
 	value: In,
-	predicate: (value: In) => value is Out,
+	predicate: Predicate<In, Out>, // (value: In) => value is Out,
 ): asserts value is Out {
 	if (!predicate(value)) {
 		throw new AssertionError(value, that)

package/src/assert-types/index.ts

@@ -2,3 +2,4 @@ export * from './AssertionError'
 export * from './Predicates'
 export * from './assert'
 export * from './assertNever'
+export * from './types'

package/src/assert-types/types.ts

@@ -0,0 +1,5 @@
+import { Opaque } from 'type-fest'
+
+export type Predicate<T, U extends T> = (value: T) => value is U
+export type UnionOfPredicateTypes<T> = T extends Array<(value: any) => value is infer U> ? U : never
+export type SlugString = Opaque<string, 'SlugString'>

package/src/class-name/colorSchemeClassName.ts

@@ -0,0 +1,46 @@
+import { KebabCase } from 'type-fest'
+import { COLOR_SCHEME_CLASS_NAME_REG_EXP } from './constants'
+import { ColorSchemeClassName } from './types'
+
+/**
+ * Returns a string with a color scheme class name, prefixed with `scheme-`
+ *
+ * @param scheme - Color scheme name
+ * @returns A color scheme class name
+ *
+ * @example
+ * ```tsx
+ * const colorScheme = colorSchemeClassName('system')
+ * //  ^ 'scheme-system'
+ *
+ * return (
+ * 	<div className={colorScheme}>
+ * 		<button className={controlsThemeClassName}>Click me</button>
+ * 	</div>
+ *
+ * // renders:
+ * // <div class="scheme-system">
+ * // 	<button class="scheme-system theme-default-controls theme-danger-controls:hover">Click me</button>
+ * // </div>
+ * ```
+ */
+export function colorSchemeClassName<S extends KebabCase<string> = KebabCase<string>>(scheme: S): ColorSchemeClassName<S>;
+export function colorSchemeClassName<S extends KebabCase<string> = KebabCase<string>>(scheme: null | undefined): undefined;
+export function colorSchemeClassName<S extends KebabCase<string> = KebabCase<string>>(scheme: S | null | undefined): ColorSchemeClassName<S> | undefined;
+export function colorSchemeClassName<S extends KebabCase<string> = KebabCase<string>>(scheme: S | null | undefined): ColorSchemeClassName<S> | undefined {
+	if (typeof scheme === 'string') {
+		return `scheme-${scheme}`
+	} else {
+		return undefined
+	}
+}
+
+/**
+ * Tests if a string is a color scheme CSS class
+ * @param value - String to test
+ * @returns `true` if the string is a color scheme CSS class
+ * @internal
+ */
+export function isColorSchemeClassName<T extends string>(value: string): value is ColorSchemeClassName<T> {
+	return COLOR_SCHEME_CLASS_NAME_REG_EXP.test(value)
+}

package/src/class-name/constants.ts

@@ -0,0 +1,43 @@
+/**
+ * RegExp that matches theme class names
+ *
+ * @internal
+ *
+ * If theme is `default` then it will match:
+ *
+ * - theme-default
+ * - theme-default:hover
+ * - theme-default:active
+ * - theme-default:focus
+ * - theme-default-content
+ * - theme-default-content:hover
+ * - theme-default-content:active
+ * - theme-default-content:focus
+ * - theme-default-controls
+ * - theme-default-controls:hover
+ * - theme-default-controls:active
+ * - theme-default-controls:focus
+ *
+ * If theme is `brand-color` then it will match:
+ *
+ * - theme-brand-color
+ * - theme-brand-color:hover
+ * - theme-brand-color:active
+ * - theme-brand-color:focus
+ * - theme-brand-color-content
+ * - theme-brand-color-content:hover
+ * - theme-brand-color-content:active
+ * - theme-brand-color-content:focus
+ * - theme-brand-color-controls
+ * - theme-brand-color-controls:hover
+ * - theme-brand-color-controls:active
+ * - theme-brand-color-controls:focus
+ */
+
+export const THEME_CLASS_NAME_REG_EXP = /^theme-(?<name>[\w-]+?)(?:-(?<scope>content|controls))?(?<state>:[\w]+(?:[\w-]+)?)?$/
+
+/**
+ * Regular expression for testing if a string is a color scheme CSS class
+ * @internal
+ */
+export const COLOR_SCHEME_CLASS_NAME_REG_EXP = /^scheme-(?<colorScheme>[a-z0-9]|[a-z0-9]+[a-z-]+[a-z])$/

package/src/class-name/filterThemedClassName.ts

@@ -0,0 +1,86 @@
+import { KebabCase } from 'type-fest'
+import { isColorSchemeClassName } from './colorSchemeClassName'
+import { THEME_CLASS_NAME_REG_EXP } from './constants'
+import { flatClassNameList } from './flatClassNameList'
+import { contentThemeClassName, controlsThemeClassName } from './themeClassName'
+import { ColorSchemeClassName, NestedClassName } from './types'
+
+export type ThemeConfig = { content: string | undefined, controls: string | undefined }
+
+export function filterThemedClassName(
+	nestedClassName: NestedClassName,
+	defaultColorSchemeContext: ColorSchemeClassName,
+) {
+	const theme: ThemeConfig = { content: undefined, controls: undefined }
+	const stateThemes: Record<string, ThemeConfig> = {}
+	let colorScheme: ColorSchemeClassName | undefined = undefined
+
+	const flatClassName = flatClassNameList(nestedClassName).map(className => {
+		if (isColorSchemeClassName(className)) {
+			colorScheme = className
+			return undefined
+		}
+
+		const match = className.match(THEME_CLASS_NAME_REG_EXP)
+
+		if (match) {
+			const name = match.groups!.name as KebabCase<string>
+			const scope = match.groups!.scope as KebabCase<string>
+			const state = match.groups!.state as `:${KebabCase<string>}`
+
+			if (state) {
+				stateThemes[state] = stateThemes[state] ?? { content: undefined, controls: undefined }
+
+				if (!scope) {
+					stateThemes[state].content = name
+					stateThemes[state].controls = name
+				} else if (scope === 'content') {
+					stateThemes[state].content = name
+				} else if (scope === 'controls') {
+					stateThemes[state].controls = name
+				} else {
+					throw new Error(`Unknown theme scope: ${scope}`)
+				}
+			} else {
+				if (!scope) {
+					theme.content = name
+					theme.controls = name
+				} else if (scope === 'content') {
+					theme.content = name
+				} else if (scope === 'controls') {
+					theme.controls = name
+				} else {
+					throw new Error(`Unknown theme scope: ${scope}`)
+				}
+			}
+
+			return undefined
+		} else {
+			return className
+		}
+	}).filter(Boolean) as string[]
+
+	const themeClassNames: (string | undefined)[] = []
+
+	const content = contentThemeClassName(theme.content)
+	const controls = controlsThemeClassName(theme.controls)
+
+	themeClassNames.push(content, controls)
+
+	for (const state in stateThemes) {
+		const { content, controls } = stateThemes[state]
+
+		const contentClassName = contentThemeClassName(content, state as `:${KebabCase<string>}`)
+		const controlsClassName = controlsThemeClassName(controls, state as `:${KebabCase<string>}`)
+
+		themeClassNames.push(contentClassName, controlsClassName)
+	}
+
+	const flatThemedClassName = flatClassNameList(themeClassNames)
+
+	if (flatThemedClassName.length > 0 || colorScheme) {
+		return [colorScheme ?? defaultColorSchemeContext, ...flatThemedClassName, ...flatClassName]
+	} else {
+		return flatClassName
+	}
+}

package/src/class-name/{Internal/flatClassNameList.ts → flatClassNameList.ts}

@@ -1,5 +1,5 @@
-import { assertNever } from '../../assert-types'
-import { NestedClassName } from '../Types'
+import { assertNever } from '../assert-types'
+import { NestedClassName } from './types'
 
 export function flatClassNameList(className: NestedClassName): string[] {
 	if (!className) {

package/src/class-name/index.ts

@@ -1,6 +1,9 @@
-export * from './GlobalClassNamePrefixContext'
-export * from './Types'
+export * from './colorSchemeClassName'
+export * from './constants'
+export * from './deduplicateClassName'
+export * from './filterThemedClassName'
+export * from './flatClassNameList'
 export * from './listClassName'
 export * from './stateClassName'
-export * from './useClassName'
-export * from './useClassNameFactory'
+export * from './themeClassName'
+export * from './types'

package/src/class-name/listClassName.ts

@@ -1,5 +1,5 @@
-import { deduplicateClassName } from './Internal/deduplicateClassName'
-import { flatClassNameList } from './Internal/flatClassNameList'
+import { deduplicateClassName } from './deduplicateClassName'
+import { flatClassNameList } from './flatClassNameList'
 
 /**
  * Combines a list of class names into a single string, even nested

package/src/class-name/stateClassName.ts

@@ -1,9 +1,9 @@
-import { ClassNameStateMap } from './Types'
+import { toKebabCase } from '../string-utilities'
+import { ClassNameStateMap } from './types'
 
-const UPPER_CASE_REG_EXP = /([A-Z])/g
-
-function toKebabCase(value: string) {
-	return value.replace(UPPER_CASE_REG_EXP, '-$1').toLowerCase()
+export interface StateClassNameOptions {
+	glue?: string;
+	removeFalsy?: boolean;
 }
 
 /**
@@ -13,12 +13,17 @@ function toKebabCase(value: string) {
  * stateClassName({ foo: true, bar: false, baz: 1 }) // => 'foo baz-1'
  *
  * @param state - State map object with class names as keys and literals as values.
- * @param glue - Glue to use between the class name and the value, default is '-'. Set to '' to disable.
+ * @param options - Options object
+ * @param options.glue - Glue to use between the class name and the value, default is '-'. Set to '' to disable.
+ * @param options.removeFalsy - Whether to remove falsy class names, default is true.
  * @returns Combined class names as string
  */
-export function stateClassName(state: ClassNameStateMap | null = null, glue = '-'): string[] {
+export function stateClassName(
+	state: ClassNameStateMap | null = null,
+	{ glue = '-', removeFalsy = true }: StateClassNameOptions = {},
+): string[] {
 	const entries = Object.entries(state ?? []).map(
-		([className, value]) => value || value === 0
+		([className, value]) => value || value === 0 || !removeFalsy
 			? (value === true ? toKebabCase(className) : `${toKebabCase(className)}${glue}${value}`)
 			: '',
 	).filter(Boolean)

package/src/class-name/themeClassName.ts

@@ -0,0 +1,117 @@
+import { KebabCase } from 'type-fest'
+import { colorSchemeClassName } from './colorSchemeClassName'
+import { ThemeContentClassName, ThemeControlsClassName } from './types'
+
+/**
+ * Returns a string with a content theme class name, prefixed with `theme-` and suffixed with `-content`
+ *
+ * IMPORTANT: Make sure to use color scheme class in combination with theme class names.
+ *
+ * @param contentTheme - Theme name basis for content
+ * @param state - State of the theme starting with a ":", e.g. `":hover"`, `":focus"`, `":active"`, `":focus-visible"`
+ * @returns A content theme class name
+ *
+ * @see {@link controlsThemeClassName}
+ * @see {@link (colorSchemeClassName:3)}
+ *
+ * @example
+ * ```tsx
+ * const colorScheme = colorSchemeClassName('system')
+ * //  ^ 'scheme-system'
+ * const contentThemeClassName = contentThemeClassName('default')
+ * //  ^ 'theme-default-content:hover'
+ * const dangerOnMouseOverTheme = controlsThemeClassName('danger', ':hover')
+ * //  ^ 'theme-danger-controls:hover'
+ *
+ * return (
+ * 	<div className={`${colorScheme} ${contentThemeClassName}`}>
+ * 		<button className={`${colorScheme} ${dangerOnMouseOverTheme}`}>Delete</button>
+ * 	</div>
+ * )
+ * ```
+ */
+export function contentThemeClassName<
+	ContentTheme extends KebabCase<string> = KebabCase<string>,
+	State extends `:${KebabCase<string>}` | null | undefined = undefined,
+>(
+	theme: ContentTheme | null | undefined,
+	state?: State | null | undefined,
+) {
+	return theme ? `theme-${theme}-content${state ?? ''}` as ThemeContentClassName<ContentTheme, State> : undefined
+}
+
+/**
+ * Returns a string with a controls theme class name, prefixed with `theme-` and suffixed with `-controls`
+ *
+ * IMPORTANT: Make sure to use color scheme class in combination with theme class names.
+ *
+ * @param theme - Theme name basis for controls
+ * @param state - State of the theme starting with a ":", e.g. `":hover"`, `":focus"`, `":active"`, `":focus-visible"`
+ * @returns A controls theme class name
+ *
+ * @see {@link contentThemeClassName}
+ * @see {@link (colorSchemeClassName:3)}
+ *
+ * @example
+ * ```tsx
+ * const colorScheme = colorSchemeClassName('system')
+ * //  ^ 'scheme-system'
+ * const contentThemeClassName = contentThemeClassName('default')
+ * //  ^ 'theme-default-content:hover'
+ * const dangerOnMouseOverTheme = controlsThemeClassName('danger', ':hover')
+ * //  ^ 'theme-danger-controls:hover'
+ *
+ * return (
+ * 	<div className={`${colorScheme} ${contentThemeClassName}`}>
+ * 		<button className={`${colorScheme} ${dangerOnMouseOverTheme}`}>Delete</button>
+ * 	</div>
+ * )
+ * ```
+ */
+export function controlsThemeClassName<
+	ControlsTheme extends KebabCase<string> = KebabCase<string>,
+	State extends `:${KebabCase<string>}` | null | undefined = undefined,
+>(
+	theme: ControlsTheme | null | undefined,
+	state?: State | null | undefined,
+) {
+	return theme ? `theme-${theme}-controls${state ?? ''}` as ThemeControlsClassName<ControlsTheme, State> : undefined
+}
+
+/**
+ * Returns a tuple with a content theme class name and a controls theme class name, prefixed with `theme-` and suffixed with `-content` and `-controls` respectively
+ *
+ * IMPORTANT: Make sure to use color scheme class in combination with theme class names.
+ *
+ * @param theme - Theme name basis for content and controls
+ * @param state - State of the theme starting with a ":", e.g. `":hover"`, `":focus"`, `":active"`, `":focus-visible"`
+ * @returns A tuple with a content theme class name and a controls theme class name
+ *
+ * @see {@link contentThemeClassName}
+ * @see {@link controlsThemeClassName}
+ * @see {@link (colorSchemeClassName:3)}
+ *
+ * @example
+ * ```tsx
+ * const colorScheme = colorSchemeClassName('system')
+ * //  ^ 'scheme-system'
+ * const errorTheme = themeClassName('danger').join(' ')
+ * //  ^ 'theme-danger-content theme-danger-controls'
+ *
+ * return (
+ * 	<div className={`${colorScheme} ${errorTheme}`}>File not found</div>
+ * )
+ * ```
+ */
+export function themeClassName<
+	Theme extends KebabCase<string> = KebabCase<string>,
+	State extends `:${KebabCase<string>}` | null | undefined = undefined,
+>(
+		theme: Theme | null | undefined,
+		state?: State | null | undefined,
+) {
+	return [
+		contentThemeClassName(theme, state),
+		controlsThemeClassName(theme, state),
+	] as const
+}

package/src/class-name/types.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react'
+import { KebabCase } from 'type-fest'
+
+export type NestedClassName = string | false | null | undefined | (string | false | null | undefined)[] | NestedClassName[]
+export type ClassNameStateMap = { [key: string]: string | number | boolean | null | undefined }
+
+export type ComponentClassNameProps = PropsWithChildren<{
+	className?: NestedClassName;
+	componentClassName?: string | string[];
+}>
+
+export type ColorSchemeClassName<T extends KebabCase<string> = KebabCase<string>> = `scheme-${T}`
+export type ThemeContentClassName<T extends KebabCase<string> = KebabCase<string>, S extends `:${KebabCase<string>}` | null | undefined = undefined> = S extends string
+	? `theme-${T}-content${S}`
+	: `theme-${T}-content`
+export type ThemeControlsClassName<T extends KebabCase<string> = KebabCase<string>, S extends `:${KebabCase<string>}` | null | undefined = undefined> = S extends string
+	? `theme-${T}-controls${S}`
+	: `theme-${T}-controls`

package/src/deprecate/currentOrDeprecated.ts

@@ -0,0 +1,51 @@
+/**
+ * Resolves current or deprecated value. If both are defined, it will throw an error in development mode.
+ *
+ * @internal
+ *
+ * Errors are thrown only in development mode. In production mode, the deprecated value is returned.
+ *
+ * @param current - Current value that replaces deprecated value
+ * @param deprecated - Deprecated value that will be removed in the next release
+ * @param shouldThrow - Whether to throw an error if both current and deprecated are defined
+ * @returns Deprecated value if it is defined, otherwise current value
+ * @throws Error if both current and deprecated are defined
+ *
+ * @example
+ * ```ts
+ * const current = 'current'
+ * const deprecated = 'deprecated'
+ *
+ * const value = currentOrDeprecated(current, deprecated)
+ *
+ * console.log(value) // 'deprecated'
+ * ```
+ *
+ * @example
+ * ```ts
+ * const current = 'current'
+ * const deprecated = undefined
+ *
+ * const value = currentOrDeprecated(current, deprecated)
+ *
+ * console.log(value) // 'current'
+ * ```
+ */
+export function currentOrDeprecated<R, D>(current: R, deprecated: D, shouldThrow: boolean = false): R | D {
+	if (deprecated !== undefined) {
+		if (current !== undefined && import.meta.env.DEV) {
+			console.error('Current value:', current)
+			console.error('Deprecated value:', deprecated)
+
+			if (shouldThrow) {
+				throw new Error(`You are using deprecated together with current value which is mutually exclusive. Use only one of them.`)
+			} else {
+				console.error(`You are using deprecated together with current value which is mutually exclusive. Use only one of them.`)
+			}
+		}
+
+		return deprecated
+	} else {
+		return current
+	}
+}

package/src/deprecate/deprecate.ts

@@ -0,0 +1,31 @@
+import { SemverString } from './types'
+
+/**
+ * Logs a deprecation warning if the assertion is `false`.
+ * @internal
+ *
+ * @param removal - Version when the deprecated feature will be removed
+ * @param assertion - Condition that must be true to avoid the deprecation warning
+ * @param deprecated - Name of the deprecated feature
+ * @param replacement - Name of the feature that replaces the deprecated feature
+ *
+ * @example
+ * ```ts
+ * const { visible } = props
+ * deprecate(visible !== 'default', '1.3.0', '"default"', '"hidden"')
+ * // Logs: Use of "default" is deprecated and might be removed in the next release. Use "hidden" instead.
+ * ```
+ */
+export function deprecate(removal: SemverString, assertion: boolean, deprecated: string, replacement: string): void {
+	if (assertion === false) {
+		if (import.meta.env.DEV) {
+			const shouldThrow = Boolean(import.meta.env.VITE_CONTEMBER_ADMIN_STRICT_DEPRECATIONS)
+
+			if (shouldThrow) {
+				throw new Error(`Support for ${deprecated} was planned to be removed in the ${removal} release. Replace it with ${replacement} instead.`)
+			} else {
+				console.warn(`Use of ${deprecated} is deprecated and might be removed in the next release. Use ${replacement} instead.`)
+			}
+		}
+	}
+}

package/src/deprecate/index.ts

@@ -0,0 +1,3 @@
+export * from './currentOrDeprecated'
+export * from './deprecate'
+export * from './types'

package/src/deprecate/types.ts

@@ -0,0 +1,2 @@
+
+export type SemverString = `${number}.${number}.${number}` | `v${number}.${number}.${number}`

package/src/dom/index.ts

@@ -3,4 +3,5 @@ export * from './getMatchingParentElement'
 export * from './getSizeFromResizeObserverEntry'
 export * from './isScrollable'
 export * from './parseTransformMatrix'
+export * from './stateDataAttributes'
 export * from './svgSizeProps'

package/src/dom/stateDataAttributes.ts

@@ -0,0 +1,8 @@
+import { toKebabCase } from '../string-utilities'
+import { dataAttribute } from './dataAttribute'
+
+export function stateDataAttributes(state: Record<string, unknown>) {
+	return Object.fromEntries(Object.entries(state).map(
+		([key, value]) => [`data-${toKebabCase(key).toLowerCase()}`, dataAttribute(value)],
+	))
+}

package/src/dom/svgSizeProps.ts

@@ -1,5 +1,3 @@
-import { SVGProps } from 'react'
-
 export interface SvgSizeProps {
 	width: number;
 	height: number;

package/src/functional/index.ts

@@ -1,2 +1,3 @@
+export * from './omit'
 export * from './pick'
 export * from './setHasOneOf'

package/src/functional/omit.ts

@@ -0,0 +1,13 @@
+export function omit<T extends Object, K extends keyof T>(object: T, properties: ReadonlyArray<K>, strict: boolean = false): Omit<T, K> {
+  const next: Partial<T> = { ...object }
+
+  for (let key of properties) {
+    if (key in object) {
+      delete next[key]
+    } else if (strict) {
+      throw new Error(`Key "${String(key)}" does not exist in object ${JSON.stringify(object)}`)
+    }
+  }
+
+  return next as Omit<T, K>
+}

package/src/functional/pick.ts

@@ -1,4 +1,4 @@
-export function pick<T extends Object, K extends keyof T>(object: T, properties: K[]): Pick<T, K> {
+export function pick<T extends Object, K extends keyof T>(object: T, properties: ReadonlyArray<K>): Pick<T, K> {
 	const next: Partial<Pick<T, K>> = {}
 
 	for (let key of properties) {

package/src/index.ts

@@ -1,7 +1,8 @@
 export * from './assert-types'
 export * from './class-name'
 export * from './css-utilities'
+export * from './deprecate'
 export * from './dom'
 export * from './functional'
 export * from './string-utilities'
-export * from './typescript-utilities'
+export * from './types'

package/src/string-utilities/index.ts

@@ -1,2 +1,3 @@
 export * from './capitalize'
+export * from './kebabCase'
 export * from './trimString'

package/src/string-utilities/kebabCase.ts

@@ -0,0 +1,5 @@
+const UPPER_CASE_REG_EXP = /([A-Z])/g
+
+export function toKebabCase(value: string) {
+	return value.replace(UPPER_CASE_REG_EXP, '-$1').toLowerCase()
+}

package/src/types/NonOptional.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns new type where all the properties are required
+ * and previously optional properties will accept undefined.
+ */
+export type NonOptional<T> = {
+	[P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : (T[P] | undefined);
+}

package/src/types/Primitive.ts

@@ -0,0 +1 @@
+export type Primitive = string | number | boolean | null | undefined