@k8ordo/ui 1.0.0

package/dist/components/form/text-field/text-field.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useFormStatus } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/form/text-field/text-field.tsx
+const TextField = ({ invalid = false, readOnly, ref, type = "text", ...rest }) => {
+	const { pending } = useFormStatus();
+	return /* @__PURE__ */ jsx("input", {
+		"aria-invalid": invalid,
+		className: cn("rounded-xl border border-border-base bg-bg-base px-3 py-2 inline-full", "aria-invalid:border-border-error", "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute hover:disabled:bg-bg-mute", "read-only:cursor-not-allowed read-only:bg-bg-subtle", FOCUS_RING),
+		readOnly: pending || readOnly,
+		ref,
+		type,
+		...rest
+	});
+};
+//#endregion
+export { TextField };

package/dist/components/form/textarea/index.d.mts

@@ -0,0 +1,2 @@
+import { Textarea } from "./textarea.mjs";
+export { Textarea };

package/dist/components/form/textarea/index.mjs

@@ -0,0 +1,2 @@
+import { Textarea } from "./textarea.mjs";
+export { Textarea };

package/dist/components/form/textarea/textarea.d.mts

@@ -0,0 +1,11 @@
+import { FC, Ref, TextareaHTMLAttributes } from "react";
+//#region src/components/form/textarea/textarea.d.ts
+type Props = {
+  invalid?: boolean;
+  fullHeight?: boolean;
+  autoResize?: boolean;
+  ref?: Ref<HTMLTextAreaElement>;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'>;
+declare const Textarea: FC<Props>;
+//#endregion
+export { Textarea };

package/dist/components/form/textarea/textarea.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { useEffect, useMemo, useRef } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/form/textarea/textarea.tsx
+const resizeToContent = (el) => {
+	el.style.height = "auto";
+	el.style.height = `${el.scrollHeight.toString()}px`;
+};
+const Textarea = ({ invalid = false, fullHeight = false, autoResize = false, readOnly, ref, value, onInput, onKeyDown, ...rest }) => {
+	const innerRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(innerRef, ref), [ref]);
+	const { pending } = useFormStatus();
+	useEffect(() => {
+		if (innerRef.current && autoResize) resizeToContent(innerRef.current);
+	}, [autoResize, value]);
+	return /* @__PURE__ */ jsx("textarea", {
+		"aria-invalid": invalid,
+		className: cn("resize-none rounded-xl border border-border-base bg-bg-base px-3 py-2 inline-full", "aria-invalid:border-border-error", "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute hover:disabled:bg-bg-mute", "read-only:cursor-not-allowed read-only:bg-bg-subtle", FOCUS_RING, fullHeight && "h-full"),
+		onInput: (e) => {
+			if (autoResize) resizeToContent(e.currentTarget);
+			onInput?.(e);
+		},
+		onKeyDown: (e) => {
+			e.stopPropagation();
+			onKeyDown?.(e);
+		},
+		readOnly: pending || readOnly,
+		ref: mergedRef,
+		value,
+		...rest
+	});
+};
+//#endregion
+export { Textarea };

package/dist/components/icons/base.d.mts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from "react";
+//#region src/components/icons/base.d.ts
+type BaseIconProps = {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+};
+type IconRenderProps = {
+  className: string;
+  'aria-hidden': true;
+  focusable: 'false';
+};
+declare const BaseIcon: FC<BaseIconProps & {
+  renderItem: (arg: IconRenderProps) => ReactNode;
+}>;
+//#endregion
+export { BaseIcon, BaseIconProps, IconRenderProps };

package/dist/components/icons/base.mjs

@@ -0,0 +1,18 @@
+import { cn } from "../../helpers/cn.mjs";
+//#region src/components/icons/base.tsx
+const sizeClass = {
+	xs: "size-3",
+	sm: "size-4",
+	md: "size-6",
+	lg: "size-8",
+	xl: "size-10",
+	"2xl": "size-12",
+	"3xl": "size-14"
+};
+const BaseIcon = ({ size, renderItem }) => renderItem({
+	className: cn(sizeClass[size]),
+	"aria-hidden": true,
+	focusable: "false"
+});
+//#endregion
+export { BaseIcon };

package/dist/components/icons/browsers.d.mts

@@ -0,0 +1,9 @@
+import { BaseIconProps } from "./base.mjs";
+import { FC } from "react";
+//#region src/components/icons/browsers.d.ts
+declare const ChromeIcon: FC<Partial<BaseIconProps>>;
+declare const EdgeIcon: FC<Partial<BaseIconProps>>;
+declare const FirefoxIcon: FC<Partial<BaseIconProps>>;
+declare const SafariIcon: FC<Partial<BaseIconProps>>;
+//#endregion
+export { ChromeIcon, EdgeIcon, FirefoxIcon, SafariIcon };