@febkosq8/arc 0.3.0 → 0.7.0

package/components/button.tsx

@@ -1,42 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, cx, VariantProps } from "@rinzai/zen";
-
-const buttonVariants = cva(
-	"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 truncate",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-				outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: " border text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	asChild?: boolean;
-}
-
-const Button =({ className, variant, size, asChild = false, ...props }:ButtonProps) => {
-		const Comp = asChild ? Slot : "button";
-		return <Comp className={cx(buttonVariants({ variant, size, className }))} {...props} />;
-	};
-
-export default Button 
-

package/components/card.tsx

@@ -1,32 +0,0 @@
-import { cx } from "@rinzai/zen";
-interface CardProps extends React.ComponentPropsWithoutRef<"div"> {}
-const Card = (props: CardProps) => {
-	const { className, ...rest } = props;
-	return <div className={cx("card p-4 rounded-lg border shadow-sm", className)} {...rest} />;
-};
-
-const Header = (props: CardProps) => {
-	const { className, ...rest } = props;
-	return <h2 className={cx("card-header flex flex-col typography-heading-2", className)} {...rest} />;
-};
-const Content = (props: CardProps) => {
-	const { className, ...rest } = props;
-	return (
-		<div
-			className={cx("card-content typography-heading-4 justify-between whitespace-pre-wrap py-2", className)}
-			{...rest}
-		/>
-	);
-};
-const Footer = (props: CardProps) => {
-	const { className, ...rest } = props;
-	return (
-		<div className="border-t flex justify-start items-center pt-2">
-			<h2 className={cx("card-footer text-2xl", className)} {...rest} />
-		</div>
-	);
-};
-Card.Header = Header;
-Card.Content = Content;
-Card.Footer = Footer;
-export default Card;

package/components/index.ts

@@ -1,8 +0,0 @@
-export {default as Button} from './button';
-export {default as Input} from './input';
-export {default as Card} from './card';
-export {default as Menu} from './menu';
-export {default as Pill} from './pill';
-export {default as Switch} from './switch';
-export {default as TextArea} from './text-area';
-export {default as ThemeSwitcher} from './theme-switcher';

package/components/input.tsx

@@ -1,21 +0,0 @@
-import { cx } from "@rinzai/zen";
-import { ComponentPropsWithoutRef } from "react";
-
-const Input = ({ className, ...rest }: ComponentPropsWithoutRef<"input">) => {
-	return (
-		<input
-			{...rest}
-			autoComplete="off"
-			className={cx(
-				className,
-				"h-10",
-				"placeholder:gray-800 rounded border border-border bg-input pl-5 text-foreground",
-				"focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring",
-				"disabled:cursor-not-allowed disabled:border-muted",
-				"whitespace-pre-wrap",
-			)}
-		/>
-	);
-};
-
-export default Input;

package/components/menu.tsx

