@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
272 lines (262 loc) • 9.82 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/password-input/index.ts
var password_input_exports = {};
__export(password_input_exports, {
PasswordInput: () => namespace_exports,
PasswordInputContext: () => PasswordInputContext,
PasswordInputControl: () => PasswordInputControl,
PasswordInputIndicator: () => PasswordInputIndicator,
PasswordInputInput: () => PasswordInputInput,
PasswordInputLabel: () => PasswordInputLabel,
PasswordInputRoot: () => PasswordInputRoot,
PasswordInputRootProvider: () => PasswordInputRootProvider,
PasswordInputVisibilityTrigger: () => PasswordInputVisibilityTrigger,
usePasswordInput: () => import_password_input4.usePasswordInput,
usePasswordInputContext: () => import_password_input4.usePasswordInputContext
});
module.exports = __toCommonJS(password_input_exports);
// src/components/password-input/password-input.tsx
var import_password_input = require("@ark-ui/react/password-input");
var import_recipes = require("@fidely-ui/styled-system/recipes");
// src/system/make-style-context.tsx
var React = __toESM(require("react"), 1);
var import_jsx = require("@fidely-ui/styled-system/jsx");
var import_css = require("@fidely-ui/styled-system/css");
var import_jsx_runtime = require("react/jsx-runtime");
var canForward = (prop, variantKeys, opts = {}) => opts.forwardProps?.includes(prop) || !variantKeys.includes(prop) && !(0, import_jsx.isCssProperty)(prop);
function makeStyleContext(recipe) {
const Ctx = React.createContext(null);
function withSlotRootProvider(Component) {
const Comp = (props) => {
const [variantProps, rest] = recipe.splitVariantProps(props);
const slots = recipe(variantProps);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ctx.Provider, { value: slots, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...rest }) });
};
Comp.displayName = "FidelyRoot";
return Comp;
}
function withSlotProvider2(Component, slot, opts) {
const Styled = (0, import_jsx.styled)(
Component,
{},
{
shouldForwardProp: (prop, variantKeys) => canForward(prop, variantKeys, opts)
}
);
const Comp = React.forwardRef((props, ref) => {
const [variantProps, rest] = recipe.splitVariantProps(props);
const slots = recipe(variantProps);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ctx.Provider, { value: slots, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Styled,
{
...rest,
ref,
className: (0, import_css.cx)(slots?.[slot], props.className)
}
) });
});
Comp.displayName = `FidelySlotProvider(${String(slot)})`;
return Comp;
}
function withSlotContext2(Component, slot) {
const Styled = (0, import_jsx.styled)(Component);
const Comp = React.forwardRef((props, ref) => {
const slots = React.useContext(Ctx);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Styled,
{
...props,
ref,
className: (0, import_css.cx)(slots?.[slot], props.className)
}
);
});
Comp.displayName = `FidelySlotConsumer(${String(slot)})`;
return Comp;
}
return { withSlotRootProvider, withSlotProvider: withSlotProvider2, withSlotContext: withSlotContext2 };
}
// src/components/icons/create-icon.tsx
var React2 = __toESM(require("react"), 1);
var import_factory = require("@ark-ui/react/factory");
var import_jsx_runtime2 = require("react/jsx-runtime");
function createIcon(path) {
return React2.forwardRef(function Icon(props, ref) {
const { size = 20, ...rest } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_factory.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/FiEyeIcon.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var FiEyeIcon = createIcon(
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"circle",
{
cx: "12",
cy: "12",
r: "3",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
] })
);
// src/components/icons/FiEyeSlashIcon.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var FiEyeSlashIcon = createIcon(
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"path",
{
d: "M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.47 21.47 0 0 1 5.06-5.94",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"path",
{
d: "M9.88 9.88A3 3 0 0 0 12 15a3 3 0 0 0 3-3",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"path",
{
d: "M1 1l22 22",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"path",
{
d: "M22 12s-4 7-10 7a10.94 10.94 0 0 1-4.06-.76",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
] })
);
// src/components/password-input/password-input.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var { withSlotProvider, withSlotContext } = makeStyleContext(import_recipes.passwordInput);
var PasswordInputRootProvider = withSlotProvider(import_password_input.PasswordInput.RootProvider, "root");
var PasswordInputRoot = withSlotProvider(import_password_input.PasswordInput.Root, "root");
var PasswordInputInput = withSlotContext(import_password_input.PasswordInput.Input, "input");
var PasswordInputLabel = withSlotContext(import_password_input.PasswordInput.Label, "label");
var PasswordInputControl = withSlotContext(import_password_input.PasswordInput.Control, "control");
var PasswordInputIndicator = withSlotContext((props) => {
const {
fallbackIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FiEyeSlashIcon, {}),
idleIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FiEyeIcon, {}),
children,
...rest
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_password_input.PasswordInput.Indicator,
{
...rest,
fallback: props.fallback ?? fallbackIcon,
children: children ?? idleIcon
}
);
}, "indicator");
var PasswordInputVisibilityTrigger = withSlotContext(import_password_input.PasswordInput.VisibilityTrigger, "visibilityTrigger");
var PasswordInputContext = import_password_input.PasswordInput.Context;
// src/components/password-input/index.ts
var import_password_input4 = require("@ark-ui/react/password-input");
// src/components/password-input/namespace.ts
var namespace_exports = {};
__export(namespace_exports, {
Context: () => PasswordInputContext,
Control: () => PasswordInputControl,
Indicator: () => PasswordInputIndicator,
Input: () => PasswordInputInput,
Label: () => PasswordInputLabel,
Root: () => PasswordInputRoot,
RootProvider: () => PasswordInputRootProvider,
VisibilityTrigger: () => PasswordInputVisibilityTrigger
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
PasswordInput,
PasswordInputContext,
PasswordInputControl,
PasswordInputIndicator,
PasswordInputInput,
PasswordInputLabel,
PasswordInputRoot,
PasswordInputRootProvider,
PasswordInputVisibilityTrigger,
usePasswordInput,
usePasswordInputContext
});