underatom
Version:
Ambitious Component Library Builder. Choose your favorite Framework, Headless, CSS library and Design System.
571 lines (552 loc) • 888 kB
JavaScript
#!/usr/bin/env node
// src/commands/add.ts
import path11 from "path";
// src/commands/init.ts
import { promises as fs8 } from "fs";
import path9 from "path";
// src/preflights/preflight-init.ts
import path4 from "path";
// src/utils/errors.ts
var MISSING_DIR_OR_EMPTY_PROJECT = "1";
var MISSING_CONFIG = "3";
var TAILWIND_NOT_CONFIGURED = "5";
var IMPORT_ALIAS_MISSING = "6";
var UNSUPPORTED_FRAMEWORK = "7";
// src/utils/get-project-info.ts
import path3 from "path";
// src/utils/frameworks.ts
var FRAMEWORKS = {
"next-app": {
name: "next-app",
label: "Next.js",
links: {
installation: "",
tailwind: "https://tailwindcss.com/docs/guides/nextjs"
}
},
"next-pages": {
name: "next-pages",
label: "Next.js",
links: {
installation: "",
tailwind: "https://tailwindcss.com/docs/guides/nextjs"
}
},
remix: {
name: "remix",
label: "Remix",
links: {
installation: "",
tailwind: "https://tailwindcss.com/docs/guides/remix"
}
},
vite: {
name: "vite",
label: "Vite",
links: {
installation: "",
tailwind: "https://tailwindcss.com/docs/guides/vite"
}
},
astro: {
name: "astro",
label: "Astro",
links: {
installation: "",
tailwind: "https://tailwindcss.com/docs/guides/astro"
}
},
laravel: {
name: "laravel",
label: "Laravel",
links: {
installation: "",
tailwind: "https://tailwindcss.com/docs/guides/laravel"
}
},
gatsby: {
name: "gatsby",
label: "Gatsby",
links: {
installation: "",
tailwind: "https://tailwindcss.com/docs/guides/gatsby"
}
},
manual: {
name: "manual",
label: "Manual",
links: {
installation: "",
tailwind: "https://tailwindcss.com/docs/installation"
}
}
};
// src/utils/get-config.ts
import path from "path";
// src/utils/highlighter.ts
import { cyan, green, red, yellow } from "kleur/colors";
var highlighter = {
error: red,
warn: yellow,
info: cyan,
success: green
};
// src/utils/resolve-import.ts
import { createMatchPath } from "tsconfig-paths";
function resolveImport(importPath, config) {
return createMatchPath(config.absoluteBaseUrl, config.paths)(importPath, void 0, () => true, [".ts", ".tsx"]);
}
// src/utils/get-config.ts
import { cosmiconfig } from "cosmiconfig";
import { loadConfig } from "tsconfig-paths";
import { z } from "zod";
var DEFAULT_COMPONENTS = "@/components";
var DEFAULT_UTILS = "@/lib/utils";
var DEFAULT_TAILWIND_CSS = "app/globals.css";
var DEFAULT_TAILWIND_CONFIG = "tailwind.config.js";
var explorer = cosmiconfig("components", {
searchPlaces: ["components.json"]
});
var rawConfigSchema = z.object({
tailwind: z.object({
config: z.string(),
css: z.string()
}),
aliases: z.object({
components: z.string(),
utils: z.string()
// ui: z.string().optional(),
// lib: z.string().optional(),
// hooks: z.string().optional(),
})
}).strict();
var configSchema = rawConfigSchema.extend({
resolvedPaths: z.object({
cwd: z.string(),
tailwindConfig: z.string(),
tailwindCss: z.string(),
utils: z.string(),
components: z.string()
})
});
async function getConfig(cwd) {
const config = await getRawConfig(cwd);
if (!config) {
return null;
}
return resolveConfigPaths(cwd, config);
}
function resolveConfigPaths(cwd, config) {
const tsConfig = loadConfig(cwd);
if (tsConfig.resultType === "failed") {
throw new Error(`Failed to load tsconfig.json. ${tsConfig.message ?? ""}`.trim());
}
return configSchema.parse({
...config,
resolvedPaths: {
cwd,
tailwindConfig: path.resolve(cwd, config.tailwind.config),
tailwindCss: path.resolve(cwd, config.tailwind.css),
utils: resolveImport(config.aliases.utils, tsConfig),
components: resolveImport(config.aliases.components, tsConfig)
}
});
}
async function getRawConfig(cwd) {
try {
const configResult = await explorer.search(cwd);
if (!configResult) {
return null;
}
return rawConfigSchema.parse(configResult.config);
} catch (error) {
const componentPath = `${cwd}/components.json`;
throw new Error(`Invalid configuration found in ${highlighter.info(componentPath)}.`);
}
}
// src/utils/get-package-info.ts
import path2 from "path";
import fs from "fs-extra";
function getPackageInfo(cwd = "", shouldThrow = true) {
const packageJsonPath = path2.join(cwd, "package.json");
return fs.readJSONSync(packageJsonPath, {
throws: shouldThrow
});
}
// src/utils/get-project-info.ts
import fg from "fast-glob";
import fs2 from "fs-extra";
import { loadConfig as loadConfig2 } from "tsconfig-paths";
var PROJECT_SHARED_IGNORE = ["**/node_modules/**", ".next", "public", "dist", "build"];
async function getProjectInfo(cwd) {
const [configFiles, isSrcDir, isTsx, tailwindConfigFile, tailwindCssFile, aliasPrefix, packageJson] = await Promise.all([
fg.glob("**/{next,vite,astro}.config.*|gatsby-config.*|composer.json", {
cwd,
deep: 3,
ignore: PROJECT_SHARED_IGNORE
}),
fs2.pathExists(path3.resolve(cwd, "src")),
isTypeScriptProject(cwd),
getTailwindConfigFile(cwd),
getTailwindCssFile(cwd),
getTsConfigAliasPrefix(cwd),
getPackageInfo(cwd, false)
]);
const isUsingAppDir = await fs2.pathExists(path3.resolve(cwd, `${isSrcDir ? "src/" : ""}app`));
const type = {
framework: FRAMEWORKS.manual,
isSrcDir,
isRSC: false,
isTsx,
tailwindConfigFile: tailwindConfigFile ?? null,
tailwindCssFile,
aliasPrefix
};
if (configFiles.find((file) => file.startsWith("next.config."))?.length) {
type.framework = isUsingAppDir ? FRAMEWORKS["next-app"] : FRAMEWORKS["next-pages"];
type.isRSC = isUsingAppDir;
return type;
}
if (configFiles.find((file) => file.startsWith("astro.config."))?.length) {
type.framework = FRAMEWORKS.astro;
return type;
}
if (configFiles.find((file) => file.startsWith("gatsby-config."))?.length) {
type.framework = FRAMEWORKS.gatsby;
return type;
}
if (configFiles.find((file) => file.startsWith("composer.json"))?.length) {
type.framework = FRAMEWORKS.laravel;
return type;
}
if (Object.keys(packageJson?.dependencies ?? {}).find((dep) => dep.startsWith("@remix-run/"))) {
type.framework = FRAMEWORKS.remix;
return type;
}
if (configFiles.find((file) => file.startsWith("vite.config."))?.length) {
type.framework = FRAMEWORKS.vite;
return type;
}
return type;
}
async function getTailwindCssFile(cwd) {
const files = await fg.glob(["**/*.css", "**/*.scss"], {
cwd,
deep: 5,
ignore: PROJECT_SHARED_IGNORE
});
if (!files.length) {
return null;
}
for (const file of files) {
const contents = await fs2.readFile(path3.resolve(cwd, file), "utf8");
if (contents.includes("@tailwind base")) {
return file;
}
}
return null;
}
async function getTailwindConfigFile(cwd) {
const files = await fg.glob("tailwind.config.*", {
cwd,
deep: 3,
ignore: PROJECT_SHARED_IGNORE
});
if (!files.length) {
return null;
}
return files[0];
}
function getTsConfigAliasPrefix(cwd) {
const tsConfig = loadConfig2(cwd);
if (tsConfig?.resultType === "failed" || !tsConfig?.paths) {
return null;
}
for (const [alias, paths] of Object.entries(tsConfig.paths)) {
if (paths.includes("./*") || paths.includes("./src/*") || paths.includes("./app/*") || paths.includes("./resources/js/*")) {
return alias.at(0) ?? null;
}
}
return null;
}
async function isTypeScriptProject(cwd) {
const files = await fg.glob("tsconfig.*", {
cwd,
deep: 1,
ignore: PROJECT_SHARED_IGNORE
});
return files.length > 0;
}
async function getProjectConfig(cwd, defaultProjectInfo = null) {
const [existingConfig, projectInfo] = await Promise.all([
getConfig(cwd),
!defaultProjectInfo ? getProjectInfo(cwd) : Promise.resolve(defaultProjectInfo)
]);
if (existingConfig) {
return existingConfig;
}
if (!projectInfo?.tailwindConfigFile || !projectInfo.tailwindCssFile) {
return null;
}
const config = {
tailwind: {
config: projectInfo.tailwindConfigFile,
css: projectInfo.tailwindCssFile
},
aliases: {
components: `src/underatom/components`,
utils: `src/underatom/lib/utils`
}
};
return resolveConfigPaths(cwd, config);
}
// src/utils/logger.ts
var logger = {
error(...args) {
console.log(highlighter.error(args.join(" ")));
},
warn(...args) {
console.log(highlighter.warn(args.join(" ")));
},
info(...args) {
console.log(highlighter.info(args.join(" ")));
},
success(...args) {
console.log(highlighter.success(args.join(" ")));
},
log(...args) {
console.log(args.join(" "));
},
break() {
console.log("");
}
};
// src/utils/spinner.ts
import ora from "ora";
function spinner(text, options) {
return ora({
text,
isSilent: options?.silent
});
}
// src/preflights/preflight-init.ts
import fs3 from "fs-extra";
async function preFlightInit(options) {
const errors = {};
if (!fs3.existsSync(options.cwd) || !fs3.existsSync(path4.resolve(options.cwd, "package.json"))) {
errors[MISSING_DIR_OR_EMPTY_PROJECT] = true;
return {
errors,
projectInfo: null
};
}
const projectSpinner = spinner(`Preflight checks.`, {
silent: options.silent
}).start();
if (fs3.existsSync(path4.resolve(options.cwd, "components.json")) && !options.force) {
projectSpinner?.fail();
logger.break();
logger.error(
`A ${highlighter.info("components.json")} file already exists at ${highlighter.info(
options.cwd
)}.
To start over, remove the ${highlighter.info("components.json")} file and run ${highlighter.info(
"init"
)} again.`
);
logger.break();
process.exit(1);
}
projectSpinner?.succeed();
const frameworkSpinner = spinner(`Verifying framework.`, {
silent: options.silent
}).start();
const projectInfo = await getProjectInfo(options.cwd);
if (!projectInfo || projectInfo?.framework.name === "manual") {
errors[UNSUPPORTED_FRAMEWORK] = true;
frameworkSpinner?.fail();
logger.break();
if (projectInfo?.framework.links.installation) {
logger.error(
`We could not detect a supported framework at ${highlighter.info(options.cwd)}.
Visit ${highlighter.info(
projectInfo?.framework.links.installation
)} to manually configure your project.
Once configured, you can use the cli to add components.`
);
}
logger.break();
process.exit(1);
}
frameworkSpinner?.succeed(`Verifying framework. Found ${highlighter.info(projectInfo.framework.label)}.`);
const tailwindSpinner = spinner(`Validating Tailwind CSS.`, {
silent: options.silent
}).start();
if (!projectInfo?.tailwindConfigFile || !projectInfo?.tailwindCssFile) {
errors[TAILWIND_NOT_CONFIGURED] = true;
tailwindSpinner?.fail();
} else {
tailwindSpinner?.succeed();
}
if (Object.keys(errors).length > 0) {
if (errors[TAILWIND_NOT_CONFIGURED]) {
logger.break();
logger.error(`No Tailwind CSS configuration found at ${highlighter.info(options.cwd)}.`);
logger.error(`It is likely you do not have Tailwind CSS installed or have an invalid configuration.`);
logger.error(`Install Tailwind CSS then try again.`);
if (projectInfo?.framework.links.tailwind) {
logger.error(`Visit ${highlighter.info(projectInfo?.framework.links.tailwind)} to get started.`);
}
}
if (errors[IMPORT_ALIAS_MISSING]) {
logger.break();
logger.error(`No import alias found in your tsconfig.json file.`);
if (projectInfo?.framework.links.installation) {
logger.error(
`Visit ${highlighter.info(projectInfo?.framework.links.installation)} to learn how to set an import alias.`
);
}
}
logger.break();
process.exit(1);
}
return {
errors,
projectInfo
};
}
// src/utils/handle-error.ts
import { z as z2 } from "zod";
function handleError(error) {
logger.error(
`Something went wrong. Please check the error below for more details.`
);
logger.error(`If the problem persists, please open an issue on GitHub.`);
logger.error("");
if (typeof error === "string") {
logger.error(error);
logger.break();
process.exit(1);
}
if (error instanceof z2.ZodError) {
logger.error("Validation failed:");
for (const [key, value] of Object.entries(error.flatten().fieldErrors)) {
logger.error(`- ${highlighter.info(key)}: ${value?.join(", ")}`);
}
logger.break();
process.exit(1);
}
if (error instanceof Error) {
logger.error(error.message);
logger.break();
process.exit(1);
}
logger.break();
process.exit(1);
}
// src/utils/registry/schema.ts
import { z as z3 } from "zod";
var registryItemTypeSchema = z3.enum([
"registry:style",
"registry:lib",
"registry:example",
"registry:block",
"registry:component",
"registry:ui",
"registry:hook",
"registry:theme",
"registry:page"
]);
var registryItemFileSchema = z3.object({
path: z3.string(),
content: z3.string().optional(),
type: registryItemTypeSchema,
target: z3.string().optional()
});
var registryItemTailwindSchema = z3.object({
config: z3.object({
content: z3.array(z3.string()).optional(),
theme: z3.record(z3.string(), z3.any()).optional(),
plugins: z3.array(z3.string()).optional()
}).optional()
});
var registryItemSchema = z3.object({
name: z3.string(),
type: registryItemTypeSchema,
description: z3.string().optional(),
dependencies: z3.array(z3.string()).optional(),
devDependencies: z3.array(z3.string()).optional(),
files: z3.array(registryItemFileSchema).optional(),
tailwind: registryItemTailwindSchema.optional(),
meta: z3.record(z3.string(), z3.any()).optional(),
docs: z3.string().optional()
});
var registryIndexSchema = z3.array(
registryItemSchema.extend({
files: z3.array(z3.union([z3.string(), registryItemFileSchema])).optional()
})
);
var registryResolvedItemsTreeSchema = registryItemSchema.pick({
dependencies: true,
devDependencies: true,
files: true,
tailwind: true,
docs: true
});
// src/utils/registry/index.ts
import deepmerge from "deepmerge";
import { z as z4 } from "zod";
// registry/react/tailwind-variants/components.ts
var componentsRegistry = [
{
"name": "rate",
"type": "registry:ui",
"relativePath": "ark-ui/rate",
"stylingName": "rate.tsx",
"dependencies": [
"@ark-ui/react",
"react-aria"
],
"files": [
{
"type": "registry:ui",
"path": "ui/ark-ui/rate/Rate.atoms.tsx",
"content": 'import { RateItemLayout, RateLayout } from "./rate";\nimport {\n URateItemRoot,\n URateItemRootProps,\n URateRoot,\n URateRootProps,\n URateItemIcon,\n useRateInternalProvider,\n} from "./Rate.underatoms";\n\n/*\n ====================================\n Rate\n ====================================\n*/\n\nexport type RateProps = URateRootProps;\nexport const Rate = (props: RateProps) => {\n return (\n <RateLayout\n renderRoot={(children, className) => (\n <URateRoot className={className} {...props}>\n {children}\n </URateRoot>\n )}\n styleProps={{ className: props.className, rateProps: props }}\n itemSlots={Array.from({ length: props.count ?? 3 }, (_, index) => (\n <RateItem key={index} index={index + 1} />\n ))}\n />\n );\n};\n\n/*\n ====================================\n RateItem\n ====================================\n*/\n\nexport type RateItemProps = URateItemRootProps;\nexport const RateItem = (props: RateItemProps) => {\n const rateProps = useRateInternalProvider();\n return (\n <RateItemLayout\n renderRoot={(children, className) => (\n <URateItemRoot {...props} className={className + " " + (props.className ?? "")}>\n {children}\n </URateItemRoot>\n )}\n styleProps={{ className: props.className, rateProps }}\n iconSlot={<URateItemIcon />}\n />\n );\n};\n',
"target": "underatom/components/ark-ui/rate/Rate.atoms.tsx"
},
{
"type": "registry:ui",
"path": "ui/ark-ui/rate/Rate.underatoms.tsx",
"content": 'import { RatingGroup } from "@ark-ui/react";\nimport { rateClass, rateItemClass, rateItemIconClass, RateStyleProps } from "./rate";\nimport { getGenericContext } from "../../../utils/utils";\nimport { mergeProps, useFocusRing } from "react-aria";\nimport { Rosette } from "../../../utils/Icons";\n\n/*\n ====================================\n Rate\n ====================================\n*/\n\nexport const { Provider: RateInternalProvider, useComponentContext: useRateInternalProvider } =\n getGenericContext<URateRootProps>("RateInternalProvider");\n\nexport type URateRootProps = RatingGroup.RootProps & RateStyleProps;\nexport const URateRoot = ({ children, ...props }: URateRootProps) => {\n return (\n <RatingGroup.Root {...props}>\n <RatingGroup.Control className={rateClass({ className: props.className, rateProps: props })}>\n <RateInternalProvider value={props}>{children}</RateInternalProvider>\n </RatingGroup.Control>\n </RatingGroup.Root>\n );\n};\n\n/*\n ====================================\n RateItem\n ====================================\n*/\n\nexport type URateItemRootProps = RatingGroup.ItemProps & RateStyleProps;\nexport const URateItemRoot = (props: URateItemRootProps) => {\n const rateProps = useRateInternalProvider();\n const { focusProps, isFocusVisible } = useFocusRing();\n return (\n <RatingGroup.Item\n {...mergeProps(props, focusProps)}\n data-ring={isFocusVisible}\n className={rateItemClass({ className: props.className, rateProps })}\n />\n );\n};\n\nexport type URateItemIconProps = {\n className?: string;\n};\nexport const URateItemIcon = (props: URateItemIconProps) => {\n const rateProps = useRateInternalProvider();\n return (\n <RatingGroup.ItemContext>\n {({ highlighted }) =>\n highlighted ? (\n <Rosette fill="currentColor" className={rateItemIconClass({ className: props.className, rateProps })} />\n ) : (\n <Rosette className={rateItemIconClass({ className: props.className, rateProps })} />\n )\n }\n </RatingGroup.ItemContext>\n );\n};\n',
"target": "underatom/components/ark-ui/rate/Rate.underatoms.tsx"
},
{
"type": "registry:ui",
"path": "ui/ark-ui/rate/rate.tsx",
"content": 'import { tv } from "../../../utils/extendedTV";\nimport type { RenderRoot } from "../../../utils/utils";\n\n/*\n ====================================\n Rate\n ====================================\n*/\n\nexport type RateStyleProps = {\n size?: "md";\n};\n\nexport type RateType = {\n className?: string;\n rateProps?: RateStyleProps;\n};\n\nexport const rateDefaults: Required<RateStyleProps> = {\n size: "md",\n};\n\nexport const rateClass = ({ className }: RateType) => {\n return `group/rate ${className}`;\n};\n\nexport const RateLayout = ({\n renderRoot,\n styleProps: { className },\n itemSlots,\n}: {\n renderRoot: RenderRoot;\n styleProps: RateType;\n itemSlots: React.ReactNode;\n}) => renderRoot(<>{itemSlots}</>, `h-fit w-fit flex flex-row ${className}`);\nexport type RateItemType = {\n className?: string;\n rateProps?: RateStyleProps;\n};\n\nexport const rateItemClass = ({ className }: RateItemType) => {\n return `group/rateItem rounded-[50px] z-1 data-[ring=true]:border-solid data-[ring=true]:border-primary-950 data-[ring=true]:border-1 ${className}`;\n};\n\nexport const rateItemIconClass = ({ className }: RateItemType) => {\n return `\n w-[22px]\n h-[22px]\n text-base-400\n group-active/rateItem:text-base-400\n group-data-[disabled]/rate:text-base-400\n group-hover/rateItem:text-base-600\n group-data-[ring=true]/rateItem:text-base-600\n group-data-[highlighted]/rateItem:text-warning-500\n group-hover/rateItem:group-data-[disabled]/rate:text-base-400\n group-data-[ring=true]/rateItem:group-data-[disabled]/rate:text-base-400\n group-data-[highlighted]/rateItem:group-data-[disabled]/rate:text-base-400\n group-data-[highlighted]/rateItem:group-active/rateItem:group-data-[disabled]/rate:text-base-400\n group-data-[highlighted]/rateItem:group-hover/rateItem:text-warning-500\n group-data-[highlighted]/rateItem:group-active/rateItem:text-warning-500\n group-data-[highlighted]/rateItem:group-data-[ring=true]/rateItem:text-warning-500\n ${className}\n `;\n};\n\nexport const RateItemLayout = ({\n renderRoot,\n styleProps: { className },\n iconSlot,\n}: {\n renderRoot: RenderRoot;\n styleProps: RateItemType;\n iconSlot: React.ReactNode;\n}) => renderRoot(<>{iconSlot}</>, `h-7 w-7 flex flex-row justify-center items-center ${className}`);\n\n',
"target": "underatom/components/ark-ui/rate/rate.tsx"
}
]
},
{
"name": "command",
"type": "registry:ui",
"relativePath": "cmdk/command",
"stylingName": "command.tsx",
"dependencies": [
"@radix-ui/react-switch",
"@radix-ui/react-avatar",
"cmdk",
"react-aria"
],
"files": [
{
"type": "registry:ui",
"path": "ui/cmdk/command/Command.atoms.tsx",
"content": 'import { AvatarImageProps } from "@radix-ui/react-avatar";\nimport {\n UCommandEmptyImage,\n UCommandEmptyImageProps,\n UCommandEmptyRoot,\n UCommandEmptyRootProps,\n UCommandEmptyText,\n UCommandFooterButtonIcon,\n UCommandFooterButtonRoot,\n UCommandFooterButtonRootProps,\n UCommandFooterElementKBDIcon,\n UCommandFooterElementKBDRoot,\n UCommandFooterElementKBDRootProps,\n UCommandFooterElementRoot,\n UCommandFooterElementRootProps,\n UCommandFooterElementText,\n UCommandFooterRoot,\n UCommandFooterRootProps,\n UCommandGroupItemBoxAvatarFallback,\n UCommandGroupItemBoxAvatarIcon,\n UCommandGroupItemBoxAvatarImage,\n UCommandGroupItemBoxAvatarLabel,\n UCommandGroupItemBoxAvatarRoot,\n UCommandGroupItemBoxAvatarRootProps,\n UCommandGroupItemBoxBadgeIcon,\n UCommandGroupItemBoxBadgeLabel,\n UCommandGroupItemBoxBadgeRoot,\n UCommandGroupItemBoxBadgeRootProps,\n UCommandGroupItemBoxButtonIcon,\n UCommandGroupItemBoxButtonRoot,\n UCommandGroupItemBoxButtonRootProps,\n UCommandGroupItemBoxIcon,\n UCommandGroupItemBoxLabel,\n UCommandGroupItemBoxRoot,\n UCommandGroupItemBoxRootProps,\n UCommandGroupItemCheckIcon,\n UCommandGroupItemKBDIcon,\n UCommandGroupItemKBDLabel,\n UCommandGroupItemKBDRoot,\n UCommandGroupItemKBDRootProps,\n UCommandGroupItemRoot,\n UCommandGroupItemRootProps,\n UCommandGroupRoot,\n UCommandGroupRootProps,\n UCommandGroupTitle,\n UCommandRoot,\n UCommandRootProps,\n UCommandSearchClearIcon,\n UCommandSearchClearRoot,\n UCommandSearchClearRootProps,\n UCommandSearchIcon,\n UCommandSearchRoot,\n UCommandSearchRootProps,\n UCommandSearchText,\n URadixCommandGroupItemBoxSwitchHandle,\n URadixCommandGroupItemBoxSwitchRoot,\n URadixCommandGroupItemBoxSwitchRootProps,\n useCommandGroupInternalProvider,\n useCommandGroupItemInternalProvider,\n useCommandInternalProvider,\n} from "./Command.underatoms";\nimport {\n CommandEmptyLayout,\n CommandFooterButtonLayout,\n CommandFooterElementIconKBDLayout,\n CommandFooterElementKBDLayout,\n CommandFooterElementKBDWithIconLayout,\n CommandFooterElementLayout,\n CommandFooterLayout,\n CommandGroupItemBoxAvatarLayout,\n CommandGroupItemBoxBadgeLayout,\n CommandGroupItemBoxBadgeWithIconLayout,\n CommandGroupItemBoxButtonLayout,\n CommandGroupItemBoxLayout,\n CommandGroupItemBoxSwitchLayout,\n CommandGroupItemBoxWithAvatarLayout,\n CommandGroupItemKBDLayout,\n CommandGroupItemKBDWithIconLayout,\n CommandGroupItemLayout,\n CommandGroupLayout,\n CommandLayout,\n CommandSearchClearLayout,\n CommandSearchLayout,\n} from "./command";\nimport { ReactNode } from "react";\n\n/*\n ====================================\n Command\n ====================================\n*/\nexport type CommandProps = UCommandRootProps & {\n searchSlot: ReactNode;\n groupSlots: ReactNode;\n footerSlot: ReactNode;\n emptySlot: ReactNode;\n};\nexport const Command = ({ searchSlot, groupSlots, footerSlot, emptySlot, ...props }: CommandProps) => (\n <CommandLayout\n renderRoot={(children, className) => (\n <UCommandRoot {...props} className={className}>\n {children}\n </UCommandRoot>\n )}\n styleProps={{ className: props.className, commandProps: props }}\n searchSlot={searchSlot}\n groupSlots={groupSlots}\n footerSlot={footerSlot}\n emptySlot={emptySlot}\n />\n);\n\n/*\n ====================================\n CommandSearch\n ====================================\n*/\n\nexport type CommandSearchProps = Omit<UCommandSearchRootProps, "children"> & {\n icon?: (className: string) => React.ReactNode;\n onClear?: () => void;\n};\nexport const CommandSearch = ({ icon, onClear, ...props }: CommandSearchProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandSearchLayout\n renderRoot={(children, className) => (\n <UCommandSearchRoot {...props} className={className}>\n {children}\n </UCommandSearchRoot>\n )}\n styleProps={{ className: props.className, commandProps }}\n iconSlot={icon && <UCommandSearchIcon>{icon}</UCommandSearchIcon>}\n textSlot={<UCommandSearchText />}\n clearSlot={onClear && <CommandSearchClear onPress={onClear} />}\n />\n );\n};\n\n/*\n ====================================\n CommandSearchClear\n ====================================\n*/\n\nexport type CommandSearchClearProps = Omit<UCommandSearchClearRootProps, "children">;\nexport const CommandSearchClear = (props: CommandSearchClearProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandSearchClearLayout\n renderRoot={(children, className) => (\n <UCommandSearchClearRoot {...props} className={className}>\n {children}\n </UCommandSearchClearRoot>\n )}\n styleProps={{ className: props.className, commandProps }}\n iconSlot={<UCommandSearchClearIcon />}\n />\n );\n};\n\n/*\n ====================================\n CommandFooter\n ====================================\n*/\n\nexport type CommandFooterProps = Omit<UCommandFooterRootProps, "children"> & {\n elementSlots: ReactNode;\n buttonSlot?: ReactNode;\n};\nexport const CommandFooter = ({ elementSlots, buttonSlot, ...props }: CommandFooterProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandFooterLayout\n renderRoot={(children, className) => (\n <UCommandFooterRoot {...props} className={className}>\n {children}\n </UCommandFooterRoot>\n )}\n styleProps={{ className: props.className, commandProps }}\n elementSlots={elementSlots}\n buttonSlot={buttonSlot}\n />\n );\n};\n\n/*\n ====================================\n CommandFooterButton\n ====================================\n*/\n\nexport type CommandFooterButtonProps = Omit<UCommandFooterButtonRootProps, "children"> & {\n icon: (className: string) => ReactNode;\n};\nexport const CommandFooterButton = ({ icon, ...props }: CommandFooterButtonProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandFooterButtonLayout\n renderRoot={(children, className) => (\n <UCommandFooterButtonRoot {...props} className={className}>\n {children}\n </UCommandFooterButtonRoot>\n )}\n styleProps={{ className: props.className, commandProps }}\n iconSlot={<UCommandFooterButtonIcon>{icon}</UCommandFooterButtonIcon>}\n />\n );\n};\n\n/*\n ====================================\n CommandFooterElement\n ====================================\n*/\n\nexport type CommandFooterElementProps = Omit<UCommandFooterElementRootProps, "children"> & {\n leftLabel?: string;\n rightLabel?: string;\n kbdSlot1?: ReactNode;\n kbdSlot2?: ReactNode;\n kbdSlot3?: ReactNode;\n kbdSlot4?: ReactNode;\n};\nexport const CommandFooterElement = ({\n leftLabel,\n rightLabel,\n kbdSlot1,\n kbdSlot2,\n kbdSlot3,\n kbdSlot4,\n ...props\n}: CommandFooterElementProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandFooterElementLayout\n renderRoot={(children, className) => (\n <UCommandFooterElementRoot {...props} className={className}>\n {children}\n </UCommandFooterElementRoot>\n )}\n styleProps={{ className: props.className, commandProps }}\n textSlot1={leftLabel && <UCommandFooterElementText>{leftLabel}</UCommandFooterElementText>}\n textSlot2={rightLabel && <UCommandFooterElementText>{rightLabel}</UCommandFooterElementText>}\n kBDSlot1={kbdSlot1}\n kBDSlot2={kbdSlot2}\n kBDSlot3={kbdSlot3}\n kBDSlot4={kbdSlot4}\n />\n );\n};\n\n/*\n ====================================\n CommandFooterElementKBD\n ====================================\n*/\n\nexport type CommandFooterElementKBDProps = Omit<UCommandFooterElementKBDRootProps, "children"> & {\n label?: string;\n};\nexport const CommandFooterElementKBD = ({ label, ...props }: CommandFooterElementKBDProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandFooterElementKBDLayout\n renderRoot={(children, className) => (\n <UCommandFooterElementKBDRoot {...props} className={className}>\n {children}\n </UCommandFooterElementKBDRoot>\n )}\n styleProps={{ className: props.className, commandProps }}\n labelSlot={label && <UCommandFooterElementText>{label}</UCommandFooterElementText>}\n />\n );\n};\n\nexport type CommandFooterElementIconKBDProps = Omit<UCommandFooterElementKBDRootProps, "children"> & {\n icon?: (className: string) => ReactNode;\n};\nexport const CommandFooterElementIconKBD = ({ icon, ...props }: CommandFooterElementIconKBDProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandFooterElementIconKBDLayout\n renderRoot={(children, className) => (\n <UCommandFooterElementKBDRoot {...props} className={className}>\n {children}\n </UCommandFooterElementKBDRoot>\n )}\n styleProps={{ className: props.className, commandProps }}\n iconSlot={icon && <UCommandFooterElementKBDIcon>{icon}</UCommandFooterElementKBDIcon>}\n />\n );\n};\n\nexport type CommandFooterElementKBDWithIconProps = Omit<UCommandFooterElementKBDRootProps, "children"> & {\n icon?: (className: string) => ReactNode;\n label?: string;\n};\nexport const CommandFooterElementKBDWithIcon = ({ icon, label, ...props }: CommandFooterElementKBDWithIconProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandFooterElementKBDWithIconLayout\n renderRoot={(children, className) => (\n <UCommandFooterElementKBDRoot {...props} className={className}>\n {children}\n </UCommandFooterElementKBDRoot>\n )}\n styleProps={{ className: props.className, commandProps }}\n iconSlot={icon && <UCommandFooterElementKBDIcon>{icon}</UCommandFooterElementKBDIcon>}\n labelSlot={label && <UCommandFooterElementText>{label}</UCommandFooterElementText>}\n />\n );\n};\n\n/*\n ====================================\n CommandEmpty\n ====================================\n*/\n\nexport type CommandEmptyProps = Omit<UCommandEmptyRootProps, "children"> & {\n text: string;\n image: UCommandEmptyImageProps;\n};\nexport const CommandEmpty = ({ text, image, ...props }: CommandEmptyProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandEmptyLayout\n renderRoot={(children, className) => (\n <UCommandEmptyRoot {...props} className={className}>\n {children}\n </UCommandEmptyRoot>\n )}\n styleProps={{ className: props.className, commandProps }}\n textSlot={<UCommandEmptyText>{text}</UCommandEmptyText>}\n imageSlot={<UCommandEmptyImage {...image} />}\n />\n );\n};\n\n/*\n ====================================\n CommandGroup\n ====================================\n*/\n\nexport type CommandGroupProps = Omit<UCommandGroupRootProps, "children"> & {\n title?: string;\n itemSlots: ReactNode[];\n};\n\nexport const CommandGroup = ({ title, itemSlots, ...props }: CommandGroupProps) => {\n const commandProps = useCommandInternalProvider();\n return (\n <CommandGroupLayout\n renderRoot={(children, className) => (\n <UCommandGroupRoot {...props} className={className}>\n {children}\n </UCommandGroupRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps: props }}\n titleSlot={title && <UCommandGroupTitle>{title}</UCommandGroupTitle>}\n itemSlots={itemSlots}\n />\n );\n};\n\n/*\n ====================================\n CommandGroupItem\n ====================================\n*/\n\nexport type CommandGroupItemProps = Omit<UCommandGroupItemRootProps, "children"> & {\n boxSlot: ReactNode;\n kbdSlot?: ReactNode;\n};\nexport const CommandGroupItem = ({ boxSlot, kbdSlot, ...props }: CommandGroupItemProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n return (\n <CommandGroupItemLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemRoot {...props} className={className}>\n {children}\n </UCommandGroupItemRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps, commandGroupItemProps: props }}\n boxSlot={boxSlot}\n kBDSlot={kbdSlot}\n checkIconSlot={<UCommandGroupItemCheckIcon />}\n />\n );\n};\n\n/*\n ====================================\n CommandGroupItemKBD\n ====================================\n*/\n\nexport type CommandGroupItemKBDProps = Omit<UCommandGroupItemKBDRootProps, "children"> & {\n label: string;\n};\nexport const CommandGroupItemKBD = ({ label, ...props }: CommandGroupItemKBDProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemKBDLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemKBDRoot {...props} className={className}>\n {children}\n </UCommandGroupItemKBDRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps, commandGroupItemProps }}\n labelSlot={<UCommandGroupItemKBDLabel>{label}</UCommandGroupItemKBDLabel>}\n />\n );\n};\n\nexport type CommandGroupItemKBDWithIconProps = Omit<UCommandGroupItemKBDRootProps, "children"> & {\n icon?: (className: string) => React.ReactNode;\n label?: string;\n};\nexport const CommandGroupItemKBDWithIcon = ({ icon, label, ...props }: CommandGroupItemKBDWithIconProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemKBDWithIconLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemKBDRoot {...props} className={className}>\n {children}\n </UCommandGroupItemKBDRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps, commandGroupItemProps }}\n iconSlot={icon && <UCommandGroupItemKBDIcon>{icon}</UCommandGroupItemKBDIcon>}\n labelSlot={label && <UCommandGroupItemKBDLabel>{label}</UCommandGroupItemKBDLabel>}\n />\n );\n};\n\n/*\n ====================================\n CommandGroupItemBox\n ====================================\n*/\n\nexport type CommandGroupItemBoxProps = Omit<UCommandGroupItemBoxRootProps, "children"> & {\n icon?: (className: string) => React.ReactNode;\n label: string;\n badgeSlot?: ReactNode;\n switchSlot?: ReactNode;\n buttonSlot1?: ReactNode;\n buttonSlot2?: ReactNode;\n buttonSlot3?: ReactNode;\n};\nexport const CommandGroupItemBox = ({\n icon,\n label,\n badgeSlot,\n switchSlot,\n buttonSlot1,\n buttonSlot2,\n buttonSlot3,\n ...props\n}: CommandGroupItemBoxProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemBoxLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemBoxRoot {...props} className={className}>\n {children}\n </UCommandGroupItemBoxRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps, commandGroupItemProps }}\n iconSlot={icon && <UCommandGroupItemBoxIcon>{icon}</UCommandGroupItemBoxIcon>}\n labelSlot={<UCommandGroupItemBoxLabel>{label}</UCommandGroupItemBoxLabel>}\n badgeSlot={badgeSlot}\n switchSlot={switchSlot}\n buttonSlot1={buttonSlot1}\n buttonSlot2={buttonSlot2}\n buttonSlot3={buttonSlot3}\n />\n );\n};\n\nexport type CommandGroupItemBoxWithAvatarProps = Omit<UCommandGroupItemBoxRootProps, "children"> & {\n label: string;\n avatarSlot?: ReactNode;\n badgeSlot?: ReactNode;\n switchSlot?: ReactNode;\n buttonSlot1?: ReactNode;\n buttonSlot2?: ReactNode;\n buttonSlot3?: ReactNode;\n};\nexport const CommandGroupItemBoxWithAvatar = ({\n label,\n avatarSlot,\n badgeSlot,\n switchSlot,\n buttonSlot1,\n buttonSlot2,\n buttonSlot3,\n ...props\n}: CommandGroupItemBoxWithAvatarProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemBoxWithAvatarLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemBoxRoot {...props} className={className}>\n {children}\n </UCommandGroupItemBoxRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps, commandGroupItemProps }}\n avatarSlot={avatarSlot}\n labelSlot={<UCommandGroupItemBoxLabel>{label}</UCommandGroupItemBoxLabel>}\n badgeSlot={badgeSlot}\n switchSlot={switchSlot}\n buttonSlot1={buttonSlot1}\n buttonSlot2={buttonSlot2}\n buttonSlot3={buttonSlot3}\n />\n );\n};\n\n/*\n====================================\nCommandGroupItemBoxAvatar\n====================================\n*/\nexport type CommandGroupItemBoxAvatarProps = Omit<UCommandGroupItemBoxAvatarRootProps, "children"> & {\n imageProps?: AvatarImageProps;\n fallbackText?: string;\n};\n\nexport const CommandGroupItemBoxAvatar = ({ imageProps, fallbackText, ...props }: CommandGroupItemBoxAvatarProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemBoxAvatarLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemBoxAvatarRoot {...props} className={className}>\n {children}\n </UCommandGroupItemBoxAvatarRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps, commandGroupItemProps }}\n imageSlot={imageProps && <UCommandGroupItemBoxAvatarImage {...imageProps} />}\n labelSlot={\n fallbackText && (\n <UCommandGroupItemBoxAvatarFallback>\n <UCommandGroupItemBoxAvatarLabel>{fallbackText}</UCommandGroupItemBoxAvatarLabel>{" "}\n </UCommandGroupItemBoxAvatarFallback>\n )\n }\n />\n );\n};\n\nexport type CommandGroupItemBoxAvatarWithIconProps = Omit<UCommandGroupItemBoxAvatarRootProps, "children"> & {\n imageProps?: AvatarImageProps;\n fallbackIcon?: (className: string) => React.ReactNode;\n};\nexport const CommandGroupItemBoxAvatarWithIcon = ({\n imageProps,\n fallbackIcon,\n ...props\n}: CommandGroupItemBoxAvatarWithIconProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemBoxAvatarLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemBoxAvatarRoot {...props} className={className}>\n {children}\n </UCommandGroupItemBoxAvatarRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps, commandGroupItemProps }}\n imageSlot={imageProps && <UCommandGroupItemBoxAvatarImage {...imageProps} />}\n labelSlot={\n fallbackIcon && (\n <UCommandGroupItemBoxAvatarFallback>\n <UCommandGroupItemBoxAvatarIcon>{fallbackIcon}</UCommandGroupItemBoxAvatarIcon>\n </UCommandGroupItemBoxAvatarFallback>\n )\n }\n />\n );\n};\n\n/*\n ====================================\n CommandGroupItemBoxSwitch\n ====================================\n*/\n\nexport type CommandGroupItemBoxSwitchProps = Omit<URadixCommandGroupItemBoxSwitchRootProps, "children">;\nexport const CommandGroupItemBoxSwitch = (props: CommandGroupItemBoxSwitchProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemBoxSwitchLayout\n renderRoot={(children, className) => (\n <URadixCommandGroupItemBoxSwitchRoot {...props} className={className}>\n {children}\n </URadixCommandGroupItemBoxSwitchRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps, commandGroupItemProps }}\n handleSlot={<URadixCommandGroupItemBoxSwitchHandle />}\n />\n );\n};\n\n/*\n ====================================\n CommandGroupItemBoxButton\n ====================================\n*/\n\nexport type CommandGroupItemBoxButtonProps = Omit<UCommandGroupItemBoxButtonRootProps, "children"> & {\n icon: (className: string) => React.ReactNode;\n};\nexport const CommandGroupItemBoxButton = ({ icon, ...props }: CommandGroupItemBoxButtonProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemBoxButtonLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemBoxButtonRoot {...props} className={className}>\n {children}\n </UCommandGroupItemBoxButtonRoot>\n )}\n styleProps={{ className: props.className, commandProps, commandGroupProps, commandGroupItemProps }}\n iconSlot={<UCommandGroupItemBoxButtonIcon>{icon}</UCommandGroupItemBoxButtonIcon>}\n />\n );\n};\n\n/*\n ====================================\n CommandGroupItemBoxBadge\n ====================================\n*/\nexport type CommandGroupItemBoxBadgeProps = Omit<UCommandGroupItemBoxBadgeRootProps, "children"> & {\n label: string;\n};\n\nexport const CommandGroupItemBoxBadge = ({ label, ...props }: CommandGroupItemBoxBadgeProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemBoxBadgeLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemBoxBadgeRoot {...props} className={className}>\n {children}\n </UCommandGroupItemBoxBadgeRoot>\n )}\n styleProps={{\n className: props.className,\n commandProps,\n commandGroupProps,\n commandGroupItemProps,\n commandGroupItemBoxBadgeProps: props,\n }}\n labelSlot={<UCommandGroupItemBoxBadgeLabel>{label}</UCommandGroupItemBoxBadgeLabel>}\n />\n );\n};\n\nexport type CommandGroupItemBoxBadgeWithIconProps = Omit<UCommandGroupItemBoxBadgeRootProps, "children"> & {\n icon?: (className: string) => React.ReactNode;\n label?: string;\n};\n\nexport const CommandGroupItemBoxBadgeWithIcon = ({ icon, label, ...props }: CommandGroupItemBoxBadgeWithIconProps) => {\n const commandProps = useCommandInternalProvider();\n const commandGroupProps = useCommandGroupInternalProvider();\n const commandGroupItemProps = useCommandGroupItemInternalProvider();\n return (\n <CommandGroupItemBoxBadgeWithIconLayout\n renderRoot={(children, className) => (\n <UCommandGroupItemBoxBadgeRoot {...props} className={className}>\n {children}\n </UCommandGroupItemBoxBadgeRoot>\n )}\n styleProps={{\n className: props.className,\n commandProps,\n commandGroupProps,\n commandGroupItemProps,\n commandGroupItemBoxBadgeProps: props,\n }}\n iconSlot={icon && <UCommandGroupItemBoxBadgeIcon>{icon}</UCommandGroupItemBoxBadgeIcon>}\n labelSlot={label && <UCommandGroupItemBoxBadgeLabel>{label}</UCommandGroupItemBoxBadgeLabel>}\n />\n );\n};\n',
"target": "underatom/components/cmdk/command/Command.atoms.tsx"
},
{
"type": "registry:ui",
"path": "ui/cmdk/command/Command.underatoms.tsx",
"content": 'import { Command, CommandInput } from "cmdk";\nimport React, { ReactNode, useRef, useState } from "react";\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from "react-aria";\nimport { Check, X } from "../../../utils/Icons";\nimport * as RadixSwitch from "@radix-ui/react-switch";\nimport * as RadixAvatar from "@radix-ui/react-avatar";\nimport { getGenericContext } from "../../../utils/utils";\nimport {\n CommandGroupItemBoxBadgeStyleProps,\n CommandGroupItemStyleProps,\n CommandGroupStyleProps,\n CommandStyleProps,\n commandClass,\n commandEmptyClass,\n commandEmptyImageClass,\n commandEmptyTextClass,\n commandFooterButtonClass,\n commandFooterButtonIconClass,\n commandFooterClass,\n commandFooterElementClass,\n commandFooterElementKBDClass,\n commandFooterElementKBDIconClass,\n commandFooterElementKBDLabelClass,\n commandFooterElementTextClass,\n commandGroupClass,\n commandGroupItemBoxAvatarClass,\n commandGroupItemBoxAvatarIconClass,\n commandGroupItemBoxAvatarImageClass,\n commandGroupItemBoxAvatarLabelClass,\n commandGroupItemBoxBadgeClass,\n commandGroupItemBoxBadgeIconClass,\n commandGroupItemBoxBadgeLabelClass,\n commandGroupItemBoxButtonClass,\n commandGroupItemBoxButtonIconClass,\n commandGroupItemBoxClass,\n commandGroupItemBoxIconClass,\n commandGroupItemBoxLabelClass,\n commandGroupItemBoxSwitchClass,\n commandGroupItemBoxSwitchHandleClass,\n commandGroupItemCheckIconClass,\n commandGroupItemClass,\n commandGroupItemKBDClass,\n commandGroupItemKBDIconClass,\n commandGroupItemKBDLabelClass,\n commandGroupTitleClass,\n commandSearchClass,\n commandSearchClearClass,\n commandSearchClearIconClass,\n commandSearchIconClass,\n commandSearchTextClass,\n} from "./command";\n\n/*\n ====================================\n Command\n ====================================\n*/\n\nexport const { Provider: CommandInternalProvider, useComponentContext: useCommandInternalProvider } =\n getGenericContext<UCommandRootProps>("CommandInternalProvider");\n\nexport type UCommandRootProps = CommandStyleProps & React.ComponentPropsWithoutRef<typeof Command>;\nexport const UCommandRoot = React.forwardRef<React.ElementRef<typeof Command>, UCommandRootProps>(\n ({ className, ...props }, ref) => {\n return (\n <Command ref={ref} className={commandClass({ className, commandProps: props })} {...props}>\n <CommandInternalProvider value={props}>{props.children}</CommandInternalProvider>\n </Command>\n );\n },\n);\n\nexport type UCommandListProps = React.ComponentPropsWithoutRef<typeof Command.List>;\nexport const UCommandList = Command.List;\n\n/*\n ====================================\n CommandSearch\n ====================================\n*/\n\nexport const { Provider: CommandSearchInternalProvider, useComponentContext: useCommandSearchParentProps } =\n getGenericContext<\n UCommandSearchRootProps & {\n inputRef: React.RefObject<HTMLInputElement>;\n setIsFocused: (arg: boolean) => void;\n }\n >("CommandSearchInternalProvider");\n\nexport type UCommandSearchRootProps = React.ComponentPropsWithoutRef<typeof Command.Input>;\nexport const UCommandSearchRoot = ({ children, className, ...props }: UCommandSearchRootProps) => {\n const commandProps = useCommandInternalProvider();\n const inputRef = useRef<HTMLInputElement>(null);\n const [isFocused, setIsFocused] = useState(false);\n const handleClick = () => {\n inputRef.current?.focus();\n };\n\n return (\n <div\n {...mergeProps(props, {\n onClick: handleClick,\n })}\n data-ring={isFocused}\n className={commandSearchClass({ className, commandProps })}\n >\n <CommandSearchInternalProvider value={{ ...props, inputRef, setIsFocused }}>\n {children}\n </CommandSearchInternalProvider>\n </div>\n );\n};\n\nexport type UCommandSearchIconProps = {\n /** Icon render function */\n children: (className: string) => ReactNode;\n className?: string;\n};\nexport const UCommandSearchIcon = ({ children, className }: UCommandSearchIconProps) => {\n const commandProps = useCommandInternalProvider();\n return <>{children(commandSearchIconClass({ className, commandProp