@@ -1,80 +0,0 @@
-import Pill from "@feb/pill";
-import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as DropdownBaseMenu from "@radix-ui/react-dropdown-menu";
-import { cx } from "@rinzai/zen";
-import { ReactNode } from "react";
-
-interface MenuProps {
-	className?: string;
-	active?: boolean;
-	buttonText: string | ReactNode;
-	children: ReactNode;
-}
-
-interface MenuComponent extends React.FC<MenuProps> {
-	Item: typeof DropdownBaseMenu.Item;
-}
-
-const MenuComponent = ({ className, active, buttonText, children }:MenuProps) => {
-	return (
-		<DropdownBaseMenu.Root>
-			<DropdownBaseMenu.Trigger asChild>
-				<Pill active={active} className={cx("w-fit", className)}>
-					{buttonText}
-					<FontAwesomeIcon icon={faChevronDown} className="-mr-1 ml-2 h-4 w-4" aria-hidden="true" />
-				</Pill>
-			</DropdownBaseMenu.Trigger>
-			<DropdownBaseMenu.Portal>
-				<DropdownBaseMenu.Content
-					loop={true}
-					sideOffset={2}
-					className="w-fit origin-top-right divide-y border-2 border-border divide-border rounded-md bg-background shadow-lg ring-1 ring-background ring-opacity-5 focus:outline-none focus-visible:ring-0"
-				>
-					{children}
-				</DropdownBaseMenu.Content>
-			</DropdownBaseMenu.Portal>
-		</DropdownBaseMenu.Root>
-	);
-};
-
-const Menu: MenuComponent = Object.assign(MenuComponent, {
-	Item: DropdownBaseMenu.Item,
-});
-
-interface MenuSubProps {
-	active?: boolean;
-	buttonText: string;
-	children: ReactNode;
-}
-
-const MenuSub = ({ active, buttonText, children }: MenuSubProps) => {
-	return (
-		<DropdownBaseMenu.Sub>
-			<DropdownBaseMenu.SubTrigger asChild>
-				<Pill active={active} className="flex w-full items-center justify-between whitespace-nowrap">
-					{buttonText}
-					<FontAwesomeIcon icon={faChevronRight} className="-mr-1 ml-2 h-4 w-4" aria-hidden="true" />
-				</Pill>
-			</DropdownBaseMenu.SubTrigger>
-			<DropdownBaseMenu.Portal>
-				<DropdownBaseMenu.SubContent
-					loop={true}
-					sideOffset={2}
-					arrowPadding={2}
-					className="w-fit origin-top-right divide-y border-2 border-gray-600 divide-gray-100 rounded-md bg-neutral-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-				>
-					{children}
-					<DropdownBaseMenu.Arrow className="fill-black dark:fill-stone-200 size-2" />
-				</DropdownBaseMenu.SubContent>
-			</DropdownBaseMenu.Portal>
-		</DropdownBaseMenu.Sub>
-	);
-};
-
-Object.assign(Menu, {
-	Item: DropdownBaseMenu.Item,
-	Sub: MenuSub,
-});
-
-export default Menu;

package/components/pill.tsx

@@ -1,20 +0,0 @@
-import { cx } from "@rinzai/zen";
-
-interface PillProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-	active?: boolean;
-}
-
-const Pill = (({ active, className, ...props }:PillProps) => {
-	return (
-		<button
-			className={cx(
-				`rounded-md p-3 text-xl   font-bold transition inline-flex w-full items-center justify-center text-foreground hover:bg-accent hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-opacity-75  whitespace-nowrap hover:ring-0 hover:outline-none `,
-				active ? "text-primary" : "text-muted-foreground",
-				className,
-			)}
-			{...props}
-		/>
-	);
-});
-
-export default Pill;

package/components/switch.tsx

