@fidely-ui/react
Version:
Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps
251 lines (238 loc) • 8.84 kB
JavaScript
'use client'
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/command-input/index.ts
var command_input_exports = {};
__export(command_input_exports, {
CommandInput: () => CommandInput
});
module.exports = __toCommonJS(command_input_exports);
// src/components/command-input/command-input.tsx
var React3 = __toESM(require("react"), 1);
var import_css2 = require("@fidely-ui/styled-system/css");
var import_recipes4 = require("@fidely-ui/styled-system/recipes");
// src/components/group/group.tsx
var React = __toESM(require("react"), 1);
var import_factory = require("@ark-ui/react/factory");
var import_jsx = require("@fidely-ui/styled-system/jsx");
var import_recipes = require("@fidely-ui/styled-system/recipes");
var import_css = require("@fidely-ui/styled-system/css");
var import_jsx_runtime = require("react/jsx-runtime");
var StyledGroup = (0, import_jsx.styled)(import_factory.ark.div, import_recipes.group);
var Group = React.forwardRef(
function Group2(props, ref) {
const {
alignItems = "center",
justifyContent = "flex-start",
flexWrap,
children,
className,
...rest
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
StyledGroup,
{
ref,
alignItems,
justifyContent,
flexWrap,
...rest,
className: (0, import_css.cx)(className),
children
}
);
}
);
Group.displayName = "Group";
// src/components/kbd/index.tsx
var import_factory2 = require("@ark-ui/react/factory");
var import_jsx2 = require("@fidely-ui/styled-system/jsx");
var import_recipes2 = require("@fidely-ui/styled-system/recipes");
var Kbd = (0, import_jsx2.styled)(import_factory2.ark.kbd, import_recipes2.kbd);
// src/components/flex/index.tsx
var import_react = require("react");
var import_jsx3 = require("@fidely-ui/styled-system/jsx");
var import_patterns = require("@fidely-ui/styled-system/patterns");
// src/utils/split-props.ts
function splitProps(props, patternKeys) {
const patternProps = {};
const restProps = {};
for (const key in props) {
if (patternKeys.includes(key)) {
patternProps[key] = props[key];
} else {
restProps[key] = props[key];
}
}
return [patternProps, restProps];
}
// src/components/flex/index.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Flex = (0, import_react.forwardRef)(
function Flex2(props, ref) {
const [patternProps, restProps] = splitProps(props, [
"align",
"justify",
"direction",
"wrap",
"basis",
"grow",
"shrink",
"gap"
]);
const styles = import_patterns.flex.raw(patternProps);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx3.styled.div, { ref, ...styles, ...restProps });
}
);
Flex.displayName = "Flex";
// src/components/text/index.tsx
var import_react2 = require("react");
var import_factory3 = require("@ark-ui/react/factory");
var import_jsx4 = require("@fidely-ui/styled-system/jsx");
var import_recipes3 = require("@fidely-ui/styled-system/recipes");
var import_jsx_runtime3 = require("react/jsx-runtime");
var StyledText = (0, import_jsx4.styled)(import_factory3.ark.p, import_recipes3.text);
var Text = (0, import_react2.forwardRef)(
function Text2(props, ref) {
const { className, ...rest } = props;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledText, { ref, ...rest });
}
);
Text.displayName = "Text";
// src/utils/is-mobile-device.ts
function isMobileDevice() {
if (typeof navigator === "undefined") return false;
return /android|bb\d+|meego|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(?:hone|od|pad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(?:ob|in)i|palm(?: os)?|phone|p(?:ixi|re)\/|plucker|pocket|psp|series(?:4|6)0|symbian|treo|up\.(?:browser|link)|vodafone|wap|windows ce|windows phone|xda|xiino|zte-/i.test(
navigator.userAgent
);
}
// src/components/icons/create-icon.tsx
var React2 = __toESM(require("react"), 1);
var import_factory4 = require("@ark-ui/react/factory");
var import_jsx_runtime4 = require("react/jsx-runtime");
function createIcon(path) {
return React2.forwardRef(function Icon(props, ref) {
const { size = 20, ...rest } = props;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_factory4.ark.svg,
{
ref,
width: size,
height: size,
viewBox: "0 0 24 24",
fill: "currentColor",
xmlns: "http://www.w3.org/2000/svg",
...rest,
children: path
}
);
});
}
// src/components/icons/FiSearch.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var FiSearch = createIcon(
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"path",
{
d: "M21 21l-4.35-4.35M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16z",
stroke: "currentColor",
strokeWidth: "2",
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
);
// src/components/command-input/command-input.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var CommandInput = React3.forwardRef(function CommandInput2(props, ref) {
const {
shortcut,
onOpen,
placeholder = "Search...",
leftElement,
className,
...rest
} = props;
const slotStyles = (0, import_recipes4.commandInput)();
const [isMobile, setIsMobile] = React3.useState(false);
const [resolvedShortcut, setResolvedShortcut] = React3.useState(
null
);
React3.useEffect(() => {
const mobile = isMobileDevice();
setIsMobile(mobile);
if (!mobile) {
const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
setResolvedShortcut(shortcut ?? (isMac ? "\u2318 + K" : "Ctrl + K"));
}
}, [shortcut]);
React3.useEffect(() => {
if (isMobile || !resolvedShortcut) return;
const parts = resolvedShortcut.split("+").map((p) => p.trim().toLowerCase());
const handleKeyDown = (e) => {
const pressed = [];
if (e.metaKey) pressed.push("\u2318");
if (e.ctrlKey) pressed.push("ctrl");
pressed.push(e.key.toLowerCase());
const combo = pressed.join(" ");
const target = parts.join(" ").toLowerCase();
if (combo === target) {
e.preventDefault();
onOpen?.();
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [resolvedShortcut, onOpen, isMobile]);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
Group,
{
as: "button",
ref,
onClick: onOpen,
"aria-haspopup": "dialog",
"aria-expanded": false,
className: (0, import_css2.cx)(slotStyles, className),
...rest,
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Flex, { alignItems: "center", gap: "2", children: [
leftElement ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FiSearch, {}),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "fg.muted", children: placeholder })
] }),
!isMobile && resolvedShortcut ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Flex, { gap: "1", children: resolvedShortcut.split("+").map((key, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Kbd, { children: key.trim() }, i)) }) : null
]
}
);
});
CommandInput.displayName = "CommandInput";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
CommandInput
});