@@ -1,82 +0,0 @@
-import { faCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Switch as SwitchBase } from "@headlessui/react";
-import { cva, cx } from "@rinzai/zen";
-import { JSX } from "react";
-interface SwitchProps {
-	checked?: boolean;
-	onChange?: (checked: boolean) => void;
-	disabled?: boolean;
-	variant?: "primary" | "danger" | "success";
-	children?: (checked: boolean) => JSX.Element;
-}
-const Switch = ({
-	checked = false,
-	onChange,
-	disabled = false,
-	variant = "primary",
-	children,
-	...rest
-}: SwitchProps) => {
-	return (
-		<SwitchBase
-			checked={checked}
-			disabled={disabled}
-			onChange={onChange}
-			className={SwitchVariants({ variant, checked, disabled })}
-			{...rest}
-		>
-			{children ? (
-				children(checked)
-			) : (
-				<div className="relative w-full h-full">
-					<FontAwesomeIcon
-						icon={faCircle}
-						className={cx(
-							`absolute top-1/2 transform -translate-y-1/2 `,
-							checked ? "left-6 text-blue-600" : "left-1 text-blue-600",
-							disabled && "text-gray-400 dark:text-gray-200",
-							`inline-block h-4 w-4 rounded-full border border-blue-500 [transition:_all_0.5s_cubic-bezier(1,0,0,1)]`,
-						)}
-					/>
-				</div>
-			)}
-		</SwitchBase>
-	);
-};
-const SwitchVariants = cva("relative inline-flex h-6 w-11 items-center rounded-full", {
-	variants: {
-		variant: {
-			danger: "",
-			success: "",
-			primary: "",
-		},
-		checked: {
-			true: "bg-gray-400 dark:bg-gray-200",
-			false: "bg-gray-400 dark:bg-gray-200",
-		},
-		disabled: {
-			true: "dark:bg-gray-600 ring-2 ring-slate-900 dark:ring-slate-400",
-			false: "",
-		},
-	},
-	compoundVariants: [
-		{
-			variant: "danger",
-			checked: true,
-			className: "bg-red-600",
-		},
-		{
-			variant: "primary",
-			checked: true,
-			className: "bg-blue-600",
-		},
-		{
-			variant: "success",
-			checked: true,
-			className: "bg-green-600",
-		},
-	],
-});
-export default Switch
-

package/components/text-area.tsx

@@ -1,21 +0,0 @@
-import { cx } from "@rinzai/zen";
-import { ComponentPropsWithoutRef } from "react";
-
-const TextArea = ({ className, ...rest }: ComponentPropsWithoutRef<"textarea">) => {
-	return (
-		<textarea
-			{...rest}
-			autoComplete="off"
-			className={cx(
-				className,
-				"min-h-[200px] max-h-96 !overflow-auto",
-				"placeholder:gray-800 rounded border border-border bg-input p-2 text-foreground",
-				"focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring",
-				"disabled:cursor-not-allowed disabled:border-muted",
-				"whitespace-pre-wrap",
-			)}
-		/>
-	);
-};
-
-export default TextArea;

package/components/theme-switcher.tsx

@@ -1,81 +0,0 @@
-import { faLaptop, faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Menu  from "@feb/menu";
-import Pill from "@feb/pill";
-import { useEffect, useState } from "react";
-type Color = "light" | "dark" | "system";
-
-export default function ThemeSwitcher() {
-	const colorModeIcon = { light: faSun, dark: faMoon, system: faLaptop };
-	const localStorageString = `theme`;
-	useEffect(() => {
-		if (typeof window !== "undefined" && !(localStorageString in localStorage)) {
-			localStorage.setItem(localStorageString, "system");
-		}
-	}, []);
-	const [colorMode, setColorMode] = useState<Color>(
-		typeof window !== "undefined" ? ((localStorage.getItem(localStorageString) as Color) ?? "system") : "system",
-	);
-	useEffect(() => {
-		if (["light", "dark"].includes(colorMode)) {
-			if (colorMode === "dark") {
-				document.documentElement.classList.add("dark");
-				setColorMode("dark");
-			} else if (colorMode === "light") {
-				document.documentElement.classList.remove("dark");
-				setColorMode("light");
-			}
-			localStorage.setItem(localStorageString, colorMode);
-		} else {
-			const isSystemThemeDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-			if (isSystemThemeDark) {
-				document.documentElement.classList.add("dark");
-			} else {
-				document.documentElement.classList.remove("dark");
-			}
-			localStorage.setItem(localStorageString, "system");
-		}
-	}, [colorMode]);
-	return (
-		<Menu buttonText={<FontAwesomeIcon icon={colorModeIcon[colorMode] ?? faLaptop} />}>
-			<>
-				<Menu.Item className="focus-visible:outline-none">
-					<Pill
-						active={colorMode === "system"}
-						title="System Theme"
-						onClick={() => {
-							setColorMode("system");
-						}}
-						className="flex w-full whitespace-nowrap p-6 rounded-t-sm rounded-b-none"
-					>
-						<FontAwesomeIcon icon={faLaptop} className={"size-4"} />
-					</Pill>
-				</Menu.Item>
-				<Menu.Item className="focus-visible:outline-none">
-					<Pill
-						active={colorMode === "light"}
-						title="Light Theme"
-						onClick={() => {
-							setColorMode("light");
-						}}
-						className="flex w-full whitespace-nowrap p-6 rounded-none"
-					>
-						<FontAwesomeIcon icon={faSun} className={"size-4"} />
-					</Pill>
-				</Menu.Item>
-				<Menu.Item className="focus-visible:outline-none">
-					<Pill
-						active={colorMode === "dark"}
-						title="Dark Theme"
-						onClick={() => {
-							setColorMode("dark");
-						}}
-						className="flex w-full whitespace-nowrap p-6 rounded-b-sm rounded-t-none"
-					>
-						<FontAwesomeIcon icon={faMoon} className={"size-4"} />
-					</Pill>
-				</Menu.Item>
-			</>
-		</Menu>
-	);
-}

package/eslint.config.mjs

@@ -1,36 +0,0 @@
-import eslint from '@eslint/js';
-import globals from 'globals';
-import tseslint from 'typescript-eslint';
-export default tseslint.config(
-    {
-        ignores: ['**/*.js', '**/*.d.ts', 'dist/*'],
-    },
-    eslint.configs.recommended,
-    ...tseslint.configs.recommendedTypeChecked,
-    {
-        languageOptions: {
-            parserOptions: {
-                project: ['tsconfig.json'],
-                projectService: true,
-            },
-            globals: {
-                ...globals.browser,
-            },
-        },
-        rules: {
-            '@typescript-eslint/no-unused-vars': [
-                'error',
-                {
-                    argsIgnorePattern: '^_',
-                },
-            ],
-            '@typescript-eslint/no-empty-object-type': 'off',
-            '@typescript-eslint/no-misused-promises': [
-                'error',
-                {
-                    checksVoidReturn: false,
-                },
-            ],
-        },
-    },
-);

package/index.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en" className="h-[stretch]">
-	<head>
-		<meta charset="UTF-8" />
-	</head>
-	<body>
-		<div id="root">
-			<script type="module" src="/src/index.ts"></script>
-		</div>
-	</body>
-</html>

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-    "$schema": "https://json.schemastore.org/tsconfig",
-    "compilerOptions": {
-		"jsx": "react-jsx",
-        "target": "ESNext",
-        "lib": ["ESNext", "DOM"],
-        "skipLibCheck": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "noFallthroughCasesInSwitch": true,
-        "module": "ESNext",
-        "moduleResolution": "Bundler",
-        "moduleDetection": "force",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        // "verbatimModuleSyntax": true,
-        "baseUrl": ".",
-        "paths": {
-            "@feb/*": ["components/*"]
-        }
-    },
-    "allowDefaultProject": true,
-    "exclude": ["node_modules", "dist", "demo"]
-}

package/vite.config.ts

@@ -1,37 +0,0 @@
-import react from '@vitejs/plugin-react-swc';
-import { resolve } from 'node:path';
-import tailwindcss from 'tailwindcss';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import tsConfigPaths from 'vite-tsconfig-paths';
-import config from './package.json' with {type:"json"};
-export default defineConfig({
-    plugins: [
-        react(),
-        tsConfigPaths(),
-        dts({
-            include: ['components/'],
-        }),
-    ],
-    css: {
-        postcss: {
-            plugins: [tailwindcss],
-        },
-    },
-
-    build: {
-        lib: {
-            entry: resolve('components', 'index.ts'),
-            formats: ['es'],
-        },
-
-        rollupOptions: {
-            external: [...Object.keys(config.peerDependencies)],
-            output: {
-                globals: {
-                    react: 'React',
-                },
-            },
-        },
-    },
-});